1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: '@import'
slug: Web/CSS/@import
translation_of: Web/CSS/@import
---
<div>{{CSSRef}}</div>
<h2 id="Sumário">Sumário</h2>
<p>A <a href="/en-US/docs/Web/CSS/At-rule">Regra Atribuída (at-rule) </a><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>@import </code></strong>é usado para importar regras de estilo de outras folhas de estilo. Estas regras devem preceder todos os outros tipos de regras, exceto as regrasde <a href="/pt-BR/docs/Web/CSS/@charset">@charset</a> ; uma vez que não é um <a href="/en-US/docs/Web/CSS/Syntax#nested_statements">Declaração aninhada</a>, <code>@import não pode ser usado dentro do</code> <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules">grupo condicional de regras atribuídas (at-rules)</a>.</p>
<p><span id="result_box" lang="pt"><span class="alt-edited">Assim como</span> <span class="alt-edited">os agentes do usuário</span> <span class="alt-edited">podem evitar</span> <span>a recuperação de</span> <span>recursos</span> <span>para os tipos de</span> <span>mídia incompatíveis</span><span>, os autores podem</span> <span>especificar regras</span> <span>@import</span> <span>dependentes de mídia</span><span>.</span> <span>Estas importações</span> <span>condicionais</span> <span class="alt-edited">devem ter </span></span> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> <span lang="pt"><span class="alt-edited">separadas por vírgulas</span></span> após a URI. <span id="result_box" lang="pt"><span>Na ausência</span> <span>de qualquer</span> <span>consulta de mídia</span><span> (media queries), a importação</span> <span>é incondicional.</span> <span>Especificando</span> <span>todos</span> <span>para o médio</span> <span>tem o mesmo efeito</span></span>.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="eval">@import <em>url</em>;
@import <em>url</em> <em>list-of-media-queries</em>;
</pre>
<p>where:</p>
<dl>
<dt style="margin: 0 40px;"><em>url</em></dt>
<dd style="margin: 0 40px;">É algo como {{cssxref("<string>")}} ou como {{cssxref("<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: <strong>chrome://communicator/skin/</strong>). <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL">Veja aqui</a> para mais informações.</dd>
<dt style="margin: 0 40px;"><em>list-of-media-queries</em></dt>
<dd style="margin: 0 40px;">É uma lista separada por vírgulas de <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">consultas de mídia (media queries)</a> 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.</dd>
</dl>
<h2 id="Sintaxe_formal">Sintaxe formal</h2>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemplos">Exemplos</h2>
<pre class="brush: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);
</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Situação</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td>
<td>{{Spec2('CSS3 Media Queries')}}</td>
<td><span id="result_box" lang="pt"><span class="alt-edited">Estendeu</span> <span>a sintaxe</span> <span>para apoiar qualquer</span> <span>consulta de mídia</span> <span>e</span> <span>não apenas</span> <span>simples</span></span> <a href="/en-US/docs/Web/CSS/@media#Media_types">tipos de mídia (media types)</a>.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Adicionado suporte para {{cssxref("<string>")}} para denotar a URL de uma folha de estilo,<br>
e obrigatoriedade da regra <code>@import</code> no início do documento CSS.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Definição inicial</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibilidade">Browser compatibilidade</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>5.5</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suorte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>5.5</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
|
