← Feed

Posts

• Post #2093485

  Ooh, just now Firefox has enabled #CSS :has() support on Nightly! Should be in tomorrow's build. https://bugzilla.mozilla.org/show_bug.cgi?id=1853701

• Post #1803896

  Blown away by @andremichelle's openDAW, which runs ENTIRELY in the browser! 🤯 https://opendaw.org So much thought and attention to detail went into this. And it's all Open Source too! https://github.com/andremichelle/openDAW The web is AMAZING 🤩 #BTConf

• Post #1527824

  One thing that’s a bit of a hassle with Mastodon is that you can’t immediately follow people on other instances. You have to copy the username and search for it on the server that has your account. To make this easier, I’ve created a little bookmarklet. Press it, and you’ll be taken to the same account as viewed from the masto host you are on. GitHub Gist: https://gist.github.com/bramus/d8bce55dab1881cde18aa2169c66ac33 (Change the value of `MY_MASTO_HOST` in the code to your mastodon host...

• Post #1208210

  Put your #CSS calc() hat on because sin(), cos(), tan(), and friends are available in Chrome 111! Now supported across all major browser engines 🎉 https://web.dev/css-trig-functions/

• Post #1028190

  RE: https://mastodon.scot/@svgeesus/116280100248182454 More details on the “parsing would be hard” part in https://www.bram.us/2026/03/19/more-easy-light-dark-mode-switching-light-dark-is-about-to-support-images/ ;)

• Post #1028189

  Some more prototyping fun: this time an extension to visualize the Containing Block of an element. It shows the element and its containing block (an element, the Viewport, or the ICB) along with some base info. Get it here: https://chromewebstore.google.com/detail/devtools-containing-block/cfhjohibdfclahlfljknkjmcdkfkcflj What other info would you like to see in a feature like this? (The heavy lifting to identify the containing block is done by the https://github.com/bramus/get-containing-bl...

• Post #1028187

  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/

• Post #1009691

  RE: https://front-end.social/@leaverou/116297807826814028 Before you blindly say 100px–200px–300px, hear me out: https://github.com/LeaVerou/blog/discussions/137#discussioncomment-16340589 (And if you really want it to be 100px–200px–300px then it’s simple: don’t type the --arg)

• Post #925108

  Can you Syntax Highlight a code snippet on the web without overloading the DOM with a ton of `<span>` elements wrapped around the tokens? Thanks to the Custom Highlight API, you can! https://codepen.io/bramus/full/VwRqGVo

• Post #925102

  Good CTA by @kizu: (If you have time), get your hands dirty with experimental web platform features and try to bend them in all sorts of ways … and then share your feedback and findings (blog post, CSSWG issues, browser bugs, …). Together we can make the web better. #cssday

• Post #883744

  At #Fronteers #DarkMode, @utilitybend 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...

• Post #867371

  If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain: the reality was that only one of both would stick. A recent change to CSS fixes this: `position: sticky` now plays nice with _single-axis scrollers_. https://www.bram.us/2026/03/30/css-sticky-per-axis/

• Post #862474

  RE: https://mastodon.world/@heypresents/115894519172920695 Come see me speak at All Day Hey! 2026 on May 7 later this year, where I will be bending the View Transition API in all sorts of unconventional ways. https://heypresents.com/conferences/2026

• Post #767902

  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.

• Post #634706

  RE: https://mastodon.world/@webstandards/116147775062588951 You can find the slides of my #SotB2026 talk on my blog: https://www.bram.us/2026/02/28/anchors-aweigh-sotb2026/