What does revert do in CSS?
And how is it different from unset or initial?
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?!
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
Resilient Web Training & Consulting
Take full advantage of the universal web, and reduce maintenance over the long term with resilient HTML, CSS, and JS systems. OddBird provides custom consulting and in-depth trainings on front-end architecture and workflow – from advanced HTML/CSS to integrated design systems, component libraries, testing, and documentation.
Contact us for 1-3 day workshops with Miriam Suzanne, or custom web app creation with our team of Python, UX, and front-end experts.
Schedule a call with Miriam