it-swarm.com.de

Wie ist der aktuelle Status des Attributs "scoped" für das Style-Element in HTML5?

Hier steht http://www.w3.org/TR/html-markup/style.html#style :

Zulässige übergeordnete Elemente

jedes Element, das Metadatenelemente, div, noscript, section, article usw. enthalten kann

dieser <style> ist mehr oder weniger überall erlaubt (wo <div> erlaubt ist), aber andererseits habe ich hier eine detailliertere Information gefunden http://www.w3.org/TR/2012/WD-html5-20121025 /the-style-element.html#attr-style-scoped

Kontexte, in denen dieses Element verwendet werden kann: (Anmerkung: Stil)

If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace, and not as the child of an element whose content model is transparent.

und später in diesem Dokument:

Das Bereichsattribut ist ein boolesches Attribut. Wenn vorhanden, bedeutet dies, dass die Stile nur für den Teilbaum bestimmt sind, der auf dem übergeordneten Element des Stilelements und nicht auf dem gesamten Dokument basiert.

Wenn das Attribut scoped vorhanden ist und das Element ein übergeordnetes Element hat, muss das style-Element der erste Knoten des Flow-Inhalts in seinem übergeordneten Element sein, der kein Leerzeichen zwischen Elementen ist, und das Inhaltsmodell des übergeordneten Elements darf keine transparente Komponente haben.

Dies liest sich so, als ob es "zwei verschiedene <style> -Elemente" gibt (oder geben wird): a

  • <style> - global - ~~ nur innerhalb von <head>
  • <"scopestyle"> - nur (!) mit bool scope attr und ~~ nur zu Beginn von <div>

(Bitte lesen Sie "~~" wie "mehr oder weniger")

Aber der spätere Link ist mehr als 2 Jahre alt und alle Browser (ich habe Chrome, FF, IE, Opera getestet) interpretieren den Zufluss <style> so, als ob er im Header wäre. (und AFAIK den Geltungsbereich ignorieren - ja - noch kein Standard)

Also meine 3-teilige Frage

  1. Ist meine Interpretation der W3C-Dokumente (die 2 Stile - Logik) korrekt?

  2. Wie ist der Stand jetzt - 2015?

  3. Und gibt es da draußen wahrscheinlich jemanden, der weiß, was am Horizont kommt?

24
halfbit

Ihre Interpretation der Spezifikation scheint richtig zu sein. Die MDN-Seite des style-Tags enthält eine Beschreibung des scoped-Attributs.

scoped Wenn dieses Attribut vorhanden ist, gilt der Stil nur für sein übergeordnetes Element. Wenn nicht vorhanden, gilt der Stil für das gesamte Dokument.


Das scope-Attribut:

Hier ist ein funktionierendes Beispiel, das nur in Firefox 21+ funktioniert.

Beispiel:

<div>
  <p>Out of scope.</p>
  <div>
    <style scoped>
      p {
        background: green;
      }
    </style>
    <p>In scope (green background).</p>
  </div>
  <p>Out of scope.</p>
</div>

In Browsern, die das Attribut scoped nicht unterstützen, werden diese Stile global angewendet.


Der :scope Pseudo-Selektor:

Neben dem Bereichsattribut gibt es auch den den :scope-Pseudo-Selektor , der verwendet werden kann. Diese Implementierung bietet die gleiche Unterstützung wie die vorherige.

Beispiel:

<div>
  <p>Outside scope.</p>
  <div>
    <style scoped>
      :scope p {
        background: green;
      }
    </style>
    <p>In scope (green background).</p>
  </div>
  <p>Outside scope.</p>
</div>

Diese Option bietet außerdem den möglichen Vorteil, dass die Stile nicht global angewendet werden, wenn der Browser das Attribut scoped nicht versteht. Das einzige Problem ist, dass Safari 7+ den :scope-Pseudo-Selektor erkennt, obwohl das scoped-Attribut nicht unterstützt wird. In Safari 7+ geht der Vorteil daher verloren.


Globale Stile:

Wenn Sie ein style-Tag ohne das scoped-Attribut verwenden, werden globale Stile erstellt. Dies gilt nur, wenn Sie das scoped-Attribut verwenden.


Kompatibilitätszusammenfassung:

An dieser Stelle sieht die Unterstützung für die Funktion düster aus. CSS-Scoping wird nur in Firefox 21+ unterstützt. Es wird derzeit nicht in Chrome, Internet Explorer, Safari oder Opera unterstützt. Laut caniuse.com war es von Chrome 20 bis 36 möglich, die Unterstützung mit dem experimentellen Flag zu aktivieren, aber Unterstützung wurde entfernt .

17

Viele der Antworten hier sind etwas veraltet, daher folgt eine kurze Zusammenfassung dessen, was mit dem Attribut scoped geschehen ist.

Ursprünglich (vor HTML5) war <style> außerhalb von <head> nicht "gültig", wurde aber von den meisten oder allen Browsern unterstützt. "ungültig" bedeutet, dass Validatoren sich darüber beschweren würden, und die Spezifikationen (W3Cs HTML 4- und XHTML 1-Serie) sagten, dass dies nicht getan werden sollte. Aber es hat funktioniert. Und manchmal war das schlecht: Unabhängig davon, wo das <style>-Element im Dokument auftaucht, gelten seine Regeln für das gesamte Dokument (natürlich basierend auf den verwendeten Selektoren). Dies kann dazu führen, dass Autoren ein "lokales" Stylesheet schreiben, das nur für einen Bereich des Dokuments gelten soll, andere Bereiche jedoch aus Versehen neu gestalten können.

Mit dem scoped-Attributvorschlag von HTML5 sollte dies angegangen werden: Dies würde dem Browser mitteilen, dass die Stile in diesem Arbeitsblatt nur für das übergeordnete Element von <style> und dessen Nachkommen gelten würden. Irgendwann musste <style scoped> auch das erste untergeordnete Element seines übergeordneten Elements sein, sodass für jeden, der den HTML-Code liest, der Umfang eindeutig ist. Das style-Element ohne das Attribut blieb nur innerhalb des <head>-Elements gültig.

Die Zeit verging und nicht genug Anbieter implementierten die neue Funktion (Firefox und Chrome enthielten experimentelle Unterstützung). Das Browserverhalten bleibt wie vor HTML 5, aber die aktuelle Spezifikation dokumentiert es zumindest: <style> ist jetzt im gesamten Dokument zulässig/gültig, aber die Spezifikation warnt vor möglichen Nebenwirkungen (versehentliches Umgestalten von Elementen).

Bei aktuellen Spezifikationen und Browserverhalten ist die beste und sicherste Methode zum Implementieren von "Scope" -Stilen die explizite Verwendung von IDs wie in diesem Snippet:

<div id="myDiv">
  <style>
    #myDiv p { margin: 1em 0; }
    #myDiv em { color: #900; }
    #myDiv whatever { /* ... */ }
  </style>
  <p>Some content here... </p>
</div>

Die Variable div verfügt über ein Attribut id. Alle Regeln im Stylesheet verwenden explizit einen ID-Selektor, um sicherzustellen, dass sie nur innerhalb dieses div gelten. Natürlich ist dies immer noch erforderlich, um ID-Konflikte im gesamten Dokument zu vermeiden, aber die Eindeutigkeit ist bereits eine Anforderung des Attributs id.

Obwohl das scoped-Attribut gelöscht wurde, erledigt dieser Ansatz die Arbeit, ist einigermaßen lesbar (natürlich wie jeder Code könnte er verschleiert werden, aber das ist nicht der Punkt), sollte validiert werden und sollte auf fast allen CSS-kompatiblen Systemen funktionieren Browser.

PS: Laut Spezifikation sollte <style> in <body> überprüft werden. Der Nu-Validator (als experimentell gekennzeichnet) beklagt sich jedoch immer noch darüber. Hier gibt es ein offenes Problem: https://github.com/validator/validator/issues/489

7
Edurne Pascual

Es scheint, dass das Attribut "Gültigkeitsbereich" vollständig aus der HTML5-Spezifikation entfernt wurde. In den aktuellen und den vorherigen Versionen ist davon nichts erwähnt.

7
CXJ

Seit Mai 2016 wurde <style scoped> aus der whatwg Spezifikation gestrichen.

1
Gaurang Patel

Das Hauptziel von HTML5 bestand darin, das Verhalten zu definieren, das Browser grundsätzlich "für immer" implementiert haben, unabhängig von früheren HTML-Spezifikationen. Sie konnten ein <style>-Tag immer an einem beliebigen Ort innerhalb eines HTML-Dokuments verwenden. Mit HTML5 können Sie es jedoch weiterhin. Das wird sich nicht ändern.

Weitere Informationen finden Sie hier zum aktuellen Abschnitt der HTML5-Spezifikation im Element <style>:

http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-style-element

0