CSS @property and the new style

Original Article ↗ Hacker News Discussion ↗

CSS’s new `@property` feature, which lets developers register typed, animatable custom properties, is exciting some for the powerful, JS-free visual effects it enables while alarming others with its complexity and potential for abuse. Supporters see it as part of a broader shift toward declarative, GPU-friendly browser capabilities that replace fragile JavaScript hacks and unlock richer UI design. Critics counter that CSS is drifting far from its original “simple styling” role, raising the learning curve, complicating tooling and debugging, and potentially expanding the web’s security and privacy attack surface.

Overall sentiment on @property and modern CSS

  • Many are excited by @property and see it as a long‑overdue power tool; others feel it’s arcane and overcomplicates CSS.
  • Thread is full of nostalgia: early CSS felt small and comprehensible; now the surface area is huge and hard to hold in one’s head.
  • Some see this as CSS finally catching up to what native apps and older tech (Flash, VRML, IE‑era features) could already do.

What @property / registered properties enable

  • Clarified as “CSS custom properties with types, defaults, and inheritance control that can be animated.”
  • Main win: lets the browser treat a custom property as a concrete typed value (e.g., angle, color) so it can be interpolated across animations.
  • Also enforces validity (invalid values ignored), allows initial to map to a defined default, and controls whether a custom property inherits like color or not like display.
  • Some feel the article’s examples obscured the core concept; MDN and other resources are recommended for clearer explanations.

CSS complexity, learnability, and tooling

  • Strong divide: some love exploring CSS “deep magic”; others say this kind of code is why they avoid frontend.
  • Concern that new CSS features mostly serve a small slice of experts, while “copy‑paste CSS” by non‑programmer designers becomes harder to untangle.
  • Others argue new spec complexity reduces app complexity by replacing JS hacks and layout workarounds.

CSS vs JavaScript for animations and logic

  • Advocates for CSS emphasize:
    • Better performance (GPU acceleration, off main JS thread).
    • Built‑in devtools and a declarative model that lets browsers optimize.
    • Ability to keep pages functional for users who disable JS.
  • Skeptics argue:
    • This is effectively a mini programming language in CSS.
    • JS (or Web Animations API) is more natural to many developers and more debuggable.
  • There’s debate over CSS’s theoretical expressiveness (Turing‑complete or intentionally constrained); consensus is that it’s a different paradigm than JS, not a replacement.

Design, UX, and accessibility debates

  • Many find the demo button visually impressive but aesthetically tacky or reminiscent of 2000s ads/Flash.
  • Others welcome more distinctive, non‑homogeneous designs instead of every site using the same component libraries.
  • Multiple comments stress respecting prefers-reduced-motion and using animations sparingly to avoid distraction and motion sickness.

Security, privacy, and blocking CSS

  • Several note that sophisticated CSS already enables some tracking and data exfiltration, though it’s rarer than JS‑based tracking.
  • Some call for “CSS blockers” or allowing only a safe subset, similar to blocking JS, as CSS becomes more powerful.