Monday, March 1, 2010

Do You Use Reset.CSS?

Browser compatibility issues with how they render HTML differently is a common problem for web designers and developers. Reset.CSS, if you are not already using it, can save some time from the CSS editing process.
What is Reset.CSS?
Reset.CSS is simply a collection of CSS styles which removes and neutralizes the inconsistent default styling of HTML elements.
By using Reset.CSS, you simply clear the default values of web browsers and you wont need to alter these differences for every element again.
There are 2 popular Reset.CSS styles:
  • YUI Reset CSS
  • Eric meyer Reset CSS
First, the Yahoo version:

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



Now, Eric's version:

abbr, acronym {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
address,cite,code,dfn,em,strong,var {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
blockquote {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
quotes: "" "";
}
body {
 margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
line-height: 1;
color: black;
background: white;
}
caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
text-align: left;
font-weight: normal;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
img {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
ol, ul {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
border-collapse: collapse;
border-spacing: 0;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
text-align: left;
font-weight: normal;
}
th {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
text-align: left;
font-weight: normal;
}
q:before, q:after {
content: "";
}
div,dl,dt,dd,li,pre,form, p {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
/* THESE STYLE ONLY EXIST IN MEYER'S VERSION */
/* remember to define focus styles! */
:focus {
outline: 0;
}
blockquote:before, blockquote:after {
 content: "";
}
html, applet, object, span, iframe, a, big,
del, font, ins, kbd, s, samp, 
small, strike, sub, sup, tt,
label, legend, 
tbody, tfoot, thead, tr {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
q {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
quotes: "" "";
}

Every of us have different needs and approach. So i think every serious CSS coder should have CSS-reset system, written by himself. Hope this will help you guys who are new with css.

1 comment: