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.
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.
- Style and Script blocks bleed in as text since they are now unstyled, and are targeted by the
- 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
initialstate 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
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.