Uso de secuencias de comandos del módulo CSS para importar hojas de estilo

Aprende a usar secuencias de comandos del módulo CSS para importar hojas de estilo CSS con la misma sintaxis que los módulos de JavaScript.

Dan Clark
Dan Clark
X GitHub

Con la nueva función de secuencias de comandos del módulo CSS, puedes cargar hojas de estilo CSS con sentencias import, al igual que los módulos de JavaScript. Luego, las hojas de estilo se pueden aplicar a documentos o shadow root (raíces paralelas) de la misma manera que las hojas de estilo constructables. Esto puede ser más conveniente y más eficaz que otras formas de importar y aplicar CSS.

Navegadores compatibles

Las secuencias de comandos de los módulos de CSS están disponibles de forma predeterminada en Chrome y Edge en la versión 93.

La compatibilidad con Firefox y Safari aún no está disponible. Se puede hacer un seguimiento del progreso de la implementación en Gecko bug y WebKit, respectivamente.

Requisitos previos

Uso de secuencias de comandos de módulos de CSS

Importa una secuencia de comandos del módulo CSS y aplícala a un documento o una shadow root como se muestra a continuación:

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

La exportación predeterminada de una secuencia de comandos de un módulo de CSS es una hoja de estilo constructable cuyo contenido es el del archivo importado. Al igual que cualquier otra hoja de estilo que se pueda construir, se aplica a documentos o shadow roots con adoptedStyleSheets.

A diferencia de otras formas de aplicar CSS desde JavaScript, no es necesario crear elementos <style> ni desordenar las cadenas de JavaScript de texto de CSS.

Los módulos CSS también tienen algunos de los mismos beneficios que los módulos de JavaScript.

  • Anulación de duplicación: Si se importa el mismo archivo CSS de varios lugares en una aplicación, solo se obtendrá, creará instancias y analizará una sola vez.
  • Orden coherente de evaluación: Cuando se ejecute la importación de JavaScript, este puede confiar en que la hoja de estilo que importa ya se haya recuperado y analizado.
  • Seguridad: Los módulos se recuperan con CORS y usan una verificación estricta de tipo de MIME.

Cómo importar aserciones (¿qué sucede con "assert"?)

La parte assert { type: 'css' } de la sentencia import es una aserción de importación. Esto es obligatorio; sin él, el elemento import se trata como una importación normal de módulos de JavaScript y fallará si el archivo importado tiene un tipo de MIME que no es de JavaScript.

import sheet from './styles.css'; // Failed to load module script:
                                  // Expected a JavaScript module
                                  // script but the server responded
                                  // with a MIME type of "text/css".

Hojas de estilo importadas de forma dinámica

También puedes importar un módulo de CSS mediante dynamic import, con un nuevo segundo parámetro para la aserción de importación type: 'css':

const cssModule = await import('./style.css', {
  assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];

Aún no se permiten @import reglas

Actualmente, las reglas @import de CSS no funcionan en hojas de estilo que se puedan construir, incluidas las secuencias de comandos de módulos de CSS. Si las reglas @import están presentes en una hoja de estilo modificable, se ignorarán esas reglas.

/* atImported.css */
div {
    background-color: blue;
}

/* styles.css */
@import url('./atImported.css'); /* Ignored in CSS module */
div {
    border: 1em solid green;
}

<!-- index.html -->
<script type="module">
    import styles from './styles.css' assert { type: "css" };
    document.adoptedStyleSheets = [styles];
</script>
<div>This div will have a green border but no background color.</div>

Se puede agregar a la especificación compatibilidad con @import en las secuencias de comandos del módulo CSS. Realiza un seguimiento de este análisis de la especificación en el problema de GitHub.