Posts from April 2007

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!

• Reworked Reset was published on Saturday, April 14th, 2007.
• It was assigned to the CSS category.
• There have been ninety-nine replies.

At AEA Boston, I advocated using a “reset” or “baseline” set of styles, but not one based on the universal selector.  Instead, I said the styles should list all the actual elements to be reset and exactly how they should be reset.  During the Q&A afterward, an audience member asked me if I would create such a style sheet to share with the world, and I said that I would.

Then, during the break, someone else (sorry I’ve forgotten who!) reminded me that the Yahoo! UI group already did it with reset.css so I don’t have to.  Awesome!

…except that I don’t think it goes far enough in some areas, and a little too far in others.  So here’s my version of reset.css, based off of the YUI styles.

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: normal;
	font-style: normal;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol,ul {
	list-style: none;
}
q:before,q:after,
blockquote:before,blockquote:after {
	content: "";
}

I omitted elements like hr and the various frame-related elements, as well as form elements like input and select, because of their general weirdness, though I may change my mind about those at a later date.  I intentionally left out dir and menu because of their deprecated status.

I’m absolutely open to questions, comments, and suggestions, so feel free to use the comments for that purpose.

(Side note: if anyone’s disturbed by the unitless value for line-height, please read my post “Unitless line-heights“.)

Addendum: There have been some good suggestions in the comments, so they’re definitely worth reading.  See also the followup post, which incorporates some of those suggestions.

• Reset Styles was published on Thursday, April 12th, 2007.
• It was assigned to the An Event Apart and CSS categories.
• There have been seventy-five replies.