Quel webdesigner ne s’est pas arraché les cheveux à rendre la présentation de son site web à peu près identique sur l’ensemble des navigateurs ? Malgrès les recommandations du W3C, les constructeurs de navigateurs web ont développé des applications dont le rendu des sites est spécifique. Les styles attribués par défaut aux balises sont différents d’un navigateur à l’autre. Ainsi, les marges par défaut appliquées aux listes <ol> <ul> <li> sont différentes par exemple dans Firefox et Internet Explorer.

Valeurs par défaut des balises HTML

Le W3C a préconisé une feuille de style pour attribuer des valeurs par défaut aux éléments HTML. Malheureusement pour les webdesigner, l’ensemble des navigateurs ne respectent pas à la lettre cette feuille de style et ont leur propre CSS de valeurs par défaut.
Vous trouverez sur le sujet d’excellents articles sur le site Alsacréations : Le rendu par défaut des éléments HTML et sur le site OpenWeb : Styles auteur, utilisateur et agent utilisateur : 3 raisons de lâcher prise sur votre design.
Pour observer les différences de valeurs par défaut des éléments HTML appliquées dans les navigateurs, Julien Royer d’Alsacréations, a développé un outil intéressant que vous trouverez disponible à cette adresse.

Méthode du “Reset CSS”

Certains webdesigners, pour contourner ces différences de valeurs par défaut entre navigateurs, choisissent de réinitialiser eux mêmes les éléments HTML à zéro. Cela peut être obtenu de façons très simple avec les lignes de code suivantes :

* {
    margin:0;
    padding:0;
    border:0:
    }

Le sélecteur “*” étant le sélecteur désignant tous les éléments HTML.

A charge ensuite au webdesigner de redéfinir les éléments selon ses besoins.

Cependant, cette façons de réinitialiser les éléments HTML est un peu brutale car elle détruit totalement le rendu de certains éléments comme par exemple ceux des formulaires. Il est plus judicieux de choisir les balises que l’on souhaite initialiser et de leur donner des valeurs prédéfinies. Cette méthode est appelée par les anglo-saxons le méthode du “Reset CSS”

Pour mieux comprendre de quoi il s’agit, voici quelques exemples de CSS mettant en application la méthode du “Reset CSS” :

Feuille “Reset CSS” proposée sur le site Crucial Web Hosting.

/***** Global Settings *****/

html, body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 arial, helvetica, sans-serif;
}

/***** Common Formatting *****/

h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font:2em arial, helvetica, sans-serif;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font:1.5em arial, helvetica, sans-serif;
}

h3 {
font:1em arial, helvetica, sans-serif;
font-weight:bold;
}

p, ul, ol {
margin:0;
padding:0 0 18px 0;
}

ul, ol {
list-style:none;
padding:0 0 18px 40px;
}

blockquote {
margin:22px 40px;
padding:0;
}

small {
font-size:0.85em;
}

img {
border:0;
}

sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}

sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}

acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}

/***** Links *****/

a, a:visited {
text-decoration:none;
}

/***** Forms *****/

form {
margin:0;
padding:0;
display:inline;
}

input, select, textarea {
font:1em arial, helvetica, sans-serif;
}

textarea {
line-height:1.25;
}

label {
cursor:pointer;
}

/***** Tables *****/

table {
border:0;
margin:0 0 18px 0;
padding:0;
}

        table tr td {
        padding:2px;
        }

/***** Wrapper *****/

#wrap {
width:960px;
margin:0 auto;
}

/***** Global Classes *****/

.clear                  { clear:both; }

.float-left     { float:left; }
.float-right    { float:right; }

.text-left              { text-align:left; }
.text-right     { text-align:right; }
.text-center    { text-align:center; }
.text-justify   { text-align:justify; }

.bold                   { font-weight:bold; }
.italic                 { font-style:italic; }
.underline              { border-bottom:1px solid; }
.highlight              { background:#ffc; }

.wrap                   { width:960px;margin:0 auto; }

.img-left               { float:left;margin:4px 10px 4px 0; }
.img-right              { float:right;margin:4px 0 4px 10px; }

.nopadding              { padding:0; }
.noindent               { margin-left:0;padding-left:0; }
.nobullet               { list-style:none;list-style-image:none; }both

Feuille “Reset CSS” proposée par Eric 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: "" "";
}

Feuille “Reset CSS” proposée par Christian Montoya.

/* =INITIAL
   v2.1, by Faruk Ates - www.kurafire.net
   Addendum by Robert Nyman - www.robertnyman.com
   Addition by Christian Montoya - www.christianmontoya.net */

/* Neutralize styling:
   Elements we want to clean out entirely: */
html, body, form, fieldset {
        margin: 0;
        padding: 0;
        font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}

/* Neutralize styling:
   Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
        margin: 1em 0;
        padding: 0;
}

/* Apply left margin:
   Only to the few elements that need it: */
li, dd, blockquote {
        margin-left: 1em;
}

/* Miscellaneous conveniences: */
form label {
        cursor: pointer;
}
fieldset {
        border: none;
}
input, select, textarea {
        font-size: 100%;
                font-family: inherit;
}

Pour ou contre la méthode “Reset CSS”

La méthode du “Reset CSS” est utilisée par de nombreux webdesigner dont je fais partie, cependant, elle ne fait pas l’unanimité. C’est le cas notamment du collectif Alsacréations qui à ce propos dit dans son article Le rendu par défaut des éléménts HTML :

“Cette méthode impose de repréciser, dans la feuille de style, des marges et padding pour tous les éléments qui le nécessitent, sous peine d’obtenir un document peu lisible. Une opération qui non seulement prend du temps, mais en plus n’est pas fiable : on risque d’oublier de redonner des marges à certains éléments, et de se retrouver avec un rendu problématique sur telle ou telle page du site.
Mais surtout, cette technique est largement inutile ! Car, le plus souvent, les différences de rendu et le caractère « imprévisible » des marges par défaut ne sont pas liés aux styles par défaut, mais plutôt :
à des bugs des navigateurs ;
à une incompréhension, du côté du concepteur web, de certains mécanismes de base comme la fusion des marges entre un élément et son bloc parent.
…”

Le collectif Alsacréations préconise donc d’identifier les différences d’affichage des navigateurs qui sont peux nombreuses et de d’en tenir compte dans le développement. Pour cela Julien Royer a développé un outil qui permet d’observer les différences de rendu par défaut des navigateurs.

Pour ma part j’utilise la méthode du “Reset CSS”. Je redéfinie les éléments XHTML en reprenant la feuille CSS de rendu initial préconisé par le W3C pour les développeurs de navigateurs.

Je mets en commentaires certaines lignes de cette feuille de style et redéfinie les éléments qui m’intéressent.

Je ne prendrais pas position sur le bien fondé de l’une où l’autre des ces méthodes, à vous de voir la solution qui semble la plus adapté à votre façons de travailler.
Par contre je n’hésite pas à dénoncer des navigateurs comme Internet Explorer qui respectent peu les préconisations du W3C et pourrissent la vie des webdesigner.