[CSS] Piqure de rappel : ligne horizontale & opacité

On se retrouve souvent à devoir insérer, dans un même sélecteur, plusieurs propriétés CSS avec des valeurs adaptées, uniquement pour assurer une compatibilité inter navigateurs. Deux exemples qui me viennent à l’esprit et que je poste ici, ne serait-ce que pour m’en servir comme aide-mémoire…

Styler simplement une ligne horizontale de type <hr />
Afin de styler correctement l’épaisseur et la couleur d’une simple ligne horizontale via les CSS, il est nécessaire de modifier plusieurs propriétés. Chaque navigateur utilisant ou bien la bordure de l’élément, ou bien le fond de couleur de l’élément, ou parfois même les deux, nous allons modifier 4 propriétés pour que les différents navigateurs du marché interprètent notre ligne horizontale de la même manière.

hr {
     border: 0px;
     height: 1px;
     color: red;
     background-color: red;
}

Brève explication, histoire de :

1. on remet les bordures à leur place en les mettant à zéro ;
2. on applique une hauteur de 1 pixel à notre ligne horizontale ;
3. on définit enfin une couleur de fond et de contenu (ici la couleur rouge).

Appliquer une opacité à un élément
L’opacité ne poserait pas de problème si l’on pouvait utiliser tout bêtement la propriété opacity. Evidemment, la gestion de cette propriété dépend des navigateurs et encore une fois il est nécessaire d’utiliser plusieurs variantes pour un même résultat avec une compatibilité cross-browser.

.element {
     opacity: 0.65;
     -moz-opacity: 0.65;
     filter: alpha(opacity=65);
}

Plus la valeur est basse, plus l’élément sera opaque. Plus la valeur est haute, plus l’élement sera limpide.

1. opacity : permet d’indiquer une valeur sur une échelle d’opacité allant de 0 à 1 ;
2. -moz-opacity : identique à opacity mais permet une compatibilité avec les navigateurs Mozilla ;
3. filter: alpha(opacity=x) : pour Internet Explorer, x est une valeur d’opacité entre 0 et 100.

Edit :

• la propriété -moz-opacity n’est utile que pour assurer une rétro-compatibilité avec les versions de Mozilla antérieures à la 1.7 ;
• l’utilisation de filter: alpha(opacity=x) reste nécessaire pour une compatibilité avec Internet Explorer dans sa version 8 (merci Paul).