Resetting Again
I’ve been pondering reset styles over the past few months, and come to a bit of a shift in my thinking. Here’s the result of that thinking.
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
The small changes involve a paring down of the possible quotation around blockquotes and qs. Before, I was explicitly pushing in empty generated content boxes with content: "", but there was no need. A simple quotes: none; takes care of suppressing any automatic quotation marks on those elements.
The much bigger change, the shift in thinking, is the removal of the inherit values in the first rule—the ones that wiped out any boldfacing, italicizing, or font variants in browsers other than Explorer. (You can see them in the “reloaded” post.) I know, I know, I already defended that practice:
[The
inherit] effects, as seen in my development environment, will still serve the purpose of reminding me to build up the styles I actually want, and not use the browsers’ defaults as a crutch. There is the possibility of my forgetting that (for example) IE/Win italicizes em when I don’t want it to, but that’s something I’ll catch during the browser testing phase.
But over time, I’ve come to realize that this is more than just a throwaway development tool. It really is the beginning of a baseline style sheet. (Or can be.) Things like boldfacing and italics are some of the most obvious textual effects readers will see, and to have reset styles that treat them inconsistently across browsers doesn’t make sense.
Of course, browsers might treat elements differently when it comes to boldness and decoration and such. But unfortunately, without inherit as a viable solution (due to the lack of support in Explorer), we’re stuck accepting browser defaults. This is one area where defaults are pretty well consistent across the board, so it’s a small risk to be taking. And this certainly doesn’t preclude anyone from adding to these styles to create their own reset that explicitly handles elements like em and strong.
Which leads me to why I explicitly set ins and del. In some browsers, inserted text is underlined. This leads to confusion, because most people expect underlined text to be a link. I decided to explicitly switch that off and leave a note about it, much as I did with :focus styles.
And why am I not zeroing out deprecated elements, like center? Because they shouldn’t even be in the markup. The way to handle deprecated elements is with something like Marco Battilana’s Big Red Angry Text, not silently neutering them.
Comments and suggestions are, as ever, welcomed. I’m going to shift the end result to its own URL, as I promised I would long ago, so that there will be a permanent home outside of the various postings. Hopefully that will happen before the week is out.
