In What’s !important #16, see how the soon-Baseline sibling-index() function can be used for animations, revisit the 2026 FIFA World Cup with CSS, explore the use cases for the infinity keyword, learn about container ‘stuck’ queries, and much more.

Following on from Chris Coyier’s In-N-Out Animations series, Temani Afif showed us how to use sibling-index() for animations, which Firefox 154 will ship on the 18th of August, 2026, making it Baseline: Newly Available. The demos are exceptionally cool, so I’ll share a couple of them below:

How to code a knockout bracket

The 2026 FIFA World Cup has concluded, which even with all of its controversies was an absolute banger. For those feeling the post-World Cup blues, Ahmad Shadeed showed us how to build the knockout bracket using CSS. This is such a fun read — definitely don’t miss this.

Use cases for the infinity keyword

There’s a calc() keyword called infinity, which can be negative (-infinity). If you’re wondering why you’d ever need such numbers, Adam Argyle explained the different use cases for infinity in this really interesting read.

There’s one that I’d like to add, though:

corner-shape: square;
/* is equivalent to */
corner-shape: superellipse(infinity);

corner-shape: notch;
/* is equivalent to */
corner-shape: superellipse(-infinity);

Basically, infinity makes rounded corners like, not rounded at all (i.e., technically rounded but squared/notched to the naked eye).

Should lazy loading be the default?

Lea Verou said this about lazy loading:

This is exactly why we need something like @tabatkins.com's old CAS proposal. Imagine if you could do img, video { loading: lazy; } to change the defaults, and then just use loading="eager" on the actual elements to override.

[image or embed]

— Lea Verou, PhD (@lea.verou.me) 15:12 · Jul 16, 2026

What do you think? Make sure to read the comments!

3 ways to animate hand-drawn text

Johannes Bechberger showcased three ways to animate hand-drawn text. SVG scares the heck out of me to be honest, but Johannes cuts right to chase in the code comments.

An introduction to container ‘stuck’ queries

Chris Coyier demonstrated how to query whether an element is stuck using container scroll state queries (more specifically, using @container scroll-state(stuck: <keyword>)). This is one of those new container queries; although, neither Safari nor Firefox supports it yet.

New web platform updates and features

• Firefox 153
  • A number of interoperability improvements
  • Picture-in-Picture API (now Baseline)
• Chrome 151
  • <usermedia> (no Safari or Firefox support)
  • A whole bunch of interoperability improvements too

Want to see something weird? Chrome’s roadmap appears to be scheduled up for the next 14 years, stopping right after Chrome 499 specifically.

We’ll be on What’s !important #354 by then!

Anyway, until next time (What’s !important #17).