CSS now has an if() conditional function

Original Article ↗ Hacker News Discussion ↗

CSS is gaining an `if()` conditional function, allowing authors to apply different property values based on conditions (such as media queries or custom property values) directly within a single rule. Support currently exists only in Chromium and the feature is still a draft, prompting debate over browser fragmentation, whether this meaningfully reduces the need for JavaScript, and if it pushes CSS further toward becoming a full-fledged programming language. Some welcome it as cleaner, more powerful syntax that replaces existing hacks, while others worry about added complexity and maintenance costs in an already intricate styling model.

What if() Adds Compared to Existing CSS

  • Seen largely as syntactic sugar over @media / @supports and style queries, but:
    • Works per-property instead of at-rule level.
    • Can branch on custom property values (string equality via style(--foo: bar)).
  • Lets a single declaration encode multiple modes (e.g., themes) instead of duplicating rules.

Practical Use Cases and Enthusiasm

  • Helpful for people who avoid JavaScript (static sites, simple theming).
  • Promising for dark/light/high-contrast modes and component states without JS, or with much less JS.
  • Some report already using elaborate CSS variable hacks to emulate conditionals; if() simply formalizes and simplifies these patterns.
  • May reduce FOUC compared to JS-driven theming, since logic stays in CSS.

Browser Support and Readiness

  • Currently Chromium-only and in a working draft of CSS Values & Units Level 5.
  • Firefox and WebKit have open standards-position issues but no implementation activity yet.
  • Several commenters stress it’s “far from ready” and suggest pushing it into Interop 2026.
  • Some confusion noted between Can I Use’s optimistic messaging and the actual standards/bug trackers.

Complexity, Debugging, and “CSS as a Programming Language”

  • Concern that adding branches makes already complex cascade/debugging worse and pushes CSS toward a full programming language.
  • Counterpoint: explicit if() is clearer than today’s “insane hacks” with variables, selectors, and media queries; more power can clean up code.
  • Long subthread on Turing-completeness:
    • CSS already has many conditional constructs and can emulate computation with enough HTML/user interaction.
    • Lack of loops/recursion in core CSS keeps it constrained, even if expressive.

Platform Bloat, Performance, and Backward Compatibility

  • Some worry every new feature increases browser engine complexity and cost, especially for non-Chromium engines.
  • Calls (mostly dismissed) to deprecate/remove old CSS features to offset growth.
  • Others argue expression evaluation is cheap, and conditionals may reduce rule count and improve style performance versus current hacks.
  • Related discussions touch on slow flex-based layouts, print layout pain (break-after), and general web complexity.