Day 64: the revert-layer keyword

With cascade layers comes a new CSS-wide property value, revert-layer.

You can use the rever-layer keyword to roll back the cascade to a value defined in a previous layer.

In the following example, the base layer defines a black color for the border. The theme layer sets the border color to fuchsia. In a print media query within the theme layer we revert the style back to the color in the base layer.

@layer base {
  h2 {
    --border-color: #000;
    
    border: 4px solid var(--border-color);
  }
}

@layer theme {
  h2 {
    --border-color: fuchsia;
  }
  
  @media print {
    h2 {
     --border-color: revert-layer;
    }
  }
}

<h2>Sretan Božić!</h2>

If you try to print this page, you will see that the border-color of the <h2> is #000.

Preview print stylesheet

<p>My blog doesn’t support comments yet, but you can reply via <a href=’mailto:blog@matuzo.at?subject=Comment%20on%20%E2%80%9CDay%2064%3A%20the%20revert-layer%20keyword%E2%80%9D’>e-mail</a>.</p>