@starting-style CSS At-Rule

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The @starting-style at-rule provides a way to declare a named baseline of presentation rules that will act as an initial styling context for elements, components, or document regions. Instead of relying solely on user-agent defaults or repeating the same reset rules in many places, this at-rule lets an author express a coherent set of starting conditions — typography, spacing, color ramps, and other fundamental presentational choices — that are conceptually applied before the normal cascade of author styles. This makes the intended “starting state” explicit and portable, so different parts of a site or component library can begin from the same known baseline.

When applied, the declarations established by @starting-style behave as an initial layer: they form the foundation on which the usual cascade, specificity rules, and inheritance operate. They are intended to be overridden by later, more specific author rules in the normal way, but because they are centralized and named, they reduce accidental drift and inconsistencies across an application. The at-rule can be considered a semantic grouping of initial values rather than a competing source of high-precedence styling; its main role is to provide predictability and a deliberate default that authors can rely on and selectively supersede.

Authors use @starting-style most commonly to enforce consistency and reduce redundancy. For example, component libraries can reference the same starting-style to ensure that every widget begins with identical base spacing, type scale, and baseline alignment, which simplifies both design implementation and maintenance. In a large document or multi-theme site it helps when different regions should share the same baseline aesthetics (for instance, a consistent grid, root font-size strategy, or link decoration policy) without copying those rules into every component or individual rule set.

Beyond maintainability, this at-rule also supports progressive enhancement and accessibility practices: by making baseline choices explicit, authors can more easily audit the relationship between defaults and user preferences (such as large-text modes or high-contrast themes), and provide fallbacks or overrides where necessary. It plays well with component encapsulation patterns too — a component can declare that it expects a particular starting-style and then only needs to specify its deviations, keeping component CSS small and focused on differences rather than re-declaring a full set of defaults.

Syntax

@starting-style {

  selector {

    property: value;

  }

}

Values

Since @starting-style is a wrapper for CSS properties, it doesn't have "values" of its own in the traditional sense. Instead, it accepts any animatable CSS property as a declaration within its block.

Commonly used properties include:

Opacity: opacity: 0;
Transform: transform: translateY(-20px) scale(0.5);
Background Color: background-color: transparent;
Filter: filter: blur(10px);

Example

/*Previously, you couldn't animate an element from display: none because the browser didn't have a "starting point" for the styles. Now, you can:*/

.modal {

  display: block;

  opacity: 1;

  transition: opacity 0.5s, display 0.5s allow-discrete;



  /* The state the modal starts at when it first appears */

  @starting-style {

    opacity: 0;

  }

}

Browser Support

The following information will show you the current browser support for the CSS at-rule @starting-style. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.