Resetting styles using ‘all: unset’ in Firefox 27

  ·   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.


Eleven comments

You can subscribe to the comment feed to follow the responses to this entry.

  1. 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.

  2. 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!

  3. I agree with Yusaf, it will be really great to see other browsers implement this solution.

  4. [...] 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. [...]

  5. So html only would be

    * {all:unset!important;}

  6. +1 on the ”…hope the the other browsers will…“

  7. 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″.

  8. Now all my reset has to be is

    * {
    all: unset;
    }

    Sweet!

  9. Do you think this’ll help with the `line-height: normal` thing?

  10. Great. Any idea when it will be supported in other browsers?

  11. 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).

Leave a comment