@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> [ <lista-de-media-queries> | <supports-condition> | <layer-name> ];

@import url [list-of-media-queries];
@import url media query;
@import url supports(condición);
@import url layer(nombre);
@import url layer();
  • URL: Es la única parte obligatoria. Indica la ruta al archivo que quieres importar. Puede especificarse como una cadena de texto simple o usando url().
  • media query: Puedes hacer que un archivo CSS solo se importe si se cumplen ciertas condiciones del dispositivo (como el tamaño de la pantalla, o si es para imprimir).
  • layer: Te permite importar estilos directamente a una "capa" (layer) específica de la cascada, dándote más control sobre la especificidad.
  • supports: Puedes importar un archivo CSS solo si el navegador soporta una característica (propiedad y valor) específica de CSS.
  • layer: Te permite importar estilos directamente a una "capa" (layer) específica de la cascada, dándote más control sobre la especificidad.
@import url("printStyles.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 printStyles.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.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de @import</title>
  <link rel="stylesheet" href="1.import.css">
</head>
<body>

  <header>
    <h1>Ejemplo de @import Condicional</h1>
  </header>

  <main>
    <p>Este es el contenido principal de la página.</p>
    <p>Intenta cambiar el tamaño de la ventana o imprimir esta página para ver los cambios.</p>
    
    <div class="no-imprimir">
      <p>Este bloque (con fondo gris) no debería aparecer en la versión impresa.</p>
    </div>
  </main>

</body>
</html>

<< Rules @supports >>