@bramus@front-end.social
@bramus@front-end.social avatar

bramus

@bramus@front-end.social

Chrome Developer Relations at Google (CSS + Web UI + DevTools). CSSWG Member. PADI Divemaster. Blogs at bram.us

This profile is from a federated server and may be incomplete. Browse more on the original instance.

pawelgrzybek, to CSS
@pawelgrzybek@mastodon.social avatar

@bramus is on fire. Another incredible resource by this fella!

Introducing "Unleash the power of Scroll-Driven Animations"

https://developer.chrome.com/blog/scroll-driven-animations-video-course

bramus,
@bramus@front-end.social avatar

@pawelgrzybek Thank you, kind sir! 😊

kizu, to random
@kizu@front-end.social avatar

@argyleink @Una @bramus I know that there are plans to ship anchor positioning as it is currently implemented in Canary, but could it be possible to prioritize at least https://issues.chromium.org/issues/339041275 (I just filled the issue, as I did not find one for tracking it)?

It was a feature that was working in previous implementations of anchor positioning, that is specified, and will make it much easier to use it for many cases.

bramus,
@bramus@front-end.social avatar

@kizu @argyleink @Una Thanks for filing! CC’d one of the relevant engineers for them to pick it up.

bramus, to random
@bramus@front-end.social avatar

📣 Introducing “Unleash the Power of Scroll-Driven Animations”

I built a thing: a 10-part video course that teaches you all there is to know about scroll-driven animations with CSS or JavaScript.

https://developer.chrome.com/blog/scroll-driven-animations-video-course?hl=en

bramus,
@bramus@front-end.social avatar

@mdavis https://www.bram.us/2023/06/26/faking-a-snapped-selector-with-scroll-driven-animations/

bramus,
@bramus@front-end.social avatar

@walpolea Very nice demo! 🤩

And thanks for your kind words. Glad you liked it :)

css, to CSS
@css@front-end.social avatar

💡 CSS Tip!

To target the html element, you either use "html {}" or ":root {}" but thanks to CSS nesting you can simply use "& {}"

When used alone, the nesting selector will match the root element!

A one-character selector 🤯

⚠️ It has a lower specificity than html and :root

Online Version: https://css-tip.com/root-selector/

bramus,
@bramus@front-end.social avatar

@hi_mayank @css

@scope (&) {  
 & {  
--foo: bar;  
 }  
}
bramus, to CSS
@bramus@front-end.social avatar

📝 Misconceptions about CSS Specificity

To remove some of the confusion, here’s a list of misconceptions about Specificity in CSS …

https://www.bram.us/2024/05/05/misconceptions-about-css-specificity/

bramus, to random
@bramus@front-end.social avatar

Ooh, Airbnb released a very nice page that’s using Scroll-Driven Animations.

Here’s me doing an impromptu check of it using a Chrome DevTools extension I built to help you debug these.

https://www.youtube.com/watch?v=7DtzR-dWJCQ

bramus,
@bramus@front-end.social avatar

Links:

bramus,
@bramus@front-end.social avatar

@pawelgrzybek Heheh, thanks! 😄

ryantownsend, to random
@ryantownsend@webperf.social avatar

@bramus reading through the Virtual Keyboard shenanigans and your name pops up a lot. Firstly, thank you for trying to make some sense of it all / standardise 🙏

Is there a reason there's no viewport unit for this? (kinda like a modified svh) or has that idea been proposed/rejected for some reason?

Unless I'm missing something, it seems overly complex to change how the viewport behaves across a whole site just for the occasional situation you need something to float above a keyboard?

bramus,
@bramus@front-end.social avatar

@ryantownsend @Schepp In Chrome you can use the interactive-widget key in the viewport meta tag to change the resize behavior.

https://developer.chrome.com/blog/viewport-resize-behavior#opting_in_to_a_different_behavior

Unfortunately Chrome is the only browser to support this.

bramus,
@bramus@front-end.social avatar

@ryantownsend @Schepp Great use-case! Could you leave this as a comment on this CSSWG issue?

https://github.com/w3c/csswg-drafts/issues/7475#issuecomment-1182982687

bramus,
@bramus@front-end.social avatar

@ryantownsend @Schepp Thanks!

bramus, (edited ) to random
@bramus@front-end.social avatar

🎉🍾 View Transitions Excitement!

Intent to Ship: View Transitions Same-Origin Navigation

https://groups.google.com/a/chromium.org/g/blink-dev/c/LsA567xpe7k

Soon you'll no longer have to rearchitect your website to an SPA in order to use View Transitions, as Cross-Document View Transitions work with MPAs!

To be included in Chrome 127, which goes stable mid July 2024.

bramus,
@bramus@front-end.social avatar

Awaiting a blog post with all necessary info + an update of our documentation, you can check out this series of posts I did earlier:

https://front-end.social/@bramus/112169845169887324

bramus, to random
@bramus@front-end.social avatar

“If View Transitions and Scroll-Driven Animations had a baby …”

Last week I gave a talk at @css__cafe on how I combined two of my favorite web features and built a “Scroll-Driven View Transition”

Check out the slides and watch the recording on my blog!

https://www.bram.us/2024/04/29/if-view-transitions-and-scroll-driven-animations-had-a-baby-css-cafe/

tomayac, to random
@tomayac@toot.cafe avatar

First picture:

  • Kilometers: 00.000
    -Time: 00:00:00
  • Marathons ran: 0

Second picture:

  • Kilometers: 42.195
  • Time: 04:09:48
  • Marathons ran: 1

Super proud of being a of the 19th Marathon of Empúries that I ran in pouring rain: https://esportslescala.cat/marato-dempuries/.

bramus,
@bramus@front-end.social avatar

@tomayac Wow! Massive achievement; Congrats!

pawelgrzybek, to Rap
@pawelgrzybek@mastodon.social avatar

Finally, "Like Water For Chocolate" by Common just landed in my collection. Three masterpieces next to each other!

bramus,
@bramus@front-end.social avatar

@pawelgrzybek Story time: I first got acquainted with Be through its instrumental release. It was only much much later that I found out it originally was a rap album 😅

bramus, (edited )
@bramus@front-end.social avatar

@pawelgrzybek Just now I scored a mint copy for only € 40! 😱

bramus,
@bramus@front-end.social avatar

@pawelgrzybek Here’s the shocker: it was on Discogs … the listing popped up about 1.5 weeks ago and I was around at the right time to snag it.

Package arrived today and is was M/NM indeed 🤩

bramus, to random
@bramus@front-end.social avatar

📣 Tune in on May 16 for to hear what’s new for View Transitions.

https://goo.gle/io24-view-transitions

Not only will I talk about Cross-Document View Transitions for MPAs, I’ll also be covering a few improvements that allow you to more easily work with View Transitions in general.

#GoogleIO #ViewTransitions

shadeed9, to random
@shadeed9@front-end.social avatar

The view transitions spec is one of the best (if not the best) specs out there. Full of real-life examples and demos ✨

https://www.w3.org/TR/css-view-transitions-1/

bramus,
@bramus@front-end.social avatar

@shadeed9

/ping @jaffathecake @nomster 👏

SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

@bramus Hey Bramus, do you have an idea when your CSS Cafe presentation video will be published? 🙏🏻

bramus,
@bramus@front-end.social avatar

@SaraSoueidan Here you go:

https://front-end.social/@bramus/112354563904966465

malarkey, to random
@malarkey@mastodon.social avatar

Who’s old and crusty enough to remember this?

bramus,
@bramus@front-end.social avatar

@malarkey Thanks for that! It's how I learned it back in the day 😊

chrisdavidmills, to random
@chrisdavidmills@front-end.social avatar

I've finally managed to get relative CSS colors documentation published on MDN. This was a complex beast to tackle, and I'm proud to see it out! Get started at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors; also see the color function pages to find out what relative colors look like in each.

bramus,
@bramus@front-end.social avatar

@sarajw @chrisdavidmills Best to go to https://crbug.com/new and follow the form flow.

Did a quick check and I found https://issues.chromium.org/issues/40935612 for this.

Best to leave a comment with your findings on the issue to blew some new life into it.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • anitta
  • mdbf
  • magazineikmin
  • thenastyranch
  • hgfsjryuu7
  • InstantRegret
  • ngwrru68w68
  • Youngstown
  • slotface
  • vwfavf
  • rosin
  • PowerRangers
  • kavyap
  • DreamBathrooms
  • normalnudes
  • GTA5RPClips
  • everett
  • ethstaker
  • Durango
  • cisconetworking
  • tester
  • khanakhh
  • osvaldo12
  • cubers
  • modclub
  • Leos
  • tacticalgear
  • provamag3
  • All magazines
    •