Posts from Tuesday, May 1st, 2007

Reset Reloaded

Published 16 years, 11 months past

After a bit of time to bake and a few more suggestions from readers, I have what I’m willing to call the final version of my take on the topic of reset styles.  To wit: 

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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

So what changed from the last iteration?

  1. I added background: transparent; to the first rule.  It’s probably not as necessary as some of the other bits here, but it seemed like a good thing to add.

  2. Added a :focus rule to try to suppress link outlining.  Why?  So that you remember to define your own.  You should make sure to define an outline, as it’s an important accessibility aid.  If you have a universal default, one that applies no matter what the project, then replace my rule with your own.

  3. There’s now a body rule that sets a baseline line-height that will be inherited by the rest of the document (and can be overridden easily), and sets a foreground and background color.  Originally, I avoided setting the colors, but decided it was better to put them in.  Of course, if you have preferred color defaults other than black on white, edit the declarations to suit your taste.

  4. The a img, :link img, :visited img rule has been dropped.  This is because the only browser family it really affects is Gecko line, and they all honor author styles as having precedent over user agent styles (as they should!).  So this is already covered by the first rule.

  5. Added a rule for caption, th, td to be left-aligned and normal-weight.

  6. Added a blockquote, q rule to suppress quotes by way of the quotes property.  This has the same intent as the previous rule, but approaches it along a different route.

I also asked for help in figuring out how to simulate inherit in IE/Win.  In the end, it seems to me like doing so isn’t really necessary for most people.  As I said before:

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

So that works for me, and I think for most people who have outlooks similar to mine.  But maybe you develop primarily in IE/Win, or you really want to have IE/Win handle as many of these resets as humanly possible.  In that case, you have two basic choices.

  1. Use the script and syntax contributed by Jonathan Snook and Dean Edwards.  Note, however, that Dean himself doesn’t recommend doing this, feeling that it’s too computationally expensive for such a small effect.  Dean has a lot of experience with scripting around IE/Win’s limitations, so I give his views on this a lot of weight.  On the other hand, I’d like to see IE/Win be able to honor inherit, or at least get the same behavior, so I might still use the script.  (Though I’d be even happier with a script that just tacked itself onto instance of inherit in a style sheet, like Dean’s IE7 script does for other CSS stuff.)

  2. Put in your own expressions, along the lines suggested by Priit and thacker.  It’s not quite the same thing, but it’s a pretty decent approximation.

Like I say, these aren’t necessary unless you’re really sold on the idea of IE/Win being forced into line with everyone else and don’t mind paying the computational overhead.  If so, then you can extend your own reset styles as needed.

That’s much of the point here: that this is not a case of “everyone must use these styles in a certain way without alteration”.  Nor am I saying that everyone must use them or else be cast into darkness.  Remember before that I termed these “my take on the topic of reset styles” (emphasis added).  Your take may be subtly or greatly different.  Think of these as a starting point for creating your own defaults, in addition to being a way to illuminate the nature of browser defaults.  Simply the act of taking those defaults into consideration and thinking about them closely puts you ahead of 99% of your peers.  I do think that reset styles are quite useful; otherwise, I wouldn’t have written about them here, and certainly not to the extent that I have.  My hope is that people will use them as a launch pad for their own resets and for deeper thinking about styling and browsers.

My thanks to everyone who commented, not just those I linked above.  And yes, I’m going to get to that “weirdness of form elements” post in the near future.

Addendum 2 May 07: I edited the CSS to change background: transparent to background-image: transparent, as it was supposed to be from the outset but I somehow didn’t see in any of the three times I looked over the declarations.  So I guess that makes this post now “final.0.1”.

Addendum 4 May 07: background-image: transparent?  There’s a big ol’ WTF.  Apparently my cold medication has warped me a lot more than I believed.  I’ve taken out that whole declaration and will not be editing the styles any further until I’m off the meds.  So, not quite final, apparently.

Browse the Archive