Niveau Joomla :Intermédiaire
Liens utiles Gantry
Qu'allons-nous voir dans ce tutoriel ?
Si 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.
La spécificité en CSS : Aperçu rapide
- La spécificité détermine quelles règles CSS sont appliquées par les navigateurs
- La spécificité est généralement la raison pour laquelle vos règles CSS ne s'appliquent pas sur certains éléments
- Chaque sélecteur a sa place dans la hiérarchie de la spécificité
- Si deux sélecteurs s'appliquent au même élément, celui qui a la plus grande spécificité gagne
- 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
- Vous pouvez comprendre la spécificité si vous aimez Star Wars : CSS Specificity Wars
- Vous pouvez comprendre la spécificité si vous aimez le poker : spécificité CSS pour les joueurs de poker
- Lorsque des sélecteurs ont la même valeur de spécificité, c'est la dernière règle qui est prise en compte
- 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
- Les règles avec des sélecteurs plus spécifiques ont une meilleure spécificité
- La dernière règle définie remplace toutes les règles précédentes
- La feuille de style intégrée a une plus grande spécificité que les autres règles
- Les sélecteurs d'ID ont une spécificité plus élevée que les sélecteurs d'attribut
- Vous devez essayer d'utiliser les ID pour augmenter la spécificité
- Un sélecteur de classe bat n'importe quel nombre de sélecteurs d'élément
- Le sélecteur universel et les sélecteurs d'héritage ont une spécificité de 0, 0, 0, 0
- Vous pouvez calculer la spécificité CSS avec la calculatrice de spécificité CSS (CSS Specificity Calculator)
Comment 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 ; }
... 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).
La 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.
Points à 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.
Exemples
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.
La 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 :
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 :
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 :
- 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/
- 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.
