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!
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.
::checkmarkSunkanmi 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!
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.
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.
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>
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!
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.
Some text effects are relatively hard to pull in CSS, the main reason being we are unable to target individual characters (something many of us want in the form of ::nth-letter(), although we have basis for it with ::first-letter that gives us access to a box element’s first glyph.
But maybe there are a few things we can use today with what we already have.
For example, the CSS letter-spacing property adjusts the space between all characters in a block of text. Positive values add space to the right side of each glyph (in a left-to-right writing mode), and negative values shrink the width of the glyph box, causing letters to overlap and even move the other way.
The letter-spacing accepts length units, and percentage (relative to font size). It is animateable, and as we saw before, the negative values can shrink it down or reverse it. Which is something we can make use of.
It’s quite easy to completely overlap the characters as a starting point and setting it’s color to transparent to visually hide it.
label {
letter-spacing: -1ch;
color: transparent;
/* etc. */
}From there, we can reveal the text by animating that letter-spacing value to a positive value and updating the color to a visible value, like when a checkbox is :checked:
li:nth-of-type(2) label {
text-align: center;
}
li:nth-of-type(3) label {
text-align: right;
}
input:checked + label {
letter-spacing: 0ch;
color: black;
transition: letter-spacing 0.6s, color 0.4s;
}Note: The CSS ch unit is a relative length representing the width of the zero (0) glyph.
The labels go from negative letter-spacing to normal spacing and the color updates to black. Both these changes happen over a transition.
The second and third labels are given center and right text alignments and thus when negative letter spacing is applied they bundle up at the given alignment position, center and right, respectively. When letter``-``spacing goes from negative to zero (or any positive value) the letters separate from that same alignment position.
Thus, we get a text reveal effect! Let’s look at some more.
Check this out. We can toggle a checkbox label as a fun interactive UI touch:
<!-- Simplified for brevity; additional accessibility considerations -->
<input type="checkbox" id="cb">
<label for="cb">
<span>Join the global club</span>
<span>You've begun your journey!</span>
</label>label {
overflow: clip;
/* etc. */
}
span {
/* The first label */
&:nth-of-type(1) {
/* Default spacing: letters are fully visible */
letter-spacing: 0ch;
/* When the checkbox is checked, target this text */
:checked + * & {
/* collapse letters on top of each other, hiding them */
letter-spacing: -2ch;
text-indent: -1.5ch;
/* Use a "bouncy" cubic-bezier for spacing */
transition: 0.4s letter-spacing cubic-bezier(.8, -.5, .2, 1.4),
0.1s text-indent;
}
}
/* The second label */
&:nth-of-type(2) {
/* Initially collapsed (letters overlap) */
letter-spacing: -1ch;
color: transparent;
/* When the checkbox is checked, target this text */
:checked + * & {
/* Returns to normal spacing */
letter-spacing: 0ch;
color: black;
/* Slightly delay the appearance so it starts after the first text begins to hide */
transition:
0.4s letter-spacing cubic-bezier(.8, -.5, .2, 1.4) 0.3s,
0.8s color 0.4s;
}
}
}When the box is checked, a negative letter-spacing value (-2ch) and text-indent value (-1.5ch) is used on the first <span> to slide it out of the container box. We use overflow: clip to completely hide the text.
Concurrently, the text in the second <span> text goes from a letter-spacing value of -1ch to 0ch, which reveals it. To hide this overlapped text at -1ch, a transparent color was given that’s turned to black when the checkbox is checked.
Here’s another fun one. We can start with an acronym that reveal the full text on hover. Again, we have existing features to help us pull this off, including ::first-letter and ::first-line.
We’ll start with this markup:
<!-- Simplified for brevity -->
<p id="acronym">
<span class="words">United</span>
<span class="words">Nations</span>
<span class="words">International</span>
<span class="words">Children's</span>
<span class="words">Emergency</span>
<span class="words">Fund</span>
</p>.words {
letter-spacing: -1ch;
color: transparent;
/* etc. */
&::first-letter {
color: black;
}
figure:hover + #acronym & {
letter-spacing: 0ch;
color: black;
transition: letter-spacing 0.4s cubic-bezier(.8, -.5, .2, 1.4) /* etc. */;
}
}Each word in the UNICEF acronym initially has letter-spacing: -1ch to shrink the text, and color: transparent to keep the shrunk text hidden, except the ::first-letter that has color: black so it remains visible even though the rest of the text is stacked beneath it.
Now, we can target the image on :hover and select the entire text so that the letter-spacing value for each word decreases to 0ch and color: black is applied, showing what’s remaining of the words:
I don’t know! But that’s where you come in. Obviously, a hypothetical ::nth-letter selector would be amazing for all kinds of text effects. But it’s neat that we can create some semblance of it today with existing features, like letter-spacing, ::first-letter, and ::first-line.
What can you cook up knowing we have these constraints?
Revealing Text With CSS letter-spacing originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.
With a high of F and a low of 46F. Currently, it's 58F and Clear outside. Current wind speeds: 11 from the North Pollen: 3 Sunri...
