!important - Valeur CSS
Résumé des caractéristiques de la valeur !important
La valeur !important.
!important est utilisée pour rendre une règle absolument prioritaire
sur toutes les autres. On pourra relire le tutoriel sur les règles de priorité du CSS.
Exemple de syntaxe pour forcer la taille des caractères à 12 pixels, quelque soit les valeurs éventuellement définies par d'autres règles :
div {
font-weight: bold;
font-size: 12px !important;
}
La valeur !important doit être utilisée avec précaution et le plus rarement possible.
En effet, elle contrarie les mécanismes d'héritage et de priorité de CSS qui sont le plus souvent très pratiques :
Le sélecteur le plus précis est prioritaire sur les sélecteurs moins précis.
Par exemple, les sélecteurs basés sur un ID sont prioritaires sur les sélecteurs basés sur une classe,
car un ID ne peut désigner qu'un seul élément dans la page, alors qu'une classe peut en désigner plusieurs.
Le sélecteur avec ID est donc plus précis ; il sera prioritaire.
Pour surcharger une règle déjà notée !important il est possible de répéter cette valeur dans la nouvelle règle.
Ce qui conduit à une multiplication de règles notées !important et rend le fonctionnement de la feuille de styles confus.
Comment éviter d'utiliser !important ?
Combiner les sélecteurs pour augmenter leur priorité.
Supposons que nous ayons une règle qui définit la taille des caractères pour les éléments avec id="edito".
Comment peut-on forcer cette règle de façon exceptionnelle sur une des pages de notre site ? Et sans utiliser la valeur !important.
#edito {
font-family: 'Arial', sans-serif;
font-size: 12px;
}
La solution est d'utiliser un sélecteur plus précis, ce qui peut se faire en combinant plusieurs sélecteurs :
div#edito {
font-size: 14px;
}
/* Ou même, si c'est nécessaire : /*
body div#edito {
font-size: 14px;
}
Styles dans l'attribut style des balises HTML.
Il faut noter aussi que les règles écrites directement dans la balise HTML ont une priorité supérieure à tous les sélecteurs. Néanmoins cette technique n'est pas à conseiller car elle ne maintient pas la séparation entre les codes HTML et CSS.
<div id="edito" style="font-size:14px;">
Utilisation des couches de cascade.
Cette solution, récemment standardisée, est la meilleure car elle offre tout la souplesse nécessaire.
Les couches de cascade se définissent avec la directive @layer.
Sur la même page, cous pourrez également consulter un les couches de cascade.
La valeur !important et les animations.
La valeur !important bloque les animations qui pourraient être définies sur la même propriété.
Par ailleurs, il n'est pas autorisé d'utiliser la valeur !important dans la définition d'une animation.
Pour plus d'informations sur les animations, reportez vous à la page sur la propriété animation et à celle sur la directive @keyframes.
@keyframes exemple {
from { width: 100px; }
to { width: 200px; }
}
#id {
width:200px !important;
animation:exemple 2s infinite;
}
!important indiquée pour la largeur de l'élément.
@keyframes exemple {
from { width: 100px; }
50% { width: 300px !important; }
to { width: 200px; }
}
#id {
animation:exemple 2s infinite;
}
!important qui est incorrecte à cet endroit.
Historique de la valeur !important.
La définition de !important n'a pas évolué depuis sa création, lors de la première spécification du langage.
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Première spécification du langage CSS. La valeur!importantest déjà prévue.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Pas de modification concernant cette annotation.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Cascade et héritage - Niveau 3
La spécification apporte une précision : les règles déclarées avec!importantsont prioritaires par rapport aux animations.13 Juillet 2001Document de travail.
03 Octobre 2013Candidat à la recommandation.22 Décembre 2020Proposé à la recommandation.11 Février 2021Recommandation. -
Module CSS - Cascade et héritage - Niveau 4
Pas de changement concernant l'annotation!important.21 Avril 2015Document de travail.14 Janvier 2016Candidat à la recommandation. -
Module CSS - Cascade et héritage - Niveau 5
Pas de changement concernant l'annotation!important.19 Janvier 2021Document de travail.13 Janvier 2022Candidat à la recommandation. -
Module CSS - Cascade et héritage - Niveau 6
Pas de changement concernant l'annotation!important.21 Décembre 2021Document de travail.
Voir aussi, dans le même module de standardisation que !important.
Les spécifications CSS éditées par le W3C sont organisées en modules. !important fait partie du module CSS - Cascade et héritage (CSS Cascading and Inheritance). Les définitions suivantes sont également décrites dans ce même module.
Propriétés :
Directives :