It was close to four years ago now that I first floated (ha!), publicly refined, and then published at its own home what’s become known as the “Eric Meyer Reset”. At the time, I expected it would be of interest to a small portion of the standards community, provoke some thought among fellow craftspeople, and get used occasionally when it seemed handy. Instead, it’s ended up almost everywhere.
(This occasionally backfires on me when people use it in the CSS of e-mail campaigns, it’s exposed by older mail clients, and people then mail me to demand that I unsubscribe them from the mailing list. But that’s not the worst backfire — I’ll get to that in just a minute.)
Four years is long enough for a revisit, I’d say. I spent a little time working on and thinking about it over the holidays. Here’s where I ended up.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0b1 | 201101
NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define visible focus styles!
:focus {
outline: ?????;
} */
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Some of you may be thinking: “Hey, it’s the HTML5 Doctor reset!” Actually, no, though I did use their work as a check on my own. I felt like that one went a bit far, to be honest. What I have above is simply the reset I had before with the following changes:
- Removed
font from the selector of the first rule. It’s been long enough now, I think. We can let that one go.
- Removed
background: transparent from the declaration block of the first rule. I don’t think it really served any purpose in the long run, given the way browsers style by default and the CSS-defined default for background-color (which background encompasses, of course). Its removal will also stop causing table-appearance glitches in old versions of IE, if that’s of interest.
- Added
font: inherit to the declaration block of the first rule. There are still older versions of IE that don’t understand inherit, but support is now widespread enough that I feel this can go in. I left font-size: 100% as a sop to older browsers, and override it with the next declaration in those browsers that understand.
- Added HTML5 elements to the selector of the first rule. While this is probably unnecessary right now, those elements being about as styled as a common
div, it’s in the spirit of the thing to list them.
- A separate rule to make blocks of those HTML5 elements that generally default to blocks. This is more backward-looking, as the comment suggests, and it’s a prime excision candidate for anyone adapting these styles to their own use. However, if you’ve ever known the pain of HTML5 markup shattering layouts in, say, older versions of Firefox, this rule has a place.
- Removed the “cellspacing” comment near the end. It used to be the case that lots of browsers needed the support, but that’s a lot less true today.
- And then the big one, trying to correct the biggest backfire of the whole enterprise: I commented out and subtly altered the commentary on the
:focus rule without removing it entirely.
On that last point, defining an invisible focus was the biggest blunder of the original reset. In hindsight, it’s really a obvious unforced error, but when I published the reset I literally had no conception that it would be just copied (or, worse, hotlinked) blindly in a thousand sites and frameworks. As the new advocacy site outlinenone.com points out, I did say right in the style sheet that one should define a focus style. I put in a value of 0 in the same spirit I zeroed out paragraph margins and set the body element’s line-height to 1: by taking everything to a “plain baseline”, the thoughtful craftsperson would be reminded to define the focus style that made most sense for their site’s design.
Instead, focus outlines were obliterated wholesale as lots and lots of people, not all of them craftsmen, just copied the reset and built on top of it without thinking about it. I can’t find it in my heart to fault them: most construction workers don’t think about how beams and rivets or even riveters are made. They just bolt ’em together and make a building.
Perhaps some of the pain would have been eased if I had said in the comment, as I do now, “remember to define visible focus styles”. But I doubt it.
So in this revision, I’ve altered the rule and commentary to raise its visibility, but more importantly I’ve commented out the whole rule. This time, copiers and hotlinkers won’t destroy focusing. Some may still uncomment it and change the value back to 0, of course, but that could happen anyway. With luck, this change will help educate.
As was the case in 2007, comments and suggestions are most welcome, and may well result in changes that make it into the final version. Also, my thanks to the HTML5 Doctor crew for publishing their variant, which I used as a sanity check; and Michael Tuck, whose research into the history of resets got me looking back and interested in moving things forward.
Addendum 3 Jan 11: as the previous paragraph says, and the version number (2.0b1) heavily implies, this is not a final version. It may well change, either due to errors on my part (one of which has already come to light) or changes of mind due to discussions in the comments. You can take this version and use it if you want, but I don’t particularly recommend it because—again—changes are likely.
Translations