icone jauge moyenNiveau Joomla :
Intermédiaire

Qu'allons-nous voir dans ce tutoriel ?

La spécificité CSSSi vous prévoyez d'utiliser le CSS régulièrement, il est nécessaire de comprendre ce qu'est la spécificité et la façon dont elle est appliquée. Avec un template conçu avec Gantry, elle devient même indispensable. En effet, celui-ci compile et compresse vos fichiers LESS en un fichier CSS temporaire, et même sans compression il est très délicat, voire impossible même avec Firebug, d'identifier la bonne ligne CSS dans le bon fichier CSS pour procéder à des modifications. Et notez qu'au final, utiliser la spécificité en CSS vous fera gagner un temps considérable.

Avec les floats et les positions, la spécificité est l'une des choses les plus difficiles à comprendre. Les sélecteurs (ex : h1, p, .bonjour, #bonjour,...) que vous utilisez dans votre CSS ont tous des poids différents et ceux-ci sont contrôlés par la spécificité. C'est pourquoi, parfois, quand vous appliquez une règle à un élément, il ne s'applique pas dans votre design.

Notez que si vous avez déjà utilisé le mot-clé !important pour y remedier, alors cet article est d'autant plus fait pour vous.

Les 6 premiers paragraphes ci-dessous sont consacrés à un petit rappel sur la spécificité en CSS. Pour aller plus loin, consulter l'article Comment utiliser la spécificité en CSS : Ce qu'il faut savoir
 

Icône code CSSLa spécificité en CSS : Aperçu rapide

  1. La spécificité détermine quelles règles CSS sont appliquées par les navigateurs
  2. La spécificité est généralement la raison pour laquelle vos règles CSS ne s'appliquent pas sur certains éléments
  3. Chaque sélecteur a sa place dans la hiérarchie de la spécificité
  4. Si deux sélecteurs s'appliquent au même élément, celui qui a la plus grande spécificité gagne
  5. Il existe quatre catégories distinctes qui définissent le niveau de spécificité d'un sélecteur donné : les styles inline, les IDs, les classes + attributs et les éléments
  6. Vous pouvez comprendre la spécificité si vous aimez Star Wars : CSS Specificity Wars
  7. Vous pouvez comprendre la spécificité si vous aimez le poker : spécificité CSS pour les joueurs de poker
  8. Lorsque des sélecteurs ont la même valeur de spécificité, c'est la dernière règle qui est prise en compte
  9. Lorsque des sélecteurs ont des valeurs de spécificité inégales, la règle la plus spécifique est celle qui est prise en compte
  10. Les règles avec des sélecteurs plus spécifiques ont une meilleure spécificité
  11. La dernière règle définie remplace toutes les règles précédentes
  12. La feuille de style intégrée a une plus grande spécificité que les autres règles
  13. Les sélecteurs d'ID ont une spécificité plus élevée que les sélecteurs d'attribut
  14. Vous devez essayer d'utiliser les ID pour augmenter la spécificité
  15. Un sélecteur de classe bat n'importe quel nombre de sélecteurs d'élément
  16. Le sélecteur universel et les sélecteurs d'héritage ont une spécificité de 0, 0, 0, 0
  17. Vous pouvez calculer la spécificité CSS avec la calculatrice de spécificité CSS (CSS Specificity Calculator)

Icône code CSSComment un navigateur interprète-t-il le CSS ?

Pour bien comprendre comment utiliser la spécificité en CSS, vous devez savoir comment le navigateur interprète les règles CSS et comment elles sont remplacées.

Tout d'abord, le navigateur va lire une feuille de style de haut en bas. Ce qui signifie qu'avec ce code, ...

 /*Ligne 10*/  ul   li   a   {  color :  red ;  }   /*Ligne 90*/  ul   li   a   {  color :  blue ;  }                          
Pour rappel, ul li a est ici le sélecteur, color est la propriété (ou l'attribut) CSS et red / blue sont les valeurs
 

... la règle que vous avez spécifié à la ligne 10 sera remplacée et la balise d'ancrage sera bleu puisque le navigateur va appliquer les règles les plus en bas de votre CSS.

C'est également le cas lorsque vous importez vos fichiers CSS, par exemple :

link   href = 'css/style.css'   rel = 'stylesheet'
link href = 'css/custom.css' rel = 'stylesheet'

Comme vous avez placé le custom.css après le style.css, ce que vous écrivez dans le style.css (sans prendre en compte, pour l'instant, le poids des sélecteurs / la spécificité) sera annulé et remplacé par ce qui est dans custom.css. Cette technique est souvent utilisée par les créateurs de thème pour donner à l'utilisateur la possibilité d'ajouter ses propres styles sans modifier le fichier principal. (Notez cependant que custom.css ne remplace pas entièrement style.css, seules les règles qui sont expressément lues une deuxième fois seront remplacées).

Icône code CSSLa spécificité

Tout ce qui précède ne s'applique que si vous utilisez le même poids pour chaque sélecteur. Si vous spécifiez des ID, des classes ou des éléments, vous donnerez du poids au sélecteur. C'est ça la spécificité.

Il existe quatre catégories qui définissent le niveau de spécificité d'un sélecteur: les styles inline (ceux-ci sont parfois utilisés en javascript), les ID, les classes et les éléments. Comment mesurer la spécificité ? La spécificité est mesurée avec des points et celui qui a le plus de points l'emporte.

  • Les ID valent 100 points
  • Les classes valent 10 points
  • Les éléments valent 1 point

Sachant cela, si vous utilisez le sélecteur suivant :

 #content .sidebar .module li a  

Son poids total est de 122 points (100 + 10 + 10 + 1 + 1), soit un ID, deux classes et deux éléments.

Icône code CSSPoints à retenir

  • Les ID ont beaucoup de poids par rapport aux classes et aux éléments. Ainsi, vous devez limiter l'utilisation des ID dans vos feuilles de style.
  • Dans les cas où les sélecteurs ont le même poids, celui qui apparait en dernier aura la plus haute priorité.
  • Les styles intégrés dans vos balises HTML prennent le dessus sur les feuilles de style, car ils sont plus proches de l'élément.
  • La seule façon de remplacer les styles inline est d'utiliser !important.
  • Les pseudo-classes et les attributs ont le même poids que les classes normales.
  • Les pseudo-éléments ont également le même poids que les éléments normaux.
  • Le sélecteur universel (*) ne représente aucun poids.

Icône code CSSExemples

 ul   li   a   {  color :  red ;  }             

Ce sélecteur aura un poids de 3, ce qui signifie qu'en ajoutant une classe autre part, vous pouvez le remplacer.

 .content   #sidebar   {  width :  30 % ;  }       

Ce sélecteur a un poids de 110 points en raison principalement de l'ID qui ajoute 100 points au total de 110.

 .post  p :first-letter   {  font-size :  16 px ;  }     

Ce sélecteur a un poids de 12 points puisque le pseudo-élément: first-letter ne pèse qu'un point tout comme la balise p.

 p   {  font-family :  Helvetica, arial, sans-serif ;  }   

Ce sélecteur ne pèse que 1 point. Ce type de sélecteur doit être utilisé en haut de la page pour définir le style de base qui sera par la suite remplacé sur des zones spécifiques.

Toujours garder à l'esprit que pour remplacer un sélecteur d'ID, vous devez écrire 256 classes pour le même élément, comme ceci :

#title   {  font-weight :  bold ;  }  
.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {   font-weight : normal ; }

C'est seulement de cette manière que le second sélecteur remplacera celui qui utilise l'ID.

Vous souhaitez aller plus loin dans la compréhension de la spécificité ? Consultez l'article Comment utiliser la spécificité en CSS : Ce qu'il faut savoir
 

Icône code CSSLa spécificité appliqué à Gantry

La spécificité est une partie souvent négligée. La manipuler correctement vous permettra non seulement d'éviter les bugs, mais vous permettra surtout d'accélérer à la fois votre développement et votre site final, d'autant plus si vous utilisez un framework comme Gantry pour concevoir vos templates Responsive Design basés sur Bootstrap.

Comme je vous le disais plus haut, Gantry compile et compresse l'ensemble des fichiers LESS présents dans le répertoire /templates/{template_gantry}/less/ en un seul et même fichier CSS du type master-9df2697c66a177cf495755cexxxxxxxx.css. Ce fichier est alors mis dans le répertoire /templates/{template_gantry}/css-compiled/. Par conséquent, lorsque l'on réalise une inspection avec Firebug, on se retrouve souvent confronté à ceci :

Firebug CSS

Pour modifier ce fichier CSS et y apporter nos propres propriétés CSS, nous sommes confronté à 2 problèmes :

  • Ce fichier CSS est compilé, il n'y a donc que quelques lignes CSS, donc autant dire que ces lignes font des centaines et des centaines de caractères de longs tous collés les uns aux autres
  • Ce fichier CSS est temporaire et re-compilé régulièrement, donc tout votre travail sera effacé

La solution, qui est d'ailleurs celle préconisée par les développeurs de Gantry, est d'utiliser la spécificité CSS. Personnellement, j'étendrais d'ailleurs cette solution à tous vos projets Joomla, pas seulement pour Gantry et pas seulement pour les templates, car cela peut vous faire gagner énormement de temps.

Prenons un exemple concret avec la capture ci-dessous :

CSS Specificite DIV

Comme vous pouvez le voir la propriété CSS margin-top: 0 est barrée (donc non-prise en compte par le navigateur) et c'est la propriété CSS margin-top: 25px qui prend la main. Ceci s'explique tout simplement par le fait que la spécificité CSS des sélecteurs div.component-content .item-page h2 est supérieur aux sélecteurs .component-content .item-page h2.

Pour mettre ceci en place concrètement, il suffit juste de suivre les étapes suivantes :

  1. Créer un fichier LESS supplémentaire qui va venir s'ajouter à la compilation faite par Gantry. Pour que ce soit le cas, il doit être nommé de la manière suivante template-custom.less et ajouté au répertoire /templates/{template_gantry}/less/
  2. Ajouter une ligne CSS dans ce fichier template-custom.less qui donne du poids au sélecteur sur lequel on souhaite prendre la main. Ici concrètement, avec .component-content .item-page h2, le simple fait d'ajouter div au début, donnant donc div.component-content .item-page h2, suffit à donner ce poids. Notez que cette manipulation suffit bien souvent dans la plupart des cas.

Et voilà, le tour est joué ! Pour résumé, un seul fichier CSS / LESS a géré, vous répérez la ligne CSS que vous voulez changer, vous la copier-coller en mettant votre valeur CSS personnalisée et puis vous changez sa spécificité.

Au final, la force de la spécificité en CSS est que vous avez ensuite la possibilité d'appliquer cette méthode pour n'importe quelle valeur CSS présente n'importe où dans votre Joomla (Extensions, Core Joomla!, Templates, ...) indépendemment de Gantry, tout en ne conservant qu'un seul fichier CSS.

Les 6 premiers paragraphes ci-dessous sont consacrés à un petit rappel sur la spécificité en CSS. Pour aller plus loin, consulter l'article Comment utiliser la spécificité en CSS : Ce qu'il faut savoir
 
L'auteur : un expert à votre service
Jean-Charles Gautard
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

Commentaires (0)

Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité. Créez un compte ou connectez-vous ci-dessous.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

 

Restez à l'affut de l'actualité NosyWeb ! :-)

Dernier article sur la même thématique
Les nouveautés de Joomla 3.9Les nouveautés de Joomla 3.9
Joomla 3.9 apporte un certain nombre de nouveautés fondamentales avec en premier lieu l'environnement de conformité au RGPD. Mais également un certain nombre d'améliorations utiles et...
En poursuivant votre navigation sur le site, vous acceptez l'utilisation de cookies sur votre poste dans le respect de notre politique de protection de votre vie privée. Ok