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
122
123
124
125
126
127
128
129
130
131
132
133
134
|
---
title: env()
slug: Web/CSS/env()
tags:
- CSS
- CSS Function
- CSS Variables
- Draft
- Reference
- Variables
- env
- env()
translation_of: Web/CSS/env()
---
<div>{{CSSRef}}</div>
<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>env()</code></strong> pode ser usada para inserir o valor de uma variável de ambiente definida pelo agente do usuário em seu CSS, de uma maneira semelhante à função {{cssxref("var")}} e <a href="/pt-BR/docs/Web/CSS/--*">propriedades personalizadas</a>. A diferença é que, além de serem definidas pelo agente do usuário em vez de serem definidas pelo usuário, as variáveis de ambiente têm escopo global para um documento, enquanto as propriedades personalizadas têm um escopo para o(s) elemento(s) no(s) qual(is) é/são declarado(s).</p>
<pre class="brush: css notranslate">body {
padding:
env(safe-area-inset-top, 20px)
env(safe-area-inset-right, 20px)
env(safe-area-inset-bottom, 20px)
env(safe-area-inset-left, 20px);
}</pre>
<p>Além disso, ao contrário das propriedades personalizadas, que não podem ser usadas fora do escopo das declarações, a função <code>env()</code> pode ser usada em qualquer parte do valor de uma propriedade ou em qualquer parte de um <em>descriptor</em> (por exemplo, regras <a href="/pt-BR/docs/Web/CSS/@media">Media</a>). À medida que a especificação evolui, essa também pode ser usada em outros lugares, como em seletores.</p>
<p>Originalmente fornecido pelo navegador iOS para permitir que os desenvolvedores coloquem seu conteúdo em uma <em>safe area</em> (área segura) na janela de visualização, os valores de <code>safe-area-inset-*</code> definidos na especificação podem ser usados para ajudar a garantir que o conteúdo seja visível até mesmo para usuários que usam uma tela não retangular.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="brush: css notranslate">/* Usando os quatro valores de inserção <em>safe area</em> sem valores de <em>fallback </em>*/
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
/* Usando-os com valores de <em>fallback</em> */
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code id="safe-area-inset-top" style="white-space: nowrap;">safe-area-inset-top</code>, <code id="safe-area-inset-right" style="white-space: nowrap;">safe-area-inset-right</code>, <code id="safe-area-inset-bottom" style="white-space: nowrap;">safe-area-inset-bottom</code>, <code id="safe-area-inset-left" style="white-space: nowrap;">safe-area-inset-left</code></dt>
<dd>As variáveis <code>safe-area-inset-*</code> são quatro variáveis de ambiente que definem um retângulo por seus valores de inserção: <em>top, right, bottom</em> e <em>left </em>a partir da borda da janela de visualização, no qual é seguro colocar o conteúdo sem o risco de ser cortado pela forma de um visor não retangular. Para janelas de visualização retangulares, como o monitor de um laptop comum, seu valor é igual a zero. Para telas não retangulares - como um visor de um relógio redondo - os quatro valores definidos pelo agente do usuário formam um retângulo de modo que todo o conteúdo dentro do retângulo seja visível.</dd>
</dl>
<div class="blockIndicator note">
<p><strong>Nota</strong>: Ao contrário de outras propriedades CSS, os nomes de propriedades definidos pelo agente do usuário fazem distinção entre maiúsculas e minúsculas.</p>
</div>
<h3 id="Sintaxe_formal">Sintaxe formal</h3>
{{cssSyntax}}
<h2 id="Exemplos">Exemplos</h2>
<p>O exemplo abaixo faz uso do segundo parâmetro opcional de <code>env()</code>, que permite fornecer um valor de <em>fallback </em>caso a variável de ambiente não esteja disponível.</p>
<pre class="brush: html notranslate"><p>
Se a função <code>env()</code> é suportada em seu navegador,
o texto deste parágrafo deverá estar na borda <i>top</i>, <i>right</i> e <i>bottom</i>,
ter 50px de preenchimento entre a borda e o texto. O CSS é equivalente
ao preenchimento: <code>padding: 0 0 0 50px</code>,
porque, ao contrário de outras propriedades CSS, os nomes de
propriedades do agente do usuário diferenciam letras maiúsculas de
minúsculas.
</p></pre>
<pre class="brush: css notranslate">p {
width: 300px;
border: 2px solid red;
padding:
env(safe-area-inset-top, 50px)
env(safe-area-inset-right, 50px)
env(safe-area-inset-bottom, 50px)
env(SAFE-AREA-INSET-LEFT, 50px);
}</pre>
<p>{{EmbedLiveSample("Exemplos")}}</p>
<h3 id="Exemplo_com_valores">Exemplo com valores</h3>
<pre class="brush: css notranslate">padding: env(safe-area-inset-bottom, 50px); /* zero para todos agentes do usuário que são retangulares*/
padding: env(Safe-area-inset-bottom, 50px); /* 50px porque as propriedades do agente do usuário diferenciam maiúsculas de minúsculas */
padding: env(x, 50px 20px); /* como se estivesse preenchendo: '50px 20px' que foram definidos, porque x não é uma variável de ambiente válida */
padding: env(x, 50px, 20px); /* ignorado '50px, 20px' porque não é um valor de preenchimento válido e x não é uma variável de ambiente válida */
</pre>
<p>A sintaxe <em>fallback</em>, como de propriedades customizadas, permite vírgulas. Mas se o valor da propriedade não suportar vírgulas, o valor não é válido.</p>
<div class="blockIndicator note">
<p><strong>Nota</strong>: As propriedades do agente do usuário não são redefinidas pela propriedade <a href="/en-US/docs/Web/CSS/all">all</a>.</p>
</div>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}</td>
<td>{{Spec2("CSS3 Environment Variables")}}</td>
<td>Definição inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
<p>{{Compat("css.properties.custom-property.env")}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{CSSxRef("var", "var(…)")}}</li>
<li><a href="/en-US/docs/Web/CSS/CSS_Variables">CSS Custom Properties for Cascading Variables</a></li>
<li><a href="/en-US/docs/Web/CSS/--*">Custom Properties (--*)</a></li>
<li><a href="/en-US/docs/Web/CSS/Using_CSS_variables">Using CSS custom properties (variables)</a></li>
<li>{{CSSxRef("@viewport/viewport-fit", "viewport-fit (@viewport)")}}</li>
</ul>
|
