@import

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Sumário

A Regra Atribuída (at-rule) CSS @import é usado para importar regras de estilo de outras folhas de estilo. Estas regras devem preceder todos os outros tipos de regras, exceto as regrasde @charset ; uma vez que não é um Declaração aninhada, @import não pode ser usado dentro do grupo condicional de regras atribuídas (at-rules).

Assim como os agentes do usuário podem evitar a recuperação de recursos para os tipos de mídia incompatíveis, os autores podem especificar regras @import dependentes de mídia. Estas importações condicionais devem ter media queries separadas por vírgulas após a URI. Na ausência de qualquer consulta de mídia (media queries), a importação é incondicional. Especificando todos para o médio tem o mesmo efeito.

Sintaxe

@import url;
@import url list-of-media-queries;

where:

url

É algo como <string> ou como <uri> representaando o local de onde o recurso será importado. A URL pode ser absoluta ou relativa. Perceba que a URL não precisa, necessariamente, ser um arquivo específico; ela pode especificar o nome do pacotee parcialmente, e o arquivo apropriado será escolhido automaticamente (exemplo: chrome://communicator/skin/). Veja aqui para mais informações.

list-of-media-queries

É uma lista separada por vírgulas de consultas de mídia (media queries) conidicionando a aplicação das regras de CSS definidas na URL relacionada. Se o navegador não suportar quaisquer consultas de mídia, ele não carregará o recurso relacionado.

Sintaxe formal

@import = 
@import [ <url> | <string> ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;

<url> =
<url()> |
<src()>

<layer-name> =
<ident> [ '.' <ident> ]*

<import-conditions> =
[ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

<supports-condition> =
not <supports-in-parens> |
<supports-in-parens> [ and <supports-in-parens> ]* |
<supports-in-parens> [ or <supports-in-parens> ]*

<supports-in-parens> =
( <supports-condition> ) |
<supports-feature> |
<general-enclosed>

<supports-feature> =
<supports-decl>

<supports-decl> =
( <declaration> )

Exemplos

css
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import "custom.css";
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url("landscape.css") screen and (orientation: landscape);

Especificações

Specification
CSS Cascading and Inheritance Level 5
# at-import

Browser compatibilidade

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@import
layer()
supports() as import condition

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
See implementation notes.