diff options
Diffstat (limited to 'files/pt-pt/web/css/media_queries/using_media_queries/index.html')
| -rw-r--r-- | files/pt-pt/web/css/media_queries/using_media_queries/index.html | 436 |
1 files changed, 436 insertions, 0 deletions
diff --git a/files/pt-pt/web/css/media_queries/using_media_queries/index.html b/files/pt-pt/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..2bf4f5470c --- /dev/null +++ b/files/pt-pt/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,436 @@ +--- +title: Utilizar consultas de média +slug: Web/CSS/Consulta_de_mídia +tags: + - Avançado + - CSS + - Desenho Adaptável + - Guía + - Media +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +<p>{{ gecko_minversion_header("1.9.1") }}</p> + +<p>As <strong>consultas de média </strong>permitem modificar um site ou aplicação de acordo com o tipo de dispositivo (ecrã ou impressora, por exemplo) ou características e parâmetros específicos (como a resolução de ecrã ou largura do {{glossary("viewport")}} do navegador). Podem utilizar-se para:</p> + +<ul> + <li>Aplicar estilos condicionalmente numa folha CSS, com recurso às regras {{cssxref("@media")}} e {{cssxref("@import")}};</li> + <li>Desenhar para um tipo de média específico com os elementos HTML {{HTMLElement("link")}}, {{HTMLElement("source")}}, e outros;</li> + <li>Testar e monitorizar estados de média utilizando os métodos de JavaScript {{domxref("Window.matchMedia()")}} and {{domxref("MediaQueryList.addListener()")}}.</li> +</ul> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>Consultas de média consistem num <a class="internal" href="/pt-PT/docs/Web/CSS/@media" title="En/CSS/@media">tipo de média</a> e uma ou mais expressões envolvendo recursos de média. Note que estas consultas não são sensíveis a maiúsculas. Pode-se combinar várias consultas com <em>operadores lógicos</em>.</p> + +<p>O resultado da consulta é verdadeiro se o tipo de média especificado na consulta de média encaixa com o tipo de dispositivo no qual o documento está a ser exibido <strong>e</strong> se todas as expressões na consulta de média forem verdadeiras.</p> + +<p>Quando uma consulta de média é verdadeira, a folha de estilos correspondente é aplicada seguinto as regras normais de cascata.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Considere a etiqueta {{HTMLElement("link")}} com uma consulta de média. O ficheiro CSS que ela refere é descarregado mesmo que a consulta de média seja falsa; o conteúdo da folha não será aplicado até a consulta se tornar verdadeira.</p> +</div> + +<h3 id="Operadores_lógicos">Operadores lógicos</h3> + +<p>Você pode compor consultas de média complexas usando operadores lógicos, incluindo <code>not</code>, <code>and</code>, e <code>only</code> ; assim como combinar consultas de média numa lista separada por vírgulas, o que é equivalente a um operador "ou".</p> + +<h4 id="and"><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>and</strong></span></font></h4> + +<p>O operador <code>and</code> indica que a consulta é verdadeira se cada subconsulta que a compõe for verdadeira. Também pode juntar os tipos de média às funcionalidades de média. Tem maior precedência que a vírgula ("ou") e o <code>not</code>.</p> + +<h4 id="not"><strong><code>not</code></strong></h4> + +<p>A palavra-chave <code>not</code>, nega o resultado de toda a consulta; por exemplo, "<code><span style="font-family: monospace;">all</span> and (not color)</code>" é verdadeiro para dispositivos monocromáticos independentemente do tipo de média. É o operador com menor precedência depois da vírgula.</p> + +<h4 id="only"><strong><code>only</code></strong></h4> + +<p>A palavra-chave <code>only</code> indica que só deve ser aplicado o estilo se a consulta inteira for verdadeira. Quando se utiliza este operador, é obrigatório especificar um tipo de média.</p> + +<p>É útil para esconder folhas de estilo de navegadores antigos que não suportam consultas de média. Por exemplo, se não for utilizado <code>only</code>, navegadores antigos interpretam a consulta <code>screen and (max-width: 500px)</code> apenas como <code>screen</code> - ignoram o resto e aplicam o estilo em todos os ecrãs. </p> + +<p>Este operador não pode ser utilizado em conjunto com o <code>not</code>, e ambos têm a mesma precedência.</p> + +<h4 id="(vírgula)"><code>,</code> (vírgula)</h4> + +<p>Cada subconsulta numa lista separada por vírgulas é avaliada isoladamente e e alguma for verdadeira, a consulta composta é verdadeira. Por outras palavras, as vírgulas são equivalentes a um "ou-lógico".</p> + +<h4 id="Precedência_dos_operadores">Precedência dos operadores</h4> + +<ul> + <li>As vírgulas têm a menor precedência;</li> + <li><code>only</code> e <code>not</code> têm a mesma precedência;</li> + <li><code>and</code> tem a maior precedência.</li> +</ul> + +<p>Os parênteses <strong>não </strong>podem ser utilizados para mudar esta precedência.</p> + +<p> </p> + +<h3 id="Pseudo_BNF_(para_aqueles_que_gostam_desde_tipo_de_coisa)">Pseudo BNF (para aqueles que gostam desde tipo de coisa)</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 + | 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>Consultas de média não diferenciam maiúsculas de minúsculas. Consultas de média que envolvem tipos de média desconhecidos são sempre falsas.</p> + +<div class="note"><strong>Nota:</strong> Os parênteses são requisitados a volta de expressões; esquecer de usá-los é um erro.</div> + +<h2 id="Recursos_de_média">Recursos de média</h2> + +<p>A maioria dos recursos de média pode ser prefixado com "min-" ou "max-" para expressar "maior ou igual a" ou "menor ou igual a". Isto evita usar os símbolos "<" e ">", que poderiam entrar em conflito com HTML e XML. Se você usar um recurso de média sem especificar um valor, a expressão é definida como verdadeira se o valor do recurso for diferente de zero.</p> + +<div class="note"><strong>Nota:</strong> Se um recurso de média não se aplica ao dispositivo no qual o navegador está sendo rodado, expressões envolvendo este recurso de média serão sempre falsas. Por exemplo, consultando a relação de aspecto de um dispositivo auditivo sempre resultará em falso.</div> + +<h3 id="color">color</h3> + +<p><strong>Valor:</strong> {{cssxref("<color>")}}<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> sim</p> + +<p>Indica o número de bits por componente de cor do dispositivo de saída. Se o dispositivo não é colorido, este valor é zero.</p> + +<div class="note"><strong>Nota:</strong> Se os componentes de cor tiverem diferentes de números de bits por componente de cor, o menor número é usado. Por exemplo, se uma tela usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo é considerado para usar 5 bits por componente de cor. Se o dispositivo usa cores indexadas, o número mínimo de bits por componente de cor na tabela de cores é usado.</div> + +<h4 id="Exemplos">Exemplos</h4> + +<p>Para aplicar uma folha de estilos a todos os dispositivos coloridos:</p> + +<pre>@media all and (color) { ... } +</pre> + +<p>Para aplicar uma folha de estilos a dispositivos com no mínimo 4 bits por componente de cor:</p> + +<pre>@media all and (min-color: 4) { ... } +</pre> + +<h3 id="color-index">color-index</h3> + +<p><strong>Valor:</strong> integer<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> sim</p> + +<p>Indica o número de entradas na tabela de cor para o dispositivo de saída.</p> + +<h4 id="Exemplos_2">Exemplos</h4> + +<p>Para indicar que uma folha de estilos deve ser aplicada a todos os dispositivos usando cores indexadas, você pode fazer:</p> + +<pre>@media all and (color-index) { ... } +</pre> + +<p>Para aplicar uma folha de estilos a dispositivos de cores indexadas com no mínimo 256 cores:</p> + +<pre><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> +</pre> + +<h3 id="device-aspect-ratio">device-aspect-ratio</h3> + +<p><strong>Valor:</strong> integer / integer<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>Aceita os prefixos min/max:</strong> sim</p> + +<p>Descreve a relação de aspecto do dispositivo de saída. Este valor consiste em dois positivos inteiros (integer) separados por um caractére barra ("/"). Isto representa o número de pixels horizontais sobre o número de pixels verticais.</p> + +<h4 id="Exemplo">Exemplo</h4> + +<p>O que vem a seguir selecionar uma folha de estilos especial para uso em dispositivos de tela comprida (widescreen):</p> + +<pre>@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> + +<p>Isto seleciona o estilo quando a relação de aspecto for 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", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>Aceita os prefixos min/max: </strong>sim</p> + +<p>Descreve a altura do dispositivo de saída (sendo a tela ou página inteira, ao invés de somente a área de renderização, como a janela do documento).</p> + +<h4 id="Exemplo_2">Exemplo</h4> + +<p>Para aplicar uma folha de estilos a um documento quando exibido em uma tela que for mais fina do que 800 pixels, você pode usar isto:</p> + +<pre><link rel="stylesheet" media="screen and (max-device-width: 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", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>Aceita os prefixos min/max:</strong> sim</p> + +<p>Descreve a largura do dispositivo de saída (sendo a tela ou a página inteira, ao invés de somente a área de renderização, como a janela do documento).</p> + +<h3 id="grid">grid</h3> + +<p><strong>Valor:</strong> integer<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> all<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p>Determina Determines se o dispositivo de saída é um dispositivo <em>grid</em> ou um dispositivo bitmap. Se o dispositivo for baseado em <em>grid</em> (tal como um terminal tty ou uma tela de celular com somente uma fonte), o valor é 1. Caso contrário é zero.</p> + +<div class="note"><strong>Nota:</strong> Gecko (e consequentemente o Firefox) não suporta dispositivos <em>grid</em> atualmente, então este recurso de média não é suportado.</div> + +<h4 id="Exemplo_3">Exemplo</h4> + +<p>Para aplicar um estilo a dispositivos de mão com uma tela de 15 caracteres ou mais estreito:</p> + +<pre>@media handheld and (grid) and (max-width: 15em) { ... } +</pre> + +<div class="note"><strong>Nota:</strong> A unidade "em" tem um uso especial em dispositivos <em>grid</em>; desde que a largura exata de um "em" não pôde ser determinada, 1em é assumido como a largura de uma célula <em>grid</em> horizontal, e a altura de uma célula vertical.</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", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>Aceita os prefixos min/max:</strong> sim</p> + +<p>O recurso de média <code>height</code> descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura da <em>viewport</em> ou da caixa de páginas em uma impressora).</p> + +<div class="note"><strong>Nota:</strong> Quando o usuário redimenciona a janela, o Firefox substituirá as folhas de estilos como for apropriado, baseado em consultas de média usando os recursos de média <code>width</code> e <code>height</code>.</div> + +<h3 id="monochrome">monochrome</h3> + +<p><strong>Valor:</strong> integer<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> sim</p> + +<p>Indica o número de bits por pixel em um dispositivo monocromático (escala de cinza). Se o dispositivo não for monocromático, o valor do dispositivo é 0.</p> + +<h4 id="Exemplos_3">Exemplos</h4> + +<p>Para aplicar uma folha de estilos para todos os dispositivos monocromáticos:</p> + +<pre>@media all and (monochrome) { ... } +</pre> + +<p>Para aplicar uma folha de estilos para dispositivos monocromáticos com no mínimo 8 bits por pixel:</p> + +<pre>@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", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p>Indica se o dispositivo está em modo paisagem (a exibição é mais larga do que alta) ou retrato (a exibição é mais alta do que larga).</p> + +<h4 id="Exemplo_4">Exemplo</h4> + +<p>Para aplicar uma folha de estilos somente na orientação retrato:</p> + +<pre>@media all and (orientation: portrait) { ... }</pre> + +<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 os prefixos min/max:</strong> sim</p> + +<p>Indica a resolução (densidade de pixels) do dispositivo de saída. A resolução pode ser especificada tanto em pontos por polegada (dpi) quanto pontos por centímetro (dpcm).</p> + +<h4 id="Exemplo_5">Exemplo</h4> + +<p>Para aplicar uma folha de estilos a dispositivos com no mínimo 300 pontos por polegada de resolução:</p> + +<pre>@media print and (min-resolution: 300dpi) { ... } +</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", "tv")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p>Descreve o processo de escaneamento de dispositivos de saída de televisão.</p> + +<div class="note"><strong>Nota: </strong>Gecko (e consequentemente o Firefox) não suportam o tipo de média <code>tv</code> atualmente, então este recurso de média não é suportado.</div> + +<h4 id="Exemplo_6">Exemplo</h4> + +<p>Para aplicar uma folha de estilos somente para televisões com escaneamento progressivo:</p> + +<pre>@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", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>Aceita os prefixos min/max:</strong> sim</p> + +<p>O recurso de média <code>width</code> descreve a largura da superfície de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de páginas em uma impressora).</p> + +<div class="note"><strong>Nota: </strong>Quando o usuário redimensiona a janela, o Firefox substituirá a folha de estilo como apropriado, baseado nas consultas de média usando os recursos de média <code>width</code> e <code>height</code>.</div> + +<h4 id="Exemplos_4">Exemplos</h4> + +<p>Se você desejar espeficar uma folha de estilos para dispositivos de mão, ou dispositivos de tela com uma largura maior do que 20em, você pode usar esta folha de estilos:</p> + +<pre>@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } +</pre> + +<p>Este recurso de média especifica uma folha de estilos que deve ser aplicada a médias impressas mais largas do que 8.5 polegadas:</p> + +<pre><link rel="stylesheet" media="print and (min-width: 8.5in)" + href="http://foo.com/mystyle.css" /> +</pre> + +<p>Este recurso especifica uma folha de estilos que é usável quando a <em>viewport</em> estiver entre 500 e 800 pixels de largura:</p> + +<pre>@media screen and (min-width: 500px) and (max-width: 800px) { ... } +</pre> + +<h2 id="Características_de_média_específicas_da_Mozilla">Características de média específicas da Mozilla</h2> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ gecko_minversion_header("1.9.2") }}</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">A Mozilla oferece várias características de média específicas para o Gecko. Algumas delas podem ser propostas como características oficiais de média.</p> + +<h3 id="-moz-images-in-menus">-moz-images-in-menus</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o dispositivo permitir às imagens, aparecer nos menus, recebe 1; caso contrário, o valor é 0.</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(images-in-menus)") }} do CSS.</p> + +<h3 id="-moz-mac-graphite-theme">-moz-mac-graphite-theme</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o usuário configurou o dispositivo para usar a aparência "Graphite" no Mac OS X, o valor é 1. Se o usuário está usando a aparência azul padrão, ou não for no Mac OS X, o valor é 0.</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} do CSS.</p> + +<h3 id="-moz-maemo-classic">-moz-maemo-classic</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o usuário está usando o Maemo com o tema original, o valor é 1; se estiver usando o novo tema "Fremantle", o valor é 0.</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(maemo-classic)") }} do CSS.</p> + +<h3 id="-moz-scrollbar-end-backward">-moz-scrollbar-end-backward</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se a interface do dispositivo do usuário exibe um botão de seta para trás ao fim da barra de rolagem, o valor é 1. Caso contrário é 0.</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} do CSS.</p> + +<h3 id="-moz-scrollbar-end-forward">-moz-scrollbar-end-forward</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se a interface do dispositivo do usuário exibe um botão de seta para frente ao fim da barra de rolagem, o valor é 1. Caso contrário é 0.</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} do CSS.</p> + +<h3 id="-moz-scrollbar-start-backward">-moz-scrollbar-start-backward</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se a interface do dispositivo do usuário exibe uma seta para trás no início da barra de rolagem, o valor é 1. Caso contrário é 0.</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} do CSS.</p> + +<h3 id="-moz-scrollbar-start-forward">-moz-scrollbar-start-forward</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se a interface do dispositivo do usuário exibe uma seta para frente no início da barra de rolagem, o valor é 1. Caso contrário é 0.</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} do CSS.</p> + +<h3 id="-moz-scrollbar-thumb-proportional">-moz-scrollbar-thumb-proportional</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se a interface do dispositivo do usuário exibe a barra de rolagem proporcionalmente (isto é, tamanho baseado na porcentagem do documento que está visível), o valor é 1. Caso contrário é 0.</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} do CSS.</p> + +<h3 id="-moz-touch-enabled">-moz-touch-enabled</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o dispositivo suporta eventos de toque (para um tela sensível ao toque), o valor é 1. Caso contrário é 0.</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(touch-enabled)") }} do CSS.</p> + +<h4 id="Exemplo_7">Exemplo</h4> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Você pode usar isso para renderizar seus botões ligeiramente maiores, por exemplo, se o usuário estiver em um dispositivo com tela sensível ao toque, para torná-lo mais amigável aos dedos.</p> + +<h3 id="-moz-windows-classic">-moz-windows-classic</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o usuário estiver usando o Windows, sem tema (no modo clássico ao invés de usar "uxtheme"), o valor é 1; caso contrário é 0.</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(windows-classic)") }} do CSS.</p> + +<h3 id="-moz-windows-compositor">-moz-windows-compositor</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o usuário estiver usando o Windows com o compositor DWM, o valor é 1; caso contrário é 0.</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(windows-compositor)") }} do CSS.</p> + +<h3 id="-moz-windows-default-theme">-moz-windows-default-theme</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> + <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>Aceita os prefixos min/max:</strong> não</p> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o usuário está correntemente usando um dos temas do Windows (Luna, Royale, Zune ou Aero (incluindo o Vista Basic, Vista Advanced e o Aero Glass), o valor 1. Caso contrário é 0.</p> + +<h2 id="Veja_também">Veja também</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> (en)</li> + <li><a class="internal" href="/en/CSS/@media" title="En/CSS/@media">Media types</a> (en)</li> +</ul> |