!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 priorités 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;
}
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 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;
}
L'animation n'est pas exécutée, car elle entrerait en conflit avec la clause !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
Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.
Concernant!important. 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
Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.
Concernant!important. 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
Concernant!important. 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
Concernant!important. 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
Concernant!important. 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
Concernant!important. Pas de changement concernant l'annotation!important.21 Décembre 2021Document de travail.
Voir aussi.
Les spécifications CSS éditées par le W3C sont organisées en modules.
La valeur !important fait partie du module Module CSS - Cascade et héritage.
Les définitions suivantes sont également décrites dans ce même module.