CSS now has an if() conditional function

Original Article ↗ Hacker News Discussion ↗

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.