Day 64: the revert-layer keyword

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.


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

You can use the revert-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>

Sretan Božić!

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

See on CodePen.

Further reading