CSS-Fehler zu Deklaration und Regelsatz

[Linuchs]

Moin,

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.

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;
}

Die Angabe position: sticky; wirkt aber.

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.

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

Gruß, Linuchs

[marctrix]

Hej Linuchs,

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

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;
}

Hier fehlt mindestens ein - zu Beginn des Vendor Präfixes:

position: moz-sticky;

Woher kommen denn die vielen Vendor-Präfixe? Verwendest du nicht ein Tool wie Autopräfixer? Das solltest du tunlichst regelmäßig laufen lassen, damit nciht mehr benötigter Code auch wieder gelöscht wird. Zumal du selber sagst:

Die Angabe position: sticky; wirkt aber.

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.

Sicher, dass FF den kann/kennt?

Davon ab: die Vendor-Präfixe für so alte Feuerfüchse willst du doch wohl nicht drin lassen? Wer ist denn mit so was noch unterwegs?

Gilt auch für andere vollkommen veraltete Browser. Damit verlangsamst du deine Webseite für 100% Deiner Nutzer um 0.125% zu unterstützen - schlechtes Geschäft!

Marc

[marctrix]

Hej marctrix,

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.

Sicher, dass FF den kann/kennt?

Klar kennt er den, schon seit ewigne Zeiten. Steht ja auch in Deinem Kommentar. Also raus mit den Vendor-Präfixen! 😉

Marc

[Linuchs]

Hallo Marc,

Vorab: Anders als bei anderen meiner Beiträge (geschlossene Benutzergruppe, FF vorgeschrieben) geht es hier um öffentliche Seiten, die browser-offen sein sollten.

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

Sicher, dass FF den kann/kennt?

Ja, wenn er einzeln steht:

*::placeholder {               /* April 2017: Most modern browsers stackoverflow.com */
  color:    #faa;
  opacity: 1;
}

Davon ab: die Vendor-Präfixe für so alte Feuerfüchse willst du doch wohl nicht drin lassen? Wer ist denn mit so was noch unterwegs?

Es hat sich gezeigt, dass Auskünfte oft gut gemeint, aber nicht (allgemein)gültig sein müssen. Suchmaschinen bieten gerne uralte Seiten an.

Ich selbst oute mich, dass ich noch ein LG-Smartphone von 2011 habe. Wieso sollte ich als Webmaster die Wegwerf-Gesellschaft forcieren? Mich nervt der FF, dass er auf nicht-https-Seiten bei der Passwort-Eingabe die darunter liegenden Felder, also auch den Submit-Button abdeckt mit einer Warnmeldung.

Wenn es eine Möglichkeit gibt, unbekannte oder falsche CSS-Angaben (je nach Browser) per Ajax oder sonstwie zu melden, bin ich dabei. Wie geht das?

So eine abgeschickte Webseite geht aus der Sicht des Webmasters ja ins Nirwana, ohne Fehler beim Leser zu bemerken und rückzumelden.

Linuchs

[marctrix]

Hej Linuchs,

Vorab: Anders als bei anderen meiner Beiträge (geschlossene Benutzergruppe, FF vorgeschrieben) geht es hier um öffentliche Seiten, die browser-offen sein sollten.

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

Sicher, dass FF den kann/kennt?

Ups, das sollte da gar nicht mehr stehen, hatte zwischenzeitlich nachgeschlagen…

Davon ab: die Vendor-Präfixe für so alte Feuerfüchse willst du doch wohl nicht drin lassen? Wer ist denn mit so was noch unterwegs?

Es hat sich gezeigt, dass Auskünfte oft gut gemeint, aber nicht (allgemein)gültig sein müssen. Suchmaschinen bieten gerne uralte Seiten an.

Das verstehe ich nicht.

Aber davon abgesehen: hast du denn eine Statistik? Die bietet doch jeder Provider inklusive an. Wenn du die Seite selber hostest, solltest du eine Statistiksoftware verwenden, die die nutzerdaten komplett rausschmeißt (du hast ja vermutlich nicht vor, die Nutzer auszuspionieren), dir aber zeigt, mit welchen Browsern Menschen deine Website besuchen.

Wenn da bei dir monatelang ken einziger ff4-Nutzer mehr war, dann brauchst du nicht Traffic für alle erzeugen, der niemandem nutzt.

Geht ja letztendlich auf die Umwelt und genau das stört einen ja an der wegwerfgesellschaft, oder?

Ich selbst oute mich, dass ich noch ein LG-Smartphone von 2011 habe. Wieso sollte ich als Webmaster die Wegwerf-Gesellschaft forcieren?

Weil veraltete Software eine Gefahr für das Internet und unsere Demokratie ist!

Wenn es eine Möglichkeit gibt, unbekannte oder falsche CSS-Angaben (je nach Browser) per Ajax oder sonstwie zu melden, bin ich dabei. Wie geht das?

Wem willst du was melden? Dem Betreiber von Seiten, die du besuchst?

So eine abgeschickte Webseite geht aus der Sicht des Webmasters ja ins Nirwana, ohne Fehler beim Leser zu bemerken und rückzumelden.

Ich verstehe nicht, was du meinst, sorry…

Marc

[dedlfix]

Tach!

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

Ich kenne die Fehlerroutinen und Fehlerbearbeitungsvorschläge oder -vorschriften des Standards nicht, aber der erste Fall ist keine Aufzählung, sondern eine Ansammlung von Eigenschaften, die zufällig die gleichen sind. Wenn da eine ungültig ist, hat das keine Auswirkung auf die anderen.

Der zweite Fall ist hingegen ein Selektor, der aus mehreren Teilselektoren besteht. Wenn da ein Teil aus Sicht des Browsers defekt ist, wird augenscheinlich der ganze Selektor verworfen. So funktionieren ja auch CSS-Hacks, die auf Selektoren basieren, die nur in einigen Browser anerkannt werden.

dedlfix.

[MudGuard]

Hi,

Ich kenne die Fehlerroutinen und Fehlerbearbeitungsvorschläge oder -vorschriften des Standards nicht, aber der erste Fall ist keine Aufzählung, sondern eine Ansammlung von Eigenschaften, die zufällig die gleichen sind. Wenn da eine ungültig ist, hat das keine Auswirkung auf die anderen.

Richtig, wenn ein property oder ein value unbekannt sind, wird exakt dieses property:value ignoriert.

Der zweite Fall ist hingegen ein Selektor, der aus mehreren Teilselektoren besteht. Wenn da ein Teil aus Sicht des Browsers defekt ist, wird augenscheinlich der ganze Selektor verworfen. So funktionieren ja auch CSS-Hacks, die auf Selektoren basieren, die nur in einigen Browser anerkannt werden.

Richtig, wenn ein Selector defekt ist, muß das gesamte Stück (Selector + { properties }) ignoriert werden.

Bei

guterSelector1, kaputterSelector, guterSelector2 { color:red; background-color:yellow; }

wird nix umgefärbt, weil wegen des kaputten Teils das Stück insgesamt ignoriert werden muß.

Bei

guterSelector1 { color:red; background-color:yellow; }
kaputterSelector { color:red; background-color:yellow; }
guterSelector2 { color:red; background-color:yellow; }

würde nur der mittlere Teil ignoriert.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@dedlfix

aber der erste Fall ist keine Aufzählung, sondern eine Ansammlung von Eigenschaften, die zufällig die gleichen sind.

Was wäre der Unterschied zwischen Aufzählung und Ansammlung? Geordnete vs. ungeordnete Liste?

Die Deklarationen einer Regel sind geordnet.

Der zweite Fall ist hingegen ein Selektor, der aus mehreren Teilselektoren besteht.

Nein. Es ist eine Selektorliste, die aus mehreren Selektoren besteht.

LLAP 🖖

[Gunnar Bittersmann]

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

[Gunnar Bittersmann]

@@Gunnar Bittersmann

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]

Siehe dazu auch: „HTML und CSS sind in ihrer Natur gänzlich anders als JavaScript.“

LLAP 🖖