diff options
Diffstat (limited to 'files/pt-br/web/css/calc/index.html')
| -rw-r--r-- | files/pt-br/web/css/calc/index.html | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/files/pt-br/web/css/calc/index.html b/files/pt-br/web/css/calc/index.html new file mode 100644 index 0000000000..5cd94f3dec --- /dev/null +++ b/files/pt-br/web/css/calc/index.html @@ -0,0 +1,163 @@ +--- +title: calc() +slug: Web/CSS/calc +tags: + - CSS + - Calculate + - Função + - Função CSS + - Layout + - Web + - calc +translation_of: Web/CSS/calc() +original_slug: 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> + +{{csssyntax}} + +<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 quã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="Browser_compatibility">Compatibilidade com navegadores</h2> + +<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> |