My Pre-HTML5 & HTML5 CSS Reset

These resets were a mix of my own stuff, YUI and various others I mashed in during development

Resets, the necessary evil

Some people will say that you don’t really need a reset, and that it creates extra work; unfortunately this is only true in the case of tech-sites and small sites that don’t need to accommodate ‘every browser’.

In large scale web development there is still a large, cash driven, corporate need to create sites that work in every IE browser from 6 > 9 (preview), and then the others such as Safari Mac, Safari PC (which isn’t always the same thanks to the way forms are rendered), Chrome, Firefox, Opera, Konqueror. Most of these have varying default styles and the simplest way to speed up the development process is to take a step back and clear the slate with a clear and concise css reset.

In the case of LARGE scale web development and Web Application development its also worth looking at using something like the OOP-CSS concept in order to keep your code lean. Note though that OOP-CSS isn’t a silver bullet nor is a reset, if you don’t understand ‘why’ you need a reset, its probably a good idea to get a proper grounding of CSS rather than wondering into a world of hurt.

Lets get on with the resets (probably all you came for, rather than a lecture)

HTML4/XHTML1/1.1 CSS Reset

html{ font-size:16px;color:#000; background-color:#fff; } /* Set BASE Font Size */
/* Reset <CMcKee : http://wp.me/psAUo-ap > */
*,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0px;}
table{border-collapse:collapse;border-spacing:0}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400}
ol,ul,li{list-style:none}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
q:before,q:after{content:''}
fieldset,img,abbr,acronym{border:none;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}

HTML5 CSS Reset

html{ font-size:16px;color:#000; background-color:#fff; } /* Set BASE Font Size */
/* HTML5Reset <CMcKee : http://wp.me/psAUo-ap > */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,a,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,table,caption,tbody,thead,tr,th,td,tfoot,time,mark,audio,video {
background:transparent;
border:0;
font-size:100%;
margin:0;
outline:0;
padding:0px;
vertical-align:baseline
}
body { line-height:1}
header,hgroup,nav,menu,section,article,aside,canvas,details,figcaption,figure,summary,footer {display:block}
nav ul {list-style:none}
q,blockquote {quotes:none}
q:before,q:after,blockquote:before,blockquote:after {content:none}
del {text-decoration:line-through}
a {vertical-align:baseline}
hr {
border:0;
border-top:1px solid #ccc;
display:block;
height:1px;
margin:1em 0;
padding:0
}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;vertical-align:middle}
input,textarea,select{*font-size:100%;}
table {
border-collapse:collapse;
border-spacing:0
}
abbr[title],dfn[title] {
border-bottom:1px dotted #000;
cursor:help
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none
}
fieldset,img,abbr,acronym{border:none;font-variant:normal;}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:500
}

Of course compress these before use using something like http://www.cleancss.com/

My standard HTML4 template file at work is like this… (note we use SVN the $xx$ populate themselves using SVN Properties -> Add Keywords)

@charset "utf-8";
/*
 Document : global.css
 $LastChangedRevision: 0 $
 $LastChangedBy: chrismckee $
 $LastChangedDate: 2010-05-21 11:17:01 +0100 (Fri, 21 May 2010) $
*/
html{ font-size:16px;color:#000; background-color:#fff; } /* Set BASE Font Size */
/* Reset <chrismckee> */
*,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0px;}
table{border-collapse:collapse;border-spacing:0}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400}
ol,ul,li{list-style:none}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
q:before,q:after{content:''}
fieldset,img,abbr,acronym{border:none;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
 
/*@-GLOBAL---*/
	/*#-Structure--*/
	/*#-Typography--*/
	/*#-Forms--*/
	/*#-Tables--*/
/*@-HEADER---*/
/*@-NAV---*/
	/*#-Primary--*/       
	/*#-Secondary--*/  
	/*#-Content---*/  
/*@-SIDEBAR---*/  
/*@-FOOTER---*/

And the global.css should ONLY contain items that are in use on multiple, if not all, pages. Each page then has its own stylesheet (named after the page, ala home.css for the homepage) which adds the css required only on that page.
Any IE6/7 specific overrides or hacks are restricted to IF IE tags and their own stylesheet…
http://www.quirksmode.org/css/condcom.html

One thought on “My Pre-HTML5 & HTML5 CSS Reset”

Comments are closed.