The Curious Engineer

All blogs / Frontend / CSS / browsers

Bram.us

bram.us

A rather geeky/technical weblog, est. 2001, by Bramus

Frontend / CSS / browsersJavaScript / TypeScriptWeb development

’05’10’15’20’25
Posts
7,126 from 30 Sep 2003 to 22 Oct 2026
Posting
weekly (47 in the last year)
Kind
personal blog
Feed
https://www.bram.us/feed/

Latest

October 2026

  1. GTA.js, a reimplementation of the 1997 Grand Theft Auto engine in JavaScript and WebGL
  2. Scroll-Triggered Animations Debugger (DevTools Extension)
  3. Introducing css-typed-om , a complete and WPT-tested polyfill for CSS Typed OM
  4. <calc-input> , a custom input element that accepts mathematical formulas
  5. caniname : CLI tool to check project name availability across Netlify and NPM (and other sources)
  6. Bringing Microsoft Internet Explorer’s proprietary “Interpage Transitions” back to Modern Browsers using the View Transition API

September 2026

  1. Show keystrokes on a website with the <show-keystrokes> custom element
  2. New in Chrome 154: iframes that automatically resize themselves to their content
  3. Ship cleaner packages (without the ./dist or ./src folder) by publishing a subfolder to NPM
  4. Introducing <rich-input> , a GitHub-like search/filter text input to embed on your site
  5. WebKit supports interactive-widget … and hopefully Safari will too?
  6. Introducing <mermaid-element> , a custom element to display Mermaid diagrams
  7. Animating CSS Grid Layouts with CSS Anchor Positioning
  8. Introducing <hic-pageflip> : A Pageflip/Flipbook Custom Element powered by HTML-in-Canvas

August 2026

  1. Feature Detecting “Undetectable” CSS Features with @supports named-feature()
  2. The Future of CSS: Target Multiple Classes with the Class Prefix Selector
  3. The Case for Tri-State Dark Mode Toggles
  4. Unlock Immediate Diagonal Scrolling with CSS scroll-axis-lock: none
  5. MDN Traffic Browser

July 2026

  1. Styling the Navigation: Declarative Route and Navigation Matching in CSS
  2. What’s new in Web UI (Google I/O 2026)

June 2026

  1. Cranking View Transtions up to 11 (2026.05.07 @ All Day Hey!)
  2. Cranking View Transtions up to 11 (2026.04.28 @ Beyond Tellerrand)
  3. Do Websites Need to Function Exactly the Same on Every Platform?
  4. View Transitions: Use the new attr() or match-element for the view-transition-name ?

April 2026

  1. Introducing view-transitions-toolkit , a collection of utility functions to more easily work with View Transitions.

March 2026

  1. CSS position: sticky now sticks to the nearest scroller on a per axis basis!
  2. Cranking View Transtions up to 11 (2026.03.25 @ devs.gent)
  3. More Easy Light-Dark Mode Switching: light-dark() is about to support images!
  4. Detect at-rule support in CSS with @supports at-rule(@keyword)
  5. Introducing view-transitions-mock : A non-visual Polyfill for Same-Document View Transitions
  6. Experiment: Animating CSS position-area with View Transitions

February 2026

  1. Anchors Aweigh! (2026.02.28 @ State of the Browser)
  2. Anchors Aweigh! (2026.02.26 @ PHP Antwerp)

January 2026

  1. Chrome 145 146 adds Experimental Support for Vertical Tabs
  2. Using 100vw is now scrollbar-aware (in Chrome 145+, under the right conditions)

December 2025

  1. How to Find the public WebKit Bug from the Apple-internal rdar:// Bug ID
  2. CSS Scroll-Triggered Animations are coming to Chrome!
  3. CSS Wrapped 2025
  4. The Google Antigravity website, rebuilt with Modern CSS
  5. Anchor Positioning and the Inset-Modified Containing Block (IMCB)

November 2025

  1. Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open
  2. Señors @ Scale: Modern CSS at Scale with Bramus
  3. Anchor Positioning is transform-aware in Chrome 144+
  4. Faking Two-Phase View Transitions with the Navigation API’s precommitHandler
  5. Animating CSS width or height no longer forces a Main Thread animation (in Chrome, under the right conditions)
  6. Combining Scroll-Driven Animations with @starting-style

October 2025

  1. Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up.
  2. CSS @starting-style debugging is available in Chrome DevTools!
  3. View Transitions Feature Explorer
  4. The CSS Podcast is back! And I’m a co-host now.
  5. What’s New in View Transitions (2025 Update)

September 2025

  1. A custom --light-dark() function in CSS that works with any type of value (not just colors!) in just 3 LOC
  2. Prevent clipping issues (and more) in View Transitions by using Nested View Transition Groups
  3. Ready for Developer Testing: Scoped View Transitions

June 2025

  1. Cranking View Transtions up to 11 (Safely, Maybe) (2025.06.12 – Middlesbrough Front End)

May 2025

  1. Scroll-Driven Animations with CSS (2025.05.30 @ JSHeroes)
  2. Supercharge Web UX with View Transitions (2025.05.28 @ WebExpo)
  3. Web animations today and tomorrow (Google I/O 2025)
  4. View Transitions Applied: Smoothly animating a border-radius with a View Transition, revisited
  5. Polyfilling CSS with CSS Parser Extensions

April 2025

  1. Anti-climax

March 2025

  1. View Transitions Applied: Smoothly animating a border-radius with a View Transition
  2. Place the Address Bar at the bottom in Chrome on Android
  3. View Transitions Applied: Dealing with the Snapshot Containing Block

February 2025

  1. Solved by StyleObserver : Element.matchContainer()
  2. CSS @function + CSS if() = 🤯
  3. CSS Custom Functions are coming … and they are going to be a game changer!
  4. View Transitions Applied: More performant ::view-transition-group(*) animations

January 2025

  1. View Transitions Snippets: Keeping the page interactive while a View Transition is running
  2. MPA View Transitions Deep Dive
  3. CSS attr() gets an upgrade
  4. Move elements around the DOM while preserving their state with moveBefore
  5. View Transitions Snippets: Keeping track of the old and new positions of a transitioned element
  6. View Transitions Snippets: Getting all Animations linked to a View Transition

December 2024

  1. View Transitions Experiment: Automatically trigger a View Transition when a JavaScript Property of an Element changes
  2. Misconceptions about View Transitions
  3. Animatable Accordions (2024.11.27 @ devs.gent)
  4. The Future of CSS: Construct <custom-ident> and <dashed-ident> values with ident()
  5. Re-imagine the web with View Transitions
  6. Spot Non-Composited Animations in Chrome DevTools
  7. CSS Wrapped 2024
  8. Re-imagine the web with Scroll-Driven Animations
  9. Control the Viewport Resize Behavior on mobile with interactive-widget
  10. More options for styling <details>

November 2024

  1. View Transitions Experiment: Automatically triggered View Transitions with MutationObserver
  2. Supercharge Web UX with View Transitions (2024.10.18 @ React Brussels)

October 2024

  1. Chrome Dark Mode Toggle v1.1
  2. Scroll-driven animated card stack with scroll snap events
  3. CSSNestedDeclarations is coming to all browsers to improve CSS Nesting!
  4. Feature detect Style Queries Support in CSS
  5. Benchmarking the performance of CSS @property

September 2024

  1. Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up.
  2. The CSS Podcast 089: View Transitions
  3. Observing Style Changes (2024.09.25 @ devs.gent)
  4. Feature detecting Scroll-Driven Animations with @supports : you want to check for animation-range too
  5. A better capturing mode for View Transitions
  6. Animate to height: auto; (and other intrinsic sizing keywords) in CSS
  7. Introducing @bramus/caniuse-cli , a CLI tool for “Can I Use …”

August 2024

  1. Introducing @bramus/style-observer , a MutationObserver for CSS

July 2024

  1. Feature detect CSS @starting-style support
  2. Feature detect CSS @property support
  3. Computing cos(25deg) in CSS

June 2024

  1. Cross-Document View Transitions for MPAs are here! (2024.06.05 @ CSS Day Pre-Event)
  2. CSS-only Custom Range Slider with Motion

May 2024

  1. Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo)
  2. Cross-Document View Transitions for MPA: you need @view-transition to opt-in, not the meta tag
  3. MPA View Transitions are here! (2024.05.23 @ JSHeroes)
  4. Multi-page application View Transitions are here (Google I/O 2024)
  5. Introducing “Unleash the Power of Scroll-Driven Animations”
  6. Misconceptions about CSS Specificity

April 2024

  1. Scroll-Driven View Transitions – If View Transitions and Scroll-Driven Animations had a baby … (2024.04.25 @ CSS Café)
  2. CSS color-scheme -dependent colors with light-dark()
  3. What if you had real control over Light Mode / Dark Mode on a per-site basis?

February 2024

  1. CSS Foundations: What is IACVT?
  2. CSS ::backdrop now inherits from its originating element
  3. Tailwind marketing and misinformation engine
  4. View transitions: Handling aspect ratio changes
  5. Volvo Cars Design System: Our future CSS strategy
  6. Syntax Highlighting code snippets with Prism and the Custom Highlight API
  7. Scroll-Driven Animations: You want overflow: clip , not overflow: hidden

January 2024

  1. How to use a Custom Easing Function with the Web Animations API (WAAPI)

December 2023

  1. The mysterious case of using CSS animation-composition: accumulate on a scale transform
  2. CSS Wrapped 2023
  3. Embrace the Platform

November 2023

  1. View Transitions and Scroll-Driven Animations (2023.11.16 @ Devine)

October 2023

  1. Scoped styling with CSS @scope (2023.10.19 @ Full Stack Europe)
  2. Solved by CSS Scroll-Driven Animations: Style an element based on the active Scroll Direction and Scroll Speed
  3. What’s new in CSS? (2023.10.12 @ Frontmania)
  4. The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark()
  5. LearnWithJason: CSS-Only Scroll-Driven Animations
  6. Run a Scroll-Driven Animation only once
  7. Animate between states with the View Transition API (2023.09.27 @ devs.gent)

September 2023

  1. Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not
  2. Scroll-Driven Animations Debugger (DevTools Extension)
  3. Mastodon Redirector – A browser extension to rewrite external Mastodon URLs to your own instance

August 2023

  1. CSS @property improvements in​ Chrome DevTools (Chrome 118)
  2. A quick introduction to CSS @scope
  3. Scroll-Driven Animations and View Transitions (2023.06.09 @ CSS Day)

July 2023

  1. CrBug Release Indicator

June 2023

  1. Style Recalculation Secrets They Don’t Want You To Know | Patrick Brosset | CSS Day 2023
  2. Solved by CSS Scroll-Driven Animations: A :snapped selector
  3. Synchronize videos, 3D-models, etc. to Scroll-Driven Animations
  4. How Blink invalidates styles when :has() in use?
  5. Creating Scroll-Triggered Animations by combining Scroll-Driven Animations, Custom Properties, Style Queries, and Transitions
  6. Cyclic Dependency Space Toggles
  7. Introducing scroll-driven-animations.style
  8. Syntax: Supper Club × Bramus Van Damme on CSS

May 2023

  1. The Yellow Fade Technique with Modern CSS using @starting-style
  2. What’s new in web animations (Google I/O 2023)

Every year

2026 362025 392024 472023 392022 1432021 4552020 4642019 3472018 1892017 3592016 3502015 2872014 3962013 4862012 5602011 3752010 1042009 2122008 4442007 1,0832006 6742005 182004 142003 5