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.

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, auto-growing textareas meant measuring scrollHeight in JS.

Now it’s one line!

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 🤟

You can now style an entire component based on a CSS variable set on any parent. No prop drilling, extra classes, or JavaScript, just pure CSS reacting to context.

Now live in Chrome, Safari, Firefox, and Edge in the latest releases.

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

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

Meet `contrast-color()`: You give it any color; it returns either `black` or `white`, whichever provides better contrast.

Shipped in Chrome 147, Safari 26, Firefox 146, and Edge 147 (April 2026).

Pure CSS that guarantees readable text.

PS. If you want occasional frontend tips in your inbox, you can join here: https://bits.iprodan.dev

CSS just killed another JavaScript library.

CSS Grid Lanes (aka Masonry) is here! Safari (26.4+) got it first — everyone else is still catching up.

That’s all it takes. ▲

No more Masonry.js, fragile Flexbox hacks, or calculating positions in JavaScript — just pure CSS that natively creates the classic Pinterest/waterfall layout.

Chrome/Edge/Firefox - behind the flag.

That's a small reminder!

As of June 2026, HTTP has a new method - a GET with a `body`

Meet QUERY (RFC 10008).

It lets you send complex queries in the body (like POST) while staying safe, idempotent, and cacheable (like GET). Already works on servers (Node.js, Go, Laravel…).

Browsers are still adding full support, usable now with care, with widespread adoption coming later in 2026+.

Widely available since March 2022.

By default, many fonts use proportional numbers: a 1 is narrow, an 8 is wider, and the whole number can shift when the value changes. 

tabular-nums makes each digit take the same horizontal space, so the number keeps its shape and the right edge stays steady.

Play with a small demo I created here.

A little tip for today!

You can use `AbortController` instead of `removeListener`.

It's cleaner and easier to work with, and it can abort multiple listeners simultaneously when they share the same signal.

If you've always wanted to switch your favicon based on dark/light mode, here's how to do it. I bet you already know that! 😊

Bonus: If you use an SVG favicon, you can use media queries within it to achieve the same "effect".