Reset 2.0b2: Paring Down
Published 13 years, 10 months pastA 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.