PostHole
Compose
Login
What’s !important #6: :heading, border-shape, Truncating Text From the Middle, and More
Despite what’s been a sleepy couple of weeks for new Web Platform Features, we have an issue of What’s !important that’s prrrretty jam-packed. The web community had a lot to say, it seems, so fasten your seatbelts!
What’s !important #6: :heading, border-shape, Truncating Text From the Middle, and More originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
What’s !important #6: :heading, border-shape, Truncating Text From the Middle, and More
Feb 27, 2026
Despite what’s been a sleepy couple of weeks for new Web Platform Features, we have an issue of What’s !important that’s prrrretty jam-packed. The web community had a lot to say, it seems, so fasten your seatbelts!
@keyframes animations can be strings
Peter Kröner shared an interesting fact about @keyframes animations — that they can be strings:
@keyframes "@animation" {
/* ... */
#animate-this {
animation: "@animation";
Yo dawg, time for a #CSS fun fact: keyframe names can be strings. Why? Well, in case you want your keyframes to be named “@keyframes,” obviously!
#webdev
— Peter Kröner (@sirpepe.bsky.social) Feb 18, 2026 at 10:33
I don’t know why you’d want to do that, but it’s certainly an interesting thing to learn about @keyframes after 11 years of cross-browser support!
: vs. = in style queries
.Jay-Z {
--Problems: calc(98 + 1);
/* Evaluates as calc(98 + 1), color is blueivy */
color: if(style(--Problems: 99): red; else: blueivy);
/* Evaluates as 99, color is red */
color: if(style(--Problems = 99): red; else: blueivy);
In short, = evaluates --Problems differently to :, even though Jay-Z undoubtably has 99 of them (he said so himself).
David Bushell demonstrated how to create <dialog>s declaratively using invoker commands, a useful feature that allows us to skip some J’Script in favor of HTML, and works in all web browsers as of recently.
Also, thanks to an inquisitive question from Ana Tudor, the article spawned a spin-off about the . Is it still seven?
Maybe not…
How to truncate text from the middle
Wes Bos shared a clever trick for truncating text from the middle using only CSS:
Someone on reddit posted a demo where CSS truncates text from the middle.
They didn't post the code, so here is my shot at it with Flexbox
— Wes Bos (@wesbos.com) Feb 9, 2026 at 17:31
Donnie D’Amato attempted a more-native solution using ::highlight(), but ::highlight() has some limitations, unfortunately. As Henry Wilkinson mentioned, Hazel Bachrach’s 2019 call for a native solution is still an open ticket, so fingers crossed!
How to manage color variables with relative color syntax
Theo Soti demonstrated how to manage color variables with relative color syntax. While not a new feature or concept, it’s frankly the best and most comprehensive walkthrough I’ve ever read that addresses these complexities.
How to customize lists (the modern way)
In a similar article for Piccalilli, Richard Rutter comprehensively showed us how to customize lists, although this one has some nuggets of what I can only assume is modern CSS. What’s symbols()? What’s @counter-style and extends? Richard walks you through everything.
Source: Piccalilli.
Can’t get enough on counters? Juan Diego put together a comprehensive guide right here on CSS-Tricks.
How to create typescales using :heading
Safari Technology Preview 237 recently began trialing :heading/:heading(), as Stuart Robson explains. The follow-up is even better though, as it shows us how pow() can be used to write cleaner typescale logic, although I ultimately settled on the old-school <h1>–<h6> elements with a simpler implementation of :heading and no sibling-index():
:root {
--font-size-base: 16px;
--font-size-scale: 1.5;
:heading {
/* Other heading styles */
/* Assuming only base/h3/h2/h1 */
body {
font-size: var(--font-size-base);
h3 {
font-size: calc(var(--font-size-base) * var(--font-size-scale));
h2 {
font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 2));
h1 {
font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 3));
Una Kravets introduced border-shape
Speaking of new features, border-shape came as a surprise to me considering that we already have — or will have — corner-shape. However, border-shape is different, as Una explains. It addresses the issues with borders (because it is the border), allows for more shapes and even the shape() function, and overall it works differently behind the scenes.
Source: Una Kravets.
modern.css wants you to stop writing CSS like it’s 2015
It’s time to start using all of that modern CSS, and that’s exactly what modern.css wants to help you do. All of those awesome features that weren’t supported when you first read about them, that you forgot about? Or the ones that you missed or skipped completely? Well, modern.css has 75 code snippets and counting, and all you have to do is copy ‘em.
Kevin Powell also has some CSS snippets for you
And the commenters? They have some too!
Honestly, Kevin is the only web dev talker that I actually follow on YouTube, and he’s so close to a million followers right now, so make sure to hit ‘ol K-Po’s “Subscribe” button.
In case you missed it
Actually, you didn’t miss that much! Firefox 148 released the shape() function, which was being held captive by a flag, but is now a baseline feature. Safari Technology Preview 237 became the first to trial :heading. Those are all we’ve seen from our beloved browsers in the last couple of weeks (not counting the usual flurry of smaller updates, of course).
That being said, Chrome, Safari, and Firefox announced their targets for Interop 2026, revealing which Web Platform Features they intend to make consistent across all web browsers this year, which more than makes up for the lack of shiny features this week.
[...]