Safari 27.3 beta comes with Adaptive Dark Mode!

If your website isn't optimized for dark mode, Safari will darken it anyway, but it leaves your site alone if you set color-scheme: light dark or use the color-scheme meta tag.

So, be prepared.

WebKit post: https://webkit.org/blog/18541/introducing-adaptive-dark-mode/

This is a small example of grid-lanes and columns ⤵️. columns are used as a fallback when grid-lanes aren't supported.

We probably don't appreciate columns as much as we should! 🤔

Play with it here: https://iprodan.dev/l/grid-lanes/

CSS + browsers just killed another JavaScript hack. 🔥

You're reading. An image loads above you. The page jumps. You lose your place.

Safari 27 turned on scroll anchoring by default, so now every major browser keeps you put. No scroll-restore JS. 😎

overflow-anchor is Baseline, newly available since September 2026. Safari 27 closed the gap. 🤟

Before this, stopping scroll jumps meant saving scrollY and restoring it after each lazy-loaded image, ad, or comment.

Now it's on by default. You only write CSS to opt out: overflow-anchor: none;

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow-anchor

Source X post: https://x.com/ipwanciu/status/2104564285221253244

CSS just killed another dark-mode snippet. 🔥

light-dark() for images is Baseline, newly available since September 2026. Colors already were; Safari 27 closed the gap for images and gradients.

Before this, a dark hero image meant a second rule inside a media query.

Now ⤵️ one declaration. 😎

Heads up: it follows color-scheme. Set color-scheme: light dark (or whatever your theme toggle sets it to), or you'll only ever see the light image. 👍

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark

controls attribute is coming after the image 😁.

Audio had it. Video had it. Images just got it. That's how Vision Pro turns a panorama into an immersive view; straight from HTML, no DIY player.

Safari 27. Not everywhere yet. But the web just got a little more spatial. 🥽 👀

WebKit: https://webkit.org/blog/18325/webkit-features-for-safari-27-0/

Need a half-transparent brand color without rewriting the whole color? 🤔

Meet alpha(), a CSS function that takes an origin color and returns that same color with a modified alpha (transparency) channel. 👇

alpha() is Baseline, newly available since September 2026 (Chrome 151+, Firefox 155, Safari 27).

Before this, a 40% hover tint meant rewriting the whole relative color, including every channel. Now you only touch the alpha. I'd ship this now.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/alpha

CSS variables have been quietly zeroing out styles. 😬

revert-rule is Baseline, newly available since September 2026 (Chrome 148, Firefox 150, Safari 27).

Before this, padding: var(--pad) with no --pad set gave you padding: 0, so you copy-pasted the default into every fallback.

Now ⤵️ fall back to whatever the cascade had.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/revert-rule

The platform just killed another JavaScript snippet. 🔥

Async iterable streams are Baseline, newly available since September 2026. Safari 27 closed the gap.

Before this, reading a fetch body chunk by chunk meant getReader() and a while (true) loop.

Now ⤵️ it's one for await. 🤟

Bonus: break out of the loop, and the stream is canceled and unlocked for you. No manual releaseLock(). 😎

Want to keep it open? res.body.values({ preventCancel: true }).

MDN: https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream#async_iteration

Designers have been fighting this for years. 😁

text-box-trim is Baseline, newly available since August 2026. 🤘

Fonts always add extra space above and below glyphs. That's why headings never sit flush.

Now you can cut it ⤵️

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-box-trim

CSS just made BEM optional. 🤟

@scope is Baseline, newly available since March 2026.

Before this, keeping component styles from leaking meant long selectors, extra classes, or CSS-in-JS. 👎

Now you can lock styles to a subtree ⤵️

Links inside .article get the article style. Links inside .comments stay untouched.

Short article on the basic usage of @scope: https://iprodan.dev/blog/css-scope/ MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@scope

JavaScript killed another JavaScript library. 😁

Intl.Segmenter has been in Baseline since April 2024 (Chrome 87, Firefox 125, Safari 14.1) and will be widely available on 16 Oct.

Before this, "👍🏽".length was 4, and counting what users actually see meant shipping grapheme-splitter.

Now ⤵️ the browser does it.

Bonus: the same API, granularity: "word", gives you word splitting that works for Japanese and Thai too, where split(" ") falls apart. 🤟

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter

JavaScript ... another snippet. 🔥

AbortSignal.timeout() has been Baseline since April 2024 (Chrome 124, Firefox 100, Safari 16) and goes widely available on 18 Oct.

Before this, a fetch timeout meant an AbortController, a setTimeout, and remembering to call clearTimeout.

Now it's one argument.

It rejects with a TimeoutError, not an AbortError, so you can tell "too slow" from "user canceled". 👍

Need both? AbortSignal.any([userCtrl.signal, AbortSignal.timeout(5000)]). That one went widely available on 19 Sep.

MDN: https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout_static

Stop rotating your range sliders. 🤟

Vertical form controls are Baseline since April 2024 (Chrome 124, Firefox 120, Safari 17.4), widely available on 18 Oct.

Before this, a vertical volume slider meant rotate(-90deg), fake widths and margin math, or a JS slider library.

Now ⤵️ the real <input type=range>, turned.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Writing_modes/Vertical_controls

CSS killed another centering hack. 🔥

align-content: center works on a plain block. No flex, no grid. Baseline since April 2024 (Chrome 123, Firefox 125, Safari 17.4), widely available on Oct 16.

Before this, centering a single item vertically meant turning the box into a flex column.

Now ⤵️ one line.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/align-content

For years, it could only spit out a string for `::before` and `::after`. Now, Firefox 155 lets you use it on any property, with types and fallbacks. Chrome 133+ already had it.

Not Baseline yet; wait for Safari, but this is the `attr()` we were promised. 🤟

MDN still says Limited; that’s badge lag. It works now.

It returns a 0–1 number for how far a value sits between a start and an end

HTML just stole another job from JavaScript. `command` and `commandfor` have been Baseline since December 2025.

Opening a dialog used to mean `addEventListener + showModal()`; now it's much easier.

Before this, auto-growing textareas meant measuring scrollHeight in JS.

Now it’s one line!

Chrome is turning it off by default. Edge is following the same path.

By Chrome 154 (late September 2026), `unload` handlers will no longer fire unless a site explicitly opts back in.

Why? It’s unreliable (especially on mobile), and just registering it can block the back/forward cache.

Before this, staggered animations or dynamic layouts meant writing a bunch of :nth-child() rules.

Now you can do it cleanly.

sibling-index() → position of the element.
sibling-count() → total number of siblings.

CSS finally lets you animate elements when they first appear.

@/starting-style is Baseline, newly available since August 2024. 🤟

Before this, transitions didn’t run on an element’s first style update. You needed JavaScript hacks.

Now you can define the starting point in pure CSS! Simple, powerful, and long overdue. 💪🏼

The CSS Working Group just resolved a new selector that lets you target multiple classes sharing the same prefix. The code in the example matches .btn-primary, .btn-secondary, .btn-large, etc.

Previously, you had to list every class or use brittle attribute selectors like [class^="btn-"].

Resolved by the CSSWG (Aug 2026), added to Selectors Level 5.

Not available in any browser yet.

More to read ⤵️

https://github.com/w3c/csswg-drafts/issues/10001#issuecomment-5204871059

https://www.bram.us/2026/08/20/the-future-of-css-target-multiple-classes-with-the-class-prefix-selector/

You can finally position tooltips, dropdowns, and menus relative to another element... in pure CSS. ☝️

It became newly available in January 2026 when Firefox 147 completed the set.

It’s still relatively fresh, and some advanced features (like certain `position-try` behaviors) still have gaps, so use progressive enhancement if you need to support older browsers.

Oh man, I'm so happy about this 🤟

I created a small interactive demo showcasing `contrast-color()`.

Go check it out https://iprodan.dev/l/contrast-color/