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.