Regardless of what’s been a sleepy couple of weeks for brand spanking new Internet Platform Options, we have now a difficulty of What’s !necessary that’s prrrretty jam-packed. The online group had quite a bit to say, it appears, so fasten your seatbelts!
@keyframes animations may be strings
Peter Kröner shared an attention-grabbing 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 may be strings. Why? Properly, 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, nevertheless it’s definitely an attention-grabbing factor to find out about @keyframes after 11 years of cross-browser help!
: vs. = in model queries
One other hidden trick, this one from Temani Afif, has revealed that we will substitute the colon in a method 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), coloration is blueivy */
coloration: if(model(--Issues: 99): crimson; else: blueivy);
/* Evaluates as 99, coloration is crimson */
coloration: if(model(--Issues = 99): crimson; else: blueivy);
}In brief, = evaluates --Issues in another way to :, despite the fact that Jay-Z undoubtably has 99 of them (he stated so himself).
Declarative .visually-hidden)
David Bushell demonstrated how one can create s declaratively utilizing invoker instructions, a helpful function that permits us to skip some J’Script in favor of HTML, and works in all net browsers as of not too long ago.
Additionally, due to an inquisitive query from Ana Tudor, the article spawned a spin-off concerning the minimal variety of kinds wanted for a visually-hidden utility class. Is it nonetheless seven?
Possibly not…
Learn 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 answer utilizing ::spotlight(), however ::spotlight() has some limitations, sadly. As Henry Wilkinson talked about, Hazel Bachrach’s 2019 name for a local answer continues to be an open ticket, so fingers crossed!
Learn how to handle coloration variables with relative coloration syntax
Theo Soti demonstrated how one can handle coloration variables with relative coloration syntax. Whereas not a brand new function or idea, it’s frankly one of the best and most complete walkthrough I’ve ever learn that addresses these complexities.
Learn how to customise lists (the fashionable method)
In an identical article for Piccalilli, Richard Rutter comprehensively confirmed us how one can customise lists, though this one has some nuggets of what I can solely assume is fashionable 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-Tips.
Learn how to create typescales utilizing :heading
Safari Know-how Preview 237 not too long ago started trialing :heading/:heading(), as Stuart Robson explains. The follow-up is even higher although, because it exhibits 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 kinds */
}
/* 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() perform, and general it really works in another way behind the scenes.
fashionable.css desires you to cease writing CSS prefer it’s 2015
It’s time to start out utilizing all of that fashionable CSS, and that’s precisely what fashionable.css desires that will help 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 fully? Properly, fashionable.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 truly comply with on YouTube, and he’s so near 1,000,000 followers proper now, so make certain to hit ‘ol Okay-Po’s “Subscribe” button.
In case you missed it
Truly, you didn’t miss that a lot! Firefox 148 launched the form() perform, which was being held captive by a flag, however is now a baseline function. Safari Know-how Preview 237 turned the primary to trial :heading. These are all we’ve seen from our beloved browsers within the final couple of weeks (not counting the same old flurry of smaller updates, in fact).
That being stated, Chrome, Safari, and Firefox introduced their targets for Interop 2026, revealing which Internet Platform Options they intend to make constant throughout all net browsers this 12 months, which greater than makes up for the shortage of shiny options this week.
Additionally developing (however testable in Chrome Canary now, similar to border-shape) is the scrolled key phrase for scroll-state container queries. Bramus talks about scrolled scroll-state queries right here.
Keep in mind, for those who don’t wish to miss something, you possibly can catch these Fast Hits because the information breaks within the sidebar of css-tricks.com.
See you in a fortnight!
