Quel est l'état actuel de l'attribut "scoped" pour l'élément style dans HTML5?
Il déclare ici http://www.w3.org/TR/html-markup/style.html#style:
éléments parentaux autorisés
tout élément pouvant contenir des éléments de métadonnées, div, noscript, section, article, Apart
<style> est plus ou moins autorisé à chaque endroit (où <div> est autorisé)
mais, d'autre part, j'ai trouvé une information plus détaillée ici http://www.w3.org/TR/2012/WD-html5-20121025/the-style-element.html#attr-style-scoped
Contextes dans lesquels cet élément peut être utilisé: (annotation: style)
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.
et plus loin dans ce document:
l'attribut scoped est un attribut booléen. S'il est présent, il indique que les styles sont destinés uniquement au subtree enraciné dans le style l'élément parent de l'élément, par opposition à l'ensemble de la Document.
si l'attribut scoped est présent et que l'élément a un parent élément, alors l'élément style doit être le premier noeud du contenu de flux dans son élément parent autre que l'espace interélément, et le le modèle de contenu de l'élément parent ne doit pas avoir de composante transparente.
on dirait qu'il y a (ou qu'il y aura) "deux différents <style>":
<style>- global - ~~seulement à l'intérieur de<head><"scopestyle">- seulement(!) avec une portée bool attr et ~~seulement au début de<div>
(pls. lire "~~" aimer "plus ou moins")
mais le dernier lien date de plus de 2 ans, et tous les navigateurs (J'ai testé Chrome, FF, IE, Opera) interprètent l'entrée <style> comme si elle était en tête. (et d'ignorer autant que je sache, le champ d'application - oui - toujours pas de standard)
alors ma question en 3 parties
est mon interprétation des documents du W3C (les 2 styles - logique) correct?
Quel est l'état actuel-2015?
et, y a-t-il probablement quelqu'un dehors, qui sait ce qui se profile à l'horizon?
5 réponses
Votre interprétation de la spécification semble correct. page MDN sur la balise style comprend une description de l' scoped l'attribut.
portée Si cet attribut est présent, alors le style ne s'applique qu'à son élément parent. En cas d'absence, le style s'applique à l'ensemble du document.
scope l'attribut:
Voici un exemple de ce cela ne fonctionnera qu'avec Firefox 21+.
Exemple:
<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>Dans le navigateur qui ne supporte pas l' scoped attribut, ces styles sont appliqués globalement.
:scope pseudo-selecteur:
en plus de l'attribut scoped, il y a aussi le :scope pseudo-sélecteur qui peut être utilisé. Cette application offre le même soutien que l' précédent.
Exemple:
<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>Cette option ajoute également l'avantage possible que si le navigateur ne comprend pas les scoped attribut, les styles ne seront pas appliqués globalement. Le seul problème est que Safari 7+ reconnaîtra le :scope pseudo-sélecteur, même si l' scoped attribut n'est pas supporté, donc l'avantage est perdu dans Safari 7+.
mondial Styles:
comme avant, en utilisant un style tag sans scoped attribut va créer des styles globaux, donc il ne sera scoped que si vous incluez le scoped l'attribut.
Compatibilité - > Résumé:
à ce stade, le support de la fonctionnalité semble sombre. CSS scoping est supporté seulement dans Firefox 21+. Il n'est pas actuellement pris en charge dans Chrome, Internet Explorer, Safari ou Opera. Selon caniuse.com, à partir de Chrome de 20 à 36, il a été possible d'activer la prise en charge avec l'expérimental drapeau, mais support a été supprimé.
il semble que l'attribut" scoped " a été complètement supprimé de la spécification HTML5. Les quelques versions actuelles et précédentes n'en font aucune mention.
bon nombre des réponses ici sont devenues quelque peu désuètes, alors voici un bref résumé de ce qui s'est passé avec le scoped l'attribut.
à l'Origine (avant de HTML5), <style> n'est pas "valide" à l'extérieur <head>, mais a été pris en charge par la plupart ou tous les navigateurs. "non valide" signifie que les validateurs se plaindraient à ce sujet, et les spécifications (W3C HTML 4 et XHTML 1 série) dit que cela ne devrait pas être fait. Mais il a travaillé. Et parfois c'était mauvais: peu importe où le <style> Élément apparu dans le document, ses règles s'appliqueraient à l'ensemble du document (basé sur les sélecteurs utilisés, bien sûr). Cela pourrait conduire les auteurs à écrire une feuille de style "locale" destinée à s'appliquer uniquement dans une zone du document, mais pourrait accidentellement modifier d'autres zones.
html5's scoped la proposition d'attribut visait à répondre à cette question: elle indiquerait au navigateur que les styles de cette feuille ne s'appliqueraient qu'à <style>'s parent de l'élément et de ses descendants. Aussi, à un certain point <style scoped> a également été doit être le premier enfant de son parent, ce qui rend très clair pour quiconque lisant le code HTML quelle était la portée. style l'élément sans l'attribut n'est resté valide que dans <head> élément.
le temps a passé et pas assez de fournisseurs ont implémenté la nouvelle fonctionnalité (Firefox et Chrome ont inclus un support expérimental), donc elle a finalement été abandonnée. Le comportement du navigateur reste tel QU'il était avant HTML 5, mais la spécification actuelle le documente au moins:<style> est maintenant juridique / valide dans tout le document, mais le spec met en garde contre les effets secondaires potentiels (éléments restyling accidentellement).
avec les spécifications actuelles et le comportement du navigateur, la meilleure et la plus sûre façon de mettre en œuvre des styles "scoped" est de le faire explicitement avec L'aide de ID's, comme dans cet extrait:
<div id="myDiv">
<style>
#myDiv p { margin: 1em 0; }
#myDiv em { color: #900; }
#myDiv whatever { /* ... */ }
</style>
<p>Some content here... </p>
</div>
divid attribut, et toutes les règles de la feuille de style utilisent explicitement un sélecteur d'id pour s'assurer qu'elles ne s'appliquent qu'à l'intérieur de cette div. Bien sûr, cela nécessite toujours d'éviter les conflits d'id à travers le document, mais l'unicité est déjà une exigence de la id l'attribut.
Bien que le scoped attribut a été abandonné, cette approche fait le travail, est raisonnablement lisible (bien sûr, comme tout code, il pourrait être obscurci, mais ce n'est pas la question), devrait valider, et devrait fonctionner sur à peu près tous les navigateurs compatibles CSS.
PS: conformément à la spécification, <style> à l'intérieur de <body> valider. Cependant, le nu validator (étiqueté comme expérimental) s'en plaint toujours. Il y a une question ouverte à ce sujet:https://github.com/validator/validator/issues/489
à partir de mai 2016,<style scoped> a été supprimé de whatwg cahier des charges.
le but principal de HTML5 était de spécifier formellement le comportement que les navigateurs ont mis en œuvre essentiellement "pour toujours" indépendamment des spécifications HTML précédentes. Vous avez toujours été en mesure d'utiliser un <style> balise n'importe où dans un document HTML, HTML5, vous serez toujours en mesure de. Cela ne changera pas.
pour plus d'informations, voici un lien vers la section specifications HTML5 actuelle sur le <style> élément:
http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-style-element