26
oct.

Le reset css, Quésako ?

Qui ne s'est jamais tapé la tête contre les murs en essayant d'intégrer un design cross-browser (identique à tous les navigateurs) ? Si vous êtes intégrateur vous avez surement déjà rencontré ce type de soucis ou vous avez surement eu un retour d'un graphiste ou d'un D.A. pointilleux qui vous dis :

"Il y  a une petite différence de marges entre ces deux blocs sur IE7 et Firefox... tu peux me corriger celà s'il te plait ?"

Et là, panique à bord. On bidouille pendant des heures pour essayer de rectifier le tir. Ça marche à peu près mais la mise en page explose sur d'autres blocs. Et bien tout ceci aurait pu être évité avec une simple et rapide bonne pratique : le reset css.

On oublie tout et on repart sur de bonnes bases ok ?

Par défaut, chaque élément HTML a des propriétés css définies; or chaque navigateur ne définit pas de la même manière ces propriétés css. Ce sont ces différences (qui peuvent paraitre insignifiantes lorsque l'on commence à intégrer) qui, ajoutées les unes à la suite des autres font qu'à la fin de notre intégration les marges sont différentes, une colonne de contenu passe sous une autre alors que sur Firefox tout est en ordre,... Le reset css est donc un petit bout de code css que le navigateur va charger en premier. On va placer ce bout de code dans une feuille de style à part ou bien l'inclure en haut de fichier sur notre css principale. Je mets ci-dessous celle que j'utilise dans la plupart de mes projets; il s'agit d'un reset écrit par Eric Mayer. Attention toutefois à bien redéfinir les styles que vous aller utiliser. Par exemple, si vous appliquer le reset ci-dessous vous observerez que tout les titres hn (h1, h2, ...) n'ont plus aucune marge ni padding, sont de la même taille de typo, ...

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}