Bramus

Chrome Developer Relations at Google (CSS + Web UI). CSSWG Member. PADI Divemaster. Blogs at bram.us. I’m primarily active on 🦋 nowadays.

🔗 Blog: https://www.bram.us
🎮 Playground: https://codepen.io/bramus
🦋 Bsky: https://bsky.app/profile/bram.us
📍 Location: Belgium

Public Key

npub159nrmm8peyzxyh6aj39hxfrrl34yv3zfwk2xvxytuasmh9rmkukst0rz7e

NIP-05 Address

bramus_at_front-end.social@momostr.pink

Profile Code

nprofile1qqs2ze3aansujprztawegjmny33lc6jxg3yht9rxrz97wcdmj3amwtgpz3mhxue69uhhyetvv9ujuerpd46hxtnfduqs6amnwvaz7tmwdaejumr0dsg4kj9t

Publishing to

relay.nostr.bg

relay.damus.io

nos.lol

Author Public Key

npub159nrmm8peyzxyh6aj39hxfrrl34yv3zfwk2xvxytuasmh9rmkukst0rz7e

Show more details

Last Notes

2026-04-02 16:10:23 UTC

Over the past years, I’ve written a bunch of posts and done quite a few experiments with View Transitions, such as optimizing the keyframes (so that they animate on the compositor) or driving a VT by scroll.
I noticed I repeated a lot of code while creating all those … so I bundled that all up in a package for you to use as well.
Optimizing the keyframes or a VT for example now is just a one-liner: optimize(transition);
👉 https://chrome.dev/view-transitions-toolkit/

2026-03-19 12:14:31 UTC

CSS `light-dark()` is about to support images!
https://www.bram.us/2026/03/19/more-easy-light-dark-mode-switching-light-dark-is-about-to-support-images/
Shipping in Firefox 150. Starting tomorrow, available behind a flag in Chromium 148.

2026-03-09 12:34:43 UTC

- reply

I was under the assumption that https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/scope does the job. Does it not?
Also, @npub1ctt…3egd is my goto fixer for all my PWA needs, so perhaps he knows the magic line of code you need here.

2026-03-02 22:30:01 UTC

On my way back home from #SotB2026 I hacked my way into animating between `position-area` values with View Transitions. The VT automatically gets started by a StyleObserver.
Demo + details can be found on my blog: https://brm.us/animate-position-area
It’s not 100% perfect though, as Firefox doesn’t do anything and Chrome has a 1-frame glitch.
https://cdn.masto.host/frontendsocial/media_attachments/files/116/161/938/787/599/816/original/c4a44353823a3214.mp4

2025-12-01 14:13:24 UTC

New in Chrome DevTools in Chrome 144: we now show the Adopted Style Sheets in the Elements tree.
https://cdn.masto.host/frontendsocial/media_attachments/files/115/644/720/011/495/648/original/558c0228b69fa79b.png

2025-11-22 07:59:22 UTC

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.”
http://groups.google.com/a/chromium.org/group/blink-dev/msg/482c0bcb26336
https://cdn.masto.host/frontendsocial/media_attachments/files/115/592/289/174/567/669/original/99e7bfcee3fbbfb2.jpeg

2025-11-20 10:47:25 UTC

Good feedback. I’ve heard requests for all of these before, so you’re on to something :)

2025-11-19 22:18:21 UTC

- reply

And it’s great for Syntax Highlighting!
https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/
(And most of the issues I cover in my post have been fixed by now)

2025-10-03 16:34:39 UTC

At #Fronteers #DarkMode, @npub16zz…2ugy proposed the <rangegroup> HTML Element which he has been working on at Open UI.
It unlocks the multi-handle range slider, a pattern you might have already used when picking a price-range on a travel website.
- Explainer: https://open-ui.org/components/enhanced-range-input.explainer/
- Demos: https://brechtdr.github.io/enhanced-range-slider-poc/
- Feedback Form: https://docs.google.com/forms/d/e/1FAIpQLSdKgYidAF097VQQ1OCr3TqHOV-reS4mRDgCNFUgB_nKZt0o1Q/viewform?pli=1
https://cdn.masto.host/frontendsocial/media_attachments/files/115/311/199/883/257/273/original/2c7a2a6e9678da99.jpeg

2025-09-30 20:08:39 UTC

New blog post: A custom `--light-dark()` function in CSS that works with any type of value _(not just colors!)_ in just 3 LOC
> CSS Custom Functions (`@function`) + CSS `if()` + CSS `color-scheme()` = one sweet combo!
https://brm.us/--light-dark()

2025-09-24 16:25:01 UTC

CSS Excitement!
> RESOLVED: Add `color-scheme()` test to both `@container` queries and `if()`.
https://github.com/w3c/csswg-drafts/issues/10577#issuecomment-3329616811
This means you can do a light-dark() that works with any type of value 🤩🤩
```
background-image: if(color-scheme(dark): url(dark.svg); else: url(light.svg));
```

2025-09-23 13:57:19 UTC

🎂 Happy 23rd birthday, Firefox
(Firefox 1.0 was released on November 9, 2004 but the first version of the thing that lead up to it – Phoenix 0.1 – was released on September 23, 2002)
https://cdn.masto.host/frontendsocial/media_attachments/files/115/253/957/102/755/207/original/4a013ac530a90eb8.png

2025-09-08 07:18:33 UTC

- reply

Don’t worry about filing a bug and it turning out to be a duplicate.
Duplicates are actually a good thing, because they act as an upvote, signaling that several sites are affected by it.

2025-05-29 13:33:07 UTC

👀 Coming to Chrome DevTools in Chrome 138: CSS Value Tracing
When you hover a --custom-prop in a `var()`, DevTools currently shows you the computed value. From Chrome 138 onwards, you can hover the `var` part to see how CSS actually got to that value.
https://cdn.masto.host/frontendsocial/media_attachments/files/114/591/370/742/746/977/original/ca039b9b5529b75b.mp4

2025-04-07 15:15:10 UTC

- reply

After ignoring the first email they send, I do reply to the follow-up one saying that it’s going to cost them $50,000 and then I don’t hear back from them. Works like a charm :)

2025-03-28 09:25:09 UTC

On my way to London for #SotB2025. See you there?

2025-03-03 21:24:53 UTC

🗣️ PSA: Chrome on Android is getting an upgrade and will support edge-to-edge from Chrome 135.
Here’s all you need to know to migrate your website to support edge-to-edge: https://developer.chrome.com/docs/css-ui/edge-to-edge
(Be sure to check this guide if you have `position: fixed` content at `bottom: 0`. If you don’t have such content, you’re fine.)
https://cdn.masto.host/frontendsocial/media_attachments/files/114/100/602/290/790/472/original/0f7b32f4c18064bc.png
https://cdn.masto.host/frontendsocial/media_attachments/files/114/100/602/667/245/094/original/2f509dd8b428d40e.png

2025-02-09 01:21:49 UTC

CSS Custom Functions are coming … and they are going to be a game changer!
👉 https://brm.us/css-custom-functions
https://cdn.masto.host/frontendsocial/media_attachments/files/113/971/298/331/303/215/original/c4c5f6c8fafd1cdb.png

2025-01-16 11:39:45 UTC

- reply

Here’s a blog post with more words on this.
https://brm.us/movebefore

2025-01-16 09:57:05 UTC

New in Chrome 133 – which goes stable on Feb 4 – is a new method to move an element around the DOM.
Unlike the classic way of removing+reinserting a node, this moveBefore method preserves the element’s state!
Iframes remain loaded, animations don’t restart, …
DEMO: https://codepen.io/bramus/full/xbKzPJB
(Add View Transitions for an even smoother move!)
https://cdn.masto.host/frontendsocial/media_attachments/files/113/837/434/789/399/567/original/c9fdd182a1285489.mp4

2024-12-28 22:11:16 UTC

Wait? What? – I don’t … HUH?! 😵‍💫
https://front-end.social/@JaneOri/113731551202700401

2024-12-10 12:34:12 UTC

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.
https://www.bram.us/2024/12/10/spot-non-composited-animations-in-chrome-devtools/

2024-12-06 00:28:00 UTC

CSS Wrapped 2024 is here!
Just like last year, we – the Chrome DevRel team – have published CSS Wrapped, our end of year overview covering many of the new #CSS and Web UI features that landed in Chrome and The Web Platform in 2024.
👉 https://chrome.dev/css-wrapped-2024/ is the place to be!

2024-11-28 14:26:11 UTC

🤩 Web Animations Excitement!
🎉 🎉 `Animation.overallProgress` is coming! 🎉 🎉
With it, you can easily and consistently get an animation’s progress, regardless of the timeline being used.
Here’s a demo that syncs a Scroll-Driven Animation’s progress to a 3D model’s rotation:
https://codepen.io/bramus/full/xbKxRzy
(Needs a browser with Scroll-Driven Animations support. Uses `Animation.progress` when available or falls back to some extra code to get the progress)

2024-11-20 16:39:41 UTC

As of Chrome 131 you have more options to style `<details>` and `<summary>`.
You can now use the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses.
https://developer.chrome.com/blog/styling-details
https://cdn.masto.host/frontendsocial/media_attachments/files/113/516/262/389/655/406/original/0cfd8fc4c3ac6662.mp4

2024-11-19 11:04:33 UTC

A while ago [@paul_irish](https://toot.cafe/@paul_irish ) and I tweaked the Chrome DevTools Performance Timeline to make it more easy for you to spot + debug non-composited animations.
- Non-composited animations are marked with red triangles
- Upon selecting, you now see the reason + relevant properties for why compositing failed
https://cdn.masto.host/frontendsocial/media_attachments/files/113/509/286/078/243/093/original/ff629772dec862b0.png

2024-11-18 13:29:19 UTC

 Chicago Kare by Duane King
A Faithful Reproduction of the Bitmap Version of the Chicago Typeface Created by Susan Kare for Apple Computer in 1984.
https://chicagokare.xyz/

2024-10-29 10:30:05 UTC

I published a new version of my experimental Chrome Dark Mode Toggle extension.
On top of per-origin override, you can now set a Chrome-wide preference to have your OS in Dark Mode but all sites in Light Mode (or vice versa).
Sites can also request an override, thanks to the Web Preferences API.
See https://brm.us/chrome-dark-mode-toggle for more details.
https://cdn.masto.host/frontendsocial/media_attachments/files/113/390/235/484/172/002/original/581cc18489d450f1.mp4

2024-10-10 21:14:19 UTC

- reply

ouch! Take care!

2024-10-08 08:18:42 UTC

Wow, look at this AMAZING Scroll-Driven Animations demo by Paul Noble!
https://codepen.io/paulnoble/pen/gOVPedz
Go check it out (and hit the ❤️ icon).
https://cdn.masto.host/frontendsocial/media_attachments/files/113/270/816/640/741/372/original/825213dcca724b13.mp4

2024-10-03 15:19:20 UTC

- reply

Maybe needs a few more iterations … 270deg rotation? No rotation but simply smaller (on top of the rightmost digit)? Something else?
(Just spitballing ideas here. I'm no designer)

2024-10-02 21:09:53 UTC

- reply

Thought: what if the numbered versions had only the number on the place where CSS is?
Or maybe scale down and rotate CSS by 90deg and prepend it to the number, all positioned at the bottom right in the box?

2024-09-29 12:39:59 UTC

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again only when scrolling up again.
By adding a long transition-delay to a CSS property under certain conditions (which you can do using a Style Query), you can persist its value.
🔗 https://brm.us/scroll-driven-header
Demo by @npub1xg9…uter.
https://cdn.masto.host/frontendsocial/media_attachments/files/113/220/864/713/689/633/original/0803793510f42ffc.mp4

2024-09-24 20:49:18 UTC

Feature detecting Scroll-Driven Animations with `@supports`: you want to check for `animation-range` too.
The problem is that a check for simply `animation-timeline: scroll()` does not exclude Firefox Nightly, which only has a partial SDA implementation.
Details: https://www.bram.us/2024/09/24/feature-detecting-scroll-driven-animations-you-want-to-check-for-animation-range-too/
https://cdn.masto.host/frontendsocial/media_attachments/files/113/194/490/825/158/341/original/5f4a140a1bca2c8c.png

2024-09-24 13:38:13 UTC

Something to add to your CSS reset from now on:
```
:root {
interpolate-size: allow-keywords;
}
```
It enables things like transitions from `height: 0` to `height: auto`.
https://developer.chrome.com/docs/css-ui/animate-to-height-auto/
https://cdn.masto.host/frontendsocial/media_attachments/files/113/192/800/068/802/496/original/584e1829c2091c91.mp4

2024-09-23 12:52:20 UTC

A often-heard complaint about View Transitions is how it handles clip-path, border-radius, opacity, …
The snapshots fade, while you’d want the clip-path to actually animate. Also, nested elements bleed out their container because the snapshots are a flat list instead of a nested tree.
https://cdn.masto.host/frontendsocial/media_attachments/files/113/186/955/866/837/043/original/e4e4ebeda74dba65.mp4

2024-09-17 21:24:26 UTC

Exciting release, as Safari now joins Chrome in supporting (Same-Document) View Transitions and Style Queries! 🎉
🔗 View Transitions: https://developer.chrome.com/docs/web-platform/view-transitions
🔗 Style Queries: https://developer.chrome.com/docs/css-ui/style-queries
https://front-end.social/@jensimmons/113153876581472336

2024-08-30 08:30:34 UTC

“Shake mouse pointer to locate” is such a good #macOS feature. I use it almost daily.
“Where is that damn mouse again?!–Oh, it’s right there.”
https://cdn.masto.host/frontendsocial/media_attachments/files/113/050/032/592/539/253/original/0d8455ec7f2f91bd.mp4

2024-08-20 10:33:18 UTC

New in @ChromeDevTools (in Chrome Canary): You can now force more states – such as :active, :focus, … – onto elements.
For example, when inspecting an <input> element you can now also force states such as :enabled, :valid, etc.
https://cdn.masto.host/frontendsocial/media_attachments/files/112/993/893/215/719/492/original/a993d3bc3f7696c3.png

2024-08-19 18:30:58 UTC

Today I saw this React hook (see photo) get shared on birdsite. It enables one to “automatically scroll down when new messages arrive in a chat”.
While it might work, you could — and should — use this little bit of CSS instead:
```
.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” — https://drafts.csswg.org/css-scroll-snap/#example-d0a2d86f
https://cdn.masto.host/frontendsocial/media_attachments/files/112/990/109/938/912/419/original/e2e794c18c839edd.jpeg

2024-08-15 09:38:47 UTC

👀 Apple/WebKit about to express support for cross-document View Transitions (and related features such pageswap, pagereveal, render blocking) + also View Transition Types.
https://github.com/WebKit/standards-positions/issues/193#issuecomment-2290888602
Get the rundown of these features here: https://developer.chrome.com/blog/view-transitions-update-io24 (video included)

2024-08-14 16:48:29 UTC

Oh nice, @npub1j49…m4j6 now has support for the 'interactive-widget' meta viewport key, to control the viewport resize behaviour when showing a virtual keyboard.
There are 3 values to choose from: resizes-visual, resizes-content, and overlays-content.
You can use one of these values to prevent a `position: fixed` element from getting placed underneath the virtual keyboard.
See https://developer.chrome.com/blog/viewport-resize-behavior#opting_in_to_a_different_behavior for all details.
Supported in Chrome from Chrome 108. No word from Safari on this.
https://cdn.masto.host/frontendsocial/media_attachments/files/112/961/391/619/157/050/original/a0109a309fadebec.png

2024-08-14 10:01:31 UTC

- reply

It’s official now: Intent to Prototype got sent out :)
https://botsin.space/@intenttoship/112955584866106108

2024-07-21 16:19:49 UTC

- reply

If you haven't been following along: (if all goes well) that means we'll have cross-browser support for Same-Document View Transitions by the end of the year! 😎

2024-05-07 07:42:31 UTC

- reply

Best to go to https://crbug.com/new and follow the form flow.
Did a quick check and I found https://issues.chromium.org/issues/40935612 for this.
Best to leave a comment with your findings on the issue to blew some new life into it.