Skip to content

Archive for February 19th, 2008

Reset styles

Tuesday, February 19th, 2008

Reset styles are a vital tool for creating consistent, cross-browser websites. The aim is to have a set of default css rules which make a wide range of browsers render similarly from the start. While you can’t fix all the inconsistencies, a reset stylesheet can be a great start.

In this post, I’ll briefly discuss two of the most popular reset stylesheets: Eric Meyer’s reset, and the reset stylesheet from YUI. Hopefully at the end of this we’ll have an understanding of the pros and cons of each.

Eric Meyer’s Reset 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,
b, u, i, center,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

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

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

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Eric Meyer covers a wide range of elements in his reset styles. He actually resets elements which do not currently have any inconsistencies among browsers (ex. SPAN). Even though no current browsers render these elements inconsistently, it could be argued that this is in place to prevent future browser releases from breaking sites. Personally, I’d prefer to avoid the overhead today and remove some of those elements. They can always be added later in the unlikely event that these styles become necessary.

I’m not a fan of resetting the outline style either. I’d guess that a new outline style is often left out, which could have a negative impact on your keyboard only users.

Noticeably absent from Meyer’s reset are input and textarea. Being one of the leading evangelists for standards-based, css design, it’s no surprise that he doesn’t advocate styling those elements, and instead prefers to have the browser/OS decide how they should appear.

YUI Reset Styles

body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

The YUI reset is shorter and more specific with the elements and styles it defines. You’ll notice border:0 is applied to FIELDSET,IMG and ABBR,ACRONYM separately. This approach makes the stylesheet more readable, but isn’t the best use of filesize. Some space could be saved if these styles were combined.

TH and CAPTION have text-align:left. This solves a browser inconsistency, but at the same time breaks the cascading ability of more standards-compliant browsers. Once Yahoo! is able to drop IE6 from its A-grade browser list, this style can hopefully be removed.

I also like that they set the font-weight of all headings to normal. Unless you specifically set the font-weight of headings, IE6 will use bold, while most other browsers cascade those styles.

Conclusion

Both Eric Meyer and YUI avoid modifying elements which inherently have styles in the meaning. I think was a great decision. B, I, U, S, and FONT are all named for how they should appear to the user. While these tags probably shouldn’t be used in the first place, if they are, it makes sense for them to retain their styles.

Each reset has their own set of advantages and disadvantages. For the novice coder, I would highly recommend the YUI reset. It’s easier to understand and fixes inconsistencies on all the elements you’ll probably ever use. Eric Meyer’s reset works great if you’re looking for future compatibility, and you know which styles you’ll need to override on your own.