Chrome 142 introduces range syntax support for container style queries and the if() function, enabling numeric value comparisons using custom properties and the attr() function. This allows developers to conditionally apply styles based on numeric thresholds, such as adjusting text color based on background lightness or formatting notification badges based on count. The feature supports multiple data types including length, number, percentage, angle, time, frequency, and resolution, making conditional CSS logic more powerful when combined with media queries and other container query types.
Table of contents
Range syntax with custom propertiesRange syntax with the attr() CSS functionRange syntax with literal valuesCSS queries have come a long way, haven’t they?Sort: