Gunnar Bittersmann: CSS-Fehler zu Deklaration und Regelsatz

Beitrag lesen

@@Linuchs

zugehörige CSS-Zeilen:

table.liste thead {
  position: -webkit-sticky;
  position: moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;   /* bleibt beim Scrollen am oberen Rand kleben */
  top: 5px;
  background-color: #fe0;
}

Zunächst einmal: Es ist nicht sinnvoll, mit Vendor-Präfixen wild um sich herumzuballern. Sinnvoll ist, sich zu informieren, z.B. bei Can I use.

moz-sticky hat es nie gegeben und wird es auch nicht. (Und wenn, dann hätte es auch -moz-sticky sein müssen).
-o-sticky hat es nie gegeben und wird es auch nicht.
-ms-sticky hat es nie gegeben und wird es auch nicht.

die Firefox-Konsole meldet sowas:

Fehler beim Verarbeiten des Wertes für 'position'.  Deklaration ignoriert.
Fehler beim Verarbeiten des Wertes für 'position'.  Deklaration ignoriert.
Fehler beim Verarbeiten des Wertes für 'position'.  Deklaration ignoriert.
Fehler beim Verarbeiten des Wertes für 'position'.  Deklaration ignoriert.

4 Meldungen für die 4 Deklarationen, mit deren Werten -webkit-sticky, moz-sticky, -o-sticky und -ms-sticky Firefox nicht anfangen kann und deshalb die Deklarationen ignoriert.

Die Angabe position: sticky; wirkt aber.

Das ist ja das Gute: das „HTML und CSS (im vollen Gegensatz bspw. zu JavaScript) so konzipiert sind, dass Browser, die ein bestimmtes Feature nicht verstehen, keinen Fehler werfen und ihren Dienst quittieren, sondern das Feature (sei es ein unbekanntes HTML-Element oder -Attribut, eine unbekannte CSS-Eigenschaft oder Wert) ignorieren und ihre Arbeit (d.h. die Darstellung der Webseite) fortsetzen.“ [yours truly]

Anderer Fall. Fehler lautet:

Unbekannte Pseudoklasse oder Pseudoelement '-webkit-input-placeholder'.  Regelsatz wegen ungültigem Selektor ignoriert.

zugehörige CSS-Zeilen:

::-webkit-input-placeholder,  /* WebKit, Blink, Edge */
:-moz-placeholder,            /* Mozilla Firefox 4 to 18 */
::-moz-placeholder,           /* Mozilla Firefox 19+ */
:-ms-input-placeholder,       /* Internet Explorer 10-11 */
::placeholder {               /* April 2017: Most modern browsers stackoverflow.com */
  color:    #faa;
  opacity: 1;
}

In diesem Fall wird auch der eigentlich gültige ::placeholder abgelehnt.

Genau das besagt ja die Meldung: „Regelsatz [Selektoren und alles zwischen { und }] wegen ungültigem Selektor ignoriert.“

Du müsstest das als jeweils eine Regel notieren:

::-webkit-input-placeholder {  /* WebKit, Blink, Edge */
  color:    #faa;
  opacity: 1;
}
:-moz-placeholder {            /* Mozilla Firefox 4 to 18 */
  color:    #faa;
  opacity: 1;
}
::-moz-placeholder {           /* Mozilla Firefox 19+ */
  color:    #faa;
  opacity: 1;
}
:-ms-input-placeholder {       /* Internet Explorer 10-11 */
  color:    #faa;
  opacity: 1;
}
::placeholder {               /* April 2017: Most modern browsers stackoverflow.com */
  color:    #faa;
  opacity: 1;
}

Vorher schaust du aber bei Can I use nach, welche Präfix-Regeln wirklich sinnvoll wären. :-moz-placeholder und ::-moz-placeholder gewiss nicht.

Welche nachvollziehbare Regel steht dahinter, dass einmal ein Element einer Aufzählung akzeptiert wird, eine anderes Mal nicht?

Bei nicht verarbeitbaren Deklarationen wird nur die einzelne Deklaration ignoriert; bei nicht verarbeitbaren Regeln (d.h. auch bei nicht verarbeitbaren Selektoren) wird die gesamte Regel ignoriert.

LLAP 🖖

--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann