Posts from Saturday, April 14th, 2007

Reworked Reset

Published 17 years, 3 weeks past

Here’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:

  1. 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.

  2. font-weight: inherit; — this used to be normal, but it was pointed out that this would upset normal inheritance.  For example, if you set a div to be boldfaced, none of its descendant elements would inherit that boldness (because they’d be explicitly assigned normal).  Using inherit avoids this problem while still “zeroing out” boldface styling.

  3. font-style: inherit — same reasoning.

  4. 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).

  5. a img, :link img, :visited img — this will make sure images in anchors and links don’t have a border by default.  Using a img covers images in named anchors, while the rest of the selector handles images inside either visited or unvisited links.  You might consider a img to be sufficient, and for now you’d be right.  But in the future, any element may be a link, not just a elements, 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!

Browse the Archive