@import

<< Rules @supports >>

La regla @import nos permite importar reglas desde otras hojas de estilo. Estas reglas se suelen incluir al principio del fichero. La sintaxis de esta regla puede ser de las siguientes cinco formas: 

@import url [list-of-media-queries];
@import url media query;
@import url supports(condición);
@import url layer(nombre);
@import url layer();

donde la url es el recurso a importar, pudiendo ser tanto una ruta absoluta como relativa. media query es una hoja css que se importará si coincide con el media query. layer con esta sintaxis importamos la hoja css y se pone o bien en la capa nombre (si lo especificamos), o en una nueva capa anónima. supports con esta sintaxis se importa el css siempre y cuando el navegador soporte la condición indicada.

El fichero css a importar puede ir entre comillas o bien utilizando la función url() de css. Veamos un ejemplo:

@import url("fineprint.css") print;
@import 'custom.css';
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
@import "https://developer.mozilla.org/static/css/main.11730cda.css";

Como podemos ver, tenemos la posibilidad de realizar unas importaciones sólo si el navegador cumple unas determinadas condiciones. En el ejemplo anterior, el archivo fineprint.css sólo se aplicará si estamos imprimiendo con el navegador en la página principal, de lo contrario no se aplica y no se descarga por tanto. La regla por ejemplo donde está el import landscape.css se realizará sólo en el caso de tener el dispositivo en la orientación horizontal o apaisada.

Podemos utilizar esta regla si el navegador soporta o no una determinada característica CSS. Ejemplo:

@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports(not (display: grid) and (display: flex)) screen and (max-width: 400px);

La regla @import como vemos es muy útil para evitar descargar y procesar tantos archivos css que muchas veces no son necesarios.

<< Rules @supports >>