por Diego Eis
Fevereiro 6th, 2006
O CSS foi feito para que nós pudéssemos dizer como o documento irá se apresentar ao usuário em diferentes tipos de media: Na tela do seu monitor, na sua impressora, no seu PDA, no seu sintetizador de voz, etc, etc…
Ou seja, 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 media, com a mesma facilidade que você cria um CSS para ser visto em um Desktop. Logo, você pode personalizar um site para ser visto em um PDA ou até mesmo quando o camarada mandar imprimir um página de artigo. Por exemplo, você pode simplesmente desaparecer com o Menu, a publicidade, os formulários e tudo que não tem utilidade nenhum quando for impresso, e assim, servir a melhor experiência para o usuário.
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 usando o @import:
@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, ou seja, dentro do código CSS. Muito útil quando você quer definir apenas poucas linhas para uma media especifica:
@media print {
/* Código CSS */
}
3. Neste modo você usará quando linkar o arquivo CSS no Cabeçalho do documento:
<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.
- print
- Para impressoras. Muito usado para dar uma versão de impressão do site para o usuário.
- handheld
- Para PDAs.
- projection
- Para projetos de apresentações. Isso aí, 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…
Hoje infelizmente, apenas o screen e o print funcionam perfeitamente. O handheld já pode ser usado, mas tenha em mente que poucos browsers tem suporte a ele. O Opera e o Minimo (projeto da Mozilla de browser para dispositivos móveis) são certeza que funcionam.
O projection também só funciona no Opera, conhecido também como Opera Show - para ver isso funcionando, visite este link com o Opera e aperte F11.
O resto infelizmente ainda estão em estudo. Mas quem sabe podemos ter novidades no CSS 3?
Para ter mais detalhes:
Se ainda estiver interessado, leia também:
Este post foi criado
na Segunda-feira, Fevereiro 6th, 2006 às 07:30 e está arquivado em Artigos, Geral, Tecnologia e Tendências.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
Muito legal essas funcionalidades do CSS, o que me deixou mais impressionado foi a media “braille”, muito show.
Parabéns.
O media Type print ja me poupou muito trabalho.
Lembro que na era pre-css, quando os browsers não tinham suporte ou quando ainda era muito pouco divulgado, eu tinha que fazer uma mega gambiarra e normalmente tinha que duplicar um monte de paginas para fazer a versão para impressão.
Ou seja o dobro de paginas somente para uma formatação diferente.
Felizmente o media print me salvou.
Vai ser realmente bem interessante quando outras midias se tornarem compatíveis e mais utilizaveis, acho q uma das primeiras que vamos aproveitar eh o PDA.
Porém acho interessante que ainda surjam mais tipos como por exemplo o Cellphone.
Podia tambem ter um seletor no CSS para resolução, isso ia quebrar um galho danado.
Abraços.
poxa.. fiquei impressionado com o braille e com o projection..
eu abri aqui no meu opera o link acima e gostei muito.. fica perfeito essas apresentações de slide…
próximo trabalho que tiver na escola vou utilizar ele hehehe
O projection no Opera fica bom demais. Com certeza ainda vou utilizar isso na faculdade… =D Será que da pra colocar animações em cada projeção?!?! Aih fica perfeito…
Gostei muito da explicação (Principalmente do projection no Opera), parabéns.
Acho que você se equivocou na mídia Aural, ela sintetiza o áudio através do que “lê” na tela, como você mesmo colocou logo no início do texto.
[…] Com certeza você já passou por algum tipo de aperto na hora de imprimir alguma página da internet. É aquele trauma que te faz visualizar a impressão umas 300 vezes antes de imprimir, afinal cartucho de impressora não é das coisas mais baratas. Se você passou por isso, imagine os usuários mais leigos, que às vezes nem sabem visualizar a impressão de páginas? O Diego publicou para os desenvolvedores no Tableless um artigo explicativo sobre os chamados Media Types do CSS. Mas como nem todo mundo que deveria ter um estilo para impressão sequer sabe que ele existe nem que é tão importante, o aguardado IE7 pode dar uma amenizada no trauma na hora da impressão e talvez agora os web designers darão mais importância ao @media print. O programa da Microsoft promete um monte de melhorias na hora de configurar as páginas para impressão, uma interface mais intuitiva na hora de cortar conteúdo indesejado e configurar melhor a escala de páginas. Coisa que o Firefox já faz bem, só precisa melhorar um pouco em questão de interface, aliás a maioria das novidade que se vê no IE7 todo mundo já usa no Firefox há algum tempo. […]
O da TV eu nunca tinha ouvido falar, bem interessante…
Tentei com o F11 no firefox e neca… oO
Mas é uma informação VALIOSA, eu mesmo não sábia =)
Fiquei também muito impressionante com a @media braille 
Acessibilidade acima de tudo, muito bom!
Abraços
Bem,
só uma dúvida…
Se eu não coloco o tv,handheld, braille… “Eles” vão procurar o mais amigável para ele? Por exemplo, TV = display. Handheld = não vai colocar nada ou vai usar o print. Braille = print?
o media print se aplica apenas para a impressão via browser? … minha dúvida é se por exemplo eu linkar o css com o media print para um arquivo de um sistema, que gera um pdf pra impressão ele atende pra impressão do pdf também…
Faltou citar o “embossed”, que pelo que entendi não tem muita diferença do “braille”, e do “all” que serve pra todos, além de uma outra forma de informar a media, que é dentro da tag style, acho que funfa em todo browser, não?
Mas no resto está um ótimo artigo, falou tudo que era essencial, parabéns…
[…] boa notícia é que se pode visualizar outros modos (media types) do CSS pelo […]
Alguém já conseguiu imprimir o background-color de uma div sem alterar na mão as propriedades do browser??? Alguma propriedade no media print para tal????
Grata,
Weslaine