Overview
The language of CSS has had an explosion of new features and improvements. But what happens at the edges between these features? With great power comes the responsibility to learn how these new behaviours work and how they interact, so you can anticipate and avoid collisions and pitfalls. Join this session to uncover when container queries may cause headaches and situations when popover, anchor positioning, and other cutting-edge behaviours may be problematic. You’ll become familiar with the term “invalid at computed value time” and understand how that impacts your cross-browser support strategy. Finally, you’ll learn why the “C” in CSS is still important, and the specificity impacts of using scope and cascade layers.
Objective
This session will boost awareness of cutting-edge CSS features, tackle the complexities that can lead to collisions between behaviours, and provide strategies for robust cross-browser support and specificity control.
Five Things Audience Members Will Learn
- About cutting-edge features like container queries, popovers, anchor positioning, nesting, light-dark(), etc. and awareness of potential issues
- Become familiar with the concept of “invalid at computed value time“
- Understand how the cascade impacts the behaviour of styles
- How to manage specificity using scope and cascade layers
- Gain insights into developing a cross-browser support strategy for integrating modern CSS features
Target Audience
Front-end developers with at least advanced beginner knowledge seeking to stay updated on the latest modern CSS features and how to effectively and safely integrate them.
