Reworked Reset
Published 18 years, 2 weeks pastHere’s the latest version of my “baseline” style sheet, with some changes based on feedback from readers on the original post.
/* Don't forget to set a foreground and background color
on the 'html' or 'body' element! */
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,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
content: "";
}
The changes are:
The leading comment — rather than fill in some default document colors, which I hesitate to do given how often they’ll be changed, I just threw in a comment reminding the author that setting them is a good idea. I’d expect that anyone who uses their own set of baseline styles will fill in their own favorite color set.
font-weight: inherit;— this used to benormal, but it was pointed out that this would upset normal inheritance. For example, if you set adivto be boldfaced, none of its descendant elements would inherit that boldness (because they’d be explicitly assignednormal). Usinginheritavoids this problem while still “zeroing out” boldface styling.font-style: inherit— same reasoning.vertical-align: baseline— this brings everything onto the baseline, including superscripts and subscripts. This forces authors to determine the exact vertical offset they want for such elements, as well as any others they might care to vertically shift, as well as how they’ll accomplish said shift(s).a img, :link img, :visited img— this will make sure images in anchors and links don’t have a border by default. Usinga imgcovers images in named anchors, while the rest of the selector handles images inside either visited or unvisited links. You might considera imgto be sufficient, and for now you’d be right. But in the future, any element may be a link, not justaelements, so this gives us a bit of future-proofing.
I also put some spaces into the selectors to make them easier for me to read. If you use these styles, you might consider stripping out the unnecessary whitespace to compact the rules as much as possible.
It was suggested that min-width: 0; be added to the first rule in order to invoke hasLayout, but Ingo Chao explained why that was a bad idea. It was also suggested that text decorations should be removed from links, but I’d rather not. I try never to mess with link decorations, and also figure that anyone who feels otherwise can add their own text-decoration declarations.
So we’ll see how well this one stands up to use in the wild. Let me know!