Regardless of what’s been a sleepy couple of weeks for brand spanking new Net Platform Options, we now have a difficulty of What’s !essential that’s prrrretty jam-packed. The online group had rather a lot to say, it appears, so fasten your seatbelts!
@keyframes animations could be strings
Peter Kröner shared an fascinating reality about @keyframes animations — that they are often strings:
@keyframes "@animation" {
/* ... */
}
#animate-this {
animation: "@animation";
}Yo dawg, time for a #CSS enjoyable reality: keyframe names could be strings. Why? Effectively, in case you need your keyframes to be named “@keyframes,” clearly!
#webdev
— Peter Kröner (@sirpepe.bsky.social) Feb 18, 2026 at 10:33
I don’t know why you’d wish to try this, but it surely’s definitely an fascinating factor to study @keyframes after 11 years of cross-browser help!
: vs. = in fashion queries
One other hidden trick, this one from Temani Afif, has revealed that we will substitute the colon in a mode question with an equals image. Temani does an awesome job at explaining the distinction, however right here’s a fast code snippet to sum it up:
.Jay-Z {
--Issues: calc(98 + 1);
/* Evaluates as calc(98 + 1), shade is blueivy */
shade: if(fashion(--Issues: 99): pink; else: blueivy);
/* Evaluates as 99, shade is pink */
shade: if(fashion(--Issues = 99): pink; else: blueivy);
}In brief, = evaluates --Issues in a different way to :, despite the fact that Jay-Z undoubtably has 99 of them (he stated so himself).
Declarative .visually-hidden)
David Bushell demonstrated the best way to create s declaratively utilizing invoker instructions, a helpful characteristic that permits us to skip some J’Script in favor of HTML, and works in all net browsers as of lately.
Additionally, because of an inquisitive query from Ana Tudor, the article spawned a spin-off concerning the minimal variety of types wanted for a visually-hidden utility class. Is it nonetheless seven?
Possibly not…
Find out how to truncate textual content from the center
Wes Bos shared a intelligent trick for truncating textual content from the center utilizing solely CSS:
Somebody on reddit posted a demo the place CSS truncates textual content from the center.
They did not publish the code, so right here is my shot at it with Flexbox
— Wes Bos (@wesbos.com) Feb 9, 2026 at 17:31
Donnie D’Amato tried a more-native resolution utilizing ::spotlight(), however ::spotlight() has some limitations, sadly. As Henry Wilkinson talked about, Hazel Bachrach’s 2019 name for a local resolution continues to be an open ticket, so fingers crossed!
Find out how to handle shade variables with relative shade syntax
Theo Soti demonstrated the best way to handle shade variables with relative shade syntax. Whereas not a brand new characteristic or idea, it’s frankly the most effective and most complete walkthrough I’ve ever learn that addresses these complexities.
Find out how to customise lists (the fashionable means)
In the same article for Piccalilli, Richard Rutter comprehensively confirmed us the best way to customise lists, though this one has some nuggets of what I can solely assume is trendy CSS. What’s symbols()? What’s @counter-style and extends? Richard walks you thru all the things.
Can’t get sufficient on counters? Juan Diego put collectively a complete information proper right here on CSS-Methods.
Find out how to create typescales utilizing :heading
Safari Know-how Preview 237 lately started trialing :heading/:heading(), as Stuart Robson explains. The follow-up is even higher although, because it reveals us how pow() can be utilized to write down cleaner typescale logic, though I finally settled on the old-school –
:heading and no sibling-index():
:root {
--font-size-base: 16px;
--font-size-scale: 1.5;
}
:heading {
/* Different heading types */
}
/* Assuming solely base/h3/h2/h1 */
physique {
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 launched border-shape
Talking of recent options, border-shape got here as a shock to me contemplating that we have already got — or will have — corner-shape. Nonetheless, border-shape is completely different, as Una explains. It addresses the problems with borders (as a result of it is the border), permits for extra shapes and even the form() operate, and general it really works in a different way behind the scenes.
trendy.css desires you to cease writing CSS prefer it’s 2015
It’s time to start out utilizing all of that trendy CSS, and that’s precisely what trendy.css desires that can assist you do. All of these superior options that weren’t supported if you first examine them, that you simply forgot about? Or those that you simply missed or skipped utterly? Effectively, trendy.css has 75 code snippets and counting, and all you need to do is copy ‘em.
Kevin Powell additionally has some CSS snippets for you
And the commenters? They’ve some too!
Truthfully, Kevin is the one net dev talker that I really observe on YouTube, and he’s so near 1,000,000 followers proper now, so make sure that to hit ‘ol Ok-Po’s “Subscribe” button.
In case you missed it
Truly, you didn’t miss that a lot! Firefox 148 launched the form() operate, which was being held captive by a flag, however is now a baseline characteristic. Safari Know-how Preview 237 grew to become the primary to trial :heading. These are all we’ve seen from our beloved browsers within the final couple of weeks (not counting the standard flurry of smaller updates, in fact).
That being stated, Chrome, Safari, and Firefox introduced their targets for Interop 2026, revealing which Net Platform Options they intend to make constant throughout all net browsers this 12 months, which greater than makes up for the dearth of shiny options this week.
Additionally arising (however testable in Chrome Canary now, identical to border-shape) is the scrolled key phrase for scroll-state container queries. Bramus talks about scrolled scroll-state queries right here.
Bear in mind, if you happen to don’t wish to miss something, you may catch these Fast Hits because the information breaks within the sidebar of css-tricks.com.
See you in a fortnight!
