Dicas sobre HTML5 e CSS3
Ultimamente conversando com alguns amigos vejo a insatisfação que eles tem de querer ter um efeito, ou uma forma dentro do seu site, mas são impedidos pelas limitações da tecnologia. Com isso vem a grande pergunta, vamos dar suporte a quais browser?
Partindo desse ponto, podemos saber em que passo caminhar para a implementação de novas tecnologias como o HTML5 e o CSS3.
Neste post darei inicio a uma explicação sobre HTML5, CSS3, colocando links sobre dúvidas e soluções encontrados durante do desenvolvimento client.
Novo Doctype
O doctype atual que utilizamos no xhtml é quase impossível de ser decorado:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
Agora como novo Doctype do html5 voce vai ter isso na ponta da lingua:
<!DOCTYPE html>
Ainda mais sabendo que o doctype para o html5 não é nessessário, apenas é boa prática utilizar porque para navegadores antigos pelo menos haverá a marcação da tag válida.
Tag de imagem
Considerando o mark-up para imagem abaixo:
<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>
Não é fácil de uma forma semantica, associar a legenda a uma imagem sem utilizar uma tag de paragrafo ou span. Já no HTML5 isso se resolve de maneira muito mais simples e semantico.
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
Mas agora com a redefinição dessa lógica voce poderá utilizar a tag <figure>, e quando combinado com a tag <figcaption>, faz com que semanticamente os dois elementos tenham relação.
Não é preciso mais utilizar a tag Type no style nem no script
Acredito que até hoje em dia voce define o atributo Type nas chamadas de style e de script,
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script>
Isso não é mais necessário atualmente, pois já é implicito que é um tipo de folha de estilo ou um texto javascript respectivamente, sendo assim podemos utilizar essas tags sem o atributo type sem nenhum problema.
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
Citar ou não Citar ?
eis a questão! Lembrando de que HTML5 não é XHTML, não é a necessidades de criar seus atributos com valores em aspas, isso fica a cargo do desenvolvedor. Se voce acha isso visualmente bom então fique a vontade para continuar, mas se acha excesso de código, é hora para deixar de lado.
Deixe seus conteúdos editáveis
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <h2> To-Do List </h2> <ul contenteditable="true"> <li> Break mechanical cab driver. </li> <li> Drive to abandoned factory <li> Watch video of self </li> </ul> </body> </html>
Os novos navegadores têm um novo atributo chamado nifty, que podem ser aplicados aos elementos, chamados contenteditable. Como o próprio nome diz, permite ao usuário editar qualquer do texto dentro dessa tag, incluindo os seus filhos. Existe uma variedade grande para o uso dessa funcionalidade, como por exemplo uma aplicação de To-Do, que tira proveito de armazenamento local.
<ul contenteditable=true>
- Guia de referencia do Tableless
- Curso de HTML5 da W3C
- Google JavaScript Style Guide
- On having layout
- Inline, Block e Haslayout
- Entendendo o que é Progressive Enhancement
- Quirk Mode e Strict Mode