The revert-layer CSS keyword

❮ CSS References

Experimental: This is an experimental technology.

Meaning

The revert-layer CSS keyword rolls back the value of a property in a cascade layer to the value of the property in a CSS rule matching the element in a previous cascade layer.

The value of the property with this keyword is recalculated as if no rules were specified on the target element in the current cascade layer.

If there is no other cascade layer to revert to for the matching CSS rule, the property value rolls back to the computed value derived from the current layer. Furthermore, if there is no matching CSS rule in the current layer, the property value for the element rolls back to the style defined in a previous style origin.

This keyword can be applied to any CSS property, including the CSS shorthand property all.







Browser Support

The numbers in the table specify the first browser version that fully supports the property.




Status







Revert-layer vs. revert

The revert-layer keyword lets you rollback styles to the ones specified in previous cascade layers. All cascade layers exist in the author origin.

The revert keyword, in comparison, lets you remove styles applied in the author origin and roll back to styles in user origin or user-agent origin.

The revert-layer keyword is ideally meant for applying on properties inside a layer. However, if the revert-layer keyword is set on a property outside a layer, the value of the property will roll back to the default value established by the user agent's stylesheet (or by user styles, if any exist).

So in this scenario, the revert-layer keyword behaves like the revert keyword.




Example

Default cascade layer behavior

In the following example, two cascade layers are defined in the CSS, base and special.

By default, rules in the special layer will override competing rules in the base layer because special is listed after base in the @layer declaration statement.

Example

@layer base, special;

@layer special {
  .item {
    color: red;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}



Revert to style in previous cascade layer

Let's examine how the revert-layer keyword changes the default cascade layer behavior.

For this example, the special layer contains an additional feature rule targeting the first <li> element.

The color property in this rule is set to revert-layer.

Example

@layer base, special;

@layer special {
  .item {
    color: red;
  }
  .feature {
    color: revert-layer;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}



Revert to style in previous origin

This example shows the revert-layer keyword behavior when there is no cascade layer to revert to and there is no matching CSS rule in the current layer to inherit the property value.

Example

@layer base {
  .item {
    color: revert-layer;
  }
  .feature {
    color: green;
  }
}



See also:

❮ CSS References