Bramus
50.9K posts

Bramus
@bramus
Chrome DevRel at Google (CSS + Web UI). @CSSWG Member. Former University Lecturer. PADI Divemaster. Blogs at @bramusblog. You should follow me on Bsky 🦋.
Belgium Katılım Eylül 2007
741 Takip Edilen13.9K Takipçiler
Sabitlenmiş Tweet

@kaimnsrvr Hmm, looks like the flag is no longer available in Chrome 145. You can still find it in Chrome 146 though :)
English

@jrgarciadev @bramus this might interest you, view transitions being used for animations in a component library
English

@bramus I've been waiting for this for so long you have no idea.
Biggest request: hotkey (and customization of hotkey) for expand/collapse
Also noticed the expand/collapse has an animation but it's super laggy, maybe the option to disable that?
Thank you all for shipping this 🙏
English

@Mr_Jfranklin That would be a bug, as it goes with flagged experimental features :)
I am mainly using Chrome Canary (146) which seems to do much better with this feature, so you’ll have to wait another release (or use Chrome Canary – which comes with its own challenges – or Chrome Dev)
English

@bramus Love this but on mine the address bar is very large. How to I make it smaller like in you images?

English


@Dalton_Walsh I’ve heard several requests about this before, so I’m sure it will please a lot of folks out there.
(Personally I’m also sticking to horizontal ones … for now)
English

@bramus Randomly tried that today, pretty random I see this post.
Not sure if like it, but it's a big change to get used to
English
Bramus retweetledi

Added this notice to Floating UI docs!!
CSS really needed this behavior — Floating UI/Popper (v1-v3) gets 50 million combined downloads per week on npm 🤯
Many users don't even realize they're using it as it's a hidden dependency of component libs.
$ pnpm why @floating-ui/dom

Una 🇺🇦@Una
About to have CSS ANCHOR POSITIONING FULLY CROSS-BROWSER!!
English

Scroll-Triggered Animations … with nothing but CSS … oh yeah 🤩
codepen.io/bramus/pen/ZYW…
(Blogpost coming soon)
English


@k_grajeda The pseudos are not allowed in :has() … but I have filed an issue for that.
Could you leave a comment with your use-case on github.com/w3c/csswg-draf… to help move it forward? Thanks!
English

hey @bramus, question about nested view transitions
for “enter” animations of an element on a MPA I’m doing something like:
::view-transition-new(prototype-window):only-child {
animation: vt-prototype-window-in 600ms var(--out-quart) forwards;
}
this works great, it only animates when `prototype-window` is being added and it’s the only child.
now I added a nested group inside that element and I want to apply the same animation to the group, but only for enter transitions
I tried something like (I know this doesn’t work and looks crazy):
::view-transition-group-children(prototype-window):has(
~ ::view-transition-image-pair(prototype-window)
> ::view-transition-old(prototype-window):only-child
) {
animation: vt-prototype-window-in 600ms var(--out-quart) forwards;
}
is this possible in some way?
basically: how do I apply the same "enter" animation to a child group but only when the parent is "entering"?
English












