Rendre son CSS compatible
Vous êtes ici : Accueil / Articles / Formations en XHTML / CSS
Cet article a été écrit par réaction aux fréquentes remarques que j’ai entendu à propos des difficultés de créer un design de site compatible avec les principaux navigateurs. Certains envisagent même de créer plusieurs feuilles de style suivant les navigateurs. Ceux qui soutiennent ces positions agissent par manque d’information. Il est très facile de créer une feuille de style compatible en ne testant le rendu que sous Mozilla Firefox. Il suffit pour cela de suivre quelques règles de base.
Attention, cet article ne traite que des différences de compatibilité entre les navigateurs et non du fonctionnement des propriétés CSS en soi. Il est donc nécessaire de posséder les bases du CSS.
Les valeurs par défaut
Les valeurs par défaut que prennent les propriétés CSS sont une des premières causes des variations d’affichage entre les navigateurs. Il convient donc de commencer sa feuille de style par le bloc suivant qui initialise les marges et le corps de la police à la même valeur.
margin: 0px;
padding: 0px;
font-size: inherit;
}
NB : La taille de la police est définie par rapport à son parent. En effet, on tient à ce que, si l’on redéfinit une taille pour un bloc, toutes les balises enfant aient le même corps de police.
Les marges et les bordures
Les bordures sont relativement compatibles entre Firefox et Internet Explorer. Cependant, il existe une petite différence d’affichage qui a souvent pour effet de perdre beaucoup de temps pour contourner le problème : Sous Internet Explorer, les bordures s’affichent à l’intérieur du bloc tandis qu’avec Firefox, elles s’affichent à l’extérieur.
Par exemple, pour le bloc suivant :
width: 200px;
border: 1px solid black;
}
La taille du div sera de 200px sous Internet Explorer et de 202px sous Firefox. Cette différence peut sembler minime, mais prenons le cas suivant : nous voulons créer le bloc suivant :
Nous allons donc créer un bloc sous l’image, dont la longueur est celle de cette dernière, avec une bordure bleue.
Le CSS est donc :
width: 150px;
height: 50px;
border: 1px solid blue;
}
Et le code html sera :
<div></div>
Sous Internet Explorer, le rendu sera parfait, mais sous Firefox, le bloc sera 2px plus long.
Si l’on réduit de 2px, cela sera au tour d’Internet Explorer d’avoir un mauvais rendu, le bloc étant trop petit de 2px.
La solution est donc la suivante :
Un bloc div a part défaut la longueur de son bloc parent. Si l’on crée 2 div, l’un spécifiant la longueur, contenant le div précisant la bordure, les dimensions seront exactement de la taille spécifiée avec les bordures, cela avec Internet Explorer et Mozilla Firefox :
width: 150px;
}
.bloc2 {
height: 50px;
border: 1px solid blue;
}
Et le code html sera
<div class="bloc1">
<div class="bloc2"></div>
</div>
Evidemment, le code est un peu plus long, mais les décalages de bordures font mauvais effet sur un site internet.
Le problème se retrouve avec la propriété padding qui agrandit la taille du bloc sous Mozilla Firefox. La solution se base sur le même principe : créer un div enfant, et définir une margin au lieu du padding du parent.
Les alignements
Cette partie ne traite pas des différences de compatibilité mais explique comment centrer un bloc avec une position absolue.
Les centrages se font avec la directive text-align : center pour centrer des éléments inline et avec margin : auto pour un bloc. Attention, il est nécessaire de définir la propriété width pour un style bloc.
Pour les balises de type bloc, le centrage ne s’effectue pas en position absolue. Il est donc nécessaire d’agir différemment :
Soit 2n la dimension en pixels du bloc. Le style css suivant aura pour effet de centrer le bloc :
position: absolute;
width: 2n px;
left: 50%;
margin-left: -n px;
}
N est bien entendu à remplacer par la valeur en question.
Les blocs flottants
Rendre des blocs flottant est chose courrante en css. Cependant, il existe une grande différence d’affichage entre Internet Explorer et Mozilla Firefox. Cela a souvent pour effet de décourager les développeurs d’utiliser cette propriété qui préfèrent afficher les blocs en position absolue. En effet, pour le css suivant :
height: 50px;
width: 150px;
float: left;
border: 1px solid red;
}
#bloc2 {
height: 60px;
width: 200px;
border: 1px solid blue;
}
Le rendu sous Internet Explorer est :
Et le rendu sous Mozilla Firefox est :
La solution ? Elle est très simple : il s’agit simplement de mettre le bloc 2 en float : left.
Puisque nous évoquons les float, il existe un rendu assez particulier qui déroute souvent les développeurs et qui concerne les dimensions d’un bloc parent d’un float :
border: 1px solid red;
}
#bloc2 {
height: 50px;
width: 150px;
border: 1px solid blue;
float: left;
}
<div id="bloc2"></div>
</div>
Le rendu est le suivant sous les différents navigateurs :
Ce qui signifie donc que le conteneur ne prends pas en compte les blocs flottants dans le calcul de sa taille. Pour les prendre en compte, il suffit de rajouter en fin de conteneur
Pour rappel, la directive clear:both signifie que le bloc se positionnera en dessous de tous les blocs flottant, or le div en lui même n’est pas flottant, par conséquent, le conteneur prendra en compte sa position et la hauteur sera la bonne.