Grammaire avancée du CSS

Regroupement des sélecteurs

Vous pouvez regrouper les sélecteurs, de sorte que les sélecteurs regroupés peuvent partager les mêmes déclarations. Séparez les sélecteurs à regrouper par des virgules. Dans l'exemple suivant, nous avons regroupé tous les éléments de titre. Tous les éléments de titre sont verts.

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

Héritage et problèmes

Selon CSS, les éléments enfants héritent des attributs de l'élément parent. Mais cela ne fonctionne pas toujours ainsi. Regardons cette règle :

body {
     font-family: Verdana, sans-serif;
     }

Selon cette règle, l'élément body du site utilisera la police Verdana (si le système de l'visitateur contient cette police).

Grâce à l'héritage CSS, les éléments enfants hériteront des attributs du niveau supérieur (dans cet exemple, c'est le body) (ces éléments tels que p, td, ul, ol, ul, li, dl, dt et dd). Il n'est pas nécessaire de règles supplémentaires, tous les éléments enfants de body devraient afficher la police Verdana, et cela vaut également pour les éléments enfants des éléments enfants. Et dans la plupart des navigateurs modernes, c'est effectivement le cas.

Mais dans les années sanglantes de la bataille des navigateurs, cela ne se produirait peut-être pas, car à l'époque, le soutien aux normes n'était pas la priorité des entreprises. Par exemple, Netscape 4 ne supporte pas l'héritage, il ignore non seulement l'héritage, mais aussi les règles appliquées à l'élément body. IE/Windows jusqu'à IE6 existait également des problèmes associés, les styles de police dans les tableaux seraient ignorés. Alors, que faire ?

Traitez Netscape 4 avec bienveillance

Heureusement, vous pouvez traiter le problème que les navigateurs anciens ne peuvent pas comprendre l'héritage en utilisant la règle de redondance que nous appelons "Be Kind to Netscape 4".

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

Les navigateurs 4.0 ne peuvent pas comprendre l'héritage, mais ils peuvent comprendre les sélecteurs de groupe. Bien que cela puisse gaspiller un peu de bande passante des utilisateurs, il est nécessaire de le faire pour la prise en charge des utilisateurs Netscape 4.

L'héritage est-il une malédiction ?

Si vous ne souhaitez pas que la police "Verdana, sans-serif" soit héritée par tous les éléments enfants, que faire ? Par exemple, si vous souhaitez que le texte des paragraphes soit Times. Pas de problème. Créez une règle spéciale pour p, ainsi elle se détachera des règles du parent :

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }