New Trends and Techniques in Frontend Development
Explore innovations like sibling-index() animations, the infinity keyword, and container 'stuck' queries in CSS.
1Animations with sibling-index()
Firefox 154 will introduce the sibling-index() function as Baseline on August 18, 2026. Temani Afif demonstrated how to use this function to create animations. By leveraging the ordered sequence of elements, developers can achieve dynamic effects. Inspired by Chris Coyier's In-N-Out Animations series, this technique opens up new creative possibilities.
22026 FIFA World Cup and CSS
Ahmad Shadeed explained how to build the knockout bracket for the 2026 FIFA World Cup using CSS. This technique is a great guide for those looking to design interactive brackets for sports events. With CSS, complex structures can be created with simple code. Don't miss this inspiring method for your projects.
3Use Cases for the infinity Keyword
Adam Argyle detailed practical uses of the infinity and -infinity keywords in the calc() function. For instance, using superellipse(infinity) in the corner-shape property can make corners completely square. This technique gives designers more control over geometric shapes.
4The Lazy Loading Debate
Lea Verou shared her thoughts on whether lazy loading should be the default. A CSS rule like img, video { loading: lazy; } could make all media elements lazy-loaded by default. However, the impact of this approach on performance and user experience remains debatable.
5Hand-Drawn Text Animations
Johannes Bechberger showcased three ways to animate hand-drawn text. While SVG might seem intimidating, Johannes' code comments make these techniques easy to implement. These methods are particularly effective for enhancing user interaction in artistic projects.
6Container 'Stuck' Queries
Chris Coyier demonstrated how to detect if an element is 'stuck' using @container scroll-state(stuck: keyword>) queries. These new container queries are not yet supported by Safari and Firefox. However, they promise to enable more dynamic scroll-based interfaces in the future.
7Web Platform Updates
Firefox 153 and Chrome 151 introduced a range of new features and improvements. The Picture-in-Picture API is now considered Baseline. Chrome's 14-year roadmap ends with Chrome 499. These updates aim to provide developers with more powerful and flexible tools.
8The Future of Frontend
Innovations like sibling-index(), the infinity keyword, and container queries are expanding the boundaries of frontend development. These techniques offer developers the ability to create more creative and impressive user interfaces. The rapid evolution of web standards will continue to bring even more innovative solutions.
Original article: CSS-Tricks — Frontend Geliştirmede Yeni Trendler ve Teknikler