CSS Media Types e como fazer o Internet Explorer do seu Pocket PC reconhecer somente sua folha de estilos handheld

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:

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.