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 | ¿Qué importamos? | Soporte |
---|---|---|
@import |
Una hoja de estilos CSS externa. | ✅ Buen soporte. |
@import |
Una hoja de estilos CSS si coincide con el media query indicado. | ✅ Buen soporte. |
@import supports( condición) |
Una hoja de estilos CSS sólo si el navegador soporta la condición. | ⚠️ Cuidado. |
@import layer( nombre) |
Una hoja de estilos CSS y la colocamos en la capa nombre. | ✅ Buen soporte. |
@import layer() |
Una hoja de estilos CSS y la colocamos en una nueva capa anónima. | ✅ Buen soporte. |
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.
@import
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") (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 característica moderna que han implementado los navegadores, es la posibilidad de utilizar capas en CSS: un sistema similar a las capas de un programa de diseño gráfico, pero orientado a CSS, donde puedes fusionar los estilos y gestionar mejor la especificidad. Profundizamos y hablamos de esta característica en el artículo La regla @layer.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev