@import

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.

@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.

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

<url> = 
  url( <string> (en-US) <url-modifier>* (en-US) )  | (en-US)
  src( <string> (en-US) <url-modifier>* (en-US) )  

<layer-name> = 
  <ident> (en-US) [ (en-US) '.' <ident> (en-US) ] (en-US)* (en-US)  

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

<supports-condition> = 
  not <supports-in-parens>                            | (en-US)
  <supports-in-parens> [ (en-US) and <supports-in-parens> ] (en-US)* (en-US)  | (en-US)
  <supports-in-parens> [ (en-US) or <supports-in-parens> ] (en-US)* (en-US)   

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

<supports-feature> = 
  <supports-decl>  

<general-enclosed> = 
  [ (en-US) <function-token> <any-value>? (en-US) ) ] (en-US)  | (en-US)
  [ (en-US) ( <any-value>? (en-US) ) ] (en-US)                 

<supports-decl> = 
  ( <declaration> )