Que signifie! Important en CSS?

409

Que !importantsignifie CSS?

Est-il disponible en CSS 2? CSS 3?

Où est-il pris en charge? Tous les navigateurs modernes?

css 
— Itay Moav -Malimovka
source
2
— j08691
17
... quelque chose à éviter autant que possible.
— Scott
2
— Cody Gray

Réponses:

400

Cela signifie, essentiellement, ce qu'il dit; que «c'est important, ignorez les règles suivantes et tous les problèmes de spécificité habituels, appliquez cette règle!

En utilisation normale, une règle définie dans une feuille de style externe est remplacée par un style défini dans le headdocument, qui, à son tour, est remplacé par un style en ligne au sein de l'élément lui-même (en supposant une spécificité égale des sélecteurs). La définition d'une règle avec l !important'«attribut» (?) Écarte les préoccupations normales en ce qui concerne la règle «ultérieure» qui remplace les règles «antérieures».

De plus, en règle générale, une règle plus spécifique remplacera une règle moins spécifique. Donc:

a {
    /* css */
}

Est normalement annulé par:

body div #elementID ul li a {
    /* css */
}

Comme ce dernier sélecteur est plus spécifique (et peu importe où se trouve le sélecteur plus spécifique (dans la headou la feuille de style externe), il remplacera toujours le sélecteur moins spécifique (les attributs de style en ligne seront toujours remplacer le sélecteur spécifique «plus-» ou «moins-» car il est toujours plus spécifique.

Cependant, si vous ajoutez !importantà la déclaration CSS du sélecteur moins spécifique, elle aura la priorité.

L'usage !importanta ses buts (bien que j'aie du mal à y penser), mais c'est un peu comme utiliser une explosion nucléaire pour empêcher les renards de tuer vos poulets; oui, les renards seront tués, mais les poulets aussi. Et le quartier.

Cela fait également du débogage de votre CSS un cauchemar (d'expérience personnelle, empirique).

— David dit de réintégrer Monica
source
253
C'est aussi déroutant pour de nombreux développeurs comme dans de nombreux langages de programmation le préfixe! signifie pas .
— rustyx
19
Un objectif de! Important serait dans un script GreaseMonkey où vous remplacez volontairement le CSS d'autres personnes qui est probablement plus spécifique que le vôtre.
— Noumenon
1
Officiellement, le W3 appelle cela une "règle".
— JD Smith
5
au moins ce n'est pas sarcastique et dit important!(important NON)
— user3553260
2
Vous avez écrit: "En utilisation normale, une règle définie dans une feuille de style externe est annulée par un style défini dans l'en-tête du document". Il est faux.
— jlguenego
130

La règle! Important est un moyen de faire votre cascade CSS mais aussi de toujours appliquer les règles qui vous semblent les plus cruciales. Une règle qui a la propriété! Important sera toujours appliquée, peu importe où cette règle apparaît dans le document CSS.

Donc, si vous avez les éléments suivants:

.class {
   color:red !important;
}
.outerClass .class {
   color:blue;
}

la règle avec l'important sera celle appliquée (sans compter la spécificité )

Je crois qu'il !importantest apparu dans CSS1, donc chaque navigateur le prend en charge (IE4 à IE6 avec une implémentation partielle, IE7 + complet)

En outre, c'est quelque chose que vous ne souhaitez pas utiliser assez souvent, car si vous travaillez avec d'autres personnes, vous pouvez remplacer d'autres propriétés.

— nicosantangelo
source
1
IE4 +, en fait, avec des bugs, jusqu'à 6. inclus
— BoltClock
15
La confusion se produit comme !c'est un symbole pour NON dans certaines langues mais c'est plus clair maintenant.
— Si8
2
Je suis particulièrement heureux que vous ayez inclus la syntaxe d'utilisation !important. CSS est suffisamment différent des autres langages pour qu'il soit facile d'oublier comment utiliser certaines choses.
— blainarmstrong
3
@ Si8 - Oui, à cause de cette confusion, j'ai toujours pensé "ils" auraient dû le définir comme important!, ou peut IMPORTANT!- être , plutôt que !important. Je me demande si quelqu'un (qui pourrait lire ceci) sait pourquoi ils l'ont défini avec la ponctuation devant? De toute évidence, il est trop tard pour le changer maintenant.
— Kevin Fegan
22

!important fait partie de CSS1.

Navigateurs le prenant en charge: IE5.5 +, Firefox 1+, Safari 3+, Chrome 1+.

Cela signifie, quelque chose comme:

Utilisez-moi, s'il n'y a rien d'autre d'important autour!

Je ne peux pas le dire mieux.

— Cyclone
source
5
!importantn'est pas limité à Safari 3+ uniquement; il l'a pris en charge dès le début comme tous les autres navigateurs non IE. IE le comprend à partir de la version 4, mais il ne le prend en charge qu'à partir de la version 7.
— BoltClock
12

Il est utilisé pour influencer le tri dans la cascade CSS lorsque le tri par origine est effectué. Cela n'a rien à voir avec la spécificité comme indiqué ici dans d'autres réponses.

Voici la priorité du plus bas au plus élevé:

  1. styles de navigateur
  2. déclarations de feuille de style utilisateur (sans! important)
  3. déclarations de feuille de style d'auteur (sans! important)
  4. ! feuilles de style d'auteur importantes
  5. ! feuilles de style utilisateur importantes

Après cette spécificité a lieu pour les règles ayant toujours un doigt dans le gâteau.

Références:

— Fabian Barney
source
Comme l'a souligné @ fabian-barney, il !importants'agit d'un modificateur pour l' ordre en cascade developer.mozilla.org/en-US/docs/Web/CSS/Cascade (voir le tableau pour référence).
— Doomjunky
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.