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 [ <string> | <url> ] [ <media-query-list> ]?;where
<media-query-list> = <media-query>#
where
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
where
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>where
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>where
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )where
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>where
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>
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> 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
Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Suporte básico | (Yes) | (Yes) | 5.5 | (Yes) | (Yes) |
Característica | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Suorte básico | (Yes) | (Yes) | 5.5 | (Yes) | (Yes) |