Skip to main content

Harshal V. LADHE

CSS Custom Properties

Using CSS custom properties (variables) to share, inherit and compute values across a stylesheet, from simple tokens to values read from HTML attributes.

Content tagged custom-properties

  • Tutorial:Animate and Type-Check CSS Variables with @property

    Give CSS custom properties real types so they animate.
    Register CSS custom properties (CSS variables) with @property — a syntax, an inherits rule and an initial value — so they animate in transitions and keyframes, fall back safely on invalid values and always have a default. Covers rotating gradients, counting numbers and per-axis motion, CSS.registerProperty(), performance, browser fallbacks and common pitfalls.
    Published at:
    Categories:CSS
    Estimated reading time:6 min read

  • Tutorial:HTML Attributes as Real CSS Values with Typed attr()

    Read HTML attributes as CSS colours, lengths and numbers.
    Typed attr() reads an HTML attribute as a real CSS value — type(<color>), type(<integer>), a unit like % or px, or raw-string — for any property on any element, not just text in content. Covers fallbacks for missing or invalid values, patterns for layout, transitions and view transitions, safe fallbacks in browsers without support, and when a custom property is the better choice.
    Published at:
    Categories:CSS
    Estimated reading time:10 min read