Aprende a usar secuencias de comandos de módulos CSS para importar hojas de estilo CSS con la misma sintaxis que los módulos de JavaScript.
Con la nueva función de secuencias de comandos de módulos de 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 raíces de sombras de la misma manera que las hojas de estilo componibles. Esto puede ser más conveniente y más eficiente que otras formas de importar y aplicar CSS.
Navegadores compatibles
Las secuencias de comandos de módulos 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 el error Gecko y en el error de WebKit, respectivamente.
Requisitos previos
- Conocimientos de los módulos de JavaScript
- Familiaridad con los hojas de estilo componibles
Usa secuencias de comandos de módulos CSS
Importa una secuencia de comandos de módulo CSS y aplícala a un documento o a una raíz de sombra de la siguiente manera:
import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];
La exportación predeterminada de una secuencia de comandos de módulo CSS es un hoja de estilo componible cuyo contenido es el del archivo importado. Al igual que cualquier otro diseño de página componible, se aplica a los documentos o a las raíces de sombra 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 CSS.
Los módulos CSS también ofrecen algunos de los mismos beneficios que los módulos de JavaScript.
- Anulación de duplicación: Si se importa el mismo archivo CSS desde varios lugares de una aplicación, solo se recuperará, creará una instancia y analizará una vez.
- Orden de evaluación coherente: Cuando se ejecuta el código JavaScript de importación, puede depender de que el diseño de la página que importa ya se haya recuperado y analizado.
- Seguridad: Los módulos se recuperan con CORS y usan una verificación estricta de tipos de MIME.
Aserciones de importación (¿qué sucede con “assert
”?)
La parte assert { type: 'css' }
de la sentencia import
es una afirmación de importación. Esto es obligatorio. Sin él, import
se trata como una importación normal de módulo de JavaScript y fallará si el archivo importado tiene un tipo 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 CSS usando la función dynamic
import, con un segundo parámetro nuevo 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 las reglas @import
Actualmente, las reglas @import
de CSS no funcionan en los diseños de página componibles, incluidas las secuencias de comandos de módulos de CSS. Si las reglas @import
están presentes en un hoja de estilo componible, 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>
Es posible que se agregue compatibilidad con @import
en las secuencias de comandos de módulos CSS a la especificación. Realiza un seguimiento de esta discusión sobre las especificaciones en el problema de GitHub.