files/pt-br/web/css/image-set()/index.html


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

---
title: image-set()
slug: Web/CSS/image-set()
translation_of: Web/CSS/image-set()
---
<div>{{cssref}}</div>

<p class="summary">A notação de função CSS <code>image-set()</code> é um método de deixar o navegador escolher a imagem CSS mais apropriada de um dado conjunto, principalmente para telas de alta densidade de pixels.</p>

<p>Resolução e largura de banda diferem por dispositivo e acesso à rede. A função <code>image-set()</code> oferece a resolução de imagem mais apropriada para o dispositivo de um usuário, fornecendo um conjunto de opções de imagem — cada uma com uma declaração de resolução associada — da qual o navegador escolhe o mais apropriado para o dispositivo e as configurações. A resolução pode ser usada como um proxy para o tamanho do arquivo — um agente de usuário em uma conexão móvel lenta, com uma tela de alta resolução, pode preferir receber imagens de baixa resolução em vez de aguardar uma imagem de alta resolução carregar.</p>

<p><code>image-set()</code> permite que o autor forneça opções em vez de determinar o que cada usuário individual precisa.</p>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="syntaxbox notranslate">image-set() = image-set( &lt;image-set-option&gt;# )
where &lt;image-set-option&gt; = [ &lt;image&gt; | &lt;string&gt; ] &lt;resolution&gt; and
      &lt;string&gt; is an &lt;url&gt;
</pre>

<h3 id="Valores">Valores</h3>

<p>Mais comumente, você verá um valor de  <code>url()</code> <code>&lt;string&gt;</code>, mas o <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> pode ser qualquer tipo de imagem, exceto para um conjunto de imagens. A função <code>image-set()</code> não pode ser aninhada dentro de outra função <code>image-set()</code>.</p>

<p>unidades <code><a href="/en-US/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> incluem <code>x </code>ou <code>ddpx,</code> para pontos por unidade de pixel, <code>dpi</code>, para pontos por polegada, e <code>dpcm</code> para pontos per centímetro. Toda imagem dentro de <code>image-set()</code> deve ter uma única resolução.</p>

<h2 id="Exemplos">Exemplos</h2>

<pre class="brush: css notranslate">background-image: image-set( "cat.png" 1x,
                             "cat-2x.png" 2x);</pre>

<p>Este exemplo mostra como usar <code><a class="css" href="https://drafts.csswg.org/css-images-4/#funcdef-image-set" id="ref-for-funcdef-image-set⑨">image-set()</a></code> para fornecer duas opções alternativas {{cssxref("background-image")}}, escolhidas dependendo da resolução necessária: uma versão normal e uma versão de alta-resolução.</p>

<h2 id="Preocupações_de_Acessibilidade">Preocupações de Acessibilidade</h2>

<p>Tecnologia assistiva não pode analisar imagens de fundo. Se a imagem contiver informações críticas para entender a finalidade geral da página, é melhor descrevê-la semanticamente no documento.</p>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
 <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1  | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Especificação</th>
   <th>Status</th>
   <th>Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td>
   <td>{{Spec2('CSS4 Images')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade entre navegadores</h2>


<p>{{Compat("css.types.image.image-set")}}</p>

<h2 id="See_also" name="See_also">Veja também</h2>

<ul>
 <li>{{cssxref("image")}}</li>
 <li>{{cssxref("_image", "image()")}}</li>
 <li>{{cssxref("element")}}</li>
 <li>{{cssxref("url")}}</li>
 <li>{{cssxref("&lt;gradient&gt;")}}</li>
 <li>{{cssxref("image-set","image-set()")}}</li>
 <li>{{cssxref("cross-fade")}}</li>
</ul>