CSS : Poser les bases

Parfois avoir une base qui définit ses styles (css) c’est bien. Voici comment je fais dans la pratique pour remettre à plat les styles par défaut des navigateurs et pour les redéfinir selon mes besoins.

Reset

Le but du reset css est de supprimer tous les styles par défaut, enfin surtout ceux qui définissent des bordures, des décalages ou des tailles. Il existe déjà pas mal de reset css notamment ceux d’Eric Meyer et de Yahoo! J’ai pris celui de Yahoo! YUI et je m’en suis servi de base :

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
img,abbr,acronym{border:0;}

Typographie

Pour gérer la typographie, à mon sens le font.css de Yui convient parfaitement, il permet de :

  • Gère correctement les tailles des polices et des lignes.
  • Dégrade correctement l’utilisation des famille de polices pour les différents OS,
  • Gère correctement les modifications des paramètres par défaut des navigateurs.

Il suffit par la suite de définir ses tailles en pourcentage et non plus en pixel, voici le tableau des correspondances à utiliser :

Pour une taille en pixels Utiliser ce pourcentage
10 77
11 85
12 93
13 100
14 108
15 116
16 123.1
17 131
18 138.5
19 146.5
20 153.9
21 161.6
22 167
23 174
24 182
25 189
26 197
body{font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
pre, code {font:115% monospace;*font-size:100%;}
body * {line-height:1.22em;}

Pour plus d’informations sur Yui Fonts voir http://developer.yahoo.com/yui/fonts/

Styles par défaut

Il ne reste plus qu’a définir les styles par défaut, ceux dont vous êtes sûr qu’ils vous seront utiles comme par exemple la taille des titres ou les espaces après les paragraphes :

Taille est espacement des titres :

h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}
h1,h2,h3,h4,h5,h6{margin-bottom:1em;}

Listes :

ol li{list-style:decimal outside;}
dl dd{margin-left:1em;}

Tableaux :

th,td{border:1px solid #000;padding:.5em;}
th{font-weight:bold;text-align:center;}

Abréviations et acronymes :

abbr,acronym{border-bottom:1px dotted #000;cursor:help;}

Espace après les blocs :

blockquote,p,fieldset,table,pre{margin-bottom:1em;}

Le mot de la fin

Il est fort possible que cette redéfinition ne vous corresponde pas telle qu’elle, d’ailleurs le but n’est pas de faire une redéfinition des styles qui puisse correspondre à tous les cas mais plutôt de vous servir de base de travail.

N’hésitez pas à utiliser, modifier et partager votre expérience ici-même en nous laissant vos commentaires.

Voici le css final complet, c’est plus simple pour faire un copier-coller :

 
body{font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
pre, code {font:115% monospace;*font-size:100%;}
body * {line-height:1.22em;}
h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}
h1,h2,h3,h4,h5,h6{margin-bottom:1em;}
ol li{list-style:decimal outside;}
dl dd{margin-left:1em;}
th,td{border:1px solid #000;padding:.5em;}
th{font-weight:bold;text-align:center;}
abbr,acronym{border-bottom:1px dotted #000;cursor:help;}
blockquote,p,fieldset,table,pre{margin-bottom:1em;}
 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *