Quel est l'état actuel de l'attribut "portée" de l'élément de style en HTML5?
Il est indiqué ici http://www.w3.org/TR/html-markup/style.html#style :
Éléments parents autorisés
tout élément pouvant contenir des éléments de métadonnées, div, noscript, section, article, à part
que <style> est plus ou moins autorisé partout (où <div> est autorisé) Mais, par contre, j'ai trouvé des informations plus détaillées 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 tard dans ce document:
L'attribut scoped est un attribut booléen. Si présent, il indique que les styles sont uniquement destinés au sous-arbre enraciné dans le style L'élément parent de l'élément, par opposition à l'ensemble du document.
Si l'attribut scoped est présent et que l'élément a un parent élément, l'élément de style doit être le premier nœud du contenu du flux dans son élément parent autre que les espaces inter-éléments, et le Le modèle de contenu de l'élément parent ne doit pas comporter de composant transparent.
Cela se lit comme il y a (ou sera) "deux éléments <style> différents": a
<style>- global - ~~ uniquement dans<head><"scopestyle">- seulement (!) avec une portée bool et ~~ seulement au début de<div>
(Veuillez lire "~~" comme "plus ou moins")
Mais le dernier lien a plus de 2 ans et tous les navigateurs (j’ai testé Chrome, FF, IE, Opera) interprètent le flux entrant <style> comme s’il se trouvait dans l’en-tête. (et ignorer autant que je sache la portée - oui - toujours pas de norme)
Donc ma question en 3 parties
Mon interprétation des documents du W3C (les 2 styles - logic) est-elle correcte?
Quel est l'état maintenant - 2015?
Et, y a-t-il probablement quelqu'un là-bas, qui sait ce qui va arriver à l'horizon?
Votre interprétation de la spécification semble correcte. La page MDN de la balise style inclut une description de l’attribut scoped.
scoped Si cet attribut est présent, le style ne s'applique qu'à l'élément parent. S'il est absent, le style s'applique à l'ensemble du document.
L'attribut scope:
Voici un exemple de travail qui ne fonctionnera que dans 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 les navigateurs qui ne prennent pas en charge l'attribut scoped, ces styles sont appliqués de manière globale.
Le pseudo-sélecteur :scope:
En plus de l'attribut scoped, il existe également le pseudo-sélecteur :scope qui peut être utilisé. Cette implémentation offre le même support que la précédente.
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 l’attribut scoped, les styles ne seront pas appliqués de manière globale. Le seul problème est que Safari 7+ reconnaîtra le pseudo-sélecteur :scope, même si l'attribut scoped n'est pas pris en charge. Par conséquent, l'avantage est perdu dans Safari 7+.
Styles globaux:
Comme auparavant, l'utilisation d'une balise style sans l'attribut scoped créera des styles globaux. Elle ne sera donc étendue que si vous incluez l'attribut scoped.
Résumé de compatibilité:
À ce stade, la prise en charge de la fonctionnalité semble sombre. La portée CSS n'est prise en charge que par Firefox 21+. Il n'est actuellement pas pris en charge par Chrome, Internet Explorer, Safari ou Opera. Selon caniuse.com , de Chrome 20 à 36, il était possible d'activer le support avec le drapeau expérimental, mais le support a été supprimé .
Beaucoup de réponses ici sont devenues un peu obsolètes, donc voici un bref résumé de ce qui s’est passé avec l’attribut scoped.
À l'origine (avant HTML5), <style> n'était pas "valide" en dehors de <head>, mais était pris en charge par la plupart des navigateurs, voire tous. "non valide" signifie que les validateurs s'en plaindraient et les spécifications (séries HTML 4 et XHTML 1 du W3C) stipulent que cela ne devrait pas être fait. Mais cela a fonctionné. Et parfois c'était mauvais: peu importe où l'élément <style> apparaissait dans le document, ses règles s'appliqueraient à l'ensemble du document (en fonction des sélecteurs utilisés, bien sûr). Cela pourrait amener les auteurs à rédiger une feuille de style "locale" censée s'appliquer uniquement dans une zone du document, mais pourrait par la suite modifier le style d'autres zones.
La proposition d'attribut scoped de HTML5 était destinée à résoudre ce problème: elle indiquait au navigateur que les styles de cette feuille ne s'appliqueraient qu'à l'élément parent de <style> et à ses descendants. De plus, <style scoped> devait également être le premier enfant de son parent, ce qui rend très clair pour quiconque lisant le code HTML quelle était la portée. L'élément style sans l'attribut est resté valide uniquement dans l'élément <head>.
Le temps a passé et le nombre de fournisseurs ayant implémenté la nouvelle fonctionnalité a été insuffisant (Firefox et Chrome ont également fourni un support expérimental). Le comportement du navigateur reste le même qu'avant HTML 5, mais la spécification actuelle la documente au moins: <style> est maintenant légal/valide dans tout le document, mais la spécification met en garde sur les effets secondaires potentiels (restyling accidentel des éléments).
Avec les spécifications actuelles et le comportement du navigateur, le moyen le plus sûr et le plus sûr d'implémenter des styles "" ciblés "est de le faire explicitement à l'aide d'ID, 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>
La variable div a un attribut id et toutes les règles de la feuille de style utilisent explicitement un sélecteur d'identifiant pour s'assurer qu'elles s'appliquent uniquement à cette div. Bien sûr, cela nécessite toujours d'éviter les conflits d'identifiant dans le document, mais l'unicité est déjà une exigence de l'attribut id.
Bien que l’attribut scoped ait été supprimé, cette approche permet de faire le travail, elle est raisonnablement lisible (bien sûr, comme tout code, elle pourrait être obscurcie, mais ce n’est pas le but), devrait valider, et devrait fonctionner à peu près avec tous les logiciels compatibles CSS. navigateur.
PS: Conformément à la spécification, <style> dans <body> doit être validé. Cependant, le validateur Nu (étiqueté expérimental) s'en plaint toujours. Il existe un problème en suspens à ce sujet: https://github.com/validator/validator/issues/489
Il semble que l'attribut "portée" ait été complètement supprimé de la spécification HTML5. Les versions actuelles et précédentes n'en parlent pas.
Depuis mai 2016, <style scoped> a été supprimé de whatwg specification .
L'objectif principal de HTML5 était de spécifier formellement le comportement que les navigateurs avaient implémenté de manière "définitive", indépendamment des spécifications HTML précédentes. Vous avez toujours été capable d'utiliser une balise <style> n'importe où dans un document HTML. Vous pourrez donc continuer avec HTML5. Cela ne changera pas.
Pour plus d'informations, voici un lien vers la section de spécifications HTML5 actuelle sur l'élément <style>:
http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-style-element