path: root/files/pt-pt/web/css/consulta_de_mídia/index.html

---
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: &lt;media_query&gt; [, &lt;media_query&gt; ]*
media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
  | &lt;expression&gt; [ and &lt;expression&gt; ]*
expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
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 "&lt;" e "&gt;", 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("&lt;color&gt;")}}<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>&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /&gt;
</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("&lt;length&gt;")}}<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>&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" /&gt;
</pre>

<h3 id="device-width">device-width</h3>

<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<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("&lt;length&gt;")}}<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("&lt;resolution&gt;")}}<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("&lt;length&gt;")}}<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>&lt;link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" /&gt;
</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>