657Days

657 days since this post was last revised. Specific details are likely out of date.

I’m always on the look out for a simple way to undo default user agent styling on some ‘pickier’ elements (it’s what led to app-reset).

Right up front, I want to say that unless you are very careful, you probably don’t want to remove the default styling of ALL elements. Form controls, buttons, video tags etc. all have well-considered default options. Nuking them all is unlikely to be the most sensible option.

L. David Baron of Mozilla, brought me to my senses with this comment:

There’s also good reason for a decent portion of our 3200 lines of UA style sheets, and you might not want to blow it all away.

You can see what he’s talking about here: https://hg.mozilla.org/mozilla-central/file/ade8d4a63e57/layout/style/res/html.css#l714 there’s plenty of stuff in there I hadn’t considered!

So, to be clear, there is a massive potential cost to this, it may cause more problems than it solves. I haven’t used it on a project of any size yet so I’ll update in due course.

The all property (MDN docs here) provides an easy mechanism to select all properties and revert (CSS4 Level 4 only), change to initial, inherit or unset. It was the unset part that @SelenIT2 had previously escaped me.

So, in modern browsers you can do this:

* {
    all: unset;
}

/* Thanks to L. David Baron for this: https://twitter.com/davidbaron/status/794138427952222210 */
base, basefont, datalist, head, meta, script, style, title,
noembed, param, template {
    display: none;
}

You can see an example of this here with some elements such as button and fieldset showing no default UA styling: http://codepen.io/benfrain/pen/gLYZvd.

The first part with the universal selector unsets everything. With just this you will see things like the head displayed on screen. To prevent that you need to add back display: none for those elements. These are the elements in the Mozilla style sheet referenced above.

Browser support

At present, support for this seems to be: Chrome 37, Firefox 27, Safari 9.1 but no Internet Explorer 🙁.

Summary

I have not tested this to any degree so I really aren’t sure whether it solves more problems than it creates. However, I intend to update this post in the coming weeks as I try this out in more of the projects I work with.

Again, once more in case you missed it at the top; this probably isn’t the best thing to do unless you are going to be vigilant in adding decent styling back in for any of the elements you will be using in your site/app.

Ben Frain Developer, Author: 'Enduring CSS', 'Responsive Web Design with HTML5 & CSS3'.