Bramus
banner
bram.us
Bramus
@bram.us
Chrome DevRel at Google (CSS + Web UI + DevTools). CSSWG Member. PADI Divemaster. Blogs at bram.us. Lives in Belgium.
Pinned
Bramus @bram.us · Dec 17
🔥 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).
Reposted by Bramus
🚀 I made a holiday wishlist for DevTools in November! Because I can 😀 What's the thing you'd like to see to simplify your CSS/layout debugging?
utilitybend.com/blog/5-css-d...

#Chrome #DevTools #CSS

cc @developer.chrome.com
5 CSS debugging features I want to see in Chrome DevTools - Holidays list | utilitybend
A wish list of 5 CSS debugging features I want to see in Chrome DevTools, from better positioning tools to scroll-driven animations panel and design tools integration.
utilitybend.com
November 28, 2025 at 1:46 PM
I'm attending DevFest Belgium at the Google Belgium HQ today.

If you're here as well, come say hi! 👋
November 28, 2025 at 8:53 AM
Reposted by Bramus
When we first reviewed JPEG XL, as far as we could see no other browser engine wanted it. Our judgement was the benefit wasn't worth the cost. Then Safari decided otherwise and shipped it. Once Mozilla expressed their openness to shipping, it was inevitable that Chromium would too.
November 27, 2025 at 9:04 PM
Reposted by Bramus
Lots of people incorrectly claiming Chrome/Google "tried to kill JPEG XL". Just because an engine chooses not to be the FIRST to ship a new technology does NOT mean they are trying to kill it!
November 27, 2025 at 9:04 PM
This afternoon I vibe coded my way into creating a package to get events for whenever a `position: sticky` element gets stuck or unstuck.

I instructed Gemini to build a `StickyObserver` using the technique described in developer.chrome.com/docs/css-ui/...
An event for CSS position:sticky  |  CSS and UI  |  Chrome for Developers
Using position - sticky and IntersectionObserver together to determine when elements become sticky. Apply scroll effects without scroll events!
developer.chrome.com
November 27, 2025 at 7:36 PM
Reposted by Bramus
I created my first scroll-driven animation last week using the CSS animation API. @bram.us 's course has been so helpful in learning the API. Lesson 7, was specifically helpful to help me implement my progressively enhanced solution. Links in my article.

jeffbridgforth.com/i-created-my...
I created my first scroll-driven animation in CSS
I created my first scroll-driven animation using the CSS animation API this week! And it was so easy to create. Last month, I started watching Bramus’ course on scroll-driven animation, Unleash the po...
jeffbridgforth.com
November 26, 2025 at 6:21 PM
Reposted by Bramus
This week I learned about `corner-shape: squircle` via @nerdy.dev

I wanted a big squircle border-radius on code blocks, but scrollbars ruined the party 🥺

Then I found detecting container overflow state with CSS is possible via @bram.us, `animation-timeline` to the rescue!

pqina.nl/blog/update-...
November 26, 2025 at 10:02 AM
Reposted by Bramus
CSS is so powerful now, it's amazing looking through older CSS and seeing what can be replaced with a one-liner. I'm on the hunt for snippets that used to be multiple lines of CSS that can now be done in one. Show me what you got!
November 26, 2025 at 9:49 AM
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 is open.

www.bram.us/2025/11/25/u...
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
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...
Can You Build A Swipe UI With Only CSS?
YouTube video by Syntax
www.youtube.com
November 25, 2025 at 4:42 PM
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
November 25, 2025 at 5:11 PM
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...
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 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...
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
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 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
Yeeeessssss! 🤩
November 23, 2025 at 6:40 PM
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 💅
November 23, 2025 at 3:01 PM
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...
November 22, 2025 at 7:57 AM
If #XKCD 2347 was made today …

(via social.linux.pizza/@latenightow...)
November 21, 2025 at 12:24 PM
Reposted by Bramus
Here's an introduction to the popover attribute!

www.youtube.com/watch?v=KX8Y...
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
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
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.
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
Reposted by Bramus
Can we quickly appreciate how powerful CSS has become and what a beautiful snippet this is? 👏

una.im/range-style-...
November 20, 2025 at 9:31 AM
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.
November 18, 2025 at 5:10 PM