What’s !important: sibling-index() Animations, Infinity Keyword, and Stuck Queries
A roundup of the latest web development highlights featuring sibling-index() animations in Firefox 154, CSS knockout brackets, and browser updates.
Stock photo for illustration only, not from the actual event
- Firefox 154 will ship sibling-index() for animations on August 18, 2026
- Ahmad Shadeed demonstrates how to code a World Cup knockout bracket using CSS
- Adam Argyle explores practical use cases for the infinity keyword inside calc()
- Chris Coyier introduces container scroll state queries to check stuck elements
The web development community gets a fresh batch of modern techniques and exciting updates courtesy of the latest CSS-Tricks roundup. Kicking things off, Temani Afif showcased how to leverage sibling-index() for creative animations—building upon Chris Coyier’s In-N-Out Animations series. Firefox 154 is scheduled to ship this feature on August 18, 2026, pushing it into Baseline: Newly Available status.
For developers suffering from post-World Cup blues following the conclusion of the 2026 FIFA World Cup, Ahmad Shadeed published a fantastic guide on building a complete tournament knockout bracket using pure CSS. It is an exceptionally fun read packed with clever implementation details that you definitely should check out.
Stock photo for illustration only, not from the actual event
Integrating advanced mathematical keywords like infinity and negative infinity (-infinity) inside CSS calc() functions allows developers to handle extreme boundary conditions and complex layout constraints natively. This evolutionary step minimizes the need for JavaScript workarounds, pushing CSS further into a truly programmable styling language.
Moving on to numerical tricks, Adam Argyle penned an insightful deep dive explaining various real-world use cases for the infinity keyword within calc() functions, including negative infinity. Meanwhile, Johannes Bechberger shared three distinct approaches to animating hand-drawn text, cutting straight through the intimidation factor of SVG by providing crystal-clear code comments.
In other layout news, Chris Coyier introduced container 'stuck' queries, demonstrating how to query whether an element is currently stuck using @container scroll-state(stuck: <keyword>). However, developer adoption will have to wait as neither Safari nor Firefox supports this emerging container query yet.
The article wrapped up with notable web platform updates, highlighting that Firefox 153 features several interoperability improvements and brings the Picture-in-Picture API to Baseline status. Concurrently, Chrome 151 added support for <usermedia> alongside interoperability enhancements, accompanied by the humorous observation that Chrome's roadmap appears mapped out for the next 14 years right up to Chrome 499.
Source: CSS-Tricks
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment