@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 [ (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()>  | (en-US)  
  <src()>    
  
<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)    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* (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> )    
  
```

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.