!important bei CSS-Variablen

[Matthias Apsel]

Hallo alle,

offensichtlich wird das Schlüsselwort !important bei CSS-Variablen nicht berücksichtigt.

Siehe Pen.

Ist das so spezifiziert?

Interessant wäre es für das Validierungs-Stylesheet im Sinne von DRY.

Bis demnächst
Matthias

[beatovich]

offensichtlich wird das Schlüsselwort !important bei CSS-Variablen nicht berücksichtigt.

Siehe Pen.

Ist das so spezifiziert?

Interessant wäre es für das Validierungs-Stylesheet im Sinne von DRY.

Firefox zeigt die erwünschte Farbe.

[Matthias Apsel]

Hallo beatovich,

Firefox zeigt die erwünschte Farbe.

Hm. In meinem FF (Win10) ist der obere Absatz rot und nur der untere gold.

Bis demnächst
Matthias

[beatovich]

Hm. In meinem FF (Win10) ist der obere Absatz rot und nur der untere gold.

Bis demnächst
Matthias

Rosen sind rot.

Ach, nochmals geschaut. Nein FF zeigt #foo ebenfalls rot.

[beatovich]

hallo

:root {
  --my-bg-color: gold;
}
p {
  background-color: var(--my-bg-color) !important;
}
#foo {
  background-color: red;
}

färbt in FF auch #foo golden ein.

[Gunnar Bittersmann]

@@beatovich

:root {
  --my-bg-color: gold;
}
p {
  background-color: var(--my-bg-color) !important;
}
#foo {
  background-color: red;
}

färbt in FF auch #foo golden ein.

Natürlich. Das war aber hier nicht die Frage.

LLAP 🖖

[Achot]

In meinem Google Chrome und Firefox, jeweils die aktuellen Versionen unter Windows 10 sieht es so aus

Microsoft Edge ebenfalls unter Windows 10 sieht es so aus

[Gunnar Bittersmann]

@@Achot

Microsoft Edge ebenfalls unter Windows 10 sieht es so aus

Die Browserunterstützung von custom properties hatte ich bereits verlinkt.

Kommt Edge 15, kommt Besserung.

LLAP 🖖

[Gunnar Bittersmann]

@@Matthias Apsel

offensichtlich wird das Schlüsselwort !important bei CSS-Variablen nicht berücksichtigt. […]
Interessant wäre es für das Validierungs-Stylesheet im Sinne von DRY.

So weit war ich auch schon mal. ;-)

LLAP 🖖

PS: Gerade mit Freude festgestellt, dass Edge 15 custom properties zumindest partiell unterstützen wird.

[j4nk3y]

Hey,

Also falls p { background-color: var(--my-bg-color) !important; } dort stünde, funktioniert es. Hat vielleicht damit zutun das nicht die Variable !important sein muss, sondern die Anweisung ansich.

Gruß
Jo

[Gunnar Bittersmann]

@@Matthias Apsel

offensichtlich wird das Schlüsselwort !important bei CSS-Variablen nicht berücksichtigt. […]
Ist das so spezifiziert?

Aber sicher.

“The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)” [CSS-Variables §3]

!important gehört nicht mit zum Wert: “the delimiter token "!" and keyword "important" follow the declaration” [CSS2.2 §6.4.2]

(Hervorhebungen von mir.)

Hm, was vielleicht so nicht ganz korrekt ist. In der Grammatik [CSS2.2 §G] steht:

declaration
  : property ':' S* expr prio?
  ;

Das heißt: !important folgt dem Wert, gehört aber mit zur Deklaration dazu.

Ich werd bei Gelegenheit mal ein Bug-Ticket erstellen.

!important gehört jedenfalls nicht mit zum Wert dazu; kann also nicht Teil des Werts der custom property sein.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ich werd bei Gelegenheit mal ein Bug-Ticket erstellen.

Mach dir einen Knoten ins Taschentuch. Aber nicht in das, wo schon der für den main-blog-Beitrag drin ist.

!important gehört jedenfalls nicht mit zum Wert dazu; kann also nicht Teil des Werts der custom property sein.

Thx.

Bis demnächst
Matthias