Posts from Monday, January 10th, 2011

Reset 2.0b2: Paring Down

Published 14 years, 6 months past

A few changes for beta 2 of the updated reset, presented here:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b2 | 201101
   NOTE: THIS IS A BETA VERSION (see previous line)
   USE WITH CAUTION AND TEST WITH ABANDON */

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

First, the small changes: adding embed, output, and ruby to the first rule.  I went back and forth on these quite a bit, which is why they weren’t in the first cut.  However, none of them seem to be replaced so they’re in.  Others, such as command, are replaced and so stay out for the same reason that form inputs are left out.  (img is a special case.)

The HTML5 element I’m still stuck on is datalist, which seems sort of replaced but then again maybe not.  I’m really close to including it on the same grounds that I include canvas, but it’s hard to know if that’s a good idea.  If anyone with deep experience with datalist could explain what element it’s most like, and whether it’s really replaced or what, please do so.

Now the big changes: I removed the outline declaration from the first rule, which was option #2 in “Looking For Focus“.  I’d largely decided that was the best solution before I posted, but I didn’t want to say so for fear of skewing the responses either way.  It was interesting to see how that option initially didn’t come up very much, and then suddenly a bunch of people stumped for it.  Anyway, that course of action seems to make the most sense to me; for the reasons why, the comments of those who supported it pretty much sum up my thoughts.  With that declaration out, there’s no need to do anything special for :focus in subsequent rules.

Following on that, the other change is that I’ve dropped the :focus rule entirely, and also the ins and del rules.  Why?  Because all three of them are attempting, in some fashion, to impose a presentation above the baseline that the reset attempts to establish.  I basically left text-decoration alone in this reset; reset and del were the exceptions.  I can’t justify those exceptions any longer.

The rule for ins was actually interesting: it was, in spirit, exactly the same as the :focus rule.  Here’s a comparison:

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}

Both strip off a common visual styling and remind authors to define something visible.  Of course, pretty much nobody ever complained about the ins rule, but they’re conceptually the same and so if one goes, both should go.  And if I’m not keeping the ins rule, I can’t see any reason at all to keep the del rule.

So that’s where we are in beta 2.  I’ll be interested to know what you think.

Browse the Archive