Extending CSS when / else chains: A first look

CSS conditional rules, such as @media and @support, allow authors to apply styles based on certain conditions, but combining them for complex logic can be challenging. To address this, new proposals like @when and @else have been introduced to the CSSWG Conditional Rules Module Level 4, aiming to simplify and generalize conditional logic in style sheets. The @when rule acts as a wrapper to consolidate multiple conditions into a single statement, while the @else rule facilitates conditional chains, providing fallbacks when conditions are not met. Additionally, the Level 4 specification introduces a more intuitive syntax for media queries using comparison operators, as well as extensions to support font technology queries. Despite debates over naming conventions, with some preferring @if over @when to avoid conflicts with Sass, these rules promise to enhance CSS by allowing more readable and maintainable styles.

No tracked trend matches for this post yet.