CSS: Unrecognized at-rule “@starting-style”

The validator doesn't know the @starting-style at-rule yet, but it is valid CSS from CSS Transitions Level 2 and works in all major browsers, so you don't need to change it.

Browsers don't run a CSS transition the first time they style an element, so an element that a script adds to the page, or one that goes from display: none to visible like an opened <dialog> or popover, shows up in its final state at once. @starting-style gives the browser the values to start from in that case, and the element transitions from them to its normal styles. That is how you fade in a toast or slide in a dialog with CSS alone.

You can write @starting-style as a top-level block around whole rules, or nest it inside a rule, where it holds plain declarations for that rule's selector. The validator reports both forms, once for each @starting-style block.

Chrome and Edge have supported @starting-style since version 117, Safari since 17.5 and Firefox since 129, which made it Baseline in August 2024. A browser without support ignores the rule, and the element appears without the entry transition, so nothing breaks.

The validator skips everything inside the block, so it won't report a typo in a property or value there. It still checks the CSS that comes after the block.

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

Example that triggers the message

<head>
  <title>Toast notification</title>
  <style>
    .toast {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.3s, transform 0.3s;
    }

    @starting-style {
      .toast {
        opacity: 0;
        transform: translateY(1rem);
      }
    }
  </style>
</head>

Example with the rule in an external stylesheet

<head>
  <title>Toast notification</title>
  <link rel="stylesheet" href="toast.css">
</head>

The same CSS goes into toast.css, unchanged:

.toast {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s, transform 0.3s;
}

@starting-style {
  .toast {
    opacity: 0;
    transform: translateY(1rem);
  }
}

Learn more:

MDN Reference

@starting-style - MDN Web Docs

→

drafts.csswg.org

CSS Transitions Level 2

→

Rocket Validator Pro - Muting Issues

→