WebCssDesign

Je vous présente ici le reset CSS d’Eric Meyer avec quelques petites explications. En effet, chaque webdesigner développe au fil du temps son prôpre reset CSS, celui là est présenté ici en guide d’exemple.

Vous connaissez surement Eric Meyer connu en tant de « gourou du css » avec livre sur le sujet ou son blog http://meyerweb.com/.

Le Reset CSS

Le reset CSS est une remise à zéro des valeurs par défaut des navigateurs.
Ainsi, on écrase les interprétations de base des navigateurs pour repartir sur une base commune à tous…

Le reset CSS nous permet donc de gommer une bonne partie des problèmes de compatibilité entre navigateurs (ne parlons pas de IE6 qui est à lui seul un prôblème). Tout ça sans hack CSS, ou sans commentaires conditionnels, simplement grâce à une déclaration exhausitve des propriété CSS de base d’un fichier HTML.

Les propriétés margin et padding ne sont pas traitées de la même manière par tous les navigateurs.
En plus d’avoir une interprétation de base de la taille et de la hauteur différente des autres navigateurs, Internet Explorer ne comprend pas et ne prend pas en compte la propriété CSS « box-sizing ».

Et voila le code:

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,
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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

La source : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Pour d'autres exemples de reset CSS je vous conseille cet article : www.css4design.com

Catégories: Css
Tags: Css, reset css