Phone : 06 64 18 40 00 - Email : contact@multiverseconcept.com
Initialiser à zéro votre feuille de style CSS
⇒ Traduction de l’anglais : site meyerweb.com
L’objectif d’une feuille de style de réinitialisation est de réduire les incohérences des navigateurs dans des domaines tels que les hauteurs de ligne par défaut, les marges et les tailles de police des titres, etc. Le raisonnement général derrière cela a été discuté dans un article de mai 2007, si cela vous intéresse. Les styles de réinitialisation apparaissent assez souvent dans les frameworks CSS, et l’original « meyerweb reset » s’est retrouvé dans Blueprint, entre autres.
Les styles de réinitialisation présentés ici sont intentionnellement très génériques. Il n’y a pas de couleur ou d’arrière-plan par défaut pour l’élément body, par exemple. Je ne vous recommande pas particulièrement de l’utiliser tel quel dans vos propres projets. Il faut l’ajuster, le modifier, l’étendre et l’adapter à votre base de données de réinitialisation spécifique. Indiquez vos couleurs préférées pour la page, les liens, etc.
En d’autres termes, il s’agit d’un point de départ, et non d’une boîte noire autonome et intouchable.
Si vous voulez utiliser mes styles de réinitialisation, n’hésitez pas ! Tout est explicitement dans le domaine public (je dois le dire formellement, sinon les gens me posent des questions sur les licences). Vous pouvez prendre une copie du fichier pour l’utiliser et le modifier comme bon vous semble. Si vous êtes plutôt du genre à copier-coller, ou si vous voulez simplement avoir un aperçu de ce que vous obtiendrez, le voici.
/* 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;
}