Comment et Quand On Doit Utiliser la Règle !important en CSS

Quand vous essayez à regarder les feuilles de styles en cascade (Cascading Style Sheets (CSS)) d'un site Web, une ligne qui déclare !important est une chose vous allez noter dans le code. Tant terme affecte les priorités d'un processus dans la feuille de style.

Cascading Style Sheets sont vraiment en cascade, ce qui signifie qu'elles sont placées dans un ordre spécifique. Les styles sont généralement appliqués pour que le navigateur les lise. Appliquez le premier style, ensuite le seconde, etc.

Après, si un style est en haut d'une feuille de style et il est ansuite plus bas dans le fichier, alors le seconde scénario est que le style est ce qui est appliqué dans les cas ultérieurs, il n'est pas le premier. Pratiquement, le style listé dernièrement sera utilisé si deux styles définissent la même chose (ce qui signifie qu'il ont le même niveau de spécificité.).

Imaginons, par exemple, qu'une feuille de sytle contient les styles suivants.

p {
  color: green;
}
p {
  color: black;
}

Malgré que la couleur verte est appliquée au premier paragraphe, le texte de paragraphe sera noir. La raison pour cela est ce que la valeur "black" est appliquée deuxièmement. Comme CSS est lu de haut en bas, la finale est la "black" alors elle gagne.

Ci desssous nous allons discuter comment la règle !important change le priorité.

Comment Appliquer la Règle !important en CSS?

La règle CSS !important ajoute plus d'autorité (importance) que d'autres propriétés. En CSS, !important signifie que "cela est important", ignorez toutes les règles de conséquence, et appliquez la règle !important. Cette règle doit être définie à la fin de la ligne, directivement avant le demicolon.

p {
  color: green !important;
}

De toute façon, pour la balance, une déclaration !important (le délimiteur pris "!" et le mot clé "important" suive à la déclaration) a la préséance sur une déclaration normale. Les feuilles de styles de l'auteur et de l'utilisateur à la fois peuvent contenir les déclarations !important, et les règles !important de l'utilisateur surchargent celles de l'auteur. Cette particularité de CSS améliore l'accessibilité des document en donnant aux utilisateur qui ont les demandes spécials (grandes fontes, combinations de couleurs, etc.) un contrôle sur la présentation.

Déclarer une propriété raccourcie (e.g., color) à être !important c'est équivalent à déclarer toutes ses sous-propriétés à être !important. Alors, cela est utilisé pour surcharger les styles qui sont auparavant répresentés dans les autres origines de styles, pour produire une conception particulaire .

Voyons un exemple pour mieux comprendre.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        background-color: #1c87c9 !important;
        background-color: #ffcc00;
      }
      h2 {
        color: #8ebf42;
      }
      h2 {
        color: #eeeeee !important;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <p>W3docs fournit les matériels de l'apprentissage gratuits pour les langages tels que HTML, CSS, Java Script, PHP, etc.</p>
  </body>
</html>

Dans l'exemple donné, la couleur de l'arrière-plan du corps est bleu au lieu de jaune et le titre est gris au lieu de vert. Cela est parce que la règle !important est appliquée.

Quand Utiliser la Règle !important

Lors qu'on teste et débogue un site web, la déclaration !important peut être effective. Si vous n'êtes pas sûr pourquoi un style n'est pas appliqué et vous pensez que cela peut être un conflit de spécificité, ajoutez la déclaration !important à votre style pour voir si cela fixe le problème, et si il le fait, changez l'ordre des sélécteurs et supprimez les diréctives !important de votre code de production.

Vous allez éventuellement avoir une feuille de style jonchée des styles !important si vous comptez sur l'expression !important pour arriver à votre styles préférés. Vous allez changer radicalement le processus de la page CSS.

On utilise !important pour la vérification ou parce qu'on a simplement besoin de surcharger un style en ligne (inline) qui fait une partie d'un thème ou d'un gabarit.

Quelle est la bonne place pour utiliser la règle !important?

Il peut être des cas, où c'est normal à utiliser la règle !important. Ce sont les cas suivants:

  • Styles surchargeant dans une feuille de style de l'utilisateur

Voici ce pour quel !important était créé premièrement: pour donner à l'utilisateur une opportunité de surcharger les styles du site web. Cela est utilisé par les outils d'avantages tels que les lecteurs d'écran, bloqueurs de pubs, et beaucoup plus.

  • Surcharger les codes et les styles en ligne des autres.

Les développeurs sont heureux d'avoir contrôle sur leur code, mais il y a cas où il sont forcés à travailler sur n'importe quoi. Utilisez !important avec modération.

  • Utility Cases

Peut-être un bien cas est l'utilité des classes. Considérons les boutons. Si vous avez un nom de classe tel que .button sur votre site web et si vous insérez un élément, vous souhaitez qu'il ressemble à un bouton: fonte exacte, coins arrondis, un arrière-plan et des bordures spécials, pour que vous puissiez essayer ça:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .button {
        background: #1c87c9;
        color: white;
        font-weight: bold;
        padding: 5px;
        border-radius: 4px;
        border: 1px solid #666;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#" class="button">BOUTON</a>
  </body>
</html>

La spécificité pour cela est 0,0,1,0. S'il y a des autres sélecteurs avec une spécificité plus haut, qui affectent l'élément, vous pouvez avoir des problèmes comme cela:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #mybutton a {
        border-bottom: 3px dashed #8ebf42;
      }
      .button {
        background: #1c87c9;
        color: white;
        font-weight: bold;
        padding: 5px;
        border-radius: 4px;
        border: 3px solid #666;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <section id="mybutton">
      <p>
        C'est un
        <a href="#" class="button">BOUTON</a>
      </p>
    </section>
  </body>
</html>

Ensuite, nous pouvons voir que les boutons qui ont un désign spécial ont une bordure inférieure verte et de tirets, qui n'est pas ce que nous avons expecté. Cela est simple et souvent parfaitement valide de définir un sélecteur CSS qui a une valeur de la spécificité plus haut que 0,0,1,0 et vis au hasard un bouton .

Pour que votre bouton de classe soit plus haut et ne soit pas changé facilement, insérez les règles !important sur les valeurs qui doivent être avantageuses. Voici un exemple dans lequel le bouton, avec les règles !important, est appliqué.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #mybutton a {
        border-bottom: 3px dashed #8ebf42;
      }
      .button {
        background: #1c87c9 !important;
        color: white !important;
        font-weight: bold !important;
        padding: 5px !important;
        border-radius: 4px !important;
        border: 3px solid #666 !important;
        text-decoration: none !important;
      }
    </style>
  </head>
  <body>
    <section id="mybutton">
      <p>C'est un <a href="#" class="button">BOUTON</a></p>
    </section>
  </body>
</html>

Utiliser des Feuilles de Styles

Cette directive était ajoutée en outre pour aider aux utilisateurs de la page web à faire face aux feuilles de styles qui font difficile à utiliser ou lire les pages.

Si quelqun définit une feuille de style pour regarder les pages web, la feuille de style sera surchargée par la feuille de style de l'auteur de la page. Si l'utilisateur marque le style comme !important, ce style surcharge la feuille de style de l'auteur de la page web, même si l'auteur sélectionne une règle comme !important.

Cette structure est utile pour les utilisateurs qui ont besoin de définir des styles. Par exemple, sur toutes les pages web ils utilisent, un lecteur détérioré visuellement peut avoir besoin d'augmenter les tailles de police initiales. En utilisant la directive !important avec modération dans les pages vous construisez, vous répondez aux besoins individuels de vos utilisateurs.

Il n'est PAS recommandé d'utiliser très souvent la règle !important, car seule qui peut remplacer une déclaration !important est une autre! déclaration !important. En l'utilisant une fois, vous vous retrouvez potentiellement avec un fichier CSS qui est rempli de règles importantes, ce qui n'est pas bien.