Una nueva función experimental: las hojas de estilo con alcance

Alex Danilo

Recientemente, Chromium implementó una nueva función de HTML5: las hojas de estilo con alcance, también conocidas como hojas de estilo. <style scoped>. Un autor web puede limitar las reglas de estilo para que solo se apliquen a una parte de una página configurando el atributo "con alcance" en un elemento <style>, que es el elemento secundario directo del elemento raíz del subárbol al que deseas que se apliquen los estilos. Esto limita los estilos para que afecten solo al elemento que es el elemento superior del elemento <style> y todos sus elementos subordinados.

Ejemplo

Este es un documento simple que usa el 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 dentro de cualquier <div> rojo y dentro de cualquier <span> verde:

un intervalo un intervalo
un intervalo un intervalo
un intervalo un intervalo

Sin embargo, si configuramos scoped en el elemento <style>, sucederá 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> adjunto, que es el elemento superior del elemento <style scoped>, y a todo lo que esté dentro de ese <div>. A esto lo llamamos “con alcance” y el resultado se ve así:

¡un div! ¡un span!
¡un div! ¡un intervalo!
¡Un div!, ¡un span!

Por supuesto, esto se puede hacer en cualquier parte del lenguaje de marcado. Si te gusta la aventura, puedes anidar los estilos con alcance dentro de otras partes del lenguaje de marcado tanto como quieras para tener un control detallado sobre dónde se aplican los estilos.

Casos de uso

¿Para qué sirve?

Un caso de uso común es el contenido distribuible: cuando tú, 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 aquí es la capacidad de combinar contenido de otros sitios, como yelp, twitter, eebay, etc., en una sola página sin necesidad de aislarlos mediante un <iframe> o editar el contenido externo al instante.

Si usas un sistema de administración de contenido (CMS) que te envía fragmentos de lenguaje de marcado que se combinan en una visualización de página final, esta es una excelente función para garantizar que cada fragmento reciba un estilo separado de todo lo demás en la página. Esto también puede ser útil para una wiki.

Si quieres crear un buen código de demostración en una página, es fácil limitar los estilos solo al contenido de la demostración. Eso te permitirá usar el CSS en la demostración, pero nada más de la página se verá afectado.

Otro caso de uso es 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> de esa parte del lenguaje de marcado. Esas reglas de estilo no tendrán ningún efecto al renderizar otras partes de la página, lo que las mantiene bien separadas del contenido principal.

Posiblemente uno de los casos de uso más convincentes sea el 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. Al proporcionar 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 <style scoped> en gran medida con componentes web y shadow DOM (que ya se pueden habilitar configurando la función experimental "shadow DOM" en chrome://flags). En este momento, no hay una forma realmente buena de asegurarse de que los estilos se limiten a los componentes web sin recurrir a las prácticas no recomendadas, como el estilo intercalado, por lo que los estilos con alcance son una opción perfecta para esto.

¿Por qué incluir el elemento superior?

La forma 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 se escriban hojas de estilo con alcance "defensivo" para los navegadores que aún no admiten <style scoped> agregando como prefijo a las reglas un ID o un selector de clase como resguardo:

<div id="menu">
    <style scoped>
    #menu .main { … }
    #menu .sub { … }
    …

Esto imita el efecto del uso de estilos cuando se implementa “con alcance”, pero con penalización de rendimiento durante el 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> es ampliamente compatible y los selectores de ID podrían descartarse.

Estado

Dado que la implementación de hojas de estilo con alcance aún 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 con un número de versión 19 o superior (actualmente, Chrome Canary). Luego, busca la entrada "Habilitar <style scoped>" en chrome://flags (cerca del final), haz clic en "Habilitar" y, luego, reinicia el navegador.

Por el momento, no hay errores conocidos, pero hay @global y versiones con alcance de @keyframes y @-webkit-region, y aún están en proceso de implementación. Además, por el momento, se ignora @font-face, ya que es muy probable que la especificación cambie.

Invitamos a todos los interesados en la función a que la prueben y nos cuenten sus experiencias: lo bueno, lo malo y (tal vez) el con errores.