{"id":302263,"date":"2020-01-27T17:51:26","date_gmt":"2020-01-28T00:51:26","guid":{"rendered":"https:\/\/css-tricks.com\/?p=302263"},"modified":"2020-02-03T16:55:34","modified_gmt":"2020-02-03T23:55:34","slug":"what-does-revert-do-in-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/what-does-revert-do-in-css\/","title":{"rendered":"What does “revert” do in CSS?"},"content":{"rendered":"\n

Miriam Suzanne explains in a Mozilla Developer video<\/a> on the subject. <\/p>\n\n\n\n

The revert<\/code> value in CSS “resets” a property back to it’s inherited value, only going as far back as the UA stylesheet. That’s critical, as it won’t reset a <p><\/code> to inline, for example, because a <p><\/code> is a block-level element as set in the UA stylesheet.<\/p>\n\n\n\n\n\n\n\n

So if we had this HTML:<\/p>\n\n\n\n

<p>Lorem, ipsum dolor.<\/p>\n<p class=\"alt\">Fugit, id vel.<\/p><\/code><\/pre>\n\n\n\n
And CSS:<\/p>\n\n\n\n
p {\n  color: red;\n}\n.alt {\n  color: revert;\n}<\/code><\/pre>\n\n\n\n
Both paragraphs would be selected by the p selector, making them red, but the class selector on the second paragraph has higher specificity, so the color: revert;<\/code> wins, changing the text back to black (the UA default). <\/p>\n\n\n\n
But, the color property cascades, so if we had:<\/p>\n\n\n\n
<div class=\"parent\">\n  <p>Lorem, ipsum dolor.<\/p>\n  <p class=\"alt\">Fugit, id vel.<\/p>\n<\/div><\/code><\/pre>\n\n\n\n
.parent {\n  color: blue;\n}\np {\n  color: red;\n}\n.alt {\n  color: revert;\n}<\/code><\/pre>\n\n\n\n
The second paragraph would be blue<\/code> because revert<\/code> forces it to take its color<\/code> from inheritance. <\/p>\n\n\n\n
The revert<\/code> value is fairly new, supported in Firefox and Safari, but not yet in Chrome-world. We’ve already got a couple of related keywords that work on any property which are meant to help control inheritance and reset values. <\/p>\n\n\n\n
The difference is small, but important: <\/em>unset<\/code> allows inheritance, while <\/em>initial<\/code> does not.<\/em><\/p><\/blockquote>\n\n\n\n
Miriam makes the case that revert<\/code> is actually the most useful of them because it “takes user and user-agent styles into consideration.”<\/p>\n\n\n\n
I don’t disagree. But (and I hate to say this) I do think we need a fourth option, one that has the forcing power of initial<\/code>, but the UA stylesheet respect of revert<\/code>. Something like…<\/p>\n\n\n\n
.button {\n  all: default; \/* Not real! *\/\n\n  \/* New styles starting from UA base *\/\n}<\/code><\/pre>\n\n\n\n
These keywords work with any property, but I think using all<\/code> is the most compelling. It’s a way to wipe out all styles on an element to start with a blank slate. That said, none of the three options is quite good enough for that use case. The unset<\/code> and revert<\/code> values aren’t good enough because they still allow inheritance and so doesn’t wipe out styles well enough. The initial<\/code> value is too strong in that it wipes out defaults you might not expect, like making a <div><\/code> inline instead of block. <\/p>\n","protected":false},"excerpt":{"rendered":"
Miriam Suzanne explains in a Mozilla Developer video on the subject. The revert value in CSS “resets” a property back to it’s inherited value, only going as far back as the UA stylesheet. That’s critical, as it won’t reset a <p> to inline, for example, because a <p> is a block-level element as set in the […]<\/p>\n","protected":false},"author":3,"featured_media":269896,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[17249,10720],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/higher-order-components.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":342930,"url":"https:\/\/css-tricks.com\/inherit-initial-unset-revert\/","url_meta":{"origin":302263,"position":0},"title":"inherit, initial, unset, revert","date":"June 22, 2021","format":false,"excerpt":"There are four keywords that are valid values for any CSS property (see the title). Of those, day to day, I'd say I see the inherit used the most. Perhaps because it's been around the longest (I think?) but also because it makes logical sense (\"please inherit your value from\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342718,"url":"https:\/\/css-tricks.com\/custom-property-brain-twisters\/","url_meta":{"origin":302263,"position":1},"title":"Custom Property Brain Twisters","date":"June 25, 2021","format":false,"excerpt":"I am part of that 82% that got the answer to Lea Verou's quiz wrong. Stephen Shaw posted a similar quiz as well and it's a fun exercise sharpen your CSS chops.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/custom-property-componentcolor.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353462,"url":"https:\/\/css-tricks.com\/an-interview-with-elad-shechter-on-the-new-css-reset\/","url_meta":{"origin":302263,"position":2},"title":"An Interview With Elad Shechter on “The New CSS Reset”","date":"October 19, 2021","format":false,"excerpt":"Hey folks! Elad reached out to me to show me his new CSS reset project called the-new-css-reset. It\u2019s quite interesting! I thought a neat way to share it with you is not only to point you toward it, but to ask Elad some questions about it for your reading pleasure.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/elad-shechter.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363766,"url":"https:\/\/css-tricks.com\/css-cascade-layers\/","url_meta":{"origin":302263,"position":3},"title":"A Complete Guide to CSS Cascade Layers","date":"February 21, 2022","format":false,"excerpt":"This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/cascade-layers-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":264665,"url":"https:\/\/css-tricks.com\/latest-ways-deal-cascade-inheritance-specificity\/","url_meta":{"origin":302263,"position":4},"title":"The latest ways to deal with the cascade, inheritance and specificity","date":"January 10, 2018","format":false,"excerpt":"The cascade is such an intrinsic part of CSS that they put it right there in the name. If you\u2019ve ever needed to use !important to affect specificity in the cascade, you\u2019ll know that it can be a tricky thing to deal with. In the early days of CSS, it\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":283559,"url":"https:\/\/css-tricks.com\/css-remedy\/","url_meta":{"origin":302263,"position":5},"title":"CSS Remedy","date":"March 4, 2019","format":false,"excerpt":"There is a 15-year history of CSS resets. In fact, a \"reset\" isn't really the right word. Tantek \u00c7elik's take in 2004 was called \"undohtml.css\" and it wasn't until a few years later when Eric Meyer called his version a reset, that the word became the default term. When Normalize\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/reset-lines.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302263"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=302263"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302263\/revisions"}],"predecessor-version":[{"id":303159,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302263\/revisions\/303159"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/269896"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=302263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=302263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=302263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}