La regla @import
es una regla de CSS que permite cargar un fichero .css
externo, leer sus líneas de código e incorporarlo al archivo actual. Estas reglas CSS se suelen indicar en las primeras líneas del fichero, ya que deben figurar antes de otras reglas CSS o contenido CSS similar.
La sintaxis de la regla @import
es la siguiente:
Tipo de importación | Descripción |
---|---|
@import |
Importamos una hoja de estilos CSS externa. |
@import |
Importamos una hoja de estilos CSS sólo si condide con el media query indicado. |
@import supports( condición) |
Importamos una hoja de estilos CSS sólo si el navegador soporta la condición. |
@import layer( nombre) |
Importamos una hoja de estilos CSS y la colocamos en la capa nombre. |
@import layer() |
Importamos una hoja de estilos CSS y la colocamos en una nueva capa anónima. |
Un detalle muy importante es que hay que tener en cuenta que la regla @import
se evalua en el navegador a la hora de cargar la página, por lo que cada regla @import
equivale a una petición al servidor de un nuevo archivo .css
.
Esto, tradicionalmente, suponía un problema, ya que a efectos de rendimiento podría ser mucho mejor incluir todo el código CSS en un solo archivo para reducir el número de peticiones. Sin embargo, actualmente, en páginas que funcionen bajo el protocolo HTTP/2 o superior, podría no ser tan relevante. Preprocesadores como Sass (o similares) tienen mecanismos para realizar imports anticipados y generar un sólo fichero con todo el código CSS para que el navegador realice menos peticiones.
En principio, existen dos formas de cargar ficheros externos mediante la regla @import
: utilizando la función url()
o indicando simplemente un
Formato | Descripción |
---|---|
@import url(" fichero.css") |
Importa el fichero.css utilizando la función url() de CSS. |
@import " fichero.css" |
Importa el fichero.css utilizando un |
Como se puede ver a continuación, se pueden utilizar tanto los nombres de los archivos, como rutas relativas o absolutas:
@import url("menu.css"); /* Fichero en la misma ruta */
@import url("menu/sidebar.css"); /* Ruta relativa, dentro de menu/ */
@import "https://manz.dev/index.css"; /* Ruta absoluta, URL completa */
Dentro de las importaciones que se pueden hacer con la regla @import
, existen dos tipos de importaciones condicionales. Por un lado, tenemos la posibilidad de indicar posteriormente a la @supports
con la regla @import
y establecer condiciones específicas.
Observa como podemos indicar una media query, para que ese archivo .css
se importe sólo en el caso de que se cumpla:
@import url("mobile.css") screen and (max-width: 640px);
@import url("print.css") print;
En el primer caso, el archivo mobile.css
se descargará sólo si se está utilizando una pantalla que tenga como máximo 640px
de ancho, presumiblemente un dispositivo móvil. En el segundo caso, el archivo print.css
se aplicará sólo si estamos imprimiendo con el navegador la página actual, de lo contrario, no se descargará ni se aplicará.
Esto es un mecanismo bastante interesante para reducir la cantidad de estilos CSS que se descargarán y procesarán.
Existe otra forma de importar condicionalmente código CSS, y es utilizando supports
tras la @import
. Esto permite que descarguemos y procesemos dicho archivo .css
sólo si se cumple la condición del supports
, basada en la regla @supports
:
@import url("flex-fallback.css") supports(not (display: grid));
@supports (display: grid) {
/* ... */
}
En este caso, si estamos en un navegador antiguo que no soporta grid
, descargará y procesará el fichero flex-fallback.css
donde colocaremos los estilos alternativos (utilizando flex, por ejemplo). En el caso de que lo soporte, hará lo que tenemos en la regla @supports
, que aunque se indica en este ejemplo, no tiene relación directa con el @import
y no es obligatorio utilizarlo en conjunto.
Una moderna característica que implementarán los navegadores, es la posibilidad de utilizar capas en CSS. Hablamos de ella en La regla @layer.