Bramus
@bram.us
Chrome DevRel at Google (CSS + Web UI + DevTools). CSSWG Member. PADI Divemaster. Blogs at bram.us. Lives in Belgium.
Pinned
🔥 Remember Internet Explorer’s Page Transitions? THEY’RE BACK BABY!
👾 Demo: ie-page-transitions.netlify.app
⌨ Repo: github.com/bramus/ie-pa...
To configure these, use the meta tags from the olden days + load up the library.
Works in IE 5.5–7.0, Chrome 126+, and Safari 18.2 (buggy).
👾 Demo: ie-page-transitions.netlify.app
⌨ Repo: github.com/bramus/ie-pa...
To configure these, use the meta tags from the olden days + load up the library.
Works in IE 5.5–7.0, Chrome 126+, and Safari 18.2 (buggy).
Reposted by Bramus
Lots of great stuff in this year's Perf Planet Advent/December series:
calendar.perfplanet.com/2025/
calendar.perfplanet.com/2025/
December 28, 2025 at 3:39 AM
Lots of great stuff in this year's Perf Planet Advent/December series:
calendar.perfplanet.com/2025/
calendar.perfplanet.com/2025/
Reposted by Bramus
Hi 👋 I’m Sam, I create visual essays about programming.
My posts from 2025:
- samwho.dev/reservoir-sa...
- samwho.dev/big-o/
- ngrok.com/blog/prompt-...
I also appeared on other folks’ websites:
- simonwillison.net/2025/Dec/19/...
- writethatblog.substack.com/p/sam-rose-o...
My posts from 2025:
- samwho.dev/reservoir-sa...
- samwho.dev/big-o/
- ngrok.com/blog/prompt-...
I also appeared on other folks’ websites:
- simonwillison.net/2025/Dec/19/...
- writethatblog.substack.com/p/sam-rose-o...
December 26, 2025 at 11:16 AM
Hi 👋 I’m Sam, I create visual essays about programming.
My posts from 2025:
- samwho.dev/reservoir-sa...
- samwho.dev/big-o/
- ngrok.com/blog/prompt-...
I also appeared on other folks’ websites:
- simonwillison.net/2025/Dec/19/...
- writethatblog.substack.com/p/sam-rose-o...
My posts from 2025:
- samwho.dev/reservoir-sa...
- samwho.dev/big-o/
- ngrok.com/blog/prompt-...
I also appeared on other folks’ websites:
- simonwillison.net/2025/Dec/19/...
- writethatblog.substack.com/p/sam-rose-o...
Went to visit Gibraltar today. It's like this mini-England (with an M&S and such) but people drive on the correct side of the road and they serve tapas with their drinks ... I like it!
Also: they have monkeys (Barbary Macaques)! 🤩
Also: they have monkeys (Barbary Macaques)! 🤩
December 24, 2025 at 8:53 PM
Went to visit Gibraltar today. It's like this mini-England (with an M&S and such) but people drive on the correct side of the road and they serve tapas with their drinks ... I like it!
Also: they have monkeys (Barbary Macaques)! 🤩
Also: they have monkeys (Barbary Macaques)! 🤩
👀
Gecko: Intent to prototype: Replacing <input type=color> picker with in-browser popup
Gecko: Intent to prototype: Replacing <input type=color> picker with in-browser popup
Gecko: Intent to prototype: Replacing <input type=color> picker with in-browser popup
groups.google.com
December 23, 2025 at 3:45 PM
👀
This feature is so good! 🤩
We’re unwrapping the features that made 2025 a great year for CSS → goo.gle/CSSWrapped25
@bram.us highlights the moveBefore method, which allows you to reparent DOM elements and keep:
📺 Videos playing
🖼️ Iframes loaded
🎯 Input fields focused
@bram.us highlights the moveBefore method, which allows you to reparent DOM elements and keep:
📺 Videos playing
🖼️ Iframes loaded
🎯 Input fields focused
December 22, 2025 at 11:40 AM
This feature is so good! 🤩
Reposted by Bramus
More holiday cheer. For those of you asking about Safari’s “stable” Interop 2025 score…
December 20, 2025 at 1:19 AM
More holiday cheer. For those of you asking about Safari’s “stable” Interop 2025 score…
"Added support for Threaded Scroll-driven Animations."
🤩🤩
🤩🤩
Webkit: Release Notes for Safari Technology Preview 234
Webkit: Release Notes for Safari Technology Preview 234
Webkit: Release Notes for Safari Technology Preview 234
webkit.org
December 19, 2025 at 9:34 PM
"Added support for Threaded Scroll-driven Animations."
🤩🤩
🤩🤩
Reposted by Bramus
Woo! Cannot wait to speak at State Of The Browser 2026. Looking forward to meeting other people in this space too, see you next year!
#SotB26 Speaker reveal time!
The speaker, who is a former DJ and sound engineer and has pushed new standards for the web, is Jason Williams! Jason will talk to you about how Temporal can simplify some of your work.
2026.stateofthebrowser.com/speaker/jaso...
The speaker, who is a former DJ and sound engineer and has pushed new standards for the web, is Jason Williams! Jason will talk to you about how Temporal can simplify some of your work.
2026.stateofthebrowser.com/speaker/jaso...
December 19, 2025 at 10:40 AM
Woo! Cannot wait to speak at State Of The Browser 2026. Looking forward to meeting other people in this space too, see you next year!
Reposted by Bramus
The clock is ticking! ⏰
Less than 2 weeks left to submit your talk proposal and get a chance to join us as a speaker at #JSHeroes 2026! 🚀
🔎 Find all the details here: jsheroes.io/speak.
#TechConference #TechEvent #WebDev #TechInnovation
Less than 2 weeks left to submit your talk proposal and get a chance to join us as a speaker at #JSHeroes 2026! 🚀
🔎 Find all the details here: jsheroes.io/speak.
#TechConference #TechEvent #WebDev #TechInnovation
December 18, 2025 at 2:15 PM
The clock is ticking! ⏰
Less than 2 weeks left to submit your talk proposal and get a chance to join us as a speaker at #JSHeroes 2026! 🚀
🔎 Find all the details here: jsheroes.io/speak.
#TechConference #TechEvent #WebDev #TechInnovation
Less than 2 weeks left to submit your talk proposal and get a chance to join us as a speaker at #JSHeroes 2026! 🚀
🔎 Find all the details here: jsheroes.io/speak.
#TechConference #TechEvent #WebDev #TechInnovation
Reposted by Bramus
Smooth view transitions for dialogs. Thomas Günther shows how to combine
December 18, 2025 at 1:00 PM
Smooth view transitions for dialogs. Thomas Günther shows how to combine
Reposted by Bramus
Over a decade ago, I made a pure #CSS flip through a book interactive demo using mouse traps across the screen.
Now I redid it for the page flip to happen on #scroll - live demo on @codepen.io: codepen.io/thebabydino/...
Original from 12 years ago: codepen.io/thebabydino/...
Now I redid it for the page flip to happen on #scroll - live demo on @codepen.io: codepen.io/thebabydino/...
Original from 12 years ago: codepen.io/thebabydino/...
Pure CSS animal book on scroll
On scroll remake of a [decade old demo](https://codepen.io/thebabydino/pen/AYbjEa). --- If the work I've been putting out since early 2012 has helped...
codepen.io
December 18, 2025 at 8:12 AM
Over a decade ago, I made a pure #CSS flip through a book interactive demo using mouse traps across the screen.
Now I redid it for the page flip to happen on #scroll - live demo on @codepen.io: codepen.io/thebabydino/...
Original from 12 years ago: codepen.io/thebabydino/...
Now I redid it for the page flip to happen on #scroll - live demo on @codepen.io: codepen.io/thebabydino/...
Original from 12 years ago: codepen.io/thebabydino/...
Reposted by Bramus
On day 17 @gerireid.com explores the gap between what's rendered on the screen and what screen readers actually announce. #htmhellAdventcalendar
htmhell.dev/adventcalend...
htmhell.dev/adventcalend...
Don't leave the screen reader hungry - HTMHell
A collection of bad practices in HTML, copied from real websites.
htmhell.dev
December 18, 2025 at 5:20 AM
On day 17 @gerireid.com explores the gap between what's rendered on the screen and what screen readers actually announce. #htmhellAdventcalendar
htmhell.dev/adventcalend...
htmhell.dev/adventcalend...
Reposted by Bramus
Landing next month in Chrome 144: scroll-state(scrolled)
This new scroll query value lets you style your UI based on the most recent scroll direction.
This means you can change animation-direction based on last scroll & implement directional UI like "hidey-bars"
Learn more: una.im/scroll-state...
This new scroll query value lets you style your UI based on the most recent scroll direction.
This means you can change animation-direction based on last scroll & implement directional UI like "hidey-bars"
Learn more: una.im/scroll-state...
una.im | Directional CSS with scroll-state(scrolled)
Style based on scroll direction with this new scroll-state query feature.
una.im
December 17, 2025 at 9:02 PM
Landing next month in Chrome 144: scroll-state(scrolled)
This new scroll query value lets you style your UI based on the most recent scroll direction.
This means you can change animation-direction based on last scroll & implement directional UI like "hidey-bars"
Learn more: una.im/scroll-state...
This new scroll query value lets you style your UI based on the most recent scroll direction.
This means you can change animation-direction based on last scroll & implement directional UI like "hidey-bars"
Learn more: una.im/scroll-state...
Reposted by Bramus
Different Page Transitions For Different Circumstances
In JavaScript, you can detect a view transition happening, set a type, and have CSS do unique things based on that type.
In JavaScript, you can detect a view transition happening, set a type, and have CSS do unique things based on that type.
Different Page Transitions For Different Circumstances
In JavaScript, you can detect a view transition happening, set a type, and have CSS do unique things based on that type.
frontendmasters.com
December 17, 2025 at 8:39 AM
Different Page Transitions For Different Circumstances
In JavaScript, you can detect a view transition happening, set a type, and have CSS do unique things based on that type.
In JavaScript, you can detect a view transition happening, set a type, and have CSS do unique things based on that type.
Reposted by Bramus
💡 CSS Tip!
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
December 16, 2025 at 11:21 AM
💡 CSS Tip!
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
Reposted by Bramus
Usable listboxes!!! (Plus styleable as a nice bonus) This includes multi-select in listbox mode.
December 16, 2025 at 10:26 PM
Usable listboxes!!! (Plus styleable as a nice bonus) This includes multi-select in listbox mode.
Spotted in the @smashingmagazine.com newsletter ... congrats @kilianvalkhof.com; Well deserved! 👏
December 16, 2025 at 4:00 PM
Spotted in the @smashingmagazine.com newsletter ... congrats @kilianvalkhof.com; Well deserved! 👏
Reposted by Bramus
The 2025 State of HTML survey is out
2025.stateofhtml.com
And I love the opening stat — Lazy Loading FTW!
Built-in, simple to use, attributes and elements are HTML's super power. And you can see that reflect in other attributes with the largest increase (details/summary, dialog, fetchpriority!)
2025.stateofhtml.com
And I love the opening stat — Lazy Loading FTW!
Built-in, simple to use, attributes and elements are HTML's super power. And you can see that reflect in other attributes with the largest increase (details/summary, dialog, fetchpriority!)
December 16, 2025 at 9:26 AM
The 2025 State of HTML survey is out
2025.stateofhtml.com
And I love the opening stat — Lazy Loading FTW!
Built-in, simple to use, attributes and elements are HTML's super power. And you can see that reflect in other attributes with the largest increase (details/summary, dialog, fetchpriority!)
2025.stateofhtml.com
And I love the opening stat — Lazy Loading FTW!
Built-in, simple to use, attributes and elements are HTML's super power. And you can see that reflect in other attributes with the largest increase (details/summary, dialog, fetchpriority!)
Reposted by Bramus
That nice @utilitybend.com of the Open UI group (that gave HTML new fancy
[Range] Multi-handle necessity and scalability guidelines (3+ Thumbs) · Issue #1337 · openui/open-ui
While dual-handle usage (min/max price filters) is the most common use case, the foundation of the API supports adding more than two handles. Community feedback provides specific, validated use cas...
github.com
December 15, 2025 at 5:41 PM
That nice @utilitybend.com of the Open UI group (that gave HTML new fancy
Reposted by Bramus
CSS Wrapped 2025: "This year, we're giving you new tools to sculpt a dynamic web. Sculpt dynamic interfaces, stretch your imagination, and play with these 22 powerful new #CSS features that landed in Chrome this year." chrome.dev/css-wrapped-...
CSS Wrapped 2025
Sculpt dynamic interfaces, stretch your imagination, and play with these 22 powerful new CSS features that landed in Chrome this year.
chrome.dev
December 15, 2025 at 6:02 PM
CSS Wrapped 2025: "This year, we're giving you new tools to sculpt a dynamic web. Sculpt dynamic interfaces, stretch your imagination, and play with these 22 powerful new #CSS features that landed in Chrome this year." chrome.dev/css-wrapped-...
Reposted by Bramus
❓ Do you have a need for range inputs with 3+ sliders on the web? Folks are scoping out this work, and want to know your use-cases ⬇️ https://github.com/openui/open-ui/issues/1337
December 12, 2025 at 3:30 PM
❓ Do you have a need for range inputs with 3+ sliders on the web? Folks are scoping out this work, and want to know your use-cases ⬇️ https://github.com/openui/open-ui/issues/1337
Exciting release 🤩
Safari 26.2 is here with 65 features + 165 bug fixes — including field-sizing, Navigation API, Largest Contentful Paint, command & commandfor, CHIPS opt-in partitioned cookies, scrollend event, random(), WebGPU in WebXR, scrollbar-color, hidden=until-found and much more! webkit.org/blog/17640/w...
WebKit Features for Safari 26.2
Safari 26.2 is a big release.
webkit.org
December 12, 2025 at 11:49 PM
Exciting release 🤩
Scroll-Triggered Animations … with nothing but CSS … oh yeah 🤩
codepen.io/bramus/pen/Z...
(Coming to Chrome 145. Blogpost in the works.)
codepen.io/bramus/pen/Z...
(Coming to Chrome 145. Blogpost in the works.)
December 12, 2025 at 10:04 AM
Scroll-Triggered Animations … with nothing but CSS … oh yeah 🤩
codepen.io/bramus/pen/Z...
(Coming to Chrome 145. Blogpost in the works.)
codepen.io/bramus/pen/Z...
(Coming to Chrome 145. Blogpost in the works.)
December 12, 2025 at 8:52 AM
Reposted by Bramus
Anchor Positioning and the Inset-Modified Containing Block: "If you kinda understand Anchor Positioning, but it still surprises you from time to time, then most likely this is the missing piece of information: the Inset-Modified Containing Block (or IMCB for short)." #CSS www.bram.us/2025/12/02/a...
Anchor Positioning and the Inset-Modified Containing Block (IMCB)
If you kinda understand Anchor Positioning, but it still surprises you from time to time, then most likely this is the missing piece of information: the Inset-Modified Containing Block (or IMCB for…
www.bram.us
December 11, 2025 at 6:02 PM
Anchor Positioning and the Inset-Modified Containing Block: "If you kinda understand Anchor Positioning, but it still surprises you from time to time, then most likely this is the missing piece of information: the Inset-Modified Containing Block (or IMCB for short)." #CSS www.bram.us/2025/12/02/a...