CSS Media Types e como fazer o Internet Explorer do seu Pocket PC reconhecer somente sua folha de estilos handheld
Por: Henrique C. Pereira
Publicado em Saturday 04 August 2007 às 20:23Categoria: HTML/CSS/JScript, Mobile
Tudo começou com um texto sobre padrões onde eu falava do problema do Internet Explorer no Pocket PC ao tentar renderizar tanto a folha de estilos principal (screen) quanto aquela feita especificamente para dispositivos móveis (handheld). Lá, o leitor Vinícios Rocha deu uma dica: Quando for linkar a folha de estilos principal, coloque o media type media=”Screen” ao invés de media=”screen”, com o "S" maiúsculo mesmo, que o browser ignora a folha de estilos screen e interpreta apenas a handheld. Fui dar uma fuçada mais no assunto para saber.
Em um mundo perfeito o documento de HTML que você faz para o seu site pode ser servido e adaptado para diferentes dispositivos, sem precisar ter versões específicas para eles.
Vamos por partes. Com CSS Media Types é possível (supõe-se ser) controlar como um documento deve ser apresentado em diferentes tipos de mídia, como a tela do seu monitor, seu celular ou PDA, sintetizador de voz etc. Ou seja, você constrói um único site e projeta folhas de estilos que vão controlar como o seu site deverá ser "apresentado" em cada um desses dispositivos.
Bom, voltando ao problema do IE no Windows Mobile. Para ver na prática os media types em ação, veja um teste feito pelo Patrick Griffiths do HTML Dog onde ao acessar esta página você consegue saber quais dispositivos tem suporte ao media type handheld e quais não. Quando um quadrinho ficar em verde em algum (ou nos dois) trechos, screen e handheld, significa que o dispositivo conseguiu interpretar o media type correspondente. Veja os screens shots que eu fiz do Pocket PC rodando Windows Mobile 5 usando o Internet Explorer e Opera Mobile:
Screenshot do Internet Explorer no Windows Mobile 5 – Pocket PC
Screenshot do Opera no Windows Mobile 5 – Pocket PC
Screenshot do Opera no Windows Mobile 5 – Pocket PC
Observe que no screenshot do Internet Explorer a parte do screen e do handheld ficaram em verde, mostrando que o Internet Explorer utiliza as duas folhas de estilos ao mesmo tempo para renderizar a página. Já nos screenshots do Opera Mobile somente o trecho do handheld ficou em verde.
Para corrigir esse problema no meu site as folhas de estilos estão organizadas da seguinte maneira:
<link href="http://www.revolucao.etc.br/estilos/estilos.css"
rel="stylesheet" media="Screen" type="text/css" />
<link href="http://www.revolucao.etc.br/estilos/mobile.css"
rel="stylesheet" media="handheld" type="text/css" />Simple like that! A descoberta dessa falha no Internet Explorer para Pocket caiu como uma luva.
Artigos relacionados:
- O caminho torto ou o torto caminho dos padrões?
- O poder do novo Opera Mini 4
- WPhone – Administrando seu blog em WordPress de dispositivos móveis
- Conditional Comments no Internet Explorer
- O Internet Explorer 7 e como manter a versão 6 instalada no Windows XP
- XHTML Media Types
- Quer nos ajudar a fazer um teste com dispositivos móveis?
Comentários dos leitores
Este artigo possui 7 comentários
Bom, agora da pra dizer que existe esperança entao!
:D
ahahah
muito boa a analise e a pesquisa!
Nunca duvide da capacidade do Internet Explorer em lhe trazer problemas…
Pra variar, mais um bug do IE… ¬¬
Bacana a dica. Já vou aplicar.
Mas acredito que isso não traga mtos problemas né…
Ainda não, pode ser que em breve sim… Num futuro não muito distante onde operadoras de telecom tenham planos mais baratos :D
Abraço!
Curtiu a dica, né? =)
É um prazer ajudar!
Agora poderemos ver a versão do Revolucao.etc no Pocket?
Na verdade, se você colocar o "screen" minúsculo, o Pocket vai priorizar o handheld, mas vai misturar com o screen.
Por exemplo, se você tiver, no Handheld h2 cor vermelha e no screen h2 cor azul, no pocket o h2 vai ficar vermelho. MAS se você tiver no screen h1 cor amarelo e nenhuma configuração de h1 para handheld, no pocket o h1 vai ficar amarelo!
Felizmente, o "Screen" resolve o problema. E, felizmente, é um bug do IE fácil de ser contornado.
A propósito, por falar em "bugs" e "IE", seu site tá meio zuado no IE7… Já viu?
Um abraço Henrique.
Interessante essa 'descoberta'.
Infelizmente temos de recorrer a esse tipo de artifício para fazer o que se deseja…
Mas nem tudo é perfeito pois, como foi dito no outro post sobre o assunto, as fabricantes dos browsers necessitam fazer algo que atenda à maioria dos sites, os quais não estão adaptados a exibição em dispositivos específicos, aplicando um CSS adequado para cada um deles.
Parabéns pelo artigo e pelo Blog. Votos de maiores sucessos na web 2.0