Feature detecting Scroll-Driven Animations with @​ supports in CSS: you want to check for `animation-range` too, in order to exclude Firefox Nightly, which only has a partial SDA implementation. Details: bram.us/2024/09/24/fea…

Observing Style Changes (2024.09.25 @ devs.gent) Today I gave a talk at the September 2024 devs​.gent meetup on how to observe and respond to Computed Style Changes. Slides + write-up: bram.us/2024/09/25/obs…

📝 The CSS Podcast 089: View Transitions Last week I joined my colleagues Adam Argyle and Una 🇺🇦 on the #CSSPodcast to talk about View Transitions. bram.us/2024/09/26/the…

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value bram.us/2024/09/29/sol… Demo by Fabrizio Calderan

Benchmarking the performance of CSS > With @​property now being Baseline Newly Available, I thought it’d be a good time benchmark the impact – if any – it has on the performance of your CSS. 🔗 bram.us/2024/10/03/ben… #CSS #Performance

📝 Feature detect Style Queries Support in CSS. Awaiting browser support for `at-rule()`, here’s how you do it. brm.us/style-queries-…

📝 CSSNestedDeclarations is coming to all browsers to improve CSS Nesting! CSS Nesting just got a whole lot better … 🔗 brm.us/cssnesteddecla…

📝 Scroll-driven animated card stack with scroll snap events Dissecting and reworking a very nice demo by Paul Noble. bram.us/2024/10/13/scr… #CSS #ScrollDrivenAnimations #ScrollSnapping

Supercharge Web UX with View Transitions (2024.10.18 @ React Brussels) > Slides + recording of the talk “Supercharge Web UX with View Transitions” I gave at REACT BRUSSELS 🇧🇪 18.10.24 2024 bram.us/2024/11/17/sup… #CSS #ViewTransitions

Control the Viewport Resize Behavior on mobile with interactive-widget > For this year’s HTMLHell Advent Calendar I contributed today’s post. It is all about viewports and virtual keyboards. bram.us/2024/12/04/con…

Spot Non-Composited Animations in Chrome DevTools > The animations track of a performance trace can now tell you if and why an animation was not composited. bram.us/2024/12/10/spo…

Re-imagine the web with View Transitions > Video from Chrome’s 2024 EOY campaign, highlighting View Transitions. > I made sure the code snippets and animations that you see where Technically Correct™ + coded up a POC for this one. bram.us/2024/12/16/re-…

🔥 Remember Internet Explorer’s Page Transitions? THEY’RE BACK BABY! 👾 Demo: ie-page-transitions.netlify.app ⌨ Repo: github.com/bramus/ie-page… 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).

The Future of CSS: Construct “<custom-ident>” and “<dashed-ident>” Values With “ident()”, by @[email protected] (Bram.us (by @bramus)): bram.us/2024/12/18/the…

View Transitions Snippets: Getting all Animations linked to a View Transition 🔗 brm.us/view-transitio… 🏷️ #ViewTransitions #JavaScript #Animations

CSS Custom Functions are coming … and they are going to be a game changer! 👉 brm.us/css-custom-fun…

View Transitions Applied: Smoothly animating a `border-radius` 🔗 bram.us/2025/03/11/vie… #CSS #ViewTransitions

Polyfilling CSS features is extremely hard, mainly because the CSS Parser discards what it does not understand. Here’s a wild idea: what if, instead of requiring authors to write their own parser and cascade, they could teach the CSS parser new tricks? brm.us/css-parser-ext…

View Transitions Applied: Smoothly animating a border-radius with a View Transition, revisited > Instead of duplicating an animation on the ::view-transition-group pseudo, you can also rely on CSS transitions on the original element. bram.us/2025/05/15/vie…

👀 Coming to Chrome DevTools in Chrome 138: CSS Value Tracing bsky.app/profile/bram.u…