Learn how to use the new range syntax for CSS style queries and the if() function.

Una provides insights into web accessibility, inclusive design, and user experience best practices. Developers can explore Una's  articles, guides, and resources to gain a deeper understanding of accessibility standards, design principles, and usability considerations. By embracing Una's teachings, developers can ensure that their digital products are accessible to all users, regardless of their abilities or impairments, and create more inclusive and user-friendly experiences for everyone.

Una Kravets

CSS style queries now support range syntax with comparison operators (>, <, >=, <=) as of Chrome 142, similar to media and container queries. This enhancement allows developers to query custom properties based on ranges rather than exact values, enabling more flexible responsive components. The feature works with @container style() queries and the CSS if() function, supporting comparisons of numeric data types like percentages, lengths, and angles. Practical applications include conditional styling based on data attributes, grid positioning, and dynamic component variations.

Range Syntax for Style Queries