Table of Contents

What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More

CSS never stops moving forward — and neither does the What’s !important newsletter series. Issue #12 is packed with practical tips, exciting new CSS features, and must-read deep dives for front-end developers at every level.

Whether you’re struggling to test Safari without an Apple device or curious about the brand-new ::checkmark pseudo-element, there’s something here for you. Let’s break it all down.

Testing Safari When You Don’t Have Safari

Safari holds the title of the second most popular web browser in the world. The catch? It’s exclusive to Apple devices. That creates a real headache for developers who work on Windows or Linux and need to ensure their sites render correctly in Safari.

Declan Chidlow tackled this problem head-on in a piece published on Frontend Masters, walking through the best available options for testing in Safari without actually owning a Mac or iPhone. From BrowserStack and Sauce Labs to virtual machines and Apple’s Responsive Design Mode, there are more options than you might think — even on a budget.

If cross-browser compatibility is part of your workflow (and it should be), this is essential reading.

A First Look at the ::checkmark Pseudo-Element

Styling checkboxes and radio buttons has been a long-standing frustration in CSS. Developers have historically resorted to hiding native inputs and building entirely custom replacements just to control the appearance of that little checkmark.

That era may finally be coming to an end.

Sunkanmi Fafowora published an in-depth first look at the new ::checkmark pseudo-element, which gives developers direct, native control over the checked state indicator. Importantly, this isn’t just for checkboxes. It also targets the checked state of radio buttons and select elements, making it a broadly useful addition to the CSS toolkit.

Progressive enhancement is key here. Browser support is still catching up, but the direction is clear: customizing form control indicators is about to get dramatically simpler.

Different Shape Styles With border-shape and shape()

CSS shapes have always been powerful but sometimes clunky to work with. Temani Afif highlighted an exciting combination: using border-shape alongside the shape() function to create a wider variety of shape styles than what’s possible with clip-path alone.

The real win here is flexibility. You can easily switch between an outlined shape, a solid filled shape, and a cutout-style shape — all using the same underlying path definition. This makes it far easier to maintain consistency across design variations without duplicating code.

If you work with decorative shapes or custom UI elements, this technique is well worth adding to your arsenal.

A Concise Guide to sibling-index() and sibling-count()

Two CSS functions that are inching toward Baseline status — sibling-index() and sibling-count() — are opening up entirely new possibilities for mathematical and dynamic layouts.

Durgesh Pawar published a thorough deep dive on Smashing Magazine, demonstrating what these functions can do in practice. The examples range from staggered animations to proportional sizing — all driven purely by an element’s position among its siblings, with no JavaScript required.

Pawar also has a two-part series on View Transition gotchas worth bookmarking if you’re working with cross-document transitions.

Managing Anchor Associations With Data Attributes and Advanced attr()

CSS anchor positioning is one of the most anticipated layout features in recent memory. It allows elements to be positioned relative to other elements anywhere in the DOM — not just their parent.

However, there was a disappointing development: the anchor HTML attribute, which would have allowed anchor associations to be defined directly in markup, has been dropped from the specification.

In response, a workaround was demonstrated using data attributes combined with the advanced attr() function. The technique explores multiple HTML syntaxes as alternative approaches to managing these associations without the native attribute. Here’s a quick look at the approaches explored:

<!-- anchor attribute (dropped) -->
<div anchor="anchorA">Boat A</div>
<div id="anchorA">Anchor A</div>

<!-- Data attributes with custom ident -->
<div data-boat="--anchorA">Boat A</div>
<div data-anchor="--anchorA">Anchor A</div>

<!-- Data attributes with ident() -->
<div data-boat="anchorA">Boat A</div>
<div data-anchor="anchorA">Anchor A</div>

It’s a clever solution that keeps anchor positioning usable while the specification continues to evolve.

Take the State of CSS 2026 Survey

The annual State of CSS survey is back — and this year the organizers are taking a more focused approach. Rather than cataloguing every new CSS feature that shipped in the past twelve months, the 2026 survey narrows its scope to the features that matter most to working developers.

The opening message of the survey says it well:

“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.”

That’s a refreshingly honest acknowledgment of how fast CSS is moving. The survey results help browser vendors and specification authors understand which features developers are actually using and which ones need better documentation or tooling support.

If you work with CSS professionally — or even as a hobby — your input genuinely matters. The survey is free and takes about ten to fifteen minutes to complete.

New Web Platform Features: Firefox 151

Firefox 151 shipped with a couple of noteworthy additions:

Container Style Queries — This feature has now reached Baseline status, meaning it’s supported across all major browsers. If you haven’t explored container style queries yet, now is the time.
Document Picture-in-Picture API — This allows entire documents (not just video elements) to be popped out into a floating window. Currently available on desktop only, with no Safari support yet.

A smaller release in terms of quantity, but container style queries reaching Baseline is a significant milestone for CSS architecture.

Why This All Matters for Modern CSS Development

CSS in 2026 is evolving faster than at any point in its history. Features like ::checkmark, sibling-index(), anchor positioning, and advanced attr() are changing what’s possible with pure CSS — reducing the need for JavaScript hacks and custom component libraries for problems that should have been solvable in stylesheets all along.

Keeping up with all of it is genuinely challenging. The State of CSS survey acknowledges this directly. The best strategy is to stay informed through trusted sources, experiment in low-stakes environments, and adopt new features progressively as browser support improves.

For the full original article and all linked resources, visit the What’s !important #12 post on CSS-Tricks.

Stay on top of the tools and techniques that make your development workflow faster and smarter. Explore more guides, tips, and resources at myproductivetools.com — your go-to destination for productive, modern web development.