revert-layer

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.

In the example below, 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.

HTML

<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

CSS

@layer base, special;

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

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

Result

All the <li> elements match the item rule in the special layer and are red. This is the default cascade layer behavior, where rules in the special layer take precedence over rules in the base 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.

HTML

<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

CSS

@layer base, special;

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

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

Result

With color set to revert-layer, the color property value rolls back to the value in the matching feature rule in the previous layer base, and so 'Item one' is now green.

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.

HTML

<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

CSS

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

The style for all <li> elements rolls back to the defaults in the user-agent origin.

• Use the initial keyword to set a property to its initial value.
• Use the inherit keyword to make an element's property the same as its parent.
• Use the revert keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
• Use the unset keyword to set a property to its inherited value if it inherits or to its initial value if not.
• The all property lets you reset all properties to their initial, inherited, reverted, or unset state at once.