O CSS foi feito para que pudéssemos dizer como o documento irá se apresentar ao usuário em diferentes meios de acesso. Seja ele na tela do seu monitor, na sua impressora, no seu PDA, no seu sintetizador de voz, celular, smartphone, microondas etc e etc… Não importa com qual dispositivo o usuário esteja acessando seu site, ele deve ser bem apresentado.

O W3C criou uma forma para fazermos isso com a maior facilidade. Você pode criar um CSS específico para cada tipo de meio de acesso, com a mesma facilidade que você cria um CSS para ser visto em um Desktop. Você pode personalizar um site para ser visto em um Smartphone ou até mesmo quando o visitante imprimir uma página de texto do seu site. Utilizando o caso da impressão: não é interessante para o visitante, que o menu, banners e outros elementos do site sejam impressos no papel.

Para isso, basta definir para qual tipo de media que você está dirigindo um arquivo CSS especifico. Existem dois jeitos:

1. O primeiro jeito é usado ao importar um arquivo CSS com o @import:

1

@import url("impressao.css") print;

Primeiro vem o arquivo que você quer importar, e logo depois você define para qual media ele será usado.

2. No segundo modo você usará o @media. É muito usado internamente no código CSS. Muito útil quando você quer definir apenas poucas linhas para uma media especifica:

1
2
3

@media print {
  /* Código CSS */
}

3. Neste modo você usará quando linkar o arquivo CSS no Cabeçalho do documento:

1

<link rel="stylesheet" type="text/css" media="print" href="impressao.css" />

Tipos de Medias

Na especificação você pode definir CSS para um bocado de dispositivos, veja a lista abaixo:

screen

Para computadores, PC´s. Ou algum dispositivo que tenha uma boa tela colorida.

print

Para impressoras. Muito usado para dar uma versão de impressão do site.

handheld

Para PDAs, celulares e aparelhos que geralmente tem uma tela pequena.

projection

Para projetos de apresentações. Você pode transformar seu site em uma apresentação estilo PowerPoint!

aural

Para Sintetizadores de Tela.

braille

Para dispositivos táteis. Impressionante, ahn? Um cego poder “imprimir” um artigo para poder ler onde quiser.

tv

Para televisões. A resolução da televisão é muito inferior a um monitor CRT, eles merecem um tratamento especial.

tty

Para dispositivos que usam uma grade fixa de caractéres, terminais, dispositivos portáteis, etc…

O screen agora pode ser 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 menores, com telas bacanas. Normalmente, estes celulares utilizam Opera Mini, o que é uma vantagem por conta da larga compatibilidade que o Opera tem com Padrões Web.

O projection foi primeiramente idealizado pelo Opera, foi conhecido também como Opera Show – para ver isso funcionando, visite o site do Opera Show com o Opera e aperte F11.

TV e TTY são pouco utilizados hoje. Quem tem uma televisão bacana em casa, consegue ter a mesma experiência de um monitor comum. Na minha opinião, não sei se ela sobrevive. A TTY talvez seja bem utilizada em nichos específicos já que é para aparelhos que tem uma tela bem limitada e que executam tarefas específicas. Talvez terminais pequenos, geralmente monocromáticos e etc. Também não tenho certeza da sua utilidade no futuro.

A idéia é dar para todos os meios de acesso uma boa experiência de utilização. O visitante pode iniciar a visitação do seu site em um smartphone ou celular, e terminar em um desktop. Não importa, ele precisa ter uma boa experiência nos dois meios.

Para ter mais detalhes:

• Media types Contents
• Minimo Project
• Opera Show Tutorial
• Google: O que são Media Types?

Por Diego Eis

Diego Eis é sócio e diretor de treinamentos da Visie Padrões Web, desenvolvedor web, palestrante, microblogueiro, fotógrafo amador, pintor de gibi nas horas vagas, criador do Tableless.com.br e gosta de ouvir música.