What’s !important #12 talks about the old (testing in Safari when you don’t have Safari), the new (::checkmark), the in-between (anchor positioning but with HTML), and more.
Buckle up!
Testing in Safari when you don’t have Safari
Safari is the second most popular web browser, but is only available to Apple users. Fair enough. I mean, Apple are heavily invested in making Safari a proprietary browser that’s deeply integrated with Apple’s software and hardware. However, this makes testing websites in Safari a bit of a pain. Declan Chidlow explained what our options are in regards to testing in Safari when you don’t have Safari.
A first look at ::checkmark
Sunkanmi Fafowora gave us our first look at the ::checkmark pseudo-element, which solves the age-old problem of not (really) being able to style checkmarks. Note that this also targets the checked state indicator of radios and selects, not just checkboxes!
Different shape styles with border-shape + shape()
Temani Afif pointed out that we can create more shape styles when combining border-shape with the shape() function (compared to clip-path), and, easily switch between them.
A concise guide to sibling-index() and sibling-count()
Durgesh Pawar did a deep dive on sibling-index() and sibling-count(), showing us all of the cool things that we can do with these almost-Baseline CSS functions.
Also, don’t miss Durgesh’s two-part series about View Transition gotchas right here on CSS-Tricks.
Managing anchor associations with data attributes and advanced attr()
This one’s actually from me! Disappointed to hear that the anchor attribute has been dropped, which would’ve provided a way of managing anchor associations using HTML, I demonstrated my alternative technique that involves managing anchor associations with data attributes and advanced attr().
I won’t spoiler the CSS, but here are the different HTML syntaxes that I explored:
<!-- anchor attribute -->
<div anchor="anchorA">Boat A</div>
<div id="anchorA">Anchor A</div>
<!-- Data attributes with custom ident (requires attr()) -->
<div data-boat="--anchorA">Boat A</div>
<div data-anchor="--anchorA">Anchor A</div>
<!-- Data attributes (requires attr() and ident()) -->
<div data-boat="anchorA">Boat A</div>
<div data-anchor="anchorA">Anchor A</div>Take the State of CSS 2026 survey
It’s that time of the year again!
I love these “state of” surveys (especially the State of CSS 2026 survey, but I’m sure you know that already). This year feels different though, and I’m not the only one that’s noticed.
From the opening crawl:
Take a deep breath. Calm down. It’s ok if you don’t know every single new CSS property. The truth is, very few of us do.
Look, one of this survey’s goals has always been to help keep developers up to date on the latest and greatest CSS improvements. But the downside is that all this progress can sometimes feel overwhelming.
That’s why this year we made a conscious effort to reduce the number of features covered in the survey, focusing instead on the ones that matter most.
I totally get it. It’s becoming more and more difficult to keep up with CSS. My “things to check out” list just keeps getting longer! That being said, there’s never been a more exciting time to be a fan of CSS. That feeling when you learn a new feature and then two more get shipped, is overwhelming but in the best way possible.
But still, time doesn’t grow on trees, so we have to figure out which features to invest in, and that’s what these “state of” surveys are all about. And they’re going hard this year, really zeroing in on the most important ones.
But, if you have an appetite for all things CSS, I hear there’s a great blog for that!
New web platform features
- Firefox 151
- Container style queries (now Baseline)
- Document Picture-in-Picture API (desktop only, no Safari support)
Quality over quantity, I guess!
Until next time.
What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.
from CSS-Tricks https://ift.tt/yXWTgGJ
Gain $200 in a week
via Read more
