data - style html5
¿Cuál es el estado actual del atributo "ámbito" para el elemento de estilo en HTML5? (5)
Aquí se indica http://www.w3.org/TR/html-markup/style.html#style :
Elementos parentales permitidos
cualquier elemento que pueda contener elementos de metadatos, div, noscript, sección, artículo, aparte
ese <style> está más o menos permitido en todas partes (donde <div> está permitido) pero, por otro lado, encontré información más detallada aquí http://www.w3.org/TR/2012/WD-html5-20121025/the-style-element.html#attr-style-scoped
Contextos en los que se puede utilizar este elemento: (anotación: estilo)
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.
y más adelante en este documento:
El atributo de ámbito es un atributo booleano. Si está presente, indica que los estilos están destinados solo para el subárbol arraigado en el elemento principal del elemento de estilo, a diferencia de todo el Documento.
Si el atributo de ámbito está presente y el elemento tiene un elemento principal, entonces el elemento de estilo debe ser el primer nodo de contenido de flujo en su elemento principal que no sea el espacio en blanco entre elementos, y el modelo de contenido del elemento principal no debe tener un componente transparente.
Esto se lee como si hubiera (o habrá) "dos elementos <style> diferentes": a
-
<style>- global - ~~ solo dentro de<head> -
<"scopestyle">- solo (!) con bool scope attr y ~~ solo al inicio de<div>
(por favor lea "~~" como "más o menos")
Pero el enlace posterior tiene más de 2 años, y todos los navegadores (probé Chrome, FF, IE, Opera) interpretan el flujo de entrada <style> como si estuviera en el encabezado. (e ignore AFAIK el alcance, sí, aún no es estándar)
Así que mi pregunta de 3 partes
¿Es correcta mi interpretación de los documentos W3C (los 2 estilos - lógica)?
¿Qué es el estado ahora - 2015?
Y, ¿es probable que haya alguien ahí fuera, quién sabe qué viene en el horizonte?
A partir de mayo de 2016, <style scoped> se ha eliminado de la specification whatwg.
El objetivo principal de HTML5 era especificar formalmente el comportamiento que los navegadores han implementado básicamente "para siempre", independientemente de las especificaciones HTML anteriores. Siempre ha podido usar una etiqueta <style> cualquier lugar dentro de un documento HTML, por lo que con HTML5 todavía podrá hacerlo. Esto no va a cambiar.
Para más información, aquí hay un enlace a la sección actual de especificaciones de HTML5 en el elemento <style> :
http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-style-element
Muchas de las respuestas aquí se han vuelto algo obsoletas, por lo que aquí se presenta un breve resumen de lo que sucedió con el atributo de scoped .
Originalmente (antes de HTML5), <style> no era "válido" fuera de <head> , pero era compatible con la mayoría o todos los navegadores. "no válido" significa que los validadores se quejarían al respecto, y las especificaciones (las series HTML 4 y XHTML 1 de W3C) indicaron que no debería hacerse. Pero funcionó. Y a veces esto era malo: no importa dónde apareciera el elemento <style> en el documento, sus reglas se aplicarían a todo el documento (según los selectores utilizados, por supuesto). Esto podría llevar a los autores a escribir una hoja de estilo "local" destinada a aplicarse solo dentro de un área del documento, pero podría reajustar accidentalmente otras áreas.
La propuesta de atributo de scoped de HTML5 estaba destinada a abordar esto: le diría al navegador que los estilos en esa hoja solo se aplicarían al elemento principal del <style> y sus descendientes. También, en algún momento <style scoped> se requirió que <style scoped> fuera el primer hijo de su padre, lo que dejaba muy claro para cualquiera que leyera el código HTML cuál era el alcance. El elemento de style sin el atributo permaneció válido solo dentro del elemento <head> .
Pasó el tiempo y no bastantes proveedores implementaron la nueva característica (Firefox y Chrome incluían algún soporte experimental), por lo que finalmente se eliminó. El comportamiento del navegador sigue siendo como era antes de HTML 5, pero la especificación actual al menos lo documenta: <style> ahora es legal / válido en todo el documento, pero la especificación advierte sobre los posibles efectos secundarios (elementos de restyling accidentalmente).
Con las especificaciones actuales y el comportamiento del navegador, la mejor y más segura forma de implementar estilos de "alcance" es hacerlo explícitamente con la ayuda de ID, como se muestra en este fragmento:
<div id="myDiv">
<style>
#myDiv p { margin: 1em 0; }
#myDiv em { color: #900; }
#myDiv whatever { /* ... */ }
</style>
<p>Some content here... </p>
</div>
El div tiene un atributo id , y todas las reglas en la hoja de estilo usan explícitamente un selector de id para asegurar que solo se apliquen dentro de ese div. Por supuesto, esto todavía requiere evitar conflictos de identificación en todo el documento, pero la singularidad ya es un requisito del atributo id .
A pesar de que se eliminó el atributo de scoped , este enfoque hace el trabajo, es razonablemente legible (por supuesto, como cualquier código, podría estar confuso, pero ese no es el punto), debería validarse y debería funcionar en casi todos los sistemas compatibles con CSS. navegador.
PS: De acuerdo con la especificación, <style> dentro de <body> debe validarse. Sin embargo, el validador Nu (etiquetado como experimental) todavía se queja de ello. Hay un problema abierto al respecto: https://github.com/validator/validator/issues/489
Parece que el atributo de "ámbito" se ha eliminado completamente de la especificación HTML5. Las versiones actuales y anteriores no tienen ninguna mención de ello.
Su interpretación de la especificación parece correcta. La página MDN en la etiqueta de estilo incluye una descripción del atributo con scoped .
ámbito Si este atributo está presente, el estilo se aplica solo a su elemento principal. Si está ausente, el estilo se aplica a todo el documento.
El atributo de scope :
Este es un ejemplo práctico de esto que solo funcionará en Firefox 21+.
Ejemplo:
<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>
En el navegador que no admite el atributo de scoped , estos estilos se aplican globalmente.
El :scope pseudo-selector:
Además del atributo de ámbito, también se encuentra el pseudo-selector de :scope que se puede usar. Esta implementación ofrece el mismo soporte que la anterior.
Ejemplo:
<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>
Esta opción también agrega la posible ventaja de que si el navegador no comprende el atributo de scoped , los estilos no se aplicarán globalmente. El único problema es que Safari 7+ reconocerá el pseudo-selector de :scope , aunque el atributo de scoped no sea compatible, por lo que la ventaja se pierde en Safari 7+.
Estilos globales:
Como antes, usar una etiqueta de style sin el atributo de scoped creará estilos globales, por lo que solo se incluirá si incluye el atributo de scoped .
Resumen de compatibilidad:
En este punto, el soporte para la función se ve sombrío. El alcance de CSS solo es compatible con Firefox 21+. Actualmente no se admite en Chrome, Internet Explorer, Safari u Opera. Según caniuse.com , de Chrome 20 a 36 fue posible habilitar el soporte con el indicador experimental, pero se eliminó el soporte .