@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.

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

Just announced at #googleio : cross-document view transitions for multi-page applications are available in the upcoming Chrome 126 🎉

Expect a video (and blog post) with details to drop this Thursday.

In the meantime, check out the updated docs: https://developer.chrome.com/docs/web-platform/view-transitions

Recording of Jon Dahlke doing announcing MPA View Transitions at Google I/O.

bramus,
@bramus@front-end.social avatar

@benschwarz Oopps! Thanks for mentioning. Will take a look

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

Ready for two days of …

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

The joy of landing at SFO on time, but then having to wait an hour on the tarmac before your plane gets a gate assigned 🥲

bramus,
@bramus@front-end.social avatar

@keithjgrant 😅😅

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

I really don't like the JS API of the view transitions, with the necessity to wrap all the actions in the startTransition, rather than having an ability to manually mark the “before” and “after” points. Like, why don't we have an endTransition or something similar?

bramus,
@bramus@front-end.social avatar

@kizu Let's talk at CSS Day about this. One of the engineers will also be present.

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/

#CSS #Specificity

yuanchuan, to random
@yuanchuan@vis.social avatar

📝 Time-based CSS Animations
https://yuanchuan.dev/time-based-css-animations

bramus,
@bramus@front-end.social avatar

@yuanchuan @kizu One downside: animating custom properties (currently) happens on the main thread, which is unfortunate.

https://www.bram.us/2023/02/01/the-gotcha-with-animating-custom-properties/

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

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, (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 🤩

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
  • •
  • Leos
  • vwfavf
  • magazineikmin
  • Youngstown
  • mdbf
  • rosin
  • slotface
  • thenastyranch
  • InstantRegret
  • PowerRangers
  • kavyap
  • osvaldo12
  • tsrsr
  • DreamBathrooms
  • anitta
  • everett
  • tacticalgear
  • khanakhh
  • ethstaker
  • ngwrru68w68
  • Durango
  • cisconetworking
  • modclub
  • cubers
  • GTA5RPClips
  • tester
  • normalnudes
  • provamag3
  • All magazines
    •