Recientemente, Chromium implementó una nueva función de HTML5: las hojas de estilo específicas, también conocidas como
<style scoped>. Un autor web puede limitar las reglas de estilo para que se apliquen solo a una parte de una página estableciendo el atributo "alcance" en un elemento <style> que sea el elemento secundario directo del elemento raíz del subárbol al que deseas aplicar los estilos. Esto limita los diseños para que afecten solo al elemento superior del elemento <style> y a todos sus elementos subordinados.
Ejemplo
Este es un documento simple con un estilo 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 con un color rojo <div> o verde <span>:
un div! un span!
un div! un span!
un div! un span!
Sin embargo, si configuramos scoped en el elemento <style>, ocurrirá 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 estilo para que se apliquen al <div> contenedoro, que es el elemento superior del elemento <style scoped>, y a cualquier elemento dentro de ese <div>. A esto lo llamamos “alcance” y el resultado se ve de la siguiente manera:
¡un div! un span!
¡un div! un lapso!
¡un div! un intervalo.
Esto, por supuesto, se puede hacer en cualquier parte del lenguaje de marcado. Por lo tanto, si te gusta la aventura, puedes anidar estilos con alcance dentro de otras partes con alcance del lenguaje de marcado tanto como desees para obtener un control detallado sobre dónde se aplican los diseños.
Casos de uso
¿Para qué sirve esto?
Un caso de uso común es el contenido distribuido: cuando a ti, como autor web, deseas incorporar contenido de un tercero, incluidos todos sus estilos, pero no quieres arriesgarte a que esos estilos “contaminen” otras partes de la página no relacionadas. Una gran ventaja es la capacidad de combinar contenido de otros sitios, como yelp, Twitter, ebay, etc., en una sola página sin necesidad de aislarlos usando 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 lenguaje de marcado que se mezclan en una visualización final de la página, esta es una excelente función para asegurarte de que cada fragmento tenga un estilo independiente de los demás elementos de la página. Esto también puede ser útil para una wiki.
Cuando desees crear un buen código de demostración en una página, es fácil limitar los estilos al contenido de demostración. Eso te permitirá volverte loco 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 estilos específicos de ese menú en una sección <style scoped> en esa parte del lenguaje de marcado. Esas reglas de estilo no tendrán ningún efecto al procesar otras partes de la página, lo que las mantiene bien separadas del contenido principal.
Posiblemente, uno de los casos de uso más atractivos sea el modelo de componentes web. Los componentes web serán una excelente manera de compilar elementos como controles deslizantes, menús, selectores de fecha, widgets de pestañas, etc. Al proporcionar los estilos con alcance, un diseñador puede compilar 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 mucho <style scoped> con componentes web y shadow DOM (que ya se puede habilitar configurando la marca experimental "shadow DOM" en chrome://flags). En este momento, no hay una muy buena manera de asegurarse de que los estilos se limiten a componentes web sin recurrir a prácticas no recomendadas, como el diseño en línea, por lo que los estilos con alcance son la opción perfecta para esto.
¿Por qué incluir el elemento superior?
La manera más natural es incluir el elemento superior de modo que las reglas <style scoped> puedan, por ejemplo, establecer un color de fondo común para todo el alcance. También permite que las hojas de estilo con alcance se escriban "defensivamente" para los navegadores que aún no admiten <style scoped>, agregando prefijos a las reglas con un ID o selector de clase como resguardo:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Esto imita el efecto de usar estilos cuando se implementa "alcance", pero con algo de penalización de rendimiento en el tiempo de ejecución debido al selector más complejo. Lo bueno de este enfoque es que permite un enfoque de resguardo ordenado hasta el día en que <style scoped> es ampliamente compatible y los selectores de ID simplemente podrían descartarse.
Estado
Dado que la implementación de las hojas de estilo con alcance aún es nueva, actualmente están ocultas detrás de una función experimental de tiempo de ejecución en Chrome. Para habilitarlas, debes obtener una versión de Chrome que tenga un número de versión 19 o superior (Chrome Canary en este momento), luego, busca la entrada "Habilitar <style scoped>" en chrome://flags (hacia el final), haz clic en "Habilitar" y luego reinicia el navegador.
Por el momento, no hay errores conocidos, pero @global y las versiones con alcance de @keyframes y @-webkit-region, y aún están en proceso de implementación. Además, por el momento, se ignorará @font-face, ya que es muy probable que la especificación cambie.
Queremos incentivar a todos los interesados en la función para que la prueben y nos cuenten sus experiencias: lo bueno, lo malo y (tal vez) los errores.