What’s !essential #12 talks in regards to the outdated (testing in Safari once you don’t have Safari), the brand new (::checkmark), the in-between (anchor positioning however with HTML), and extra.
Buckle up!
Testing in Safari once you don’t have Safari
Safari is the second hottest internet browser, however is barely obtainable to Apple customers. Truthful sufficient. I imply, Apple are closely invested in making Safari a proprietary browser that’s deeply built-in with Apple’s software program and {hardware}. Nevertheless, this makes testing web sites in Safari a little bit of a ache. Declan Chidlow defined what our choices are with reference to testing in Safari once you don’t have Safari.
A primary have a look at ::checkmark
Sunkanmi Fafowora gave us our first have a look at the ::checkmark pseudo-element, which solves the age-old downside of not (actually) with the ability to fashion checkmarks. Notice that this additionally targets the checked state indicator of radios and selects, not simply checkboxes!
Completely different form types with border-shape + form()
Temani Afif identified that we will create extra form types when combining border-shape with the form() operate (in comparison with clip-path), and, simply swap between them.
A concise information to sibling-index() and sibling-count()
Durgesh Pawar did a deep dive on sibling-index() and sibling-count(), exhibiting us all the cool issues that we will do with these almost-Baseline CSS features.
Additionally, don’t miss Durgesh’s two-part collection about View Transition gotchas proper right here on CSS-Methods.
Managing anchor associations with information attributes and superior attr()
This one’s really from me! Disillusioned to listen to that the anchor attribute has been dropped, which might’ve supplied a approach of managing anchor associations utilizing HTML, I demonstrated my different method that entails managing anchor associations with information attributes and superior attr().
I gained’t spoiler the CSS, however listed here are the completely different HTML syntaxes that I explored:
Boat A
Anchor A
Boat A
Anchor A
Boat A
Anchor A
Take the State of CSS 2026 survey
It’s that point of the yr once more!
I really like these “state of” surveys (particularly the State of CSS 2026 survey, however I’m positive you recognize that already). This yr feels completely different although, and I’m not the one one which’s observed.
From the opening crawl:
Take a deep breath. Settle down. It’s okay in case you don’t know each single new CSS property. The reality is, only a few of us do.
Look, one in all this survey’s objectives has at all times been to assist preserve builders updated on the newest and biggest CSS enhancements. However the draw back is that every one this progress can generally really feel overwhelming.
That’s why this yr we made a aware effort to scale back the variety of options coated within the survey, focusing as a substitute on those that matter most.
I completely get it. It’s turning into increasingly troublesome to maintain up with CSS. My “issues to take a look at” record simply retains getting longer! That being stated, there’s by no means been a extra thrilling time to be a fan of CSS. That feeling once you be taught a brand new function after which two extra get shipped, is overwhelming however in the easiest way attainable.
However nonetheless, time doesn’t develop on bushes, so now we have to determine which options to put money into, and that’s what these “state of” surveys are all about. And so they’re going arduous this yr, actually zeroing in on crucial ones.
However, in case you have an urge for food for all issues CSS, I hear there’s a nice weblog for that!
New internet platform options
High quality over amount, I suppose!
Till subsequent time.
