Comment utiliser la spécificité en CSS : Ce qu'il faut savoir

En dehors des Floats, la spécificité en CSS est l'un des concepts les plus difficiles à comprendre au sujet des feuilles de style en cascade (CSS). Les différents poids des sélecteurs (ex : h1, p, .bonjour, #bonjour,...) est généralement la raison pour laquelle vos règles CSS ne s'appliquent pas à certains éléments.

Afin de minimiser le temps de recherche des bugs, vous devez comprendre comment les navigateurs interprètent votre code CSS. Et pour comprendre cela, vous devez avoir une bonne compréhension de la façon dont fonctionne la spécificité. Dans la plupart des cas, les problèmes sont causés par le simple fait que quelque part entre vos règles CSS, vous avez défini un sélecteur plus spécifique qu'un autre.

La spécificité en CSS n'est pas simple. Cependant, il existe des méthodes pour l'expliquer de manière simple et intuitive. Et c'est justement le sujet de cet article.

Jetons un œil sur quelques problèmes importants liés à la spécificité en CSS ainsi que des exemples, des règles, des principes, des solutions et des ressources.

Qu'est-ce que la spécificité ?

• La spécificité détermine quelles règles CSS sont appliquées par les navigateurs. “La spécificité est un type de pondération qui a une incidence sur la façon dont les règles de votre feuille de style en cascade (CSS) sont affichées.”
• Un sélecteur de spécificité est un processus utilisé pour déterminer quelles règles sont prioritaires en CSS lorsque plusieurs règles peuvent être appliquées à un même élément dans le balisage
• Chaque sélecteur a sa propre spécificité. "Toutes les règles CSS engendrent une notation de la spécificité indépendamment du type de sélecteur, bien que la pondération qui est donnée à chaque type de sélecteur varie et finira par affecter le style de vos documents Web."
• Si deux sélecteurs s'appliquent au même élément, celui qui a la plus grande spécificité l'emporte.

Hiérarchie des spécificités

• Chaque sélecteur a sa place dans la hiérarchie de la spécificité. Il existe quatre catégories distinctes qui définissent le niveau de spécificité d'un sélecteur donné :

  1. Les styles Inline (Présence du style dans le document et non dans la feuille CSS).
  Un style inline est situé à l'intérieur de votre document XHTML. Il est rattaché directement à l'élément à styliser. Par exemple <h1 style="color: #fff;">

  2. Les IDs
  Un ID est un identifiant pour les éléments de vos pages, tels que #div.

  3. Les classes, attributs et pseudo-classes.
  Ce groupe comprend les .classes, [attributes] et les pseudo-classes telles que :hover, :focus etc.

  4. Les éléments et pseudo-éléments.
  Par exemple : :before et :after.

Comment mesurer la spécificité ?

• Méthode pour mesure la spécificité. Commencez à 0, ajoutez 1000 pour chaque attribut de style, ajoutez 100 pour chaque ID, ajoutez 10 pour chaque attribut, classe ou pseudo-classe, ajoutez 1 pour chaque nom d'élément ou pseudo-élément. Donc, dans

  body #content .data img:hover

  la valeur de spécificité serait 122 (0,1,2,2 ou 0122) : 100 pour #content, 10 pour .data, 10 pour :hover, 1 pour body et 1 pour img.

• Autre méthode : "Comptez le nombre d'attributs d'ID dans le sélecteur (= a). Comptez le nombre d'autres attributs et pseudo-classes dans le sélecteur (= b). Comptez le nombre de noms d'éléments et pseudo-éléments dans le sélecteur (= c). La concaténation des trois nombres a-b-c vous donne la spécificité.
• Pour vous aider à mieux comprendre le calcul de la spécificité, voici un graphique basé sur les valeurs de spécificité (ou puissance de Sith) (Merci à http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html). Chaque personnage (sélecteur) est caractérisé par sa propre puissance de Sith (valeur de spécificité) selon sa puissance dans les voies du Côté Obscur. Un storm trooper est moins puissant que Vader qui est à son tour moins puissant que l'Empereur.

Exemples de Spécificité

Il est plus facile de calculer la spécificité en utilisant la première méthode. Voici un cas pratique.

Spécificité: Principes de base

• Spécificités égales : la dernière règle est celle qui est prise en compte. Si vous avez écrit à deux reprises la même règle dans votre feuille de style externe, la règle définie en dernier dans votre feuille de style est plus proche de l'élément à styliser. C'est donc elle la plus spécifique et celle qui sera appliquée.
  Lorsque des sélecteurs ont la même valeur de spécificité, comme par exemple :

  #content h1 {
  padding: 5px;
  }
  #content h1 {
  padding: 10px;
  }

  où les deux règles ont la spécificité 0, 1, 0, 1, la dernière règle est toujours appliquée.

• Spécificités différentes : la règle la plus spécifique est celle qui est prise en compte. Un sélecteur peut contenir un ou plusieurs points de référence. Plus la cote de spécificité de ces points de référence est importante, plus votre règle est spécifique. Les navigateurs affichent les règles les plus spécifiques.

Règles de spécificité

• Les règles avec des sélecteurs plus spécifiques ont une plus grande spécificité. Plus les références sont spécifiques dans votre sélecteur, plus la spécificité de la règle sera importante.
• Les sélecteurs d'ID ont une spécificité plus élevée que les sélecteurs d'attribut. Par exemple, en HTML, le sélecteur #p123 est plus spécifique que [id=p123]. Exemple :

  A:
  a#a-02 { background-image : url(n.gif); }
  and
  B:
  a[id="a-02"] { background-image : url(n.png); }

  la première règle (A) est plus spécifique que la seconde (B).

• Les sélecteurs contextuels sont plus spécifiques qu'un sélecteur d'élément unique. Cela vaut également pour d'autres sélecteurs impliquant plus d'un sélecteur d'élément HTML.

• La feuille de style intégrée est plus proche de l'élément à styliser. Ainsi, dans la situation suivante ...

  CSS:

  #content h1 {
  padding: 5px;
  }

  (X)HTML:

  <style type="text/css">
  #content h1 {
  padding: 10px;
  }
  </style>

  ... la dernière règle sera appliquée.

• La dernière règle définie remplace toutes les règles précédentes. Par exemple, en prenant en compte ces deux règles,

  p { color: red; background: yellow }
  p { color: green }

  les paragraphes apparaissent dans en vert. Ils ont aussi un fond jaune puisque la première règle n'est pas complètement ignorée.

• Un sélecteur de classe bat n'importe quel nombre de sélecteurs d'élément..introduction bat html body div div h2 p.
• Le sélecteur universel a une spécificité de 0, 0, 0, 0.*, body * et les sélecteurs similaires ont une spécificité de zéro. Les valeurs héritées ont également une spécificité de 0, 0, 0, 0.

Exemple de spécificité

• Prenons trois fragments de code :

  A: h1
  B: #content h1
  C: <div id="content">
  <h1 style="color: #fff">Headline</h1>
  </div>

  La spécificité de A est de 0,0,0,1 (un élément), la spécificité de B est de 0,1,0,1 (un point en référence à l'ID et un élément), la spécificité de C est de 1,0,0,0, puisque c'est un style inline.

  Ainsi,

  0001 = 1 < 0101 = 101 < 1000,

  la troisième règle a un plus grand degré de spécificité et sera donc appliquée. Si la troisième règle n'existait pas, la deuxième règle aurait été appliquée.

La spécificité en pratique

• Utilisez LVHA pour le style des liens.
  Afin de s'assurer que vos différents styles de liens sont appliqués, il est préférable de mettre vos styles dans l'ordre link-visited-hover-active (ou LVHA)
• N'utilisez jamais !important.
  Si vous rencontrez des problèmes de spécificité, il y a quelques moyens rapides pour les résoudre. Tout d'abord, éviter !important. La déclaration !important remplace les déclarations normales, mais elle est non structurée et rarement nécessaire dans la feuille de style d'un auteur.
• Utilisez id pour rendre une règle plus spécifique.
  Remplacer a.highlight par ul#blogroll a.highlight change la spécificité de 0, 0, 1, 1 à 0, 1, 1, 2.
• Réduisez le nombre de sélecteur.
  Utiliser le moins de sélecteurs possible pour styliser un élément.

Spécificité CSS : outils et ressources

• CSS Spécificité pour les joueurs de poker
  Si vous n'êtes pas du monde de la programmation et que le CSS vous semble un peu confus, peut-être que cette analogie pourra vous aider à mieux comprendre certains concepts. Imaginez les règles CSS comme des mains de poker. La meilleure main détermine le style d'un élément.
• Calculateur de spécificité en CSS
  Calcule la spécificité d'un sélecteur donné.

Lexique de base du CSS

• Un sélecteur est l'élément qui est lié à un style particulier. Par exemple p dans

  p { padding: 10px; }

• Un sélecteur de classe est un sélecteur qui utilise une classe définie (plusieurs par page). Par exemple p.section dans

  p.section { padding: 10px; }

• Un sélecteur d'ID est un sélecteur qui utilise un identificateur associé individuellement (un par page). Par exemple, p#section dans

  CSS: #section { padding: 10px; }
  (X)HTML: <p id="section">Text</>

• Un sélecteur contextuel est un sélecteur qui définit un ordre en cascade précis pour la règle. Par exemple p span dans

  p span { font-style: italic; }

  définit que tous les éléments span dans les éléments p doivent être en italique.

• Un sélecteur d'attribut fait correspondre les éléments qui ont un attribut spécifique ou sa valeur. Par exemple p span dans

  p[title] { font-weight: bold; }

  correspond à tous les éléments p qui ont un attribut title.

• Les Pseudo-classes sont des classes spéciales qui sont utilisées pour définir le comportement des éléments HTML. Elles sont utilisées pour ajouter des effets spéciaux à certains sélecteurs, qui sont appliqués automatiquement dans certains cas. Par exemple :visited dans

  a:visited { text-decoration: underline; }

• Les Pseudo-élements offrent aux concepteurs un moyen d'attribuer un style à un contenu qui n'existe pas dans le document source. Un pseudo-élément est une pièce unique, spécifique d'un élément qui peut être utilisée pour générer un contenu «à la volée», une numérotation automatique et des listes. Par exemple :first-line ou :after dans

  p:first-line { font-variant: small-caps; }
  a:link:after { content: " (" attr(href) ")"; }

L'auteur : un expert à votre service

Nom : Jean-Charles Gautard

Consultant, formateur et intégrateur web depuis plus de 10 ans, je mets mon expertise digitale au service des professionnels amorçant leur transformation digitale. A la recherche d'une stratégie digitale avec le CMS Joomla ? Besoin de conseils ? d'une formation ? d'un site Internet ou Intranet ? Contactez-nous

Articles qui devraient vous intéresser

Phoca Gallery 3.2.4 : une galerie Joomla pour vos photos

Résumé du test Intuitivité : Stabilité : Support : Sécurité : Mises à jour : Interropérabilité :...

Réussir votre entreprise sur Internet grâce à Joomla

Ce guide aurait pu aussi s'intituler « Développer l'entreprise de mes clients sur Internet grâce à Joomla», «...