Recientemente, Chromium implementó una nueva función de HTML5: hojas de estilo centradas, también conocidas como
<style scoped>. Un autor web puede limitar las reglas de diseño para que solo se apliquen a una parte de una página. Para ello, debe establecer el atributo "con alcance" en un elemento <style> que sea el secundario directo del elemento raíz del subárbol al que deseas que se apliquen los diseños. Esto limita los diseños para que afecten solo al elemento que es superior del elemento <style> y a todos sus elementos subordinados.
Ejemplo
Este es un documento simple que usa diseños estándar:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
Las reglas de estilo especificadas colorearán el texto dentro de cualquier <div> de color rojo y dentro de cualquier <span> de color verde:
un div! un span!
un div! un span!
un div! un span!
Sin embargo, si configuramos scoped en el elemento <style>, sucede lo siguiente:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
Luego, restringe las reglas de diseño para que se apliquen al <div> envolvente que es el elemento superior del elemento <style scoped> y a todo lo que esté dentro de ese <div>. Esto se denomina "con alcance" y el resultado se ve de la siguiente manera:
un div! un span!
un div! un span!
un div! un span!
Por supuesto, esto se puede hacer en cualquier parte del marcado. Por lo tanto, si te gusta experimentar, puedes anidar estilos con alcance dentro de otras partes del marcado con alcance tanto como quieras para obtener un control detallado sobre dónde se aplican los estilos.
Casos de uso
¿Para qué sirve esto?
Un caso de uso común es el contenido sindicado: cuando, como autor web, deseas incorporar contenido de terceros, incluidos todos sus estilos, pero no quieres correr el riesgo de que esos estilos “contaminen” otras partes no relacionadas de la página. Una gran ventaja aquí es la capacidad de combinar contenido de otros sitios, como Yelp, Twitter, eBay, etc., en una sola página sin necesidad de aislarlos con un <iframe> o editar el contenido externo sobre la marcha.
Si usas un sistema de administración de contenido (CMS) que te envía fragmentos de marcado que se combinan en una vista de página final, esta es una excelente función para asegurarte de que cada fragmento tenga un diseño independiente de cualquier otro elemento de la página. Esto también puede ser igual de útil para una wiki.
Cuando quieras crear un código de demostración en una página, es fácil limitar los estilos solo al contenido de la demostración. Esto te permite hacer lo que quieras con el CSS en la demostración, pero nada más en la página se verá afectado.
Otro caso de uso es simplemente el encapsulamiento: por ejemplo, si tu página web tiene un menú lateral, tiene sentido colocar los estilos específicos de ese menú en una sección <style scoped> en esa parte del marcado. Esas reglas de estilo no tendrán ningún efecto cuando se rendericen otras partes de la página, lo que las mantiene separadas del contenido principal.
Posiblemente, uno de los casos de uso más atractivos sea el del modelo de componentes web. Los componentes web serán una excelente manera de crear elementos como controles deslizantes, menús, selectores de fecha, widgets de pestañas, etc. Cuando se proporcionan los estilos centrados, un diseñador puede crear un widget y empaquetarlo con sus estilos como una unidad independiente que otros pueden tomar y combinar en una aplicación web enriquecida. Planeamos usar <style scoped> en gran medida con los componentes web y el shadow DOM (que ya se puede habilitar configurando la marca experimental "shadow DOM" en chrome://flags). En este momento, no hay una buena manera de asegurarse de que los estilos se limiten a los componentes web sin recurrir a prácticas poco prácticas, como los estilos intercalados, por lo que los estilos centrados son perfectos para esto.
¿Por qué incluir el elemento superior?
La forma más natural es incluir el elemento superior para que las reglas de <style scoped> puedan, por ejemplo, establecer un color de fondo común para todo el alcance. También permite que las hojas de estilo centradas se escriban de forma “defensiva” para los navegadores que aún no admiten <style scoped>, ya que anteponen reglas con un selector de ID o clase como resguardo:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Esto imita el efecto de usar estilos cuando se implementa "con alcance", pero con una penalización de rendimiento del tiempo de ejecución debido al selector más complejo. Lo bueno de este enfoque es que permite un enfoque de resguardo elegante hasta el día en que <style scoped> sea ampliamente compatible y los selectores de ID se puedan descartar.
Estado
Dado que la implementación de las hojas de estilo centradas es nueva, actualmente están ocultas detrás de una marca de tiempo de ejecución en Chrome. Para habilitarlos, debes obtener una versión de Chrome que tenga el número de versión 19 o superior (Chrome Canary en este momento). Luego, busca la entrada "Habilitar <style scoped>" en chrome://flags (al final), haz clic en "Habilitar" y, luego, reinicia el navegador.
Actualmente, no hay errores conocidos, pero @global y las versiones centradas de @keyframes y @-webkit-region aún están en proceso de implementación. Además, por el momento, se ignora @font-face, ya que es probable que cambie la especificación.
Nos gustaría que todas las personas interesadas en la función la prueben y nos cuenten sus experiencias: las buenas, las malas y (tal vez) las con errores.