Regra CSS @import

A at-rule CSS @import importa as regras de estilo de uma folha de estilo externa para outra. Ela permite dividir o CSS em vários arquivos (por exemplo, um arquivo por componente ou por tema) e combiná-los a partir de um único ponto de entrada, além de poder carregar uma folha condicionalmente com base em uma media query.

A palavra-chave @import deve ser seguida pela localização da folha que você deseja incluir, escrita como url() ou como uma string simples. As duas linhas abaixo fazem a mesma coisa:

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

Onde a regra deve ser inserida

@import só é válida no início de uma folha de estilo. Ela deve aparecer antes de todas as outras regras, exceto @charset e @layer (uma declaração @layer simples sem bloco). Se você colocar um @import após uma regra normal, como um bloco de seletor, o navegador o 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 */

Informação

@import não pode ser usado dentro de at-rules de grupo condicional, como @media ou @supports. Para carregar uma folha apenas sob determinadas condições, anexe a condição ao próprio @import (veja Media queries abaixo).

@import vs. o elemento <link>

Você também pode incluir uma folha de estilo a partir do HTML com <link rel="stylesheet" href="theme.css">. As duas abordagens produzem o mesmo resultado, mas diferem em desempenho:

Uma tag <link> é descoberta pelo navegador enquanto analisa o HTML, então o arquivo pode começar a ser baixado imediatamente e em paralelo com outros recursos.
Um @import é encontrado apenas depois que a folha de estilo pai foi baixada e analisada. Isso cria uma cadeia de requisições (HTML → main.css → imported.css) que pode atrasar a renderização.

Para folhas de estilo de nível superior, prefira <link>. Use @import quando você quiser especificamente uma composição no nível do CSS — por exemplo, construir um único bundle a partir de vários arquivos parciais ou importar uma folha para uma camada de cascata nomeada.

Valor inicial	-
Aplica-se a	-
Herdado	Não.
Animável	Não.
Versão	CSS2
Sintaxe DOM	N/A

Sintaxe

Sintaxe da regra CSS @import

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

Exemplo da regra @import:

Exemplo da regra 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>

Experimente Você Mesmo »

Resultado

A Diferença Entre URL Relativa e URL Absoluta

Os tipos de dados <url> e <string> são aceitos pela regra @import para determinar o arquivo que deve ser importado. Isso pode ser fornecido como uma URL absoluta ou relativa.

O exemplo de código abaixo usa uma URL relativa. Isso significa que a URL é relativa à localização da folha de estilo atual. Aqui não precisamos fornecer um caminho. Em vez disso, fornecemos apenas o nome do arquivo.

Regra CSS @import

@import "relative.css";

No próximo exemplo, a URL ainda é relativa, embora tenhamos fornecido algumas informações de caminho:

Regra CSS @import

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

Como você pode ver, o exemplo de código a seguir inclui o caminho completo com o nome do domínio. Isso significa que a URL é absoluta.

Regra CSS @import

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

Media queries

@import aceita uma media query após a URL, para que a folha seja aplicada apenas quando a condição for atendida. É assim que você torna uma importação dependente de mídia sem envolvê-la em @media (o que não é permitido).

A folha abaixo é carregada apenas quando a página é impressa:

@import "print.css" print;

Você pode usar qualquer media query, incluindo consultas de recursos como width:

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

O navegador ainda baixa o arquivo independentemente da condição — a media query decide apenas se as regras são aplicadas, não se o arquivo é baixado.

Importando para uma camada de cascata

Um recurso moderno permite atribuir uma folha importada a uma camada de cascata nomeada com layer(). Tudo no arquivo importado então participa da prioridade dessa camada, o que é uma forma limpa de evitar que CSS de terceiros substitua o seu:

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

Você também pode proteger uma importação com uma consulta de recurso usando supports(), para que a folha seja carregada apenas se o navegador entender uma determinada declaração:

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

Valores

Valor	Descrição
url	Um `<url>` ou `<string>` indicando a localização do recurso a ser importado. A URL pode ser relativa ou absoluta.
string list-of-mediaqueries	Uma lista separada por vírgulas de media queries que condiciona a aplicação das regras CSS definidas na URL vinculada.

Prática

Qual é a sintaxe correta para usar a regra @import em CSS?

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