Utilizando Media Queries do CSS | Boas práticas de Desenvolvimento com Padrões Web

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 aprensetaçõ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, onde 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 das medias 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.

1	<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.

1	<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:

1	<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:

1	<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.

1	<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:

1	<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

16 Comentários

Paulo de Tarso F. M. 06/07/2009 às 09:20

Fala Diego!

Bom artigo, muito bacana esse recurso. Mas me diga uma coisa: quais são os browsers que suportam isso? Apenas o Safari? E o que acontece se utilizarmos em um IE6, por exemplo? Ele irá reconhecer o CSS normalmente?

Fiquei com essa dúvida…

Abraço!

Diego Eis 06/07/2009 às 10:06

Tarso, tudo bem?

Normalmente eu não estou mais abordando assuntos que podem usuais hoje em dia. Pelo contrário. Estou falando de assuntos que estarão disponíveis amanhã.

O IE6 não é parâmetro aqui para o Tableless. Como ficam seus clientes? Oras, faça sites para IE6, como sempre fez. Mas não será no Tableless que iremos aprender isso. Aqui estamos nivelando por cima. Sempre.

O IE6, por ser um browser de 10 anos atrás, não irá entender isso e muitas outras coisas.

Jefferson Santana 06/07/2009 às 10:13

Esse artigo é de muito interesse, muito útil, parabéns por mais essa materia.

Agora é só estudar um pouco mais essas possibilidades media queries possa trazer.

Abraços…

Jefferson Santana 06/07/2009 às 10:17

Diego Eis, acho que todos esses navegadores de ultima geração que estão mais dentro dos padrões reconhece correto?

Safari
Chrome
Opera
Firefox
Acho que até o IE 8 já reconhece.

Tudo isso eu creio, acredito que seja assim, porque IE 6 é muito velho…

Matheus 06/07/2009 às 11:21

Caraca!!!

Nem imaginava que existia Media Queries!

Media Types é muito importante, já tive por exemplo que fazer uma versão para impressão e outra para visualização em navegadores desktop e estas combinações ampliam o leque!!!!

Parabéns pelo artigo! Como sempre servindo de ponto de partida para novas pesquisas minhas!

Utilizando Media Queries do CSS | Boas práticas de Desenvolvimento com Padrões Web 06/07/2009 às 12:36

[...] the rest here: Utilizando Media Queries do CSS | Boas práticas de Desenvolvimento com Padrões Web Tags: Comments0 Leave a Reply Click here to cancel [...]

Chris Benseler 11/07/2009 às 17:34

A tecnologia em si é bacana, apesar do que eu mais ver hoje em dia em termos de mobile é “vamos fazer sites pro Iphone”… ou seja, vejo muita preocupação do cliente em fazer algo pro Iphone, se esquecendo dos outros dispositivos! Infelizmente…

[]s!

Clica Aqui » Efeito cascata, herança e especificidade do CSS 02/09/2009 às 23:02

[...] Introdução sobre Media Queries [...]

O que são Media Types do CSS? | Boas práticas de Desenvolvimento com Padrões Web 20/01/2010 às 09:28

[...] direcionado para Smartphones, com telas bacanas como o iPhone e celulares com Android por meio das Media Queries. O handheld é largamente usado para celulares que não são smartphones, mas são celulares [...]

Versionamento inteligente para mobiles | Boas práticas de Desenvolvimento com Padrões Web 21/01/2010 às 09:49

[...] Aí entra outra questão: provavelmente você deve ter pensado que seria apenas fazer um script de detecção de browser, capturando as visitas de Safari Mobile e Android e pronto. É aí que você se engana. Já há vários outros aparelhos que estão utilizando engines parecidas e que podem renderizar sua “versão de iphone”. Exatamente por isso, que você precisa fazer um filtro por características e não por browser. Fazemos isso utilizando Media Queries. [...]

Boas práticas de Desenvolvimento com Padrões Web

Introdução sobre Media Queries