Hojas de estilo para construir

Estilos reutilizables sin problemas

Jason Miller

Las hojas de estilo construibles son una manera de crear y distribuir estilos reutilizables cuando se usa Shadow DOM

Navegadores compatibles

  • Chrome: 73
  • Edge: 79.
  • Firefox: 101.
  • Safari: 16.4.

Origen

Siempre fue posible crear hojas de estilo con JavaScript. Sin embargo, el siempre fue crear un elemento <style> usando document.createElement('style') y, luego, accede a la propiedad de su hoja para obtener una referencia al modelo CSSStyleSheet instancia. Este método puede generar un código CSS duplicado y su sobredimensionamiento, y el acto de adjuntarlo lleva a un destello de contenido sin estilo, pueden o no tener tamaño completo. La interfaz CSSStyleSheet es la raíz de una colección de CSS de representación visual, que se conocen como CSSOM, ofrecer una forma programática de manipular las hojas de estilo y de eliminar las problemas asociados con el método anterior.

Diagrama que muestra la preparación y aplicación del CSS.

Las hojas de estilo constructibles permiten definir y preparar archivos CSS compartidos estilos y, luego, aplicarlos a varias shadow Roots o al documento de manera sencilla y sin duplicaciones. Las actualizaciones de una CSSStyleSheet compartida se aplican a todas las raíces en las que se adoptó y adoptar un hoja de estilo es rápido y síncrono una vez que se carga la hoja.

La asociación establecida por los CSS componibles se adapta bien a una gran variedad de aplicaciones. Se puede usar para proporcionar un tema centralizado usado por muchos componentes: el tema puede ser una instancia de CSSStyleSheet que se pasa a componentes, y las actualizaciones del tema se propagan a los componentes automáticamente. Se puede usar para distribuir valores de propiedad personalizada de CSS a subárboles de DOM específicos sin depender de la cascada. Incluso puede usarse como interfaz directa con el analizador de CSS del navegador, lo que facilita precarga las hojas de estilo sin insertarlas en el DOM.

Construcción de una hoja de estilo

En lugar de introducir una nueva API para lograrlo, la guía Constructable StyleSheets especificación permite crear hojas de estilo de forma imperativa invocando el constructor CSSStyleSheet(). El objeto CSSStyleSheet resultante tiene dos nuevos métodos para que sea más seguro agregar y actualizar reglas de hojas de estilo sin activando destello de imágenes sin estilo Contenido (FOUC). Los métodos replace() y replaceSync() reemplazan la hoja de estilo por una cadena de CSS, y replace() muestra una promesa. En ambos casos, las referencias a hojas de estilo externas no se compatible: se ignorará cualquier regla @import y se mostrará una advertencia.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// replace all styles:
sheet.replace('a { color: blue; }')
  .then(() => {
    console.log('Styles replaced');
  })
  .catch(err => {
    console.error('Failed to replace styles:', err);
  });

// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."

Cómo usar hojas de estilo construidas

La segunda función nueva que presenta Constructable StyleSheets es una adoptedStyleSheets propiedad disponible en Shadow Raíces y Documentos. Esta nos permite aplicar explícitamente los estilos definidos por un CSSStyleSheet a un DOM determinado. subárbol. Para ello, configuramos la propiedad en un array de una o más hojas de estilo para se aplican a ese elemento.

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');

// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);

// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);

Revisión general

Con Hojas de estilo Constructable, los desarrolladores web ahora tienen una solución explícita para la creación de Hojas de estilo CSS y su aplicación a los árboles del DOM. Tenemos una nueva API basada en promesas para cargar hojas de estilo desde una cadena de fuente de CSS que usa el analizador integrado del navegador y la semántica de carga. Por último, tenemos un mecanismo para aplicar actualizaciones de hojas de estilo en todos los usos de una hoja de estilo lo que simplifica los cambios de tema y las preferencias de color.

Ver demostración

Con la mirada puesta en el futuro

La versión inicial de las hojas de estilo Constructable que se incluye con la API pero se está trabajando para hacer que todo sea más fácil de usar. Hay una propuesta para extender El FrozenArray adoptedStyleSheets con métodos dedicados para insertar y eliminar las hojas de estilo, lo que obviaría la necesidad de clonar un array y evitaría posibles referencias duplicadas de hojas de estilo.

Más información