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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
---
title: calc()
slug: Web/CSS/calc()
tags:
- CSS
- Calculate
- Função
- Função CSS
- Layout
- Web
- calc
translation_of: Web/CSS/calc()
---
<div>{{CSSRef}}</div>
<p>A função <strong><code>calc()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> permite você executar cálculos quando especificar os valores de propriedades no CSS. Pode ser utilizada em qualquer lugar , como {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, e {{cssxref("<integer>")}} é permitido.</p>
<pre class="brush: css no-line-numbers notranslate">/* propriedade: calc(expressão) */
width: calc(100% - 80px);
</pre>
<h2 id="Syntax">Syntax</h2>
<p>A função <code>calc()</code> recebe uma simples expressão como parâmetro e o resultado desta expressão é utilizado como valor. Pode ser uma simples expressão, combinando os seguintes operadores, utilizando padrão <a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">operator precedence rules</a>:</p>
<dl>
<dt><code>+</code></dt>
<dd>Adição.</dd>
<dt><code>-</code></dt>
<dd>Subtração.</dd>
<dt><code>*</code></dt>
<dd>Multiplicação. Pelo menos um dos argumentos deve ser um {{cssxref("<number>")}}.</dd>
<dt><code>/</code></dt>
<dd>Divisão. O operador da direita deve ser um {{cssxref("<number>")}}.</dd>
</dl>
<p>Os operandos na expressão podem ser qualquer valor de sintaxe {{cssxref ("<length>")}}. Você pode usar unidades diferentes para cada valor em sua expressão, se desejar. Você também pode usar parênteses para estabelecer a ordem de computação quando necessário.</p>
<h3 id="Notas">Notas</h3>
<ul>
<li>Divisão por 0 (zero) resulta em um erro gerado pelo HTML parser.</li>
<li>Os operadores + e - devem estar cercados por <strong>espaço em branco</strong>. Por exemplo, calc (50% -8px) será analisado como uma porcentagem seguida por um comprimento negativo - uma expressão inválida — enquanto calc (50% - 8px) é uma porcentagem seguida por um operador de subtração e um comprimento. Da mesma forma, calc (8px + -50%) é tratado como um comprimento seguido por um operador de adição e uma porcentagem negativa.</li>
<li>Os operadores <code>*</code> e <code>/</code> não requerem espaço em branco, mas adicioná-lo para consistência é permitido e recomendado.</li>
<li>Expressões matemáticas envolvendo porcentagens de larguras e alturas em colunas de tabela, grupos de coluna de tabela, linhas de tabela, grupos de linhas de tabela e células de tabela em tabelas de layout automáticas e fixas podem ser tratadas como se <code>auto</code> tivesse sido especificado.</li>
<li>É permitido aninhar funções <code>calc ()</code>, em cujo caso as internas são tratadas como parênteses simples.</li>
</ul>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Posicionando_um_objeto_na_tela_usando_margin">Posicionando um objeto na tela usando margin</h3>
<p><code>calc()</code> torna mais fácil posicionar um objeto com uma margem definida. Nesse exemplo, o CSS cria um banner que se estende pela janela, com um espaço de 40px entre os dois lados do banner e das bordas da janela:</p>
<pre class="brush: css notranslate">.banner {
position: absolute;
left: 40px;
width: calc(100% - 80px);
border: solid black 1px;
box-shadow: 1px 2px;
background-color: yellow;
padding: 6px;
text-align: center;
box-sizing: border-box;
}
</pre>
<pre class="brush: html notranslate"><div class="banner">This is a banner!</div></pre>
<p>{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}}</p>
<h3 id="Dimensionar_campos_de_formulário_automaticamente_para_caber_em_seu_contêiner">Dimensionar campos de formulário automaticamente para caber em seu contêiner</h3>
<p>Outro caso para <code>calc()</code> é ajudar a garantir que os campos do formulário caibam no espaço disponível, sem expandir para além da borda do seu contêiner, enquanto mantém uma margem apropriada.</p>
<p>Veja-mos no CSS:</p>
<pre class="brush: css notranslate">input {
padding: 2px;
display: block;
width: calc(100% - 1em);
}
#formbox {
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
</pre>
<p>Aqui, o próprio formulário é estabelecido para utilizar 1/6 da largura da janela disponível. Então, para garantir que os campos de entrada mantenham um tamanho apropriado, utilizamos <code>calc()</code> novamente para estabelecer que eles devem ter a largura de seu contêiner menos 1em. Então, o seguinte HTML utiliza este CSS:</p>
<pre class="brush: html notranslate"><form>
<div id="formbox">
<label>Type something:</label>
<input type="text">
</div>
</form>
</pre>
<p>{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}}</p>
<h3 id="calc_inserido_em_variáveis_de_CSS">calc( ) inserido em variáveis de CSS</h3>
<p>Você também pode utilizar <code>calc()</code> com <a href="/en-US/docs/Web/CSS/CSS_Variables">variáveis de CSS</a>. Considere o seguinte código:</p>
<pre class="brush: css notranslate">.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}</pre>
<p>Depois que todas as variáveis forem expandidas, o valor de <code>widthC</code> será <code>calc( calc( 100px / 2) / 2)</code>, então quando for atribuído à propriedade de largura <code>.foo</code>, todos os <code>calc()</code> internos (não importa o qquão profundamente atribuídos) serão nivelados para apenas parênteses, de modo que o valor da propriedade <code>width</code> será eventualmente <code>calc( ( 100px / 2) / 2)</code>, i.e. <code>25px</code>. Resumindo: um <code>calc()</code> dentro de um <code>calc()</code> é idêntico à parênteses.</p>
<h2 id="Questões_de_acessibilidade">Questões de acessibilidade</h2>
<p>Quando <code>calc()</code> é usado para controlar o tamanho do texto, certifique-se de que um dos valores inclui uma <a href="/en-US/docs/Web/CSS/length#Relative_length_units">unidade de comprimento relativo</a>, por exemplo:</p>
<pre class="brush: css notranslate">h1 {
font-size: calc(1.5rem + 3vw);
}</pre>
<p>Isso garante que o tamanho do texto será redimensionado se a página for ampliada.</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
</ul>
<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 Values', '#calc-notation', 'calc()')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td>Definição inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de pull.</div>
<p>{{Compat("css.types.calc")}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="https://hacks.mozilla.org/2010/06/css3-calc/">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li>
</ul>
|
