!important

Einfluss auf das Kaskadieren

Wenn es um wichtige Deklarationen geht, sind die Ursprungs- und Schichtebenen-Reihenfolgen umgekehrt. Ohne das important-Flag überschreiben Deklarationen im Autoren-Stilblatt Deklarationen im Benutzer-Stilblatt, welche Deklarationen im standardmäßigen Stilblatt des Benutzer-Agenten überschreiben.

Wenn eine Deklaration wichtig ist, wird die Prioritätenreihenfolge umgekehrt. Deklarationen, die im Benutzer-Agenten-Stilblatt als wichtig markiert sind, überschreiben alle wichtigen Deklarationen in den Benutzer-Stilblättern. Ebenso überschreiben alle wichtigen Deklarationen in den Benutzer-Stilblättern alle wichtigen Deklarationen in den Autoren-Stilblättern. Schließlich haben alle wichtigen Deklarationen Vorrang vor allen Animationen.

Die Umkehrung der Prioritätenreihenfolge für wichtige Deklarationen stellt sicher, dass Benutzer mit besonderen Bedürfnissen, wie personalisierten Farbschemata oder großen Schriftarten, Autorenstile bei Bedarf überschreiben können, indem sie einige Deklarationen in ihrem Benutzer-Stilblatt als wichtig markieren. Es garantiert auch, dass böswillige Erweiterungen keine wichtigen Benutzer-Agenten-Stile überschreiben können, die möglicherweise Funktionen beeinträchtigen oder die Sicherheit negativ beeinflussen könnten.

Hat irgendetwas Vorrang vor wichtigen Deklarationen? Ja, Transitions. CSS-Transitions sind eine Möglichkeit, die Geschwindigkeit zu steuern, mit der sich eine Eigenschaft von einem Wert zum anderen ändert. Während des Übergangs von einem Wert zum anderen stimmt eine Eigenschaft nicht mit einer bestimmten wichtigen Deklaration überein.

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

In diesem Beispiel werden die Eigenschaften color und background-color zum Hover-Zustand über zwei Sekunden überblenden. Auch wenn Standardzustände normale Deklarationen und Hover-Zustände !important-Deklarationen sind, findet der Übergang statt.

Kaskadierschichten

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

Inline-Stile

Inline-Stile sind Stile, die mithilfe der style-Attribute definiert werden. Sie können auch normal oder wichtig sein. Inline-normale Stile haben Vorrang vor allen normalen Deklarationen, unabhängig vom Ursprung. Inline-wichtige Stile haben Vorrang vor allen anderen wichtigen Autoren-Stilen, unabhängig von der Schicht, aber wichtige Stile aus Benutzer- oder Benutzer-Agent-Stilblättern und Transitionen überschreiben sie.

!important und Spezifität

Während !important nicht Teil der Bestimmung der Spezifität ist, ist es damit verwandt. Wichtige Deklarationen überschreiben alle anderen Deklarationen aus demselben Ursprung und Kaskadierschicht.

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

p {
  color: red !important;
}

Dieses Beispiel zeigt einen Fall von übermäßiger Spezifizierung eines Selektors. Egal wie hoch der Selektor-Spezifität mit einer normalen Deklaration übereinstimmt, eine wichtige Deklaration aus derselben Quelle und Kaskadierschicht wird immer Vorrang haben. In diesem Fall wird der Absatz immer rot sein.

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

#myElement p {
  color: green !important;
}

p {
  color: purple !important;
}

In diesem Fall ist die Spezifität des Selektors von Bedeutung. Nur wenn die Selektoren dieselbe Spezifität hätten, würde die Quellreihenfolge von Bedeutung sein.

Einfluss auf Kurzschreibweise-Eigenschaften

Wenn eine Kurzschreibweise-Eigenschaft mit !important deklariert wird, werden alle Untereigenschaften als wichtig gesetzt. Die beiden folgenden Selektor-Stilblöcke 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 der mehrere Gründe, warum das Vermeiden des important-Flags im Allgemeinen empfohlen wird.

Einfluss auf benutzerdefinierte Eigenschaften

Wenn das !important-Flag zu einer Deklaration des Wertes einer benutzerdefinierten Eigenschaft hinzugefügt wird, macht es die Wertzuweisung wichtig. Das !important-Flag wird dann aus dem Wert der benutzerdefinierten Eigenschaft entfernt. Das !important-Flag wird nicht als Teil des Werts der benutzerdefinierten Eigenschaft an die var()-Funktion ü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 sein, nicht blau, da die Wertzuweisung der benutzerdefinierten Eigenschaft wichtig ist. Das Blockzitat wird lila sein, da die normale lila Deklaration nach der normalen roten Deklaration kommt.

Best Practices

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

Selbst wenn Sie daran arbeiten, hochspezifische Stile zu überschreiben, die nicht unter Ihrer Kontrolle stehen, wie zum Beispiel Stile in einem 3rd Party-Plugin, das mit einem ID-Selektor deklariert wurden, müssen Sie !important nicht verwenden. Ziehen Sie stattdessen in Betracht, das Stylesheet-Skript der Drittanbieter in eine benannte oder anonyme Schicht als Ihre erste Kaskadierschicht zu importieren, anstatt !important zu verwenden. Solange die externen Stile keine wichtigen Deklarationen enthalten, werden Ihre Stile über den Widget-Stilen Vorrang haben, unabhängig von der Spezifität.

Wenn Sie ein externes Stylesheet überschreiben müssen, das wichtige Deklarationen enthält, erstellen Sie eine Kaskadierschicht, die die erforderlichen Überschreibungen enthält, und deklarieren Sie diese Schicht zuerst.

Barrierefreiheitsbedenken

Wichtige Stile aus einem Benutzer-Stilblatt haben Vorrang vor den wichtigen Deklarationen im Autoren-Stilblatt, was bedeutet, dass das Hinzufügen eines !important-Flags zu den Stilvorlagen einer Website nicht verhindert, dass einzelne Benutzer mit besonderen Anforderungen, wie großen Schriften, Ihre Stile durch das Hinzufügen wichtiger Stile in ihrem eigenen Benutzer-Stilblatt überschreiben können.

Browser-Kompatibilität

Diese Funktion wird in allen Browsern unterstützt.

Siehe auch

• CSS-Spezifität
• CSS-Kaskade