user avatar
Bramus
@bramus
Chrome DevRel at Google (CSS + Web UI). @CSSWG Member. Former University Lecturer. PADI Divemaster. Blogs at @bramusblog. You should follow me on Bsky 🦋.
Belgium
bram.us
Joined September 2007
740
Following
13.9K
Followers
  • Pinned
    user avatar
    Bramus
    @bramus
    Aug 19, 2025
    (You know the good stuff is happening on b​sk​y, right?)
    14K
  • user avatar
    Bramus
    @bramus
    Sep 26, 2022
    🎉🥳 Good news everyone! The Large, Small and Dynamic viewport units (lv*, sv*, dv*) are coming to Chrome 108! I2S announcement: groups.google.com/a/chromium.org…
    Illustration showing the 100svh and 100lvh units side by side in Safari on iOS (left), Chrome on Android (center), Firefox on Android (right).
  • user avatar
    Bramus
    @bramus
    May 26, 2023
    Know those sites that have a fullheight cover card that transitions into a sticky header as you scroll? With Scroll-Driven Animations, you can do that with just CSS! header { animation: shrink; animation-timeline: scroll(); animation-range: 0 90vh; } scroll-driven-animations.style/#card-cover-to…
    00:00
    277K
  • user avatar
    Bramus
    @bramus
    Dec 27, 2021
    🔥 CSS Features to start learning, as I expect them to ship in all browsers in 2022: 1. Container Queries 2. Cascade Layers 3. Color Functions 4. Viewport Units 5. :has() 6. Overscroll Behaviour 7. Subgrid 8. Accent Color 9. Media Query Ranges
  • user avatar
    Bramus
    @bramus
    Aug 2, 2022
    🎉 Shipping with Chrome 104 (released today) are individual CSS properties to do transforms. From now on you can transform elements with the translate, rotate, and scale properties. Supported in all browser engines! 🔗 Read the post here: web.dev/css-individual…
    .target { translate: 50% 0; rotate: 30deg; scale: 1.2; }
  • user avatar
    Bramus
    @bramus
    Oct 23, 2023
    Scroll Detection, that’s something you need JS for, right? Guess again! Thanks to Scroll-Driven Animations you can extract the scroll velocity, allowing you to style elements based on the active scroll direction and scroll speed 🤯 Article with demos: bram.us/2023/10/23/css…
    00:00
    109K
  • user avatar
    Bramus
    @bramus
    Jun 13, 2023
    SVG support in Keynote people! SVG SUPPORT IN KEYNOTE, PEOPLE! ** breathing intensifies ** support.apple.com/en-us/HT207247
    Screenshot of https://support.apple.com/en-us/HT207247
    255K
  • user avatar
    Bramus
    @bramus
    Aug 19, 2024
    Or use this CSS: ``` .log { scroll-snap-type: y proximity; align-content: end; } .log::after { display: block; content: ""; scroll-snap-align: end; } ``` “… remains snapped to the bottom …unless the user has scrolled away from that edge” — drafts.csswg.org/css-scroll-sna…
    user avatar
    Pontus Abrahamsson — oss/acc
    @pontusab
    Aug 19, 2024
    To automatically scroll down when new messages arrive in an chat like Chat-GPT, use the following hook.
    102K
  • user avatar
    Bramus
    @bramus
    Jan 27, 2022
    What if I told you, you can show/enable form controls based on the value of a preceding control … using only CSS? Thanks to the power of :has() we can!
    00:00
  • user avatar
    Bramus
    @bramus
    Jan 22, 2024
    I built a thing last week: it’s a Scroll-Driven View Transition. Yep, you read that right: the View Transition is controlled by you scrolling! There’s a lot to tell about this one, so let’s take a look …
    00:00
    113K
  • user avatar
    Bramus
    @bramus
    Dec 21, 2021
    💡 Late night CSS :has() use-case epiphany: forms.
    /* A <label> that wraps an <input />, often seen with checkboxes and radios */ label:has(> input) { … } /* A <label> that's directly followed by an <input /> */ label:has(+ input) { … }
  • user avatar
    Bramus
    @bramus
    Oct 9, 2023
    To change a color based on Light Mode or Dark Mode, you’d typically use a `prefers-color-scheme` Media Query. To make things easier, CSS now comes with a `light-dark()` utility function. Read brm.us/light-dark to get to know the details. Browser Support: Firefox 120.
    Promotional image with the code detailed in the post: `background: light-dark(#333, #ccc)`. The first value is used in Light Mode, the second one in Dark Mode.
    139K
  • user avatar
    Bramus
    @bramus
    Aug 9, 2023
    Is that a new demo over at scroll-driven-animations.style/#card-header-s…? Why yes it is! It’s a shrinking header that gets a scroll shadow as you scroll down + its contents also get adjusted. This is all powered by Scroll-Driven Animations, using only CSS 🤩
    00:00
    91K
  • user avatar
    Bramus
    @bramus
    Nov 20, 2024
    As of Chrome 131 you have more options to style `<details>` and `<summary>`. You can now use of the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses. developer.chrome.com/blog/styling-d…
    00:00
    42K