A pedido de um email que recebi, vou falar hoje um pouco sobre as Media Types do CSS.

Mas primeiramente, o que é Media Type?
As Media Types foram criadas pela W3C para o CSS com o objetivo de transformar um site feito em CSS mais acessível a diversos dispositivos, como PDAs, celulares e acreditem, até para apresentações feitas em Power Point. Uma pena é que essas tecnologias, em sua maioria, ainda não estão completamente disponíveis.

Quais são os tipos de Media Type e como utilizá-las em seu website?
Atualmente há apenas dois tipos de Media Types que podem ser postas em funcionamento sem problemas de incompatibilidade:

screen
    Para computadores, PC´s.
print
    Para impressoras. Muito usado para dar uma versão de impressão do site para o usuário.


Há vários outros tipos em estudo pela W3C, para futura implementação no sistema:

handheld
    Para PDAs. Em fase final de implementação.
projection
    Para projetos de apresentações estilo PowerPoint.
embossed
    Para impressoras paginadas de braille
aural
    Para Sintetizadores de Tela.
braille
    Para dispositivos táteis. Um cego poder “imprimir” um artigo para poder ler onde quiser. Semelhante ao embossed.
tv
    Para televisões que tenham qualidade de imagem inferior a um monitor CRT e um LCD.
tty
    Para dispositivos que usam uma grade fixa de caractéres, terminais, dispositivos portáteis, etc…


Há diversas maneiras de se colocar Media Types em seu CSS. Exemplos:

@import url("loudvoice.css") aural;
@media print {
  /* style sheet for print goes here */
}
Nesse caso, ele está importando o arquivo loudvoice.css em Media Type aural;


<LINK rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">
Aqui, designa ao navegador para carregar o arquivo foo.css em print e handheld;


@media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }
Nesse exemplo, é designado diferentes valores para cada Media Type e para cada elemento.


Após uma pesquisa básica, vi um exemplo do uso do Media Type projection, no caso, pelo Opera.
Experimente acessar esse endereço ( http://www.opera.com/support/tutorials/operashow/ ) com o Opera. Quando acessar esse site, tecle F11.


Bom, creio que o básico sobre as Media Type falei aqui... realmente há diversas funções que o CSS poderá realizar ainda mais pra frente... as Media Types são um exemplo.



Dúvidas? Utilize de nosso fórum: http://www.oficinadanet.com.br/webforum/
Sugestões, como a do usuário anônimo para eu fazer essa coluna sobre Media Types? tokageh[at]gmail.com

Era isso, espero que tenham gostado, e não hesitem em enviar sugestões ;)

1 Comentário(s) compartilhe