Firefox und W3C: STYLE-scoped-Attribut missverstanden (Stand Firefox 45.0.1)

Artikel ist obsolet/antiquiert!

Eine der Neuerungen in HTML5, die ich besonders fand, war die Erlaubnis CSS-STYLE-Tags überall setzen zu dürfen und nicht nur im HEAD-Tag. Zwar war das schon lange Gang und Gäbe, da Browser keine Probleme mit dem "unerlaubten" Vorgehen haben, aber eben nicht ganz sauber und der W3C-Validator bemängelt das.

Bild in größter Auflösung öffnen (Popup)

Hinweis 2020-07-30: Dieser Beitrag ist hinfällig, da das scoped-Attribut sich nie durchgesetzt hat und auch FireFox es wieder entfernt hat.

Wunderbar. Also setzte ich in einem Template das Einbinden von Webfonts via STYLE vor den schließenden BODY-Tag

...
  <style>
   @import url(http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here);
  </style>
 </body>
</html>

Klar, dass das W3C-Konsortium bei allem, was etwas erleichtert auch gleich wieder was hinzufügt, was die Sache kompliziert macht.

Error: Element style not allowed as child of element body in this context.

Und weitere Häh?-Ausgaben wie diese.

If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace and style elements, and not as the child of an element whose content model is transparent.

Weiteres Nerd-Chinesisch schien irgendwie auf ein fehlendes scoped-Attribut hinzuweisen, das in diesem Kontext noch fehlt, damit alles richtig ist. Das scoped ist festgelegt als vom Typ Boolean, also WAHR/JA oder FALSCH/NEIN.

Ein scoped, das auf JA gesetzt ist, besagt, dass der STYLE-Block nur für HTML-Element und untergeordnete Kinder gilt, innerhalb dem sich der STYLE-Block befindet. Meine Überlegung: Ist im BODY, also setze ich JA. Soll ja für die ganze Seite gelten.

Abstruserweise darf man natürlich für Boolean-Attribute nicht einfach setzen scoped="true" oder scoped="false", sondern muss nach W3C verwenden scoped="scoped" UND für FALSCH/NEIN explizit scoped="".

 Also geändert:

...
  <style scoped="scoped">
   @import url(http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here);
  </style>
 </body>
</html>

Juhuu denkste, denkste aber nur! Jetzt wendet Firefox die Schriftart nicht mehr an und auch die W3C-Fehlermeldung bleibt unverändert.

Les, les, les. Man darf STYLE, egal ob mit oder ohne scoped nicht im BODY direkt (1. Kindebene) verwenden, sondern nur in so genanten Flow-Content-Elementen. Dazu gehört auch das DIV-Element. Zwar hatte ich mich schon längst entschlossen, bezüglich zukünftigem Vorgehen den Mittelfinger auszuklappen, hab aber des Wissens wegen weiterprobiert. Ich setze um den STYLE-Block einen DIV-Container, um den W3C-Validator zufrieden zu stellen. Das scoped-Attribut wird aber auf FALSCH/NEIN gesetzt, um dem Browser mizuteilen, dass enthaltenes CSS für die gesamte Seite gilt und nicht nur für den umgebenden DIV.

...
<div>
  <style scoped="">
   @import url(http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here);
  </style>
</div>
 </body>
</html>

Möchte man nur meinen. Der W3C-Validator ist zufrieden, aber Firefox wendet das CSS nicht an für den Rest der Seite, da Firefox das scoped als JA/WAHR interpretiert, obwohl es nach W3C-Regularien eindeutig so als NEIN/FALSCH deklariert ist.

Wer will mich jetzt mal können wollen? TockTockTock! Bleib ich bei nicht-W3C-valide und denke über den Firefox schlechter als zuvor. Wozu implementiert man das dann?

Nun gut. Ein scoped = WAHR/JA könnte ganz praktisch sein, da man gezielt für bestimmte Bereiche CSS definieren kann, das für andere nicht gilt. Macht aber auch keinen Sinn, da meines Wissens andere Browser als Firefox gar nix damit anfangen können. Also nur ein Tipp für meine Kindeskinder.