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).
Chrome 144 features a small change to #CSS overscroll-behavior: it now also works on non-scrollable scroll containers. While this change might seem trivial, it fixes an issue people have been dealing with for ages: prevent a page from scrolling while a
Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open
Chrome 144 features a small change to overscroll-behavior: it now also works on non-scrollable scrollers. While this change might seem trivial, it fixes an issue developers have dealing with for ages:...
www.bram.us
November 25, 2025 at 10:20 PM
Chrome 144 features a small change to #CSS overscroll-behavior: it now also works on non-scrollable scroll containers. While this change might seem trivial, it fixes an issue people have been dealing with for ages: prevent a page from scrolling while a
Reposted by Bramus
I made a Swiper component with CSS and it's smooth as hell. No more manually translating with JS or janky animations.
www.youtube.com/watch?v=Wjuq...
www.youtube.com/watch?v=Wjuq...
Can You Build A Swipe UI With Only CSS?
YouTube video by Syntax
www.youtube.com
November 25, 2025 at 4:42 PM
I made a Swiper component with CSS and it's smooth as hell. No more manually translating with JS or janky animations.
www.youtube.com/watch?v=Wjuq...
www.youtube.com/watch?v=Wjuq...
Reposted by Bramus
Your favorite API for smooth page transitions just got even better.
In the latest CSS Podcast episode, @una.im and @bram.us deep dive into what's new with View Transitions, covering all the latest additions and changes → goo.gle/481cuAN
In the latest CSS Podcast episode, @una.im and @bram.us deep dive into what's new with View Transitions, covering all the latest additions and changes → goo.gle/481cuAN
November 25, 2025 at 5:11 PM
Your favorite API for smooth page transitions just got even better.
In the latest CSS Podcast episode, @una.im and @bram.us deep dive into what's new with View Transitions, covering all the latest additions and changes → goo.gle/481cuAN
In the latest CSS Podcast episode, @una.im and @bram.us deep dive into what's new with View Transitions, covering all the latest additions and changes → goo.gle/481cuAN
Reposted by Bramus
A plumber drove past me with a Hotmail address on the side of his van.
For years, that would’ve been a red flag.
Now, in an age of AI-generated everything, it might be the most trustworthy thing I’ve seen all month.
www.jonoalderson.com/conjecture/t...
For years, that would’ve been a red flag.
Now, in an age of AI-generated everything, it might be the most trustworthy thing I’ve seen all month.
www.jonoalderson.com/conjecture/t...
The Hotmail effect
Once, a Hotmail address meant you didn’t know what you were doing. Now, it might mean you’re the only real thing left.
www.jonoalderson.com
October 25, 2025 at 1:34 PM
A plumber drove past me with a Hotmail address on the side of his van.
For years, that would’ve been a red flag.
Now, in an age of AI-generated everything, it might be the most trustworthy thing I’ve seen all month.
www.jonoalderson.com/conjecture/t...
For years, that would’ve been a red flag.
Now, in an age of AI-generated everything, it might be the most trustworthy thing I’ve seen all month.
www.jonoalderson.com/conjecture/t...
A while ago I joined @neciudan.dev – whom I met at Frontmania in 2023 – on his “Señors @ Scale” podcast. In the episode, we talked about all things CSS.
www.bram.us/2025/11/25/s...
www.bram.us/2025/11/25/s...
Señors @ Scale: Modern CSS at Scale with Bramus
A while ago I joined Dan Neciu – whom I met at Frontmania in 2023 – on his “Señors @ Scale” podcast. We talked about all things CSS.
www.bram.us
November 25, 2025 at 12:41 PM
A while ago I joined @neciudan.dev – whom I met at Frontmania in 2023 – on his “Señors @ Scale” podcast. In the episode, we talked about all things CSS.
www.bram.us/2025/11/25/s...
www.bram.us/2025/11/25/s...
Reposted by Bramus
On the Edge team, we think web apps should be easier to install.
The default browser install button is great, but we'd like something which you can use on your own site, how and when you want it.
That's why we're proposing the Web Install API, which you can now test!
The default browser install button is great, but we'd like something which you can use on your own site, how and when you want it.
That's why we're proposing the Web Install API, which you can now test!
The Web Install API is ready for testing
We're happy to announce that the Web Install API is now ready for testing on your own site, as an origin trial in Microsoft E
blogs.windows.com
November 24, 2025 at 5:02 PM
On the Edge team, we think web apps should be easier to install.
The default browser install button is great, but we'd like something which you can use on your own site, how and when you want it.
That's why we're proposing the Web Install API, which you can now test!
The default browser install button is great, but we'd like something which you can use on your own site, how and when you want it.
That's why we're proposing the Web Install API, which you can now test!
Yeeeessssss! 🤩
Gecko: Intent to prototype and ship: View transition types
Gecko: Intent to prototype and ship: View transition types
Gecko: Intent to prototype and ship: View transition types
groups.google.com
November 23, 2025 at 6:40 PM
Yeeeessssss! 🤩
Reposted by Bramus
WIP Page transition ✨
Most off the animations are pure CSS, I just needed some JS for the mouse move effect 🤷🏻♀️
Made with Scroll Driven Animations and View Transitions 💅
Most off the animations are pure CSS, I just needed some JS for the mouse move effect 🤷🏻♀️
Made with Scroll Driven Animations and View Transitions 💅
November 23, 2025 at 3:01 PM
WIP Page transition ✨
Most off the animations are pure CSS, I just needed some JS for the mouse move effect 🤷🏻♀️
Made with Scroll Driven Animations and View Transitions 💅
Most off the animations are pure CSS, I just needed some JS for the mouse move effect 🤷🏻♀️
Made with Scroll Driven Animations and View Transitions 💅
JPEG XL in Chromium update:
“[...] we would welcome contributions to integrate a performant and memory-safe JPEG XL decoder in Chromium. In order to enable it by default in Chromium we would need a commitment to long-term maintenance.”
groups.google.com/a/chromium.o...
“[...] we would welcome contributions to integrate a performant and memory-safe JPEG XL decoder in Chromium. In order to enable it by default in Chromium we would need a commitment to long-term maintenance.”
groups.google.com/a/chromium.o...
November 22, 2025 at 7:57 AM
JPEG XL in Chromium update:
“[...] we would welcome contributions to integrate a performant and memory-safe JPEG XL decoder in Chromium. In order to enable it by default in Chromium we would need a commitment to long-term maintenance.”
groups.google.com/a/chromium.o...
“[...] we would welcome contributions to integrate a performant and memory-safe JPEG XL decoder in Chromium. In order to enable it by default in Chromium we would need a commitment to long-term maintenance.”
groups.google.com/a/chromium.o...
November 21, 2025 at 12:24 PM
Reposted by Bramus
HTMHell #5 - An introduction to the popover attribute
YouTube video by HTMHell
www.youtube.com
November 21, 2025 at 12:12 PM
Reposted by Bramus
The Web Day Out line-up is finalised! It's a conference all about the latest advances in #HTML, #CSS, and #JavaScript.
Joining us on stage will be the fantastic @matuzo.at of HTMHell fame.
Use my discount JOIN_RICH for 10%
webdayout.com
Joining us on stage will be the fantastic @matuzo.at of HTMHell fame.
Use my discount JOIN_RICH for 10%
webdayout.com
Web Day Out in Brighton, March 12th 2026
A one-day event all about what you can do in web browsers today!
webdayout.com
November 21, 2025 at 9:37 AM
The Web Day Out line-up is finalised! It's a conference all about the latest advances in #HTML, #CSS, and #JavaScript.
Joining us on stage will be the fantastic @matuzo.at of HTMHell fame.
Use my discount JOIN_RICH for 10%
webdayout.com
Joining us on stage will be the fantastic @matuzo.at of HTMHell fame.
Use my discount JOIN_RICH for 10%
webdayout.com
Reposted by Bramus
📣 Hear hear! The biggest savings on the Practical Accessibility course start *today*—for a limited time only.
Starting today, you can get the course for 30% off — that's $279 instead of $399. The discounted price excludes sales tax that may be applied depending on where you are buying from.
Starting today, you can get the course for 30% off — that's $279 instead of $399. The discounted price excludes sales tax that may be applied depending on where you are buying from.
The Practical Accessibility Course
A get-right-down-to-it online course for Web designers and developers who want to start creating more accessible Web user interfaces and digital products today
practical-accessibility.today
November 20, 2025 at 2:58 PM
📣 Hear hear! The biggest savings on the Practical Accessibility course start *today*—for a limited time only.
Starting today, you can get the course for 30% off — that's $279 instead of $399. The discounted price excludes sales tax that may be applied depending on where you are buying from.
Starting today, you can get the course for 30% off — that's $279 instead of $399. The discounted price excludes sales tax that may be applied depending on where you are buying from.
👀 Today …
Oh, damn! The CSS Podcast is about to hit 100 episodes 🤩
Congrats @una.im and @bram.us 🎉 thecsspodcast.libsyn.com
Congrats @una.im and @bram.us 🎉 thecsspodcast.libsyn.com
The CSS Podcast
Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and...
thecsspodcast.libsyn.com
November 20, 2025 at 6:31 PM
👀 Today …
Reposted by Bramus
Can we quickly appreciate how powerful CSS has become and what a beautiful snippet this is? 👏
una.im/range-style-...
una.im/range-style-...
November 20, 2025 at 9:31 AM
Can we quickly appreciate how powerful CSS has become and what a beautiful snippet this is? 👏
una.im/range-style-...
una.im/range-style-...
Reposted by Bramus
Chrome 143 will start rolling out today (most users get it next week).
It includes a new set of options for your webperf traces — including saving sources & source maps:
developer.chrome.com/docs/devtool...
This makes it easier for those viewing traces outside of the page load to get more context.
It includes a new set of options for your webperf traces — including saving sources & source maps:
developer.chrome.com/docs/devtool...
This makes it easier for those viewing traces outside of the page load to get more context.
November 18, 2025 at 5:10 PM
Chrome 143 will start rolling out today (most users get it next week).
It includes a new set of options for your webperf traces — including saving sources & source maps:
developer.chrome.com/docs/devtool...
This makes it easier for those viewing traces outside of the page load to get more context.
It includes a new set of options for your webperf traces — including saving sources & source maps:
developer.chrome.com/docs/devtool...
This makes it easier for those viewing traces outside of the page load to get more context.
Reposted by Bramus
Another upcoming change that might go unnoticed: Starting with Chrome 144, Anchor Positioning is going to be transform-aware.
From then on, anchoring will resolve against the bounding box of the transformed anchor.
Demo: codepen.io/bramus/pen/p...
From then on, anchoring will resolve against the bounding box of the transformed anchor.
Demo: codepen.io/bramus/pen/p...
November 20, 2025 at 9:59 AM
Another upcoming change that might go unnoticed: Starting with Chrome 144, Anchor Positioning is going to be transform-aware.
From then on, anchoring will resolve against the bounding box of the transformed anchor.
Demo: codepen.io/bramus/pen/p...
From then on, anchoring will resolve against the bounding box of the transformed anchor.
Demo: codepen.io/bramus/pen/p...
fire.css
🔥🔥🔥
Lowest setting. CSS powered flamethrower!
Yes, it is really controlled by CSS. I can add MIDI inputs. Then use CSS to trigger animations and output the result to DMX for controlling the flamethrower.
Lowest setting. CSS powered flamethrower!
Yes, it is really controlled by CSS. I can add MIDI inputs. Then use CSS to trigger animations and output the result to DMX for controlling the flamethrower.
November 18, 2025 at 7:54 PM
fire.css
New blog post: “Faking Two-Phase View Transitions with the Navigation API’s precommitHandler”
www.bram.us/2025/11/17/f...
By using two View Transitions when intercepting links with the Navigation API – one in the precommitHandler and one in the regular handler – you can fake a Two-Phase VT today!
www.bram.us/2025/11/17/f...
By using two View Transitions when intercepting links with the Navigation API – one in the precommitHandler and one in the regular handler – you can fake a Two-Phase VT today!
Faking Two-Phase View Transitions with the Navigation API’s precommitHandler
By using two sequential View Transitions when intercepting links with the Navigation API – one in the precommitHandler and one in the regular handler – you can fake a Two-Phase View Transition today!
www.bram.us
November 17, 2025 at 10:14 PM
New blog post: “Faking Two-Phase View Transitions with the Navigation API’s precommitHandler”
www.bram.us/2025/11/17/f...
By using two View Transitions when intercepting links with the Navigation API – one in the precommitHandler and one in the regular handler – you can fake a Two-Phase VT today!
www.bram.us/2025/11/17/f...
By using two View Transitions when intercepting links with the Navigation API – one in the precommitHandler and one in the regular handler – you can fake a Two-Phase VT today!
Reposted by Bramus
First release tickets close in a few weeks, grab yours now before the price increases!
heypresents.com/ten
heypresents.com/ten
All Day Hey! 2026
A curated single-track conference for curious developers, designers, and technology leaders.
heypresents.com
November 14, 2025 at 8:40 AM
First release tickets close in a few weeks, grab yours now before the price increases!
heypresents.com/ten
heypresents.com/ten
Reposted by Bramus
What are everyone's thoughts on WebKit's `<input type=checkbox switch>` control? Is it something you want other browsers to ship?
November 14, 2025 at 4:00 PM
What are everyone's thoughts on WebKit's `<input type=checkbox switch>` control? Is it something you want other browsers to ship?
Reposted by Bramus
I think `animation-composition: accumulate` is gonna see more action with `random()`, as it's like "take what you already got as a value and augment it rather than replace it".
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
November 14, 2025 at 4:22 PM
I think `animation-composition: accumulate` is gonna see more action with `random()`, as it's like "take what you already got as a value and augment it rather than replace it".
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
🤩 There’s a very – VERY! – exciting animations/performance change available in Chrome Canary:
Under the right conditions, `width`/`height` animations will no longer automatically force a Main Thread animation, but can be allowed to run on the Compositor.
Under the right conditions, `width`/`height` animations will no longer automatically force a Main Thread animation, but can be allowed to run on the Compositor.
a close up of a person wearing sunglasses with the words `` wait , what ? ''
ALT: a close up of a person wearing sunglasses with the words `` wait , what ? ''
media.tenor.com
November 13, 2025 at 11:25 AM
🤩 There’s a very – VERY! – exciting animations/performance change available in Chrome Canary:
Under the right conditions, `width`/`height` animations will no longer automatically force a Main Thread animation, but can be allowed to run on the Compositor.
Under the right conditions, `width`/`height` animations will no longer automatically force a Main Thread animation, but can be allowed to run on the Compositor.
Reposted by Bramus
Blink: Intent to Prototype: Declarative scroll commands for HTMLButtonElement
Blink: Intent to Prototype: Declarative scroll commands for HTMLButtonElement
Blink: Intent to Prototype: Declarative scroll commands for HTMLButtonElement
groups.google.com
November 13, 2025 at 2:35 AM
Blink: Intent to Prototype: Declarative scroll commands for HTMLButtonElement