Despite what has been a sleepy few weeks for the new web platform features, we have an issue of What’s Important That Matters prrrretty chock full. It looks like the web community had a lot to say, so fasten your seat belts!
@keyframes animations can be strings
Peter Kröner shared it an interesting fact about it @keyframes animations — that they could be strings:
@keyframes "@animation" {
/* ... */
}
#animate-this {
animation: "@animation";
}Yo dawg, time for a #CSS fun fact: keyframe names can be strings. Why? If you want your keyframes to be named ‘@keyframes’, sure! #webdev
[image or embed]
—Peter Kroner (@sirpepe.bsky.social) February 18, 2026 at 10:33 am
I don’t know why you would want to do that, but it’s certainly interesting to learn about @keyframes after 11 years of cross-browser support!
: vs = in style queries
Another hidden trick, this one from Temani Afif, has revealed that we can replace the colon in a style query with an equal symbol. Temani does a great job of explaining the difference, but here’s a quick code snippet to summarize:
.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 :even though Jay-Z undoubtedly has 99 (he said so himself).
Declarative .visually-hidden)
David Bushell demonstrated it how to create s declaratively using invoker commandsa useful feature that allows us to skip part of J’Script in favor of HTML, and which recently works in all web browsers.
Thanks to a curious question from Ana Tudor, the article also led to a spin-off about the minimum number of styles required for a visually hidden utility class. Is it still seven?
Maybe not…
Cut text from the middle
Wes Bos shared a clever trick for it truncate text from the middle using only CSS:
Someone on reddit posted a demo where CSS cuts text from the middle. They haven’t posted the code, so here’s my chance with Flexbox
[image or embed]
— Wes Bos (@wesbos.com) February 9, 2026 at 5:31 PM
Donnie D’Amato tried to use a more native solution ::highlight()But ::highlight() unfortunately has some limitations. As Henry Wilkinson said, Hazel Bachrach’s 2019 call for a native solution is still an open ticket, so fingers crossed!
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 is honestly the best and most comprehensive walkthrough I have ever read that addresses these complexities.
Customize lists (the modern way)
In a similar article for Piccalilli, Richard Rutter showed us in detail how to customize listsalthough this one has some nuggets that I can only assume are modern CSS. What is symbols()? What is @counter-style And extends? Richard will guide you through everything.
Can’t get enough of counters? Juan Diego has put together an extensive guide to CSS Tricks here.
How to create type scales using :heading
Safari Technology Preview 237 recently started testing :heading/:heading(), as Stuart Robson explains. The sequel is even better, though, because it shows us how pow() can be used to write cleaner letter-scale logic, although I ultimately opted for the old-fashioned one –
: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));
}Introduced Una Kravets border-shape
Speaking of new features, border-shape came as a surprise to me, since we already - or shall to have - corner-shape. However, border-shape is different, as Una explains. It addresses the issues with boundaries (because it is the edge), creates more shapes and even the shape() function, and in general it works differently behind the scenes.
modern.css wants you to stop writing CSS like it's 2015
It's time to start using all that modern CSS, and that's exactly it modern.css would you like to help with that? All those great features that weren't supported when you first read about them and you forgot about them? Or ones you missed or skipped entirely? Well, modern.css has 75 code snippets and counting, and all you have to do is copy them.
Kevin Powell also has some CSS snippets for you
And the commentators? They have some too!
Honestly, Kevin is the only web developer I actually follow on YouTube, and he is So almost a million followers So make sure you click K-Po's 'Subscribe' button.
In case you missed it
You actually didn't miss that much! Firefox 148 left the shape() feature, which was captured by a flag, but is now a basic feature. Safari Technology Example 237 became the first to stand trial :heading. That's all we've seen from our beloved browsers in recent weeks (not counting the usual stream of smaller updates, of course).
That being said, Chrome, SafariAnd Firefox have announced their goals for Interop 2026, revealing which web platform features they want to make consistent across all web browsers this year. more than makes up for the lack of shiny facial features this week.
Also becoming available (but now testable in Chrome Canary, just like border-shape) is the scrolled keyword for container queries with scroll state. Bramus talks about scrolled scroll state queries here.
Remember: If you don't want to miss anything, you can check out these Quick Hits as soon as the news appears in the sidebar of css-tricks.com.
See you in fourteen days!
#Whats #important #headline #border #shape #cut #text #center #CSS #tricks