In What’s !vital #16, see how the soon-Baseline sibling-index() operate can be utilized for animations, revisit the 2026 FIFA World Cup with CSS, discover the use instances for the infinity key phrase, study container ‘caught’ queries, and far more.
Utilizing sibling-index() for animations
Following on from Chris Coyier’s In-N-Out Animations sequence, Temani Afif confirmed us the best way to use sibling-index() for animations, which Firefox 154 will ship on the 18th of August, 2026, making it Baseline: Newly Accessible. The demos are exceptionally cool, so I’ll share a few them under:
How you can code a knockout bracket
The 2026 FIFA World Cup has concluded, which even with all of its controversies was an absolute banger. For these feeling the post-World Cup blues, Ahmad Shadeed confirmed us the best way to construct the knockout bracket utilizing CSS. That is such a enjoyable learn — undoubtedly don’t miss this.
Use instances for the infinity key phrase
There’s a calc() key phrase referred to as infinity, which could be unfavourable (-infinity). When you’re questioning why you’d ever want such numbers, Adam Argyle defined the totally different use instances for infinity on this actually attention-grabbing learn.
There’s one which I’d like so as to add, although:
corner-shape: sq.;
/* is equal to */
corner-shape: superellipse(infinity);
corner-shape: notch;
/* is equal to */
corner-shape: superellipse(-infinity);Mainly, infinity makes rounded corners like, not rounded in any respect (i.e., technically rounded however squared/notched to the bare eye).
Ought to lazy loading be the default?
Lea Verou stated this about lazy loading:
That is precisely why we’d like one thing like @tabatkins.com‘s previous CAS proposal.
Think about for those who may do
img, video {
loading: lazy;
}to vary the defaults, after which simply use loading=”keen” on the precise components to override.
— Lea Verou, PhD (@lea.verou.me) 15:12 · Jul 16, 2026
What do you assume? Be sure that to learn the feedback!
3 methods to animate hand-drawn textual content
Johannes Bechberger showcased 3 ways to animate hand-drawn textual content. SVG scares the heck out of me to be trustworthy, however Johannes cuts proper to chase within the code feedback.
An introduction to container ‘caught’ queries
Chris Coyier demonstrated the best way to question whether or not a component is caught utilizing container scroll state queries (extra particularly, utilizing @container scroll-state(caught: ). That is a type of new container queries; though, neither Safari nor Firefox helps it but.
New internet platform updates and options
Wish to see one thing bizarre? Chrome’s roadmap seems to be scheduled up for the following 14 years, stopping proper after Chrome 499 particularly.
We’ll be on What’s !vital #354 by then!
Anyway, till subsequent time (What’s !vital #17).
