You are on page 1of 219

HTML5 e CSS3

com farinha e pimenta


Diego Eis
Elcio Ferreira
Copyright 2012 por Tableless
Todos os diretos reservados
Publicado por Tableless.com.br
Desenvolvimento client-side inteligente.
ISBN 978-1-105-09635-8
So Paulo, Brasil
http://tableless.com.br/
@tableless
http://facebook.com/tablelessbr
PARA VOC.
IF NOT NOW, WHEN? IF NOT YOU, WHO?
WASP TEAM
NDICE
UMA BREVE HISTRIA 15
AS 3 CAMADAS DE DESENVOLVIMENTO 19
Primeira camada: Informao 20
Segunda camada: Formatao 21
Terceira camada: Comportamento 22
HTML - A ALMA DO CLIENT-SIDE 25
Hipertexto 26
Marcao 27
O incio do HTML5 28
WHAT Working Group 28
HTML5 e suas mudanas 29
Estrutura bsica, DOCTYPE e charsets 31
Modelos de contedo 35
Novos elementos e atributos 39
Elementos de seo 40
Atributos 47
Elementos modificados ou ausentes 50
Elementos modificados 50
Elementos ou atributos descontinuados 51
Compatibilidade do HTML5 52
Tcnicas de deteco 53
Utilizando a Biblioteca Modernizr 54
NOVOS TIPOS DE FORMULRIOS E MULTIMDIA 59
Tipos de dados e validadores 63
Formulrios vitaminados 63
autofocus 63
Placeholder text 63
Validao de formulrios 65
pattern 65
novalidate e formnovalidate 66
Custom validators 67
Detalhes e contedo editvel 68
Detalhes e sumrio 68
Contedo editvel 70
Drag-n-drop e correo ortogrfica 70
Drag and Drop 70
Detalhes importantes 71
Reviso ortogrfica e gramatical 73
Elementos audio e video, e codecs 74
udio 74
Vdeo 75
Elemento device e Stream API 76
O elemento device 76
Streams 78
MathML 81
A NOVA GERAO DE APLICAES WEB I 81
SVG 83
Canvas API 85
O elemento canvas 85
Canvas vs SVG 87
Server-sent events 88
EventSource 88
O protocolo de comunicao 89
DOM e HTML5 90
Por qu DOM? 90
Vamos s diferenas 91
getElementsByClassName 91
activeElement e hasFocus() 91
getSelection() 93
Intervalos de seleo 94
Selector API 95
querySelector e jQuery 95
Caractersticas especiais de DomNodeList 97
Datasets 97
Novos eventos DOM 98
Uma palavra sobre eventos 98
Elementos multimdia 98
Eventos em campos de formulrio 99
Eventos gerais 100
Drag-and-drop 101
Atributos de ev ento 101
Menus e toolbars 101
O elemento menu 101
Tipos de comando 102
O elemento command 103
Exemplo de menu 105
Tipos de links 106
Links 106
Metadados de navegao 107
Microdata 111
A NOVA GERAO DE APLICAES WEB II 111
Diferentes tipos de dados 114
Falando um idioma comum 118
Histrico de sesso e API Storage 119
Histrico de Sesso 120
localStorage e sessionStorage 122
Aplicaes offline 124
Caching 124
O objeto ApplicationCache 126
Controle de status da aplicao 127
Scroll in to view e hidden 128
hidden 128
hidden e Javascript 129
Geolocation API 129
Mtodos de Geolocalizao 129
Tratando erros 131
No trate a resposta do usurio como um erro 131
O objeto de configurao 132
watchPosition 132
Undo 133
O objeto UndoManager 133
Respondendo s aes de undo e redo 134
Disparando as aes de undo e redo 134
CSS 137
O que CSS? 137
O que um seletor? 139
Seletores complexos 140
Exemplo de funcionamento 140
Pseudo-classes 143
Pseudo-elementos 147
Gradiente 148
Propriedade border-image 151
Dividindo a imagem 152
Comportamento da imagem 152
Aplicao 153
Sombras 154
RGBA 155
RGBA e a diferena da propriedade OPACITY 156
O RGB 159
O HSL 160
E o hexadecimal? 161
currentColor 162
@font-face 163
Mltiplos backgrounds 165
Columns 166
column-count 166
column-width 166
column-gap 167
Transform 2D 167
Introduo ao CSS 3D 171
Tudo uma questo de perspectiva 172
CSS 3D Transforms 173
Fazendo o efeito de Card Flip 175
Propriedade Transition 177
Propriedade animation e regra keyframe 181
Mdulo Template Layout 187
Sintaxe e funcionamento 189
O funcionamento da propriedade display 190
Definindo a largura e altura dos slots 191
O funcionamento da propriedade position 193
Pseudo-elemento ::slot() 195
Mas e o float? 195
Paged media 196
@page 197
Terminologia e Page Model (modelo de pgina) 198
Propriedade size 200
Page-size 201
Presentation-levels 202
Como funciona o modelo 203
A propriedade presentation-level 204
Motores de Renderizao 209
BROWSERS 209
Prefixos de browsers 210
Como utilizar um prefixo? 211
Prefixos so css-hacks? 211
COMO SER? 215
UMA BREVE
HISTRIA
1
Ns no podemos comear a falar sobre HTML e CSS sem contar uma breve
histria sobre o incio de tudo.
No sei quanto tempo voc trabalha com web e no sei qual seu conhecimento
sobre histria da internet, mas saiba que nunca foi to fcil desenvolver para
web como hoje. Ns produzimos websites acessveis hoje por que ocorreram
uma srie de movimentos independentes entre os fabricantes de browsers e
alguns profssionais da rea que quebraram barreiras importantes.
Antes nossa preocupao rondava apenas o Internet Explorer 3+ e o Netscape.
Estes dois navegadores davam mais problemas de compatibilidade do que
todos os problemas de compatibilidades dos browsers atuais, combinados.
Fazer websites com tabela foi um marco para a histria do desenvolvimento
web mas tambm o incio dos nossos problemas.
Mas no d para negar que criar websites utilizando tabelas nos trouxe
possibilidades interessantes, como por exemplo, criar websites com colunas.
Uma maravilha! Imagine s: se antes podamos apenas inserir texto corrido,
centralizado, com alguns gifs animados, agora podamos dividir o layout
em colunas e fazer diagramaes matadoras e sofsticados para a poca. Um
verdadeiro avano. Estamos falando de algo em torno de 1998.
Mesmo com essas novas possibilidades, descobrimos cedo que desenvolver
HTML5 e CSS3 com Farinha e Pimenta
16
websites utilizando tabelas muito complicado. Ainda mais quando utilizamos
o CSS da maneira errada. Naquele tempo era normal misturar o CSS com o
HTML. Foi da que o termo Tag Soup surgiu.
Era muito cdigo! Desenvolvedores aninhavam tabelas como se no houvesse
o dia de amanh. Uma loucura.
O cdigo fcava enorme, fazendo que com o download da pgina demorasse,
a manuteno era terrvel e o know-how de como o desenvolvimento foi feito
era restrito a alguns profssionais da equipe. Era tudo muito infexvel. Isso
encarecia a mo de obra e por isso os projetos fcavam cada vez mais caros.
Lembre-se que alm de tudo isso havia a guerra dos browsers. Os problemas
de compatibilidade de cdigo entre os dois browsers eram to terrveis que
foravam o desenvolvedor a criar duas verses de sites para abranger os
usurios dos dois navegadores.
A Netscape e a Microsof tinham uma mente predatria. Cada um tentava
ganhar os usurios de forma nada honrosa. Para conseguir tal faanha era
fcil: bastasse fazer com que os desenvolvedores fzessem websites compatveis
apenas para um browser, fazendo com que o concorrente fcasse s moscas.
Por isso que fazamos duas verses para cada site, para cada script, para cada
HTML.
Essa novela durou longos anos at que um grupo de profssionais gringos
decidiram criar um movimento chamado Web Standards Project - WaSP.
O desenvolvimento web estava sendo massacrado por causa dessa guerra
entre os browsers. O WaSP tinha um objetivo muito claro: fazer com que os
browsers e os desenvolvedores seguissem os padres web recomendados pelo
W3C.
O Tim Berners-Lee, o inventor da Web, fundou a World Wide Web Consortium
- W3C - para recomendar, criar e manter padres tecnolgicos baseados na
web que fossem interoperveis, abertos e acessveis. Essas tecnologias devem
ser manipuladas para a criao de designs inovadores e tambm para a
17
HTML5 e CSS3 com Farinha e Pimenta Uma breve histria
produo de sistemas avanados baseados na internet.
A perseverana deste grupo fez com que os fabricantes de browsers ouvissem
suas ideias e suportassem as tcnicas e ideias do W3C. Hoje os browsers
suportam os padres web de forma que antes nunca imaginvamos. Isso
bom para todos ns.
Atualmente o objetivo fazer com que os desenvolvedores estudem e adotem
a implementao dos padres web de forma inteligente.
Ainda h muito o que fazer, principalmente aqui no Brasil. Mas estamos
vivendo um cenrio muito propcio ao crescimento avanado das tcnicas
de desenvolvimento web. Mais desenvolvedores esto engajados a ensinar,
sugerir e fazer com que o mercado de web cresa de forma inteligente. Se
voc est lendo este livro, voc a prova de que o interesse em uma web mais
criativa tem aumentado.
If not now, when? If not you, who? WaSP Team.
AS 3 CAMADAS DE
DESENVOLVIMENTO
2
O desenvolvimento client-side baseado em 3 camadas principais: informao,
formatao e comportamento.
As camadas possibilitam o desenvolvimento independente de cada rea da
produo. Se quisermos modifcar o design, podemos faz-lo manipulando
apenas o CSS, sem se preocupar com HTML, Javascript ou programao
server-side.
Embora sejam independentes, a evoluo de cada camada infuencia o
caminho da outra. O CSS no consegue evoluir se o HTML manter-se
congelado no tempo. Um dos principais problemas quando desenvolvamos
com tabelas era a mistura da formatao com a informao. O cdigo HTML
estava to entrelaado com o cdigo CSS que a manipulao do layout se
tornava trabalhosa e muito cara. No era possvel modifcar colunas de lugar,
caractersticas de textos ou at mesmo tamanho dos elementos sem ter que
modifcar alguma coisa do cdigo HTML. Nada era independente. Esse era
um dos motivos que encareciam os projetos para web. Fazer um site entre os
anos de 96 e 2001 no era coisa fcil.
HTML5 e CSS3 com Farinha e Pimenta
20
PRIMEIRA CAMADA: INFORMAO
A camada de informao a mais importante. Ela vem antes de todas as
outras e fca sob o controle do HTML. O HTML marca a informao
dando-lhe signifcado. Esse signifcado reconhecido por robs, sistemas,
aplicaes ou outros meios que podem acessar e reutilizar a informao
publicada. A informao precisa ser acessvel a qualquer hora, de qualquer
lugar e principalmente, por qualquer dispositivo e meio de acesso. Como j
dizia o antigo ditado do desenvolvimento web: O contedo o Rei. Mas o que
contedo? O que informao?
Informao tudo o que o usurio consome.
A Web foi criada para compartilhar informao. Desde o incio, quando
a internet foi planejada e criada, seu objetivo era claro: compartilhar
informao com pessoas do mundo inteiro, de forma rpida e dinmica.
A informao que trafega na web deve ser reutilizada quantas vezes for
necessrio. Tambm importante que a informao seja portvel, de forma
que ela no seja acessvel por apenas um meio.
Entendendo o significado das coisas
Ns, seres humanos, entendemos o signifcado de cada elemento facilmente.
Sabemos que um ttulo diferente do pargrafo por causa das suas
caractersticas visuais: tamanho de fonte, quantidade de caractres, escrita
e etc...
As mquinas (e quando digo mquinas, quero abranger sistemas de busca,
leitores de tela, smartphones, browsers, aplicaes, sistemas, etc. Em
suma, qualquer meio de acesso) no tem esse discernimento. Os robs de
sistemas de busca, por exemplo, no enxergam. Eles no tem como entender
visualmente o que um ttulo, um pargrafo, uma imagem etc. Essa a
importncia da marcao HTML: ela defne o que cada informao.
Tenha em mente que o HTML deve ser sempre a primeira camada. Se
todas as outras camadas no funcionarem por algum motivo, o HTML
21
HTML5 e CSS3 com Farinha e Pimenta As 3 camadas de desenvolvimento
deve funcionar. A informao deve ser entregue, no importa se o visual
tenha sido prejudicado por falta do CSS ou se o Javascript est desligado no
browser do usurio.
SEGUNDA CAMADA: FORMATAO
A segunda camada responsvel por controlar o visual da informao exibida
pelo HTML. esta camada que deixa tudo bonito. Que faz vender. Que enche
os olhos do cliente. Atualmente essa camada controlada pelo CSS e parece
que ser por muito tempo ainda.
O CSS a linguagem responsvel por controlar o visual da informao
exibida pelo HTML. O CSS formatar o contedo de forma que seja
visualmente agradvel em qualquer meio de acesso. A informao acessada
por diferentes meios de acesso, desde sistemas de busca at aparelhos
como tablets, smartphones etc e o CSS o responsvel por formatar a
informao para que ela seja consumida em qualquer meio de acesso
de forma simples. Se voc estiver usando um leitor de tela, o CSS poder
controlar a maneira com que a voz do leitor sair pelas caixas de som.
Controlamos tambm a forma com que a informao mostrada em TVs ou
outros aparelhos. Controlamos como o texto ser exibido em uma impresso.
Quero que voc abra sua mente quando ler em uma mesma frase as palavras CSS
e formatao. Formatao com CSS quer dizer muito mais do que pintar divs,
formatar letras e cores. Se a informao deve ser acessada em qualquer lugar, o
CSS precisa cuidar para que essa informao aparea de maneira adequada em
cada um destes meios de acesso. Essa sua principal responsabilidade.
Vamos ver mais sobre a responsabilidade do CSS e alguma tcnicas nos
captulos posteriores.
HTML5 e CSS3 com Farinha e Pimenta
22
TERCEIRA CAMADA: COMPORTAMENTO
Nessa terceira camada voc decidir quais sero os comportamentos
dos elementos. O Javascript at hoje o principal responsvel por essa
camada. Com o Javascript voc definir se os elementos sero arras-
tados, dimensionados, rotacionados, reformatados etc. O Javascript
controla tudo isso manipulando as caractersticas dos elementos pelo
CSS. Resumidamente, o Javascript controla os valores definidos pelo CSS
e manipula estas propriedades.
Voc ver no decorrer deste livro que o HTML5 trouxe muitas ferramentas
e possibilidades para que o Javascript controle os elementos criados no
cdigo utilizando as novas APIs do HTML5
Nessa camada no importa se voc utilizar Javascript ou se intermediar seu
cdigo com um framework como o JQuery.
O CSS tambm est com um p nessa camada. Com o CSS3 podemos controlar
comportamentos simples dos elementos, comeando com animaes e
transies. Mesmo assim o CSS no ser (talvez) uma ferramenta para fazer
animaes complexas como as animaes que fazemos com SVG ou Canvas.
HTML5 e CSS3 com Farinha e Pimenta
HTML - A ALMA
DO CLIENT-SIDE
3
De acordo com o W3C a Web baseada em 3 pilares:
Um esquema de nomes para localizao de fontes de informao na Web,
esse esquema chama-se URI.
Um Protocolo de acesso para acessar estas fontes, hoje o HTTP.
Uma linguagem de Hypertexto, para a fcil navegao entre as fontes de
informao: o HTML.
Vamos nos focar no terceiro pilar, o HTML.
HTML uma abreviao de Hypertext Markup Language, que traduzindo
para o portugus signifca Linguagem de Marcao de Hypertexto. Resumindo
em uma frase: o HTML uma linguagem para publicao de contedo (texto,
imagem, vdeo, udio e etc) para a Web.
Para entender melhor como o HTML funciona, vamos conversar sobre duas
palavras que fazem parte do seu nome: Markup (marcao) e Hypertext
(hipertexto).
HTML5 e CSS3 com Farinha e Pimenta
26
HIPERTEXTO
O HTML baseado no conceito de Hipertexto, que uma forma de organizar
contedo de forma no linear. Hipertexto so conjuntos de elementos ou ns
ligados por conexes. Estes elementos podem ser palavras, imagens, vdeos,
udio, documentos etc. Estes elementos conectados formam uma grande rede
de informao. Eles no esto conectados linearmente como se fossem textos
de um livro, onde um assunto ligado ao outro seguidamente. A conexo feita
em um hipertexto algo imprevisto que permite a comunicao de dados,
organizando conhecimentos e guardando informaes relacionadas.
Quando a web foi criada, era necessrio distribuir a informao de uma
maneira simples mas organizada, era necessrio ento haver uma linguagem
que fosse entendida universalmente por diversos meios de acesso. O HTML
se prope a ser esta linguagem. Desenvolvido originalmente por Tim Berners-
Lee o HTML ganhou popularidade quando o Mosaic - browser desenvolvido
por Marc Andreessen na dcada de 1990 - ganhou fora. A partir da,
desenvolvedores e fabricantes de browsers utilizaram o HTML como base,
compartilhando as mesmas convenes e seus conceitos.
O comeo e a interoperabilidade
Entre 1993 e 1995, o HTML ganhou as verses HTML+, HTML2.0 e HTML3.0,
onde foram propostas diversas mudanas para enriquecer as possibilidades da
linguagem. At aqui o HTML ainda no era tratado como um padro. Apenas
em 1997, o grupo de trabalho do W3C responsvel por manter o padro do
cdigo, trabalhou na verso 3.2 da linguagem, fazendo com que ela fosse tratada
como prtica comum. Voc pode ver: http://bit.ly/ol3an1.
Desde o comeo o HTML foi criado para ser uma linguagem independente de
plataformas, browsers e outros meios de acesso. Interoperabilidade signifcava
menos custo. Voc cria apenas um cdigo e este cdigo pode ser lido por
diversos meios, ao invs de verses diferentes para diversos dispositivos. Dessa
forma, evitou-se que a Web fosse desenvolvida em uma base proprietria,
27
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
com formatos incompatveis e limitada.
Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada,
fazendo com que a informao publicada por meio deste cdigo fosse acessvel
por dispositivos e outros meios com caractersticas diferentes, no importando
o tamanho da tela, resoluo, variao de cor. Dispositivos prprios para
defcientes visuais e auditivos ou dispositivos mveis e portteis. O HTML
deve ser entendido universalmente, dando a possibilidade para a reutilizao
dessa informao de acordo com as limitaes de cada meio de acesso.
MARCAO
Ao ler um livro ou uma revista, voc consegue distinguir ttulos de pargrafos
porque voc um ser humano. Voc sabe que os ttulos tem letras maiores,
poucas palavras etc... J o pargrafo tem um nmero maior de palavras e a sua
letra menor. Essa distino clara e muito bvia visualmente.
A web no apenas acessada por seres humanos. A informao publicada
totalmente reutilizada pelos meios de acesso. Os meios de acesso so qualquer
coisa que acesse a web e consuma seu contedo. Pode ser os sistemas de busca,
seu browser, um leitor de tela, seu smartphone, ou qualquer outro sistema
ou dispositivo utilizado pelos usurios ou robs. Estes meios de acesso no
conseguem distinguir visualmente os elementos exibidos na tela. por isso
que o HTML baseado em marcao.
Ns marcamos a informao, dando signifcado a estes objetos, tornando-os
legveis para os meios de acesso. Assim, quando marcamos um ttulo com h1,
h2 ou h3, indicamos para os meios de acesso que determinado bloco de texto
um ttulo, com uma determinada importncia e assim por diante com os
outros elementos.
Dessa forma cada meio de acesso pode decidir o que fazer com esta informao.
O browser, por exemplo, carrega a informao na tela do usurio. J o rob do
HTML5 e CSS3 com Farinha e Pimenta
28
Google guarda a informao e a utiliza em suas buscas. Cada meio de acesso
tem sua funo, logo, utiliza a informao de maneiras diferentes.
Da vem a importncia da semntica no cdigo HTML. Se voc marca um
ttulo com um elemento que no da famlia de ttulos, os meios de acesso
trataro essa informao de maneira errada. No importa se voc formate
esse elemento de maneira que ele se parea com um ttulo visualmente. O que
importa mesmo o que est escrito no cdigo.
O INCIO DO HTML5
WHAT WORKING GROUP
Enquanto o W3C focava suas atenes para a criao da segunda verso
do XHTML, um grupo chamado Web Hypertext Application Technology
Working Group ou WHATWG trabalhava em uma verso do HTML que
trazia mais fexibilidade para a produo de websites e sistemas baseados na
web.
O WHATWG1 foi fundado por desenvolvedores de empresas como
Mozilla, Apple e Opera em 2004. Eles no estavam felizes com o caminho
que a Web tomava e nem com o rumo dado ao XHTML. Por isso, estas
organizaes se juntaram para escrever o que seria chamado hoje de HTML5.
Entre outros assuntos o WHATWG se focava em um padro chamado Web
Forms 2.0, que se propunha a modifcar os formulrios do HTML, ele foi
includo no HTML5 e o Web Controls 1.0 que foi abandonado por enquanto.
Por volta de 2006, o trabalho do WHATWG passou a ser conhecido pelo mundo
e principalmente pelo W3C - que at ento trabalhavam separadamente - que
reconheceu todo o trabalho do grupo. Em Outubro de 2006, Tim Berners-
Lee anunciou que trabalharia juntamente com o WHATWG na produo do
29
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
HTML5 em detrimento do XHTML 2. Mesmo assim o XHTML seria mantido
paralelamente de acordo com as mudanas causadas no HTML. O grupo que
estava cuidando especifcamente do XHTML 2 foi descontinuado em 2009.
A participao no grupo que decide estes padres livre e voc pode se
inscrever na lista de email2 para contribuir. Sugiro fortemente que voc faa
isso. Voc estar bebendo direto da fonte e poder contribuir diretamente
para a criao de uma Web mais livre e fexvel.
HTML5 E SUAS MUDANAS
Quando o HTML4 foi lanado, o W3C alertou os desenvolvedores sobre
algumas boas prticas que deveriam ser seguidas ao produzir cdigos client-
side. Desde este tempo, assuntos como a separao da estrutura do cdigo com
a formatao e princpios de acessibilidade foram trazidos para discusses e
ateno dos fabricantes e desenvolvedores.
O HTML4 ainda no trazia diferencial real para a semntica do cdigo. o
HTML4 tambm no facilitava a manipulao dos elementos via Javascript ou
CSS. Se voc quisesse criar um sistema com a possibilidade de Dragn Drop
de elementos, por exemplo, era necessrio criar um grande script, com bugs e
que muitas vezes no funcionavam de acordo em todos os browsers.
O que o HTML5?
O HTML5 a nova verso do HTML4. Enquanto o WHATWG defne as
regras de marcao que usaremos no HTML5 e no XHTML, eles tambm
defnem APIs que formaro a base da arquitetura web.
Um dos principais objetivos do HTML5 facilitar a manipulao do elemento
possibilitando o desenvolvedor a modifcar as caractersticas dos objetos de
forma no intrusiva e de maneira que seja transparente para o usurio fnal.
Ao contrrio das verses anteriores, o HTML5 fornece ferramentas para a CSS
HTML5 e CSS3 com Farinha e Pimenta
30
e o Javascript fazerem seu trabalho da melhor maneira possvel. O HTML5
permite por meio de suas APIs a manipulao das caractersticas destes
elementos, de forma que o website ou a aplicao continue leve e funcional,
sem a necessidade de criaes de grandes blocos de scripts.
O HTML5 tambm cria novas tags e modifca a funo de outras. As verses
antigas do HTML no continham um padro universal para a criao de
sees comuns e especfcas como rodap, cabealho, sidebar, menus e etc.
No havia um padro de nomenclatura de IDs, Classes ou tags. No havia um
mtodo de capturar de maneira automtica as informaes localizadas nos
rodaps dos websites.
H outros elementos e atributos que sua funo e signifcado foram
modifcados e que agora podem ser reutilizados de forma mais efcaz. Por
exemplo, tags como B e I que foram descontinuados em verses anteriores do
HTML agora assumem funes diferentes e entregam mais signifcado para
os usurios.
O HTML5 modifca a forma de como escrevemos cdigo e organizamos
a informao na pgina. Seria mais semntica com menos cdigo. Seria
mais interatividade sem a necessidade de instalao de plugins e perda de
performance. a criao de cdigo interopervel, pronto para futuros
dispositivos e que facilita a reutilizao da informao de diversas formas.
O WHATWG tem mantido o foco para manter a retrocompatibilidade.
Nenhum site precisar ser refeito totalmente para se adequar aos novos
conceitos e regras. O HTML5 est sendo criado para que seja compatvel
com os browsers recentes, possibilitando a utilizao das novas caractersticas
imediatamente. A regra primordial entre os desenvolvedores web Dont Break
Te Web seguida risca.
O desenvolvimento modular
Antigamente, para que uma nova verso do HTML ou do CSS fosse lanada,
todas as ideias listadas na especifcao deveriam ser testadas e desenvolvidas
para ento serem publicadas para o suporte dos browsers e o uso dos
31
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
desenvolvedores. Era feito um lanamento nico para a linguagem inteira.
Esse mtodo foi mudado com o lanamento do HTML5 e o CSS3. A partir
de agora, as duas tecnologias foram divididas em mdulos. Isso quer dizer
que a comunidade de desenvolvedores e os fabricantes de browsers no
precisam esperar que todo o padro seja escrito e publicado para utilizarem
as novidades das linguagens.
As propriedades do CSS3, por exemplo, foram divididas em pequenos
grupos. H um grupo cuidando da propriedade Background, outro da
propriedade Border, outro das propriedades de Texto etc. Cada um destes
grupos so independentes e podem lanar suas novidades a qualquer
momento. Logo, o desenvolvimento fcou mais dinmico, com novidades
mais constantes.
A desvantagem desta constncia que problemas de compatibilidade
podem ocorrer com mais frequencia. Por exemplo, um browser pode adotar
bordas arredondadas e outro no. Ou um browser pode escolher suportar
um API diferente do API que o concorrente implementou. Sendo assim, os
browsers tem mostrado grande interesse em se manterem atualizados em
relao aos seus concorrentes. A Guerra dos Browsers est ainda presente
no desenvolvimento web, e isso bom. No uma guerra predatria, onde
um browser tenta minar o mercado do outro, mas uma guerra competitiva,
saudvel para o mercado.
ESTRUTURA BSICA, DOCTYPE E CHARSETS
A estrutura bsica do HTML5 continua sendo praticamente a mesma das
verses anteriores, mas com menos cdigo. Segue abaixo como a estrutura
bsica pode ser seguida:
<!DOCTYPE html>
<html lang=pt-br>
<head>
HTML5 e CSS3 com Farinha e Pimenta
32
<meta charset=UTF-8>
<title></title>
</head>
<body>
Corpo do site.
</body>
</html>
O Doctype
O Doctype deve ser sempre a primeira linha de cdigo do documento antes da
tag HTML.
<!DOCTYPE html>
O Doctype indica para o navegador e para outros meios qual a especifcao
de cdigo utilizar. Isso determina a forma com que o meio de acesso ir
renderizar o cdigo lido. Em verses anteriores, era necessrio referenciar o
DTD diretamente no cdigo do Doctype. Com o HTML5, a referncia por
qual DTD utilizar responsabilidade do Browser.
O Doctype no uma tag do HTML, mas uma instruo para que o browser
tenha informaes sobre qual verso de cdigo a marcao foi escrita.
O elemento HTML
O cdigo HTML uma srie de elementos em rvore onde alguns elementos
so flhos de outros e assim por diante (DOM, lembra?). O elemento principal
dessa grande rvore sempre a tag HTML.
<html lang=pt-br>
O atributo LANG necessrio para que os user-agents saibam qual a
linguagem principal do documento.
Lembre-se que o atributo LANG no um novo atributo. Ele j existe desde
33
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
muito tempo e no restrito ao elemento HTML, sendo possvel ser utilizado
em qualquer outro elemento para indicar o idioma do texto representado. O
que muito bom para leitores de tela.
Para encontrar a listagem de cdigos das linguagens, acesse:
http://www.w3.org/International/questions/qa-choosing-language-tags.
HEAD
A Tag HEAD onde fca toda a parte inteligente da pgina. No HEAD fcam
os metadados. Metadados so informaes sobre a pgina e o contedo
ali publicado.
Metatag Charset
No nosso exemplo h uma metatag responsvel por chavear qual tabela de
caractres a pgina est utilizando. Nas verses anteriores ao HTML5, essa tag
era escrita da forma abaixo:
<meta http-equiv=Content-Type content=text/html;
charset=utf-8>
O novo cdigo para o HTML5 resumiu bastante as coisas, retirando todo o
cdigo intil para ns, deixando a linha acima assim:
<meta charset=utf-8>
A Web acessada por pessoas do mundo inteiro. Ter um sistema ou um
site que limite o acesso de pessoas de outros pases algo que vai contra a
tradio e os ideais da internet. Por isso, foi criado uma tabela que suprisse
as necessidades impostas pelas linguagens do mundo todo, essa tabela
chama-se Unicode.
A tabela Unicode suporta algo em torno de um milho de caracteres. Ao
invs de cada regio ter sua tabela de caracteres, muito mais sensato
existir uma tabela padro com o maior nmero de caracteres possvel,
HTML5 e CSS3 com Farinha e Pimenta
34
dando a possibilidade de guardarmos todos as letras e smbolos utilizados
nos idiomas do mundo. O que o Unicode faz fornecer um nico nme-
ro para cada caractre, no importa a plataforma, nem o programa, nem
a lngua.
Atualmente a maioria dos sistemas e browsers utilizados por usurios
suportam plenamente Unicode. Por isso, fazendo seu sistema Unicode voc
garante que ele ser bem visualizado aqui, na China ou em qualquer outro
lugar do mundo.
Tag LINK
H dois tipos de links no HTML: a tag A, que a abreviao de ANCHOR,
que so elementos que levam o usurio para outros documentos o famoso
Hiperlink. E h a tag LINK, que uma tag para importar objetos externos que
sero usados no documento, como arquivos de CSS, RSS, etc. Por isso no se
confunda.
No nosso exemplo h uma tag LINK que importa o CSS para nossa pgina:
<link rel=stylesheet type=text/css href=estilo.
css>
O atributo rel=stylesheet indica que aquele link relativo a importao de
um arquivo referente a folhas de estilo.
H outros valores para o atributo REL, como por exemplo o ALTERNATE:
<link rel=alternate type=application/atom+xml
title=feed href=/feed/>
Neste caso, indicamos aos user-agents que o contedo do site poder ser
encontrado em um caminho alternativo via Atom FEED.
No HTML5 h outros links relativos que voc pode inserir como o
rel=archives que indica uma referncia a uma coleo de material histrico
35
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
da pgina. Por exemplo, a pgina de histrico de um blog pode ser referenciada
nesta tag.
MODELOS DE CONTEDO
H pequenas regras bsicas que ns j conhecemos e que esto no HTML
desde o incio. Estas regras defnem onde os elementos podem ou no
estar. Se eles podem ser flhos ou pais de outros elementos e quais os seus
comportamentos. Essas regras so chamadas de Modelos de Contedo.
Dentre todas as categorias de modelos de contedo, existem dois tipos de
elementos: elementos de linha e os elementos de bloco. Os elementos de linha
marcam, na maioria das vezes, textos, elementos de formulrios, imagens.
Alguns exemplos: a, strong, em, img, input, abbr, span. J os elementos de
blocos so como caixas, que dividem o contedo em sees do layout.
Abaixo segue algumas premissas que voc precisa relembrar e conhecer:
Os elementos de linha podem conter outros elementos de linha,
dependendo da categoria que ele se encontra. Por exemplo: o elemento A
no pode conter o elemento LABEL. Mas o inverso possvel.
Os elementos de linha nunca podem conter elementos de bloco.
Elementos de bloco sempre podem conter elementos de linha.
Elementos de bloco podem conter elementos de bloco, dependendo
da categoria que ele se encontra. Por exemplo, um pargrafo no pode
conter um DIV. Mas o inverso possvel.
Estes dois grandes grupos podem ser divididos em categorias. Estas categorias
dizem qual modelo de contedo o elemento se encaixa e como pode ser
seu comportamento.
Os navegadores utilizam muito estas regras para defnir o fuxo de informao
e quais as suas utilizaes. Alguns browsers podem ajudar o desenvolvedor
tentando consertar algum erro de sintaxe. Outros simplesmente quebram o
layout ou a aplicao no local que o erro de sintaxe acontece. Tome cuidado
HTML5 e CSS3 com Farinha e Pimenta
36
com essas diferenas de comportamento. interessante entender exatamente
como cada browser se comporta nestas situaes.
CATEGORIAS
Cada elemento no HTML pode ou no fazer parte de um grupo de elementos
com caractersticas similares. As categorias esto a seguir. Manteremos os
nomes das categorias em ingls para que haja um melhor entendimento:
Metadata content
Flow content
Sectioning content
Heading content
Phrasing content
Embedded content
Interactive content
Metadata content
Os elementos que compe a categoria Metadata so:
base command link meta noscript
script style title
Este contedo vem antes da apresentao, formando uma relao com
o documento e seu contedo com outros documentos que distribuem
informao por outros meios.
Flow content
A maioria dos elementos utilizados no body e aplicaes so categorizados
como Flow Content. So eles:
a abbr address area article
37
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
aside audio b bdo blockquote
br button canvas cite code
command datalist del details dfn
div dl em embed feldset
fgure footer form h1 at h6 header
hgroup hr i iframe img
input ins kbd keygen label
link map mark math menu
meta meter nav noscript object
ol output p pre progress
q ruby samp script section
select small span strong style
sub sup svg table textarea
time ul var video wbr
text
Por via de regra, elementos que seu modelo de contedo permitem inserir
qualquer elemento que se encaixa no Flow Content, devem ter pelo menos
um descendente de texto ou um elemento descendente que faa parte da
categoria embedded.
Sectioning content
Estes elementos defnem sees principais no cdigo. Como por exemplo
rodaps, cabealhos, rea do texto principal, listas de navegaes etc.
header footer article aside nav section
Aqui onde o HTML5 inseriu mais tags novas. Estas novas tags vieram para
melhorar a semntica dos elementos estruturais do cdigo. Antes era quase
impossvel identifcar de maneira automtica o que era um rodap ou um
HTML5 e CSS3 com Farinha e Pimenta
38
header de pgina. Era difclimo localizar o bloco com o texto principal de
uma pgina. Com estas tags esse trabalho fcou mais simples.
Heading content
Os elementos da categoria Heading defnem uma seo de cabealhos, que
podem estar contidos em um elemento na categoria Sectioning.
h1 at h6 hgroup header
Phrasing content
Fazem parte desta categoria elementos que marcam o texto do documento,
bem como os elementos que marcam este texto dentro do elemento de
pargrafo.
a abbr area audio b
bdo br button canvas vite
code command datalist del dfn
em embed i iframe img
input ins kbd keygen label
link map mark math meta
meter noscript object output progress
q ruby samp script sup
select small span strong sub
svn textarea time var video
textarea time var video wbr
Text
Embedded content
Na categoria Embedded, h elementos que importam outra fonte de
informao para o documento.
39
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
audio canvas embed iframe img
math objevt svg video
Interactive content
Interactive Content so elementos que fazem parte da interao de usurio.
a audio button details embed
iframe img input keygen label
menu object select textarea video
Alguns elementos no HTML podem ser ativados por um comportamento. Isso
signifca que o usurio pode ativ-lo de alguma forma. O incio da sequencia
de eventos depende do mecanismo de ativao e normalmente culminam em
um evento de click seguido pelo evento DOMActivate.
O user-agent permite que o usurio ative manualmente o elemento que tem
este comportamento utilizando um teclado, mouse, comando de voz etc.
NOVOS ELEMENTOS E ATRIBUTOS
O cdigo HTML indica que tipo de informao a pgina est exibindo.
Quando lemos um livro, conseguimos entender e diferenciar um ttulo de
um pargrafo. Basta percebermos a quantidade de letras, tamanho da fonte,
cor etc. No cdigo isso diferente. Robs de busca e outros user-agents
no conseguem diferenciar tais detalhes. Por isso, cabe ao desenvolvedor
marcar a informao para que elas possam ser diferenciadas e rederizadas
por diversos dispositivos.
Com as verses anteriores do HTML ns conseguimos marcar diversos
elementos do layout, estruturando a pgina de forma que as informaes
fcassem em suas reas especfcas. Conseguamos diferenciar por exemplo,
HTML5 e CSS3 com Farinha e Pimenta
40
um pargrafo de um ttulo. Mas no conseguamos diferenciar o rodap
do cabealho. Essa diferenciao era apenas percebida visualmente com o
layout pronto. Tambm no havia maneira de detectar automaticamente estes
elementos j que as tags utilizada para ambos poderiam ser iguais e no havia
padro para nomenclatura de IDs e Classes.
O HTML5 criou uma srie de elementos que nos ajudam a defnir os setores
principais no documento. Com a ajuda destes elementos, podemos por
exemplo diferenciar diretamente pelo cdigo HTML5 reas importantes
do site como sidebar, rodap e cabealho. Conseguimos seccionar a rea de
contedo indicando onde exatamente est o texto do artigo.
Estas mudanas simplifcam o trabalho de sistemas como os dos buscadores.
Com o HTML5 os buscadores conseguem vasculhar o cdigo de maneira
mais efcaz. Procurando e guardando informaes mais exatas e levando
menos tempo para estocar essa informao.
ELEMENTOS DE SEO
Voc deve conhecer o elemento DIV. O DIV tem a funo de criar divises.
Quando criamos um website, dividimos as reas do layout em sees. O
problema do DIV, que ele no tem nenhum signifcado semntico. Os
sistemas de busca, por exemplo, no tem como saber o que um rodap,
um cabealho, sidebar e etc, porque tudo feito com DIVs e assim damos o
mesmo nvel hierrquico de informao para todas as sees.
Para resolver esse problema, foi criado um conjunto novo de elementos que
alm de dividir as reas do layout, ele entrega signifcado. Esses elementos so
chamados de Contedos de Sees ou Sectioning content.
Esse conjunto de tags tem a funo de dividir as reas do layout como fazamos
com os DIVs, mas cada uma delas carrega um signifcado especfco. Entenda
agora com mais detalhes o que cada um destes elementos signifca.
41
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
O elemento SECTION
A tag section defne uma nova seo genrica no documento. Por exemplo,
a home de um website pode ser dividida em diversas sees: introduo,
destaque, novidades, informao de contato e chamadas para contedo
interno.
Basicamente o elemento section substitui o div em muitos momentos. A
imagem seguinte foi retirada do site Globo.com.
Cada uma das colunas dos assuntos Notcias, Esportes e Entretenimento
defnido e marcado por um elemento section em vez de utilizarmos divs
como era de costume.
Isso permite os sistemas de buscas ou outras aplicaes saibam que cada
um daqueles blocos trata-se de um assunto diferente. Meu desejo que
futuramente seja possvel indicar qual tipo de assunto abordado em cada
HTML5 e CSS3 com Farinha e Pimenta
42
um destes elementos.
Entenda que o section apenas divide estes assuntos. No como o header,
footer, aside, nav e article que dividem informaes especfcas, como
veremos a seguir. O section um elemento mais especfco que o div, mas no
mais especfco que estes elementos. Entenda que todos os outros objetos que
veremos tambm so chamados de sections, mas cada um deles responsvel
por uma parte da pgina: o header pelos cabealhos, o nav pelas listas de
navegaes e assim por diante. O section muitas vezes envolver todos estes
elementos, separando-os como um assunto.
O elemento NAV
O elemento nav representa uma seo da pgina que contm links para outras
partes do website. Nem todos os grupos de links devem ser elementos nav,
apenas aqueles grupos que contm links importantes. Aqueles links que so
considerados principais, por exemplo o menu principal do site. No caso dos
portais, aquele menu lateral com uma srie de links separados por assuntos
poderiam ser uma nav. Isso tambm pode ser aplicado para aqueles blocos de
links que geralmente so colocados no rodap.
Imagine uma sidebar com uma srie de links, como por exemplo a sidebar de
um portal de contedo como o G1, R7, UOL e etc Nestes portais normal
voc encontrar diversos links para as categorias de assuntos. Anteriormente,
se quisssemos agrupar por exemplo um Ttulo e uma lista de links faramos
assim:
<div class=categ categ-esporte>
<h3>Esporte</h3>
<ul>
<li><a href=#>Copa 2014</a></li>
<li><a href=#>Brasileiro</a></li>
<li><a href=#>Frmula 1</a></li>
<li><a href=#>Baskete</a></li>
</ul>
</div>
43
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
Este cdigo resolvia nosso problema de formatao. Poderamos utilizar o div
que envolve o ttulo e a lista para fazer algum detalhe visual e principalmente
para agruparmos o contedo relacionado que existia. Mas a nvel de
informao no havia nenhuma indicao de que o ttulo estivesse ligado ao
contedo. No h nenhuma referncia de que o ttulo ESPORTE apresenta
a lista de links abaixo dele. Visualmente essa relao muito forte porque o
designer desenhou o layout para que isso acontecesse, mas a nvel de cdigo
ns no tnhamos como indicar essa relao de informaes. Poderamos
fazer apenas para que o cdigo fcasse organizado, mas para os leitores de
tela ou sistemas de busca essa relao simplesmente no existia. Os sistemas
de busca no podem se basear apenas na posio dos elementos, algo muito
genrico para eles confrmarem que a lista e o ttulo que a precede esto
ligados em um mesmo assunto.
Com o HTML5, isso muda. Veja o cdigo abaixo:
<nav>
<h3>Esporte</h3>
<ul>
<li><a href=#>Copa 2014</a></li>
<li><a href=#>Brasileiro</a></li>
<li><a href=#>Frmula 1</a></li>
<li><a href=#>Baskete</a></li>
</ul>
</nav>
Com a tag nav, h uma indicao de que aquele grupo uma seo (nav um
tipo de section. Enquanto a tag section serve para indicar sees no site, a tag
nav indica que um determinado grupo uma seo de navegao) um bloco
de navegao.
Dentro da nav voc pode agrupar uma srie de listas de links:
<nav>
<h3>Esportes</h3>
<ul>
<li><a href=#>Copa 2014</a></li>
<li><a href=#>Brasileiro</a></li>
HTML5 e CSS3 com Farinha e Pimenta
44
<li><a href=#>Frmula 1</a></li>
<li><a href=#>Baskete</a></li>
</ul>

<h3>Educao</h3>
<ul>
<li><a href=#>Educao</a></li>
<li><a href=#>Dicionrios</a></li>
<li><a href=#>Vestibular</a></li>
</ul>

<h3>Notcias</h3>
<ul>
<li><a href=#>Cotidiano</a></li>
<li><a href=#>Poltica</a></li>
<li><a href=#>Jornais</a></li>
</ul>
</nav>
A tag nav tambm pode estar em todos os elementos do HTML. Voc pode
coloc-la no header para defnir menus, no footer para defnir grupos de
links, sidebars, articles e etc.
Com um bloco de navegao defnido, a acessibilidade da pgina pode ser
explorada. Os leitores de tela, sistemas de busca ou qualquer outro sistema
interessado, podem localizar facilmente os links importantes e internos da
pgina por meio da tag nav.
Entenda que o nav no carrega qualquer tipo de links. Tenha em mente
em sempre que usar o nav, ele ir carregar grupos de links ligados ao site.
Normalmente estes links so links internos, e por conta disso, o ranqueamento
e a indexao feita pelos buscadores pode ser melhorada.
O elemento Article
45
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
A especifcao diz:
Te article element represents a component of a page that consists of a self-
contained composition in a document, page, application, or site and that is
intended to be independently distributable or reusable, e.g. in syndication. Tis could
be a forum post, a magazine or newspaper article, a blog entry, a user-submitted
comment, an interactive widget or gadget, or any other independent item of content.
O elemento article onde colocamos o texto ou a informao principal.
Imagine que voc est visitando um blog, h uma sidebar e h tambm o
bloco de texto, que seria o bloco que carrega o contedo principal do site.
Este bloco seria marcado como article. Dentro deste article haver toda a
informao necessria sobre o artigo: data de publicao, ttulo, autor, o texto,
informaes de outros artigos relacionados etc.
Para entender melhor, a informao que vai dentro do article exatamente a
mesma informao que os leitores de feeds capturam do seu RSS/Atom. O
leitor de FEED no disponibiliza o menu do site, a sidebar e etc, ele apenas
disponibiliza o texto principal do post, e ser esse texto que haver no
elemento article.
Um exemplo de cdigo:
<article>
<header>
<h1>Ttulo do post</h1>
<time datetime=12-03-1983 pubdate=pubdate>03 de
Dezembro de 1983</time>
<p>Texto de introduo.</p>
</header>

<h2>Um outro ttulo</h2>
<p>Texto do post.</p>
<p>Texto do post.</p>
<p>Texto do post.</p>
</article>
Alguns podem confundir os elementos de article, section e div. Entenda que
HTML5 e CSS3 com Farinha e Pimenta
46
o article um elemento mais especfco que o section e o div. O article marca
o texto principal do site. o fl da pgina. O section apenas um bloco de
separao de assuntos diferentes. O div, o mais genrico de todos, apenas
aplicado para separar elementos em blocos, por isso ele no carrega nenhum
signifcado semntico.
Sendo mais especfco: Para marcar informaes e contedos que fazem
sentido se forem vistos de fora do site, como em leitores de RSS, utilize o
article. Ou seja, o que voc mostra no Feed? Menu, rodap, header, sidebar
ou somente o bloco de texto do artigo? Pois isto que voc marcar com a
tag article.
Para separar e organizar contedos de diversos assuntos em blocos diferentes,
utilize o section.
Para utilizao no semntica, para formatao com CSS e detalhes genricos,
utilize o div.
O elemento ASIDE
O elemento aside representa um bloco de informao relativa ao contedo principal.
Algumas utilidades do aside: citaes ou sidebars, agrupamento de
publicidade, grupos e blocos de navegao ou para qualquer outro contedo
que tenha importncia secundria e relativa ao contedo principal da pgina.
Dentro do aside voc pode agregar por exemplo grupos de elementos nav,
headers, sections e etc, permitindo produzir um menu lateral com os grupos
de informaes:
<aside id=menulateral>
<nav>
<h3>Esportes</h3>
<ul>
<li><a href=#>Frmula 1</a></li>
<li><a href=#>Futebol</a></li>
47
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
<li><a href=#>Baskete</a></li>
<li><a href=#>Voley</a></li>
</ul>
</nav>

<nav>
<h3>Poltica</h3>
<ul>
<li><a href=#>Eleies 2010</a></li>
<li><a href=#>Urna eletrnica</a></li>
<li><a href=#>Candidatos</a></li>
</ul>
</nav>
</aside>
Note que no utilizamos nenhum div, pelo contrrio, utilizamos apenas
tags que trazem signifcado semntico. Neste exemplo, indicamos - para o
navegador ou aplicao, sistema de busca ou qualquer outra coisa que acessar
nosso cdigo - que aquele bloco lateral, e que cada grupo de nav referente
a um assunto.
O elemento aside tambm pode estar dentro de um elemento article, como
uma caixa de notao ou algo do gnero. Nesse caso, quando o usurio
imprimir, voc pode dar nfase como se fosse uma caixa de informao.
Como feito em livros ou revistas.
ATRIBUTOS
Alguns elementos ganharam novos atributos:
O atributo autofocus pode ser especifcado nos elementos input (exceto
quando h atributo hidden atribudo), textarea, select e button.
A tag a passa a suportar o atributo media como a tag link.
A tag form ganha um atributo chamado novalidate. Quando aplicado o
formulrio pode ser enviado sem validao de dados.
O elemento ol ganhou um atributo chamado reversed. Quando ele
HTML5 e CSS3 com Farinha e Pimenta
48
aplicado os indicadores da lista so colocados na ordem inversa, isto ,
da forma descendente.
O elemento feldset agora permite o atributo disabled. Quando aplicado,
todos os flhos de feldset so desativados.
O novo atributo placeholder pode ser colocado em inputs e textareas.
O elemento area agora suporta os atributos href, lang e rel como os
elementos a e link
O elemento base agora suporta o atributo target assim como o elemento
a. O atributo target tambm no est mais descontinuado nos elementos
a e area porque so teis para aplicaes web.
Os atributos abaixo foram descontinuados:
O atributo border utilizado na tag img.
O atributo language na tag script.
O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez
de name.
O atributo summary na tag table.
Este atributos foram descontinuados porque modifcam a formatao do
elemento e suas funes so melhores controladas pelo CSS:
align como atributo da tag caption, iframe, img, input, object, legend,
table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th,
thead e tr.
alink, link, text e vlink como atributos da tag body.
background como atributo da tag body.
bgcolor como atributo da tag table, tr, td, th e body.
border como atributo da tag table e object.
cellpadding e cellspacing como atributos da tag table.
char e charof como atributos da tag col, colgroup, tbody, td, tfoot, th,
thead e tr.
clear como atributo da tag br.
compact como atributo da tag dl, menu, ol e ul.
49
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
frame como atributo da tag table.
frameborder como atributo da tag iframe.
height como atributo da tag td e th.
hspace e vspace como atributos da tag img e object.
marginheight e marginwidth como atributos da tag iframe.
noshade como atributo da tag hr.
nowrap como atributo da tag td e th.
rules como atributo da tag table.
scrolling como atributo da tag iframe.
size como atributo da tag hr.
type como atributo da tag li, ol e ul.
valign como atributo da tag col, colgroup, tbody, td, tfoot, th, thead e tr.
width como atributo da tag hr, table, td, th, col, colgroup e pre.
Alguns atributos do HTML4 no so mais permitidos no HTML5. Se eles
tiverem algum impacto negativo na compatibilidade de algum user-agent eles
sero discutidos.
rev e charset como atributos da tag link e a.
shape e coords como atributos da tag a.
longdesc como atributo da tag img and iframe.
target como atributo da tag link.
nohref como atributo da tag area.
profle como atributo da tag head.
version como atributo da tag html.
name como atributo da tag img (use id instead).
scheme como atributo da tag meta.
archive, classid, codebase, codetype, declare e standby como atributos da
tag object.
valuetype e type como atributos da tag param.
axis e abbr como atributos da tag td e th.
scope como atributo da tag td.
O W3C mantm um documento atualizado neste link: http://bit.ly/r5S9SX.
HTML5 e CSS3 com Farinha e Pimenta
50
ELEMENTOS MODIFICADOS
OU AUSENTES
Existiam no HTML alguns elementos que traziam apenas caractersticas visuais
e no semnticas para o contedo da pgina. Esses elementos anteriormente
foram descontinuados porque atrapalhavam o cdigo e tambm porque sua
funo era facilmente suprida pelo CSS. Contudo, alguns destes elementos
voltaram tona com novos signifcados semnticos. Outros elementos que
no descontinuados, mas seus signifcados foram modifcados.
ELEMENTOS MODIFICADOS
O elemento B passa a ter o mesmo nvel semntico que um SPAN, mas
ainda mantm o estilo de negrito no texto. Contudo, ele no d nenhuma
importncia para o text marcado com ele.
O elemento I tambm passa a ser um SPAN. O texto continua sendo
itlico e para usurios de leitores de tela, a voz utilizada modifcada para
indicar nfase. Isso pode ser til para marcar frases em outros idiomas,
termos tcnicos e etc.
O interessante que nestes dois casos houve apenas uma mudana semntica.
Provavelmente voc no precisar modifcar cdigos onde estes dois
elementos so utilizados.
O elemento a sem o atributo href agora representa um placeholder no
exato lugar que este link se encontra.
O elemento address agora tratado como uma seo no documento.
O elemento hr agora tem o mesmo nvel que um pargrafo, mas
utilizado para quebrar linhas e fazer separaes.
O elemento strong ganhou mais importncia.
O elemento head no aceita mais elementos child como seu flho.
51
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
ELEMENTOS OU ATRIBUTOS DESCONTINUADOS
Os elementos abaixo foram descontinuados por que seus efeitos so apenas
visuais:
basefont big center font s
strike tt u
Os elementos abaixo foram descontinuados por que ferem os princpios de
acessibilide e usabilidade:
frame frameset noframes
Os elementos abaixo no foram includos na especifcao porque no
tiveram uso entre os desenvolvedores ou porque sua funo foi substituda
por outro elemento:
acronym
No foi includo porque criou um bocado de confuso entre os desenvolvedores
que preferiram utilizar a tag abbr. Acrnimos so abreviaes, mas so um
pouco diferentes. Acrnimos so abreviaes que formam siglas, por exemplo
N.A.S.A.
applet
Ficou obsoleto em favor da tag object.
isindex
Foi substitudo pelo uso de form controls.
dir
Ficou obsoleto em favor da tag ul.
HTML5 e CSS3 com Farinha e Pimenta
52
COMPATIBILIDADE DO HTML5
Atualmente o Webkit o motor mais compatvel com os Padres do HTML5.
Como a Apple tem interesse que seus dispositivos sejam ultracompatveis
com os Padres, ela tem feito um belo trabalho de atualizao e avano da
compatibilidade deste motor.
O Firefox e o Opera j esto compatveis com grande parte da especifcao
do HTML5 e CSS3 e a cada upgrade eles trazem mais novidades e atualizao
dos padres.
O que pode te preocupar de verdade a retrocompatibilidade com verses
antigas de browsers como o Internet Explorer. A Microsof est fazendo um
bom trabalho com o IE9, mas as verses 8 e 7 no tem quase nenhum suporte
ao HTML5, o que um problema srio para aplicaes web baseadas em
tecnologias mais recentes. A boa notcia que a partir de Janeiro de 2012 a
Microsof ativar o autoupdate dos sistemas WindowsXP e Windows Vista,
fazendo com que o IE6 seja atualizado automaticamente. Desenvolver para
IE8 e 9 muito melhor do que desenvolver para IE6 e 7. Aleluia!
Abaixo segue uma tabela simples de compatibilidade entre os browsers e
alguns mdulos do HTML5 at a escrita deste livro:
Mdulos Safari Chrome Opera Firefox IE8 IE9
Local Storage sim sim sim sim sim sim
Histrico de Sesso sim sim sim sim sim sim
Aplicaes Ofine sim sim no sim no no
Novos tipos de
campos
sim sim sim no no no
Form: Autofocus sim sim sim no no no
Form:
Autocomplete
no no sim no no no
53
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
Form: Required sim sim sim no no no
Video, Audio e
Canvas Text
sim sim sim sim no sim
TCNICAS DE DETECO
Pode ser que o usurio no utilize um browser que suporta HTML5. Neste
caso, voc pode redirecion-lo para uma verso do site mais simples, ou talvez
apenas mostrar uma mensagem alertando o usurio sobre a importncia da
atualizao do browser. Para isso temos algumas tcnicas de deteco para
conferir se o browser suporta ou no HTML5.
Quando o browser visita um website, ele constri uma coleo de objetos
que representam elementos HTML na pgina. Cada elemento no cdigo
representado no DOM como um objeto diferente. Todo objeto DOM tem
propriedades em comum, mas alguns objetos tem caractersticas especfcas.
Usaremos estes objetos para fazermos a deteco. Abaixo segue 4 meios que
voc poder utilizar para detectar o suporte do browser:
Verifque se uma determinada propriedade existe em objetos globais
como WINDOW ou NAVIGATOR. Nesse caso, verifcamos o suporte a
geolocalizao.
Crie um elemento e verifque se uma determinada propriedade existe
neste elemento.
Crie um elemento e verifque se um determinado mtodo existe neste
elemento, ento chame o mtodo e verifque se o valor retorna. Por
exemplo, teste quais formatos de vdeo so suportados.
Crie um elemento e defna um atributo com um determinado valor,
ento verifque se o atributo suporta este valor. Por exemplo, crie um
input e verifque quais types so suportados.
HTML5 e CSS3 com Farinha e Pimenta
54
UTILIZANDO A BIBLIOTECA MODERNIZR
Alguns browsers no aceitam as novas features de CSS3 e HTML5. Saiba
como detect-los e trat-los com a biblioteca Modernizr.
Problemas de compatibilidade
Quando produzimos um site os problemas de compatibilidade fazem parte
da regra do jogo. Para tentar contornar estes problemas utilizamos hacks,
comentrios condicionais, snifng de browsers e outras coisas, que muitas
vezes mais prejudicam do que ajudam.
Para ajudar mais ainda o CSS3 e o HTML5 apareceram derrubando tudo, e
o problema de compatibilidade que j era chato, fcou mais chato que meia
molhada. Embora os browsers estejam muito mais atuais e suportando
propriedades avanadas de CSS3 e HTML5, no garantia que todos eles
suportem as mesmas propriedades. E aqui que comeamos a ter problemas
novamente, como no passado.
Como voc consegue reconhecer quem um determinado browser suporta
CSS Animation? Como voc sabe que o browser conhece LocalStorage do
HTML5? Voc no vai fcar olhando numa tabelinha toda vez que tiver essas
dvidas para fazer um visual ou uma soluo alternativa para tais browsers.
por essas e outras que voc utilizar a Modernizr.
O que a Modernizr
Modernizr uma pequena biblioteca Javascript que detecta a disponibilidade
das novas caractersticas do HTML5 e CSS3 nos browsers. Muitas destas
caractersticas j esto implementadas nos browsers, mas muito chato voc
decorar quais novidades os browsers j esto suportando. O que a Modernizr
faz simples: ela te diz quais features um determinado browser suporta e
insere classes no HTML para que voc possa utilizar para fazer uma verso
55
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
alternativa de visual ou soluo.
Entenda que a Modernizr no um snifng de browser. Ela diferente. A
Modernizr faz o trabalho de detectar das seguintes formas:
Ela testa 40 features de CSS3 e HTML5 em alguns milisegundos.
Depois ela cria objetos javascript que contm os resultados destes testes.
A so adicionadas classes no elemento HTML descrevendo exatamente
quais propriedades e novidades so ou no nativamente suportadas.
Depois disso voc consegue ter os resultados descritos nos navegadores
dinamicamente e ento pode tomar decises criando alternativas para
aquelas propriedades no suportadas pelos browsers antigos.
Como funciona
simples: primeiro voc baixa a verso mais atual da biblioteca no endereo
http://www.modernizr.com/. O interessante que voc tem a opo para
personalizar a biblioteca, indicando quais features voc quer que a Modernizr
teste no seu projeto.
Depois voc inclui esse pacote no seu HTML:

<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=utf-8>
<title>Teste de Modernizr</title>
<script src=modernizr-2.0.6.js></script>
</head>
<body>
</body>
</html>
Feito isso, insira uma classe no-js no elemento HTML:

<html class=no-js lang=pt-br>
HTML5 e CSS3 com Farinha e Pimenta
56
Quando a Modernizr rodar, ela ir substituir essa classe para uma js se o
browser estiver com o Javascript ligado, j te dando um feedback para tomar
alguma atitude se o usurio estiver com o Javascript desligado.
Junto com essa mudana so adicionadas outras classes, indicando o que
o browser aceita nativamente ou o que ele no aceita. Ficar algo parecido
com isso:

<html class= js fexbox canvas canvastext webgl
no-touch geolocation postmessage websqldatabase no-
indexeddb hashchange history draganddrop websockets rgba
hsla multiplebgs backgroundsize borderimage borderradius
boxshadow textshadow opacity cssanimations csscolumns
cssgradients cssrefections csstransforms csstransforms3d
csstransitions fontface generatedcontent video audio
localstorage sessionstorage webworkers applicationcache
svg inlinesvg smil svgclippaths lang=pt-br>
O browser que eu utilizei o Safari/Mac. Pelo visto ele aceita bastante coisa. ;-)
O que o browser no aceita, a Modernizr insere uma classe com o prefxo no-
antes da classe, por exemplo: no-boxshadow, no-geolocation, no-touch etc.
A Modernizr tambm cria um objeto Javascript contendo um valor booleano
para cada uma dessas features, possibilitando a criao de testes. Um exemplo:

if (Modernizr.geolocation) {
alert(Aceita)
} else {
alert(No Aceita)
}
Exemplos de utilidade
Exemplo bem bsico: imagine que voc queira utilizar o box-shadow em seu
projeto. Browsers como o IE6,7,8 no reconhecem essa feature, ento seria
interessante darmos uma alternativa, como por exemplo, colocando uma borda
em vez de sombra. Assim o elemento no fca to diferente do que deveria.
Como a Modernizr colocou uma classe no elemento HTML referente a
57
HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side
aceitao das features, podemos utiliz-la fazendo assim:

.loginBox {
box-shadow:0 10px 10px rgba(0, 0, 0, 0.3);
}
.no-boxshadow .loginBox {
border: 1px solid #CCC;
border-bottom: 3px solid #CCC;
}
Assim, se o browser no aceitar a propriedade box-shadow o usurio ver
uma borda no lugar. Voc pode fazer isso com praticamente qualquer nova
feature do CSS3 e do HTML5.
Ah, mais uma coisa: provavelmente voc j utiliza um scriptzinho html5.js
para fazer com o que os Internet Explorers reconheam as tags do HTML5,
correto? O Modernizr j faz isso automaticamente. Sugiro que pare de utilizar
o html5.js e passe a utilizar a Modernizr somente.
A Modernizr facilita demais as coisas. A ideia que voc no prive seus
projetos da utilizao de features novas. A produo vai fcar mais efcaz e seu
projeto sempre estar atualizado com as melhores prticas do mercado. Adote
a Modernizr e seja feliz.
FORMULRIOS E
MULTIMDIA
4
NOVOS TIPOS DE CAMPOS
Quando o grupo WHATWG resolveu reescrever o HTML, eles decidiram
comear pelos formulrios. Se voc perceber, estamos escrevendo
formulrios da mesma maneira desde o incio de tudo. Nunca houve uma
atualizao sensata e interessante que modifcasse a forma com que usvamos
e submetiamos informaes via formulrios.
Foi a que o grupo decidiu criar alguns novos tipos de formulrios, facilitando
a usabilidade do usurio e facilitando a vida do desenvolvedor ao produzir
campos de formulrios.
O elemento input aceita os seguintes novos valores para o atributo type:
tel
Telefone. No h mscara de formatao ou validao, propositalmente, visto
no haver no mundo um padro bem defnido para nmeros de telefones.
claro que voc pode usar a nova API de validao de formulrios para
isso. Os agentes de usurio podem permitir a integrao com sua agenda de
contatos, o que particularmente til em telefones celulares.
search
Um campo de busca. A aparncia e comportamento do campo pode mudar
HTML5 e CSS3 com Farinha e Pimenta
60
ligeiramente dependendo do agente de usurio, para parecer com os demais
campos de busca do sistema.
email
E-mail, com formatao e validao. O agente de usurio pode inclusive
promover a integrao com sua agenda de contatos.
url
Um endereo web, tambm com formatao e validao.
DATAS E HORAS
datetime-local
O tipo de campo datetime-local trata automaticamente as diferenas de fusos
horrios, submetendo ao servidor e recebendo dele valores GMT. Com isso
voc pode, com facilidade, construir um sistema que ser usado em diferentes
fusos horrios e permitir que cada usurio lide com os valores em seu prprio
fuso horrio.
O campo de formulrio pode conter qualquer um desses valores no
atributo type:
datetime
date
month
week
time
datetime-local
Todos devem ser validados e formatados pelo agente de usurio, que pode
inclusive mostrar um calendrio, um seletor de horrio ou outro auxlio ao
preenchimento que estiver disponvel no sistema do usurio.
61
HTML5 e CSS3 com Farinha e Pimenta Formulrios e Multimdia
O atributo adicional step defne, para os validadores e auxlios ao preenchimento,
a diferena mnima entre dois horrios. O valor de step em segundos, e o
valor padro 60. Assim, se voc usar step=300 o usurio poder fornecer
como horrios 7:00, 7:05 e 7:10, mas no 7:02 ou 7:08.
number
Veja um exemplo do tipo number com seus atributos opcionais:
<!DOCTYPE html>
<html lang=en-US>
<head>
<meta charset=UTF-8>
<title>Number type</title>
</head>
<body>
<input name=valuex type=number value=12.4
step=0.2 min=0 max=20>
</body>
</html>
O Opera 10 nos d uma excelente visualizao do que um agente de usurio
pode fazer nesse caso:
HTML5 e CSS3 com Farinha e Pimenta
62
range
Vamos modifcar, no exemplo acima, apenas o valor de type, mudando de
number para range:
<!DOCTYPE html>
<html lang=en-US>
<head>
<meta charset=UTF-8>
<title>Range type</title>
</head>
<body>
<input name=valuex type=range
value=12.4 step=0.2
min=0 max=20>
</body>
</html>
Novamente, Opera 10:
63
HTML5 e CSS3 com Farinha e Pimenta Formulrios e Multimdia
color
O campo com type=color um seletor de cor. O agente de usurio pode
mostrar um controle de seleo de cor ou outro auxlio que estiver disponvel.
O valor ser uma cor no formato #f6600.
TIPOS DE DADOS E VALIDADORES
FORMULRIOS VITAMINADOS
Conforme voc deve ter percebido no ltimo captulo, o HTML5 avanou
bastante nos recursos de formulrios, facilitando muito a vida de quem
precisa desenvolver aplicaes web baseadas em formulrios. Neste captulo
vamos avanar um pouco mais nesse assunto e, voc vai ver, a coisa vai fcar
ainda melhor.
AUTOFOCUS
Ao incluir em um campo de formulrio o atributo autofocus, assim:
<input name=login autofocus >
O foco ser colocado neste campo automaticamente ao carregar a pgina.
Diferente das solues em Javascript, o foco estar no campo to logo ele seja
criado, e no apenas ao fnal do carregamento da pgina. Isso evita o problema,
muito comum quando voc muda o foco com Javascript, de o usurio j estar
em outro campo, digitando, quando o foco mudado.
PLACEHOLDER TEXT
HTML5 e CSS3 com Farinha e Pimenta
64
Voc j deve ter visto um placeholder. Tradicionalmente, vnhamos fazendo isso:
<!DOCTYPE html>
<html lang=en-US>
<head>
<meta charset=UTF-8>
<title>Placeholder, the old style</title>
</head>
<body>
<input name=q value=Search here
onfocus=if(this.value==Search here)this.value=>
</body>
</html>
HTML5 nos permite fazer isso de maneira muito mais elegante:
<!DOCTYPE html>
<html lang=en-US>
<head>
<meta charset=UTF-8>
<title>Placeholder, HTML5 way</title>
</head>
<body>
<input name=q placeholder=Search here>
</body>
</html>
required
Para tornar um campo de formulrio obrigatrio (seu valor precisa ser
preenchido) basta, em HTML5, incluir o atributo required:
<input name=login required>
65
HTML5 e CSS3 com Farinha e Pimenta Formulrios e Multimdia
maxlength
Voc j conhecia o atributo maxlength, que limita a quantidade de caracteres
em um campo de formulrio. Uma grande lacuna dos formulrio HTML foi
corrigida. Em HTML5, o elemento textarea tambm pode ter maxlength!
VALIDAO DE FORMULRIOS
Uma das tarefas mais enfadonhas de se fazer em Javascript validar
formulrios. Infelizmente, tambm uma das mais comuns. HTML5 facilita
muito nossa vida ao validar formulrios, tornando automtica boa parte do
processo. Em muitos casos, todo ele. Voc j viu que pode tornar seus campos
espertos com os novos valores para o atributo type, que j incluem validao
para datas, emails, URLs e nmeros. Vamos um pouco alm.
PATTERN
O atributo pattern nos permite defnir expresses regulares de validao, sem
Javascript. Veja um exemplo de como validar CEP:
<!DOCTYPE html>
<html lang=pt-BR>
<head>
<meta charset=UTF-8>
<title>O atributo pattern</title>
</head>
<body>
<form>
<label for=CEP>CEP:
<input name=CEP id=CEP required
pattern=\d{5}-?\d{3}>
</label>
HTML5 e CSS3 com Farinha e Pimenta
66
<input type=submit value=Enviar>
</form>
</body>
</html>
NOVALIDATE E FORMNOVALIDATE
Podem haver situaes em que voc precisa que um formulrio no seja
validado. Nestes casos, basta incluir no elemento form o atributo novalidate.
Outra situao comum querer que o formulrio no seja validade
dependendo da ao de submit. Nesse caso, voc pode usar no boto de
submit o atributo formnovalidate. Veja um exemplo:
<!DOCTYPE html>
<html lang=pt-BR>
<head>
<meta charset=UTF-8>
<title>Salvando rascunho</title>
<style>
label{display:block;}
</style>
</head>
<body>
<form>
<label>nome: <input name=nome required></
label>
<label>email: <input name=email type=email
required></label>
<label>mensagem: <textarea name=mensagem
required></textarea></label>
<input type=submit name=action value=Salvar
rascunho formnovalidate>
<input type=submit name=action
value=Enviar>
67
HTML5 e CSS3 com Farinha e Pimenta Formulrios e Multimdia
</form>
</body>
</html>
CUSTOM VALIDATORS
claro que as validaes padro, embora atendam a maioria dos casos, no so
sufcientes para todas as situaes. Muitas vezes voc vai querer escrever sua
prpria funo de validao Javascript. H alguns detalhes na especifcao
do HTML5 que vo ajud-lo com isso:
O novo evento oninput disparado quando algo modifcado no valor de
um campo de formulrio. Diferente de onchange, que disparado ao fnal
da edio, oninput disparado ao editar. diferente tambm de onkeyup e
onkeypress, porque vai capturar qualquer modifcao no valor do campo,
feita com mouse, teclado ou outra interface qualquer.
O mtodo setCustomValidity pode ser invocado por voc. Ele recebe uma
string. Se a string for vazia, o campo ser marcado como vlido. Caso
contrrio, ser marcado como invlido.
Com isso, voc pode inserir suas validaes no campo de formulrio e deixar
o navegador fazer o resto. No mais preciso capturar o evento submit e trat-
lo. Veja, por exemplo, este formulrio com validao de CPF:
<!DOCTYPE html>
<html lang=pt-BR>
<head>
<meta charset=UTF-8>
<title>Custom validator</title>
<!-- O arquivo cpf.js contm a funo validaCPF,
que
recebe uma string e retorna true ou false. -->
<script src=cpf.js></script>
HTML5 e CSS3 com Farinha e Pimenta
68
<script>
function vCPF(i){
i.setCustomValidity(validaCPF(i.
value)?:CPF invlido!)
}
</script>
</head>
<body>
<form>
<label>CPF: <input name=cpf
oninput=vCPF(this)></label>
<input type=submit value=Enviar>
</form>
</body>
</html>
DETALHES E CONTEDO
EDITVEL
Vejamos mais duas coisas que voc certamente j fez mais de uma vez e foram
simplifcadas pelo HTML5.
DETALHES E SUMRIO
Veja um exemplo de uso dos novos elementos details e summary:
<details>
<summary>Copiando <progress max=39248
value=14718> 37,5%</summary>
<dl>
<dt>Tamanho total:</dt>
<dd>39.248KB</dd>
<dt>Transferido:</dt>
<dd>14.718</dd>
69
HTML5 e CSS3 com Farinha e Pimenta Formulrios e Multimdia
<dt>Taxa de transferncia:</dt>
<dd>127KB/s</dd>
<dt>Nome do arquivo:</dt>
<dd>HTML5.mp4</dd>
</dl>
</details>
Veja como um agente de usurio poderia renderizar isso:
E ao clicar:
HTML5 e CSS3 com Farinha e Pimenta
70
CONTEDO EDITVEL
Para tornar um elemento do HTML editvel, basta incluir nele o atributo
contenteditable, assim:
<div contenteditable=true>
Edite-me...
</div>
Voc pode ler e manipular os elementos editveis normalmente usando os
mtodos do DOM. Isso permite, com facilidade, construir uma rea de edio
de HTML.
DRAG-N-DROP E CORREO
ORTOGRFICA
DRAG AND DROP
A API de Drag and Drop relativamente simples. Basicamente, inserir o
atributo draggable=true num elemento o torna arrastvel. E h uma srie
de eventos que voc pode tratar. Os eventos do objeto sendo arrastado so:
dragstart
O objeto comeou a ser arrastado. O evento que a funo recebe tem um
atributo target, que contm o objeto sendo arrastado.
drag
O objeto est sendo arrastado.
dragend
A ao de arrastar terminou.
71
HTML5 e CSS3 com Farinha e Pimenta Formulrios e Multimdia
O objeto sobre o qual outro arrastado sofre os seguintes eventos:
dragenter
O objeto sendo arrastado entrou no objeto target.
dragleave
O objeto sendo arrastado deixou o objeto target.
dragover
O objeto sendo arrastado se move sobre o objeto target.
drop
O objeto sendo arrastado foi solto sobre o objeto target
DETALHES IMPORTANTES
A ao padro do evento dragover cancelar a ao de dragging atual. Assim,
nos objetos que devem receber drop, preciso setar uma ao de dragover
com, no mnimo, return false.
Selees de texto so automaticamente arrastveis, no precisam do atributo
draggable. E se voc quiser criar uma rea para onde selees de texto possam
ser arrastadas, basta tratar esses mesmos eventos.
Por fm, todas funes de tratamento de evento de drag recebem um objeto
de evento que contm uma propriedade dataTransfer, um dataset comum a
todos os eventos durante essa operao de drag.
<!DOCTYPE HTML>
<html>
<head>
<meta content=text/html; charset=UTF-8
http-equiv=content-type/>
<title>HTML5 Drag and drop demonstration</title>
<style type=text/css>
HTML5 e CSS3 com Farinha e Pimenta
72
#boxA, #boxB {
foat:left; width:100px; height:200px;
padding:10px; margin:10px; font-size:70%;
}
#boxA { background-color: blue; }
#boxB { background-color: green; }
#drag, #drag2 {
width:50px; padding:5px; margin:5px;
border:3px black solid; line-height:50px;
}
#drag { background-color: red;}
#drag2 { background-color: orange;}
</style>

<script type=text/javascript>
// Quando o usurio inicia um drag,
guardamos no dataset do evento
// o id do objeto sendo arrastado
function dragStart(ev) {
ev.dataTransfer.setData(ID, ev.target.
getAttribute(id));
}
// Quando o usurio arrasta sobre um dos
painis, retornamos
// false para que o evento no se propague
para o navegador, o
// que faria com que o contedo fosse
selecionado.
function dragOver(ev) { return false; }
// Quando soltamos o elemento sobre um
painel, movemos o
// elemento, lendo seu id do dataset do
evento
function dragDrop(ev) {
var idelt = ev.dataTransfer.
getData(ID);
ev.target.appendChild(document.
73
HTML5 e CSS3 com Farinha e Pimenta Formulrios e Multimdia
getElementById(idelt));
}
</script>
</head>
<body>
<!-- Painel 1 -->
<div id=boxA
ondrop=return dragDrop(event)
ondragover=return dragOver(event)>

<!-- Draggable 1 -->
<div id=drag draggable=true
ondragstart=return dragStart(event)>drag me</
div>

<!-- Draggable 2 -->
<div id=drag2 draggable=true
ondragstart=return dragStart(event)>drag me</
div>
</div>
<!-- Painel 2 -->
<div id=boxB
ondrop=return dragDrop(event)
ondragover=return dragOver(event)>
</div>
</body>
</html>
Exemplo
Segue um exemplo de drag-and-drop, baseado no excelente exemplo de
Laurent Jouanneau (http://ljouanneau.com/lab/html5/demodragdrop.html).
REVISO ORTOGRFICA E GRAMATICAL
Os agentes de usurio podem oferecer recursos de reviso ortogrfca e
HTML5 e CSS3 com Farinha e Pimenta
74
gramatical, dependendo do que houver disponvel em cada plataforma. Os
desenvolvedores podem controlar o comportamento dessa ferramenta atravs
do atributo spellcheck. Inserir spellcheck=true num elemento faz com que a
reviso esteja habilitada para ele. Voc tambm pode desabilitar a reviso para
determinado elemento, inserindo spellcheck=false.
ELEMENTOS AUDIO E VIDEO,
E CODECS
UDIO
Para inserir udio em uma pgina web, basta usar o elemento audio:
<audio src=mus.oga controls=true
autoplay=true>
O valor de controls defne se um controle de udio, com botes de play, pause,
volume, barra de progresso, contador de tempo, etc. ser exibido na tela. Se
for setado como false, ser preciso controlar o player via javascript, com
mtodos como play() e pause(). O valor de autoplay defne se o udio vai
comear a tocar assim que a pgina carregar.
Origens alternativas de udio
Todo agente de usurio deveria suportar o codec livre OggVorbis, mas,
infelizmente, pode acontecer de seu arquivo oga no tocar no computador
ou celular de algum. Quem sabe do seu chefe ou seu cliente. Ento preciso
saber como oferecer um formato alternativo de udio. Fazemos assim:
<audio controls=true autoplay=true>
<source src=mus.oga>
<source src=mus.mp3>
<source src=mus.wma>
75
HTML5 e CSS3 com Farinha e Pimenta Formulrios e Multimdia
</audio>
Claro, o agente de usurio pode ainda no saber tocar nenhum desses
formatos, ou sequer ter suporte a udio. Para esses casos, oferea um contedo
alternativo:
<audio controls=true autoplay=true>
<source src=mus.oga>
<source src=mus.mp3>
<source src=mus.wma>
<p>Faa o <a href=mus.mp3>download da msica</
a>.</p>
</audio>
VDEO
O uso de vdeo muito semelhante ao de udio:
<video src=u.ogv width=400 height=300>
E com vrios elementos source:
<video controls=true autoplay=true width=400
height=300>
<source src=u.ogv>
<source src=u.mp4>
<source src=u.wmv>
<p>Faa o <a href=u.mp4>download do vdeo</a>.</
p>
</video>
Codecs
muito importante que voc inclua, nos seus elementos source de udio e
vdeo, informao a respeito do container e codecs utilizados. Isso vai evitar
que o navegador tenha que baixar, pelo menos parcialmente, o arquivo de
HTML5 e CSS3 com Farinha e Pimenta
76
mdia para, depois, descobrir que no consegue toc-lo. importante lembrar
que a extenso do arquivo no informao relevante para isso, pelo contrrio,
no signifca nada. Uma URL pode no ter extenso de arquivo e pode levar
a um redirecionamento.
Para indicar ao navegador o container e codecs de determinado arquivo, usa-
se o atributo type, no formato:
type=MIME-type do container; codecs=codec de
vdeo, codec de udio
Por exemplo, um vdeo em Ogg, usando os codecs Teora e Vorbis, ter seu
source assim:
<source src=video.ogv type=video/ogg;
codecs=theora, vorbis>
Com MPEG-4 a coisa um pouco mais complicada, por que preciso indicar
ao navegador tambm o profle do codec de vdeo utilizado. Veja um exemplo:
<source src=video.mp4 type=video/mp4;
codecs=mp4v.20.240, mp4a.40.2>
ELEMENTO DEVICE E STREAM API
O ELEMENTO DEVICE
O contedo desse captulo est baseado numa especifcao que ainda est em
status de Working Draf. Ou seja, as coisas ainda podem mudar bastante.
Fique de olho no que vai acontecer com o elemento device e a Stream API,
acessando (em ingls): http://dev.w3.org/html5/html-device/
Voc pode inserir em seu HTML um elemento de acesso webcam do
77
HTML5 e CSS3 com Farinha e Pimenta Formulrios e Multimdia
usurio, assim:
<device type=media>
Isso vai exibir uma interface solicitando ao usurio acesso a sua webcam. Se
ele tiver mais de uma, tambm ser permitido que ele escolha que webcam
usar. O atributo media tambm pode conter o valor fs, que vai abrir uma
caixa de seleo no sistema de arquivos, permitindo ao usurio escolher um
arquivo para fazer stream.
O passo seguinte conectar o stream desse seu elemento device a alguma coisa.
Veja, por exemplo, como conect-lo a um elemento video na prpria pgina,
fazendo com que o usurio possa ver a imagem de sua prpria webcam:
<!DOCTYPE html>
<html lang=en-US>
<head>
<meta charset=UTF-8>
<title>Videochat, step 1</title>
<script>
function update(stream) {
document.getElementsByTagName(video)[0].src =
stream.url;
}
</script>
</head>
<body>
<p>To start chatting, select a video camera: <device
type=media onchange=update(this.data)></p>
<video autoplay>
</body>
</html>
HTML5 e CSS3 com Farinha e Pimenta
78
STREAMS
Voc deve ter notado, no script acima, que a funo de update recebe um
parmetro stream. Trata-se de um objeto da classe Stream, que possui uma
propriedade url, que j usamos acima, e um mtodo record. O mtodo record
inicia a gravao do stream e retorna um objeto StreamRecorder. Esse ltimo
possui um mtodo stop, que retorna o arquivo que foi gravado.
79
HTML5 e CSS3 com Farinha e Pimenta Formulrios e Multimdia
A NOVA GERAO
DE APLICAES WEB I
5
MATHML
O HTML5 incorpora o padro MathML. Trata-se de uma linguagem de
marcao, baseada em XML, para representao de frmulas matemticas.
Voc pode ler mais sobre MathML em http://www.w3.org/Math/. Para
incorporar cdigo MathML em seu documento HTML5, no preciso fazer
declaraes especiais. Basta escrever normalmente o cdigo, iniciando com
um elemento math. Veja este exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>MathML</title>
</head>
<body>
<math xmlns=http://www.w3.org/1998/Math/MathML>
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form=prefx>&minus;</mo>
<mi>b</mi>
<mo>&PlusMinus;</mo>
<msqrt>
HTML5 e CSS3 com Farinha e Pimenta
82
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>&minus;</mo>
<mn>4</mn>
<mo>&InvisibleTimes;</mo>
<mi>a</mi>
<mo>&InvisibleTimes;</mo>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>&InvisibleTimes;</mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
</body>
</html>
Veja como esse exemplo renderizado no navegador:
Mesmo que voc nunca tenha visto MathML, e este cdigo parea um pouco
assustador, d uma olhada com calma no cdigo, comparando com a imagem
83
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I
do resultado, e voc vai perceber que muito simples. Talvez algo que possa
deix-lo confuso a entidade &InvisibleTimes;, que aparece algumas vezes no
cdigo. Ela est l para separar os fatores 4ac, por exemplo. Esses valores so
multiplicados, o que a frmula representa, mas no queremos colocar um
operador de multiplicao entre eles, porque por conveno se simplesmente
escrevemos 4ac qualquer leitor saber que isso uma multiplicao.
Por que ento se preocupar em inserir &InvisibleTimes;? Voc vai notar que
se remover a entidade e a tag mo correspondente o resultado visual ser o
mesmo. Colocamos &InvisibleTimes; porque MathML no s visual,
semntica. Um outro agente de usurio pode ter recursos de importar essa
frmula para uma ferramenta de clculo, por exemplo.
SVG
Assim como MathML, SVG uma outra linguagem XML que pode ser
incorporada com facilidade em HTML5. Voc pode ler mais sobre SVG em
http://www.w3.org/Graphics/SVG/. SVG uma linguagem para marcao de
grfcos vetoriais. Vejamos um exemplo bem simples:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>SVG</title>
</head>
<body>
<svg width=400 height=400>
<!-- Um retngulo: -->
<rect x=10 y=10 width=150 height=50
stroke=#000000 stroke-width=5 fll=#FF0000>
<!-- Um polgono: -->
<polygon fll=red stroke=blue
HTML5 e CSS3 com Farinha e Pimenta
84
stroke-width=10
points=250,75 279,161 369,161 297,215
323,301 250,250 177,301 203,215
131,161 221,161>
<!-- Um crculo -->
<circle cx=70 cy=240 r=60
stroke=#00FF00 stroke width=5 fll=#FFFFFF>
</svg>
</body>
</html>
E veja como isso renderizado no navegador:

possvel fazer muito mais com SVG. A maioria dos editores de grfcos
vetoriais hoje exporta e importa automaticamente SVG, permitindo a um
designer construir um grfco em seu editor vetorial predileto e export-lo
diretamente. Em seguida, um programador pode construir javascript que
manipula esse SVG, usando os mtodos do DOM. Com isso voc pode ter
grfcos dinmicos, com animao, escalveis e com excelente qualidade
visual, programveis em Javascript, sem tecnologias proprietrias e plugins.
85
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I
CANVAS API
O ELEMENTO CANVAS
A Canvas API permite a voc desenhar na tela do navegador via Javascript. O
nico elemento HTML existente para isso o elemento canvas, o resto todo
feito via Javascript. Veja como inserir o elemento canvas numa pgina:
<canvas id=x width=300 height=300></canvas>
Isso vai exibir um retngulo vazio. Para desenhar nele, primeiro obtemos o
contexto de desenho, com Javascript:
context=document.getElementById(x).
getContext(2d)
Agora que temos um contexto, podemos desenhar nele. Vamos comear com
um simples retngulo:
context.fllRect(10, 10, 50, 150)
Simples, no? Que tal tentarmos algo um pouco mais complexo? D uma
olhada no exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Canvas API</title>
</head>
<body>
<canvas id=x width=300 height=300></canvas>
<button onclick=desenhar()>desenhar</button>
<script>
function desenhar(){
HTML5 e CSS3 com Farinha e Pimenta
86
// Obtemos o contexto
context=document.getElementById(x).
getContext(2d)
//Iniciamos um novo desenho
context.beginPath()
//Movemos a caneta para o inicio do desenho
context.moveTo(150,50)
//Desenhamos as linhas
context.lineTo(220,250)
context.lineTo(50,125)
context.lineTo(250,125)
context.lineTo(80,250)
context.lineTo(150,50)
//O desenho no de verdade enquanto voc
//no mandar o contexto pint-lo.
//Vamos pintar o interior de amarelo
context.fllStyle=#ff0
context.fll()
//Vamos pintar as linhas de vermelho.
context.strokeStyle=#f00
context.stroke()
}
</script>
</body>
</html>
87
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I
E veja o que acontece quando se clica no boto:
H muito mais para voc estudar se quiser se aprofundar na Canvas API.
Apenas para que voc tenha uma idia, possvel desenhar texto, sombras,
gradientes, incluir imagens no canvas, manipular os pixels, rotacionar e
transformar os objetos.
CANVAS VS SVG
Uma dvida muito comum quando usar Canvas, quando usar SVG. Para
saber escolher, preciso entender as diferenas entre um e outro. SVG
vetorial, e baseado em XML, logo, acessvel via DOM. Canvas desenhado
pixel a pixel, via Javascript.
Assim, as vantagens do SVG so:
O contedo acessvel a leitores de tela
HTML5 e CSS3 com Farinha e Pimenta
88
O grfco escalvel, no perde resoluo ou serrilha ao redimensionar
O contedo acessvel via DOM
E as vantagens do Canvas:
A performance muito superior ao SVG na maioria dos casos
fcil desenhar via Javascript. Em SVG, preciso fazer seu script escrever
XML para voc. Com Canvas voc s manda desenhar, e pronto.
SERVER-SENT EVENTS
EVENTSOURCE
A Server-Sent Events API uma maneira de inverter o fuxo das aplicaes
Ajax, fazendo com que o servidor possa disparar o envio de dados ao agente
de usurio. Para isso, cria-se, no agente de usurio, um objeto EventSource:
es=new EventSource(comm.php)
Isso vai abrir uma conexo HTTP para comm.php e mant-la escutando.
Cada vez que o servidor enviar eventos para esse cliente, ser disparado o
evneto message do objeto EventSource. Veja um exemplo:
es.onmessage=function(e){
alert(Chegaram dados: +e.data)
}
Isso pode ser usado, por exemplo, para implementar uma interface de chat ou
um monitor de status de alguma operao demorada ocorrendo no servidor.
89
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I
O PROTOCOLO DE COMUNICAO
Em nosso exemplo acima, a pgina comm.php envia eventos para o agente
de usurio. Voc no precisa se preocupar em saber como isso funciona do
lado do cliente, uma vez que o agente de usurio faz todo o trabalho. Mas
importante que saiba como isso deve funcionar do lado do servidor. A URL
de comunicao deve devolver ao cliente um header Content-type: text/event-
stream. Em seguida, envia as mensagens, que so blocos de texto separados
um do outro por uma linha em branco:
data: mensagem 1
data: a mensagem 2 tem
data: mais de uma linha
data: mensagem 3
O prefxo data: indica que o que segue so os dados da mensagem. Voc
tambm pode usar o prefxo id:
data: mensagem 1
id: 1
data: a mensagem 2 tem
data: mais de uma linha
id: 2
data: mensagem 3
id: 3
Se voc enviar prefxos id em suas mensagens e o agente de usurio perder a
conexo, ao tentar reconectar ele vai enviar o valor do ltimo id no header
HTTP Last-Event-ID. Com isso voc pode, por exemplo, enviar as mensagens
do chat do ponto em que parou.
HTML5 e CSS3 com Farinha e Pimenta
90
DOM E HTML5
O Modelo de Objetos do Documento (DOM, na sigla em ingls) a interface
entre a linguagem Javascript e os objetos do HTML. DOM o mtodo padro
para construo de aplicaes ricas com Javascript e amplamente conhecido
e utilizado. Neste captulo, supondo que voc j conhece DOM para HTML
4 ou XHTML, vamos nos focar na diferena entre as verses anteriores do
DOM e a do HTML 5.
POR QU DOM?
Os primeiros navegadores a incorporar um motor de Javascript tinham
alert, prompt, document.write e mais meia dzia de maneiras de se interagir
com o usurio. E s. A idia de acessar a rvore de objetos do HTML
trouxe poder s interfaces com o usurio na web. A idia era to boa que
os fabricantes de navegadores no puderam esperar at que tivssemos uma
especifcao padro que atendesse suas necessidades, e criaram cada um
seu prprio mtodo de resolver o problema. Isso resultou em anos e anos de
incompatibilidade, em que era preciso escrever uma verso de seus scripts
para cada navegador.
Queremos, com certeza, evitar uma nova guerra de padres. Por isso
recomendamos a voc, por mais sedutor que parea utilizar um recurso
proprietrio Javascript, que se atenha ao DOM.
91
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I
VAMOS S DIFERENAS
GETELEMENTSBYCLASSNAME
Esse um sonho antigo de todo desenvolvedor Javascript. Com HTML5 voc
pode fazer:
destaques = document.getElementsByClassName(destaq
ue)
E isso retornar todos os elementos do HTML que possuem a classe destaque.
innerHTML
Outro sonho antigo que se torna realidade. A propriedade innerHTML uma
idia to boa que todos os navegadores atuais j a suportam h muito tempo
e todo desenvolvedor web sabe us-la. Apesar disso, ela nunca havia sido
descrita como um padro.
Se porventura voc nunca viu a propriedade innerHTML em ao (puxa, onde
voc estava nos ltimos dez anos?) saiba que ela contm uma string, o contedo
HTML da pgina. E voc tem acesso de leitura e escrita a essa propriedade.
Veja um exemplo de innerHTML:
function adicionaItem(nome){
document.getElementById(lista).innerHTML +=
<li>+nome+</li>
}
ACTIVEELEMENT E HASFOCUS()
O documento HTML5 tem uma nova propriedade, activeElement, que
contm o elemento que possui o foco no momento. O documento tambm
possui o mtodo hasFocus(), que retorna true se o documento contm o foco.
HTML5 e CSS3 com Farinha e Pimenta
92
Seu usurio pode estar trabalhando com mltiplas janelas, abas, frames, ou
mesmo ter alternado para outro aplicativo deixando o navegador com sua
aplicao Javascript rodando em segundo plano. O mtodo hasFocus() uma
conveniente maneira de tratar aes que dependem do foco na aplicao atual.
Veja um exemplo de script dependente de foco:
<!DOCTYPE html>
<html lang=pt-BR>
<head>
<meta charset=UTF-8>
<title>Notifer</title>
<script>
function notify(text){
document.getElementById(msg).
innerHTML+=<p>+text+</p>
titleFlick()
}
function titleFlick(){
if(document.hasFocus()){
document.title=Notifer
return
}
document.title=document.title==Notifer?*
Notifer:Notifer
setTimeout(titleFlick(),500)
}
</script>
</head>
<body>
<input type=button id=notify value=Notify in 5
seconds
onclick=notify(Will notify in 5 seconds...);setTi
meout(notify(\Event shoot!\),5000)>
<div id=msg></div>
</body>
93
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I
</html>
GETSELECTION()
Os objetos document e window possuem um mtodo getSelection(), que
retorna a seleo atual, um objeto da classe Selection. A seleo tem, entre
outros, os seguintes mtodos e propriedades:
Usando getSelection() hoje
A maioria dos navegadores ainda no teve tempo de se atualizar em relao
especifcao e, retorna uma string quando voc chama document.
getSelection() e um objeto Selection quando voc chama window.getSelection().
Como esperamos que num futuro prximo o comportamento de document.
getSelection() mude, sugerimos que voc prefra usar o mtodo de window
por enquanto.
anchorNode
O elemento que contm o incio da seleo
focusNode
O elemento que contm o fnal da seleo
selectAllChildern(parentNode)
Seleciona todos os flhos de parentNode
deleteFromDocument()
Remove a seleo do documento
rangeCount
A quantidade de intervalos na seleo
HTML5 e CSS3 com Farinha e Pimenta
94
getRangeAt(index)
Retorna o intervalo na posio index
addRange(range)
Adiciona um intervalo seleo
removeRange(range)
Remove um intervalo da seleo
INTERVALOS DE SELEO
Voc deve ter notado acima que uma seleo um conjunto de intervalos,
da classe Range. Cada intervalo possui, entre outros, os seguintes mtodos
e propriedades:
deleteContent()
Remove o contedo do intervalo
setStart(parent,ofset)
Seta o incio do intervalo para o caractere na posio ofset dentro do elemento
DOM parent
setEnd(parent,ofset)
Seta o fnal do intervalo para o caractere na posio ofset dentro do elemento
DOM parent
Tanto os objetos Selection quanto os objetos Range retornam o texto da
seleo quando convertidos para strings.
document.head
O objeto document j possua uma propriedade body, uma maneira
conveniente de acessar o elemento body do HTML. Agora ele ganhou uma
95
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I
propriedade head, maneira tambm muito conveniente de acessar o elemento
head.
SELECTOR API
A Selector API no novidade do HTML5, anterior a ele. Mas como ainda
desconhecida de parte dos desenvolvedores, convm dizer que ela existe, e
que continua funcionando no HTML5. Com a selector API voc pode usar
seletores CSS para encontrar elementos DOM.
QUERYSELECTOR E JQUERY
Se voc usurio de jQuery, j entendeu tudo. exatamente a mesma idia
dos seletores jQuery.
Alguns preocupados usurios de jQuery tm nos perguntado se no
melhor, em termos de performance usar a Selector API. Mas claro que .
Se voc realmente souber programar, escrever todo o seu cdigo sempre ser
melhor em performance que usar um framework. Mas o ganho, nesse caso,
desprezvel. Talvez o conforte saber que, nos navegadores em que isto est
disponvel, a prpria jQuery usa internamente a Selector API.
A Selector API expe duas funes em cada um dos elementos DOM:
querySelector e querySelectorAll. Ambas recebem como argumento uma
string com um seletor CSS. A consulta sempre feita na subtree do elemento
DOM a partir do qual a chamada foi disparada. A querySelector retorna o
primeiro elemento que satisfaz o seletor, ou null caso no haja nenhum. A
querySelectorAll retorna a lista de elementos que satisfazem o seletor.
Veja, neste exemplo, um script para tabelas zebradas com Selector API:
<!DOCTYPE html>
<html lang=pt-BR>
HTML5 e CSS3 com Farinha e Pimenta
96
<head>
<meta charset=UTF-8>
<title>Zebra</title>
<style>
.zebraon{background:silver}
</style>
<script>
window.onload=function(){
var zebrar=document.querySelectorAll(.zebra tbody
tr)
for(var i=0;i<zebrar.length;i+=2)
zebrar[i].className=zebraon
}
</script>
</head>
<body>
<table class=zebra>
<thead><tr>
<th>Vendedor</th> <th>Total</th>
</tr></thead>
<tbody><tr>
<td>Manoel</td> <td>12.300,00</td>
</tr><tr>
<td>Joaquim</td> <td>21.300,00</td>
</tr><tr>
<td>Maria</td> <td>13.200,00</td>
</tr><tr>
<td>Marta</td> <td>32.100,00</td>
</tr><tr>
<td>Antonio</td> <td>23.100,00</td>
</tr><tr>
<td>Pedro</td> <td>31.200,00</td>
</tr></tbody>
</table>
</body>
</html>
97
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I
CARACTERSTICAS ESPECIAIS DE DOMNODELIST
As listas de elementos retornadas pelos mtodos do DOM no so Arrays
comuns, so objetos DomNodeList, o que signifca que, entre outros mtodos
especiais, voc pode usar list[0] ou list(0) para obter um elemento da lista.
Tambm pode usar list[name] ou list(name) para obter um objeto por seu
nome. Duas adies interessantes do HTML5 ao usar este ltimo mtodo:
O objeto buscado pelos atributos name ou id.
Uma lista de campos de formulrio com o mesmo valor no atributo name
(uma lista de radio buttons, por exemplo) ser retornada caso mais de um
objeto seja encontrado. Essa lista contm um atributo especial, value, muito
conveniente. Ele contm o valor do radio marcado e, ao ser setado, marca o
radio correspondente.
DATASETS
Voc pode atribuir dados arbitrrios a um elemento HTML qualquer,
prefxando seus atributos com data-. Por exemplo:
<img src=computador1.jpg alt=Novo GNexius
Forethinker id=c1
data-processor=35Ghz data-memory=48GB
data-harddrive=16TB data-screen=45 >
Voc pode acessar esses valores via Javascript, atravs do atributo dataset, assim:
var img=document.getElementById(c1)
proc=img.dataset.processor
As propriedades de dataset tm permisso de leitura e escrita.
HTML5 e CSS3 com Farinha e Pimenta
98
NOVOS EVENTOS DOM
UMA PALAVRA SOBRE EVENTOS
O suporte ao tratamento de eventos disparados pelo usurio parte essencial
do DOM. HTML5 oferece a voc um extenso conjunto de novos eventos.
Vamos dar uma olhada nos mais interessantes:
ELEMENTOS MULTIMDIA
oncanplay
O elemento audio ou video j tem dados sufcientes no bufer para comear
a tocar.
oncanplaythrough
O elemento audio ou video j tem dados sufcientes no bufer para comear a
tocar e, se a tranferncia de dados continuar no ritmo em que est ocorrendo,
estima-se que tocar at o fnal sem interrupes.
ondurationchange
O elemento audio ou video teve seu atributo duration modifcado. Isso
acontece, por exemplo, ao alterar a origem da mdia.
onemptied
O elemento audio ou video teve um erro de retorno vazio de dados da rede.
O retorno vazio acontece quando, por exemplo, voc tenta invocar o mtodo
play de um elemento que ainda no tem uma origem de mdia defnida.
onended
O vdeo ou udio chegou ao fm.
onloadeddata
Os dados comearam a ser carregados e a posio atual de playback j pode
99
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I
ser renderizada.
onloadedmetadata
Os metadados foram carregados. J sabemos as dimenses, formato e durao
do vdeo.
onloadstart
Os dados comearam a ser carregados.
onpause
O usurio clicou em pause.
onplay
O usurio clicou em play ou o playback comeou por causa do atributo
autoplay.
onplaying
O vdeo ou udio est tocando.
onprogress
O agente de usurio est buscando dados do vdeo ou udio.
EVENTOS EM CAMPOS DE FORMULRIO
oninput
O usurio entrou com dados no campo.
oninvalid
O campo no passou pela validao.
HTML5 e CSS3 com Farinha e Pimenta
100
EVENTOS GERAIS
oncontextmenu
O usurio disparou um menu de contexto sobre o objeto. Na maioria dos
sistemas Desktop, isso signifca clicar com o boto direito do mouse ou
segurando uma tecla especial.
onmousewheel
A rodinha do mouse foi acionada.
onbeforeprint
Disparado antes da impresso da pgina. Voc pode us-lo para modifcar,
esconder ou exibir elementos, preparando a pgina para impresso.
onaferprint
Disparado aps a impresso da pgina. Voc pode us-lo para reverter o
status anterior impresso.
onhashchange
A ltima poro da URL, aps o hash (#), foi modifcada.
onofine
O agente de usurio fcou ofine.
ononline
O agente de usurio est novamente conectado.
onredo
O usurio disparou a ao de Refazer.
onundo
O usurio disparou a ao de Desfazer.
101
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I
DRAG-AND-DROP
ondrag ondragend ondragenter
ondragleave ondragover ondragstart
ondrop
ATRIBUTOS DE EVENTO
A especifcao do HTML5 padronizou um formato de atribuio de eventos
que j era amplamente utilizado. Voc pode atribuir eventos atravs de
atributos HTML com o nome do evento. Por exemplo:
<input onblur=return verifca(this)>
claro que voc pode continuar usando o mtodo do DOM addEventListener,
com a vantagem de poder atribuir vrios listeners ao mesmo evento.
MENUS E TOOLBARS
O ELEMENTO MENU
O elemento menu usado para defnir menus e barras de ferramenta.
Dentro do menu, voc pode inserir submenus ou comandos. Para inserir
submenus, basta inserir outros elementos menu. Para defnir comandos,
voc pode inserir:
Um link, um elemento a com atributo href;
Um boto, um elemento button;
Um boto, um elemento input com o atributo type contendo button,
HTML5 e CSS3 com Farinha e Pimenta
102
submit, reset ou image;
Um radiobutton, um elemento input com o atributo type contendo radio;
Um checkbox, um elemento input com o atributo type contendo checkbox;
Um elemento select, contendo um ou mais options, define um grupo
de comandos
Um elemento qualquer com o atributo accesskey
Um elemento command
TIPOS DE COMANDO
H trs tipos de comando:
command
Uma ao comum;
checkbox
Uma ao que pode estar no status de ligada ou desligada, e alterna entre esses
dois stauts quando clicada;
radio
Uma ao que pode estar no status de ligada ou desligada, e quando clicada
vai para o status de ligada, deligando todas as aes com o mesmo valor no
atributo radiogroup;
Da lista de elementos possveis para defnir comandos, os trs primeiros,
link, button e input button, defnem comandos do tipo command. O quarto
elemento, radiobutton, defne um comando do tipo radio. O quinto, checkbox,
defne um comando do tipo checkbox.
O sexto elemento, o select, vai defnir um grupo de comandos. Se o select tiver
o atributo multiple, defnir uma lista de comandos do tipo checkbox. Caso
contrrio, os comandos sero do tipo radio, tendo o mesmo radiogroup.
103
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I
No stimo caso, um elemento qualquer com tecla de acesso, o tipo de comando
vai depender do tipo de elemento que recebeu accesskey.
O ELEMENTO COMMAND
Por fm, temos o oitavo mtodo, o elemento command. Neste caso o tipo de
comando depender do valor do atributo type. Veja um exemplo de como
us-lo:
<command type=command label=Salvar
onclick=salvar() >
Prefira no usar command, por enquanto
Por que a especifcao permite que se use o novo elemento command para
defnir comandos, e ao mesmo tempo permite que se use os velhos elementos
como input, button e select para isso? Para possibilitar ao desenvolvedor
oferecer alguma compatibilidade com navegadores antigos. Veja este exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Menus</title>
</head>
<body>
<menu type=toolbar>
<li>
<menu label=File>
<button type=button
onclick=fnew()>New...</button>
<button type=button
onclick=fopen()>Open...</button>
HTML5 e CSS3 com Farinha e Pimenta
104
<button type=button
onclick=fsave()>Save</button>
<button type=button
onclick=fsaveas()>Save as...</button>
</menu>
</li>
<li>
<menu label=Edit>
<button type=button
onclick=ecopy()>Copy</button>
<button type=button
onclick=ecut()>Cut</button>
<button type=button
onclick=epaste()>Paste</button>
</menu>
</li>
<li>
<menu label=Help>
<li><a href=help.html>Help</a></
li>
<li><a href=about.html>About</a></
li>
</menu>
</li>
</menu>
</body>
</html>
O agente de usurio deveria renderizar algo como:
Um agente de usurio que no conhece o novo elemento menu vai entender esse
105
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I
cdigo como listas aninhadas com botes e links. E vai renderizar isso assim:
EXEMPLO DE MENU
No est bonito, mas perfeitamente acessvel. E o visual pode ser bem
trabalhado com CSS. A mesma coisa poderia ser escrita com o elemento
command:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Menus</title>
</head>
<body>
<menu type=toolbar>
<menu label=File>
<command onclick=fnew()
label=New...>
<command onclick=fopen()
label=Open...>
<command onclick=fsave() label=Save>
<command onclick=fsaveas() label=Save
as...>
</menu>
HTML5 e CSS3 com Farinha e Pimenta
106
<menu label=Edit>
<command onclick=ecopy() label=Copy>
<command onclick=ecut() label=Cut>
<command onclick=epaste()
label=Paste>
</menu>
<menu label=Help>
<command onclick=location=help.html
label=Help>
<command onclick=location=about.html
label=About>
</menu>
</menu>
</body>
</html>
Mas um agente de usurio que no conhece os elementos menu e command
no vai mostrar absolutamente nada.
TIPOS DE LINKS
LINKS
A possibilidade de linkar documentos o que torna a Web o que ela . Existem
duas maneiras principais de linkar documentos, os elementos a e link. O
elemento a cria um link no contedo da pgina. Voc conhece sua sintaxe:
<a href=http://visie.com.br>Visie</a>
O elemento link, por sua vez, cria um metadado, um link que no mostrado
no contedo, mas o agente de usurio usa de outras maneiras. O uso mais
comum vincular um documento a uma folha de estilos:|
107
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I
<link rel=stylesheet href=estilo.css>
Note o atributo rel=stylesheet. O atributo rel pode estar presente nos
elementos a e link, e ter uma srie de valores:
METADADOS DE NAVEGAO
archives os arquivos do site
author a pgina do autor do documento atual
bookmark o permalink da seo a que este documento pertence
frst o primeiro documento da srie a qual este pertence
help ajuda para esta pgina
index o ndice ou sumrio que inclui o link para esta pgina
last o ltimo documento da srie a qual este pertence
license a licensa que cobre este documento
next o prximo documento da srie a qual este pertence
prefetch o agente de usurio deve fazer cache desse link em segundo
plano to logo o documento atual tenha sido carregado.
O autor do documento indica que este link o provvel
prximo destino do usurio.
prev o documento anterior da srie a qual este pertence
search a busca deste site
up O documento um nvel acima deste
O Opera nos d um interessante exemplo de como um agente de usurio pode
exibir estes links:
HTML5 e CSS3 com Farinha e Pimenta
108
alternate um formato alternativo para o contedo atual. Precisa estar
acompanhado do atributo type, contendo o tipo MIME do
formato. Por exemplo, para indicar o RSS da pgina atual
usamos:
<link rel=alternate type=application/rss+xml href=rss.
xml>
icon o cone que representa esta pgina
pingback a URL de pingback desta pgina. Atravs desse endereo
um sistema de blogging ou gerenciador de contedo pode
avisar automaticamente quando um link para esta pgina for
inserido.
stylesheet a folha de estilo linkada deve ser vinculada a este documento
para exibio
Comportamento dos links na pgina:
external indica um link externo ao domnio do documento atual
nofollow indica que o autor do documento atual no endossa o
contedo desse link. Os robs de indexao para motores de
busca podem, por exemplo, no seguir este link ou levar em
conta o nofollow em seu algoritmo de ranking.
noreferrer o agente de usurio no deve enviar o header HTTP Referer se
o usurio acessar esse link
sidebar o link deve ser aberto numa sidebar do navegador, se este
recurso estiver disponvel
HTML5 e CSS3 com Farinha e Pimenta
6
A NOVA GERAO DE
APLICAES WEB II
MICRODATA
SEMNTICA ADICIONAL
D um olhada no seguinte cdigo:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Microdata 1</title>
</head>
<body>
<h1>Resultados do trimestre</h1>
<ol>
<li>
<dl>
<dt>nome</dt> <dd>Joaquim</
dd>
<dt>total</dt> <dd>10.764</
dd>
</dl>
</li>
<li>
<dl>
<dt>nome</dt> <dd>Manoel</dd>
HTML5 e CSS3 com Farinha e Pimenta
112
<dt>total</dt> <dd>12.449</
dd>
</dl>
</li>
<li>
<dl>
<dt>nome</dt> <dd>Antonio</
dd>
<dt>total</dt> <dd>9.202</dd>
</dl>
</li>
<li>
<dl>
<dt>nome</dt> <dd>Pedro</dd>
<dt>total</dt> <dd>17.337</
dd>
</dl>
</li>
</ol>
</body>
</html>
A Microdata API nos permite tornar esta estrutura semntica um pouco
mais especfca, defnindo o que o contedo de cada elemento. Veja este
outro exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Microdata 2</title>
</head>
<body>
<h1>Resultados do trimestre</h1>
<ol>
<li>
<dl itemscope>
<dt>nome</dt> <dd
113
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web II
itemprop=nome>Joaquim</dd>
<dt>total</dt> <dd
itemprop=total>10.764</dd>
</dl>
</li>
<li>
<dl itemscope>
<dt>nome</dt> <dd
itemprop=nome>Manoel</dd>
<dt>total</dt> <dd
itemprop=total>12.449</dd>
</dl>
</li>
<li>
<dl itemscope>
<dt>nome</dt> <dd
itemprop=nome>Antonio</dd>
<dt>total</dt> <dd
itemprop=total>9.202</dd>
</dl>
</li>
<li>
<dl itemscope>
<dt>nome</dt> <dd
itemprop=nome>Pedro</dd>
<dt>total</dt> <dd
itemprop=total>17.337</dd>
</dl>
</li>
</ol>
</body>
</html>
Adicionamos atributos especias, itemscope e itemprop. Cada elemento
itemscope defne um item de dados. Cada itemprop defne o nome de uma
propriedade. O valor da propriedade o contedo da tag HTML. A Microdata
API nos fornece acesso especial a esses dados. Veja como acessar esses dados:
resultados=document.getItems()
HTML5 e CSS3 com Farinha e Pimenta
114
for(var i=0;i<resultados.length;i++){
alert(resultados[i].properties.nome[0].content+:
R$ +
resultados[i].properties.total[0].content)
}
DIFERENTES TIPOS DE DADOS
No exemplo acima, temos uma listagem de pessoas. Agora imagine que voc
precise ter, no mesmo documento, uma listagem de pessoas e carros. Poderia
escrever assim:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Microdata 3</title>
</head>
<body>
<h1>Resultados do trimestre</h1>
<ol>
<li>
<dl itemscope=>
<dt>nome</dt>
<dd itemprop=nome>Joaquim</dd>
<dt>total</dt>
<dd itemprop=total>10.764</dd>
</dl>
</li>
<li>
<dl itemscope=>
<dt>nome</dt>
<dd itemprop=nome>Manoel</dd>
<dt>total</dt>
<dd itemprop=total>12.449</dd>
</dl>
</li>
115
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web II
<li>
<dl itemscope=>
<dt>nome</dt>
<dd itemprop=nome>Antonio</dd>
<dt>total</dt>
<dd itemprop=total>9.202</dd>
</dl>
</li>
<li>
<dl itemscope=>
<dt>nome</dt>
<dd itemprop=nome>Pedro</dd>
<dt>total</dt>
<dd itemprop=total>17.337</dd>
</dl>
</li>
</ol>
<h2>Carros mais vendidos</h2>
<ol>
<li>
<dl itemscope=>
<dt>nome</dt>
<dd itemprop=nome>Fusca</dd>
<dt>total</dt>
<dd itemprop=total>382</dd>
</dl>
</li>
<li>
<dl itemscope=>
<dt>nome</dt>
<dd itemprop=nome>Braslia</dd>
<dt>total</dt>
<dd itemprop=total>298</dd>
</dl>
</li>
<li>
<dl itemscope=>
<dt>nome</dt>
<dd itemprop=nome>Corcel</dd>
<dt>total</dt>
HTML5 e CSS3 com Farinha e Pimenta
116
<dd itemprop=total>102</dd>
</dl>
</li>
</ol>
</body>
</html>
Note que pessoas e carros tem propriedades em comum, nome e total.
Quando voc executar document.getItems() vai obter uma lista de todos os
elementos com itemscope. Como obter uma lista apenas de pessoas ou de
carros? Voc pode adicionar a cada item um atributo itemtype, que diz de que
tipo de entidade so aqueles dados:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Microdata 4</title>
</head>
<body>
<h1>Resultados do trimestre</h1>
<ol>
<li>
<dl itemscope= itemtype=pessoa>
<dt>nome</dt>
<dd itemprop=nome>Joaquim</dd>
<dt>total</dt>
<dd itemprop=total>10.764</dd>
</dl>
</li>
<li>
<dl itemscope= itemtype=pessoa>
<dt>nome</dt>
<dd itemprop=nome>Manoel</dd>
<dt>total</dt>
<dd itemprop=total>12.449</dd>
</dl>
</li>
117
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web II
<li>
<dl itemscope= itemtype=pessoa>
<dt>nome</dt>
<dd itemprop=nome>Antonio</dd>
<dt>total</dt>
<dd itemprop=total>9.202</dd>
</dl>
</li>
<li>
<dl itemscope= itemtype=pessoa>
<dt>nome</dt>
<dd itemprop=nome>Pedro</dd>
<dt>total</dt>
<dd itemprop=total>17.337</dd>
</dl>
</li>
</ol>
<h2>Carros mais vendidos</h2>
<ol>
<li>
<dl itemscope= itemtype=carro>
<dt>nome</dt>
<dd itemprop=nome>Fusca</dd>
<dt>total</dt>
<dd itemprop=total>382</dd>
</dl>
</li>
<li>
<dl itemscope= itemtype=carro>
<dt>nome</dt>
<dd itemprop=nome>Braslia</dd>
<dt>total</dt>
<dd itemprop=total>298</dd>
</dl>
</li>
<li>
<dl itemscope= itemtype=carro>
<dt>nome</dt>
<dd itemprop=nome>Corcel</dd>
<dt>total</dt>
HTML5 e CSS3 com Farinha e Pimenta
118
<dd itemprop=total>102</dd>
</dl>
</li>
</ol>
</body>
</html>
Agora voc pode executar: document.getItems(carro) para obter s os carros,
por exemplo.
FALANDO UM IDIOMA COMUM
Voc deve ter notado que pode defnir seus prprios padres de metadados
com microdata. Recomendo que, antes de criar seu prprio formato,
verifque se o mesmo problema no j foi resolvido por algum. O site
www.data-vocabulary.org contm alguns desses formatos padronizados. Por
exemplo, para descrever os dados de sua empresa ou organizao, no invente
seu prprio formato, use o formato defnido em http://www.data-vocabulary.
org/Organization. O valor de itemtype deve ser a prpria URL que documenta o
formato. Veja como fca:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Visie Padres Web</title>
</head>
<body>
<address itemscope= itemtype=http://data-
vocabulary.org/Organization></address>
<h1 itemprop=name>
Visie Padres Web
</h1>
<div itemprop=address itemscope=
itemtype=http://data-vocabulary.org/Address>
<p itemprop=street-address>
Alameda dos Ubiatans, 257 - Planalto
119
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web II
Paulista
</p>
<p>
<span itemprop=locality>So Paulo</
span> - <span itemprop=region>SP</span> - <span
itemprop=country-name>Brasil</span>
</p>
<p itemprop=postal-code>
04070-030
</p>
</div>
<div itemprop=tel>
+55.11.3477-3347
</div>
</body>
</html>
Claro que a vantagem de usar o formato padronizado ao invs de inventar o
seu no apenas no ter o trabalho de pensar os nomes das propriedades. Os
sistemas de busca, e outros sistemas que acessem seu site, podem entender e
tratar esses dados. O Google j faz isso
3
.
HISTRICO DE SESSO E
API STORAGE
Um dos grandes desafos de usabilidade ao se construir aplicaes web com
a tecnologia atual apresentar um modelo de navegao consistente para o
usurio. Duas grandes lacunas nos impediam de faz-lo:
1. No havia uma forma simples de fazer com que as aes locais do usurio
numa pgina fossem refetidas na prxima. Por exemplo, se o usurio abre
e fecha itens em um menu em rvore e em seguida navega para a prxima
3 http://bit.ly/w9Mxn6
HTML5 e CSS3 com Farinha e Pimenta
120
pgina, era muito difcil fazer com que o menu aparece no mesmo estado na
segunda pgina.
2. No havia uma forma simples de fazer com que as aes do usurio numa
pgina Ajax respondessem corretamente aos botes de controle de histrico
do navegador (voltar e avanar).
HTML5 traz formas simples de solucionar os dois problemas.
HISTRICO DE SESSO
Voc provavelmente conhece o objeto history do navegador e seus mtodos
go, back e forward. Ele nos permite, via javascript, um controle bsico do
histrico de navegao. O mesmo controle que o usurio, voltar e avanar.
O objeto history foi vitaminado no HTML5 com dois novos mtodos:
pushState(data,title[,url]): acrescenta uma entrada na lista de histrico.
replaceState(data,title[,url]): modifca a entrada atual na lista de histrico.
Claro, se seu script tentar associar uma URL fora do domnio do script lista
de histrico, isso vai resultar numa exceo de segurana.
Com isso, voc pode acrescentar itens lista de histrico, associando dados ou
mesmo uma URL a eles. Por exemplo, digamos que voc tenha trs elementos
de contedo em sua pgina e um script que exiba um por vez de acordo com
os cliques do usurio no menu:
function showContent(n){
// Escondemos todos os elementos de contedo
for(var i=1;i<4;i++)
document.getElementById(cont+i).style.
display=none
// Exibimos o elemento escolhido
document.getElementById(cont+n).style.
121
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web II
display=block
}
Vamos fazer com que nosso script acrescente uma
linha de histrico ao selecionar um elemento:
function showPage(n){
// Escondemos todos os elementos de contedo
for(var i=1;i<4;i++)
document.getElementById(cont+i).style.
display=none
// Exibimos o elemento escolhido
document.getElementById(cont+n).style.
display=block
}
function showContent(n){
// Mostramos o contedo escolhido
showPage(n)
// Salvamos a pgina atual no histrico
history.pushState({page:n},Contedo +n)
}
Fazendo isso, cada vez que o usurio escolher um item no menu, o elemento ser
exibido e uma linha ser acrescentada no histrico. O usurio poder acessar
normalmente esses itens de histrico usando o boto de voltar do navegador.
Cada vez que ele usar o histrico, ser disparado um evento popstate. Assim,
para que nosso script esteja completo, basta tratar esse evento:
function showPage(n){
// Escondemos todos os elementos de contedo
for(var i=1;i<4;i++)
document.getElementById(cont+i).style.
display=none
// Exibimos o elemento escolhido
document.getElementById(cont+n).style.
display=block
}
HTML5 e CSS3 com Farinha e Pimenta
122
function showContent(n){
// Mostramos o contedo escolhido
showPage(n)
// Salvamos a pgina atual no histrico
history.pushState({page:n},Contedo +n)
}
// Quando o usurio navegar no histrico, mostramos
a pgina relacionada:
window.onpopstate=function(e){
if(e.state)
showPage(e.page)
}
LOCALSTORAGE E SESSIONSTORAGE
At o HTML4, quando precisvamos armazenar dados no agente de usurio
que persistissem entre as pginas, usvamos Cookies. Cookies nos permitiam
armazenar o status de um menu javascript que precisava ser mantido entre as
pginas, lembrar o nome do usurio, o histrico de operaes realizadas por
ele ou a ltima vez que ele visitou nosso site.
Com o aumento da complexidade das aplicaes baseadas em web, duas
grandes limitaes dos Cookies nos incomodam:
Interface complexa: o cdigo para armazenar Cookies envolve complexos
clculos com datas e controle do nome de domnio.
Limite de armazenamento: alguns agentes de usurio permitiam o
armazenamento de no mximo 20 Cookies, com apenas 4KB cada.
HTML5 traz uma nova maneira de armazenar dados no client, a API Storage.
Um objeto Storage possui os mtodos:
getItem(key): obtm um valor armazenado no Storage
123
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web II
setItem(key,value) guarda um valor no Storage
removeItem(key) exclui um valor do Storage
clear() limpa o Storage
Uma outra complicao dos Cookies resolvida pela API Storage o fato
de Cookies s armazenarem strings, nos obrigando a serializar arrays e
objetos javascript. A especifcao da API Storage rege que qualquer valor
javascript pode ser armazenado e recuperado. Infelizmente, em alguns dos
navegadores em que testamos, os valores so convertidos para strings assim
como nos Cookies. Toramos para que os agentes de usurio implementem
corretamente esse recurso.
Esto disponveis dois objetos no escopo global (window): localStorage
e sessionStorage. O objeto localStorage armazena os dados no client sem
expirao defnida. Ou seja, se o usurio fechar o navegador e voltar ao site
semanas depois, os dados estaro l. O sessionStorage armazena os dados
durante a sesso atual de navegao.
O cdigo para armazenar um valor na Storage se parece com isso:
localStorage.setItem(userChoice,33)
E quando voc precisar desse valor, em outra pgina:
localStorage.getItem(userChoice)
Essa interface j muito mais simples que a de Cookies. Mas pode fcar
melhor. Voc pode usar o Storage como um array. Por exemplo:
if(!sessionStorage[theme]){
sessionStorage[theme]=oldfurniture;
}
No h como isso ser mais simples! Alm disso, o espao de armazenamento
sugerido pela documentao de 5MB para cada domnio, resolvendo,
acredito que por mais uma dcada, o problema de espao de armazenamento
HTML5 e CSS3 com Farinha e Pimenta
124
local.
APLICAES OFFLINE
CACHING
HTML5 prov uma maneira de se indicar ao navegador que elementos so
necessrios e devem ser postos em cache para que uma aplicao funcione
ofine. O exemplo da documentao ofcial bastante esclarecedor. D uma
olhada na seguinte pgina:
<!DOCTYPE HTML>
<html>
<head>
<title>Clock</title>
<script src=clock.js></script>
<link rel=stylesheet href=clock.css>
</head>
<body>
<p>The time is: <output id=clock></output></p>
</body>
</html>
Trata-se de um widget de relgio. Para funcionar, este HTML depende dos
arquivos clock.js e clock.css. Para permitir que o usurio acesse esta pgina
ofle, precisamos escrever um arquivo de manifesto, indicando que URLs
devem ser postas em cache. Vamos preparar uma nova verso do widget,
contendo o manifesto, que um arquivo com a extenso .manifest e que deve
ser servido com o tipo MIME text/cache-manifest. Em nosso caso, o arquivo
vai se chamar clock.manifest e ter o seguinte contedo:
CACHE MANIFEST
clock1.html
125
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web II
clock.css
clock.js
Agora veja o HTML com o arquivo de manifesto linkado:
<!DOCTYPE HTML>
<html manifest=clock.manifest>
<head>
<title>Clock</title>
<script src=clock.js></script>
<link rel=stylesheet href=clock.css>
</head>
<body>
<p>The time is: <output id=clock></output></p>
</body>
</html>
Note que recomendado que voc insira o prprio HTML principal na lista
de URLs do arquivo de manifesto, embora no seja necessrio. Ao encontrar
uma pgina com um arquivo de manifesto vinculado, o navegador far cache
das URLs listadas no manifesto e da prpria pgina.
Note tambm que no necessrio que todas as URLs para cache estejam
importadas no documento atual. O arquivo de manifesto pode contar todas as
pginas de sua aplicao que forem necessrias para permitir o funcionamento
ofine, inclusive a navegao entre pginas.
O OBJETO APPLICATIONCACHE
O objeto ApplicationCache controla o status e operaes de caching da
pgina. Ele pode ser acessado via javascript, assim:
window.applicationCache
Seu mtodo mais interessante o update(), que faz com que o agente de
usurio recarregue o cache da aplicao. Alm disso, ele possui a propriedade
HTML5 e CSS3 com Farinha e Pimenta
126
status, cujo valor numrico pode ser um dos seguintes:
0 - UNCACHED
No h um arquivo de manifesto nesta pgina ou apontando para ela
1 - IDLE
O objeto ApplicationCache est ocioso. O cache est atualizado.
2 - CHECKING
O arquivo de manifesto est sendo baixado e conferido.
3 - DOWNLOADING
As URLs vinculadas no manifesto esto sendo baixadas.
4 - UPDATEREADY
O cache antigo, mas ainda no foi marcado como obsoleto.
5 - OBSOLETE
O cache foi marcado como obsoleto e precisa ser atualizado assim que possvel.
O objeto ApplicationCache tambm possui os seguintes eventos, relacionados
a sua mudana de status:
onchecking onnoupdate
ondownloading onprogress onupdateready
oncached onobsolete
Como voc pode ver, alm de onerror, temos um evento para cada um dos
status da lista acima.
CONTROLE DE STATUS DA APLICAO
No exemplo do relgio acima no h formulrios ou submisses Ajax. O agente
127
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web II
de usurios no troca dados com o servidor. Assim muito fcil fazer sua
aplicao rodar ofine, mas essa no a realidade da maioria das aplicaes.
Vimos no captulo anterior como fazer armazenamento local de dados. Com
isso, voc pode armazenar os dados que o navegador deveria enviar para o
servidor enquanto a aplicao estiver ofine e, to logo ela esteja online, enviar
tudo.
Para saber se a aplicao est online, basta acessar a propriedade onLine do
objeto window.navigator:
function salva(dados){
if(window.navigator.onLine){
enviaAjax(dados)
}else{
salvaLocal(dados)
}
}
E para disparar o envio quando a aplicao estiver online e avisar o usurio
quando ela estiver ofine, usamos os eventos ononline e onofine do objeto
window:
window.ononline=function(){
enviaAjax(obtemLocal())
document.getElementById(warning).innerHTML=
}
window.onoffine=function(){
document.getElementById(warning).
innerHTML=Aplicao offine.
}
SCROLL IN TO VIEW E HIDDEN
Um truque simples, mas muito til. Voc pode fazer:
HTML5 e CSS3 com Farinha e Pimenta
128
document.getElementById(aviso).scrollIntoView()
Isso vai rolar a pgina at que o elemento com o id aviso esteja visvel no
topo do viewport. Voc pode passar um parmetro opcional top:
document.getElementById(aviso).
scrollIntoView(false)
O valor default true. Se voc passar false, a rolagem vai deixar o objeto visvel
na base do viewport.
HIDDEN
Ocultar e exibir elementos uma das tarefas mais comuns em Javascript. Em
HTML5 existe um atributo especfco para isso, o atributo hidden. Ao inser-
lo em um elemento assim:
<div hidden>Xi, se esconde!</div>
Ou assim:
<div hidden=true>Xi, se esconde!</div>
O elemento estar oculto.
HIDDEN E JAVASCRIPT
Acessar o atributo hidden em Javascript muito conveniente:
function switchElement(elm){
if(elm.hidden)
elm.hidden=false
else
elm.hidden=true
129
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web II
}
Claro, voc pode fazer:
function switchElement(elm){
elm.hidden=!elm.hidden
}
Sugiro que voc sempre use o atributo hidden. Descobrir se o elemento est
oculto lendo as propriedades display e visibility do CSS, alm de dar mais
trabalho, pode gerar confuso.
GEOLOCATION API
MTODOS DE GEOLOCALIZAO
H trs populares maneiras de um agente de usurio descobrir sua posio
no globo:
Geolocalizao IP
o mtodo usado pela maioria dos navegadores web em computadores.
Atravs de consultas whois e servios de localizao de IP, vai determinar a
cidade ou regio em que voc est.
Triangulao GPRS
Dispositivos conectados a uma rede de celulares e sem um GPS, ou com o
GPS desligado, podem determinar sua posio pela tringulao das antenas
GPRS prximas. bem mais preciso que o mtodo baseado em IP, vai mostrar
em que parte do bairro voc est.
GPS
o mtodo mais preciso. Em condies ideais, a margem de erro de apenas
HTML5 e CSS3 com Farinha e Pimenta
130
5 metros.
Embora essas sejam as trs maneiras mais populares de se resolver o
problema, podem no ser as nicas. Alguns agentes de usurio podem usar
uma combinao desses mtodos, ou mesmo um novo mtodo que venha a
ser inventado. Por isso, a Geolocation API agnstica em relao ao mtodo
usado. H apenas uma maneira de ligar e desligar o modo de alta preciso, o
que vai ter signifcado diferente em cada agente de usurio.
Para obter a posio do usurio, basta executar o script:
navigator.geolocation.getCurrentPosition(showpos)
Onde showpos uma funo callback, que vai receber um objeto de
posicionamento. Veja um exemplo:
function showpos(position){
lat=position.coords.latitude
lon=position.coords.longitude
alert(Your position: +lat+,+lon)
}
Claro, voc pode fazer o que quiser, abrir um mapa, submeter a posio via
Ajax, enviar os dados para um webservice, etc.
O mtodo getCurrentPosition recebe dois outros parmetros. O primeiro
uma funo para tratamento de erro. O segundo, um objeto de confgurao.
TRATANDO ERROS
O usurio pode escolher se deseja ou no compartilhar sua posio com
o site. Alm de o usurio poder dizer no, muita coisa pode dar errado na
hora de obter a geolocalizao. Para tratar isso, voc pode passar o segundo
parmetro a getCurrentPosition:

navigator.geolocation.getCurrentPosition(showpos,erropo
131
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web II
s)
Caso algo d errado, a funo erropos vai receber um objeto PositionError,
que tem o atributo code, que pode ter um dos seguintes valores:
1 - Permisso negada
O usurio clicou em no compartilhar.
2 - Posio indisponvel
O agente de usurio est desconectado, os satlites de GPS no puderam ser
alcanados ou algum erro semelhante.
3 - Timeout
Tempo esgotado ao obter uma posio. Voc pode defnir o tempo mximo ao
chamar getCurrentPosition.
0 - Erro desconhecido
Alguma outra coisa impediu o agente de usurio de obter uma posio.
NO TRATE A RESPOSTA DO USURIO COMO UM ERRO
Em sua funo de tratamento de erro, se obtiver o cdigo de erro 1, por
favor, no incomode o usurio com mensagens de erro. Ele escolheu no
compartilhar sua posio com o site. Talvez a melhor atitude seja no fazer
nada nesse momento.
O OBJETO DE CONFIGURAO
O terceiro parmetro de getCurrentPosition um objeto de confgurao, que
pode ter as seguintes propriedades:
enableHighAccuracy
Se true, liga o modo de alta preciso. Num celular isso pode instruir o
HTML5 e CSS3 com Farinha e Pimenta
132
navegador, por exemplo, a usar o GPS ao invs da triangulao GPRS
timeout
O tempo em milissegundos que o agente do usurio vai esperar pela posio
antes de disparar um erro tipo 3.
maximumAge
O tempo, em milissegundos, que o navegador pode cachear a posio.
WATCHPOSITION
Se o que voc deseja rastrear a posio do usurio continuamente, pode
usar, ao invs de getCurrentPosition, o mtodo watchPosition. Ele tem a
mesma assinatura de getCurrentPosition:
w=navigator.geolocation.
watchPosition(showpos,erropos)
A diferena que a funo showpos ser chamada toda vez que a posio
do usurio mudar. O valor de retorno um nmero, que pode ser usado
posteriormente para cancelar o watcher:
navigator.geolocation.clearWatch(w)
UNDO
O OBJETO UNDOMANAGER
O agente de usurio deve armazenar um histrico de alteraes para cada
documento carregado. Esse histrico controlado pelo objeto UndoManager,
acessvel atravs de window.undoManager. O histrico guarda dois tipos
de alteraes:
Alteraes DOM
133
HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web II
O prprio histrico de alteraes do navegador, as alteraes DOM so inseridas
automaticamente no histrico quando o usurio usa um campo de edio.
Objetos undo
Os objetos undo so inseridos no histrico e controlados pelos seus scripts. Por
exemplo, uma aplicao de e-mail pode guardar um objeto undo representando
o fato de que o usurio moveu um e-mail de uma pasta para outra.
O objeto UndoManager possui os seguintes mtodos e propriedades:
Mtodo Descrio
length O nmero de entradas no histrico
position O nmero da entrada atual no histrico
add(data,title) Adiciona uma entreada especfca no histrico.
Data pode ser um objeto literal com dados
arbitrrios. Title como essa entreda vai aparecer
descrita na lista do histrico
remove(index) Remove uma entrada especfca do histrico
clearUndo() Remove todas as entradas antes da atual no histrico
clearRedo() Remove todas as entradas aps a atual no
histrico
Alm disso, os itens no histrico podem ser acessados com window.
undoManager[index].
RESPONDENDO S AES DE UNDO E REDO
Cada vez que o usurio disparar uma ao de undo ou redo, e o item do
histrico for um objeto undo, ser disparado o evento correspondente,
window.onundo ou window.onredo. As funes associadas a estes eventos
recebero como parmetro um objeto event, contendo uma propriedade data,
cujo valor o objeto undo que voc inseriu no histrico.
HTML5 e CSS3 com Farinha e Pimenta
134
Veja o exemplo:
window.onundo=function(e){
alert(Refazer a alterao: +e.data)
}
DISPARANDO AS AES DE UNDO E REDO
Se voc quiser oferecer em sua aplicao botes para undo e redo, basta que
eles executem:
document.execCommand(undo)
Ou:
document.execCommand(redo)
HTML5 e CSS3 com Farinha e Pimenta
O QUE CSS?
O CSS formata a informao que entregue pelo HTML. Essa informao
pode ser qualquer coisa: imagem, texto, vdeo, udio ou qualquer outro
elemento criado. Grave isso: CSS formata a informao. Essa formatao
na maioria das vezes visual, mas no necessariamente. No CSS Aural,
ns manipulamos o udio entregue ao visitante pelo sistema l a tela. Ns
controlamos volume, profundidade do som, tipo da voz ou em qual caixa
de som a voz sair. De certa forma voc est formatando a informao que
est em formato de udio e que o visitante est consumindo ao entrar no
site. O CSS prepara essa informao para que ela seja consumida da melhor
maneira possvel.
Basicamente as atualizaes do HTML5 foram a criao de novas tags, a
mudana do signifcado de alguns elementos que foram modifcados e outras
tags que foram descontinuadas. As novidades interessantes fcaram para o
pessoal que conhece Javascript. As APIs que o HTML5 disponibilizou so sem
dvida uma das features mais aguardadas por todos estes desenvolvedores.
Diferentemente do CSS3 que trouxe mudanas drsticas para a manipulao
e transio visual dos elementos do HTML.
Com o CSS que ns conhecemos podemos formatar algumas caractersticas
bsicas: cores, background, caractersticas de font, margins, paddings, posio
e controlamos de uma maneira muito artesanal e simples a estrutura do site
CSS
7
HTML5 e CSS3 com Farinha e Pimenta
138
com a propriedade foat.
Voc deve pensar: mas com todas as caractersticas ns conseguimos fazer
sites fantsticos, com design atraente e com a manuteno relativamente
simples. E eu concordo com voc, mas outras caractersticas que ns no
temos controles e dependemos de:

1) Algum programa visual como o Photoshop para criarmos detalhes
de layout;
2) Javascript para tratarmos comportamentos ou manipularmos
elementos especfcos na estrutura do HTML;
3) Estrutura e controle dos elementos para melhorarmos acessibilidade
e diversos aspectos do SEO;
Com as atualizaes do CSS3 e com os browsers atualizando o suporte do
CSS2.1, ns entramos em um patamar onde sem dvida o CSS a arma mais
poderosa para o designer web. Segue uma pequena lista dos principais pontos
que podemos controlar agora:
4) selecionar primeiro e ltimo elemento;
5) selecionar elementos pares ou mpares;
6) selecionarmos elementos especfcos de um determinado grupo de
elementos;
7) gradiente em textos e elementos;
8) bordas arredondadas;
9) sombras em texto e elementos;
10) manipulao de opacidade;
11) controle de rotao;
12) controle de perspectiva;
13) animao;
14) controle bsico de 3D
15) estruturao independente da posio no cdigo HTML;
Vamos passar basicamente por algumas novidades do CSS e entender
como essas novidades podem nos ajudar a fazer websites mais dinmicos e
139
HTML5 e CSS3 com Farinha e Pimenta CSS
interessantes.
O QUE UM SELETOR?
Um seletor representa uma estrutura. Essa estrutura usada como uma
condio para determinar quais elementos de um grupo de elementos sero
formatados.
Seletores encadeados e seletores agrupados so a base do CSS. Voc aprende
naturalmente durante o uso do dia a dia. Para voc lembrar o que so
seletores encadeados e agrupados segue um exemplo abaixo:
Exemplo de seletor encadeado:
div p strong a {
color: red;
}
Este seletor formata o link (a), que est dentro de um strong, que est dentro
de P e que por sua vez est dentro de um DIV.
Exemplo de seletor agrupado:
strong, em, span {
color: red;
}
Voc agrupa elementos separados por vrgula para que herdem a mesma
formatao.
Estes seletores so para cobrir suas necessidades bsicas de formatao de
elementos. Eles fazem o simples. O que vai fazer voc trabalhar menos,
escrever menos cdigo CSS e tambm menos cdigo Javascript so os
seletores complexos.
HTML5 e CSS3 com Farinha e Pimenta
140
SELETORES COMPLEXOS
A sintaxe do CSS simples:
seletor {
propriedade: valor;
}
A propriedade a caracterstica que voc deseja modifcar no elemento. O
valor o valor referente a esta caracterstica. Se voc quer modifcar a cor
do texto, o valor um Hexadecimal, RGBA ou at mesmo o nome da cor
por extenso. At aqui, nada muito diferente. Muitas vezes voc no precisa
aprender do que se trata a propriedade, basta saber que existe e se quiser
decorar, decore. Propriedades so criadas todos os dias e no um ato de
herosmo voc saber todas as propriedades do CSS e seus respectivos valores.
Os seletores so a alma do CSS e voc precisa domin-los. com os seletores
que voc ir escolher um determinado elemento dentro todos os outros
elementos do DOM para format-lo. Boa parte da inteligncia do CSS est
em saber a utilizar os seletores de uma maneira efcaz, escalvel e inteligente.
Os seletores complexos selecionam elementos que talvez voc precisaria fazer
algum script em Javascript para poder marc-lo com uma CLASS ou um
ID para ento voc format-lo. Com os seletores complexos voc consegue
formatar elementos que antes eram inalcansveis.
EXEMPLO DE FUNCIONAMENTO
Imagine que voc tenha um ttulo (h1) seguido de um pargrafo (p). Voc
precisa selecionar todos os pargrafos que vem depois de um ttulo H1. Com
os seletores complexos voc far assim:
h1 + p {
color:red;
141
HTML5 e CSS3 com Farinha e Pimenta CSS
}
Esse seletor um dos mais simples e mais teis que j utilizei em projetos
por a. No precisei adicionar uma classe com JQuery, no precisei manipular
o CMS para marcar esse pargrafo, no precisei fazer nenhum milagre para
encontrar os pargrafos que vem logo depois de um H1. Apenas apliquei o
seletor CSS e pronto.
Abaixo, veja uma lista de seletores complexos e quais as suas funes. No
colocarei todas as possibilidades aqui porque podem haver modifcaes e
novos formatos. Para ter uma lista sempre atualizada, siga o link no fnal da
tabela:
PADRO SIGNIFICADO CSS
elemento[atr] Elemento com um atributo especfco. 2
elemento[atr=x]
Elemento que tenha um atributo com
um valor especfco igual a x.
2
elemento[atr~=x]
Elemento com um atributo cujo valor
uma lista separada por espaos, sendo
que um dos valores x.
2
elemento[atr^=x]
Elemento com um atributo cujo valor
comece exatamente com string x.
3
elemento[atr$=x]
Elemento com um atributo cujo valor
termina exatamente com string x.
3
elemento[atr*=x]
Elemento com um atributo cujo valor
contenha a string x.
3
elemento[atr|=en]
Um elemento que tem o atributo especfco
com o valor que separado por hfen
comeando com EN (da esquerda para
direita).
2
elemento:root
Elemento root do documento.
Normalmente o HTML.
3
elemento:nth-child(n)
Selecione um objeto N de um
determinado elemento.
3
HTML5 e CSS3 com Farinha e Pimenta
142
elemento:nth-last-
child(n)
Seleciona um objeto N comeando pelo
ltimo objeto do elemento.
3
elemento:empty
Seleciona um elemento vazio, sem flhos.
Incluindo elementos de texto.
3
elemento:enabled
elemento:disabled
Seleciona um elemento de interface que
esteja habilitado ou desabilidade, como
selects, checkbox, radio button etc
3
elemento:checked
Seleciona elementos que esto checados,
como radio buttons e checkboxes.
3
E > F
Seleciona os elementos E que so flhos
diretos de F.
2
E + F
Seleciona um elemento F que precede
imediatamente o elemento E.
2
Lista atualizada pelo W3C http://www.w3.org/TR/css3-selectors/#selectors
PSEUDO-CLASSES E
PSEUDO-ELEMENTOS
H uma diferena muito sensvel entre pseudo-classes e pseudo-elementos.
Ambos ajudam o desenvolvedor a encontrar e separar elementos especfcos
na rvore de objetos do documento HTML. Normalmente temos algumas
necessidades ao selecionar determinados elementos que no tem identifcao
de class ou id no cdigo. A situao se agrava quando no podemos modifcar
o HTML ou quando o cdigo gerado dinmicamente.
Para entender a diferena simples: lembre-se que a pseudo-classe como
se voc inserisse uma classe dinmica no elemento. E os pseudo-elementos
como se voc inserisse um elemento em uma determinada posio no
documento.
143
HTML5 e CSS3 com Farinha e Pimenta CSS
Exemplo de pseudo-classe: imagine voc queira formatar o LINK quando o
usurio passar o mouse sobre ele. Voc pode manipul-lo pela pseudo-classe
:hover. como se o browser colocasse no elemento uma classe no momento
que o usurio passasse o mouse no elemento e voc pode formatar essa classe
pelo CSS.
Exemplo de pseudo-elemento: imagine que voc queira formatar a primeira
letra do pargrafo. Voc teria que envolver a primeira letra da primeira palavra
do pargrafo com algum elemento - o SPAN serviria - inserir uma classe neste
elemento e ento format-lo como o desejado. Sem contar que voc teria que
fazer um script - provavelmente em JQuery - para encontrar a primeira letra
para poder inserir este elemento.
Com a utilizao do pseudo-elemento ::frst-letter o browser j encontra este
elemento para voc, possibilitando a formatao.
Nota: Antigamente, os pseudo-elementos eram escritos como as pseudo-
classes, iniciando-os com dois pontos (:). Mas isso causava muita confuso
entre os desenvolvedores para distinguir pseudo-elementos de pseudo-
classes, por este motivo a especifcao foi modifcada, fazendo com que os
pseudo-elementos sejam escritos iniciando com um par de dois pontos (::),
assim os desenvolvedores conseguem diferenciar um pseudo-elemento de
uma pseudo-classe.
PSEUDO-CLASSES
As pseudo-classes manipulam um determinado estado do elemento. Todos
os elementos tem estados adicionais alm daquele que voc consegue ver.
Por exemplo: ao passar o mouse, ao clicar, quando ganha foco e etc. Estes
estados podem ser formatados para trazer melhor experincia para o usurio.
A formatao destes estados ganha muita importncia em mobiles e tablets, j
que a interao normalmente feita com os dedos, fazendo com que o usurio
HTML5 e CSS3 com Farinha e Pimenta
144
tenha um feedback sensitivo maior.
Lembrando que a especifcao das pseudo-classes vem da verso 2.1 do CSS.
Contudo com as atualizao dos browsers juntamente com a moda do CSS3,
essas pseudo-classes e tambm grande parte dos pseudo-elementos foram
implementados e esto prontos para usar.
Uma lista das pseudo-classes completa, juntamente com usa explicao mais
abrangente e detalista pode ser encontrada na prpria especifcao do W3C.
As pseudo-classes so divididas em 2 tipos: estruturais e dinmicas.
Pseudo-classes dinmicas
As pseudo-classes dinmicas controlam os estados dos elementos. Todos os
elementos tem estados defnidos. fcil de entender quando lembramos do
elemento A (link). Ele tem vrios estados: quando voc passa o mouse, quando
voc tira o mouse, quando voc clica e quando visitado. Estes estados o
LINK podem ser formatados. Por isso que voc modifca a cor ou coloca
sublinhado quando o usurio passa o mouse por cima do link. Estes estados
tambm esto presentes em outros elementos. Claro, um DIV por exemplo,
no ter a pseudo-classe de VISITED, j que voc no visita um DIV.
Pseudo-Classe Descrio de uso
:hover Quando o mouse passa por cima do objeto
:visited
Quando o elemento foi visitado. Normalmente aplicado
para link.
:active
Quando o elemento est sendo ativo. Para ver esse
estado, clique em um link, mas no solte o boto.
4
Especicao W3C sobre Pseudo-Classes: http://www.w3.org/TR/css3-
selectors/#pseudo-classes
145
HTML5 e CSS3 com Farinha e Pimenta CSS
:focus
Quando o elemento ganha foco. Por exemplo quando os
inputs ganham foco para serem preenchidos.
Pseudo-classes estruturais
As pseudo-classes estruturais encontram elementos em uma rvore de
elementos. Eles no formatam os estados, mas nos ajudam a encontrar
elementos especfcos para que sejam formatados sem a ajuda de programao
ou insero de alguma identifcao direta no cdigo.
Lembra-se do tempo que para criarmos uma tabela zebrada (aquela tabela que
tem as cores de linhas alternadas) precisvamos fazer um loop em Javascript
ou alguma linguagem server-side para contar as linhas e descobrir qual era
mpar e par, para ento inserirmos uma classe nas linhas determinadas e s
depois podermos format-las com CSS para que a tabela fcasse da forma
desejada. Muito trabalho para ter um resultado nfmo. Hoje podemos
encontrar estes elementos facilmente utilizando a pseudo-classe :nth-child().
Simples assim:
table tr:nth-child(odd) {background: gray;}
O seletor acima encontra todos as TR (linhas) mpares dentro da tabela e
aplica um background cinza. Simples, no ? Ento lembre-se: pseudo-classes
selecionam elementos especfcos na rvore de elementos do HTML.
Pseudo-classes do CSS3
O CSS 3 trouxe uma srie de pseudo-classes, que expandem o poder do
desenvolvedor ao escolher e formatar um determinado elemento que no
tenha uma identifcao defnida direto no cdigo. Abaixo segue uma lista de
pseudo-classes que o CSS3 adicionou cartilha:
HTML5 e CSS3 com Farinha e Pimenta
146
Pseudo-classe Descrio
:target
Encontra um elemento alvo. Muito utilizado para
fazer abas.
:root
Encontra o elemento que o elemento raiz do
documento.
:empty Encontra elementos que no tem flhos.
:enabled
Encontra elementos que esto habilitados. Por
exemplo, inputs de checkbox, texto e etc.
:disabled
Encontra elementos desabilitados para edio ou
manipulao.
:checked
Encontra elementos como checkbox e botes
radio que esto checados.
:frst-of-type
Encontra um elemento especfco que seja o
primeiro flho de um defnido.
:last-of-type
Encontra um elemento especfco que seja o
ltimo flho de um elemento defnido.
:nth-child()
Encontra um elemento tomando como base sua
posio na rvore de elementos do mesmo gnero.
:nth-last-child()
Encontra o ltimo elemento tomando como base sua
posio na rvore de elementos do mesmo gnero.
:nth-of-type()
Encontra os elementos do mesmo tipo elemento
tomando como base sua posio na rvore de
elementos do pai.
:last-child Encontra o ltimo elemento.
:frst-child Encontra o primeiro elemento.
:only-of-type
Seleciona os elementos de um mesmo tipo que so
os flhos.
:only-child
Encontra os elementos flhos do mesmo gnero de
um determinado pai.
147
HTML5 e CSS3 com Farinha e Pimenta CSS
:not()
Seleciona os elementos defnidos, MENOS os
elementos especfcados pela pseudo-classe.
PSEUDO-ELEMENTOS
Pseudo-elementos permitem que os autores selecionem informaes
inacessveis e possibilitem os desenvolvedores um caminho para referenciar
contedos que no existem. Por exemplo: podemos inserir um elemento antes
(::before) ou depois (::afer) de um objeto j existente no HTML.
Existem alguns pseudo-elementos bsicos que voc j deve ter usado algumas
vezes em seus projetos:
Pseudo-elemento Descrio
::frst-letter
Encontra a primeira letra de da primeira palavra
de um determinado bloco de texto.
::frst-line Seleciona a primeira linha de um bloco de texto.
::before
Insere um elemento no incio do contedo de
um elemento.
::afer
Insere um elemento no fnal do contedo de
um elemento.
Para entendermos melhor como os pseudo-elementos trabalham, vamos
tomar como exemplo o pseudo-elemento ::frst-letter. Veja o cdigo abaixo:
p::frst-letter {font-size:20px; font-weight: bold; }
O cdigo acima defne que a primeira letra do pargrafo fcar com o tamanho
de 20px e em negrito.
Para entender melhor como o browser trabalha: imagina que o browser, ao
encontrar a primeira letra, ele a insere em um elemento SPAN com a classe
FIRST-LETTER. Como no cdigo abaixo:
HTML5 e CSS3 com Farinha e Pimenta
148
<p>
<span class=frst-letter>V</span>eja, mas no
toque.
</p>
Obviamente este um exemplo. O browser no insere nenhum elemento no
seu cdigo. Mas como se fzesse isso. Imagine este mesmo exemplo quando
ler sobre os outros pseudo-elementos.
Infelizmente os pseudo-elementos no sofreram tantas modifcaes e
inseres de novas features com a vinda do CSS3.
GRADIENTE
Todos os browsers mais novos como Safari, Opera, Firefox e Chrome j
aceitam essa propriedade e voc pode utiliz-la hoje. Infelizmente, mas voc
j sabia, os IEs atuais (8 e 9) no reconhecem ainda. Mesmo assim, at o dia
que este captulo estava sendo escrito, o suporte dos browsers ainda estava
muito nebuloso. Como voc ver abaixo, os cdigos que cada browser suporta
ainda eram diferentes e no seguiam um padro. Bem como no havia padro
especfco para criar gradientes no estilo radial.
Voc pode perguntar: Mas j que terei o trabalho de produzir a imagem
do gradiente para browsers antigos, porque no utilizar imagens para todos
os browsers? Lembre-se que se utilizar uma imagem, o browser far uma
requisio no servidor buscando essa imagem. Sem imagem, teremos uma
requisio a menos, logo o site fca um pouquinho mais rpido. Multiplique
isso para todas as imagens de gradiente que voc fzer e tudo realmente far
mais sentido. Deixe para que os browsers no adeptos baixem imagens e
faam mais requisies.
Veja abaixo um exemplo de cdigo, juntamente com o fallback de imagem
caso o browser no suporte ainda essa especifcao:
149
HTML5 e CSS3 com Farinha e Pimenta CSS
div {
width:200px;
height:200px;
background-color: #FFF;
/* imagem caso o browser no aceite a feature */
background-image: url(images/gradiente.png);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(green,
red);
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(green,
red);
/* Opera 11.10+ */
background-image: -o-linear-gradient(green,
red);
}
Ateno: At que os browsers implementem de vez essa feature, iremos utilizar
seus prefxos. Como fcou:
Stops ou defnindo o tamanho do seu gradiente
O padro que o gradiente ocupe 100% do elemento como vimos no exemplo
anterior, mas muitas vezes queremos fazer apenas um detalhe.
Nesse caso ns temos que defnir um STOP, para que o browser saiba onde
uma cor deve terminar para comear a outra. Perceba o 20% ao lado da cor
HTML5 e CSS3 com Farinha e Pimenta
150
vermelha. O browser calcula quanto 20% da altura (ou largura dependendo
do caso) do elemento, e comea o gradiente da cor exatamente ali. O cdigo
de exemplo segue abaixo:
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(green,
red 20%);
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(green,
red 20%);
/* Opera 11.10+ */
background-image: -o-linear-gradient(green, red
20%);
Veja o resultado:
Se colocarmos um valor para o verde, ns iremos conseguir efeitos que
antes s conseguiramos no Illustrator ou no Photoshop. Segue o cdigo e o
resultado logo aps:
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(green
10%, red 20%);
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(green
10%, red 20%);
/* Opera 11.10+ */
background-image: -o-linear-gradient(green 10%,
red 20%);
151
HTML5 e CSS3 com Farinha e Pimenta CSS
Perceba que o tamanho da transio vai fcando menor a medida que vamos
aumentando as porcentagens. Muito, mas muito til.
PROPRIEDADE BORDER-IMAGE
Defnir imagem para as bordas uma daquelas propriedades da CSS que
voc se pergunta como vivamos antes de conhece-la. muito mais fcil
entender testando na prtica, por isso sugiro que se voc estiver perto de um
computador, faa testes enquanto l este texto. A explicao pode no ser
sufciente em algumas partes, mas a prtica ir ajud-lo a entender.
Esta propriedade ainda est em fase de testes pelos browsers, por isso
utilizaremos os prefxos para ver os resultados.Utilizarei apenas o prefxo do
Safari, mas o Firefox j entende essa propriedade muito bem.
A sintaxe do border-image se divide em trs partes: 1) URL da imagem que
ser utilizada. 2) Tamanho do slice das bordas. 3) Como o browser ir aplicar
a imagem na borda.
Segue um exemplo da sintaxe abaixo:
a {
display:block;
width:100px;
HTML5 e CSS3 com Farinha e Pimenta
152
-webkit-border-image: url(border.gif) 10 10 10 10
stretch;
}
Acima defnimos uma imagem com o nome de border.gif, logo depois
defnimos o width de cada uma das bordas do elemento. A sintaxe igual
a outras propriedades com 4 valores: top, right, bottom, lef. E logo depois
colocamos qual o tipo de tratamento que a imagem vai receber.
DIVIDINDO A IMAGEM
Para posicionar a imagem devidamente em seu objeto o browser divide a
imagem em 9 sees:
Quando a imagem colocada no elemento, o browser posiciona os cantos da
imagem juntamente com os cantos correspondentes do elemento. Ou seja,
o bloco 1 da imagem colocado no canto superior esquerdo, o 3 no canto
superior direito e assim por diante. Se voc fzer o teste, a imagem aparecer
no elemento como se estivesse desproporcional. Isso normal porque a
imagem deve seguir as propores do elemento e no as suas prprias.
COMPORTAMENTO DA IMAGEM
153
HTML5 e CSS3 com Farinha e Pimenta CSS
O comportamento da imagem a parte mais importante porque defne como
o centro da imagem (no caso do nosso exemplo a seo de nmero 5), ir ser
tratada. H vrios valores, mas o que mais simples de se entender a stretch,
que estica e escala a imagem para o tamanho do elemento aplicado. H outros
valores como round e repeat. Mas hoje alguns browsers no tem tanto suporte
e acabam ignorando esses valores ou como no caso do Safari e o Chrome,
interpretam o round como o repeat. Vamos nos concentrar com o stretch e
voc entender como funciona a propriedade.
APLICAO
Vamos utilizar a imagem abaixo para aplicar a propriedade. Iremos fazer
um boto ao estilo iPhone. A coisa simples e sugiro que voc faa testes
individualmente brincando com os valores das bordas e com diversas outras
imagens para ver como funciona o recurso.
Irei aplicar o estilo em um link. O cdigo segue abaixo:
a {
display:block;
width:100px;
text-align:center;
HTML5 e CSS3 com Farinha e Pimenta
154
font:bold 13px verdana, arial, tahoma,
sans-serif;
text-decoration:none;
color:black;
}
Para inserir a imagem, colocamos as duas linhas abaixo:
border-width:10px;
-webkit-border-image: url(button.png) 10 stretch;
Defni na primeira linha que a borda teria 10px de largura com a propriedade
border-width. Na segunda linha defne que a imagem utilizada seria a button.
png, que as reas da imagem teriam que se estender por 10px, e o valor stretch
defne que a imagem cobrir o elemento inteiro.
Temos o border-width defnindo a largura da borda, mas no temos nenhum
valor dizendo quanto dessa largura a imagem deve tomar.
Os efeitos so bem estranhos quando esses valores esto mal formatados.
Por isso, teste na prtica essa propriedade para que no haja problemas a
implementar em seus projetos. O pulo da gato, para mim, a propriedade
border-width.
SOMBRAS
No tem segredo: A propriedade box-shadow produz drop shadow em um
elemento e a propriedade text-shadow produz drop shadow diretamente nas
letras do texto. A sintaxe das duas propriedades so idnticas. Veja abaixo:
div {
text-shadow:5px 10px 7px #000;
box-shadow:5px 10px 7px #000;
}
155
HTML5 e CSS3 com Farinha e Pimenta CSS
A sintaxe divida em 3 partes. Os dois primeiros nmeros so as coordenadas:
signifca que a sombra ser deslocada 5px pra esquerda e 10px do topo.
O terceiro nmero aplicado pra produzir o blur da sombra. Isso quer dizer
que a sombra ser esmaecida e fcar diluda em 7px.
O ltimo valor referente cor. Voc pode utilizar RGBA em vez de
Hexadecimal. Alis, o valor em RGBA pode ser usado em qualquer
propriedade que dependa de cores.
Essa especifcao ainda est iniciando, mas j funciona em alguns browsers
sem a ajuda de prefxos, como no Safari. Mesmo assim, ainda sinto falta de
algumas possibilidades, como por exemplo produzir apenas sombras em um
dos lados do elemento. Atualmente a sombra produzida em todos os lados,
tornando difcil o controle do lado em que a sombra ser aplicada. Entretanto
a aplicao destas propriedades j salvam muito tempo na criao do layout.
Essas propriedades sero ignoradas em browsers que no as suportam. Logo,
voc tem uma deciso muito difcil: ou faz uma verso utilizando imagens
PNGs para simular o efeito de sombra, ou, que a opo que eu prefro, no
mostre sombras para os browsers que no suporta as propriedades. Voc tem
menos trabalho, mas haver alguma diferena de visual nos browsers antigos.
As vezes, colocando uma borda no lugar da sombra j resolve o problema
do visual e no temos o trabalho de criar um PNG somente para isso. Com
a ajuda da biblioteca Modernizr fca fcil saber qual browser no aceita essas
propriedades.
RGBA
Normalmente em web trabalhamos com cores na forma de hexadecimal. a
forma mais comum e mais utilizada desde os primrdios do desenvolvimento
web. Mesmo assim, h outros formatos menos comuns que funcionam sem
HTML5 e CSS3 com Farinha e Pimenta
156
problemas, um destes formatos o RGB. O RGB so 3 conjuntos de nmeros
que comeam no 0 e vo at 255 (0% at 100%), onde o primeiro bloco defne
a quantidade de vermelho (Red), o segundo bloco a quantidade de verde
(Green) e o ltimo bloco a quantidade de azul (Blue). A combinao destes
nmeros formam todas as cores que voc pode imaginar.
z
No HTML o RGB pode ser usado em qualquer propriedade que tenha a
necessidade de cor, como: color, background, border etc. Exemplo:
p {
background:rgb(255,255,0);
padding:10px;
font:13px verdana;
}
Este cdigo RGB defne que o background o elemento P ser amarelo.
RGBA E A DIFERENA DA PROPRIEDADE OPACITY
O CSS3 nos trouxe a possibilidade de modifcar a opacidade dos elementos
via propriedade opacity. Lembrando que quando modifcamos a opacidade
do elemento, tudo o que est contido nele tambm fca opaco e no apenas o
background ou a cor dele. Veja o exemplo abaixo e compare as imagens:
A primeira a imagem normal, sem a aplicao de opacidade:
157
HTML5 e CSS3 com Farinha e Pimenta CSS
Agora com o bloco branco, marcado com um P, com opacidade defnida.
Perceba que o background e tambm a cor do texto fcaram transparentes.
Isso til mas difculta muito quando queremos que apenas a cor de fundo
de um determinado elemento tenha a opacidade modifcada. a que entra
o RGBA. O RGBA funciona da mesma forma que o RGB, s que no caso do
RGBA, alm dos 3 canais RGB (Red, Green e Blue) h um quarto canal, A
(Alpha) que controla a opacidade da cor. Nesse caso, podemos controlar a
opacidade da cor do background sem afetar a opacidade dos outros elementos:
O funcionamento assim:
Veja um exemplo aplicado abaixo:
p {
HTML5 e CSS3 com Farinha e Pimenta
158
background:rgba(255,255,0, 0.5);
padding:10px;
font:13px verdana;
}
O ltimo valor referente ao canal Alpha, onde 1 totalmente visvel e 0
totalmente invisvel. No exemplo acima est com uma opacidade de 50%.
Diferenas entre RGB e HSL
A manipulao de cores no HTML nunca foi muito fexvel. No comeo
escolhamos as cores escrevendo seus nomes por extenso como: black, blue,
yellow, green, olive, maroon, fuchsia, red, white, silver, navy, teal, purple, lime,
gray, aqua. Na dcada de 80 houve um acrscimo de 131 novas cores com
nomes estranhos chamada X115. Estes nomes foram adotados pelos primeiros
browsers tem sido suportados at hoje. H nomes como mintcream, moccasin,
navajowhite, powderblue, springgreen entre outros O W3C ainda mantm
uma lista completa dos nomes dessas cores.

Alm de ser muito difcil de manter uma coleo de cores com seus nomes
esquisitos, quase impossvel de criar um website tentando se adequar a
quantidade limitada de cores disponveis. J tnhamos problemas sufcientes
com a quantidade limitada de fonts, imagine o trabalho que teramos se os
layouts fossem feitos apenas com um punhado e cores. Com esse problemas
vrios padres matemticos foram estabelecidos para a criao de qualquer
cor. Existem dois padres conhecidos chamados de RGB e HSL.
O formato RGB est fcando mais popular com o CSS3 por que agora podemos
controlar o canal alpha utilizando o formato RGBA. H tambm outro formato
que ganhou alguma ateno do workgroup no W3C que o formato de cor
chamado HSL. Como o RGB, o HSL tambm ganhou um canal de opacidade,
fcando HSLA. Muitos desenvolvedores ainda tem dvidas sobre as diferenas
entre RGBA e HSLA e qual utilizar.
5
http://en.wikipedia.org/wiki/X11_color_names
6
http://www.w3.org/TR/SVG/types.html#ColorKeywords
159
HTML5 e CSS3 com Farinha e Pimenta CSS
Tudo muito simples de entender. RGB e HSL so dois formatos de
composio de cores digitais. Voc pode escolher qual dos dois utilizar, vai
do seu gosto. Contudo como at hoje utilizamos o HEXADECIMAL como
padro de cores para web, minha sugesto esperar para ver qual das duas
especfcaes cair no gosto do mercado para escolher um dos formatos
para utiliz-la mais frenquentemente nos projetos. Ao que parece o RGB est
fcando mais popular.
Entretanto os dois formatos tem fexibilidades diferentes e por isso pode ser
muito difcil apenas uma delas se tornar mais popular que outra.
O RGB
O processo simples: como na vida real onde voc mistura cores para
obter uma outra cor como resultado, voc faz a mesma coisa com o RGB:
voc mistura as cores para obter uma outra cor como resultado. Para isso
utilizaremos a soma de 3 valores: Red, Green e Blue: rgba(red, green, blue);
Veja a sintaxe abaixo para entender melhor a aplicao:
p {
color: rgb(100%, 100%, 0%);
}
Os trs valores so ligados s trs principais respectivamente vermelha, verde
e azul. No caso acima inseri 100% de cor para Vermelho e Verde. Como bom
aluno de educao artstica, voc deve saber que misturando vermelho e
verde a cor resultante ser amarelo.
Voc pode ser mais especfco controlando at mesmo a frao da porcentagem,
por exemplo:
p {
HTML5 e CSS3 com Farinha e Pimenta
160
color: rgb(55.2%, 100%, 0%);
}
Assim voc consegue exatamente a cor que precisa. Esse formato de
porcentagem e controle de frao tambm aplicado ao HSL.
O RGB pode ser confgurado utilizando valores hexadecimais. A conta no
simples e voc precisa ser um pouco nerd para entender. A explicao meio
longa. Sugiro que voc leia no Wikipedia algo mais detalista.
O HSL
O HSL funciona um pouco diferente. A sintaxe como abaixo:
p {
color: hsl(0, 100%, 30%);
}
A escolha de cores no HSL no baseado na mistura mas sim em um
esquema baseado em um cilindro. O primeiro nmero de valor na sintaxe
onde escolhemos a cor. Comeamos no topo com vermelho, onde o valor
0, e damos uma volta de 360 graus, retornando novamente no topo, na cor
vermelha. Conforme aumentamos o valor vamos selecionando as cores. Por
exemplo, se selecionarmos um valor por volta de 120 obtemos um verde.
Veja a prxima imagem para entender melhor:
7
http://en.wikipedia.org/wiki/RGB_color_model
161
HTML5 e CSS3 com Farinha e Pimenta CSS
Embora possamos escolher qualquer cor misturando as cores com o RGB,
muito mais instintivo escolhermos uma cor especfca e modifcarmos sua
luminosidade. Escolhemos o azul e modifcamos sua luminosidade para
obtermos o tom que voc deseja.
Para escolhermos a luminosidade e a saturao da cor modifcamos os
dois outros valores, o segundo valor a luminosidade e o terceiro valor
a saturao ou a quantidade de cinza que voc colocar na cor. Modifcar a
saturao como se voc mudasse a quantidade de cor. Quanto menos cor,
mais cinza. Se voc quiser uma cor mais suja, mais apagada, voc diminui
este valor. Caso contrrio voc a mantm como 100% e utiliza a quantidade
integral da cor. Normalmente esse ser o padro.
E O HEXADECIMAL?
O hexadecimal, queridinho dos nossos coraes, sempre estar ao nosso lado.
A sintaxe muito mais curta que as outras duas especfcaes mas no temos
todas as vantagens que as outras especifcaes nos do, comeando pelo
canal alpha. Com a grande maioria dos programas visuais dando suporte ao
formato hexadecimal ele ainda perdurar durante muito tempo.
HTML5 e CSS3 com Farinha e Pimenta
162
CURRENTCOLOR
O valor currentColor muito simples de se entender e pode ser muito til
para diminuirmos o retrabalho em alguns momentos da produo. Imagine
que o currentColor uma varivel cujo seu valor defnido pelo valor da
propriedade color do seletor. Veja o cdigo abaixo:
p {
background:red;
padding:10px;
font:13px verdana;
color: green;
border:1px solid green;
}
Note que o valor da propriedade color igual ao valor da cor da propriedade
border.
H uma redundncia de cdigo, que nesse caso irrelevante, mas quando
falamos de dezenas de arquivos de CSS modulados, com centenas de linhas
cada, essa redundncia pode incomodar a produtividade. A funo do
currentColor simples: ele copia para outras propriedades do mesmo seletor
o valor da propriedade color. Veja o cdigo abaixo para entender melhor:
p {
background:red;
padding:10px;
font:13px verdana;
color: green;
border:1px solid currentColor;
}
Veja que apliquei o valor currentColor onde deveria estar o valor de cor da
propriedade border. Agora, toda vez que o valor da propriedade color for
modifcado, o currentColor aplicar o mesmo valor para a propriedade onde
ela est sendo aplicada.
163
HTML5 e CSS3 com Farinha e Pimenta CSS
Isso funciona em qualquer propriedade que faa utilizao de cor como
background, border, etc. Obviamente no funciona para a propriedade color.
O currentColor tambm no funciona em seletores separados, ou seja, voc
no consegue atrelar o valor da propriedade color ao currentColor de outro
seletor.
@FONT-FACE
A regra @font-face utilizada para que voc utilize fonts fora do padro do
sistema em seus sites. Para que isso funcione ns disponibilizamos as fonts
necessrias em seu servidor e linkamos estas fonts no arquivo CSS. A sintaxe
bem simples e tem suporte a todos os navegadores, com algumas ressalvas.
@font-face {
font-family: helveticaneue;
src: url(helveticaNeueLTStd-UltLt.otf);
}
Na primeira linha voc customiza o nome da font que voc usar durante
todo o projeto. Na segunda linha defnimos a URL onde o browser procurar
o arquivo da font para baixar e aplicar no site. Voc aplica a fonte como abaixo:
p {font:36px helveticaneue, Arial, Tahoma,
Sans-serif;}
Suponha que o usurio tenha a font instalada, logo ele no precisa baixar
a font, assim podemos indicar para que o browser possa utilizar o arquivo
da prpria mquina do usurio. Menos requisies, mais velocidade. Veja o
cdigo abaixo:
@font-face {
font-family: helveticaneue;
src: local(HelveticaNeueLTStd-UltLt.otf),
url(HelveticaNeueLTStd-UltLt.otf);
}
HTML5 e CSS3 com Farinha e Pimenta
164
Abaixo segue uma srie de formatos que podem ser usados e que os browsers
podem adotar:
String Font Format
Common
Extensions
truetype TrueType .ttf
opentype OpenType .ttf, .otf
truetype-aat
TrueType with Apple
Advanced Typography
extensions
.ttf
embedded-opentype Embedded OpenType .eot
wof
WOFF (Web Open Font
Format)
.wof
svg SVG Font .svg, .svgz
Compatibilidade
As verses 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a
font for EOT. Voc pode encontrar qualquer conversor online e esse problema
resolvido. Voc pode converter suas fonts para EOT diretamente no Font
Squirrel. O Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF.
Para suprir a necessidade de ateno do Internet Explorer, voc precisa
especifcar a URL da font .eot para que o Internet Explorer possa aplicar a
font corretamente. A sintaxe fca desta forma:
@font-face {
font-family: helveticaneue;
src: url(helveticaNeueLTStd-UltLt.eot);
src: url(helveticaNeueLTStd-UltLt.otf);
}
165
HTML5 e CSS3 com Farinha e Pimenta CSS
CRIANDO UM PACOTE FONT-FACE
O Font Squirrel fez um pequeno favor para toda a comunidade. um
sisteminha que converte suas fonts para os formatos necessrios e te devolve
para voc utilizar em seus sites: http://migre.me/4qST9
MLTIPLOS BACKGROUNDS
Quem nunca teve que criar um background onde havia um gradiente em
cima, embaixo e dos lados? Voc sabe que para criar algo parecido voc no
pode utilizar uma imagem s. A soluo at hoje seria criar 4 elementos
divs aninhados (ou seja, um dentro do outro) e aplicar um pedao deste
background em cada destes elementos para dar a sensao de um background
nico. O resultado interessante mas o meio que isso feito no nada bonito.
Voc era obrigado a declarar 4 elementos inteis no seu HTML apenas
para compensar um efeito visual. A possibilidade de atribuirmos mltiplos
backgrounds em apenas um elemento a feature que vai ajud-lo a no sujar
seu cdigo.
A sintaxe para mltiplos backgrounds praticamente idntica a sintaxe para
defnir um background. Segue abaixo um exemplo:
div {
width:600px;
height:500px;
background:
url(img1.png) top left repeat-X,
url(img2.png) bottom left repeat-Y;
}
Defnimos apenas uma propriedade background, o valor dessa propriedade
em vez de conter apenas um valor como normalmente fazemos, poder haver
HTML5 e CSS3 com Farinha e Pimenta
166
vrios, com suas respectivas defnies de posio, repeat e attachment (fxed).
COLUMNS
Com a propriedade columns defnimos colunas de texto de forma automtica.
At hoje no havia maneira de fazer isso de maneira inteligente com CSS
e o grupo de propriedades columns pode fazer isso de maneira livre de
gambiarras.
COLUMN-COUNT
A propriedade column-count defne a quantidade de colunas ter o bloco de
textos.
/* Defne a quantidade de colunas, a largura
defnida uniformimente. */
-moz-column-count: 2;
-webkit-column-count: 2;
COLUMN-WIDTH
Com a propriedade column-width defnimos a largura destas colunas.
-moz-column-width: 400px;
-webkit-column-width: 400px;
Fiz alguns testes aqui e h uma diferena entre o Firefox 3.5 e o Safari 4 (Public
Beta).
O column-width defne a largura mnima das colunas. Na documentao
do W3C a seguinte: imagine que voc tenha uma rea disponvel para as
colunas de 100px. Ou seja, voc tem um div com 100px de largura (width).
167
HTML5 e CSS3 com Farinha e Pimenta CSS
E voc defne que as larguras destas colunas (column-width) sejam de 45px.
Logo, haver 10px de sobra, e as colunas iro automaticamente ter 50px de
largura, preenchendo este espao disponvel. esse o comportamento que o
Firefox adota.
J no Safari acontece o seguinte: se voc defne um column-width, as colunas
obedecem esse valor e no preenchem o espao disponvel, como acontece
na explicao do W3C e como acontece tambm no Firefox. Dessa forma faz
mais sentido para mim.
Como a propriedade no est 100% aprovada ainda, h tempo para que isso
seja modifcado novamente. Talvez a mudana da nomenclatura da classe
para column-min-width ou algo parecida venha a calhar, assim, fcamos com
os dois resultados citados, que so bem teis para ns de qualquer maneira.
COLUMN-GAP
A propriedade column-gap cria um espao entre as colunas, um gap.
/* Defne o espao entre as colunas. */
-moz-column-gap: 50px;
-webkit-column-gap: 50px;
Utilizamos aqui os prefxos -moz- e -webkit-, estas propriedades no
funcionam ofcialmente em nenhum browser. Mas j podem ser usados em
browsers como Firefox e Safari.
TRANSFORM 2D
A propriedade transform manipula a forma com que o elemento aparecer
na tela. Voc poder manipular sua perspectiva, escala e ngulos. Uma
transformao especifcada utilizando a propriedade transform. Os browsers
HTML5 e CSS3 com Farinha e Pimenta
168
que suportam essa propriedade, a suportam com o prefxo especifcado. Os
valores possveis at agora esto abaixo:
scale
O valor scale modifcar a dimenso do elemento. Ele aumentar
proporcionalmente o tamanho do elemento levando em considerao o
tamanho original do elemento.
skew
Skew modifcar os angulos dos elementos. Voc pode modifcar os ngulos
individualmente dos eixos X e Y como no cdigo abaixo:
-webkit-transform: skewY(30deg);
-webkit-transform: skewX(30deg);
translation
O translation mover o elemento no eixo X e Y. O interessante que voc
no precisa se preocupar com foats, positions, margins e etc. Se voc aplica o
translation, ele mover o objeto e pronto.
rotate
O rotate rotaciona o elemento levando em considerao seu ngulo,
especialmente quando o ngulo personalisado com o transform-origin.
CSS TRANSFORM NA PRTICA
Veja o cdigo abaixo e seu respectivo resultado:
img {
-webkit-transform: skew(30deg); /* para webkit
*/
-moz-transform: skew(30deg); /* para gecko */
-o-transform: skew(30deg); /* para opera */
transform: skew(30deg); /* para browsers sem
169
HTML5 e CSS3 com Farinha e Pimenta CSS
prefxo */
}
O cdigo acima determina que o ngulo da imagem ser de 30deg. Colocamos
um exemplo para cada prefxo de browser. Ficando assim:
Vrias transformaes em um nico elemento
Para utilizarmos vrios valores ao mesmo tempo em um mesmo elemento,
basta defnir vrios valores separando-os com espaos em uma mesma
propriedade transform:
img {
/* para webkit */
-webkit-transform: scale(1.5) skew(30deg);

/* para gecko */
-moz-transform: scale(1.5) skew(30deg);
HTML5 e CSS3 com Farinha e Pimenta
170

/* para opera */
-o-transform: scale(1.5) skew(30deg);
/* para browsers sem prefxo */
transform: scale(1.5) skew(30deg); }
transform-origin
A propriedade transform-origin defne qual o ponto do elemento a
transformao ter origem. A sintaxe idntica ao background-position.
Observe o cdigo abaixo:
img {
-webkit-transform-origin: 10px 10px; /* para
webkit */
-moz-transform-origin: 10px 10px; /* para webkit
*/
-o-transform-origin: 10px 10px; /* para webkit
*/
transform-origin: 10px 10px; /* para webkit */
}
Como padro as transies sempre acontecem tendo como ponto de ncora
o centro do objeto. H algumas situaes que pode ser que voc queira
modifcar essa ncora, fazendo com que por exemplo, a rotao acontea em
algum dos cantos do elemento. O cdigo de exemplo acima far com que a
transformao acontea a partir dos 10px do topo no canto esquerdo. Veja a
comparao entre o padro e o resultado do cdigo acima.
171
HTML5 e CSS3 com Farinha e Pimenta CSS
A propriedade transform fca mais interessante quando a utilizamos com a
propriedade transition, onde podemos executar algumas animaes bsicas
manipulando os valores de transformao.
INTRODUO AO CSS 3D
O CSS 3D sem dvida uma das features do CSS mais aguardadas por todas as
crianas do Brasil. Fala a verdade! Fazer efeitozinhos com sombra, gradientes,
transparncias e etc j foi um dia na vida do desenvolvimento algo bacana.
Hoje muito fora de moda. Carne de vaca, sabe? Por isso o CSS 3D to
esperado. Ele trar para a web efeitos visuais para layout que antes s viamos
em sistemas que rodam em smartphones, tipo um iPhone ou nos sistemas
operacionais mais populares como Linux e OSX.
Mas no se anime muito. Eu sei que voc est ansioso para sair por a colocando
efeitos 3D de CSS em tudo quanto aplicao. Mas calma entenda que o CSS
foi feito para estilizar documentos. Voc o utiliza para melhorar a experincia
dos usurios nos diversos dispositivos e no para enfeitar seu website como se
HTML5 e CSS3 com Farinha e Pimenta
172
fosse uma penteadeira. Lembra-se dos websites cheios de gifs animados? Pois
, cuidado para no cair no mesmo erro. Voc estar utilizando o CSS 3D da
maneira certa se seus efeitos passarem desapercebidos pelo usurio ao utilizar
seu sistema. Encher seu sistema com efeitos a cada clique ou a cada ao pode
fazer com que o usurio perca tempo e a pacincia.
Mas vamos ao que interessa.
O suporte
Infelizmente isso ainda est restrito para browsers. O Internet Explorer
no tem suporte ainda e nem tem data para tal. Todos os exerccios que
voc ver neste post so feitos para browsers que tem WebKit como motor
de renderizao. Por isso teste em seu Chrome ou no seu Safari. Eu testei
no Chrome porque o Safari mostrou algumas inconsistncias. O Opera est
esperando as especifcaes de CSS Transforms amadurecerem para adicionar
este recurso. Testei no Firefox 8.0.1 e o exerccio no funcionou.
A degradao do CSS 3D para os browsers que no o suportam um pouco
infeliz. Sugiro que se voc for utilizar essas features, tente faz-lo em projetos
restritos para que no haja problemas com usurios de browsers antigos. Se
ainda assim voc quiser arriscar, crie solues especifca para seu projeto,
fazendo com que a experincia do seu cliente no seja muito prejudicada.
Sugiro que utilize a biblioteca Modernizr para identifcar os browsers que no
entendem o CSS 3D.
TUDO UMA QUESTO DE PERSPECTIVA
Para falar de 3D, precisamos falar sobre perspectiva. Para ativar uma rea 3D
o elemento precisar de perspectiva.
Voc pode aplicar a perspectiva ao elemento de duas formas: utilizando
diretamente a propriedade perspective ou adicionando um valor perspective()
173
HTML5 e CSS3 com Farinha e Pimenta CSS
na propriedade transform.

div {
-webkit-perspective: 600;
}
Ou:

div {
-webkit-transform: perspective(600);
}
Estes dois formatos so os gatilhos que ativam a rea 3D onde o elemento ir
trabalhar.
O valor da perspectiva determina a intensidade do efeito. Imagine como se
fosse a distncia de onde vemos o objeto. Quanto maior o valor, mais perto
o elemento estar, logo, menos intenso ser o visual 3D. Logo, se colocarmos
um valor de 2000, o objeto no ter tantas mudanas visuais e o efeito 3D ser
suave. Se colocarmos 100, o efeito 3D ser muito visvel, como se fosse um
inseto olhando um objeto gigante.
Voc tambm precisa entender sobre o ponto de fuga. O ponto de fuga
por padro est posicionado no centro. Voc pode modifcar essa posio
com a propriedade perspective-origin, que muito parecido com a
propriedade transform-origin, que defne onde a ao de transformao do
objeto acontecer, nesse caso quando falamos de aes 2D. A propriedade
perspective-origin afeta os eixos X e Y do elemento flho.
CSS 3D TRANSFORMS
Se voc ainda no leu sobre CSS Transforms voc pode ler algo aqui e ver em
ao aqui. As propriedades so praticamente iguais, mas aplicadas para os
princpios de 3D e no 2D.
HTML5 e CSS3 com Farinha e Pimenta
174
Voc deve estar acostumado a trabalhar com os eixos X e Y no CSS padro. No
CSS 3D podemos manipular tambm o eixo Z, que representa a profundidade.
Veja um exemplo utilizando os valores rotateY, rotateX e translateZ. Perceba
que no translateZ eu utilizei valores negativos e positivos. Quando utilizo o
valor negativo, o objeto fca mais longe, se coloco valores positivos, o objeto
fca mais perto.
Abaixo segue uma imagem do resultado do exemplo:
Ns podemos utilizar tambm alguns atalhos para estes valores onde podemos
defnir as trs dimenses de uma vez:
translate3d(x,y,z)
scale3d(x,y,z)
rotate3d(x,y,z,angle)
Muito importante: ao utilizar as propriedades resumidas, os browsers ativam
automaticamente a acelerao por hardware no Safari para que as animaes
tenham uma melhor performance.
175
HTML5 e CSS3 com Farinha e Pimenta CSS
FAZENDO O EFEITO DE CARD FLIP
O efeito de Card Flip muito conhecido entre os usurios de iPhone.
A estrutura HTML esta:

<section class=geral>
<div class=carta>
<fgure class=frente><img src=card-front.
jpg></fgure>
<fgure class=atras><img src=card-back.
jpg></fgure>
</div>
</section>
O elemento .geral onde iniciaremos o ambiente 3D. O elemento .carta age
como container dos objetos 3D. Cada face da carta est separada por um
elemento fgure, com uma imagem.
Para comear, precisamos aplicar a perspectiva para o elemento .geral iniciar
o espao 3D.

.geral {
width: 200px;
height: 293px;
position: relative;
margin:10% auto 0;
-webkit-perspective: 500;
}
Defni uma largura e altura, coloquei um position: relative; para que os
elementos dentro dele sejam posicionados se referenciando por ele. Coloquei
uma margem s para separ-lo do topo do body a fm de conseguirmos ver
melhor os efeitos.
Por fm, coloquei a propriedade -webkit-perspective: 500; para aplicarmos o
efeito 3D. O valor de 500 faz uma boa perspectiva.
HTML5 e CSS3 com Farinha e Pimenta
176
Agora defniremos as dimenses da carta e suas propriedades.

.carta {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
}
Largura e altura precisam ser de 100% para defnir a rea que o 3D ir
aplicar. O position: absolute; necessrio para que as cartas fquem relativas
ao elemento .geral. A propriedade -webkit-transition: -webkit-transform 1s;
defne o tempo de transio do efeito, neste caso ele vai durar 1 segundo.
Formatando as cartas:

.carta fgure {
margin:0;
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
}
Vamos direto para a propriedade -webkit-backface-visibility: hidden; j que
as outras dispensam comentrios. Essa propriedade faz com que a face de trs
da carta no aparea e nem se sobreponha no momento do efeito.
E fnalmente, para fazer com que a parte de trs da carta aparea no verso
correto, ns temos que rotacion-la.

.atras{-webkit-transform: rotateY(180deg);}
E feito se completa com o trigger para fazer a animao acontecer. Nesse caso
farei com um hover no elemento .carta, onde iremos rotacion-lo em -180
graus.
177
HTML5 e CSS3 com Farinha e Pimenta CSS

.carta:hover {
-webkit-transform: rotateY(-180deg);
}
E Voil! Se quiser brincar um pouco, modifque a origem da transformao
com a propriedade -webkit-transform-origin. Adicionando essa linha, a
transformao acontece para a direita em vez de ser pelo centro, como o
padro:

.carta:hover {
-webkit-transform: rotateY(-180deg);
-webkit-transform-origin: right center;
}
PROPRIEDADE TRANSITION
Durante muito tempo o CSS s serviu para pintar quadradinhos e mais nada.
Desde quando o pessoal do WaSP organizou todo o movimento dos Padres
Web fazendo com que todos os desenvolvedores, fabricantes de browsers e
at mesmo o W3C acreditassem no poder dos padres no houve grandes
atualizaes no CSS. Praticamente formatvamos font, background, cor,
tamanhos e medidas de distncia e posio.
A propriedade transition, a regra keyframe e outras propriedades vieram
vitaminar a funo que o CSS tem perante o HTML acrescentando maneiras
de produzirmos animaes e transies. No estou dizendo que voc far
animaes complicadas, com diversos detalhes tcnicos e etc. Para esse tipo
de resultado existem outras ferramentas, incluindo Canvas e SVG, que com
certeza faro um trabalho melhor com menos esforo. Mas fato que as
animaes via CSS nos ajudam a levar a experincia do usurio para outro
patamar.
HTML5 e CSS3 com Farinha e Pimenta
178
Lembrando que o nvel de suporte de algumas dessas tcnicas ainda muito
baixo. A propriedade transition funciona em boa parte dos browsers atuais.
Mas a regra keyframe que nos permite controlar as fases de uma animao
ainda muito restrito. Para uma tabela mais atual e detalhada de suporte e
compatibilidade, faa uma procura no Google ou procure no site Can I Use
(http://caniuse.com/). Onde for possvel demonstrarei o cdigo com o prefxo
dos browsers que suportam as propriedades.
PEQUENAS TRANSIES
A propriedade transition praticamente auto explicativa. Sua sintaxe to
simples que talvez at dispense explicaes mais elaboradas. Vamos comear
com o cdigo abaixo:
a {
color: white;
background: gray;
}
No cdigo defnimos que o link ter sua cor de texto igual a preta e seu
background ser cinza.
O resultado esperado que ao passar o mouse no link a cor do texto seja
modifcada, mudando do branco para o preto e que a cor de background
mude de cinza para vermelho. O cdigo abaixo faz exatamente isso:
a {
color: white;
background: gray;
}
a:hover {
color: black;
background: red;
}
179
HTML5 e CSS3 com Farinha e Pimenta CSS
O problema que a transio muito brusca. O browser apenas modifca as
caractersticas entre os dois blocos e pronto. No h nenhuma transio suave
entre os dois estados.
Podemos fazer a mudana de um estado para outro utilizando a propriedade
transition. Suponha que ao passar o mouse, as mudanas acontecessem em
um intervalo de meio segundo. Bastaria colocar a propriedade transition no
a:hover e pronto. Ao passar o mouse, o browser modifcaria as caractersticas
do link com uma pequena transio de meio segundo. O cdigo seria como
se segue abaixo:
a:hover {
color: black;
background: red;
-webkit-transition: 0.5s; /* Com prefxo do
Safari */
transition: 0.5s; /* Para browsers que suportam
a propriedade */
}

Dessa forma a transio apenas acontece quando o hover ativado. O problema
que ao tirar o mouse, o browser volta bruscamente para as caractersticas
iniciais. Para modifcar isso basta inserir tambm a propriedade transition no
estado inicial.
a {
color: white;
background: gray;
-webkit-transition: 0.5s;
}
a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}
HTML5 e CSS3 com Farinha e Pimenta
180
O que a propriedade transition faz comparar os valores das propriedades em
comum entre os dois estados do link ou de qualquer outro elemento, assim ela
modifca suavemente os valores quando h a ativao da funo. Esta uma
tcnica simples e que serve para manipularmos transies bsicas como cor,
tamanho, posio etc.
Agora suponha que em um bloco h uma determinada propriedade que no
outro bloco no h, como no cdigo abaixo:
a {
border:1px solid orange;
color: white;
background: gray;
-webkit-transition: 0.5s;
}
a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}
Nesse caso o browser detecta que h uma propriedade no primeiro estado,
mas no no segundo, por isso ele no faz a transio desta propriedade,
apenas das propriedades em comuns.
Abaixo veja o cdigo. copie em um arquivo HTML e veja o efeito:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=utf-8>
<title>CSS Transition</title>
<style type=text/css media=screen>
a {
color:white;
181
HTML5 e CSS3 com Farinha e Pimenta CSS
background:gray;
-webkit-transition: 0.5s linear;
}
a:hover {
color:black;
background:red;
-webkit-transition: 0.5s linear;
}
</style>
</head>
<body>
<a href=#>Link! Hello World!</a>
</body>
</html>
PROPRIEDADE ANIMATION E REGRA
KEYFRAME
A propriedade trasition trabalha de forma muito simples. Voc praticamente
diz para o browser qual o valor inicial e o valor fnal para que ele aplique
a transio automaticamente, controlamos praticamente apenas o tempo de
execuo. Para termos mais controle sobre a animao temos a propriedade
animation que trabalha juntamente com a rule keyframe.
Basicamente voc consegue controlar as caractersticas do objeto e suas
diversas transformaes defnindo fases da animao. Observe o cdigo
abaixo e veja seu funcionamento:
@-webkit-keyframes rodar {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
HTML5 e CSS3 com Farinha e Pimenta
182
}
}
O cdigo acima defne um valor inicial e um valor fnal. Agora vamos aplicar
esse cdigo a um elemento. Minha ideia fazer um DIV girar. ;-)
O cdigo HTML at agora este. Fiz apenas um div e defni este keyframe:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title></title>
<meta charset=utf-8>
<style>
@-webkit-keyframes rodaroda {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Primeiro voc defne a funo de animao, no caso o nosso cdigo que
defne um valor inicial de 0 graus e um valor fnal de 360 graus. Agora vamos
defnir as caractersticas deste DIV.
div {
width:50px;
height:50px;
183
HTML5 e CSS3 com Farinha e Pimenta CSS
margin:30% auto 0;
background:black;
}
Nas primeiras linhas defni qual ser o estilo do div. Ele ter uma largura e
uma altura de 50px. A margin de 30% do topo garantir um espao entre o
objeto e o topo do documento e background preto.
A propriedade animation tem uma srie de propriedades que podem ser
resumidas em um shortcode bem simples. Veja a tabela logo a seguir para
entender o que cada propriedade signifca:
Propriedade Defnio
animation-name Especifcamos o nome da funo de animao
animation-duration
Defne a durao da animao. O valor
declarado em segundos.
animation-timing-
function
Descreve qual ser a progresso da animao
a cada ciclo de durao. Existem uma srie
de valores possveis e que pode ser que o seu
navegador ainda no suporte, mas so eles: ease,
linear, ease-in, ease-out, ease-in-out, cubic-
bezier(<number>, <number>, <number>,
<number>) [, ease, linear, ease-in, ease-out,
ease-in-out, cubic-bezier(<number>, <number>,
<number>, <number>)]*O valor padro ease.
animation-interation-
count
Defne o nmero de vezes que o ciclo deve
acontecer. O padro um, ou seja, a animao
acontece uma vez e pra. Pode ser tambm
infnito defnindo o valor infnite no valor.
HTML5 e CSS3 com Farinha e Pimenta
184
animation-direction
Defne se a animao ir acontecer ou no no
sentido inverso em ciclos alternados. Ou seja,
se a animao est acontecendo no sentido
horrio, ao acabar a animao, o browser faz a
mesma animao no elemento, mas no sentido
antihorrio. Os valores so alternate ou normal.
animation-play-state
Defne se a animao est acontecendo ou se est
pausada. Voc poder por exemplo, via script,
pausar a animao se ela estiver acontecendo. Os
valores so running ou paused.
animation-delay
Defne quando a animao ir comear. Ou seja,
voc defne um tempo para que a animao
inicie. O valor 0, signifca que a animao
comear imediatamente.
Voltando para o nosso cdigo, vamos aplicar algumas dessas propriedades:
div {
width:50px;
height:50px;
margin:30% auto 0;
background:black;
-webkit-animation-name: rodaroda;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infnite;
-webkit-animation-direction: alternate;
}
Veja que na propriedade animation-name chamamos o mesmo nome
que demos na nossa funo de keyframe logo no comeo da explicao.
Depois defnimos uma durao de ciclo de meio segundo. Defnimos
que o comportamento da animao ser linear, e com a propriedade
185
HTML5 e CSS3 com Farinha e Pimenta CSS
animation-iteration-count defnimos que ele girar infnitamente. E por
ltimo defnimos pelo animation-direction que a animao dever ser
alternada, ou seja, o DIV girar para um lado, e quando alcanar o fnal da
animao, o browser dever alternar essa animao.
Podemos melhorar esse cdigo utilizando a verso shortcode, que mais
recomendado. Veja a ordem que devemos escrever as propriedades animation
em forma de shortcode:
animation: [<animation-name> || <animation-duration>
|| <animation-timing-function> || <animation-delay> ||
<animation-iteration-count> || <animation-direction>] [,
[<animation-name> || <animation-duration> || <animation-
timing-function> || <animation-delay> || <animation-
iteration-count> || <animation-direction>] ]*
Aplicando isso ao nosso cdigo:
div {
width:50px;
height:50px;
margin:30% auto 0;
background:black;
-webkit-animation: rodaroda 0.5s linear infnite
alternate;
}
Pronto. Agora temos um elemento que gira sem parar, ora para direita ora
para esquerda.
DEFININDO CICLOS
Ns defnimos no keyframe do nosso ltimo exemplo apenas um incio
e um fm. Mas e se quisssemos que ao chegar na metade da animao o
nosso elemento fcasse com o background vermelho? Ou que ele mudasse
HTML5 e CSS3 com Farinha e Pimenta
186
de tamanho, posio e etc? a onde podemos fexibilizar melhor nosso
keyframe defnindo as fases da animao. Por exemplo, podemos dizer para o
elemento ter uma cor de background diferente quando a animao chegar aos
10% do ciclo, e assim por diante.
Veja o exemplo:
@-webkit-keyframes rodaroda {
0% {
-webkit-transform:rotate(0deg);
}
50% {
background:red;
-webkit-transform:rotate(180deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}
Defnimos acima que o incio da animao o elemento comear na posio
normal, 0 graus.
Quando a animao chegar aos 50% do ciclo, o elemento dever ter girado
para 180 graus e o background dele deve ser vermelho. E quando a animao
chegar a 100% o elemento deve ter girado ao todo 360 graus e o background,
como no est sendo defnido, volta ao valor padro, no nosso caso black, que
foi defnido no CSS onde formatamos este DIV.
Logo nosso elemento girar pra sempre e fcar alternando a cor de fundo
de preto para vermelho. Fiz um exemplo bem simples modifcando apenas
o background, mas voc pode muito bem defnir um position e modifcar os
valores de lef e top para fazer o elemento se movimentar.
No exemplo tambm defni apenas 3 estgios (0%, 50% e 100%) voc pode
defnir um maior nmero de estgios: 5%, 10%, 12%, 16% e etc... Adequando
as fases da animao s suas necessidades.
187
HTML5 e CSS3 com Farinha e Pimenta CSS
H exemplos muito interessantes na internet onde podemos ver todo o poder
das animaes feitas pela CSS. Veja o exemplo que fzemos aqui neste texto no
endereo: http://migre.me/4ubym
MDULO TEMPLATE LAYOUT
Para mim a parte mais fcil de desenvolver um site com CSS o planejamento
e diagramao do layout. Coincidentemente a parte que mais os
desenvolvedores tem problemas de compatibilidade crossbrowser ou por
falta de recursos mais avanados. Mas se voc parar para pensar, apenas uma
propriedade cuida dessa parte, que a propriedade foat. At agora, para mim,
o foat era a propriedade mais importante que existia no CSS. O foat cuidava
de toda a diagramao do site, desde os elementos que defniam as reas
principais do site at os pequenos detalhes de imagens e cones.
A propriedade foat muito simples de se entender. O problema no o
funcionamento, mas os efeitos que a propriedade foat causa nos elementos
prximos. Se voc pede para duas colunas fcarem futuando esquerda e outra
coluna direita, o rodap sobe. Ou se voc coloca um elemento envolvendo
outros elementos com foat, esse elemento perde a altura. Estes so problemas
corriqueiros que j tem solues inteligentes e que no apresentam chateaes
mais graves.
Infelizmente o foat no o ideal para a diagramao e organizao dos
elementos do layout. Ele resolve muitos problemas, mas deixa a desejar em
diversos sentidos. A principal desvantagem do foat que ele completamente
dependente da ordem dos elementos no HTML. Existem tcnicas que voc
consegue fazer quase que qualquer oganizao visual sem encostar no cdigo
HTML. Mas h outras necessidades que invariavelmente voc precisar
modifcar a ordem dos elementos no meio do HTML para que a diagramao
do site saia conforme o esperado. Essa organizao do HTML pode alterar
desde programao server-side e at resultados de SEO e acessibilidade. Por
HTML5 e CSS3 com Farinha e Pimenta
188
isso interessante que o HTML fque organizado de forma que ele supre as
necessidades dessas bases. Sua organizao visual deve ser independente desta
organizao. Quem nunca sentiu falta de alternar a posio dos elementos
verticalmente?
Tendo em vista estes e outros problemas o W3C criou um novo mdulo. Na
verdade ele no o nico e nem pode ser para que tenhamos diversas formas
de trabalhar. O mdulo em questo chamado de Template Layout. Esse
mdulo consiste em uma forma de criarmos e organizarmos os elementos e
informaes do layout de forma menos espartana e mais fexvel.
Podemos dividir a construo do layout em duas grandes partes: 1) Defnio
dos elementos mestres e grid a ser seguido. 2) Formatao de font, cores,
background, bordas etc.
As propriedades nesta especifcao trabalham associando uma poltica
de layout de um elemento. Essa poltica chamada de template-based
positioning (no tem nada a ver com a propriedade position, pelo contrrio
uma alternativa) que d ao elemento um grid invisvel para alinhar seus
elementos descendentes.
Porque o layout deve se adaptar em diferentes janelas e tamanhos de papis, as
colunas e linhas do grid deve ser fxas ou fexiveis dependendo do tamanho.
O W3C mostra alguns casos comuns:
- Pginas complexas com mltiplas barras de navegao em reas com
posies fxas como publicidade, submenus e etc.
- Formulrios complexos, onde o alinhamento de labels e campos podem
ser facilmente defnidos com as propriedades deste mdulo com a ajuda das
propriedades de margin, padding e tables.
- GUIs, onde botes, toolbars, labels, cones etc, tem alinhamentos complexos
189
HTML5 e CSS3 com Farinha e Pimenta CSS
que precisam estar sempre alinhados caso o tamanho ou a resoluo da tela
mudem.
- Mdias que so paginadas, como Mdias de impresso onde cada pgina so
divididos em reas fxas para contedos de diferentes gneros.

Template-based positioning so uma alternativa para a propriedade
position com o valor absolute. Antigamente lembro-me que quase todos os
desenvolvedores tentavam organizar e diagramar layouts utilizando position.
No que seja errado, mas defnitivamente no a melhor forma. Costumo
dizer em meus cursos e palestras que position para detalhes. Nada muito
grande, mas para pequenos detalhes. Usamos position para posicionarmos
elementos que no tem relao direta com sua posio no cdigo HTML. Ou
seja, no importa onde o elemento esteja, o position:absolute; ir posicionar o
elemento nas coordenadas que voc quiser.
SINTAXE E FUNCIONAMENTO
O mdulo Template Layout basicamente defne slots de layout para que voc
encaixe e posicione seus elementos. O mapeamento dos slots feito com
duas propriedades que j conhecemos que este mdulo adiciona mais alguns
valores e funcionalidades, so as propriedades position e display.
A propriedade display defne como ser o Grid, ou seja, quantos espaos teis
ter o layout e a propriedade position ir posicionar seus elementos nestes
slots.
Veja o cdigo HTML abaixo:
<div class=geral>
<nav class=menu>...</nav>
<aside class=menulateral>...</aside>
<aside class=publicidade>...</aside>
<article class=post>...</article>
HTML5 e CSS3 com Farinha e Pimenta
190
<footer>...</footer>
</div>
Agora iremos defnir a posio destes elementos. O cdigo CSS seria assim:
.geral {
display: aaa
bcd
eee;
}
nav.menu {position:a;}
aside.menulateral {position:b;}
aside.publicidade {position:d;}
article.post {position:c;}
footer {position:e;}
O FUNCIONAMENTO DA PROPRIEDADE DISPLAY
A propriedade display defne a organizao dos slots. Um slot o local onde
os elementos sero colocados.
Aqui o elemento display trabalha como um table, onde seu contedo ser
colocando em colunas e linhas. A nica diferena que o nmero de linhas
e colunas no dependem do contedo. A outra principal diferena que a
ordem dos descendentes no cdigo no importa. Ou seja, no importa a
estrutura dos elementos no HTML, voc pode coloc-los em qualquer lugar
do layout.
Cada letra diferente um slot de contedo diferente. O @ (arroba) defne um
sinal para um slot padro. E o . (ponto) defne um espao em branco.
Quando repetimos as letras como no exemplo anterior, tanto na horizontal
quanto na vertical, formado um slot nico que se expande para o tamanho
da quantidade de slots. Lembra do colspan ou rowspan utilizados na tabela?
191
HTML5 e CSS3 com Farinha e Pimenta CSS
Pois , funciona igualzinho.
No possvel fazer um slot que no seja retangular ou vrios slots com a
mesma letra. Um template sem letra nenhuma tambm no possvel. Um
template com mais de um @ tambm proibido. Se houverem esses erros a
declarao ignorada pelo browser.
Para defnir a altura da linha (row-height) podemos utilizar o valor padro
auto, que defne a altura da linha de acordo com a quantidade de contedo
no slot. Voc pode defnir um valor fxo para a altura. No possvel defnir
um valor negativo. Quando defnimos um * (astersco) para a altura, isso quer
dizer que todas as alturas de linha sero iguais.
A largura da coluna (col-width) defnida com valores fxos, como o row-
height. Podemos defnir tambm o valor de * que funciona exatamente igual ao
altura de linha, mas aplicados a largura da coluna. H dois valores chamados
max-content e min-content que fazem com que a largura seja determinada de
acordo com o contedo. Outro valor o minmax(p,q) que funciona assim: a
largura das colunas so fxadas para ser maiores ou iguais a p e menores ou
iguais a q. Pode haver um espao branco (white space) em volta de p e q. Se
q > p, ento q ignorado e o minmax(p,q) tratado como minmax(p,p). O
valor ft-content o equivalente a minmax(min-content, max-content).
DEFININDO A LARGURA E ALTURA DOS SLOTS
Para defnir a altura dos slots, utilizamos uma sintaxe diretamente na
propriedade display. Veja abaixo um exemplo de como podemos fazer isso:
display: a a a /150px
b c d
e e e / 150px
100px 400px 100px;
Formatando de uma maneira que voc enteda, fca assim:
HTML5 e CSS3 com Farinha e Pimenta
192
display: a a a /150px
b c d
e e e /150px
100px 400px 100px;
Ou seja, a primeira coluna do grid ter 100px de largura, a segunda 400px e
a terceira 100px.
As medidas que coloquei ao lado, iniciando com uma / (barra) defnem a
altura das linhas. Logo a primeira linha ter 150px e a terceira linha tambm.
A linha do meio, como no tem altura defnida ter a altura de acordo com a
quantidade de contedo.
O espao entre as colunas so defnidos com . (pontos). Veja o exemplo
abaixo:
display: a a a /150px
. . . /50px
b c d
. . . /50px
e e e /150px
100px 400px 100px;
No exemplo acima fz duas colunas no cdigo compostos por pontos em vez
de fazer com letras. Isso quer dizer que entre as colunas do grid haver um
espao em branco de 50px de altura.
193
HTML5 e CSS3 com Farinha e Pimenta CSS
O FUNCIONAMENTO DA PROPRIEDADE POSITION
O valor da propriedade position especifca qual linha e coluna o elemento ser
colocado no template. Voc escreve apenas uma letra por elemento. Vrios
elementos podem ser colocados em um mesmo slot. Logo estes elementos
tero o mesmo valor de position.
Abaixo veja uma imagem que pegamos diretamente do exemplo do W3C. O
layout muito simples:
Este layout representado pelo cdigo abaixo. Primeiro o HTML:
<ul id=nav>
<li>navigation</li>
</ul>
<div id=content>
<div class=module news>
<h3>Weather</h3>
<p>There will be weather</p>
</div>
<div class=module sports>
<h3>Football</h3>
<p>People like football.</p>
</div>
<div class=module sports>
<h3>Chess</h3>
<p>There was a brawl at the chess
HTML5 e CSS3 com Farinha e Pimenta
194
tournament</p>
</div>
<div class=module personal>
<h3>Your Horoscope</h3>
<p>Youre going to die (eventually).</p>
</div>
<p id=foot>Copyright some folks</p>
</div>
Agora veja o CSS com toda a mgica:
body {
display: a b
10em *;
}
#nav {
position: a;
}
#content {
position: b;
display: c . d . e
. . . . . /1em
. . f . .
* 1em * 1em *;
}
.module.news {position: c;}
.module.sports {position: d;}
.module.personal {position: e;}
#foot {position: f;}
Lembre-se que no importa a posio dos elementos no cdigo. E essa
a mgica. Podemos organizar o cdigo HTML de acordo com nossas
necessidades e levando em considerao SEO, Acessibilidade e processo
de manuteno. O HTML fca totalmente intacto separado de qualquer
formatao. Muito, mas muito interessante.
195
HTML5 e CSS3 com Farinha e Pimenta CSS
PSEUDO-ELEMENTO ::SLOT()
Um slot uma rea do layout separada para colocarmos os elemetnos que
escolhermos. Suponha que voc queira que um determinado slot tenha um
fundo diferente, alinhamento e etc... Essa formatao ser aplicada diretamente
no slot e no no elemento que voc colocou l. Fica mais simples de formatar
porque voc no atrela um estilo ao elemento e sim ao slot. Se voc precisar
posicionar aquele elemento em outro lugar, voc consegue facilmente.
body { display: aaa
bcd }
body::slot(b) { background: #FF0 }
body::slot(c), body::slot(d) { vertical-align:
bottom }
As propriedades aplicadas no pseudo elemento slot() seguem abaixo:
Todos as propriedades background.
vertical-align
overfow
box-shadow, block-fow e direction ainda esto sendo estudados pelo W3C se
elas entraro ou no.
MAS E O FLOAT?
senhores... Eu acho que o foat tem seus dias contados para a criao de
estruturas de layouts. Quando utilizamos o foat para estruturar o layout,
ns dependemos profundamente da organizao e posio dos elementos no
cdigo HTML. No estou dizendo que o foat fcar obsoleto, voc ainda vai
utiliz-lo e muito. Voc vai par-lo de utilizar para criar a base estrutural do
site. Ou seja, a estrutura bsica de diviso de contedo ser feita pelo Template
Layout, mas muitos dos detalhes internos e organizao dos elementos
contidos nos elementos mestres sero feitos com foat.
Com o Template Layout a estrutura do layout no depende da posio dos
HTML5 e CSS3 com Farinha e Pimenta
196
elementos do HTML no cdigo, voc poder otimizar o cdigo ao mximo
para os leitores de tela e sistemas de busca, j que estes meios de acesso prezam
pela estrutura do seu contedo.
J funciona?
Sim, j funciona, mas no nativamente nos browser. Esta especifcao ainda
um rascunho do W3C e por isso os browsers ainda no a suportam. Mesmo
assim um desenvolvedor criou um script em Javascript que entende o CSS
desta especifcao e simula os resultados. Funciona muito bem.
PAGED MEDIA
Com certeza voc j deve ter tentado ler um livro ou uma apostila em algum
site na web e preferiu imprimir o texto para ler ofline, no papel por ser mais
confortvel ou por ser mais prtico quando no se est conectado. Existem
vrios motivos para que um leitor queira imprimir o contedo de um site,
principalmente sites com textos longos e pesados. Durante muito tempo o
principal motivo era que ler na tela do computador era cansativo. Hoje isso
ainda um problema, mas com o avano das telas e do aparecimento das
tablets no mercado, voc consegue passar mais tempo na frente de uma
tela lendo grandes quantidades de texto. O problema que geralmente
a organizao de pginas e o contedo no exatamente confortvel para
passarmos horas lendo.
Outro problema comum que ns desenvolvedores no temos uma maneira
fcil de formatar pginas. Na verdade temos, mas um pouco de gambiarra e
claro, no maneira correta. A especifcao de Paged Media nos possibilita
formatar as pginas, transparncias (aqueles plsticos que usamos com
retroprojetores) ou at mesmo pginas que sero vistas pelo monitor.
Controlaremos suas medidas, tamanhos, margens, quebras de pginas e etc...
Nota: Para voc no se confundir, quando digo pginas, quero dizer pginas
197
HTML5 e CSS3 com Farinha e Pimenta CSS
fsicas, de papel, no pginas web, ok? ;-)
@PAGE
Defniremos com CSS3 um modelo de pgina que especifca como o documento
ser formatado em uma rea retangular, chamada de page box, com larguras
e alturas limitadas. Nem sempre o page box tem referncia correspondente
para uma folha de papel fsica, como normalmente conhecemos em diversos
formatos: folhas, transparncias e etc. Esta especifcao formata o page box,
mas o browser ou o meio de acesso que o usurio est utilizando que tem a
responsabilidade de transferir o formato do page box para a folha de papel no
momento da impresso.
O documento transferido no modelo da pgina para um ou mais page
boxes. O page box uma caixa retangular que ser sua rea de impresso. Isso
como se fosse um viewport do browser. Como qualquer outro box, a page
box tem margin, border, padding e outras reas. O contedo e as reas de
margin do page box tem algumas funes especicias:
A rea de contedo do page box chamada de rea da pgina ou page area. O
contedo do documento fui na rea de pgina. Os limites da rea da pgina
na primeira pgina estabelece o retngulo inicial que contm o bloco do
documento.
A rea da margem da page box dividido em 16 caixas de margem ou margin
boxes. Voc pode defnir para cada caixa de margem sua prpria borda,
margem, padding e reas de contedo. Normalmente essas caixas de margem
so usadas para defnir headers e footers do documento. Confesso que o nome
utilizado (caixas de margem) meio estranho.
As propriedades do page box so determinadas pelas propriedades
estabelecidas pelo page context, o qual a regra de CSS @page. Para defnir a
HTML5 e CSS3 com Farinha e Pimenta
198
largura e altura de uma page box no se usa as propriedades width e height.
O tamanho da page box especifcada utilizando a propriedade size no page
context.
TERMINOLOGIA E PAGE MODEL (MODELO DE PGINA)
O page box tem algumas reas simples de se entender que facilitar a
explicao. Veja abaixo uma imagem e uma explicao de suas respectivas
reas:
Page box
O page box onde tudo acontece. Tenha em mente que o page box o viewport
das medidas impressas. l que conter as reas de margem, padding, border
e onde o texto ser consumido.
A largura e altura do page box determinada pela propriedade size. Em um
caso simples, o page box tem a largura e a altura de uma folha. Entretanto
em casos complexos onde page box difere das folhas de papel em valores e
orientaes j que voc pode personalizar de acordo com sua necessidade.
Page area
A page area a area de contedo (content area) do page box.
Margin box
Margin boxes contm boxes para header e footer. So conjunto de 16 caixas
onde voc pode inserir contedo til como nmero da pgina, ttulo do livro,
etc, etc, etc. Essas reas fcam fora do Page area. Cada um tem suas margins,
paddings e bordas individuais. Veja o diagrama abaixo para visualizar melhor.
199
HTML5 e CSS3 com Farinha e Pimenta CSS
Page sheet
A folha, a pgina, a superfcie que ser impresso o contedo. A ilustrao
abaixo mostra a representao de uma folha.
HTML5 e CSS3 com Farinha e Pimenta
200
Non-printable area - rea no impressa
A rea de no impresso a rea onde o dispositivo de impresso no capaz
de imprimir. Esta rea depende do dispositivo que voc est utilizando. O
page box fca dentro da rea de impresso.
rea de impresso
A rea impressa onde o dispositivo de impresso capaz de imprimir. A
rea de impresso o tamanho da page sheet menos a rea de no impresso.
Como a rea de no impresso, a rea til de impresso depende muito do
dispositivo. O dispositivo pode ajustar o contedo para que seja impresso sem
problemas nessa rea. Cada dispositivo tem seu meio de ajuste.
PROPRIEDADE SIZE
A propriedade size especifca o tamanho e a orientao da rea do de contedo,
o page box. O tamanho do page box pode ser defnida com valores absolutos
(px) ou relativos (%). Voc pode usar trs valores para defnir a largura e a
orientao do page box:
auto
O page box ir ter o tamanho e orientao do page sheet escolhido pelo
usurio.
landscape
Defne que a pgina ser impressa em modo paisagem. O page box neste
caso tem o mesmo tamanho da pgina, mas o lado maior o horizontal. Se o
tamanho da pgina no for defnido, o tamanho especifcado pelo usurio
e seu dispositivo.
201
HTML5 e CSS3 com Farinha e Pimenta CSS
portrait
Defne que a pgina ser impressa em modo retrato. O page box neste caso
tem o mesmo tamanho da pgina, mas o lado maior o vertical. Se o tamanho
da pgina no for defnido, o tamanho especifcado pelo usurio e seu
dispositivo.
Veja um exemplo abaixo:
@page {
size: auto; /* auto o valor padro */
margin: 10%; /* margem */
}
Como nessa caso a margem varivel, ela est sendo relativa s dimenses
da pgina. Logo se a pgina uma A4, com as dimenses: 210mm x 297mm, as
margens sero 21mm e 29.7mm.
Outro exemplo:
@page {
size: 210mm 297mm; /* defnindo page-sheet para um
tamanho de A4 */
}
PAGE-SIZE
O page-size pode ser especifcado utilizando um dos media names abaixo.
Isso o equivalente a utilizar os valores escritos diretamente na propriedade
size. Contudo muito melhor utilizar o nome de um formato de formato de
papel.

Formato Descrio
HTML5 e CSS3 com Farinha e Pimenta
202
A5
A pgina deve ser defnida para o tamanho ISO A5:
148mm x 210mm.
A4
A pgina deve ser defnida para o tamanho ISO A4:
210 mm x 297 mm.
A3
A pgina deve ser defnida para o tamanho ISO A3:
297mm x 420mm.
B5
A pgina deve ser defnida para o tamanho ISO B3
media: 176mm x 250mm.
B4
A pgina deve ser defnida para o tamanho ISO B4:
250mm x 353mm.
letter
A pgina deve ser defnida para o tamanho papel
carta: 8.5 pol x 11 pol

Abaixo veja um exemplo de aplicao:
@page {
size: A4 landscape;
}
O W3C tem uma especifcao muito extensa que pode ser encontrada aqui:
http://www.w3.org/TR/css3-page/
PRESENTATION-LEVELS
A informao na web reutilizada de diversas maneiras. Toda informao
publicada reutilizada por diversos meios de acesso, seja o seu browser,
leitor de tela ou robs de busca. O HTML proporciona essa liberdade para
a informao. Por ser uma linguagem muito simples, podemos reutilizar a
informao marcada com HTML em diversos meios de acesso. Mas o HTML
no cuida da forma com que o usurio vai visualizar a informao em seu
dispositivo. O HTML apenas exibe a informao. A maneira que o usurio
203
HTML5 e CSS3 com Farinha e Pimenta CSS
consome essa informao diferente em cada um dos meios de acesso e
dispositivos. a que entra todo o poder do CSS. O CSS formata a informao
para que ela possa ser acessvel em diversos usar agents (meios de acesso). Se
voc acessa um determinado site por um monitor de 22 ou pelo celular, a
informao tem que aparecer bem organizada em ambos os cenrios. o CSS
que organiza visualmente essas informaes.
Alm disso podemos apresentar a informao de diversas formas em um
mesmo dispositivo. Por exemplo: voc pode ver uma galeria de imagens da
maneira convencional, clicando nas thumbs das fotos ou ver em forma de
slideshow. Podemos levar essas experincias para websites de contedo textual
tambm. A especifcao de presentation-levels uma das especifcaes que
levam o usurio a terem contedo mostrados de uma outra forma da qual
estamos acostumados. muito til para apresentaes de slides, com efeitos,
transies e etc ou qualquer documento que seria melhor apresentado no
formato de apresentao, como uma proposta, documentos tcnicos e etc.
COMO FUNCIONA O MODELO
O modelo por trs da especifcao simples. Cada elemento no documento
defnido como um elemento de apresentao ou no formato original
elements presentation level - EPL.
O EPL pode ser explicito em uma folha de estilo ou calculado automaticamente
baseado na posio do elemento pela estrutura do documento. assim que
o browser calcula para mostrar os elementos progressivamente, como se faz
normalmente em programas de apresentao.
O elemento fca em um dos trs seguintes nveis que tambm so representadas
por classes: below-level, at-level e above-level. Dependendo da pontuao
de EPL que o browser d, o elemento fca em um determinado nvel. Essas
pseudo-classes podem e devem ser modifcadas via CSS.
HTML5 e CSS3 com Farinha e Pimenta
204
A PROPRIEDADE PRESENTATION-LEVEL
A propriedade presentation-level defne como os valores de apresentao
(EPL) de um determinado objeto devem ser calculados. So trs valores
possveis: nmeros inteiros, increment e same.
Quando defnimos um valor inteiro, o elemento tem aquele valor fxo.
Quando colocamos increment, o valor do objeto aumenta um ponto em
relao ao objeto anterior. Suponha que h duas LI em uma UL. A primeira
LI tem o valor de 1, a segunda tem valor de 2 e assim por diante.
Quando defnimos o valor same, o browser computa o mesmo valor do objeto
anterior.
Isso tudo vai fcar mais esclarecido com os exemplos a seguir.
Utilizando o mesmo exemplo da especifcao do W3C, temos o cdigo
abaixo:
<!DOCTYPE html>
<html>
<body>
<h1>strategies</h1>
<h2>our strategy</h2>
<ul>
<li>divide</li>
<li>conquer
<p>(in that order)</p>
</li>
</ul>
<h2>their strategy</h2>
<ul>
<li>obfuscate</li>
<li>propagate</li>
</ul>
205
HTML5 e CSS3 com Farinha e Pimenta CSS
</body>
</html>
Vamos defnir o CSS de presentation-levels para esse HTML adicionado o
cdigo CSS:
@media projection {
h1 { page-break-before: always }
li { presentation-level: increment }
:below-level { color: black }
:at-level { color: red }
:above-level { color: silver }
}
Defnimos que o H1 ir sempre iniciar em uma nova pgina.
Mas o mais importante a propriedade presentation-level que defnimos para
a LI. Isso quer dizer que a cada LI o browser contar mais um ponto.
As trs pseudo-classes que falamos no comeo do texto: below-level, at-level,
above-level, que formata os elementos que foram mostrados anteriores, o que
elemento que est sendo mostrado e o prximo elemento.
Sendo assim, o browser calcula a pontuao de cada um dos elementos
utilizados no exemplo como mostra abaixo:
HTML Valor de EPL
<h1>strategies</h1> 0
<h2>our strategy</h2> 0
<ul> 0
<li>divide</li> 1
<li>conquer</li> 2
</ul> 0
HTML5 e CSS3 com Farinha e Pimenta
206
<h2>their strategy</h2> 0
<ul> 0
<li>obfuscate</li> 1
<li>propagate</li> 2
</ul> 0
Temos um outro exemplo, segue abaixo o HTML e logo depois a tabela com
os valores de EPL:
<!DOCTYPE html>
<html>
<style>
@media projection {
h1 { presentation-level: 0; }
h2 { presentation-level: 1; }
h3 { presentation-level: 2; }
body * { presentation-level: 3; }
:above-level { display: none; }
}
</style>
<body>
<h1>strategies</h1>
<h2>our strategy</h2>
<ul>
<li>divide</li>
<li>conquer</li>
</ul>
<h2>their strategy</h2>
<ul>
<li>obfuscate</li>
<li>propagate</li>
</ul>
</body>
</html>
Perceba que agora defnimos no CSS que tudo dentro de body tem o valor de
207
HTML5 e CSS3 com Farinha e Pimenta CSS
3. Logo o H1 que foi defnido como 0 pela propriedade presentation-level tem
o valor de 3.
Defnimos tambm display:none; para os prximos elementos.
Agora veja a pontuao aplicada:
HTML Valor de EPL
<h1>strategies</h1> 3
<h2>our strategy</h2> 2
<ul> 0
<li>divide</li> 0
<li>conquer</li> 0
</ul> 0
<h2>their strategy</h2> 2
<ul> 0
<li>obfuscate</li> 0
<li>propagate</li> 0
</ul> 0
O W3C em uma especifcao completa e em constante atualizao do
presentation-levels aqui: http://www.w3.org/TR/css3-preslev/
MOTORES DE RENDERIZAO
Quem nunca teve problemas para manter a compatibilidade do seu cdigo
entre os diversos browsers do mercado? Entender a particularidadade de cada
browser um trabalho muito complexo. Cada browser tem sua frequencia de
atualizao e sincronizar todas essas atualizaes praticamente impossvel.
Uma maneira mais segura de manter o cdigo compatvel, nivelando o
desenvolvimento pelos motores de renderizao. Cada browser utiliza um
motor de renderizao que responsvel pelo processamento do cdigo da
pgina.
Abaixo, segue uma lista dos principais browsers e seus motores:
Motor Browser
Webkit
Safari, Google Chrome, Mobile Safari, Android Browser,
alguns celulares da Nokia e da RIM.
Gecko Firefox, Mozilla, Camino, Flock, Firefox para Android
Trident Internet Explorer 4 ao 9
Presto Opera 7 ao 10
Focando a compatibilidade nos motores de renderizao voc atingir uma
amplitude maior de browsers. Por exemplo, se seu cdigo funcionar no
BROWSERS
8
HTML5 e CSS3 com Farinha e Pimenta
210
Webkit, voc alcanar o Safari e o Chrome, dois dos principais browsers do
mercado para desktops. Alm disso, voc tambm alcana aparelhos como
Blackberry, iPhone, iPod Touch, iPad e dispositivos que rodam Android.
PREFIXOS DE BROWSERS
Antes de comear os prximos assuntos, ncessrio que voc conhea e saiba
os porqus da utilizao dos prefxos para browsers.
Muitas das caractersticas do CSS, principalmente da sua verso 3 ainda
esto em fase de adequao e testes, portanto elas no foram implementadas
defnitivamente em alguns browsers e para evitar confitos e tambm conseguir
informaes de feedback sobre o funcionamento dessas propriedades para
fazer futuras adaptaes ou correes. Outro ponto importante, que algum
destes fabricantes de browsers podem querer suportar uma determinada
propriedade que ainda no faz parte do core do CSS mas que poderia ser muito
til para voc utilizar em lugares especfcos hoje, com muita cautela, claro.
A tabela abaixo nos mostra os prefxos dos principais browsers do mercado.
Durante toda minha experincia com Web, utilizei muitas vezes os prefxos do
Firefox, Safari e Opera, quase nunca utilizei o prefxo para Internet Explorer.
Creio que irei utiliz-lo mais agora, j que ele est entrando pra valer com o
IE9 e suas atualizaes.
Safari -webkit-
Firefox -moz-
Opera -o-
Chrome -chrome-
Internet Explorer -ms-
Konqueror -khtml-
211
HTML5 e CSS3 com Farinha e Pimenta Browsers
COMO UTILIZAR UM PREFIXO?
No se assuste, se voc utilizar uma propriedade de CSS que ainda est sendo
planejada mas ainda assim quer aplicar em seu projeto para que os usurios de
novos browsers possam usufruir com uma melhor experincia ao acessar seu
site, seu cdigo pode fcar um pouco confuso. Por isso, organize-se melhor ao
decidir quais propriedades voc gostar de experimentar.
Para exemplo vamos utilizar a propriedade border-radius. Se quisessemos
fazer uma borda arredondada com 10px, faramos assim:
div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Note que colocamos por ltimo a propriedade verdadeira, sem nenhum
prefxo, essa propriedade cobrir os browsers que no precisam da utilizao
de prefxos para renderizar a propriedade, por exemplo o Opera e o Internet
Explorer 9.
PREFIXOS SO CSS-HACKS?
No. Nem se comparam.
Com os prefxos voc est ajudando os fabricantes e o W3C a entenderem
melhor novas propriedades. Concordo com voc que o cdigo no fca muito
bonito de se ver e que pode causar muito transtorno quando mal organizado.
Diferentemente dos css-hacks os prefxos fazem parte dos padres web.
Os css-hacks exploram uma falha/bug do browser, criando um cdigo que
apenas um determinado browser identifque ou ignore. Normalmente para
isso usamos a sintaxe do CSS de forma errada como: w\idth:200px; ou
_width:200px;.
HTML5 e CSS3 com Farinha e Pimenta
212
Ao utilizar CSS Hacks colocamos o projeto em risco. Os browsers passaro
a ignorar esse cdigo e se seu CSS estiver baseado nele, provavelmente algo
vai quebrar. Eu costumo sugerir esse tipo de hack apenas para verses muito
antigas do IE como a verso 6, que uma verso que no cenrio atual oferece
muitos problemas de compatibilidade.
HTML5 e CSS3 com Farinha e Pimenta
COMO SER?
9
Entenda que este livro aborda duas tcnologias e alguns conceitos que esto em
pauta agora no mercado de desenvolvimento web. Voc j imaginou o que ser
do HTML ou do CSS daqui h 5 ou 10 anos? Ser que ainda iremos continuar
escrevendo CSS e HTML como fazemos hoje? Ser que iremos utilizar outras
linguagens ou vamos ainda manter os mesmos costumes e conceitos?
Eu no sei, mas provavelmente vai ser muito divertido desenvolver interfaces
para celulares transparentes, televises gigantes touch screens ou sistemas
inteligentes que leem telas e respondem perguntas complexas.
Quero que voc lembre que no importa o futuro, mas a informao precisa
estar sempre acessvel. Essa essncia nunca mudar. O usurio precisa acessar
a informao sem bloqueios, de forma rpida, fcil e consistente. Esteja
preparado. O futuro est mais prximo do que voc imagina.
Os desenvolvedores precisam acordar
O desenvolvimento web depende de trs personagens principais: W3C,
que regulamenta, cria e sanciona padres para a web. Os browsers, que
importam essas regras e padres de forma que a web seja mais homognea. E
os desenvolvedores, que possibilitam a criao e publicao de contedo em
vdeos, texto, imagem etc.
HTML5 e CSS3 com Farinha e Pimenta
216
Cada um destes personagens tem papis importantes para que a evoluo da
web possa se tornar forte, traando novos caminhos, cobrindo as necessidades
atuais dos usurios e prevendo necessidades e solues futuras. H um ciclo
para que estes personagens possam cumprir com seus objetivos.
O W3C cuida dos padres. Ele tem ideias, ele prev problemas e tenta
solucion-los. O W3C no aplica, ele apenas planeja. um trabalho difcil,
por que necessrio uma viso muito apurada do cenrio da web para
saber quais caminhos ela dever tomar. Uma deciso errada, pode acarretar
problemas que levaro anos para serem solucionados por completo. Vide o
desenvolvimento com tabelas. Por isso esse trabalho de planejamento deve
ser meticuloso. Devo confessar que em muitos casos o W3C no supera as
expectativas e faz com que iniciativas paralelas surjam e direcionem a Web
para um caminho mais correto. Foi o que aconteceu com o HTML5.
Os browsers, por sua vez, precisam entender e adotar as idias do W3C,
absorvendo as solues e criando suporte nos seus sofwares. Esse trabalho
tambm tem seus perigos. Os browsers precisam pesquisar quais das
necessidades dos desenvolvedores mais importante e assim implement-
la para que a utilizao de projetos seja executada. Obviamente que alguns
decidem suportar aquelas solues que daro mais pontos estratgicos contra
o concorrente.
Finalizando o ciclo, os desenvolvedores aplicam tudo o W3C defne, mas
apenas aquilo que os browsers querem ou podem suportar. E isso, claro, faz
com que o desenvolvedor se depare com problemas na ponta produo. Vide
o IE6/7/8 e nossos problemas de cada dia.
Durante muito tempo, esse ciclo no era afnado. Havia uma certa confuso
e um jogo de interesses prprios envolvendo principalmente os browsers.
O W3C estava apenas pensando em como resolver problemas que talvez
existiriam daqui longos anos. Os browsers estavam apenas interessados
em criar uma massa de usurios sufciente para ser o primeiro no ranking.
Os desenvolvedores, por sua vez, queriam ganhar seu dinheirinho, fazer o
trabalho, entregar pro cliente e acabar com o problema.
217
HTML5 e CSS3 com Farinha e Pimenta Como ser?
Ningum deu ateno quando comeamos a desenvolver com tabelas,
fazendo com que os sites fcassem mais pesados, aumentando o tempo de
desenvolvimento e o custo do projeto.
Este ciclo defeituoso foi praticado durante muito tempo. Por incrvel que
parea, foram os desenvolvedores que comearam a fazer o ciclo funcionar
novamente como deveria. Eles acordaram os fabricantes de browsers e
tambm o W3C.
O W3C passou a pensar mais em problemas presentes. Solucionou problemas
iminentes e que entregavam valor para os projetos.
Os browsers suportaram o mais rpido possvel essas mudanas, atualizando
seus engines, e fortalecendo as bases para novas solues e fexibilizaes
posteriores.
J os desenvolvedores estagnaram. Desculpe-me, serei um pouco revoltado
daqui para frente. Os desenvolvedores dormiram. Quando o W3C e os
browsers apresentaram solues para problemas como transparncia, bordas
arredondadas, backgrounds inteligentes, utilizao de fonts remotas e etc, os
desenvolvedores resolveram que no era a hora dessas solues por causa da
retrocompatibilidade com browsers antigos, como o IE6. Na verdade estou
sendo meio injusto aqui. No foram todos os desenvolvedores que criaram
caso com a retrocompatibilidade, foram somente os idiotas.
Ns reclamvamos que precisvamos de recursos mais inteligentes
para trabalhar. Que precisvamos de idias realmente inovadoras, que
transformassem os projetos e facilitassem o desenvolvimento. Protestamos,
escrevemos manifestos, postamos em nossos blogs revoltados com a falta
de viso do W3C e com a pobreza do suporte dos browsers. E quando
conseguimos o que queramos, demos para trs. Amarelamos. Pedimos
arrego.
Infelizmente, via-se muito disso aqui no Brasil do que no resto do mundo.
Ouvi muitas desculpas como: Mas meu cliente usa IE6. ou Mas isso no
HTML5 e CSS3 com Farinha e Pimenta
218
funciona em IE6. Voc desenvolvedor. Voc trata com seu cliente todos os
dias. Voc tem o poder de educar e convencer. E se voc acha que no tem
poder nenhum, por que ainda trabalha com web?
Talvez isso seja trauma do passado. Talvez no. O fato que no podemos
mais nivelar por baixo. Isso atrasar uma evoluo inteira.
Tenho incansavelmente falado sobre Graceful Degradation, Enhanced
Progressive, HTML 5, as maravilhas do CSS 3 e etc, pois esse o assunto
que rola l fora. H desenvolvedores e empresas, que acham que devemos ter
uma autorizao especial dos gringos para utilizarmos novas tecnologias e
principalmente para deixar os browsers antigos no passado.
Esse assunto me faz pensar em outra pergunta: Estamos (voc est?)
preparados para o ritmo alucinante do W3C e dos browsers?
At a Microsof est cumprindo com a palavra de ter um browser atualizado.
Eles j anunciaram o novssimo Internet Explorer 10, com uma srie de
atualizaes que promete trazer o IE para o patamar de browsers atuais.
O mercado de client-side se transformar rapidamente nos prximos anos.
Muitas mudanas no HTML e no CSS sero publicadas com o intuito de
tornar a web mais uniforme, fexvel e portvel. O HTML 5 no s uma
coleo de novas tags e APIs. O CSS 3 no ganhou s bordas arredondadas.
E nem s de iPhone vive o homem. Existem milhares de Nokias, Blackberrys,
Windows Phones e Androids por a.
Os desenvolvedores precisam acordar.
HTML5 e CSS3 com Farinha e Pimenta