diff options
Diffstat (limited to 'files/pt-br/web/css/max-width/index.html')
| -rw-r--r-- | files/pt-br/web/css/max-width/index.html | 200 |
1 files changed, 200 insertions, 0 deletions
diff --git a/files/pt-br/web/css/max-width/index.html b/files/pt-br/web/css/max-width/index.html new file mode 100644 index 0000000000..b734872b64 --- /dev/null +++ b/files/pt-br/web/css/max-width/index.html @@ -0,0 +1,200 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - CSS + - Dimensões + - Layout + - Limites + - Máximo + - Propriedade CSS + - Referencia + - largura + - max-width + - 'receita:propriedade-css' + - tamanho +translation_of: Web/CSS/max-width +--- +<div>{{CSSRef}}</div> + +<div>A propriedade <strong><code>max-width</code></strong> do <a href="/en-US/docs/CSS">CSS</a> estabelece a largura máxima de um elemento. Ele evita que o <a href="/en-US/docs/Web/CSS/used_value">valor usado</a> da propriedade {{ cssxref("width") }} se torne maior que o valor especificado por <code>max-width</code>.</div> + +<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div> + +<p class="hidden">O código dos exemplos interativos está armazenado em um repositório GitHub. Se você gostaria de contribuir com o projeto exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um pull request.</p> + +<p><code>max-width</code> substitui {{cssxref("width")}}, mas {{cssxref("min-width")}} substitui <code>max-width</code>.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css no-line-numbers notranslate">/* <length> valor */ +max-width: 3.5em; + +/* <porcentagem> valor */ +max-width: 75%; + +/* Valores de keyword */ +max-width: none; +max-width: max-content; +max-width: min-content; +max-width: fit-content; +max-width: fill-available; + +/* Valores Globais */ +max-width: inherit; +max-width: initial; +max-width: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>Define a <code>max-width</code> como um valor absoluto.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Define a <code>max-width</code> como uma porcentagem da largura do bloco que o contém.</dd> +</dl> + +<h4 id="Valores_Keyword">Valores Keyword</h4> + +<dl> + <dt><code>none</code></dt> + <dd>A largura não possui valor máximo. (padrão)</dd> + <dt><code>max-content</code>{{experimental_inline()}}</dt> + <dd>A <code>max-width</code> intrínseca preferida.</dd> + <dt><code>min-content</code>{{experimental_inline()}}</dt> + <dd>O mínimo <code>max-width</code> intrínseco.</dd> + <dt><code>fit-content({{cssxref("<length-percentage>")}})</code></dt> + <dd>Use a fórmula <code>fit-content</code> com o espaço disponível substituído pelo argumento especificado, i.e. <code>min(max-content, max(min-content, <em>argumento</em>)).</code></dd> +</dl> + +<h4 id="Preocupações_de_Acessibilidade">Preocupações de Acessibilidade</h4> + +<p>Certifique-se que os elementos definidos com <code>max-width</code> não sejam truncados e/ou não obscureçam outros conteúdos quando a página for ampliada para aumentar o tamanho do texto.</p> + +<dl> + <dt><code>fill-available</code>{{experimental_inline()}}</dt> + <dd>A largura contida do bloco sem o margin, border e padding horizontal. (Note que alguns navegadores implementaram um nome antigo para essa keyword, <code>available</code>.)</dd> + <dt><code>fit-content</code>{{experimental_inline()}}</dt> + <dd>O mesmo que <code>max-content.</code></dd> +</dl> + +<h4 id="Sintaxe_formal">Sintaxe formal</h4> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h4 id="Exemplos">Exemplos</h4> + +<h3 id="Definindo_a_largura_máxima_em_pixels">Definindo a largura máxima em pixels</h3> + +<p>Neste exemplo, o "filho" terá 150 pixels de largura ou a largura do "pai", o que for menor:</p> + +<div id="basic-max-width-demo"> +<pre class="brush: html notranslate"><div id="pai"> + <div id="filho"> + Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis. + </div> +</div> +</pre> + +<pre class="brush: css notranslate">#pai { + background: lightblue; + width: 300px; +} + +#filho { + background: gold; + width: 100%; + max-width: 150px; +} +</pre> +</div> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("<code>Setting_max_width_in_pixels</code>", 350, 100)}}</p> + + + + + + + +<p>O valor de <code>fit-content</code> pode ser usado para atribuir o comprimento de um elemento no tamanho intrínseco necessário pelo seu conteúdo:</p> + +<div id="fit-content-demo"> +<pre class="brush: html notranslate" style="display: none;"><div id="parent"> + <div id="child"> + Child Text + </div> +</div> +</pre> + +<pre class="brush: css notranslate">#parent { + background: lightblue; + width: 300px; +} + +#child { + background: gold; + width: 100%; + max-width: -moz-fit-content; + max-width: -webkit-fit-content; +} +</pre> +</div> + +<p>{{EmbedLiveSample("fit-content-demo", 400, 100)}}</p> + +<h2 id="Preocupações_de_acessibilidade">Preocupações de acessibilidade</h2> + +<p>Garantir que os elementos atribuidos com <code>max-width</code> não estejam cortados e/ou não obscureça outro conteúdo quando a página é ampliada para aumentar o tamanho do texto. </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" rel="noopener">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 Sizing', '#width-height-keywords', 'max-width') }}</td> + <td>{{ Spec2('CSS3 Sizing') }}</td> + <td>Adiciona o <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, e <code>fill-available</code> keywords.<em> </em>(Ambos CSS3 Box e CSS3 Writing Modes são rascunhos usados para definir essas keywords, mas foram substituídas por essa especificação.<em>)</em></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Define <code>max-width</code> como animável.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade com navegador</h2> + +<div class="hidden">A tabela de compatibilidade desta página é gerada por dados estruturados. Se você gostaria de contribuir com esses dados, por favor verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie nos um pull request.</div> + +<p>{{Compat("css.properties.max-width")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}</li> + <li><a href="/en/CSS/box_model" title="en/CSS/box_model">The box model</a>, {{ Cssxref("box-sizing") }}</li> +</ul> |