diff options
Diffstat (limited to 'files/pt-br/web/guide/css')
4 files changed, 815 insertions, 0 deletions
diff --git a/files/pt-br/web/guide/css/css_media_queries/index.html b/files/pt-br/web/guide/css/css_media_queries/index.html new file mode 100644 index 0000000000..4b9728eebd --- /dev/null +++ b/files/pt-br/web/guide/css/css_media_queries/index.html @@ -0,0 +1,639 @@ +--- +title: Usando Media Queries +slug: Web/Guide/CSS/CSS_Media_queries +tags: + - CSS + - Desenho Responsivo + - Design Responsivo +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +<p>Uma <strong>media query</strong> consiste de um <em>media type </em>e pelo menos uma expressão que limita o escopo das folhas de estilo usando <em>media features</em>, tal como largura, altura e cor. <em>Media queries</em>, adicionadas no<span class="seoSummary"> <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, </span>deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p><em>Media queries</em> consistem de um <em><a href="en-US/docs/Web/CSS/@media">media type</a></em> e podem, a partir de uma especificação CSS3, contendo uma ou mais expressões, expressa em <em>media features</em>, que determinam ou verdadeiro ou falso. Os resultados da <em>query</em> são verdadeiros se o <em>media type</em> especificado na <em>media query</em> corresponde ao tipo do documento exibido no dispositivo e todas as expressões na <em>media query</em> são verdadeiras.</p> + +<pre class="brush: html"><!-- CSS media query em um elemento de link --> +<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> + +<!-- CSS media query dentro de um stylesheet --> + +<style> +@media (max-width: 600px) +{ + .facet_sidebar + { + display: none; + } +} +</style></pre> + +<p>Quando uma <em>media query</em> é verdadeira, a camada de estilo ou as regras de estilos correspondentes são aplicadas, seguindo o padrão de regras de cascatas. Camadas de estilos com <em>media queries</em> ligadas a tag <link> <a href="http://scottjehl.github.com/CSS-Download-Tests/">vão fazer download</a> mesmo se suas <em>medias queries</em> retornarem falso (eles não se aplicam, no entanto).</p> + +<p>A menos que você use os operadores <code>not</code> ou <code>only</code>, o <em>media type</em> é opcional e o tipo <code>all</code> será implícito.</p> + +<h3 id="Operadores_lógicos">Operadores lógicos</h3> + +<p>Você pode compor <em>media queries</em> complexos usando operadores lógicos, incluindo <code>not</code>, <code>and</code>, e <code>only</code>. O operador <code>and</code> é usado para combinar múltiplas <em><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries$edit#Media_features">media features</a></em> em uma mesma <em>media query</em>, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a <em>query</em> seja verdadeiro. O operador <code>not</code> é usado para negar uma <em>media query</em> inteira. O operador <code>only</code> é usado para aplicar um estilo apenas se a <em>query</em> inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadores <code>not</code> ou <code>only</code>, você tem que especificar um tipo de <em>media</em> explícito.</p> + +<p>Você também pode combinar múltiplas <em>medias queries</em> em uma lista separadas por vírgulas, se qualquer uma das <em>media queries</em> na lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador <code>or</code>.</p> + +<h4 id="and"><strong>and</strong></h4> + +<p>A palavra-chave <code>and</code> é usada para combinar múltiplas <em>media features</em>, bem como combinar <em>media features</em> com <em>media types</em>. Uma <em>media query</em> básica, uma<em> media feature</em> simples com a <em>media type</em> <code>all</code>, pode parecer com isso:</p> + +<pre class="brush: css">@media (min-width: 700px) { ... }</pre> + +<p>Se, no entanto, você desejar que isso se aplique apenas para telas em landscape, você pode usar o operador <code>and</code> para deixar todas as <em>media features</em> juntas.</p> + +<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>Agora, a <em>media query</em> acima vai apenas retorna verdadeira se o viewport for 700px, <em>wide</em> ou <em>wider</em> e a tela estiver em <em>landscape</em>. Se, no entanto, você deseja apenas que isso seja aplicado se a tela em questão for <em>media type</em> TV, você pode encadear essas <em>features</em> com a <em>media type</em> usando o operador <code>and</code>.</p> + +<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>Agora, a <em>media query</em> acima vai ser aplicada apenas se a <em>media type</em> for TV, o <em>viewport</em> for 700px <em>wide</em> ou <em>wider</em>, e a tela estiver em paisagem.</p> + +<h4 id="Listas_separadas_por_vírgula">Listas separadas por vírgula</h4> + +<p>Listas separadas por vírgulas comportam-se como o operador <code>or</code> quando utilizadas em <em>media queries</em>. Quando utilizamos <em>media queries</em> com uma lista separada por vírgulas, se qualquer <em>media queries</em> retornar verdadeiro, os estilos ou folhas de estilos serão aplicadas. Cada <em>media query</em> em um lista separa por vírgulas é tratada como uma <em>query</em> individual, e qualquer operador aplica em uma <em>media query</em> não afeta os outros. Isto significa que <em>media queries</em> separadas por vírgulas podem ter objetivos diferentes de <em>media</em> <em>features</em>, <em>types</em> e <em>states</em>.</p> + +<p>Por exemplo, se você quiser aplicar um conjunto de estilos se o dispositivo de visualização tiver um largura mínima de 700px ou estiver sendo segurando em paisagem, você pode escrever o seguinte:</p> + +<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre> + +<p>Acima, se eu estivesse em um dispositivo <code>screen</code> com um <em>viewport</em> largura de 800px, a afirmação retorna verdadeiro por que a primeira parte, interpretada como <code>@media all and (min-width: 700px)</code> será aplicada no meu dispositivo e portanto retorna verdadeiro, apesar do fato que meu dispositivo <code>screen</code> iria falhar no <em>media type</em> <code>handheld</code> na segunda <em>media query</em>. Do mesmo modo, se eu estivesse segurando um dispositivo em paisagem com um <em>viewport</em> de largura de 500px, enquanto a primeira media query falha devido a largura do <em>viewport</em>, a segunda <em>media query</em> teria sucesso e assim o <em>media statement</em> retorna verdadeiro.</p> + +<h4 id="not">not</h4> + +<p>A palavra chave <code>not</code> se aplica em toda a <em>media query</em> e retorna verdadeiro, caso contrário retorna falso (tal como monochrome como cor de tela ou uma tela de largura de 600px com um <code>min-width: 700px</code> recurso consultado). Um not vai apenas negar a <em>media query</em> que é aplicada, de modo não toda a <em>media query</em> que apresente uma <em>media querie</em> com uma lista separada por vírgulas. A palavra chave <code>not</code> não pode ser usada para negar uma característica individual da <em>query</em>, apenas uma <em>media query</em> inteira. Por exemplo, o <code>not</code> é avaliado por último na <em>query</em> seguinte:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... } +</pre> + +<p>Isto significa que a <em>query</em> é avaliada assim:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... } +</pre> + +<p>... em vez disso:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre> + +<p>Um outro exemplo, veja a <em>media query</em> seguinte:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color) +</pre> + +<p>É avalida desta forma:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre> + +<h4 id="only">only</h4> + +<p><span style="line-height: 21px;">A palavra chave </span><em><code style="font-size: 14px;">only</code></em><span style="line-height: 21px;"> previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:</span></p> + +<pre class="brush: html"><link rel="stylesheet" media="only screen and (color)" href="example.css" /> +</pre> + +<h3 id="Pseudo-BNF">Pseudo-BNF</h3> + +<pre>media_query_list: <media_query> [, <media_query> ]* +media_query: [[only | not]? <media_type> [ and <expression> ]*] + | <expression> [ and <expression> ]* +expression: ( <media_feature> [: <value>]? ) +media_type: all | aural | braille | handheld | print | + projection | screen | tty | tv | embossed +media_feature: width | min-width | max-width + | height | min-height | max-height + | device-width | min-device-width | max-device-width + | device-height | min-device-height | max-device-height + | aspect-ratio | min-aspect-ratio | max-aspect-ratio + | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio + | color | min-color | max-color + | color-index | min-color-index | max-color-index + | monochrome | min-monochrome | max-monochrome + | resolution | min-resolution | max-resolution + | scan | grid</pre> + +<p><em>Media queries</em> são <em>case insensitive</em>. <em>Media queries</em> envolvidas em <em>media types</em> desconhecidos serão sempre falsas.</p> + +<div class="note"><strong>Nota:</strong> Parenteses são obrigatórios em volta de expressões; a falta deles é um erro.</div> + +<h2 id="Características_de_mídia">Características de mídia</h2> + +<p>A maioria das <em>media features</em> podem ter prefixo “min-” ou “max-“ para expressar as restrições “maior ou igual” ou “menor ou igual”. Isto evita o uso dos símbolos “<” e “>” , que entrem em conflito com HTML e XML. Se você usar uma <em>media feature</em> sem especificar um valor, a expressão retorna verdadeiro, se o valor da <em>feature</em> for diferente de zero.</p> + +<div class="note"><strong>Nota:</strong> Se uma media feature não se aplicar ao dispositivo onde o navegador esta sendo executado, as expressões que envolvem essa media feature são sempre falsas. Por exemplo, consultar um aspecto de um dispositivo sonoro, sempre resulta em falso.</div> + +<h3 id="cor">cor</h3> + +<p><strong>Valor:</strong> {{cssxref("<color>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> sim</p> + +<p>Indica o número de bits por componente de cor no dispositivo de saída. Se o dispositivo não é um dispositivo de cor, o valor é zero.</p> + +<div class="note"><strong>Nota:</strong> Se os componentes de cor têm diferentes números de bits por componente de cor, o menor valor é utilizado. Por exemplo, se o display usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo considera 5 bits por componente de cor. Se o dispositivo usar cores indexadas, o menor número de bits por componente de cor na tabela de cores é usado.</div> + +<h4 id="Exemplos">Exemplos</h4> + +<p>Aplicar uma folha de estilo a todos dispositivos:</p> + +<pre class="brush: css">@media all and (color) { ... } +</pre> + +<p>Aplicar uma folha de estilo a todos dispositivos com no mínimo 4 bits de color componente:</p> + +<pre class="brush: css">@media all and (min-color: 4) { ... } +</pre> + +<h3 id="color-index">color-index</h3> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> Sim</p> + +<p>Indica o número de entradas na tabela de consulta de cores para o dispositivo de saída.</p> + +<h4 id="Exemplos_2">Exemplos</h4> + +<p>Para indicar que uma folha de estilo deve ser aplicada para todos os dispositivos que usam cores indexadas, você pode fazer:</p> + +<pre class="brush: css">@media all and (color-index) { ... } +</pre> + +<p>Para aplicar uma folha de estilo em um dispositivo com cores indexadas menor que 256 cores:</p> + +<pre class="brush: html"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> +</pre> + +<h3 id="aspect-ratio">aspect-ratio</h3> + +<p><strong>Valor:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Aceita prefixos min/max:</strong> sim</p> + +<p>Descreve o aspecto da relação da área do display do dispositivo de saída. Este valor consiste de dois inteiros positivos separados por um caractere barra (“/”). Isto representa a relação entre pixels horizontais (primeiro termo) para pixels verticais (segundo termo).</p> + +<h4 id="Exemplo">Exemplo</h4> + +<p>A seguir selecionamos uma folha de estilo especial para usarmos quando a área do display é pelo menos mais larga do que alta.</p> + +<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre> + +<p>Isto seleciona o estilo quando a relação de aspecto seja 1:1 ou maior. Em outras palavras, estes estilos serão aplicados apenas quando a área de visualização for quadrada ou paisagem.</p> + +<h3 id="device-aspect-ratio">device-aspect-ratio</h3> + +<p><strong>Valor:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Aceita prefixos min/max:</strong> sim</p> + +<p>Descreve a relação de aspecto do dispositivo de saída. Este valor consiste de dois inteiros positivos separados pelo carácter barra (“/”). Isto representa a relação de pixels horizontais (primeiro termo) por pixels verticais (segundo termo).</p> + +<h4 id="Exemplo_2">Exemplo</h4> + +<p>A seguir, selecionamos uma folha de estilo especial para usar em telas widescreen.</p> + +<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> + +<p>Isso seleciona o estilo quando a relação de aspecto é 16:9 ou 16:10.</p> + +<h3 id="device-height">device-height</h3> + +<p><strong>Valor:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Aceita prefixos min/max:</strong> sim</p> + +<p>Descreve a altura do dispositivo de saída( ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).</p> + +<h4 id="Exemplo_3">Exemplo</h4> + +<p>Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800 pixels de altura, você pode usar isso:</p> + +<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-height: 799px)" /> +</pre> + +<h3 id="device-width">device-width</h3> + +<p><strong>Valor:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Aceita prefixos min/max:</strong> sim</p> + +<p>Descreve a largura do dispositivo e saída (ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).</p> + +<h4 id="Exemplo_4">Exemplo</h4> + +<p>Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800px de largura, você pode usar isso:</p> + +<pre class="brush: html" style="font-size: 14px;"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /></pre> + +<h3 id="grid">grid</h3> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> todas<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>Determina se o dispositivo de saída é um dispositivo grade ou um dispositivo bitmap. Se o dispositivo é baseado em grade(tal como um terminal TTY ou uma tela de telefone com apenas um tipo de letra), o valor é 1. De outro modo é zero.</p> + +<h4 id="Exemplo_5">Exemplo</h4> + +<p>Para aplicar um estilo a dispositivos postáteis com 15-carácteres ou uma tela mais estreita:</p> + +<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... } +</pre> + +<div class="note"><strong>Nota:</strong> A unidade "em" tem um significado especial para dispositivos de grade, uma vez que a exata largura de um "em" não pode ser determinada, 1em é assumido para ser a largura de uma célula da grade horizontalmente, e a altura de uma célula verticalmente.</div> + +<h3 id="height">height</h3> + +<p><strong>Valor:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Aceita prefixos min/max:</strong> yes</p> + +<p>A característica <code>height</code> descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura do viewport ou da caixa de página em uma impressora).</p> + +<div class="note"><strong>Nota:</strong> Como o usuário redimensiona a janela, o Firefox muda as folhas de estilo como apropriado, com base nas media queries, usando as media features <code>width</code> e <code>height</code>.</div> + +<h3 id="monochrome">monochrome</h3> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> sim</p> + +<p>Indica o número de bits por pixel em um dispositivo monocromático (greyscale). Se o dispositivo não for monocromático, o valor é 0.</p> + +<h4 id="Exemplos_3">Exemplos</h4> + +<p>Para aplicar uma folha de estilo em todos os dispositivos monocromáticos:</p> + +<pre class="brush: css">@media all and (monochrome) { ... } +</pre> + +<p>Para aplicar uma folha de estilo em dispositivos monocromáticos com pelo menos 8 bits por pixel:</p> + +<pre class="brush: css">@media all and (min-monochrome: 8) { ... } +</pre> + +<h3 id="orientation">orientation</h3> + +<p><strong>Valor:</strong> <code>landscape</code> | <code>portrait</code><br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>Indica se o <em>viewport</em> é modo <em>landscape</em> (o visor é mais largo do que mais alto) ou <em>portrait</em> (o visor é mais alto do que mais largo).</p> + +<h4 id="Exemplo_6">Exemplo</h4> + +<p>Para aplicar a folha de estilo apenas em orientação <em>portrait</em>:</p> + +<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre> + +<div class="note"><strong>Nota: </strong>Este valor não corresponde com a orientação real do dispositivo. Abrindo o teclado virtual na maioria dos dispositivos na orientação retrato fará com que o viewport torne-se mais largo do que alto, fazendo assim que o navegador use estilos de paisagem em vez de retrato.</div> + +<h3 id="resolution">resolution</h3> + +<p><strong>Valor:</strong> {{cssxref("<resolution>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> + <strong>Aceita prefixos min/max:</strong> sim</p> + +<p>Indica a resolução (densidade de pixel) da saída do dispositivo. A resolução pode ser especificada em pontos por inch(dpi) ou pontos por centímetro(dpcm).</p> + +<h4 id="Exemplos_4">Exemplos</h4> + +<p>Para aplicar a folha de estilo em dispositivos com resolução de pelo menos 300 pontos por inch:</p> + +<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... } +</pre> + +<p>Para substituir a antiga sintaxe (min-device-pixel-ratio: 2):</p> + +<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre> + +<h3 id="scan">scan</h3> + +<p><strong>Valor:</strong> <code>progressive</code> | <code>interlace</code><br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/TV")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>Descreve o processo de digitalização de dispositivos saída de televisão.</p> + +<h4 id="Exemplo_7">Exemplo</h4> + +<p>Para aplicar uma folha de estilo apenas para televisores de varredura progressiva:</p> + +<pre class="brush: css">@media tv and (scan: progressive) { ... } +</pre> + +<h3 id="width">width</h3> + +<p><strong>Valor:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Aceita prefixos min/max:</strong> sim</p> + +<p>A <em>media feature</em> <code>width </code>descreve a largura da superficie de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de página em uma impressora).</p> + +<p><strong>Nota:</strong><br> + Como o usuário redimensiona a janela, o Firefox muda as folhas de estilos como apropriado baseado em <em>media queries </em>usando media features <code>width</code> e <code>height</code>.</p> + +<h4 id="Exemplos_5">Exemplos</h4> + +<p>Se você quiser especificar uma folha de estilo para dispositivos portáteis, ou dispositivos screen com uma largura maior que 20em, você pode usar essa <em>query</em>:</p> + +<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } +</pre> + +<p>Essa <em>media query </em>especifica uma folha de estilo que aplica-se para mídias impressas maiores que 8.5 inches.</p> + +<pre class="brush: html"><link rel="stylesheet" media="print and (min-width: 8.5in)" + href="http://foo.com/mystyle.css" /> +</pre> + +<p>Essa <em>query </em>especifica uma folha de estilo que é usada quano o viewport está entre 500 e 800 pixels de largura:</p> + +<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... } +</pre> + +<h2 id="Especificação_da_Mozilla_para_mídias_características">Especificação da Mozilla para mídias características</h2> + +<p>Mozilla oferece várias <em>media features</em> para específicos <em>Gecko</em> . Algumas dessas podem ser sugeridas como <em>media features</em> oficiais.</p> + +<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>Se o dispositivo permite aparecer imagens nos menus, o valor é 1; caso contrário, o valor é 0. Isto corresponde ao {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong>no</p> + +<p>Se o usuário tenha configurado seu dispositivo para usar a aparência <em>"Graphite"</em> no <em>Mac OS X</em>, o valor é 1. Se o usuário está usando a aparência padrão <em>blue</em>, ou não está num <em>Mac OS X</em>, o valor é 0.</p> + +<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>Se o usuário está usando <em>Maemo </em>com o tema original, o valor é 1; Se está usando o mais novo tema <em>Fremantle</em>, o valor é 0.</p> + +<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<number>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> sim</p> + +<p>Dar o número de pixels do dispositivo por pixels do CSS.</p> + +<div class="geckoVersionNote"> +<p><strong>Não use este recurso. </strong></p> + +<p>Em vez disso, use o recurso <em><code>resolution</code></em> com a unidade <code>dppx</code>.<br> + <br> + <code>-moz-device-pixel-ratio</code> pode ser usada para compatibilidade com Firefox mais velho que a versão 16 e <code>-webkit-device-pixel-ratio</code> com navegadores baseados no WebKit que não suportam <code>dppx</code>.</p> + +<p>Exemplo:</p> + +<pre>@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores baseados no Webkit */ + (min--moz-device-pixel-ratio: 2), /* Navegadores mais antigos do Firefox (antes do Firefox 16) */ + (min-resolution: 2dppx), /* Forma padrão */ + (min-resolution: 192dpi) /* dppx fallback */ </pre> + +<p>Veja este artigo <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG</a> para ccompatibilidade de boas práticas em relação a <em><code>resolution</code></em> e <em><code>dppx</code></em>.</p> +</div> + +<div class="note"><strong>Nota</strong>: Esta <em>media feature</em> é também implementada pelo Webkit e pelo <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 para Windows Phone 8.1</a>como <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. Os prefixos min e max implementados pelo Gecko são nomeados <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> e <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; mas os mesmos prefixos implementados pelo Webkit são chamados <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> e <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div> + +<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p> + +<p><strong>Valor:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8</code><br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>Indica qual versão do sistema operacional está sendo usado atualmente. Atualmente apenas implementada no Windows. Possíveis valores são:</p> + +<ul> + <li><code>windows-xp</code></li> + <li><code>windows-vista</code></li> + <li><code>windows-win7</code></li> + <li><code>windows-win8</code></li> +</ul> + +<p>Isto é fornecido pelas <em>skins das aplicações</em> e outros códigos do chrome para serem capazes de se adaptar para funcionar bem com a versão atual do sistema operacional.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>Se a interface do usuário do dispositivo exibe uma seta para trás no final da barra de rolagem, o valor é 1. Caso contrário, é 0.</p> + +<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>Se a interface do usuário do dispositivo a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>Se a interface do usuário do dispositivo a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>Se a interface do usuário do dispositivo a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>Se a interface do usuário do dispositivo the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p> + +<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p> + +<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<h4 id="Exemplo_8">Exemplo</h4> + +<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p> + +<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p> + +<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p> + +<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p> + +<p><strong>Valor:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br> + <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Aceita prefixos min/max:</strong> não</p> + +<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p> + +<ul> + <li><code>aero</code></li> + <li><code>luna-blue</code></li> + <li><code>luna-olive</code></li> + <li><code>luna-silver</code></li> + <li><code>royale</code></li> + <li><code>generic</code></li> + <li><code>zune</code></li> +</ul> + +<p>Isto é previsto para <em>skins</em> de aplicativo e outro código de aplicações de chrome a ser capaz de se adaptar a funcionar bem com o actual tema do Windows.</p> + +<h2 id="Compatibilidade_no_navegador">Compatibilidade no navegador</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatChrome("21") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE("9.0") }}</td> + <td>{{ CompatOpera("9") }}</td> + <td>{{ CompatSafari("4") }}</td> + </tr> + <tr> + <td>Grade</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} (<code>grid</code> media type is not supported)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Resolução</td> + <td>{{ CompatChrome("29") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("<integer>")}} values;<br> + {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("<number>")}} values, as per the spec.</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Scan</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} (<code>tv</code> media type is not supported)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> + <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li> + <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li> + <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li> + <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li> +</ul> diff --git a/files/pt-br/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html b/files/pt-br/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html new file mode 100644 index 0000000000..c2f5f9f4ce --- /dev/null +++ b/files/pt-br/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html @@ -0,0 +1,20 @@ +--- +title: Usando CSS media queries (consultas de mídia em CSS) +slug: Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) +tags: + - CSS + - Guía + - Iniciante + - media query +--- +<p><span class="seoSummary">Uma media query (consulta de mídia) consiste de um tipo de mídia e de, ao menos, uma expressão que restringe o escopo dos estilos CSS pelo uso de propriedades de mídia, como width (largura), height (altura) e color (cor). Media queries, incluídas na especificação CSS3, permitem que a apresentação do conteúdo se adapte a uma variedade de dispositivos de exibição sem a necessidade de mudar o próprio conteúdo.</span></p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>Consultas de mídia consistem em tipos de mídia opcional e podem, de acordo com a especificação CSS3, conter entre nenhuma ou mais expressões, declararadas como propriedades de mídia, que podem conter condições de estado verdadeiras ou falsas. O resultado de uma query (consulta) será verdadeiro se o tipo de mídia especificado nela corresponder ao tipo do dispositivo onde o documento é exibido e todas as expressões contidas na consulta forem verdadeiras.</p> + +<p>Fonte:</p> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries</a></p> + +<p> </p> diff --git a/files/pt-br/web/guide/css/scaling_background_images/index.html b/files/pt-br/web/guide/css/scaling_background_images/index.html new file mode 100644 index 0000000000..e9f7296721 --- /dev/null +++ b/files/pt-br/web/guide/css/scaling_background_images/index.html @@ -0,0 +1,108 @@ +--- +title: Alterando a escala das imagens de background +slug: Web/Guide/CSS/Scaling_background_images +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +--- +<p><span class="seoSummary">A propriedade CSS {{ cssxref("background-size") }} possibilita o ajuste das imagens do background, ao invés do comportamento padrão do navegador de mostrar a imagem no seu tamanho real.</span> Você pode tanto aumentar como diminuir a imagem.</p> + +<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">Duplicando uma imagem grande</h2> + +<p>Vamos considerar uma imagem grande, a image da logo do Firefox com 2982x2808 . Nós queremos (por alguma razão, envolvendo um site com um design ruim) quatro cópia desta imagem em um quadrado de 300x300 pixel, resultando nesse visual:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8965/ss1.png"></p> + +<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Isto pode ser conseguido</span> <span class="hps">usando</span> <span class="hps">o</span> <span class="hps">seguinte</span> <span class="hps">CSS</span></span>:</p> + +<pre class="brush: css; highlight:[8]">.square { + width: 300px; + height: 300px; + background-image: url(firefox_logo.png); + border: solid 2px; + text-shadow: white 0px 0px 2px; + font-size: 16px; + background-size: 150px; +} +</pre> + +<p>O {{ cssxref("background-size") }} não precisa mais de nenhum prefixo, mas <span id="result_box" lang="pt"><span class="hps">você pode</span> <span class="hps">considerar a adição de</span> <span class="hps">uma versão</span> <span class="hps">pré-fixada</span> <span class="hps">se você</span> <span class="hps">está focando em </span><span class="hps">browsers</span> <span class="hps">muito antigos.</span></span></p> + +<h2 id="Stretching_an_image" name="Stretching_an_image">Esticando uma imagem</h2> + +<p><span id="result_box" lang="pt"><span class="hps">Você também pode especificar</span> <span class="hps">ambos</span> <span class="hps">os</span> <span class="hps">tamanhos,</span> <span class="hps">horizontal e vertical</span> <span class="hps">da imagem,</span> <span class="hps">assim</span><span>:</span></span></p> + +<pre class="brush:css">background-size: 300px 150px; +</pre> + +<p>O resultado fica assim:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8967/ss2.png"></p> + +<h2 id="Scaling_an_image_up" name="Scaling_an_image_up"><span class="short_text" id="result_box" lang="pt"><span class="hps">Aumentando escala de uma</span> <span class="hps">imagem</span></span></h2> + +<p><span id="result_box" lang="pt"><span class="hps">Na outra extremidade</span> <span class="hps">do espectro</span><span>, é possível</span> <span class="hps">dimensionar</span><span>-se</span> <span class="hps">uma imagem</span> <span class="hps">no</span> <span class="hps">fundo</span><span>.</span> <span class="hps">Aqui nós</span> aumentamos a escala de <span class="hps">um</span> <span class="hps">favicon</span> <span class="hps">de pixel</span> <span class="hps">32x32</span> para <span class="hps">300x300</span> <span class="hps">pixels</span><span>:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8969/ss3.png"></p> + +<pre class="brush: css; highlight:[5]">.square2 { + width: 300px; + height: 300px; + background-image: url(favicon.png); + background-size: 300px; + border: solid 2px; + text-shadow: white 0px 0px 2px; + font-size: 16px; +} +</pre> + +<p><span id="result_box" lang="pt"><span class="hps">Como você pode ver</span><span>, o</span> <span class="hps">CSS</span> <span class="hps">é, na verdade</span><span>, essencialmente</span> <span class="hps">idêntico, salvo</span> <span class="hps">o nome do</span> <span class="hps">arquivo de imagem.</span></span></p> + +<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">Valores especiais: "contain" e "cover"</h2> + +<p>Da mesma maneira que o {{cssxref("<length>")}}, a <span id="result_box" lang="pt"><span class="hps">propriedade</span> <span class="hps">CSS</span> de </span>{{ cssxref("background-size") }} <span id="result_box" lang="pt"><span class="hps">oferece dois</span> <span class="hps">valores de tamanho</span> <span class="hps">especial,</span> contain <span class="hps">e</span> cover<span class="hps">.</span> <span class="hps">Vamos dar uma</span> <span class="hps">olhada nestes</span><span>.</span></span></p> + +<h3 id="contain" name="contain"><code>contain</code></h3> + +<p><span id="result_box" lang="pt"><span class="hps">O</span> <span class="hps">valor</span> contain <span class="hps">especifica</span> <span class="hps">que, independentemente</span> <span class="hps">do</span> <span class="hps">tamanho</span> <span class="hps">da caixa que contém</span><span>,</span> <span class="hps">a imagem de fundo</span> <span class="hps">deve</span> <span class="hps">ser</span> <span class="hps">dimensionado</span> <span class="hps">de modo a que</span> <span class="hps">cada</span> <span class="hps">lado</span> <span class="hps">seja tão grande quanto</span> <span class="hps">possível ao mesmo tempo</span> <span class="hps">que não exceda</span> <span class="hps">o</span> <span class="hps">comprimento do lado</span> <span class="hps">correspondente do recipiente</span><span>.</span> <span class="hps">Tente redimensionar</span> <span class="hps">a janela</span> <span class="hps">usando um navegador que</span> <span class="hps">suporta</span> <span class="hps">imagens de fundo</span> <span class="hps">de escala</span> <span class="hps">(como o</span> <span class="hps">Firefox 3.6</span> <span class="hps">ou posterior) para</span> <span class="hps">ver isso em ação</span> <span class="hps">no exemplo</span> <span class="hps">vivo</span> <span class="hps">abaixo.</span></span></p> + +<figure> +<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p> +</figure> + +<pre class="brush:html"><div class="bgSizeContain"> + <p>Tente redimensionar a janela e ver o que acontece.</p> +</div></pre> + +<pre class="brush:css;highlight:[4]">.bgSizeContain { + height: 200px; + background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png); + background-size: contain; + border: 2px solid darkgray; + color: #000; text-shadow: 1px 1px 0 #fff; +}</pre> + +<h3 id="cover" name="cover"><code>cover</code></h3> + +<p><span id="result_box" lang="pt"><span class="hps">O</span> <span class="hps">valor</span> cover <span class="hps">especifica</span> <span class="hps">que</span> <span class="hps">a imagem de fundo</span> <span class="hps">deve ser dimensionado</span> <span class="hps">de modo que seja</span> <span class="hps">tão pequena quanto</span> <span class="hps">possível ao mesmo tempo</span> <span class="hps">assegurar</span> <span class="hps">que ambas as dimensões</span> <span class="hps">são maiores</span> <span class="hps">do que</span> <span class="hps">ou igual</span> <span class="hps">à dimensão</span> <span class="hps">correspondente do recipiente</span><span>.</span></span></p> + +<figure>{{ EmbedLiveSample("cover", "100%", "220") }}</figure> + +<p>Os exemplos à seguir usam HTML & CSS:</p> + +<pre class="brush:html"><div class="bgSizeCover"> + <p>Tente redimensionar a janela e ver o que acontece.</p> +</div></pre> + +<pre class="brush:css;highlight:[4]">.bgSizeCover { + height: 200px; + background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png'); + background-size: cover; + border: 2px solid darkgray; + color: #000; text-shadow: 1px 1px 0 #fff; +</pre> + +<h2 id="See_also" name="See_also">Veja Também</h2> + +<ul> + <li>{{ cssxref("background-size") }}</li> + <li>{{ cssxref("background") }}</li> +</ul> diff --git a/files/pt-br/web/guide/css/understanding_z_index/index.html b/files/pt-br/web/guide/css/understanding_z_index/index.html new file mode 100644 index 0000000000..488ca0f600 --- /dev/null +++ b/files/pt-br/web/guide/css/understanding_z_index/index.html @@ -0,0 +1,48 @@ +--- +title: Understanding CSS z-index +slug: Web/Guide/CSS/Understanding_z_index +tags: + - CSS + - Entendendo_CSS_z-index + - Guía + - Web + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +<p>Normalmente páginas HTML podem ser consideradas bi-dimensionais, pois texto, imagens e outros elementos podem ser dispostos na página sem sobreposição. Há apenas um fluxo de renderização e todos os elementos sabem do espaço ocupado por outros. O atributo {{cssxref("z-index")}} lhe permite ajustar a ordem de sobreposição dos objetos ao renderizar o conteúdo.</p> + +<blockquote> +<p style=""><em>Em CSS 2.1, cada caixa tem uma posição nas três dimensões. Em adição às suas posições na horizontal e vertical, caixas ficam no "eixo-z" e são formatadas uma em cima da outra. Posições no Eixo-Z são particularmente relevantes quando caixas se sobrepõem visualmente.</em></p> +</blockquote> + +<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p> + +<p>Isso significa que as regras de CSS te permitem posicionar caixas em camadas em adição ao <em>render</em> normal da camada (level 0). A posição Z de cada camada é expressa como um inteiro representando a ordem da pilha para renderização. Números maiores significam que são mais próximos do observador. A posição Z pode ser controlada pela propriedade CSS {{ cssxref("z-index")}}.</p> + +<p>Usar z-index aparenta ser extremamente fácil: uma única propriedade, endereçada a um único número inteiro, com um comportamento fácil-de-entender. No entanto, quando o z-index é aplicado para a hierarquia complexa dos elementos de HTML, seu comportamento pode ser difícil de entender ou até imprevisível. Isso é devido às complexas regras de <em>stacking</em>. Uma sessão dedicada foi reservada na especificação do CSS <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> para explicar melhor essas regras.</p> + +<p>Esse artigo tentará explicar essas regras, com algumas simplificações e vários exemplos.</p> + +<ol> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Regras padrões de empilhamento</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : Como lidar com elementos que usam <em>float</em></li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Usando index-z para mudar o empilhamento padrão</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notas sobre contexto do empilhamento</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarquia, z-index no último <em>level</em></li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarquia, z-index em todos os <em>levels</em></li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarquia, z-index no segundo <em>level</em></li> +</ol> + +<p><small><em>Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.</em> </small></p> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> +</ul> +</div> + +<p> </p> |