If 3D voxel scenes (that you can style), flying focus animations, or new CSS syntaxes sound like your kinda thing, then this issue of What’s !important is definitely for you.
Also featuring Polypane, scroll-driven animations, and the latest web platform updates from Chrome 148 and Safari 26.5.
Inspired by the sculptures of Erwin Heerich, David Aerne created Heerich.js, a tiny engine for creating 3D voxel scenes. They’re rendered as SVG, and because we can use CSS variables in SVG, the scenes are basically styleable using CSS.
Polypane, widely considered to be the best browser for web development, launched a snippet store. So, if you wanted to click on a component and copy the basic HTML without all of the “bloaty crap”, the 1-Click De-crapulator is what you’d want. Fantastic name, by the way.
Chris Coyier showed us how to animate focus with view transitions. He also contrasted “unnecessary motion” with WebAIM’s conditional prefers-reduced-motion implementation, which I think is the right approach, because I find it difficult to keep track of focus even when it’s really visible.
Either way, it’s a fantastic exploration of techniques. In addition, way down in the comments, Kilian Valkhof (founder of Polypane, actually) shared his CSS-only technique for floating focus (or, as Chris calls it, “flying focus”).
of <selector> syntaxPaweł Grzybek mentioned that the of <selector> syntax is actually well supported (Baseline) now, but honestly, I hadn’t even heard of it.
I knew that the CSS :nth-child(n of selector) is a thing, but I didn’t know how well supported it is nowadays. Another thing I didn’t know is that I can use CSS nesting with it like in the example below. Modern CSS is incredible ❣️ developer.mozilla.org/en-US/docs/W… #css
— Paweł Grzybek (@pawelgrzybek.com) 17:51 · May 5, 2026
[image or embed]
The following selector means, “from all siblings, select the second .intro, but only if it’s a <div>.” It’s kind of like div:nth-of-type(2), except that can only select elements of the same type, whereas of <selector> works with any selector.
div:nth-child(2 of .intro) {
/* ... */
}Given that & is equivalent to the parent selector (so, .intro), the second example means “from all siblings, select the second .intro within .intro. Also, because there isn’t anything before :nth-child(), .intro can be anything this time around.
.intro {
:nth-child(2 of &) {
/* ... */
}
}There’s so much happening with CSS right now, so I find it really useful when something I’ve missed comes back around like this. Though funnily enough, as I’m typing this, I’m seeing that Preethi Sam wrote an article on the of <selector> syntax a bit over a week ago (*adds to reading list*).
The range syntax is a new(ish), more readable syntax with comparison operators (>, <, >=, and <=) for media queries and container queries. Ahmad Shadeed expertly explained how the range syntax works, but keep a close eye on browser support. Web browsers are still shipping container queries and the range syntax for those queries has to be shipped independently. For example, container style queries are shipping in Firefox 151 next week, but the range syntax for container style queries will ship with a flag.
It’s an easy thing to miss (don’t ask me how I know).
Scroll-driven animations can be kinda tough (especially those with view() timelines), but Josh Comeau’s expert explanation of scroll-driven animations makes them so much easier to understand. With scroll-triggered animations on the way, I highly recommend mastering scroll-driven animations first (if you haven’t already). Again, don’t ask me how I know (*cries in CSS*).
revert-rule keyword (no stable Safari support)at-rule() function for feature queries (no Safari or Firefox support)loading attribute for <video>/<audio> (no Safari or Firefox support)Inspired by this lovely comment, we’d just like to thank our authors for all of the incredible work that they do, as well as the many other educators out there that we undoubtably learn from and become inspired by. Keep on keeping on, CSS-Tricksters!
I'm not a CSS expert, but expert CSS educators are my favorite. Their design skills, ability to take full advantage of the web platform, AND general enthusiasm for building for the web is unmatched by other types of developers!
— George Rodier (@georgerodier.com) 15:42 · Apr 30, 2026
Until next time!
What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.
CSS math isn’t just about how things look! It can also be used to work out useful numeric information. For instance, you could calculate and show the percentage of tasks completed in a to-do list with CSS, helping users keep track of their progress. No need for script or server computation. No latency. No use of additional browser resources.
Working with math has become much simpler and more flexible. I’m going to give you an example using CSS to calculate and display a discounted price whenever you need it, using the base price and discount provided. It’s the sort of thing you see often on e-commerce sites where heavy JavaScript is used to show a product’s full price, its discount amount, and its sale price.
We can absolutely do that in CSS:
It does rely on some bleeding-edge features that are waiting to gain more browser support, but I think it’s still a good exercise to dig into how we will eventually be able to put these things in practice and eventually use them in our everyday work.
Here’s how I put it together.
The interface in this specific demo displays a list of streaming services for the user to choose from — Netflix, Disney+, HBO, HBO Now, HBO Go, HBO Max, etc. There’s a student discount offer on each subscription that takes a certain percentage amount off the full price.
<li>
<!-- Service name, base price, and selection toggle -->
<label>
<span>Netflix</span>
<!-- data-price and data-discount store base price and discount offered -->
<div class="ott-price" data-price="7.99" data-discount="0.2">$7.99</div>
<!-- Checkbox to track if the user wants to add this service -->
<input type="checkbox" class="is-ott-selected">
</label>
<!-- Toggle for the student discount -->
<label>
<span>Apply Student Discount <br> 20%</span>
<input type="checkbox" class="is-ott-discounted">
</label>
</li>
<!-- etc. -->The base price and discount are included as data-* attributes in the element displaying the price. Just remember, the discount only kicks in when you select “Apply Student Discount,” and then you’ll see how much the price is after the discount is applied.
When the discount kicks in, the first step is to slash the base price with a line across it.
/* When the discount toggle is checked inside the .ott container */
.ott:has(.is-ott-discounted:checked) {
/* Strike through the original price */
.ott-price {
text-decoration: line-through;
}
}Next, let’s figure out the new discounted price using the data-price and data-discount values.
.ott:has(.is-ott-discounted:checked) {
.ott-price {
text-decoration: line-through;
/*
Calculate the new price from the data-* attributes:
Original Price * (1 - Discount Applied)
*/
--n: calc(attr(data-price number) * (1 - attr(data-discount number)));
}
}The attr(<name> <type>) syntax is relatively new. The function used to only work with the content property, but now supports any CSS property… and parses values into a range of data types, whereas before they were always parsed as strings.
Those arguments:
<name>: This is the name of the HTML attribute we want to look at (like href, data-count, or title).<type>: This tells CSS how to “read” the value (like a color, a number, or a length). It’s the newer superpower that makes the work we’re doing here possible.In our case, we’re using the function to parse both data-price and data-discount into numbers, and then we subtract the discount from the price with CSS math-iness.
The upgraded attr() is super cool, but not Baseline as I’m writing this, so keep an eye on it.
Here’s how we display the updated price once the discount is applied:
.ott:has(.is-ott-discounted:checked) {
.ott-price {
text-decoration: line-through;
--n: calc(attr(data-price number) * (1 - attr(data-discount number)));
&::after {
display: inline-block;
/* Splits the variable --n into two counters:
'a' for the whole number (in dollars) and 'b' for the decimals (in cents) */
counter-set: a calc(round(down, var(--n))) b calc((mod(var(--n), 1)) * 100);
/* Output: two spaces (\2000), a dollar sign ($), the number, a dot, and the decimals */
content: "\2000\2000$" counter(a) "." counter(b, decimal-leading-zero);
}
}
}The counter() function helps us turn the numeric value of the --n varable into a content string. Since CSS counters can’t handle decimals (they round the value by default), we treat the numbers before and after the decimal as separate counters and then combine them as strings, adding a dot between them.
calc(round(down, var(--n))) takes the variable --n and rounds it down to get the whole dollar amount (stored as counter(a)).calc((mod(var(--n), 1)) * 100) uses the modulo mod() function to isolate the fraction, then multiplies it by 100 to get the cents (stored as counter(b)).content property inserts a dollar sign before the two counters and then joins them with a dot.We know that calc() has plenty of browser support. And guess what? The mod() function is newly Baseline!
That’s only if you need decimals and all that. If you’re rounding prices, this would be plenty enough:
counter-set: price calc(var(--n));
content: counter(price);Here’s the demo once again:
So, there we have it, a working combination of newer CSS features (the upgraded attr() function), CSS math functions (mod(), round()), and custom counters to nail down something that we see in so many websites, only without scripts. When attr()‘s support for data types becomes a thing in all browsers, this is something you can use in your everyday work.
Computing and Displaying Discounted Prices in CSS originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.
The CSS rotate() function spins an element either clockwise or counterclockwise in a 2D plane. It is one of many transform functions used in the transform property.
For example, using rotate() we can rotate the hand around the clock:
.seconds-hand {
transform: rotate(var(--deg));
transform-origin: bottom center;
}For rotating elements tri-dimensionally, consider using rotateX() and rotateY().
The rotate() functions is defined in the CSS Transforms Module Level 1 specification.
rotate() = rotate( [ <angle> | <zero> ] )/* <angle> */
rotateZ(90deg) /* Rotates 90 degrees clockwise */
rotateZ(-180deg) /* Rotates 180 degrees counterclockwise */
/* <angle> in turns */
rotateZ(0.25turn) /* Rotates a quater turn clockwise. */
rotateZ(1turn) /* Rotates a full 360-degree turn. */
/* <angle> in radians */
rotateZ(1.57rad) /* Rotates ~90 degrees clockwise. */
rotateZ(-3.14rad) /* Rotate ~180 degrees counterclockwise. */The rotate() function accepts a single <angle> argument, which dictates the direction of its spin. A positive argument spins the element clockwise, while a negative argument spins the element counterclockwise.
The <angle> type has four units to choose from:
deg: One degree is 1/360 of a full circle.grad: One gradian is 1/400 of a full circle.rad: A radian is the length of a circle’s diameter around the shape’s arc. One radian is 180deg, or 1/2 of a full circle. One full circle is 2π radians, which is equal to 6.2832rad or 360deg.turn: One turn is one full circle. So, halfway around a circle is equal to .5turn, or 180deg.Also, rotate() spins the element around its center axis. To change the rotation point, we have to pass a specific point to the transform-origin property that’ll serve as the axis of rotation.
The rotate() function is the backbone of some of the basic animations you’ve most likely come across on, like switching from “+” to “x” when an accordion is opened. We can do that by rotating the “+” symbol by 45deg.
So, if we have a button like this:
<button class="toggle">
<span class="icon">+</span>
<span class="label">Open Section</span>
</button>We can sprinkle a little JavaScript in there to trigger an .active class when the button is clicked, which rotates the icon:
.toggle.active .icon {
transform: rotate(45deg);
}Have you seen those menus that switch from a hamburger icon to a closing “X” icon when a menu dropdown or sidebar is opened? That’s a rotation, too!
We start with three spans that are styled as horizontal lines:
<button class="hamburger" id="hamburgerBtn">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</button>.bar {
width: 100%;
height: 4px;
background: #333;
transition: transform 0.3s ease, opacity 0.3s ease;
}Notice we have a transition in there so that, when the button is clicked and the rotation happens (again, using JavaScript to toggle on an .active class), the spans transform smoothly:
.hamburger.active .top {
transform: translateY(14px) rotate(45deg);
}
.hamburger.active .middle {
opacity: 0;
}
.hamburger.active .bottom {
transform: translateY(-14px) rotate(-45deg);
}We can also use rotate() for loading indicators. Loading indicators usually spin while a page is, you know, loading. A common example is a semi-circle that spins until the page is done loading.
The .spinner uses the CSS animation shorthand to define an infinite spinning loading indicator, and the @keyframes spin defines a 360deg spin with the rotate() function.
.spinner {
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}Now the spinner keeps on a’spinning:
Rotating things isn’t always about animation! We can, for example, position something like a “Feature” label next to a blog post and rotate it vertically for an interesting visual effect.
.vertical-header {
writing-mode: vertical-rl;
transform: rotate(180deg);
}Let’s look at a more complex animation to demonstrate just how neat it is to rotate() things with CSS. If you “Rerun” the demo, you’ll see the photo swing back and forth. You can also drag the photo from left to right to rotate it.
The CSS rotate() function is defined in the CSS Transforms Module Level 1 specification, which is currently in Editor’s Draft.
rotate() 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 49F. Currently, it's 67F and Clear outside. Current wind speeds: 5 from the Northeast Pollen: 4 Su...
