2026 is almost upon us. I know we’re all itching to see the clock strike midnight (cue The Final Countdown by Europe), but not without recapping the best CSS-related things that happened over the last two weeks!
Conditional view transitions
Chris Coyier showed us how to trigger different view transitions based on the URL (or any conditional JavaScript logic, really). However, Bramus mentioned in the comments that navigation matching is coming to CSS, so we might not need to rely on JavaScript for that part for very long. I’m keeping my fingers crossed for 2026!
Annotating design system components for accessibility
Geri Reid carefully explained how to annotate design system components for accessibility, giving solid HTML-based examples. I especially love the part about defining elements, ARIA, markup, keyboard navigation, zoom, and user preferences as accessibility tokens.
Firefox to become a “modern AI browser” to the delight of absolutely no one
Firefox has been a bit of a rollercoaster lately. It started with an interview on The Verge, where new CEO Anthony Enzor-DeMeo said that Firefox “will evolve into a modern AI browser.” With only 2.3% of the browser market share, I suppose it was inevitable that Firefox would try to shake things up, but users don’t appear to want this at all. To stem the bleeding though, they’ve announced an AI kill switch.
And that’s how I met your Mo- …Waterfox, which is a no-AI fork of Firefox.
Creating ‘toon text with CSS and SVG
Andy Clarke demonstrated how to create the text effects of classic ‘toons using CSS and SVG. I hadn’t heard of the paint-order CSS property before this, so that part is pretty darn cool.
6 CSS features that you should learn in…2025
That’s right, 2025! Adam Argyle wrote about the CSS features that you should learn in 2025 at the beginning of the year. Well, it’s almost 2026 now, so how did you do? I’ll be honest — I barely even touched the surface of @property.
Great CSS posts on Bluesky
Let’s be honest, social media isn’t a fun place to hang out anymore, but I’ll make the exception for Bluesky. I rarely see stuff that’s not relevant to my interests, I actually talk to people on there, there’s a large dev community on there, and of course CSS-Tricks is on Bluesky too, as is the CSS-Tricks team and many of our authors.
So since browser updates typically ship at the beginning of the month, here are some cool posts by the Bluesky CSS community instead:
Temani Afif demonstrated a very interesting combination of anchor positioning, attr(), container queries, and shape(), which you can play around with (probably requires Chrome):
Stephen Margheim listed the various reasons why you should namespace your semantic classes (e.g., rename .btn to .ui-button):
Similar to Andy Clarke’s ‘toon text explorations, Ana Tudor’s displacement map text effects are rather astonishing as well, although you’ll most likely need Chrome for cutting-edge stuff like this:
There are more displacement map text effects in Ana’s feed.
George Black said:
Writing CSS for my site that uses modern features only available in Chrome or Safari, but not both. Eventual consistency — eventually it’ll look right in one browser… right?
Actually, yes! Most likely. For those that don’t know, the Interop Project is a collaboration between Chrome, Firefox, and Safari where they make certain features work consistently across their browsers. You can even vote on the features! Keen to learn more? Read what Chrome and WebKit have said about Interop 2026.
Finally, a massive shout-out to our very own Sunkanmi Fafowora for saying what we’re all thinking:
Thank you to all who work very hard to expand and push the boundaries of what we can do with CSS. You’ve made my work and the work of millions of others so much easier. You’re not unnoticed, and I do hope you’re having an amazing day.
On that note, the CSS-Tricks team wishes you a very happy new year. May your websites be free of bugs and work in all (stable) browsers!
See you in 2026!
What’s !important #2: Conditional View Transitions, CSS/SVG Text Effects, the Best of CSS Bluesky, and More originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
from CSS-Tricks https://ift.tt/VDZj8uh
via IFTTT
No comments:
Post a Comment