Matthias Apsel: !important bei CSS-Variablen

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

--
Rosen sind rot.
  1. 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.

    1. 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

      --
      Rosen sind rot.
      1. 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.

        1. 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.

          1. @@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 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      2. In meinem Google Chrome und Firefox, jeweils die aktuellen Versionen unter Windows 10 sieht es so aus

        Alternativ-Text

        Microsoft Edge ebenfalls unter Windows 10 sieht es so aus

        Alternativ-Text

        1. @@Achot

          Microsoft Edge ebenfalls unter Windows 10 sieht es so aus

          Alternativ-Text

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

          Kommt Edge 15, kommt Besserung.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. @@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.

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  3. 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

  4. @@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 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. 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

      --
      Rosen sind rot.