Reset

 

Les navigateurs n'ont pas un comportement identique pour des bien des choses, voici un premier élément de correction pour stabiliser le rendu de votre page indépendamment du navigateur.

 

Entrons dans le vif du Sujet

I Reset : pourquoi réinitialiser les

Les navigateurs n'ont pas un comportement identique pour des bien des choses :

  1. La hauteur de la ligne de défaut,
  2. les marges et
  3. les tailles de police de rubriques,
  4. et ainsi de suite. 

D'où l'idée de partir d'une réinitialisation mettant tous les navigateurs à égalité.

Nous allons examiner ensemble le reset d'Eric Meyer.

Ce reset est réemployé par le framework  Blueprint , (entre autres) que nous étudierons par le détail dans une prochaine section.

Ce reset n'est pas fait pour être utilisé "clef en main". Eric Meyer conseille de le modifier pour l'étendre.

Ce reset est explicitement dans le domaine public. Vous pouvez récupérer une copie du fichier  ici.

II Examinons ensemble le reset de Eric Meyer.

/ * Http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   Licence: aucune (domaine public)
* /

html, body, div, durée, applet, objet, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pré,
un, en abrégé, acronyme, adresse, grand, citer, code,
del, dfn, em, img, ins, kbd, q, s, samp,
petit, grève, fort, sous, sup, tt, var,
b, u, i, centre,
dl, dt, dd, ol, ul, li,
fieldset, la forme, l'étiquette, la légende,
table, légende, tbody, tfoot, thead, tr, th, td,
article, de côté, de la toile, des détails, intégrer, 
figure, figcaption, pied de page, en-tête, hgroup, 
menu, navigation, production, rubis, article, résumé,
temps, marque, audio, vidéo {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	police: hériter;
	vertical-align: baseline;
}
/ * Réinitialisation HTML5 affichage rôle pour les anciens navigateurs * /
article, de côté, de détails, figcaption, figure, 
pied de page, en-tête, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	cite: none;
}
blockquote: avant, blockquote: après,
q: avant, q: après {
	contenu: '';
	contenu: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Poor Man’s Reset

La "poor man’s reset" réinitialise les margin, padding, font-size, et borders du  html et du  body. Il n'y a plus de dépendance avec le sélecteur universel * , mais il est égalemet plus prudent.

html, body {
	padding: 0; 
    margin: 0;
}  
html {
	font-size: 1em;
}  
body {
	font-size: 100%;
}  
a img, :link img, :visited img {
	border: 0;
}

III Références

http://www.alsacreations.com/astuce/lire/36-reset-css.html (Un bon article)

http://meyerweb.com/eric/tools/css/reset/

http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous