CSS-wide Keywords and All selectors

For a time we struggled to reset browser styles. Resetting has become the first thing many applications do. Resetting also evolved into normalizing and then into the ‘do all pages need to look the same‘ approach. User Agent (UA) styles are an unfortunate design goal that each version of each browser may apply to elements. There has been little you could do to stop that from occurring; other than implementing the same interactions in pure Bootstrap form and ignoring the elements altogether.

This has begun to change. Largely due to the maturity of web development and the advent of Shadow Dom and Web Components, developers now gain new tools to battle UA styles. Firefox 27 released a very powerful and possibly destructive standard. Now you are able to easily reset all UA styles with a single CSS attribute.

1
*{ all:unset; } /* I do not approve (* is bad perf); but can you feel the weight lifted from the shackles being released?! */

It’s fun to play with this emerging standard. In the case of doing a prototype for a client or boss, you can skip the entire setup needed for resets or normalizing. I did some playing in a JSFiddle and discovered some great information.

This CSS and HTML produces the images below in the respective browser.

1
2
3
4
5
6
7
8
9
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<button>Just a button</button>

<blockquote> a quote like no other! </blockquote>

1
2
3
4
5
6
7
8
9
10
11
12
13
style { font-size: 24px; }
script { color: yellow; }
body {
    color: blue;
    background-color:red;
}
html { font-size: 9px; }
blockquote {
    margin:10px;
    border:1px purple;
}
body,* { all: unset; }
blockquote { all: inherit !important; }

[caption id=”attachment_533” align=”aligncenter” width=”500”]Chrome 33 or less Chrome 33 or less [/caption]

[caption id=”attachment_532” align=”aligncenter” width=”500”]Firefox 27+ Firefox 27+[/caption]

Quick notes:

  • Style and Script blocks bleed in as text since they are now unstyled, and are targeted by the * selector.
  • Cascading works as expected. For instance the font-sizes and colors are coming through in my fiddle example because the selectors (script/style/blockquote) are more specific than the *.
  • Buttons can be un-styled in a single line
  • You can put any element back to it’s initial state at any time; and then style it again.

Unfortunately, I have not found a way to get rid of the entire <select> element design applied by Firefox; the arrow button still appears. I assume this is a lower level style. I did not have the resolve to dig further (let me know if there is a way). But I feel that this improvement opens the door for the shadow-dom/web component saga and overall, you can see where this is going in regards with resetting and normalizing.

Unfortunately, Chrome is not on board yet and this specific feature has yet to be coded according to the bug for it. But cross your fingers, now that it’s in Firefox, I’m sure Chrome will want parity!

Here are a few other cool things you can do with this new tool.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
html { font-size:30px }
a { color: red; font-size: 99px; }
a { all:initial; }
a { color: pink; } /* Font will be pink, but default size (16px is default)! */


a { 
  text-decoration:none; 
  color: fuscia; /* get sued by T-Mobile™ */
}
.bold-link { 
 all:unset; /* strip all styles, including the a above when it's &quot;a.bold-link&quot; */
 text-decoration: initial; /* underlined */
 font-weight:bold; /* just bold regular text */
}


/* Build your own buttons styles */
button { all:unset; }
button {
 all:unset; /* now button is nothing but normal text! */
 /* ... */ /* All the styles you want to build from nothing */
}