@import
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>
(en-US) ou como<uri>
(en-US) 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> (en-US) ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;
<url> =
url( <string> (en-US) <url-modifier>* ) |
src( <string> (en-US) <url-modifier>* )
<layer-name> =
<ident> (en-US) [ '.' <ident> (en-US) ]*
<import-conditions> =
[ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?
<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>
<general-enclosed> =
[ <function-token> <any-value>? ) ] |
[ ( <any-value>? ) ]
<supports-decl> =
( <declaration> )
Exemplos
@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
Especificação | Situação | Comentário |
---|---|---|
Media Queries The definition of '@import' in that specification. |
Recomendação | Estendeu a sintaxe para apoiar qualquer consulta de mídia e não apenas simples tipos de mídia (media types). |
CSS Level 2 (Revision 1) The definition of '@import' in that specification. |
Recomendação | Adicionado suporte para <string> (en-US) para denotar a URL de uma folha de estilo, e obrigatoriedade da regra @import no início do documento CSS. |
CSS Level 1 The definition of '@import' in that specification. |
Recomendação | Definição inicial |
Browser compatibilidade
BCD tables only load in the browser