Couleur des bordures et propriétés raccourci

Dans la série enfonçage de porte ouverte ou « ça paraît évident mais ça va mieux en le disant », une petite subtilité dans la définition des bordures d'éléments en CSS, plus particulièrement leur couleur.

Nous avons deux classes, portées par des paragraphes dont les styles diffèrent, entre autre, par la nature des bordures ; la couleur est elle identique, rouge, et nous souhaitons l'associer directement aux paragraphes car nous en aurons sans doute besoin dans d'autres cas :

<p class="simple">Lorem ipsum</p>
<p class="double">dolor sit amet</p>
Code HTML de test.
.simple {
    border: 1px solid;
}
.double {
    border: 3px double;
}
p {
    border-color: #f00;
}
Règles de styles à appliquer au test.

Lorem ipsum

dolor sit amet

Rendu du test.

Nous n'obtenons pas vraiment le résultat escompté : les bordures des 2 paragraphes sont noires au lieu d'être rouge. C'est un cas de figure assez intéressant car il fait appel à plusieurs notions de base des CSS.

La propriété border est une « propriété raccourci » qui permet de déclarer en une seule fois les 3 propriétés caractérisant les bordures : border-width, border-style et border-color(1). Si cette dernière n'est pas spécifiée, les navigateurs web doivent utiliser la couleur définie par la propriété color. Dans notre exemple, cette couleur est le noir (ou #333 pour être plus précis)(2).

Bien. Mais nous déclarons aussi une couleur de bordure rouge pour les paragraphes ; pourquoi celle-ci n'est-elle pas utilisée ? Simplement parce que le poids de cette règle est inférieure à celle définit pour les classes.

Comment résoudre le problème ? On pourrait évidemment déclarer la couleur de bordure sur ces deux classes, ou alors rendre importante la déclaration associée aux paragraphes :

/* Appliquer la couleur de bordure aux classes */
.simple, .double {
    border-color: #f00;
}
/* OU rendre la couleur de bordure importante */
p {
    border-color: #f00 !important;
}
Nouvelles règles CSS pour rendre les bordures rouge.

C'est effectivement une solution. Cependant, nous perdons un style de couleur sur les paragraphes dans un cas et forçons une règle qui peut être difficile à surcharger dans l'autre. Une troisième solution consiste à abandonner l'écriture de la propriété raccourci et à revenir à des propriétés plus spécifiques :

.simple {
    border-width: 1px;
    border-style: solid;
}
.double {
    border-width: 3px;
    border-style: double;
}
p {
    border-color: #f00;
}
Règles CSS originales corrigées.

Lorem ipsum

dolor sit amet

Rendu du test avec les règles corrigées.

L'écriture est moins élégante mais elle permet d'obtenir ce que l'on souhaite. On conseille souvent d'utiliser les propriétés raccourcis pour alléger / simplifier l'écriture des feuilles de styles ; dans certains cas, les « dommages collatéraux » sont cependant plus importants que les bénéfices que l'on peut en retirer.

BOS, Bert ; ÇELIK, Tantek ; HICKSON, Ian, et al.. CSS 2.1 Specification. W3C, . 8.5 Border properties

BOS, Bert ; ÇELIK, Tantek ; HICKSON, Ian, et al.. CSS 2.1 Specification. W3C, . 6.4.3 Calculating a selector's specificity