<
Menu

Tableless



Introdução sobre Media Queries

Media Queries é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. O browser ou a aplicação lê as expressões definidas na query, caso o dispositivo se encaixe nestas requisições, o CSS será aplicado.

Breve explicação sobre Media Types

As Media Types definem para qual tipo de media o CSS será direcionado.
O HTML foi criado para ser portável, ou seja, ele deve ser lido e interpretado por qualquer tipo de dispositivo. Cada dispositivo exibe o HTML de uma maneira. A forma que este HTML é formatado em cada dispositivo é diferente. Logo, o código CSS será diferente para cada um destes dispositivos.
Por exemplo, se você visita um site por um computador, ele não terá a mesma caso você o visite por um dispositivo móvel.
São dispositivos diferentes, com formas totalmente diferentes de navegação.
O exemplo acima é o mais comum. Mesmo assim, existem outras medias que podemos controlar, como por exemplo, impressão.
Abaixo segue uma lista das medias:

all
Para todos os dispositivos.

braille
Para dispositivos táteis.

embossed
Para dispositivos que “imprimem” em braille.

handheld
Para dispositivos de mão. Normalmente com telas pequenas e banda limitada.

print
Para impressão em papel.

projection
Para apresentações, como PowerPoint.

screen
Para monitores ou outros dispositivos com telas coloridas e com resolução adequada.

speech
Para sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural que podemos “formatar” a voz dos sintetizadores.

tty
Para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.

tv
Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.

Todos os nomes são case-sensitive.

A utilização dessas medias são feitas como o código abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Exemplo</title>

	<link rel="stylesheet" href="estilo.css" type="text/css" media="handheld" />	

</head>

<body>


</body>
</html>

Note a tag LINK. Estou linkando um arquivo de CSS, com o nome de estilo.css. Esse código CSS está destinado para funcionar em dispositivos de media HANDHELD, ou seja, aparelhos móveis, celulares com tela pequena ou aparelhos parecidos. Esse CSS não será aplicado por exemplo, quando o usuário visitar o site utilizando um desktop, por exemplo. Para tanto, teríamos que utilizar media SCREEN.

<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />	

O Problema

Cada vez mais surgem dispositivos de diversos tamanhos com hardwares bem parecidos com os desktops. Isso faz com que a navegação destes aparelhos tenha uma experiência muito próxima de desktop. Um exemplo atual é o iPhone. Sua tela tem boa qualidade e seu navegador renderiza as páginas como um navegador normal de desktop. Logo, não tem motivo para prepararmos um layout e um CSS com media type HANDHELD para o iPhone. Apesar de ele ser um handheld, ele não trabalha como um. Contudo, ele também não trabalha como um desktop. Mesmo a renderização do MobileSafari sendo identica a de um desktop, o comportamento do usuário e a forma de navegação é diferente. Logo temos um meio termo. Não podemos disponibilizar um CSS para HANDHELD, nem um CSS totalmente SCREEN.

A Solução – Media Queries

As Media Queries definem condições para a utilização de um CSS específico. Se essas condições forem aprovadas, ou seja, se o dispositivo de adequar a todas as condições, o CSS será aplicado.

<link rel="stylesheet" href="estilo.css" media="screen and (color)" />

Neste código, por exemplo, o CSS será aplicado em dispositivos de media screen, que tenham uma característica color.
Logo, este CSS não será aplicado em aparelhos Monocromáticos. Simples, ahn?

Operadores Lógicos

Os Operadores Lógicos te possibilitarão criar media queries diversas. Os operadores são: not, and e only.

O not irá fazer uma sentença de negação. Por exemplo:

<link rel="stylesheet" href="estilo.css" media="all and (not color)" />

Sentenção verdadeira para dispositivos monocromáticos.

O only irá esconder os estilos de browsers que não reconhecem media queries. Antes da sentença, você coloca o only:

<link rel="stylesheet" href="estilo.css" media="only screen and (color)" />

É possível também agrupar várias media queries separando-os com , (vírgula). Se qualquer uma das queries forem verdadeiras, o CSS será aplicado. Então a vírgula funciona como um operador or.

<link rel="stylesheet" href="estilo.css" media="screen and (color), projection and (color)" />

Media features

Para então distinguir um dispositivo do outro, você utilizará as características de cada um. Veja o exemplo:

<link rel="stylesheet" href="estilo.css" media="screen and (max-width:480px)" />

Estou especificando neste código, que o arquivo estilo.css, será aplicado para dispositivos que se enquadram em screen com telas que tenham uma resolução máxima de 480px.

Há uma lista de características que você pode utilizar aqui para selecionar os dispositivos que você quiser.

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

As media queries também são case-sensitive.

Não são todos os browsers que suportam media queries. Hoje em dia, isso é muito utilizado para separar o CSS para iPhone. O MobileSafari reconhece essas media queries, o que possibilita que você faça uma versão do CSS para iPhone. Mesmo assim, muitos por aí preferem fazer uma versão do site inteiro para estes dispositivos. Como já conversamos, isso depende das suas necessidades, público e tamanho do site.

Direto da fonte

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://about.me/diegoeis/

Mais posts do autor

Comentários (39)