Skip to content

Mon Reset StyleSheet

Soyez sociable ! Partagez :
  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Le Reset StyleSheet est, comme son nom l’indique, une feuille de style permettant de remettre à zéro tous les paramètres de style d’une page pour tous les navigateurs.

CSS3

A quoi sert un reset stylesheet ?

Les navigateurs ont leurs paramètres par défaut de certaines balises.

Par exemple (je ne certifie pas ses valeurs), Chrome va donner un padding 5px aux div alors que Mozilla va en donner 8px !

Rien de bien méchant, mais c’est très pénible quand on créé un design car on est obligé pour chaque élément de préciser toutes les caractéristiques que l’on souhaite, également les margin:0; et les padding:0.

C’est pour cela que l’on créé un reset stylesheet.

Mon reset stylesheet :

Je vous donne donc mon reset stylesheet, il sagit tout simplement de mettre toutes les valeurs à 0 !

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

Voilà !

 

N’hésitez pas à commenter et à donner votre avis sur ce reset stylesheet

Soyez Sociable ! Partagez !
Published inDiversTutoriel
banner