No artigo anterior apresentei alguns dos novos recursos HTML5, que é suportado pela nova versão do Internet Explorer. Hoje mostrarei alguns exemplos mais detalhados de como você pode aplicar o HTML5 e CSS3 em seus projetos e tirar melhor proveito.

As demos foram executadas no Internet Explorer 9. Para conhecer mais sobre o navegador, acesse http://www.internetexplorer9.com.br/

CSS3 Media Queries e Media Query Listeners

No código do CSS, demarque a área no qual deseja inserir o MediaQuery. Por exemplo, a largura mínima da tela tem de ser 950px:

@media (min-width:950px)
{
}

Dentro das chaves, insira as instruções CSS para aquele tamanho específico. Por exemplo, caso queira que a tela fique cinza, dentro destas condições:

@media (min-width:950px)
{
    body {
        background-color:#CCC;
    }
}

Agora vamos supor que a tela esteja entre 450 e 950 pixels, e você queira que elafique branca:

@media (min-width:450px) and (max-width:950px)
{
    body {
        background-color:#FFF;
    }
}

E se a tela for menor do que 450px, você quer que ela fique preta

@media (max-width:450px) {
    body {         background-color:#000;
    }
}

Estas instruções podem estar em qualquer arquivo CSS do seu site. Lembre-se que elas provavelmente sobrescreverão outras já declaradas, então é recomendável que você as coloque abaixo de todas as declarações básicas.

Veja agora nesse evento do Media Query Listener como fazer com que um evento seja executado baseado no MediaQuery. No nosso exemplo, vamos exibir um alerta quando a largura do browser ultrapassar 950px:

Declare o listener

var mediaQueryList = window.msMatchMedia("(min-width:950px)");

Em seguida, registre a função a ser executada no listener

mediaQueryList.addListener(mediaSizeChange);

E por fim, declare a função

function mediaSizeChange(mediaQueryList)
{
    if(mediaQueryList.matches)
    {
        alert("acima de 950px");
    }
}

The Grid System

Embora alguns navegadores atuais não suporte nativamente este recurso, esta é uma maneira eficiente de se alinhar o conteúdo, de forma que todo ele possa ser ajustado automaticamente, de acordo com as limitações de espaço na tela e de maneira fluida.

Imaginemos o diagrama abaixo:

Temos duas colunas: na primeira há três linhas divididas, e na segunda coluna há dois blocos, sendo que o primeiro incorpora as duas primeiras linhas do diagrama.

Três instruções essenciais serão passadas no CSS para cada célula:

• grid-column (especificando o número da coluna);
• grid-row (posição da linha); e
• grid-row-span (com a quantidade de linhas no qual serão mescladas a partir de um ponto).

Além disso, temos de especificar no envoltório como será o comportamento do diagrama e suas células internamente, com as instruções grid-columns e grid-rows. Atenção que, neste caso, os comandos estão no plural.

<style type="text/css">
    #grid     { grid-columns: auto minmax(min-content, 1fr);
                grid-rows: auto minmax(min-content, 1fr) auto
              }
    #logo    { grid-column: 1; grid-row: 1 }
    #aside    { grid-column: 1; grid-row: 3 }
    #menu    { grid-column: 1; grid-row: 2; grid-row-align: start }
    #conteudo    { grid-column: 2; grid-row: 1; grid-row-span: 2 }
    #rodape { grid-column: 2; grid-row: 2; grid-column-align: center }
</style>

<div id="grid">
    <div id="logo">logo</div>
    <div id="aside">aside</div>
    <div id="menu">menu</div>
    <div id="conteudo">conteudo</div>
    <div id="rodape">rodape</div>
</div>

DOM Range & Seleção

O DOM Range permite a manipulação de uma parte selecionada do documento, ou seja, a partir de uma seleção, você consegue atribuir estilos CSS, executar scripts, etc. 

Um exemplo simples: imagine uma área com um texto inserido e que, ao clicar num botão, um alerta é mostrado com o conteúdo selecionado. Teríamos um HTML similar ao abaixo:

<div id="texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum purus tincidunt magna aliquam aliquam id vel est. Cras luctus bibendum augue, a mattis felis pellentesque in. Duis tincidunt placerat sapien, a semper ligula pretium sed.</div>

<input type= "button" value= "clique" onClick="alert(window.getSelection());" />

Veja neste exemplo: selecione um pedaço do texto dentro do quadro e em seguida clique nas opções acima, veja como acontece.

No próximo artigo vamos falar mais de algumas funções que são suportadas pelo IE e que podem fazer a diferença no seu trabalho. Veremos sobre Tags semânticas HTML5, Geolocalização e formulários. Até lá!

Referências sobre compatibilidade e padrões web

•    HTML5 & Javascript Developer Center

Você já conhece o HTML & JavaScript Center? Não perca tempo e aproveite ao máximo nas suas aplicações!