Resetting styles using ‘all: unset’ in Firefox 27
9 October 2013 · Some web developers like to use reset style sheets, which are style sheets that set all properties back to some known value on all elements. Although this does somewhat work against the “cascading” part of CSS, developers find it useful to avoid differences that come from user agent style sheets in different browsers and on different platforms. Since reset style sheets explicitly list all of the properties and what value to set them back to, their use can result in unexpected styling when browsers begin to support new properties that the reset style sheets do not include.
The CSS Cascading and Inheritance specification adds a new shorthand named ‘all’ that can be used in conjunction with a new CSS-wide keyword ‘unset’. These can be used to the same effect as a reset style sheet. ‘all’ is a shorthand property that is considered to have all properties that a user agent supports – except for ‘direction’ and ‘unicode-bidi’ – as component longhands. ‘unset’ is a value that means the same as ‘inherit’, if used as the value of an inherited property, or the same as ‘initial’, if used as the value of a non-inherited property.
The effect of ‘unset’ is that it effectively removes any earlier matching declarations for that property at the same origin and with the same or lower specificity, and any matching declarations at all from earlier origins, while still respecting the precedence of !important declarations. For example, in the following document, the ‘all: unset’ declaration is equivalent to ‘background-color: initial; color: inherit; display: initial; margin-top: initial; margin-left: initial; font-style: inherit; …’:
<!DOCTYPE html>
<style>
blockquote { background-color: skyblue; }
#quote { color: red; }
blockquote { all: unset; }
blockquote { font-style: italic; }
</style>
<blockquote id="quote">The blade itself incites to deeds of violence.</blockquote>
In a user agent that does not yet implement ‘all: unset’, the document would be rendered like this:
The blade itself incites to deeds of violence.
and in a user agent that does implement it, like this:
The blade itself incites to deeds of violence.
(If you’re reading this in a feed reader that has other styles applied, and in a browser that does not yet implement ‘all: inherit’, the renderings above might not look exactly right.)
The quote is rendered with red, italic text, but without its typical margins, which come from the user agent style sheet. The ‘all’ declaration wins over the ‘background-color: skyblue’ declaration, which has the same origin and specificity, while the ‘color: red’ declaration wins due to its higher specificity.
One thing to be aware of is that the initial value of the ‘display’ property is ‘inline’, which is different from the ‘block’ that would be set on blockquote elements in the user agent style sheet. If we had two consecutive blockquote elements, they would be shown in the one run of inline text, as if they were spans.
Although the ‘all’ shorthand would typically be used with the ‘unset’ value, the other CSS-wide values ‘inherit’ and ‘initial’ can be used with it, and ‘unset’ can also be used on any other individual property.
Bugs 842329 and 921731 landed in Firefox Nightly builds a couple of days ago, and will therefore be available in Firefox 27.
10 October 2013, 9:00am
I never quite understood why this wasn’t in existence earlier, good to know that it’s being implemented now though, hopefully we’ll see it used across multiple platforms in the near future.
11 October 2013, 8:16am
You may want to use images for the examples of different browser renderings instead of having to explain what the reader should be seeing with the straight HTML & CSS markup. Great article either way!
12 October 2013, 7:37am
I agree with Yusaf, it will be really great to see other browsers implement this solution.
12 October 2013, 9:08am
[...] Resetting styles using ‘all: unset’ in Firefox 27: Who knew? Not me. The new ‘all’ CSS shorthand property can be used in conjunction with the new ‘unset’ CSS keyword to have the same effect as a reset style sheet. [...]
13 October 2013, 1:23am
So html only would be
* {all:unset!important;}
13 October 2013, 6:34am
+1 on the ”…hope the the other browsers will…“
14 October 2013, 6:12am
Darcy Clarke: You may indeed look forward to this exciting new feature being implemented in the upcoming browser, Microsoft Internet Exploder 27.
Sincerely,
A Web developer deathly afraid of MSIE surviving until a “Version 27″.
2 November 2013, 2:18pm
Now all my reset has to be is
* {
all: unset;
}
Sweet!
6 February 2014, 9:47pm
Do you think this’ll help with the `line-height: normal` thing?
8 February 2014, 8:40am
Great. Any idea when it will be supported in other browsers?
8 February 2014, 11:36am
Not sure what you’re referring to, but ‘all: unset’ will have the same affect as writing ‘line-height: inherit’ (as line-height is an inherited property).