HTML5 Como usar e
Entre várias novas tags que estão disponíveis em HTML5, Especificações (como: figura, figcaption, e a parte, de lado), detalhe e resumo tags, na minha opinião, são as mais úteis. Com essas novas tags, você pode ocultar parte do conteúdo longo e exibir apenas o resumo.
Na verdade, muitas vezes vemos esse efeito por aí, mas a maioria deles ainda é construída sobre JavaScript ou seu irmão: jQuery, que a maioria das pessoas não entende. Agora, com esses novos elementos - detalhes e resumo - as coisas ficarão mais fáceis.
Então, vamos ver como as tags funcionam em um cenário real.
Nesta demonstração, vamos resumir uma descrição do produto. Primeiro vamos criar uma tag 'details' e depois colocar todo o conteúdo junto com a tag 'summary', como no exemplo abaixo:
Especificação do MacBook Pro
- Ecrã panorâmico brilhante de 13,3 polegadas retroiluminado por LED com vidro de ponta a ponta, ininterrupto (resolução de 1280 x 800 pixels).
- Processador dual-core Intel Core i5 de 2,4 GHz com cache L3 compartilhado de 3 MB para excelente multitarefa.
- Intel HD Graphics 3000 com 384 MB de SDRAM DDR3 compartilhada com a memória principal.
- Disco rígido Serial ATA de 500 GB (5400 RPM)
- 4 GB de RAM instalada (1333 MHz DDR3; suporta até 8 GB)
Nesse exemplo, eu adicionei detalhes da especificação do MacBook Pro, e agora vamos ver como o navegador renderiza essas tags.
Eu também adicionei um título e mais descrições do produto acima dos detalhes para tornar a demonstração acima mais sensata para você. Então, o que você acha? É bem fácil, né?
Suporte para Navegador
No entanto, antes de se apressar em aplicar essa tag a todo o website, é importante observar que os detalhes e a tag de resumo só são compatíveis no Chrome 12 e acima.
Mesmo o mais recente Firefox não suporta ainda.
Portanto, se você quiser aplicar essa tag, precisará incluir uma função de fallback para navegadores não compatíveis. A boa notícia é simples; você pode usar esse detalhe polyfill, que replicará automaticamente a funcionalidade de tag para navegadores antigos.
Faça o download desse arquivo e vincule-o ao documento html junto com o jQuery (no mínimo 1,7+) e certifique-se de colocar o polyfill antes da tag body fechada.
E dentro da tag head, insira a seguinte tag condicional para incluir HTML5shiv para o IE8 e versões anteriores, caso contrário, o Internet Explorer não reconhecerá essas novas tags.
Agora vamos ver como acontece no Internet Explorer:
E agora funciona também no Internet Explorer.
- Demonstração
- Fonte de download
Conclusão
Criar um efeito de ocultar e mostrar como JavaScript ou jQuery é relativamente fácil, mas tê-lo suportado nativamente pelo navegador é definitivamente uma solução muito mais fácil para muitas pessoas. Se você quiser fazer isso em JavaScript ou em HTML5, a decisão é sua. Obrigado pela leitura, e espero que tenham gostado.
