HTML5 Shiv

As versões do Internet Explorer anteriores à 9 não suportam os novos elementos da HTML5. Isso significa que esses elementos, caso sejam usados em uma página, não serão formatados pela CSS. Porém, há um script que resolve o problema, criando os elementos faltantes na estrutura do documento HTML. Esse script é o HTML5 Shiv.

O uso do script é bem simples. Basta incluir no cabeçalho do documento o seguinte código:

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 

Interessado na Mobile Web?
Conheça nosso curso de atualização a distância em Mobile Web.

Marcação poliglota

Um documento com marcação poliglota é um documento que gera a mesma árvore de elementos (com exceção do atributo xmlns no elemento raiz) quando processado como um documento HTML5 ou como um documento XML. Basicamente, a idéia é criar um documento HTML5 que respeita as regras de boa formação da XML como, por exemplo, usar letras minúsculas para os nomes dos elementos e atributos, colocar os valores dos atributos entre aspas e colocar o caráter / no final da etiqueta dos elementos vazios. A marcação poliglota é ainda um esboço de especificação do W3C que, na época da escrita deste texto, estava na versão de 25 de maio de 2011.

De acordo com a especificação, a marcação poliglota resulta em:

  • Um documento HTML5 válido
  • Um documento XML 1.0 bem formado

Árvores DOM (document object model) idênticas quando o documento for processado como HTML ou como XML, com raras exceções em relações os atributos xml, xmlns e xlink. Esses atributos são exigidos pela XML e opcionais para a HTML5.

Além disso, o documento não precisa ser um documento XML válido, pois sua estrutura é checada com a especificação da HTML5.

O caso mais comum de uso da marcação poliglota é nas situações em que o documento poderá ser carregado tanto por um navegador HTML5 quanto por um navegador XHTML. Isso acontece, por exemplo, nas páginas criadas para dispositivos móveis, em que não só há uma grande variedade de navegadores, como também um bom número de dispositivos antigos (com navegadores antigos) ainda em uso no mercado. Ao se usar a marcação poliglota, elimina-se a necessidade de se criar uma versão HTML5 e outra versão XHTML do documento.

Regras relativas ao cabeçalho do documento

A marcação poliglota usa a declaração de tipo de documento da HTML5. Assim, todo documento deve conter a declaração <!DOCTYPE html>. Existem alguns outros parâmetros opcionais nessa declaração, que podem ser encontrados na especificação da HTML5.

Um documento com a marcação poliglota deve usar apenas a codificação de caracteres UTF-8, pois é a única exigida em ambas especificações HTML e XML. A declaração da codificação de caracteres pode ser feita através do cabeçalho HTTP, mas recomenda-se a indicação explícita através da inclusão, no cabeçalho do documento, do seguinte elemento: <meta charset="UTF-8" />. Essa declaração, porém, funciona apenas para a HTML. Isso não é necessariamente um problema, pois a codificação default da XML é a própria UTF-8.

Quanto ao uso de espaços de nomes, a HTML5 tornou-os default e não declarados. Para manter compatibilidade com a XML, porém, a marcação poliglota usa os seguintes espaços de nomes nos elementos html, svg e math e somente nesses elementos, pois são os únicos que a HTML5 permite:

  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <math xmlns="http://www.w3.org/1998/Math/MathML">
  • <svg xmlns="http://www.w3.org/2000/svg">

O mesmo se aplica ao espaço de nomes XLink. Caso se use os atributos xlink:actuate, xlink:arcrole, xlink:href ou os outros desse espaço de nomes, seu prefixo deve ser incluído nos elementos math ou svg através da seguinte declaração: xmlns:xlink="http://www.w3.org/1999/xlink".

O idioma do documento com marcação poliglota deve ser especificado através dos atributos lang e xml:lang no elemento raiz – os valores desses atributos devem ser exatamente os mesmos.
Uma última observação é que não se usa, na marcação poliglota, a declaração http-equiv="Content-Type" em um elemento meta.

Regras relativas ao corpo do documento

A estrutura mínima de um documento com marcação poliglota é:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

À exceção dos elemento noscript, que não pode ser usado em documentos XML, a marcação poliglota aceita qualquer elemento da HTML5. Porém, existem algumas regras em relação ao uso de caixa alta (maiúsculas) e de caixa baixa (minúsculas):

A marcação poliglota só aceita os seguintes elementos vazios: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param e source. A sintaxe exigida para esses elementos é a da XML como, por exemplo, <br /> ao invés de <br></br>.

É importante observar para a marcação poliglota que todos elementos da HTML5 que não sejam do modelo de conteúdos EMPTY devem ser abertos e fechados (por exemplo, <p></p> ao invés de <p />), porém existem elementos na MathML e na SVG que podem ser vazios ou apresentar conteúdo.

Quando os elementos textarea ou pre são usados na marcação poliglota, não devem ser iniciados por uma quebra de linha.

Finalmente, um atributo id não pode conter qualquer espaço em branco, pois isso não é aceito pela especificação HTML5.

Outras regras

Apenas as entidades nomeadas amp, lt, gt, apos e quot podem ser usadas na marcação poliglota. As demais entidades devem ser usadas na versão hexadecimal. Por exemplo, &#xA0; ao invés de &nbsp; ou de &#160;. Esse formato hexadecimal também deve ser usado nos valores dos atributos. Por exemplo, ao invés de se usar \t no valor de um atributo, deve-se usar &#x9;.

A marcação poliglota só permite o uso de scripts ou estilos com conteúdo seguro, isto é, aquele conteúdo que não usa os caracteres <, &, ]]> e --. Se esses caracteres forem necessários, então os scripts ou estilos devem ser usados em arquivos externos. Os vínculos a esses arquivos devem ser feitos das seguintes formas:

  • <script src="external.js"></script>
  • <link rel="stylesheet" href="external.css" />

Os comandos em JavaScript document.write() e document.writeln(), apesar de válidos na HTML, não devem ser usados na marcação poliglota, pois não podem ser usados na XHTML. Recomenda-se que sejam substituídos pelo uso da propriedade innerHTML.

Exemplo

A especificação da marcação poliglota contém um exemplo que pode ajudar a esclarecer algumas dúvidas. Esse exemplo está também publicado no site da W3C.

 

Interessado na Mobile Web?
Conheça nosso curso de atualização a distância em Mobile Web.

Adobe lança o Edge, um provável substituto para o Flash

A Adobe acaba de lançar o Adobe Edge, um software que gera animações semelhantes às do Flash, mas baseada nos padrões HTML5, CSS3 e JavaScript. Essa pode ser a indicação de que a Adobe entendeu que, para se manter no mercado, precisará se adaptar aos tempos modernos.

A construção de animações é fácil e baseada na linha de tempo da mesma forma que no Flash. Apesar do software não oferecer mecanismos de controle da interação com o usuário (apenas a construção de animações), imagino ser possível editar seu código, identificar os elementos presentes nele e criar, através da programação, a interação desejada.

Alguns exemplos podem ser encontrados no site da Adobe e, por ser baseado em padrões web, as animações podem rodar nos smartphones e tablets.

 

Interessado na Mobile Web?
Conheça nosso curso de atualização a distância em Mobile Web.