In What’s !necessary #16, see how the soon-Baseline sibling-index() perform 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 rather more.
Utilizing sibling-index() for animations
Following on from Chris Coyier’s In-N-Out Animations collection, Temani Afif confirmed us learn how 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 beneath:
Find out 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 these feeling the post-World Cup blues, Ahmad Shadeed confirmed us learn how to construct the knockout bracket utilizing CSS. That is such a enjoyable learn — positively don’t miss this.
Use instances for the infinity key phrase
There’s a calc() key phrase referred to as infinity, which may be unfavourable (-infinity). In the event you’re questioning why you’d ever want such numbers, Adam Argyle defined the totally different use instances for infinity on this actually fascinating 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);Principally, 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 mentioned this about lazy loading:
That is precisely why we’d like one thing like @tabatkins.com‘s outdated CAS proposal.
Think about in case you might do
img, video {
loading: lazy;
}to vary the defaults, after which simply use loading=”keen” on the precise parts to override.
— Lea Verou, PhD (@lea.verou.me) 15:12 · Jul 16, 2026
What do you assume? Be certain 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 sincere, however Johannes cuts proper to chase within the code feedback.
An introduction to container ‘caught’ queries
Chris Coyier demonstrated learn how to question whether or not a component is caught utilizing container scroll state queries (extra particularly, utilizing @container scroll-state(caught: ). That is a kind of new container queries; though, neither Safari nor Firefox helps it but.
New net platform updates and options
Need to see one thing bizarre? Chrome’s roadmap seems to be scheduled up for the subsequent 14 years, stopping proper after Chrome 499 particularly.
We’ll be on What’s !necessary #354 by then!
Anyway, till subsequent time (What’s !necessary #17).
