13 março, 2012

Usando css media queries no Windows Phone 7

O desenvolvimento moderno de web sites tem introduzido tantos novos conceitos e abordagens que acaba sendo difícil para uma grande parte dos desenvolvedores se manterem atualizados.

Uma ideia que defendo com muita garra é o desenvolvimento de sites com layout fluído, capazes de identificar e se adaptarem ao dispositivo onde estão sendo exibidos. Já vi diversas tecnicas para atingir este proposito mas a maioria delas normalmente consiste em criar versões mobile do site. Eu não gosto dessa abordagem por alguns motivos:

  • normalmente são hospedadas em urls diferentes da versão “normal”
  • costumam requerer alguma forma de detectar que está em um dispositivo móvel para poder redirecionar para a url da versão móvel
  • reaproveita pouco do desenvolvimento realizado na versão “normal”

É aí que entra um recurso do CSS chamado media queries. Media queries foram criadas originalmente para permitir a criação de folhas de estilo css diferentes e específicas para meios distintos (exibir no monitor, impressão, etc…), mas recentemente, com os atuais avanços nas engines dos browsers modernos tanto no desktop como em smartphones este recurso evoluiu para permitir a criação ou adaptação de folhas de estilos que se adaptam à resolução da tela, entre outros aspectos.

Para mim esta abordagem é muito mais elegante e efetiva pois permite que um site seja construído e depois seja simplesmente adaptado para resoluções distintas, reorganizando, redimensionando ou até mesmo ocultando elementos na tela,

Todos os browser modernos de smartphones têm suporte em algum nível a este recurso e o Windows Phone não é diferente. A partir da versão 7.1 do Windows Phone (Mango – equivalente à versão 7.5 do SDK) o Internet Explorer passou a usar a engine do IE9 (o IE do Windows Phone 7.0 era baseado no IE7). Isso significa que praticamente tudo que é suportado nativamente no IE9 também é suportado no WP7.1 (com exceção de plugins e um ou outro recurso que não fazia sentido nesse tipo de aparelho).

Abaixo segue um exemplo do html necessário para que possamos tirar o máximo proveito de media queries tanto em browsers de desktop como mobile:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

<meta name="Viewport" content="width=device-width,user-scalable=no"/>

<meta charset="utf-8" />

<title>Titulo da pagina</title>

<link href="Styles/tema1/main.css" rel="stylesheet" type="text/css" />

</head>


Neste pequeno fragmento de html já temos diversas coisas interessantes:



  • Doctype html, que é o doctype do html5. Em browsers modernos (no IE a partir da versão 9), este doctype faz com que a página seja renderizada seguinda o mais recente conjunto de regras definidas para html5.
  • Meta tag X-UA-Compatible faz com que versões do IE anteriores à versão 9 renderizem a página no modo de compatibilidade mais avançado que suportarem.
  • Meta tag Viewport define quais serão os limites de resolução modo de zoom utilizados pelo browser quando em dispositivos mobile. Neste caso estamos definindo que a página deve ser renderizada respeitando a largura do dispositivo e que não haverá zoom no conteúdo.

Mas isso por si só não é suficiente para termos um site adaptável. Precisamos também de uma folha de estilo capaz de adaptar o conteúdo. É aí que entra a tal da media query. No arquivo main.css referenciado acima, poderiamos ter algo assim:

#header {
height:80px;
background:#000;
margin:0 auto;
width: 900px;
color:#fff;
}

@media (max-device-width:900px), (max-width:900px){
img{
max-width:100%;
}

#header {
height:auto;
width: 100%;
}
}
@media (max-device-width:474px), (max-width:474px){
#footer{
display:none;
}
}

Notem que há duas estruturas @media que definem algumas regras. Essas estruturas são as média queries que se encarregarão de adaptar o conteúdo da página de acordo com a resolução do browser (funciona até se você redimensionar a janela do browser no computador). No exemplo acima, o css normal define algumas propriedades para o elemento com id “header”. Depois há uma instrução de media query que altera as propriedades de alguns elementos se a resolução do browser tiver até 900px de largura. Depois há uma segunda instrução que esconde o elemento com id “footer” caso a largura do browser seja até 474px. Um truque bacana que coloquei neste exemplo foi que restringi a largura de todas as imagens para a largura do browser, assim quando a página for aberta em um smartphone, por exemplo, não haverá scroll lateral por causa de alguma imagem grande que esteja no site, mas imagens pequenas não serão afetadas.


O mais interessante desse processo todo é que se o site for bem construído não será necessário mudar nada na página para ter uma versão mobile. Além disso, se o browser não suportar media queries, ele simplesmente não vai entender o @media e vai ignorar tudo que estiver naquele bloco, o que significa que esta folha de estilo não afetará negativamente o site quando executado em browser mais antigos.


Neste momento estou trabalhando em um novo layout para este blog seguindo esta abordagem, para que fique mais confortável ler os posts a partir de smartphones. Espero conseguir arrumar tempo para finalizar este layout logo. Para ver um excelente exemplo deste método em ação, acesso o blog do Scott Hanselman (você pode utilizar qualquer browser e redimensionar a janela ou acessar a partir do seu smartphone).

Nenhum comentário: