CSS-Schlüsselwort !important

Auswirkungen auf die Kaskade

Bei wichtigen Deklarationen werden die Reihenfolgen von Kaskadenursprung und Ebenen umgekehrt. Ohne das important-Flag überschreiben Deklarationen in den Stylesheets des Autors Deklarationen in einem Stylesheet des Benutzers, welche wiederum Deklarationen im Standard-Stylesheet des User-Agents überschreiben.

Wenn eine Deklaration wichtig ist, wird die Rangfolge umgekehrt. Als wichtig gekennzeichnete Deklarationen in den Stylesheets des User-Agents überschreiben alle wichtigen Deklarationen in den Benutzer-Stylesheets. Ebenso überschreiben alle wichtigen Deklarationen in Benutzer-Stylesheets alle wichtigen Deklarationen in den Stylesheets des Autors. Schließlich haben alle wichtigen Deklarationen Vorrang vor allen Animationen.

Die Umkehrung der Rangfolge für wichtige Deklarationen stellt sicher, dass Benutzer mit besonderen Anforderungen, beispielsweise personalisierten Farbschemata oder großen Schriftarten, bei Bedarf Autorenstile überschreiben können, indem sie einige Deklarationen in ihrem Benutzer-Stylesheet als wichtig kennzeichnen. Sie garantiert außerdem, dass bösartige Erweiterungen wichtige User-Agent-Stile nicht überschreiben können, was die Funktionalität beeinträchtigen oder sich negativ auf die Sicherheit auswirken könnte.

Hat irgendetwas Vorrang vor wichtigen Deklarationen? Ja, Übergänge. CSS-Übergänge sind eine Möglichkeit, die Geschwindigkeit zu steuern, mit der sich eine Eigenschaft von einem Wert zu einem anderen ändert. Während des Übergangs von einem Wert zu einem anderen entspricht eine Eigenschaft keiner bestimmten wichtigen Deklaration.

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

In diesem Beispiel wechseln die Eigenschaften color und background-color über zwei Sekunden in den Hover-Zustand. Obwohl Standardzustände normale Deklarationen und Hover-Zustände !important-Deklarationen sind, findet der Übergang statt.

Kaskadenebenen

Innerhalb jedes der drei Ursprünge für Stylesheets – Autor, Benutzer und User-Agent – überschreiben normale Deklarationen in nicht geschichteten Stilen geschichtete Stil-Deklarationen, wobei die zuletzt deklarierte Vorrang vor den zuvor deklarierten Ebenen hat. Wichtige Deklarationen kehren die Rangfolge um: Wichtige Deklarationen in der ersten Ebene haben Vorrang vor wichtigen Deklarationen in der nächsten Ebene und so weiter. Außerdem haben alle wichtigen Deklarationen Vorrang vor wichtigen Deklarationen, die außerhalb einer Ebene erstellt wurden.

Inline-Stile

Inline-Stile sind Stile, die mithilfe der Attribute style definiert werden. Sie können ebenfalls normal oder wichtig sein. Inline-normale Stile haben unabhängig vom Ursprung Vorrang vor allen normalen Deklarationen. Inline-wichtige Stile haben unabhängig von der Ebene Vorrang vor allen anderen wichtigen Autorenstilen, werden jedoch von wichtigen Stilen aus Benutzer- oder User-Agent-Stylesheets sowie von Übergängen überschrieben.

!important und Spezifität

Obwohl !important nicht Teil der Bestimmung der Spezifität ist, steht es damit in Zusammenhang. Wichtige Deklarationen überschreiben alle anderen Deklarationen aus demselben Ursprung und derselben Kaskadenebene.

#myElement#myElement#myElement .myClass.myClass p:hover {
  color: blue;
}

p {
  color: red !important;
}

Dieses Beispiel zeigt einen Fall, in dem ein Selektor übermäßig spezifiziert wird. Unabhängig davon, wie hoch die Spezifität eines Selektors mit einer normalen Deklaration übereinstimmt, hat eine wichtige Deklaration aus derselben Quelle und Kaskadenebene immer Vorrang. In diesem Fall wird der Absatz immer rot sein.

Wenn zwei wichtige Deklarationen desselben Ursprungs und derselben Ebene auf dasselbe Element angewendet werden, wählen Browser die Deklaration mit der höchsten Spezifität aus und verwenden sie.

#myElement p {
  color: green !important;
}

p {
  color: purple !important;
}

In diesem Fall ist die Spezifität des Selektors relevant. Nur wenn die Selektoren dieselbe Spezifität hätten, wäre die Reihenfolge im Quelltext relevant.

Auswirkungen auf Kurzschreibweisen

Das Deklarieren einer Kurzschreibweise mit !important setzt alle Untereigenschaften als wichtig. Die beiden folgenden Stilblöcke für Selektoren sind gleichwertig:

p {
  background: blue !important;
}

p {
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto auto !important;
  background-repeat: repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
  background-attachment: scroll !important;
  background-color: blue !important;
}

Dieses Beispiel zeigt einen von mehreren Gründen, warum im Allgemeinen empfohlen wird, das important-Flag zu vermeiden.

Auswirkungen auf benutzerdefinierte Eigenschaften

Wenn das Flag !important zu einer Wertdeklaration einer benutzerdefinierten Eigenschaft hinzugefügt wird, macht es die Wertzuweisung wichtig. Das Flag !important wird dann aus dem Wert der benutzerdefinierten Eigenschaft entfernt. Das Flag !important wird nicht als Teil des Werts der benutzerdefinierten Eigenschaft an die Funktion var() übergeben.

:root {
  --my-color: red !important;
  --my-color: blue;
}
p {
  color: var(--my-color);
}
blockquote {
  color: var(--my-color);
  color: purple;
}

<p>This is a paragraph</p>
<blockquote>This is a blockquote</blockquote>

In diesem Beispiel wird der Absatz rot und nicht blau sein, da die Wertzuweisung der benutzerdefinierten Eigenschaft wichtig ist. Das Blockzitat wird lila sein, weil die normale lila Deklaration nach der normalen roten Deklaration kommt.

Bewährte Methoden

Vermeiden Sie die Verwendung von !important, um Spezifität zu überschreiben. Wenn Sie absichtlich wichtige Deklarationen für UI-Anforderungen erstellen, kommentieren Sie in Ihrem CSS-Code, um den Wartenden zu erklären, warum sie diese Funktion nicht überschreiben sollten.

Selbst wenn Sie Stile mit hoher Spezifität überschreiben möchten, die Sie nicht kontrollieren, beispielsweise Stile in einem Drittanbieter-Plugin, die mit einem ID-Selektor deklariert wurden, müssen Sie !important nicht verwenden. Erwägen Sie stattdessen, das Stylesheet-Skript des Drittanbieters als erste Kaskadenebene in eine benannte oder anonyme Ebene zu importieren, anstatt !important zu verwenden. Solange die externen Stile keine wichtigen Deklarationen enthalten, haben Ihre Stile unabhängig von der Spezifität Vorrang vor den Widget-Stilen.

Wenn Sie ein externes Stylesheet überschreiben müssen, das wichtige Deklarationen enthält, erstellen Sie eine Kaskadenebene mit den erforderlichen Überschreibungen und deklarieren Sie diese Ebene zuerst.

Barrierefreiheitsbedenken

Wichtige Stile aus einem Benutzer-Stylesheet haben Vorrang vor wichtigen Deklarationen im Stylesheet des Autors. Das bedeutet, dass das Hinzufügen eines !important-Flags zu den Stilen einer Website einzelne Benutzer mit besonderen Anforderungen, beispielsweise großen Schriftarten, nicht daran hindert, Ihre Stile durch das Hinzufügen wichtiger Stile in ihrem eigenen Benutzer-Stylesheet zu überschreiben.

Browser-Kompatibilität

Diese Funktion wird von allen Browsern unterstützt.

Siehe auch

• CSS-Spezifität
• CSS-Kaskade