CSS Revert

I’ve often used initial and unset in my CSS – global keywords that can be applied to any property. The difference is small, but important: unset allows inheritance, while initial does not. But then Firefox implemented revert and I was confused – how is this one different from the others?!

Part of a series tagged 'mozilla developer'

Styling Lists in CSS – October 1, 2019
Why is CSS so Weird? – October 3, 2019
What does <code>revert</code> do in CSS? – October 9, 2019
Faster Layouts with CSS Grid – October 14, 2019
Subgrid for Better Card Layouts – October 15, 2019
Laying out Forms using Subgrid – October 16, 2019
Why isn’t this CSS doing anything? – October 21, 2019
Inner & Outer Values of the Display Property – October 28, 2019
Scroll Snap in CSS – October 31, 2019
How do you wrap long words in CSS? – November 6, 2019
Use new selectors responsibly with selector queries – November 20, 2019

Revert takes user and user-agent styles into consideration

It turns out revert is the one I wanted all along. It rolls back styles to the expected browser default for each element, rather than using the specification default for each property.

MDN documentation
CodePen demo