Cet article a été publié sur le site graphuccino.com
Si vous vous intéressez un peu aux CSS, vous avez certainement déjà entendu parler d’Éric Meyer. En plus d’écrire des livres, le « gourou des CSS » tient un excellent blog :
Sur ce blog justement, Éric Meyer a publié son reset CSS. Bien sûr, ça vaut le coup d’oeil :
Le reset CSS d’Éric Meyer
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: "" "";
}
Petite Explication :
Le reset CSS est une remise à plat qui tente d’être exhaustive des propriétés CSS des balises HTML. 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 toutes une bonne partie des problèmes de compatibilité entre navigateurs (les problèmes CSS bien sûr, ne vous attendez pas à voir ie6 appliquer les dégradés de transparence sur vos png). 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.
Pour aller plus loin :
Éric Meyer n’oserait pas, mais nous si ! Nous allons rendre notre petit reset CSS invalide selon le w3c… L’intérêt ? Ajouter une nouvelle propriété à nos éléments HTML, invalide car faisant partie des spécifications en cours de discussion pour les css 3, mais bien utile dès aujourd’hui, pour vraiment repartir de zéro et gommer les décalages de blocs d’un navigateur à l’autre. Ajoutez si vous l’osez ces quelques lignes dans la première déclaration de propriétés CSS du reset d’Éric Meyer (entre les premiers crochets) :
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-box-sizing:border-box;
Ces propriétés CSS indiqueront aux différents navigateurs (1ère ligne pour Firefox, 2ème ligne pour Opera, et 3ème ligne pour Safari) qu’ils devront calculer la taille et la hauteur des éléments html de la même façon qu’Internet Explorer. Non pas que l’interprétation d’Internet Explorer soit particulièrement remarquable… simplement, comme souvent, c’est Internet Explorer qui n’en fait qu’à sa tête : 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 »… Impossible donc d’accorder tout les navigateurs sans tous les ramener à l’interprétation d’Internet Explorer. Un choix à faire en somme !
Pour revenir au box-sizing en lui même : cette propriété CSS spécifie au navigateur comment il doit calculer la taille des éléments.
Voici les différentes valeurs possibles :
content-box (la taille inclut le padding)
border-box (la taille inclut le padding ET les bordures)
padding-box (la taille n’inclut NI le padding, NI les bordures)
Source :
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Tags : css
