Related: github.com/w3c/csswg-dr... (with a few use cases inside)

Release Notes for Safari Technology Preview 238 Safari Technology Preview Release 238 is now available for download for macOS Tahoe and macOS Sequoia.

Did you see what’s in Safari Technology Preview 238?!
* Customizable <select>
* Scroll anchoring
* The :open pseudo-class
* Threaded animations
* JSPI for WebAssembly

and more — including fixes for SVG, tables, WebRTC…

webkit.org/blog/17848/r...

Typographic Scales in CSS with :heading(), sibling-index(), and pow() Learn how to build flexible, mathematical typographic scales using :heading(), sibling-index(), and pow() for cleaner CSS design systems.

🎉 New Blogpost 🎉

Building Typographic Scales in CSS with :heading(), sibling-index(), and pow()

www.alwaystwisted.com/articles/bui...

What if we could create a typographic scale for headings with one line of CSS?

One rule to scale them all.

#CSS #FrontEnd #WebDev

Announcing Interop 2026 Exciting news for web developers, designers, and browser enthusiasts alike — Interop 2026 is here, continuing the mission of improving cross-browser interoperability.

Interop 2026 launches today! If you want know on what it includes and what it means for web development — our article provides all the details. webkit.org/blog/17818/a...

Focus areas include Anchor Positioning, Style Queries, contrast-color(), WebTransport and much, much more.

Some CSS only contrast options until contrast-color() is Baseline widely available While we wait for contrast-color() to arrive in all browsers, these CSS-only approaches by Donnie D’Amato give us a practical way forward that we can use right now, along with lots of other knowledge...

While we wait for contrast-color() to arrive in all browsers, these CSS-only approaches by Donnie D’Amato give us a practical way forward that we can use right now, along with lots of other knowledge on how colour works in CSS.

piccalil.li/blog/some-cs...

<meta name="text-scale" content="scale" />

So there's a new meta element arriving in town (Chrome Canary first)? 👏

www.joshtumath.uk/posts/2026-0...

I can confirm you that `scroll-state(scrollable)`, can detect an overflow content without user scrolling: www.w3.org/TR/css-condi...

Screenshot of the Firefox dev tools next to a form, showing how the disabled attribute on <fieldset> toggles an entire set of form controls

Forms are better with <fieldset> and <legend> because of accessibility and stuff (adrianroselli.com/2022/07/use-... for details), but did you know that <fieldset> also has a hidden DX feature? You can toggle its disabled attribute to enable or disable whole sets of inputs all at once!

#html #webdev

Did you already thought about a solution with overflow detection by Scroll-driven animation and ::has()?
(maybe more convenient with @container scroll-state() query in the future)

Yes, medical issue 😉

Safari Tech Preview with green text

Chrome Canary with green text

Firefox Nightly with red text

```#css
.container {
container-name: --example;
}

h1 {
color: red;

@container --example {
color: green;
}
}
```

Canary and Tech Preview both showing green text! Gettin there, excited for these to hit stable.

Release v31.22.0 · czerkies/romanczerkies.31 Icon in adaptive SVG file format #208 Bring scrollbar aestheticism consistency with scrollbar-color CSS property #215 Declare version inside personalized meta tag version #214 Precise box-sizing: b...

SVG icon: lightweight, scalable, accessible & adaptive.

github.com/czerkies/rom...

My experience isn’t the same as yours: I’ve recently reported bugs to Chrome and Firefox over the past few months, and no big deal, we are here for that!

I found the same issues with chrome and firefox, it just depends on which navigator you are developing first

The "new IE" was about delays, not about bugs 🤔

CSS Grid Lanes is now in Safari Technology Preview 234.

Check out all the revised demos of Grid Lanes in Safari Technology Preview 234!

webkit.org/demos/grid3/

Oklchroma: an OKLCH color pattern generator that generates CSS variables | utilitybend Generate OKLCH color patterns from one base color the Oklchroma tool. Inspired by a talk at CSS Day, easily copy CSS variables.

Created a little Oklch pattern generator a while ago. But never did a write-up about it. So here it is. A little write-up on Oklchroma, things implemented, and things I'd like to do. Brutally honest about my bad React skills and where the inspiration came from:
utilitybend.com/blog/oklchro...

Need more vibrant colors with a great color declaration function made for human and the future?
Well done: oklch()

WebKit Features for Safari 26.2 Safari 26.2 is a big release.

Safari 26.2 is here with 65 features + 165 bug fixes — including field-sizing, Navigation API, Largest Contentful Paint, command & commandfor, CHIPS opt-in partitioned cookies, scrollend event, random(), WebGPU in WebXR, scrollbar-color, hidden=until-found and much more! webkit.org/blog/17640/w...

CSS text-decoration-inset landed in Firefox 146! Here's how it works:

Frontend News #19: CSS overscroll-behavior, scrollbar-gutter, text-grow Properties, & More YouTube video by CSS Weekly

📰 Frontend News #19

A brief look at CSS properties:
🌈 overscroll-behavior
🎯 scrollbar-gutters
🤯 text-grow
🧠 And more...

Featuring @bram.us, @zachleat.com , @css-only.dev, @projectwallace.com, @nerdy.dev. 🙏

youtu.be/PjZYyZWukBw

"…the time to evaluate and implement passkeys is now… adoption offers not just enhanced security but also a competitive advantage in user trust…"

"…embracing passkeys isn't merely an upgrade; it's a fundamental recalibration of our approach to… security."

allsafeus.com/elevating-mfa-w...

Custom Media Feature Flags · December 6, 2025 Use true or false queries

#CSS `@custom-media` feature flags

create your own true or false media queries
nerdy.dev/custom-media...

About to have CSS ANCHOR POSITIONING FULLY CROSS-BROWSER!!

Screenshot of the following CSS as an example of how to customize find-in-page: :root::search-text { background: yellow; } :root::search-text:current { color: white; background: olive; text-decoration: underline; } aside::search-text { background: magenta; } aside::search-text:current { background: darkmagenta; }

You can now easily customize find-in-page with the new ::search-text pseudo-element, that is shipping in Chromium 144.0.7547. 🚀
Find more details on the blog post by Stephen Chenney: blogs.igalia.com/schenney/fin...
Thanks to Bloomberg for sponsoring this work.

News from WWDC25: WebKit in Safari 26 beta Welcome to WWDC25!

@saron.bsky.social @jensimmons.bsky.social Hi!

I'm testing the use of SVG for Web Apps inside the webmanifest (STP), but it doesn't work.
You mention that in this article: webkit.org/blog/16993/n....

Maybe I'm wrong but perhaps you have an example or more precisions on how to use it?

Thanks!

const { shape, color, mass, } = await Promise.allKeyed({ shape: getShape(), color: getColor(), mass: getMass(), });

ECMAScript excitement 😉

Congrats to my coworker @ashley-c.bsky.social at TechAtBloomberg on advancing Await Dictionary to Stage 2.7 at TC39 today 🎉

Promise.all returns positional results as an array. Promise.allKeyed allows named results inside an object 👍

github.com/tc39/proposa...

Aye, please.

Great article!

One question, have you tried « dir » attribute with « auto » value ?
For instance, with translate on Safari: it works perfectly!

last week I wrote 3 articles:

Context‑Aware Cornering: How inherit() Can Simplify Border‑Radius for Components
www.alwaystwisted.com/articles/mak...
Styling The gap with CSS
www.alwaystwisted.com/articles/sty...
A Few Useful Web Development Bookmarklets
www.alwaystwisted.com/articles/a-f...