Bramus

Remember Internet Explorer’s “Page Transitions”? Well, they’re back, thanks to the View Transition API! → Blog post: brm.us/page-transit... → Demo site: page-transitions.style The project leverages IE’s meta tags so browser support is not limited to Modern Browsers™ but also includes IE 5.5–8.0 😆

Sideproject I’ve been throwing my tokens at: gtajs.wtf It’s a reimplementation of the 1997 Grand Theft Auto engine in JavaScript and WebGL. The project is not entirely finished, but since I am leaving on vacation tomorrow, I might as well just publish what I have — done is better than perfect 😀

✍️ Just published a new post about my most-anticipated CSS proposals from Interop 2027! If you’re not familiar, the Interop project is a collaboration between browsers to pick shared focus areas. There’s *so much* good stuff this year, it was hard to pick just 10!

The first Public Working Draft of Animation Triggers has just been published, introducing mechanisms that affect animation playback based on DOM events from user interaction or on entering or exiting ranges on animation timelines. www.w3.org/TR/2026/WD-a... developer.mozilla.org/en-US/docs/W...

If you ever struggled with understanding if your CSS performance issues are coming from style calculation or from layout, LoAF's styleDuration and layoutDuration is shipping in Chromium 158 to help with that groups.google.com/a/chromium.o...

I just shipped CSS Custom Highlight Universal Selector! Coming in Chrome 158. With ::highlight(*), you can write a shared rule that applies to every custom highlight instead of repeating the same styles for each name. See the Blog post: blog.seokho.dev/development/...

Ever since we got position: sticky I liked playing around with scroll-based storytelling. Scroll-driven animations unlocked a lot more, but as @utilitybend.com explains, scroll-triggered animations are that last missing piece. Includes great examples of fun things we can do now.

Things I hope to push forward at TPAC: - Declarative fragment / client side include - declarative skeleton/shell - CSS navigation matching - parser/patch reflection in mutation observers - responsive image improvements - connection allowlists - focusreset - CSS module imports Gonna be interesting!

Another `:scroll-*` demo — an interactive CSS solar system! 🪐 Advanced `attr()` pulls planet data to define orbits and speeds, while `::scroll-marker` brings the planets to life. Always fun to see what CSS can do! See the full demo on @codepen.io codepen.io/editor/cbols... #CSSOnly

👀 Sneak peek … #GTA #GTA1 #GTAClassic #WebGL

I gave a talk at EMF titled "Men in Tech #YesAllMen", in which I told my experience of being a woman in tech. I was afraid to publish it in case it affected my current or future employment. With all the current news I would like to add my 2¢. So here is the recording: youtu.be/WXL6K1lhvt0?...

Yesterday, the CSSWG accepted my proposal for mesh gradients and diffusion curve gradients! Want to make gradients like this natively in CSS? Well, we've started the work on it. It's coming! Here's the Explainer: github.com/w3c/csswg-dr...

Introducing the Accessible Components Library! Common components with accessibility requirements, test scenarios, and automated tests. • Free to use and adapt • Human-readable tests in Gherkin • Mapped to WCAG 2.2, levels A to AAA Dig in! #Accessibility #OpenSource #WCAG #AccessibleComponents

JPEG XL has arrived on the web, but how does it stack up against AVIF? jakearchibald.com/2026/jpeg-xl...

Building CSS Scroll-Triggered Animations (or thinking of building some) that use `animation-trigger` and `timeline-trigger`? Here’s the debugging tool you are looking for: brm.us/sta-debugger

The pitch for single page apps was always “it’s faster after the first load”. Google’s Core Web Vitals, used in search ranking, now measure soft navigations. It’s true: LCP drops by about a third. But, I don't think SPAs are ever really worth all the compromises and extra code.

#CSS typed arithmetic is now baseline in all browsers thanks to the release of #Firefox 158 today: developer.mozilla.org/en-US/docs/M... No more `tan2(atan2())` hacks 🙂

I’m looking to connect with university lecturers and staff. We offer student tickets for @ffconf.org, but they’re easy to miss, and I’d love to give the next generation of web developers the chance to attend a great indie event. If anyone can contact please drop me comment here I can follow up.

Shout out to @bram.us for his Anchor Positioning techniques shared at @londonwebstandards.org SotB 2026! (you should watch youtu.be/VD_q3x9GnZs) They inspired me to build a (if I may say so myself) pretty nice visualisation.

A candidate for Interop 2027: Scroll-Triggered Animations, the missing key to scrollytelling in CSS. I wanted to create demos showing how to wire them up and easily create fun effects (especially with typography). To be complete, I also added syntax info, tips, and tricks. Happy scrolly!

Being a big fan of the CSS Typed OM, I’ve wanted a proper polyfill for it for years. Just before my summer vacation back in July, with the help of Gemini/Antigravity, I finally built one: css-typed-om. → brm.us/css-typed-om...

Following my Scroll-Driven Animations Debugger Extension for Chrome DevTools, I’m working on a similar extension to help you debug Scroll-Triggered Animations. Sneak peek: youtu.be/C5hn16x31I8 WDYT? Any features you want to see?

Finally looked into CSS scroll triggered animations and wrote down what I learned! Special thanks to Bramus for answering some of my questions cydstumpel.nl/css-scroll-t...

Wrote a thing on why we should have interactive lists on the web: sarahmhigley.com/writing/inte... If anyone has their own interactive list use cases that aren't covered, send them to me! I'm putting together an ARIA spec PR this month.

Yesterday I did some long overdue updates to this project. The caniuse and bcd datasets can now be updated by the app itself. The app also warns when the datasets are quite old. Now also shows baseline status indicators. github.com/bramus/caniu...

Bootstrap 6 alpha 1 got announced today: blog.getbootstrap.com/2026/10/08/b... Great to see how many modern CSS features the project is now leaning into: @property, @layer, @starting-style, oklch(), color-mix(), light-dark(), interpolate-size, :has(), … (Yes, Bootstrap still is a thing)

If you can write CSS, you can write GSS { ● } I've been dreaming of this for years: a language to build 3D scenes like you write CSS. Selectors, cascade, :hover, keyframes… compiled to one GPU shader. Meet GSS: GPU Style Sheets. gss-lang.dev #shader #glsl #gss

👀 Ooh, support for `interpolate-size: allow-keywords` and `calc-size()` in Safari Technology Preview 254. These two allow you to do things like animating elements to `height: auto`. Check developer.chrome.com/docs/css-ui/... to get the details.

aamtest: Testing accessibility in WPT blogs.igalia.com/mrego/aamtes... This blog post covers the work @igalia.com has been doing to add a new type of tests in WPT, which allow testing the platform accessibility APIs directly. Thanks to NLnet Foundation for sponsoring this work.

So, today I built `<calc-input>`. It’s a custom input element that accepts mathematical formulas — such as 2 + 3 or (2 + 3) * 4 — and automatically toggles between showing the formula on focus and the calculated result on blur. → brm.us/calc-input

What do you want the new default styling to be for HTML fieldset? Here’s what it’s been forever — a box around things, with the legend text placed over the middle of the line at the top left. (See developer.mozilla.org/en-US/docs/W... for more.)

A little summary of my experience at Fronteers Dark Mode, a breakdown of the header effect of my demo, and a tiny bit of yapping at the end on existential dread in the age of AI 💁🏻‍♀️ @fronteers.bsky.social cydstumpel.nl/demo-deep-di...

We have $100K to give away to open source maintainers! Let us know your suggestions and nominations.

JPEG XL shipped in Chrome 155 today, try it out! Huge kudos to Luca and team for getting this done. Image codecs are cool in so many levels, and I'm super impressed by the people who make that magic happen. developer.chrome.com/blog/jpeg-xl...

"<rich-input> demo" by Bramus codepen.io/editor/bramu... Pretty impressive combination of new web tech to make this happen: <datalist>, the OpaqueRange API, and the CSS Custom Highlight API.