Tout ce que vous devez savoir sur la déclaration !important

Cet article est une traduction de : Everything You Need to Know About the !important CSS Declaration. Retrouvez les traductions de Impressive Webs disponibles sur http://css.developpez.com.

Je suis récemment tombé sur quelques articles parlant de la déclaration CSS !important et ils étaient confus sur ce que faisait cette déclaration et sur la manière dont elle pouvait être utilisée, comme on pouvait le constater dans les commentaires des lecteurs de ces articles.

J'ai donc pensé faire des recherches sur le seul prolongement du schéma CSS propriété/valeur et faire un article complet sur cette déclaration qui passerait en revue les informations essentielles que les développeurs devraient connaître avant de réfléchir sur son usage dans leurs feuilles de styles.

Cet article va expliquer ce que c'est, comment la déclarer, donner quelques éléments pratiques pour l'utiliser et détailler les inconvénients qui doivent être pris en compte avant de l'implémenter.


Commentez cet article : Commentez Donner une note à l'article (5).

Article lu   fois.

Les trois auteurs et traducteur

Site personnel

Traducteur : Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Qu'est ce que c'est ?

La déclaration !important est un mot-clé que vous pouvez ajouter à la fin d'une déclaration CSS pour donner plus de poids à cette valeur. La raison pour laquelle elle est utilisée est liée à la nature du CSS, qui attribue un poids aux valeurs en fonction de l'endroit où elles apparaissent dans la "cascade". Un style CSS sera appliqué en fonction de quatre facteurs selon l'ordre suivant :

  • spécificité directe (par exemple les éléments <ul> se voient attribuer une largeur de 300px)
  • importance du style (par exemple le style est t'il déclaré dans la feuille de style de l'utilisateur ?)
  • spécificité du sélecteur (par exemple les éléments <ul> à l'intérieur d'éléments <div> se voient attribuer une largeur de 400px)
  • ordre d'apparition (par exemple le dernier déclaré s'applique)

Quand la déclaration !important est utilisée sur une paire spécifique de propriété/valeur, cette valeur là échappera à la cascade et deviendra, comme son nom le suggère, la valeur la plus importante pour cette propriété, surclassant toutes les autres valeurs.

II. Comment est elle déclarée ?

Voici un exemple simple démontrant l'usage de !important :

 
Sélectionnez
#leftSide {
        background-color: #0f0 !important;
}

#header #leftSide {
        background-color: #f00;
}

Dans l'exemple ci-dessus, même si le style du background-color spécifié dans la seconde règle est plus spécifique du fait du sélecteur et est déclaré en dernier, la première règle sera prioritaire du fait de l'ajout de la déclaration !important. Ainsi, la couleur d'arrière-plan de l'élément en question (l'élément #leftSide) sera vert (#0f0) au lieu de rouge (#f00).

Vous pouvez également avoir une déclaration !important qui surclasse une autre déclaration !important. Jetez un coup d'œil à l'exemple suivant :

 
Sélectionnez
div #leftSide {
        background-color: #00f !important;
}

#leftSide {
        background-color: #0f0 !important;
}

#header #leftSide {
        background-color: #f00;
}

Les styles ci dessus sont identiques à l'exemple précédent, avec l'ajout d'une autre règle au début, qui comporte également une déclaration !important. Dans cet exemple, la première valeur de la propriété background-color aura la préséance du fait des deux facteurs suivants : d'abord la déclaration contient la déclaration !important, ensuite elle a un sélecteur plus spécifique.

III. Quelques uns de ses usages pratiques

III-A. Cibler Internet Explorer 5 et 6

Un des usages les plus connu pour la déclaration !important est de cibler Internet Explorer versions 5 et 6 qui ignorent la déclaration !important quand la même propriété est déclarée à l'intérieur de la même règle. Par exemple :

 
Sélectionnez
#header {
        width: 300px !important;
        width: 400px;
}

Dans le code ci dessus, la largeur de #header est de 300px dans tous les navigateurs sauf Internet Explorer 5 et 6 qui utiliseront la seconde largeur de 400px. Etant donné que la popularité de ces navigateurs est en diminution (mais pas encore assez rapidement !), l'utilisation de ce "hack" n'est plus aussi répandu. De plus, je trouve personnellement que le hack * html est beaucoup plus pratique pour cibler Internet Explorer 6, dans la mesure où l'utilisation de la déclaration !important peut avoir des effets indésirables de grande envergure.

III-B. Surclasser les styles en ligne

Une utilisation plus pratique de la déclaration !important est de surclasser les styles en ligne qui sont générés dynamiquement du fait de contenus saisis par l'utilisateur. Par exemple, un site Web peut avoir un CMS qui permet de formater du texte dans un éditeur WYSIWYG accessible au propriétaire du site. Vu que le texte formaté entré dans cette interface doit surclasser toute autre règle de style, ces styles sont insérés en tant que style en ligne dans le code HTML généré.

Mais ces styles en ligne peuvent être surclassés par les déclarations !important insérées dans la feuille de style de l'auteur. Regardez le code HTML suivant :

 
Sélectionnez
<div id="header" style="background-color: purple;">
  <p>Praesent dapibus, neque id cursus faucibus</p>
</div>

Le code ci-dessus déclare un style en ligne attribuant la couleur d'arrière-plan "purple" à l'élément pourvu de l'id #header. Ce style surclassera toute autre valeur de la propriété background-color dans la feuille de style de l'auteur, sauf pour l'exception suivante :

 
Sélectionnez
#header {
        background-color: #f00 !important;
}

Même avec l'arrière-plan "purple" déclaré par un style en ligne, la déclaration !important surclassera ce fond violet et attribuera à l'élément #header une couleur d'arrière-plan rouge.

III-C. Modifier les styles surclassés dans Firebug

Un autre usage pour la déclaration !important est quand on veut modifier dynamiquement des styles dans Firebug, qui est un plugin de Firefox. Quand vous consultez une page web dans Firefox, vous pouvez faire un clic droit sur tout élément de la page et sélectionner "Inspecter l'élément", ce qui ouvrira la fenêtre de Firebug vous donnant accès aux outils permettant de modifier les styles de la page à la volée. Vous verrez alors les changements en temps réel. Bien sûr, ces styles ne sont appliqués que localement et seront remis à leur valeur par défaut lorsque la page sera rafraîchie.

Une situation pourrait se produire où vous aurez besoin de donner du poids à un style listé dans la fenêtre de Firebug qui a été surclassé. Les styles surclassés sont affichés barrés dans Firebug. Vous pouvez cliquer sur un des style surclassé pour le modifier et ajouter la déclaration !important, le style ainsi modifié aura la préséance, de la même manière que dans les exemples ci dessus.

IV. Y a-t-il des inconvénients à son usage ?

Absolument. En fait, je recommande fortement de ne jamais utiliser la déclaration !important. Je sais que c'est une affirmation audacieuse et il y aura manifestement des situations où des développeurs seront tentés de l'utiliser, mais dans 99% des cas il y aura une meilleure solution. Surclasser un style en ligne que vous ne pouvez modifier autrement est probablement la seule raison pour laquelle j'approuverais personnellement son usage. Je code en HTML et CSS depuis environ neuf ans maintenant et je n'ai jamais utilisé la déclaration !important. En fait, pendant longtemps je ne connaissais même pas son existence, ce qui, rétrospectivement, était une bonne chose.

Quelques uns de ses inconvénients :

  • favorise un code mal pensé et négligé.
  • crée du code qui est moins maintenable.
  • surclasse les styles déclarés dans la feuille de style de l'utilisateur, réduisant ainsi l'accessibilité.

Avec ces points essentiels à l'esprit, l'usage de la déclaration !important devrait être pris en considération uniquement après que toutes les autres voies aient été épuisées.

V. Eléments techniques supplémentaires

Quand la déclaration !important est utilisée, elle doit être notée après la valeur de la propriété à laquelle vous avez l'intention de donner du poids.

La déclaration !important peut être utilisée avec les propriétés raccourcies. Quand elle est ainsi utilisée, la déclaration !important attribuera plus de poids à chaque valeur déclarée pour la propriété raccourcie. Par exemple :

 
Sélectionnez
#header {
    padding: 20px 10px 20px 10px !important;
}

div#header {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;
}

Avec le code CSS ci-dessus, la première règle, qui déclare le padding avec une propriété raccourcie, aura la préséance sur la seconde règle, même si cette dernière a un sélecteur plus spécifique, déclare le padding avec des propriétés non raccourcies et est déclaré en dernier dans la cascade.

Une déclaration !important qui est définie dans la feuille de style de l'utilisateur aura plus de poids qu'une déclaration définie dans la feuille de style de l'auteur (bien que cela était inversé dans CSS 1). Ceci est vrai même si la feuille de style de l'auteur a la préséance sur la feuille de style de l'utilisateur dans le flux normal de la cascade.

Le principal but de la déclaration !important est de permettre aux utilisateurs qui ont des besoins spécifiques de les inclure dans leurs propres feuilles de styles, afin d'influer sur les paramètres de taille et de couleur de police sans avoir à obéir aux règles de la cascade.

Enfin, il y a eu, de manière surprenante, quelques articles qui ont déclaré que la seule méthode pour surclasser les styles en ligne était la suivante :

 
Sélectionnez
div[style] {
        background-color: #f00 !important;
}

Remarquez le sélecteur [style] qui est un sélecteur d'attribut, en complément de la déclaration !important. Dans cet exemple nous sélectionnons tous les éléments <div> pour lesquels est déclaré un attribut style dans le code HTML. Ceci n'est pas nécessaire. La déclaration !important est tout ce qui est nécessaire pour permettre de surclasser les styles en ligne dans l'exemple ci-dessus. Cependant, utiliser le sélecteur d'attribut sélectionne spécifiquement les éléments possédant l'attribut "style". Il peut donc y avoir des usages pratiques à son emploi.

Il est à noter que ce sélecteur d'attribut ne fonctionne pas avec Internet Explorer 6 et 7, cette méthode devient donc moins utile de ce fait.

Note : après y avoir repensé, j'ai réalisé que j'ai négligé un point important : depuis que les styles en ligne peuvent être ajoutés à de nombreux tags HTML qui n'ont pas de classe ou d'id et que nous ne pouvons pas savoir quels tags se voient attribuer des styles, utiliser le sélecteur d'attribut sera le seul moyen de surclasser ces styles. Je peux donc comprendre pourquoi ces articles étaient si intransigeants sur le fait que cette méthode soit la seule pour surclasser les styles en ligne. Cependant, je pense qu'une explication un peu plus précise l'aurait rendu plus clair. Je supposes que vous pouvez aussi utiliser JavaScript pour cibler toutes les balises contenant des styles en ligne pour leur attribuer une classe.

VI. Pour conclure

Vous l'aurez compris, n'utilisez pas la déclaration !important avant d'avoir essayé toutes les autres possibilités, et gardez à l'esprit les inconvénients. Si vous l'utilisez, il sera probablement logique, si possible, de placer un commentaire dans votre feuille de style à coté de toutes les déclarations qui vont être surclassées, pour assurer un code plus facilement maintenable.

J'ai essayé de couvrir les points essentiels en relation avec l'utilisation de la déclaration !important, n'hésitez donc pas à laisser un commentaire si vous estimez que j'ai oublié ou mal formulé quelque chose et je serai heureux d'apporter les corrections nécessaires : Commentez.

VII. Remerciements

Tous mes remerciements à Benj., Bovino et Macmillenium pour leur relecture.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2010 Louis Lazaris. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.