Regla CSS @import

La at-rule @import de CSS extrae las reglas de estilo de una hoja de estilos externa e introduce en otra. Permite dividir el CSS en varios archivos (por ejemplo, uno por componente o por tema) y combinarlos desde un único punto de entrada; además, puede cargar una hoja condicionalmente según una media query.

La palabra clave @import debe ir seguida de la ubicación de la hoja que deseas incluir, escrita como url() o como una cadena de texto simple. Las dos líneas siguientes hacen lo mismo:

@import url("theme.css");
@import "theme.css";

Dónde debe ir la regla

@import solo es válido al inicio de una hoja de estilos. Debe aparecer antes que cualquier otra regla, excepto @charset y @layer (una declaración @layer sin bloque). Si colocas un @import después de una regla normal como un bloque de selectores, el navegador lo ignora.

@charset "utf-8";   /* allowed first */
@import "reset.css"; /* imports must come before any styles */

body {
  margin: 0;
}

@import "late.css";  /* invalid — ignored, because a rule already appeared */

Información

@import no puede usarse dentro de at-rules de grupo condicionales como @media o @supports. Para cargar una hoja solo bajo ciertas condiciones, añade la condición al propio @import (consulta Media queries más abajo).

@import frente al elemento <link>

También puedes incluir una hoja de estilos desde HTML con <link rel="stylesheet" href="theme.css">. Ambos enfoques producen el mismo resultado, pero difieren en rendimiento:

Una etiqueta <link> es descubierta por el navegador mientras analiza el HTML, por lo que el archivo puede comenzar a descargarse de inmediato y en paralelo con otros recursos.
Un @import se encuentra solo después de que la hoja de estilos padre haya sido descargada y analizada. Esto crea una cadena de solicitudes (HTML → main.css → imported.css) que puede retrasar el renderizado.

Para hojas de estilos de nivel superior, es preferible usar <link>. Recurre a @import cuando específicamente desees composición a nivel de CSS — por ejemplo, para construir un único bundle a partir de varios parciales o para importar una hoja en una capa de cascada con nombre.

Valor inicial	-
Se aplica a	-
Heredable	No.
Animable	No.
Versión	CSS2
Sintaxis DOM	N/A

Sintaxis

Sintaxis de la regla CSS @import

@import <url> | <string> [ <media-query-list> ]? ;

Ejemplo de la regla @import:

Ejemplo de la regla CSS @import

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      @import url('https://fonts.googleapis.com/css?family=Coiny');
      @import url('https://fonts.googleapis.com/css?family=Lobster');
      .p1 {
        font-family: 'Coiny', cursive;
      }
      .p2 {
        font-family: 'Lobster', cursive;
      }
    </style>
  </head>
  <body>
    <h2>@import at-rule example</h2>
    <p class="p1">The @import rule allows you to import a style sheet into another style sheet.</p>
    <p class="p2">The @import rule also supports media queries, so you can allow the import to be media-dependent.</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

La diferencia entre URL relativa y URL absoluta

Los tipos de datos <url> y <string> son aceptados por la regla @import para determinar el archivo que debe importarse. Puede proporcionarse como una URL absoluta o relativa.

El siguiente ejemplo de código usa una URL relativa. Esto significa que la URL es relativa a la ubicación de la hoja de estilos actual. Aquí no es necesario proporcionar una ruta; simplemente se indica el nombre del archivo.

Regla CSS @import

@import "relative.css";

En el siguiente ejemplo la URL también es relativa, aunque se ha proporcionado información de ruta:

Regla CSS @import

@import "../css/relative.css";

Como se puede ver, el siguiente ejemplo de código incluye la ruta completa con el nombre de dominio, lo que significa que la URL es absoluta.

Regla CSS @import

@import "http://www.examples.fr/css/absolute.css";

Media queries

@import acepta una media query después de la URL, de modo que la hoja solo se aplica cuando la condición se cumple. Así es como se hace que una importación dependa de los medios sin envolverla en @media (lo cual no está permitido).

La hoja siguiente se carga solo cuando la página se imprime:

@import "print.css" print;

Puedes usar cualquier media query, incluidas consultas de características como el ancho:

@import "wide.css" screen and (min-width: 768px);

El navegador igualmente descarga el archivo independientemente de la condición — la media query solo determina si las reglas se aplican, no si el archivo se descarga.

Importar en una capa de cascada

Una característica moderna permite asignar una hoja importada a una capa de cascada con nombre usando layer(). Todo lo que hay en el archivo importado participa entonces en la prioridad de esa capa, lo cual es una forma ordenada de evitar que el CSS de terceros anule el propio:

@import "bootstrap.css" layer(framework);

También puedes proteger una importación con una consulta de características usando supports(), de modo que la hoja se cargue solo si el navegador entiende una determinada declaración:

@import "grid.css" supports(display: grid);

Valores

Valor	Descripción
url	Un `<url>` o `<string>` que indica la ubicación del recurso a importar. La URL puede ser relativa o absoluta.
string list-of-mediaqueries	Una lista separada por comas de media queries que condicionan la aplicación de las reglas CSS definidas en la URL vinculada.

Práctica

¿Cuál es la sintaxis correcta para usar la regla @import en CSS?

@import url ('mystyle.css')import url ('mystyle.css')url ('mystyle.css') @import@import 'mystyle.css' @import: 'mystyle.css'