Parfois en CSS, vous souhaiterez surcharger une règle de style définie sur un élément HTML pour plusieurs raisons. Cette manipulation est rendue possible grâce à la mention « !important » à ajouter à la suite d’une déclaration CSS.
Cependant, une utilisation trop importante de cette mention « !important » peut entraîner des problèmes de superposition de règles et rendre votre mise en forme très brouillon.
Aujourd’hui, nous allons donc nous intéresser à comment bien utiliser la mention CSS « ! important » pour ne pas que la mise en forme de votre site web soit un labyrinthe de « !important ».
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.
Trouver un développeur web
Tout ce qu’il faut savoir sur ! important
Premièrement, « !important » n’est ni une propriété CSS, ni une valeur de propriété, c’est une mention qu’on ajoute à la suite de la valeur donnée à une propriété. Son effet s’applique uniquement à la propriété à laquelle elle est ajouté et non à toutes les propriétés de l’élément HTML ou du sélecteur.
Pour utiliser « !important » vous devrez l’écrire comme ceci dans votre code :
p {
font-size: 20px;
color: green!important;
font-weight: bold;
}Dans cet exemple, seul la propriété CSS et sa valeur « color: green » seront défini comme « important ».
Comme nous l’avons rapidement vu en introduction de cet article, la mention « !important » sert à passer surcharger une déclaration CSS pour outre passer la déclaration CSS principale ayant le plus gros poids. Ainsi, en reprenant l’exemple donné ci-dessus avec le paragraphe HTML, si on ajoute une nouvelle déclaration de la propriété CSS « color » comme ceci :
p {
font-size: 20px;
color: green!important;
font-weight: bold;
}
#paragraphe {
color: blue;
}Le sélecteur balise « p » aura plus de force grâce à la surcharge de « !important » et donc le paragraphe restera bien vert (green) malgré le fait que le sélecteur id (#paragraphe) ait une force plus importante face à une balise (p) lorsque le poids des deux sélecteurs est identique. Concrètement, sans le « !important » sur la déclaration « color: green » le paragraphe serait bleu (blue), mais puisqu’il y est, le poids du sélecteur « p » devient plus lourd dans la balance et c’est la déclaration ayant la mention « !important » qui prend le dessus et défini la valeur de la propriété.
En reprenant l’exemple précédent, si la déclaration « color: blue » avait aussi la mention « !important » alors le système classique de poids en CSS s’appliquera entre les deux déclarations avec « !important ». Dans cet exemple imaginé, le paragraphe serait donc bleu (blue) car à poids équivalent, un sélecteur id (#paragraphe) a plus de force qu’un sélecteur balise (p).
Cependant, si les deux sélecteurs ont le même poids et force alors le fonctionnement en cascade s’applique lorsque deux mentions « !important » sont en compétitions sur une même propriété d’un même élément.
Reprenons notre précédent exemple et imaginons que les sélecteurs sont identiques (même poids et force) et que la seconde déclaration de « color » ait aussi la mention « !important » de cette manière :
p {
font-size: 20px;
color: green!important;
font-weight: bold;
}
p {
color: blue!important;
}Puisque deux « !important » existent sur une même propriété et que les sélecteurs sont identiques, dans ce cas c’est le « !important » le plus bas dans la cascade (ordre de lecture du haut vers le bas) qui sera pris en compte. Dans ce nouvel exemple, le paragraphe sera donc bleu (blue) et non pas vert (green).
La dernière chose à savoir est que « !important » peut être utilisée partout où vous pourrez écrire une déclaration CSS. Dans un fichier HTML, vous pourrez donc utiliser « !important » de ces deux façons :
<style>
p {
font-size: 20px;
color: green!important;
font-weight: bold;
}
</style>
<p style="font-size:16px!important">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Trouvez le meilleur développeur web sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
Quand utiliser !important ?
L’intérêt principal de « !important » est de pouvoir surcharger une déclaration qui a un poids trop important que vous ne pouvez pas surpasser.
Imaginons que sur un code HTML vous ayez une propriété « color » définie dans une balise ou attribut « style » pour un des éléments HTML. Vous souhaitez redéfinir cette propriété « color » sans ajouter de poids au sélecteur, car vous ne souhaitez ou ne pouvez pas en ajouter. Vous pourrez par exemple dans ce cas utiliser la mention « !important » sur un des sélecteurs de l’élément HTML pour en changer la propriété « color ».
Cela nous donnera donc la situation suivante :
Code HTML :
<p style="color:blue">Cliquez ici </p>Code CSS :
p {
color: red!important;
}Grâce à « !important » le paragraphe sera rouge et non bleu comme il l’aurait dû l’être parce que sans la mention « !important » l’attribut « style » a plus de force que le sélecteur balise « p » à poids égal.
« !important » peut aussi être utilisé pour protéger une classe (class) CSS que l’on souhaite immuable. Un exemple probant de cette situation est la création d’une classe CSS qui permet de mettre en forme des boutons.
Partons du code HTML suivant :
<a href="https://www.codeur.com" class="monBouton">Cliquez ici !</a>Et de ce code CSS qui permet de créer un bouton à partir de notre lien :
.monBouton {
border: none;
padding: 6px;
border-radius: 2px;
box-shadow: 1px 1px 3px #aaa;
background: #ffffff;
font: bold 13px Arial;
color: #555555;
text-decoration: none;
}Pour avoir le résultat suivant :
Actuellement notre bouton est parfaitement mis en forme. Cependant, si durant le développement ou les améliorations du site le code venait à changer en ajoutant du contenu au code HTML et au CSS alors le bouton si parfait pourrait être impacté.
Si on ajoute du contenu au bouton dans le HTML comme ceci par exemple :
<section id="bouton">
<p><a href="https://www.codeur.com" class="monBouton">Cliquez ici !</a>pour aller sur le site Codeur.com </p>
</section>Et que le code CSS est modifié comme cela :
.monBouton {
border: none;
padding: 6px;
border-radius: 2px;
box-shadow: 1px 1px 3px #aaa;
background: #ffffff;
font: bold 13px Arial;
color: #555555;
text-decoration: none;
}
#bouton a {
border-bottom: 3px dashed #8ebf42;
}Alors le résultat ne sera plus le même et le bouton n’aura pas conservé son intégrité initiale :
Pour éviter ces changements non voulu lors du développement ou les améliorations futures du site, vous pouvez utiliser la mention « !important » pour chaque propriété CSS de la classe que vous souhaitez garder intacte. Dans notre cas, sans changer le HTML ou le reste du CSS nous souhaitons que le bouton garde exactement sa forme initiale. Nous allons donc ajouter une mention « !important » à chaque propriété de notre classe comme ceci :
.monBouton {
border: none!important;
padding: 6px!important;
border-radius: 2px!important;
box-shadow: 1px 1px 3px #aaa!important;
background: #ffffff!important;
font: bold 13px Arial!important;
color: #555555!important;
text-decoration: none!important;
}
#bouton a {
border-bottom: 3px dashed #8ebf42;
}De cette manière, notre bouton restera intact et ne sera pas impacté par les futurs ajouts de code CSS :
Conclusion
« !important » est un outil puissant qui peut vous permettre de jouer sur le système de poids en CSS en surchargeant les propriétés qui profitent de la mention « !important ». Grâce à cela vous pourrez créer des classes CSS immuables ou outrepasser certaines règles CSS.
Favorisez donc le système de poids lorsque vous le pouvez en définissant un sélecteur plus lourd que celui que vous souhaitez redéfinir plutôt que d’utiliser par facilité le « !important ».
Tout ce système de poids, sélecteurs et mention « !important » peut vite devenir complexe si vous n’y êtes pas initié correctement. N’hésitez donc pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement un développeur web freelance qui pourra vous aider à mettre en forme votre site web.
Merci pour cette super explication c’est beaucoup plus clair maintenant !