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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-unrecognized-at-rule-starting-style
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

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

The same CSS goes into `toast.css`, unchanged:

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

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