HTML check: CSS: Unrecognized at-rule “@property”

About This CSS Issue

The validator doesn't know the @property at-rule yet, but it is valid CSS from the CSS Properties and Values API and works in all major browsers, so you don't need to change it.

@property registers a custom property with a type. The syntax descriptor sets the kind of value it accepts, such as "<angle>" or "<length>". inherits says whether child elements inherit the value, and initial-value is the value the property has when nothing sets it. Once the browser knows the type, it can interpolate the property, so a transition or animation on it changes smoothly. To the browser, an unregistered custom property is just a sequence of tokens, and an animation on it jumps from the start value to the end value halfway through. That is why @property often shows up next to a rotating gradient, like the one in the examples below.

Chrome and Edge have supported @property since version 85, Safari since 16.4 and Firefox since 128, which made it Baseline in July 2024.

The validator skips the whole block, so it can't tell you when the rule itself is broken. syntax and inherits are required, and so is initial-value unless syntax is "*". If one of them is missing, browsers ignore the whole rule and the property behaves like an ordinary custom property.

Keep the rule and mute this message. If you want a clean report instead, move the @property rules to an external stylesheet: the validator checks the CSS in <style> elements and style attributes, but it doesn't load linked stylesheets. Wrapping the rule in @supports, @media or @layer doesn't help, because the validator still reports the @property inside it.

Example that triggers the message

<head>
  <title>Rotating gradient</title>
  <style>
    @property --angle {
      syntax: "<angle>";
      inherits: false;
      initial-value: 0deg;
    }

    .card {
      background: linear-gradient(var(--angle), #4f46e5, #ec4899);
      animation: spin 4s linear infinite;
    }

    @keyframes spin {
      to {
        --angle: 360deg;
      }
    }
  </style>
</head>

Example with the rule in an external stylesheet

<head>
  <title>Rotating gradient</title>
  <link rel="stylesheet" href="gradient.css">
</head>

The same CSS goes into gradient.css, unchanged:

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.card {
  background: linear-gradient(var(--angle), #4f46e5, #ec4899);
  animation: spin 4s linear infinite;
}

@keyframes spin {
  to {
    --angle: 360deg;
  }
}