Learning Web Design

Machine Translated by Google
“Ao contrário de todos os outros livros que começam no começo, este

vai te levar às coisas boas, rápido. Jennifer explicará cada passo
que você precisa, incluindo alguns conceitos muito avançados.”
—JEN SIMMONS, MOZILLA E GRUPO DE TRABALHO CSS W3C
Aprendendo
Designer de Web
GUIA PARA INICIANTES DE HTML, CSS,
JAVASCRIPT E GRÁFICOS DA WEB
Jennifer Niederst Robbins

Quinta edição
APRENDENDO DE DESIGN DA WEB
GUIA PARA INICIANTES DE HTML, CSS,

JAVASCRIPT E GRÁFICOS DA WEB
Jennifer Niederst Robbins
Pequim • Boston • Farnham • Sebastopol • Tóquio

Aprendendo Web Design, Quinta Edição

Um guia para iniciantes em HTML, CSS, JavaScript e gráficos da Web
por Jennifer Niederst Robbins
Copyright © 2018 O'Reilly Media, Inc. Todos os direitos reservados.

Impresso no Canadá.
Publicado por O'Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
Os livros da O'Reilly Media podem ser adquiridos para uso educacional, comercial ou promocional de vendas. Edições online também estão disponíveis para a
maioria dos títulos (oreilly.com/ safari). Para mais informações, entre em contato com nosso departamento de vendas corporativo/institucional: 800-998-
9938 ou corporate@oreilly.com.
EDITORES: Meg Foley e Jeff Bleiel
EDITORA DE PRODUÇÃO: Kristen Brown
DESENHISTA DA CAPA: Edie Freedman
DESIGNER DE INTERIORES: Jennifer Robbins
IMPRIMIR HISTÓRICO:
Março de 2001: Primeira edição.
Junho de 2003: Segunda edição.
Junho de 2007: Terceira edição.
Agosto de 2012: Quarta edição.
Maio de 2018: Quinta edição.
O logotipo O'Reilly é uma marca registrada da O'Reilly Media, Inc. “O'Reilly Digital Studio” e a imagem comercial relacionada são marcas comerciais da O'ReillyMedia,
Inc. Photoshop, Illustrator, Dreamweaver, Elements, HomeSite e Fireworks são marcas registradas ou marcas comerciais da Adobe Systems Incorporated nos Estados
Unidos e/ou em outros países. Microsoft e Expression Web são marcas registradas ou marcas comerciais da Microsoft Corporation nos Estados Unidos e/ou em outros
países. Muitas das designações usadas por fabricantes e vendedores para distinguir seus produtos são reivindicadas como marcas comerciais. Onde essas
designações aparecem neste livro, e a O'ReillyMedia, Inc. estava ciente de uma reivindicação de marca registrada, as designações foram impressas em maiúsculas
ou maiúsculas iniciais.
Embora todas as precauções tenham sido tomadas na preparação deste livro, o editor e o autor não assumem responsabilidade por erros ou omissões, ou por danos
resultantes do uso das informações aqui contidas.
ISBN: 978-1-491-96020-2
[TI] [2018-04-16]
CONTEÚDO
PREFÁCIO .................................................. .................................................. .xi _
PREFÁCIO .................................................. .................................................. .... xiii
Parte I. COMEÇANDO
1. Introdução ao Web Design ............................................. 3 Por onde eu

começo? .................................................. .......................... 4
É preciso uma vila ( Funções de criação de sites) ........................................ 4
Preparando-se para Web Design ............................................. ............... 14

O que você aprendeu ............................................. ....................... 20
Teste você mesmo .................................................. ................................... 20
2. Como a Web funciona ............................................. ............ 21

A Internet versus a Web .................................................. .............. 21
Servindo suas informações ............................................. ............ 22

Uma palavra sobre navegadores ............................................. ................... 23
Endereços de página da Web (URLs)......................................... ................ 24 A
Anatomia de uma Página da Web .............................. .................................. 27
Juntando tudo ............ .................................................. ....... 32

Teste você mesmo .................................................. ................................... 34
3. Alguns Grandes Conceitos que Você Precisa Saber ..............................

35 Uma Multidão de Dispositivos ........ .................................................. ......... 36
Respeitando os Padrões ......................................................... ............... 38
Aprimoramento Progressivo .............................. ......................... 38
iii
Web Design Responsivo ............................................. ................... 40 Uma Web
para Todos (Acessibilidade) ................... .............................. 42 A Necessidadede
Velocidade (Desempenho do Site )......... ................................... 44

Teste você mesmo .................................................. ................................... 46
Parte II. HTML PARA ESTRUTURA
4. Criando uma página simples .................................................. ......... 49 Uma

página da Web, passo a passo ........................ .............................. 49
Iniciar um editor de texto ................................................. ......................... 50
Etapa 1: comece com o conteúdo .................................................. ...................
53 Etapa 2: Forneça a Estrutura do Documento HTML ................... ............. 55
Etapa 3: Identificar os elementos do texto .............................. ....................... 59
Etapa 4: Adicionar uma imagem ................ .................................................. ....
62 Etapa 5: Alterar a aparência com uma folha de estilo ................................... ..
66 Quando as páginas boas ficam ruins ........................................ .......... 67
Validando seus documentos .............................. ................................... 68

Teste você mesmo .................................................. ................................... 70
Revisão do Elemento: Configuração do Documento HTML .............................. 70
5. Marcando texto ............................................. ......... 71

Parágrafos .............................. .................................................. ...... 71
Títulos ....................................... ............................................. 72 Intervalos

Temáticos ( Regra horizontal )................................................ ... 74
Listas .................................................... .............................................. 74
Mais elementos de conteúdo .............................................. ................... 78
Organizando o conteúdo da página ............................................. .......... 82 O
resumo de elementos embutidos ....................... ......................... 88 Elementos
Genéricos (div e span)......... ......................................... 98 Melhorando a
acessibilidade com ARIA . ......................................... 102 Escapes de
Caracteres. .................................................. ......................... 105 Juntando
tudo ........................ .......................................... 108

Teste você mesmo .................................................. ......................... 111
Revisão do elemento: Elementos do texto ............................................. ........ 112
4 Conteúdo
6. Adicionando Links ............................................. ................... 113

O atributo href ................................................. .......................... 114
Vinculando a páginas na Web .................................................. ............. 115
Vinculando em seu próprio site .............................. ....................... 116 Direcionando
uma nova janela do navegador ....................... .......................... 126

Links de e-mail ................................................. .................................... 127
Ligações Telefónicas ................................................. .......................... 128

Teste você mesmo .................................................. ......................... 128
Revisão do elemento: Links.............................................. ................... 130
7. Adicionando Imagens .............................................. ................ 131 Primeiro, uma
palavra sobre formatos de imagem .............................. ......................... 132 O
Elemento img ......................... .................................................. ..... 134 Adicionando
imagens SVG ........................................ ......................... 139 Marcação de imagem
responsiva ............... .......................................... 146

Uau! Acabamos .................................................. ................... 159
Teste você mesmo .................................................. ......................... 159
Revisão do elemento: Imagens .............................................. .................... 162
8. Marcação da Tabela ............................................. .................. 163

Como usar as tabelas ............................................. .............................. 163
Estrutura Mínima da Tabela ............................................. ................ 165
Cabeçalhos da Tabela ................................................. .............................. 167
Células de abrangência ............................................. ......................... 168
Acessibilidade da Tabela .................. .................................................. ......169
Grupos de Linhas e Colunas ........................................ ......................... 171
Finalizando as Tabelas ........................ ........................................ 173

Teste você mesmo .................................................. ......................... 175
Revisão do Elemento: Tabelas................................................. ................... 176
9. Formulários ........................................................ .......................... 177

Como os formulários funcionam ............................................. .......................... 177
O elemento de forma ......................................................... .......................... 179
Variáveis e Conteúdo .............................................. ................... 182
O grande resumo de controle de formulário ............................................. .... 183
Recursos de acessibilidade de formulário ............................................. ......... 203
Conteúdo v
Layout e design do formulário ............................................. ......... 206

Teste você mesmo .................................................. ......................... 208
Revisão do Elemento: Formulários................................................. ................... 209
10. Mídia Embutida ............................................. ............ 215

Janela-em-uma-janela (iframe) ........................................ ............ 215
Incorporador multifuncional (objeto) ............................................. ....218

Vídeo e áudio ............................................. .......................... 219
Tela................................................. ....................................... 228
Teste você mesmo .................................................. ......................... 233
Revisão do Elemento: Mídia Embutida ............................................. ... 234
Parte III. CSS PARA APRESENTAÇÃO
11.Introduzindo Folhas de Estilo em Cascata .............................. 239

Os benefícios do CSS................................................................ ......................... 239
Como funcionam as folhas de estilo ............................................. ................... 240
Os Grandes Conceitos .................... ............................................. 246

Unidades de medida CSS ............................................. .............. 253
Ferramentas do desenvolvedor diretamente no seu navegador ..................................
256 Avançando com CSS ................................................. .............. 258

Teste você mesmo .................................................. ......................... 259
12.Formatando Texto ............................................. .............. 261

Propriedades básicas da fonte ............................................. ....................... 261
Tipografia Avançada com CSS3 ....................... ......................... 277 Alterando a
Cor do Texto......... .................................................. 280 Mais alguns tipos de
seletor ............................................. ............... 281 Ajustes de Linha de
Texto .............................. ................................... 287

Sublinhados e outras “decorações” ............................................. . 290
Alterando a capitalização .............................................. ............... 291
Espaçado .............................. .................................................. .. 292

Sombra de texto .............................................. ......................... 293
Alterando marcadores e números da lista ............................................. . 296

Teste você mesmo .................................................. ......................... 299
Revisão de CSS: Propriedades de fonte e texto ............................................. 301
vi Conteúdo
13. Cores e Fundos ............................................. .. 303 Especificando valores de

cores................................................. ......................... 303 Cor de primeiro
plano .............................. ......................................... 311 Cor de
fundo ................................................ ......................... 312 Recortando o
fundo ....................... ....................................314 Jogando com
opacidade... .................................................. ................ 315
Seletores de pseudo-classe ............................................. ....................... 316
Seletores de pseudo-elementos ............................................. ................ 320
Seletores de Atributos ........................................ ......................... 323
Imagens de fundo ................................................ .........................324 A

propriedade de fundo abreviado........ ......................... 338 Como um arco-íris
(Gradientes) ....................... ....................................... 340
Finalmente, Folhas de Estilo Externas ............................................. ............ 348

Envolvendo- o ............................................. .............................. 351
Teste você mesmo .................................................. ......................... 352
Revisão de CSS: Propriedades de cor e plano de fundo.............................. 354
14.Pensando dentro da caixa .................................................. .... 355

A Caixa de Elementos ............................................. .......................... 355
Especificando as Dimensões da Caixa ............................................. .......... 356

Preenchimento .................................... .................................................. .. 361
Fronteiras .................................................... ....................................... 366
Margens .................................................... ....................................... 376

Atribuindo Tipos de Exibição...... .................................................. ........ 380
Sombras projetadas da caixa ........................................ ......................... 382
Teste você mesmo .................................................. ......................... 384
Revisão CSS: Propriedades da caixa ............................................. .............. 384
15. Flutuação e Posicionamento ............................................. .. 387

Fluxo normal ........................................................ ......................... 387
Flutuante .................................................. ......................... 388 Quebra de texto

extravagante com formas CSS .... .......................................... 399
Noções básicas de posicionamento ............................................. .........................
405 Posicionamento Relativo ....................... ..................................................
407 Posicionamento Absoluto ................................................. .........................
408 Posicionamento Fixo ........................ .................................................. ..416
Conteúdo vii
Teste você mesmo .................................................. ......................... 417
Revisão de CSS: Propriedades de Flutuação e Posicionamento.........................418
16.Layout CSS com Flexbox e Grid................................ 419

Caixas flexíveis com CSS Flexbox............................................. ....419
Layout de grade CSS ............................................. .......................... 447

Teste você mesmo .................................................. ......................... 478
Revisão de CSS: Propriedades de layout ............................................. ......... 482
17. Web Design Responsivo ............................................. ... 485 Por que
RWD? ............................................. ....................................... 485 A Receita
Responsiva ...... .................................................. .......... 486 Escolhendo Pontos de
Interrupção ....................................... ......................... 495 Projetando com
Responsividade.................. ......................................... 499A Algumas palavras
sobre testes ............................................. ............ 512

Mais recursos de RWD .............................................. ....................... 514
Teste você mesmo .................................................. ......................... 516
18.Transições, Transformações e Animação ....................... 517

Ease-y Faz ( Transições CSS)......... ....................................... 517
Transformações CSS ................................................. ......................... 527
Animação de quadro-chave ................................................. ......................... 536
Encerramento ........................................................ ......................... 542

Teste você mesmo .................................................. ......................... 542
Revisão CSS: Transições, Transformações e Animação ................... 545
19.Mais Técnicas de CSS ............................................. ....... 547 Formas de
Estilo ........................................ ....................................... 547 Tabelas de
estilo....... .................................................. ....................... 551 A Clean Slate

(Redefinir e Normalize.css)................ ....................... 554
Técnicas de substituição de imagem ............................................. ...... 556
Sprites CSS ................................................ .................................... 557

Detecção de recursos CSS .............................................. ................... 559
Encerrando as folhas de estilo ............................................. ............... 564

Teste você mesmo .................................................. ......................... 564
Revisão de CSS: Propriedades da tabela ............................................. ........... 566
viii Conteúdo
20.Ferramentas de Desenvolvimento Web Modernas ......................... 567 Aconchegando-
se com a Linha de Comando.. ....................................... 567 Ferramentas de poder
CSS (Processadores)... .................................................. ... 572
Ferramentas de construção (Grunt e Gulp)................................................ .............. 578

Controle de versão com Git e GitHub................................................. 581
Conclusão................................................. ................................... 588
Teste você mesmo .................................................. ......................... 589
Parte IV. JAVASCRIPT PARA COMPORTAMENTO
21.Introdução ao JavaScript.................................................. 593 O que é
JavaScript? ............................................. ......................... 593 Adicionando JavaScript
a uma página......... .................................... 597 A Anatomia de um
Script.... .................................................. .......... 598 O Objeto do
Navegador .................................. ................................... 612

Eventos................................................. .......................................... 613
Juntando tudo ............................................. .......................616 Aprendendo mais sobre
JavaScript ........................ ......................... 617

Teste você mesmo .................................................. ......................... 619
22.Usando JavaScript................................................. .............. 621

Conheça o DOM .................................................. .............................. 621
Polipreenchimentos................................................. ....................................... 630
Bibliotecas JavaScript......... .................................................. .............. 632 Grande
Acabamento .................................... .................................................. ... 637

Teste você mesmo .................................................. ......................... 637
Parte V. IMAGENS DA WEB
23.Noções básicas de imagem da Web ............................................. ............ 641
Fontes de imagem ................................................. .............................. 641

Conheça os Formatos................................................ .......................... 644
Tamanho e resolução da imagem ............................................. ............... 657
Estratégia de Ativo de Imagem ............................................. ....................... 660

Favicons................................................. ....................................... 665
Conteúdo ix
Resumindo Imagens ............................................. ....................... 668

Teste você mesmo .................................................. ......................... 668
24. Produção de Ativos de Imagem ............................................. ... 671 Salvando
Imagens em Formatos da Web........................................ .............. 671 Trabalhando
com Transparência ................................... ......................... 676 Dicas de Produção
de Imagens Responsivas ................... ......................... 680
Otimização de imagem ................................................. ....................... 691

Teste você mesmo .................................................. ......................... 701
25.SVG ............................................. .............................. 703

Desenhando com XML................................................................ ....................... 705
Recursos do SVG como XML ............................................. ................... 713
Ferramentas SVG ............................................. ....................................... 718
Dicas de produção de SVG ................................................. ....................... 721
SVGs responsivos ............................................. ......................... 724 Exploração
Adicional de SVG ........................ .......................................... 731

Teste você mesmo .................................................. .............................. 731
E... Terminamos! .................................................. ....................... 733
Parte VI. APÊNDICES
A. Respostas ................................................. ....................... 737
B. Atributos Globais HTML5 ............................................. .. 753
C. Seletores CSS, Níveis 3 e 4 ....................................... 755
D. De HTML+ para HTML5................................................. ...... 759
ÍNDICE................................................. .................................................. .......... 767
x Conteúdo
PREFÁCIO
POR JEN SIMMONS
Se você viajar para o Vale do Silício e navegar entre as sedes globais de algumas das
empresas de internet mais famosas do mundo, poderá ir ao Museu de História do
Computador. Passeie pelo museu, passando pelos antigos mainframes e pela história do
cartão perfurado, e você acabará se encontrando no início da Wide World Web. Há uma
cópia do navegador Mosaic em um disquete dentro de um livro com o mesmo nome, uma
cópia do Netscape Navigator que foi vendida em uma caixa e algo chamado “Internet in
a Box”, a solução de internet mais vendida para Windows. Depois, há os sites. Alguns
dos primeiros, mais notáveis e mais importantes sites estão em exibição permanente,
incluindo algo chamado “Global Network Navigator”, de 1993. Ele foi projetado por
ninguém menos que a autora deste livro, Jennifer Robbins. Muito antes de a maioria de
nós ter alguma ideia de que a web existia, ou mesmo antes de muitos de vocês nascerem,
Jen estava ocupada projetando o primeiro site comercial. Ela está lá desde o início e
assistiu, ensinou e escreveu sobre cada estágio da evolução da web.
Learning Web Design está agora em sua 5ª edição, com um zilhão de novas páginas e
atualizações daqueles primeiros dias.
Sempre me perguntam: “Quais são os melhores recursos para aprender tecnologia da

web?” Aprendi lendo livros. As postagens do blog são ótimas, mas você também precisa
de uma visão abrangente e profunda do assunto. No início, todos os livros eram livros
para iniciantes, ensinando HTML, URLs e como usar um navegador. Quando o CSS
surgiu, os livros presumiam que você já estava usando HTML e ensinavam como mudar
para as novas técnicas. Então o CSS3 surgiu, e todos os livros nos ensinaram como
adicionar novas propriedades CSS ao nosso entendimento preexistente do CSS2. Claro
que sempre havia livros para iniciantes, mas eram super básicos. Eles nunca tocaram
em técnicas profissionais para aspirantes a profissionais. Cada nova geração de livros
supunha que você tinha conhecimento prévio. Ótimo para nós da indústria. Difícil para
quem é novo.
XI
Prefácio
Mas como você pode ler cerca de duas décadas de técnicas, descartando o que está desatualizado
e lembrando o que ainda está correto?
Como você deve construir uma carreira a partir de um conhecimento tão básico que você não tem
ideia de qual código profissional real em seus trabalhos diários?
Você não pode. É por isso que hoje, quando as pessoas me pedem uma recomendação de livro,
só tenho uma resposta. Este livro.
Este livro que você está lendo agora não requer nenhum conhecimento prévio. Você não precisa
ter feito uma página da web antes, ou ter alguma ideia de onde obter um editor de código. Começa
bem no começo. E, no entanto, ao contrário de todos os outros livros que começam no início, este
vai levar você às coisas boas, rápido. Jen explicará todas as etapas necessárias, incluindo alguns
conceitos muito avançados. Ela embalou este livro cheio de conhecimento de ponta, de
especialistas de topo.
Sinceramente não sei como ela consegue. Como alguém pode ensinar o básico e o avançado ao
mesmo tempo? Normalmente, você aprenderá essas coisas com anos de diferença, com muita
luta no escuro nesse meio tempo. Aqui, Jen vai levantá-lo de onde quer que você esteja em sua
jornada e levá-lo mais longe.
Cada um de nós — inclusive eu, e estou no CSS Working Group (o grupo de pessoas que inventam
o novo CSS) — pode aprender muito com este livro. Eu faço toda vez que eu pego.
Preste atenção às notas nas margens. Leia os sites que ela recomenda, assista aos vídeos. Jen
está dando a você um atalho para uma rede profissional.
Siga as pessoas que ela menciona. Leia os links que eles sugerem. Estes podem ser seus futuros
colegas. Atreva-se a sonhar que você vai conhecê-los. Afinal, eles estão a apenas um tweet de
distância. É um mundo pequeno, cheio de pessoas reais, e você pode se tornar parte disso tudo.
Este livro irá ajudá-lo a começar.
—Jen Simmons
Designer e Desenvolvedor Advocate na Mozilla
Membro do Grupo de Trabalho CSS
abril de 2018
xii Aprendendo Web Design

PREFÁCIO
Olá e bem-vindo à quinta edição do Learning Web Design!

RECURSO ONLINE E
Eu tenho documentado web design e desenvolvimento em livros como este há décadas,
e continua a me fascinar como o cenário da web muda de edição para edição. Esta O site do companheiro
quinta edição não é exceção! Não só esta versão é quase 200 páginas mais longa que Certifique-se de visitar o site
a anterior, mas também há algumas atualizações e adições significativas dignas de nota. complementar para este livro em
learningwebdesign.com.
Ele apresenta materiais para
Primeiro, algumas tecnologias e técnicas que eram totalmente novas ou mesmo os exercícios, artigos para download,
experimentais na última edição tornaram-se bem estabelecidas. HTML5 é o novo listas de links do livro, informações de
normal, e CSS está avançando com sua abordagem modular, permitindo que novas contato e muito mais.
tecnologias surjam e sejam adotadas ao mesmo tempo. um tempo. Em grande parte,

nos concentramos em projetar para uma variedade aparentemente infinita de
dispositivos. O Web Design Responsivo é agora a abordagem de fato para a construção
de sites. Como resultado, o RWD ganhou seu próprio capítulo nesta edição (Capítulo
17, Responsive Web Design). Enquanto na última edição ponderamos e discutimos
como lidar com a marcação de imagem responsiva, nesta edição, os novos elementos
de imagem responsiva são padronizados e bem suportados (Capítulo 7, Adicionando
Imagens). Acho que estamos pegando o jeito dessa coisa móvel!
Tenho visto muitas mudanças sísmicas no web design ao longo dos anos e, desta vez,
Flexbox e Grid estão mudando fundamentalmente a maneira como abordamos o design.
Assim como vimos CSS colocar layouts baseados em tabelas e GIFs espaçadores de 1
pixel fora de sua miséria, Flexbox e Grid estão finalmente prontos para chutar nossos
velhos hacks de layout baseados em float para o meio-fio. É nada menos que uma
revolução e, após 25 anos, é revigorante ter uma solução honesta para o layout. Esta
edição ostenta um novo (e robusto!) capítulo sobre layout de página adequado com
Flexbox e Grid (Capítulo 16, Layout CSS com Flexbox e Grid).
Embora o conhecimento de HTML, CSS e JavaScript esteja no centro do desenvolvimento

web, a disciplina vem evoluindo e, francamente, tornando-se mais
xiii
Prefácio
complicado. Eu estaria fugindo do meu dever se pelo menos não apresentasse a você
algumas das novas ferramentas do mercado – processadores CSS, detecção de recursos,
linha de comando, executores de tarefas e Git – em um novo capítulo sobre o desenvolvedor
web moderno toolkit (Capítulo 20, Ferramentas de Desenvolvimento Web Modernas).
Claro, há mais coisas para aprender, mas o benefício é um fluxo de trabalho simplificado e mais eficiente.
A maior surpresa para mim pessoalmente foi o quanto a produção de imagens na web mudou
desde a quarta edição. Além da introdução do formato PNG, meus capítulos gráficos
permaneceram essencialmente inalterados por 20 anos. Não é assim desta vez! Nosso
antigo modo de espera, o GIF, está prestes a ser desativado, e o PNG é o padrão graças às
suas vantagens de desempenho e novas ferramentas que permitem que PNGs de 8 bits
ainda menores incluam vários níveis de transparência. Mas o PNG terá que ficar de olho no
WebP, mencionado nesta edição pela primeira vez, o que pode ser uma corrida pelo seu
dinheiro em termos de tamanho de arquivo e recursos. A maior história de gráficos da web,
no entanto, é o surgimento do SVG (Scalable Vector Graphics). Graças ao amplo suporte ao
navegador (finalmente!), o SVG passou de uma pequena seção “algum dia” na edição
anterior para um “vá em frente!” capítulo neste (Capítulo 25, SVG).
Como nas primeiras quatro edições, este livro aborda as necessidades e preocupações
específicas de iniciantes de todas as origens, incluindo designers gráficos experientes,
programadores que desejam expandir suas habilidades e qualquer pessoa que queira
aprender a criar sites. Eu fiz o meu melhor para colocar a experiência de sentar na minha
aula de web design para iniciantes em um livro, com exercícios e testes ao longo do caminho,
para que você tenha experiência prática e possa verificar seu progresso.
Esteja você lendo este livro sozinho ou usando-o como um complemento para um curso de
web design, espero que ele lhe dê uma boa vantagem e que você se divirta no processo.
COMO ESTE LIVRO É ORGANIZADO
Learning Web Design, Quinta Edição, é dividido em cinco partes, cada uma tratando de um
aspecto importante do desenvolvimento web.
Parte I: Começando
A Parte I estabelece uma base para tudo o que se segue no livro. Começo com algumas
informações gerais importantes sobre o ambiente de web design, incluindo as várias
funções que você pode desempenhar, as tecnologias que você pode aprender e as
ferramentas que estão disponíveis para você. Você começará a trabalhar imediatamente
com HTML e CSS e aprenderá como a web e as páginas da web geralmente funcionam.
Também apresentarei alguns Grandes Conceitos que farão você pensar da mesma
forma que os web designers modernos pensam sobre seu ofício.
Parte II: HTML para Estrutura
Os capítulos da Parte II cobrem o âmago da questão de cada elemento e atributo

disponível para dar estrutura semântica ao conteúdo. Abordaremos a marcação para
texto, links, imagens, tabelas, formulários e mídia incorporada.
xiv Aprendizagem de Web Design

Prefácio
Parte III: CSS para apresentação
No curso da Parte III, você aprenderá o básico das Folhas de Estilo em Cascata para alterar a
apresentação do texto para criar layouts de várias colunas e até mesmo adicionar animação e
interatividade com base no tempo à página. Ele fornece uma introdução ao Responsive Web
Design, bem como as ferramentas e técnicas que fazem parte do fluxo de trabalho do
desenvolvedor moderno.
Parte IV: JavaScript para Comportamento
Mat Marquis inicia a Parte IV com um resumo da sintaxe JavaScript para que você possa
diferenciar uma variável de uma função. Você conhecerá algumas maneiras de usar o JavaScript
(incluindo scripts DOM) e ferramentas JavaScript existentes, como polyfills e bibliotecas que
permitem colocar o JavaScript em uso rapidamente, mesmo que você não esteja pronto para
escrever seu próprio código do zero .
Parte V: Imagens da Web
A Parte V apresenta os vários formatos de arquivo de imagem apropriados para a Web, fornece
estratégias para escolhê-los como parte de um fluxo de trabalho responsivo e descreve como
otimizá-los para tornar o tamanho do arquivo o menor possível. Também inclui um capítulo sobre
gráficos SVG, que oferecem grandes vantagens para design responsivo e de interação.
Parte VI: Apêndices
A Parte VI contém material de referência, como respostas de testes, listas de atributos globais
de HTML e seletores de CSS e uma análise do HTML5 e seu histórico.
CONVENÇÕES TIPOGRÁFICAS
itálico
Usado para indicar nomes de arquivos e nomes de diretórios, bem como para dar ênfase.
Itálico colorido
Usado para indicar URLs e endereços de e-mail.
Texto romano colorido
Usado para termos especiais que estão sendo definidos.
Largura constante
Usado para indicar exemplos de código e comandos de teclado.
Largura constante colorida
Usado para ênfase em exemplos de código.
Largura constante em itálico
Usado para indicar espaços reservados para valores de propriedade de atributo e folha de estilo.
Indica que uma linha de código foi quebrada no texto, mas deve permanecer unida em uma linha
em uso.
Prefácio xv
Prefácio
AGRADECIMENTOS
Mais uma vez, muitas pessoas inteligentes e adoráveis me apoiaram nesta edição.
Quero dizer um agradecimento especial aos meus dois incríveis revisores de tecnologia.
Sou muito grato a Elika J. Etemad (fantasai), que, como membro do W3C CSS Working
Group, me ajudou a tornar esta edição mais precisa e atualizada com os padrões do
que nunca. Ela foi dura, mas os resultados valem a pena.
Petter Dessne trouxe sua experiência em ciência da computação, bem como uma
valiosa perspectiva como professor e leitor para quem o inglês é uma segunda língua.
Seu bom humor e fotos de sua casa na Suécia também foram apreciados!
Também sou grato a esta lista de superestrelas de web design que revisaram capítulos
e passagens específicos em suas áreas de especialização (em ordem alfabética):
Amelia Bellamy-Royds (SVG), Brent Beer (ferramentas de desenvolvedor), Chris Coyier
(SVG), Terence Eden (áudio/vídeo), Brad Frost (Responsive Web Design), Lyza Danger
Gardner (ferramentas de desenvolvedor), Jason Grigsby (imagens), Val Head
(animação), Daniel Hengeveld (ferramentas de desenvolvedor), Mat Marquis (imagens
responsivas), Eric Meyer (layout CSS), Jason Pamental (fontes web), Dan Rose
(imagens), Arsenio Santos (mídia incorporada), Jen Simmons (layout CSS), Adam
Simpson (ferramentas do desenvolvedor) e James Williamson (dados estruturados).
Obrigado também a Mat Marquis por sua contribuição de dois capítulos animados de
JavaScript que eu nunca poderia ter escrito, e a Jen Simmons por escrever o Prefácio
e por seu apoio contínuo ao Learning Web Design.
Quero agradecer à minha fantástica equipe da O'Reilly Media: Meg Foley (editora de
aquisições), Jeff Bleiel (editor de desenvolvimento), Kristen Brown (editora de produção),
Rachel Monaghan (editora), Sharon Wilkey (revisora) e Lucie Haskins (Indexador).
Agradecimentos especiais ao InDesign e ao especialista em produção de livros Ron
Bilodeau, que transformaram meu design em um modelo e um conjunto de ferramentas
que tornaram a produção de livros uma alegria absoluta. Agradecimentos especiais
também vão para Edie Freedman pelo belo design da capa e meia vida de amizade e
orientação.
Finalmente, nenhum Agradecimento estaria completo sem profundo apreço pelo amor
e apoio de meus entes queridos, Jeff e Arlo.
SOBRE O AUTOR
Jennifer Robbins começou a desenhar para a web em 1993 como designer gráfico do
Global Network Navigator, o primeiro site comercial. Além deste livro, ela escreveu
várias edições de Web Design in a Nutshell e HTML5 Pocket Reference, publicadas
pela O'Reilly. Ela é fundadora e organizadora da Artifact Conference, que aborda
questões relacionadas ao web design móvel. Jennifer falou em muitas conferências e
ensinou web design na Johnson and Wales University em Providence, Rhode Island.
Quando não está no relógio, Jennifer gosta de fazer coisas, rock indie, cozinhar, viajar
e criar uma criança legal.
xvi Aprendendo Web Design

Prefácio
COMO ENTRAR EM CONTATO CONOSCO
Envie comentários e perguntas sobre este livro à editora:
O'Reilly Media, Inc.

1005 Gravestein Highway North
Sebastopol, CA 95472
800-998-9938 (nos Estados Unidos ou Canadá)

707-829-0515 (internacional ou local)
707-829-0104 (fax)
Temos uma página web para este livro, onde listamos erratas, exemplos e
qualquer informação adicional. Você pode acessar esta página em bit.ly/
aprendizagemWebDesign_5e.
Para comentar ou fazer perguntas técnicas sobre este livro, envie um e-mail para
bookquestions@oreilly.com.
Para obter mais informações sobre nossos livros, cursos, conferências e notícias,
consulte nosso site em www.oreilly.com.
Encontre-nos no Facebook: facebook.com/oreilly
Siga-nos no Twitter: twitter.com/oreillymedia
Assista-nos no YouTube: www.youtube.com/oreillymedia
Prefácio xvii
EU
COMEÇANDO
CAPÍTULO
COMEÇANDO 1
EM WEB DESIGN
A web existe há mais de 25 anos, experimentando uma expansão inicial eufórica, um NESTE CAPÍTULO
colapso impulsionado pela economia, um renascimento impulsionado pela inovação

Disciplinas relacionadas ao conteúdo
e uma evolução constante ao longo do caminho. Uma coisa é certa: a web como
meio de comunicação e comercial veio para ficar. Além disso, ele chegou a Especialidades de design
dispositivos como smartphones, tablets, TVs e muito mais. Nunca houve tantas
oportunidades para colocar o know-how de web design em uso. Desenvolvimento front-end
Através da minha experiência ministrando cursos e workshops de web design, tive a Desenvolvimento de back-end
oportunidade de conhecer pessoas de todas as origens interessadas em aprender a

Equipamento recomendado
construir páginas da web. Permita-me apresentar-lhe apenas alguns:
Software relacionado à Web
“Sou designer de impressão há 17 anos e agora me sinto pressionado a fornecer serviços
de web design.”
“Sou programador há anos, mas quero mudar minhas habilidades para desenvolvimento
web porque há boas oportunidades de trabalho na minha área.”
“Eu mexi em páginas da web no ensino médio e acho que pode ser algo que eu gostaria
de fazer para viver.”
“Eu fiz alguns sites usando temas no WordPress, mas gostaria de expandir minhas
habilidades e criar sites personalizados para pequenas empresas.”
Seja qual for a motivação, a primeira pergunta é sempre a mesma: “Por onde
começo?” Pode parecer que há uma montanha de coisas para aprender, e não é
fácil saber por onde começar. Mas você tem que começar de algum lugar.
Este capítulo fornece uma visão geral da profissão antes de entrarmos nos canteiros
de obras. Ele começa com uma introdução às funções e responsabilidades
associadas à criação de sites, para que você possa considerar qual função é a certa
para você. Também lhe darei um aviso sobre o equipamento e o software que você
provavelmente usará - em outras palavras, as ferramentas do comércio.
3
Por onde eu começo?
POR ONDE COMEÇO?
Talvez você esteja lendo este livro como parte de um curso completo sobre web design e
desenvolvimento. Talvez você tenha comprado para expandir seu conjunto de habilidades
atual por conta própria. Talvez você tenha pego por curiosidade. Seja qual for o caso, este
livro é um bom lugar para começar a aprender o que faz a web funcionar.
Existem muitos níveis de envolvimento em web design, desde a construção de um pequeno

site para você até torná-lo uma carreira completa. Você pode gostar de ser um desenvolvedor
Eu só quero meu próprio site web “full stack” ou apenas se especializar em uma habilidade. Existem muitas maneiras
você pode ir.
Você não precisa necessariamente se tornar
um web designer ou desenvolvedor para Se você estiver interessado em seguir a carreira de web design ou produção, precisará
começar a publicar na web. Existem muitos
elevar suas habilidades a um nível profissional. Os empregadores podem não exigir um
serviços de hospedagem de sites que
fornecem modelos e interfaces de arrastar
diploma de web design, mas esperam ver sites de amostra em funcionamento que
e soltar que facilitam a criação de um site demonstrem suas habilidades e experiência. Esses sites podem ser o resultado de tarefas
sem nenhum conhecimento de código. de classe, projetos pessoais ou um site para uma pequena empresa ou organização. O
Eles podem ser usados para qualquer coisa, importante é que eles pareçam profissionais e tenham um HTML limpo e bem escrito; folhas
desde soluções de comércio eletrônico de
de estilo; e roteiros nos bastidores.
serviço completo até pequenos sites pessoais
(embora alguns serviços sejam mais adequados para mais
Se o seu envolvimento for em menor escala - digamos que você tenha apenas um site ou
do que o outro).
dois que gostaria de publicar - você pode achar que usar um modelo em um serviço de site
Aqui estão alguns dos serviços de construção de on-line é um ótimo começo (veja a barra lateral "Só quero o meu Local"). A maioria
sites mais populares no momento da redação deste
permite que você ajuste o código subjacente, portanto, o que você aprender neste livro o
artigo:
ajudará a personalizar o modelo ao seu gosto.
• WordPress (www.wordpress.com)
• Squarespace (squarespace.com)
• Wix (wix.com) É PRECISO DE UMA VILA

• SiteBuilder (sitebuilder.com)
(PAPÉIS DE CRIAÇÃO DO SITE)
• Weebly (weebly.com)
Existem muitos serviços semelhantes

Quando olho para um site, vejo a multiplicidade de decisões e áreas de especialização que
disponíveis, por isso vale a pena pesquisar na
foram necessárias para construí-lo. Sites são mais do que apenas códigos e imagens. Eles
Web para encontrar um que seja adequado para você.
geralmente começam com um plano de negócios ou outra missão definida. Antes de serem
lançados, o conteúdo deve ser criado e organizado, a pesquisa é realizada, o design dos
objetivos mais amplos aos mínimos detalhes deve acontecer, o código é escrito e tudo deve
ser coordenado com o que está acontecendo no servidor para torná-lo realidade.
Sites grandes e conhecidos são criados por equipes de dezenas, centenas ou até milhares
de colaboradores. Existem também sites que são criados e mantidos por uma equipe com
apenas um punhado de membros. Também é absolutamente possível criar um site
respeitável com uma equipe só de você. Essa é a beleza da web.
Nesta seção, apresentarei as várias disciplinas que contribuem para a criação de um site,
incluindo funções relacionadas a conteúdo, design e código.
Você pode acabar se especializando em apenas uma área de especialização, trabalhando
como parte de uma equipe de especialistas. Se você estiver projetando sites por conta
própria, precisará usar muitos chapéus. Considere que a manutenção do dia-a-dia da sua casa
4 Parte I. Introdução
É preciso uma vila (Funções de criação de sites)
exige que você seja chef de meio período, faxineiro, contador, diplomata, jardineiro e
pedreiro — mas para você são apenas as coisas que você faz em casa. Como designer
solo, você lidará com muitas disciplinas relacionadas à web, mas parecerá apenas o que
você faz para criar um site.
Disputa de conteúdo
Qualquer pessoa que use o título “web designer” precisa estar ciente de que tudo o que
fazemos apoia o processo de levar o conteúdo, a mensagem ou a funcionalidade aos nossos
usuários. Além disso, uma boa escrita pode ajudar as interfaces de usuário que criamos a
serem mais eficazes, desde rótulos de botões até mensagens de erro.
É claro que alguém precisa criar todo esse conteúdo e mantê-lo – não subestime os recursos
necessários para fazer isso com sucesso. Bons escritores e editores são uma parte
importante da equipe. Além disso, quero chamar sua atenção para dois especialistas
relacionados a conteúdo no desenvolvimento web moderno: o Arquiteto da Informação (IA)
e o Estrategista de Conteúdo.
Arquitetura de informação
Um Arquiteto de Informação (também chamado de Designer de Informação) organiza o

conteúdo logicamente e para facilitar a localização. Eles podem ser responsáveis pela
funcionalidade de pesquisa, diagramas de sites e como o conteúdo e os dados são
organizados no servidor. A arquitetura da informação está inevitavelmente entrelaçada com
o design de UX e UI (definido em breve), bem como com o gerenciamento de conteúdo. Se
você gosta de organizar ou é fanático por taxonomias, a arquitetura da informação pode ser
o trabalho para você. O texto definitivo para este campo no que se refere à web é Information
Architecture: For the Web and Beyond, de Louis Rosenfeld e Peter Morville (O'Reilly).
Estratégia de conteúdo
Quando o conteúdo não está correto, o site não pode ser totalmente eficaz. Um estrategista
de conteúdo garante que cada pedaço de texto em um site, desde um longo texto explicativo
até os rótulos nos botões, apoie a identidade da marca e os objetivos de marketing da
organização. A estratégia de conteúdo também pode se estender à modelagem de dados e
gerenciamento de conteúdo em uma escala grande e contínua, como planejamento para
reutilização de conteúdo e cronogramas de atualização. Suas responsabilidades também
podem incluir como a voz da organização é representada nas mídias sociais. Um bom lugar
para aprender mais é o livro Estratégia de Conteúdo para a Web, 2ª Edição,
por Kristina Halvorson e Melissa Rich (New Riders).
Todas as formas de design
Ah, projeto! Parece bastante simples, mas mesmo esse requisito simples foi dividido em
várias especializações quando se trata de criar sites. Aqui estão algumas das descrições de
trabalho relacionadas ao design de um site, mas
1. Introdução ao Web Design 5

tenha em mente que as disciplinas muitas vezes se sobrepõem e que a pessoa que se autodenomina
“designer” muitas vezes é responsável por mais de uma (se não todas) dessas responsabilidades.
Experiência do usuário, interação e design da interface do usuário
Muitas vezes, quando pensamos em design, pensamos em como algo se parece. Na web, a
primeira questão de negócios é projetar como o site funciona. Antes de escolher cores e fontes, é
importante identificar os objetivos do site, como ele será usado e como os visitantes se movimentam
por ele. Essas tarefas se enquadram nas disciplinas de design de experiência do usuário (UX) ,
design de interação (IxD) e design de interface do usuário (UI) . Há muita sobreposição entre essas
responsabilidades e não é incomum que uma pessoa ou equipe lide com as três.
O designer de experiência do usuário tem uma visão holística do processo de design—

garantindo que toda a experiência com o site seja favorável. O design UX é baseado em uma
sólida compreensão dos usuários e suas necessidades com base em observações e entrevistas.
De acordo com Donald Norman (que cunhou o termo), o design UX inclui “todos os aspectos da
interação do usuário com o produto: como ele é percebido, aprendido e usado”. Para um site ou
aplicativo, isso inclui o design visual, a interface do usuário, a qualidade e a mensagem do conteúdo
e até o desempenho geral do site. A experiência deve estar alinhada com a marca da organização
e os objetivos de negócios para ser bem-sucedida.
O objetivo do Designer de Interação é tornar o site o mais fácil, eficiente e agradável de usar
possível. Intimamente relacionado ao design de interação está o design da interface do usuário ,
que tende a ser mais focado na organização funcional da página, bem como nas ferramentas
específicas (botões, links, menus e assim por diante) que os usuários usam para navegar pelo
conteúdo ou realizar tarefas .
A seguir estão as entregas que os designers de UX, UI ou interação produzem:
Pesquisa de usuários e relatórios de testes
Compreender as necessidades, desejos e limitações dos usuários é fundamental para o

sucesso do design do site ou aplicativo da web. A abordagem de projetar em torno das
necessidades do usuário é chamada de Design Centrado no Usuário.
(UCD), e é central para o web design contemporâneo. O design do site geralmente começa
com a pesquisa do usuário, incluindo entrevistas e observações, a fim de obter uma melhor
compreensão de como o site pode resolver problemas ou como ele será usado. É típico que
os designers façam uma rodada de testes com usuários em cada fase do processo de design
para garantir a usabilidade de seus designs.
Se os usuários estão tendo dificuldade em descobrir onde encontrar conteúdo ou como passar
para a próxima etapa de um processo, então volte para a prancheta.
Diagramas de estrutura de arame
Um diagrama de wireframe mostra a estrutura de uma página da Web usando apenas as linhas
de saída para cada tipo de conteúdo e widget (FIGURA 1-1). O objetivo de um diagrama de
wireframe é indicar como o espaço da tela é dividido e onde a funcionalidade e o conteúdo,
como navegação, caixas de pesquisa, formulário
elementos, e assim por diante, são colocados. Cores, fontes e outros elementos de identidade
visual são deliberadamente omitidos para não desviar a atenção da estrutura da página.
Esses diagramas geralmente são anotados com instruções sobre como as coisas devem
funcionar para que a equipe de desenvolvimento saiba o que construir.
Diagrama do
site Um diagrama do site indica a estrutura do site como um todo e como as páginas
individuais se relacionam umas com as outras. A FIGURA 1-2 mostra um diagrama de site
muito simples. Alguns diagramas de sites preenchem paredes inteiras!
contato | localizador de lojas | suporte | CARRINHO

LOGOTIPO
Faça login ou crie uma conta
Categoria PROCURAR
Todas as categorias
Categoria 1
Categoria2
[ IMAGENS PROMOCIONAIS RODAR AQUI ]
Categoria 3
Categoria 4
Categoria 5
1234
Categoria 6
Especiais de hoje
Produto 1 Produto 2 Produto 3 Produto 4 Produto 5 Produto 6
SOBRE NÓS SOCIAL SERVIÇO

Companhia Facebook Perguntas frequentes
Notícia Twitter Suporte ao vivo

Empregos Mapa do site
Experimente nosso aplicativo
Políticas
Contato
declaração de direitos autorais
FIGURA 1-1. Diagrama de arame.
Pagina inicial
Texto
Formulário Serviços de
Perguntas frequentes
Livro Retomar
de e-mail webdesign
Contato Amostras
links externos
FIGURA 1-2. Um diagrama de site simples.

Storyboards e fluxogramas do usuário
Um storyboard traça o caminho através de um site ou aplicativo do ponto de vista de um

usuário típico (uma persona na linguagem UX). Geralmente inclui um script e “cenas”
que consistem em visualizações de tela ou o usuário interagindo com a tela. O
storyboard visa demonstrar as etapas necessárias para realizar tarefas, descreve
opções possíveis e também apresenta alguns tipos de página padrão. A FIGURA 1-3
mostra um storyboard simples. Um fluxograma do usuário é outro método para mostrar
como as partes de um site ou aplicativo estão conectadas, mas tende a se concentrar
em detalhes técnicos em vez de contar uma história. Por exemplo, “quando o usuário
faz isso, ele aciona essa função no servidor”. É comum que os designers criem um
fluxograma de usuário para as etapas de um processo, como registro de membros ou
pagamentos online.
FIGURA 1-3. Um storyboard típico (cortesia de Adaptive Path e Brandon Schauer).
Existem muitos livros sobre UX, interação e design de interface do usuário, mas estes são
alguns dos clássicos para você começar:
• Os Elementos da Experiência do Usuário: Design Centrado no Usuário para a Web e

Além de Jesse James Garrett (New Riders)
• Não me faça pensar, revisitado: uma abordagem de bom senso para a Web
Usabilidade por Steve Krug (New Riders)
• O Design das Coisas Cotidianas por Don Norman (Livros Básicos)
• About Face: The Essentials of Interaction Design, 4ª Edição por Alan Cooper,
Robert Reimann, David Cronin e Christopher Noessel (Wiley)
• Design de Interfaces, 2ª Edição por Jenifer Tidwell (O'Reilly)
• 100 coisas que todo designer precisa saber sobre pessoas por Susan
Weinschenk (Novos Cavaleiros)
• Projetando a Experiência do Usuário: Um Guia para HCI, UX e Design de Interação por

David Benyon (Pearson)
Design visual (gráfico)

Como a web é um meio visual, as páginas da web exigem atenção à sua apresentação
visual. As primeiras impressões são tudo. Um designer gráfico cria a “aparência” do site –
logotipos, gráficos, tipos, cores, layout e assim por diante – para garantir que o site cause
uma boa primeira impressão e seja consistente com a marca e a mensagem da organização
ele representa.
Existem muitos métodos e produtos que podem ser usados para apresentar um design visual
aos clientes e partes interessadas. Os mais tradicionais são esboços ou maquetes (criados
no Photoshop ou em uma ferramenta semelhante) da aparência do site, como os maquetes
da página inicial mostrados na FIGURA 1-4.
Agora que os sites aparecem em telas de todos os tamanhos, muitos designers preferem
discutir a identidade visual (cores, fontes, estilo de imagem, etc.) -4. A ideia é combinar uma
linguagem visual para o site antes do início da produção.
Uma opção para separar o estilo do tamanho da tela é usar blocos de estilo, uma técnica FIGURA 1-4. Esboços de aparência
(maquetes) para um site simples.
introduzida por Samantha Warren (ver Nota). Os blocos de estilo incluem exemplos de
esquemas de cores, elementos de marca, tratamentos de interface do usuário, tratamento
de texto e humor (FIGURA 1-5). Uma vez que os detalhes são decididos, eles podem ser
NOTA
implementados em protótipos de trabalho e no site final. Para saber mais sobre essa técnica,
visite o excelente site de Samantha, styletil.es, onde você pode baixar um modelo. O designer Dan Mall usa uma abordagem
semelhante que ele chama de “colagem de
Os designers gráficos também podem ser responsáveis por produzir os ativos de imagem
elementos”. Uma colagem de elementos é uma
para o site. Eles precisarão saber como otimizar imagens para uma entrega mais rápida e
coleção de elementos de design que dão ao site
como atender aos requisitos de diferentes tamanhos de tela. Também é comum a equipe de
sua aparência e sensação únicas, mas, como os
desenvolvimento lidar com a otimização de imagens, mas acho que é uma habilidade que blocos de estilo, não estão vinculados a um layout de tela espec
todo designer visual deveria ter. Discutiremos a otimização de imagem no Capítulo 24, Leia seu artigo em v3.danielmall.com/
Produção de ativos de imagem. artigos/rif-element-colages/.
FIGURA 1-5. Técnica de azulejos de estilo introduzida por Samantha Warren.

Os designers também podem ser responsáveis por criar um guia de estilo que documente as
escolhas de estilo, como fontes, cores e outros enfeites de estilo, a fim de manter o site
consistente ao longo do tempo. Para obter uma lista de exemplos, artigos, livros e podcasts
sobre guias de estilo da Web, visite a página “Recursos do Guia de Estilo do Site” em
styleguides.io.
Os designers precisam aprender a codificar?

Em suma, sim. Uma familiaridade básica com HTML e CSS agora é um requisito para qualquer
um que se junte a uma equipe de web design. Você pode não ser responsável por criar o código de
produção final do site, mas como HTML e CSS são as linguagens nativas do seu meio, você precisa
saber como lidar com eles. Alguns designers também aprendem JavaScript, mas outros traçam a linha
e deixam um desenvolvedor lidar com a programação.
O código está se tornando mais central para o fluxo de trabalho do designer visual. Onde antes o
Photoshop era tudo o que você precisava para criar designs de páginas da Web para enviá-los à
produção, os modelos fixados em um tamanho específico não descrevem uma página que precisa ser
flexível para uma ampla variedade de tamanhos de tela. Por essa razão, os designers estão construindo
seus próprios protótipos de trabalho como entregas que comunicam como o design ficará e se comportará
nas mãos dos usuários.
Lançamento de código
Uma grande parte do processo de construção de sites envolve a criação e resolução de

problemas de documentos, folhas de estilo, scripts e imagens que compõem um site.
Em empresas de web design, a equipe que cuida da criação dos arquivos que compõem o site
(ou templates de páginas que são montadas dinamicamente) costuma ser chamada de
departamento de desenvolvimento ou produção .
O desenvolvimento se enquadra em duas grandes categorias: desenvolvimento de front -end

e desenvolvimento de back-end. Mais uma vez, essas tarefas podem caber a especialistas,
mas é igualmente comum que uma pessoa ou equipe assuma ambas as responsabilidades.
NUM RELANCE
Desenvolvimento Front-end Desenvolvimento front-end

O desenvolvimento front-end inclui as Frontend refere-se a qualquer aspecto do processo de design que aparece ou se relaciona
seguintes tecnologias web: diretamente com o navegador. Isso inclui HTML, CSS e JavaScript, todos os quais você
• Linguagem de marcação de hipertexto precisará ter um conhecimento intrincado se quiser um emprego como desenvolvedor web.
(HTML) Vamos dar uma olhada rápida em cada um.
• Folhas de Estilo em Cascata (CSS)
• Script JavaScript e DOM, incluindo

Criação/marcação (HTML)
estruturas baseadas em AJAX e
A autoria é o processo de preparar o conteúdo para entrega na web, ou mais especificamente,
JavaScript
marcar o conteúdo com tags HTML que descrevem seu conteúdo e função.
HTML (HyperText Markup Language) é a linguagem de autoria usada para criar documentos
de páginas da web. A versão atual (e a versão documentada
neste livro) é HTML 5.2. O Apêndice D, De HTML+ a HTML5, conta a história do HTML e lista o que
torna o HTML5 único.
HTML não é uma linguagem de programação; é uma linguagem de marcação, o que significa que é um
sistema para identificar e descrever os vários componentes de um documento, como títulos, parágrafos
e listas. A marcação indica a estrutura subjacente do documento (você pode pensar nisso como um
esboço detalhado e legível por máquina). Você não precisa de habilidades de programação - apenas
paciência e bom senso - para escrever HTML.
A melhor maneira de aprender HTML é escrever algumas páginas à mão, como faremos nos exercícios
da Parte II deste livro.
Estilo (CSS)
Enquanto o HTML é usado para descrever o conteúdo em uma página da Web, as Folhas de Estilo em NOTA
Cascata (CSS) descrevem a aparência desse conteúdo ( consulte a Nota). A aparência da página é
Quando este livro usa o termo “folhas de
chamada de apresentação. Fontes, cores, imagens de fundo, espaçamento entre linhas, layout de página
estilo”, ele sempre se refere a Cascading
e assim por diante são todos controlados com CSS. Você pode até adicionar efeitos especiais e animação
Style Sheets, a linguagem de folha de estilo
básica à sua página. padrão para a World Wide Web. Folhas de
estilo (incluindo o que “cascata” significa!)
A especificação CSS também fornece métodos para controlar como os documentos serão apresentados
são discutidas mais detalhadamente na Parte III.
em contextos diferentes de um navegador, como em impressão ou leitura em voz alta por um leitor de
tela; no entanto, não vamos cobri-los muito aqui.
Embora seja possível publicar páginas da Web usando apenas HTML, você provavelmente desejará usar
folhas de estilo para não ficar preso aos estilos padrão do navegador. Se você está pensando em projetar A World Wide Web
sites profissionalmente, seja como designer ou como desenvolvedor, a proficiência em folhas de estilo é Consórcio
obrigatória. O Consórcio World Wide Web
(chamado de W3C para abreviar) é
Script JavaScript e DOM
a organização que supervisiona o
JavaScript é uma linguagem de script que adiciona interatividade e comportamentos a páginas da web, desenvolvimento de tecnologias da
web, como HTML, CSS e JavaScript.
incluindo estes (para citar apenas alguns):
O grupo foi fundado em 1994 por Tim
• Verificando entradas de formulário para entradas válidas Berners-Lee, o inventor da web, no
Massachusetts Institute of Technology (MIT).
• Trocar estilos por um elemento ou um site inteiro
• Carregando feeds de rolagem com mais conteúdo automaticamente No início, o W3C se preocupava
principalmente com o protocolo HTTP e o
• Fazendo o navegador lembrar informações sobre os usuários desenvolvimento do HTML. Agora, o W3C
está lançando as bases para o futuro da
• Criação de widgets de interface, como players de vídeo incorporados ou web desenvolvendo dezenas de tecnologias
entradas de formulário e protocolos que devem trabalhar juntos em
uma infraestrutura sólida.
Você também pode ouvir o termo script DOM usado em relação ao JavaScript.
DOM significa Document Object Model e refere-se à lista padronizada de elementos de página da Web
Para uma resposta definitiva a qualquer
que podem ser acessados e manipulados usando JavaScript (ou outra linguagem de script). pergunta sobre tecnologia da web, o site
do W3C é o lugar certo: www.w3.org.
Para obter mais informações sobre o W3C e
Os desenvolvedores front-end também podem precisar estar familiarizados com estruturas JavaScript
o que ele faz, veja esta página útil:
(como React, Bootstrap, Angular e outras) que automatizam grande parte do processo de produção. Eles
www.w3.org/Consortium/.
provavelmente também precisarão ser úteis com AJAX

(que significa “Asynchronous JavaScript And XML”), uma técnica usada para carregar conteúdo
em segundo plano, permitindo que a página seja atualizada sem problemas sem recarregar
(como aqueles feeds que atualizam automaticamente).
O script da Web definitivamente requer alguma proeza de programação de computador

tradicional. Embora muitos desenvolvedores da Web sejam formados em ciência da computação,
também é comum que os desenvolvedores sejam autodidatas. Alguns desenvolvedores que
conheço começaram copiando e adaptando scripts existentes, e então gradualmente
aumentaram suas habilidades de programação a cada novo projeto. Ainda assim, se você não
tem experiência com linguagens de programação, a curva de aprendizado inicial pode ser um pouco íngreme.
Se você quer ser um desenvolvedor web para viver, JavaScript é um requisito básico. Os
designers se beneficiarão ao entender o que o JavaScript pode fazer, mas talvez não precisem
aprender a escrevê-lo se estiverem trabalhando com uma equipe de desenvolvimento. O
Capítulo 21, Introdução ao JavaScript, fará com que você comece a entender como ele
funciona, e eu recomendo Aprender JavaScript de Ethan Brown (O'Reilly) para saber mais.
Desenvolvimento de back-end
Os desenvolvedores de back -end se concentram no servidor, incluindo os aplicativos e bancos

NUM RELANCE de dados executados nele. Eles podem ser responsáveis por instalar e configurar o software
do servidor (vamos olhar mais para os servidores no Capítulo 2, Como funciona a Web). Eles
Desenvolvimento de back-end
certamente serão obrigados a conhecer pelo menos uma, e provavelmente mais, linguagens
As tecnologias a seguir geralmente de programação do lado do servidor, como PHP, Ruby, .NET (ou ASP.NET), Python ou JSP,
estão no domínio do desenvolvedor
para criar aplicativos que forneçam a funcionalidade exigida pelo site. Os aplicativos lidam com
de back-end:
tarefas e recursos como processamento de formulários, sistemas de gerenciamento de
• Software de servidor (Apache, Microsoft
conteúdo (CMSs) e compras on-line, só para citar alguns.
IIS)
• Linguagens de aplicativos da Web (PHP,

Ruby, Python, JSP, ASP.NET) Além disso, os desenvolvedores de back-end precisam estar familiarizados com a configuração
• Software de banco de dados (MySQL, e manutenção de bancos de dados que armazenam todos os dados de um site, como o
Oracle, SQL Server) conteúdo que é colocado em modelos, contas de usuário, inventários de produtos e muito mais.
Algumas linguagens de banco de dados comuns incluem MySQL, Oracle e SQL Server.
O desenvolvimento de back-end está muito além do escopo deste livro, mas é importante
conhecer os tipos de tarefas que são executadas no nível do servidor. Você deve estar ciente
de que é possível obter funcionalidades como carrinhos de compras, listas de discussão e
assim por diante como soluções pré-empacotadas de sua empresa de hospedagem sem ter
que programá-las do zero.
Desenvolvedores Full Stack e Unicórnios

Ao procurar um emprego em desenvolvimento web, você verá frequentemente postagens procurando por
desenvolvedores “full-stack”. Isso significa uma pessoa fluente em linguagens de front-end (HTML, CSS,
JavaScript) e back-end (aplicativos de servidor, bancos de dados).
Existe uma raça rara de web designer que pode lidar com todas as tarefas mencionadas
anteriormente – desde estratégia de conteúdo até UX, desenvolvimento de front-end e o que acontece
no servidor. Essas pessoas são conhecidas nos negócios como “unicórnios”. Eu conheci alguns!
Outras funções
Não surpreendentemente, há uma infinidade de outras funções que contribuem para a

criação e manutenção de um site. Aqui estão algumas funções comuns que ficam fora
do apelido “web design”.
Gerente de produto
O gerente de produto de um site ou aplicativo orienta seu design e desenvolvimento
de uma maneira que atenda aos objetivos de negócios. Esse membro da equipe
deve ter um conhecimento profundo do mercado-alvo, bem como dos processos
envolvidos na criação do próprio site. Os gerentes de produto desenvolvem a
estratégia geral para o site de uma perspectiva de marketing, incluindo como e
quando ele será lançado.
Gestor de projeto
O gerente de projeto coordena os designers, desenvolvedores e todos os outros que
estão trabalhando no site. Eles gerenciam coisas como cronogramas, abordagens
de desenvolvimento, entregas e assim por diante. O gerente de projeto trabalha com
o gerente de produto e outros proprietários de produto para garantir que o projeto
seja concluído dentro do prazo e do orçamento.
Especialista em SEO
Um site ou aplicativo não é muito bom se ninguém souber que ele existe, por isso é
crucial que um site seja facilmente encontrado pelos mecanismos de busca. Search
Engine Optimization (SEO) é uma disciplina focada em ajustar a estrutura e o código
do site de uma maneira que aumenta as chances de ser altamente classificado nos
resultados de pesquisa. Pode haver um especialista em SEO na equipe interna ou
uma empresa pode optar por contratar uma empresa de SEO externa. O SEO às
vezes é percebido como uma arte sombria, mas há muitas maneiras de melhorar a
localização que não são dissimuladas. Na verdade, a técnica número um para
melhorar o SEO é simplesmente ter um bom conteúdo com marcação HTML inteligente.
Produtores de multimídia
Uma das coisas legais da web é que você pode adicionar elementos multimídia a
um site, incluindo som, vídeo, animação e até jogos interativos. A criação de
elementos multimídia geralmente é melhor deixar para artistas e técnicos nessas
áreas, embora eles possam fazer parte da equipe da web se vídeo, animação ou
interatividade forem essenciais para a missão do site.
Isso conclui nosso passeio pela vila virtual de trabalhadores envolvidos na criação de
um site. Quanto maior o site, maior a probabilidade de cada membro da equipe ter uma
especialização restrita e cargos como “Líder de UX para mensagens de erro”. O mais
provável é que todos na equipe possuam um espectro de habilidades e as linhas entre
as disciplinas se confundirão. Por exemplo, faço design de interação e interface do
usuário, design gráfico, HTML e CSS, mas não escrevo JavaScript, trabalho no servidor
ou me envolvo com organização de conteúdo. Neste livro, pretendo fornecer uma base
nas tecnologias de front-end que o prepararão para várias funções.

Preparando-se para Web Design
(Soft) Skills que todo web designer precisa

Nós nos concentramos em algumas habilidades técnicas que serão úteis na construção Por exemplo, você pode chegar ao trabalho um dia e descobrir que o cliente
de sites. Gostaria de mencionar mais algumas habilidades – muitas vezes esquecidas – mudou completamente suas prioridades. Você pode descobrir que eles
que são igualmente críticas para o seu sucesso. cancelaram seu projeto completamente. Você pode ser solicitado a aprender
novas habilidades e mudar de posição na equipe.
Excelentes habilidades de comunicação
Permanecer adaptável é a chave para a sobrevivência.
Em seu trabalho, você precisará se comunicar pessoalmente, por telefone,
por e-mail e em ferramentas de mensagens de texto com clientes, membros Pensamento crítico e bom senso
da equipe e superiores. Seja claro, proativo e direto com o que você tem a dizer.
A resolução de problemas é central para todas as disciplinas relacionadas ao web
Uma boa comunicação requer não apenas que você se expresse com clareza,
design, então você precisa ser capaz de usar habilidades de pensamento crítico
mas também que você seja um bom ouvinte. Certifique-se de que você entende
para encontrar soluções e sempre empregar
os problemas que estão sendo discutidos e não tenha medo de pedir senso comum.
esclarecimentos se não o fizer.
Uma boa atitude
Criar sites significa fazer parte de uma equipe, mesmo que você trabalhe em casa
Flexibilidade
como freelancer. Esteja ciente de que a atitude com a qual você aborda seu
Seja capaz de mudar de direção rapidamente, porque não apenas a tecnologia
trabalho é contagiosa, portanto, esforce-se para ser um membro da equipe positivo e
da web muda rapidamente, mas sem dúvida você também terá problemas em
amigável.
seu trabalho diário. Por
PREPARANDO-SE PARA O DESIGN DA WEB
Não é surpresa que os web designers profissionais exijam uma quantidade razoável de
equipamentos, tanto de hardware quanto de software. Uma pergunta que me fazem com
frequência é: “O que eu preciso comprar?” Não posso dizer especificamente o que comprar,
mas fornecerei uma visão geral das ferramentas típicas do comércio.
Equipamento
Para um ambiente de desenvolvimento web confortável, recomendo os seguintes
equipamentos:
Um computador sólido e atualizado
Macintosh, Windows ou Linux é bom, então use o que você tiver e se sentir confortável.
Os departamentos criativos em empresas profissionais de desenvolvimento web tendem
a ser baseados em Mac. Para trabalho de back-end, Linux e Windows são populares.
Embora seja bom ter uma máquina super-rápida, os arquivos que compõem as páginas
da web são muito pequenos e tendem a não sobrecarregar muito os computadores. A
menos que você esteja entrando em edição de som e vídeo, não se preocupe se sua
configuração atual não for a melhor e mais recente.
Um grande monitor
Embora não seja um requisito, um monitor grande facilita a vida. Quanto mais espaço
de monitor você tiver, mais janelas e painéis de controle você poderá abrir ao mesmo
tempo. Você também pode ver mais da sua página para tomar decisões de design. Se
você estiver usando um monitor grande, certifique-se de projetar para usuários com
monitores e dispositivos menores em mente.
Um segundo computador para teste
Muitos designers e desenvolvedores acham útil ter um computador de teste executando

uma plataforma diferente do computador que eles usam para desenvolvimento (ou seja,
se você projeta em um Mac, teste em um PC). Como os navegadores funcionam de
maneira diferente em Macs e em máquinas Windows, é fundamental testar suas páginas
no maior número possível de ambientes e, principalmente, no sistema operacional
Windows atual. Se você é um web designer amador trabalhando em casa, pode verificar
suas páginas na máquina de um amigo. Os usuários de Mac devem verificar a barra
lateral “Executar o Windows no seu Mac” .
Dispositivos móveis para testes
A web se tornou móvel! Isso significa que é absolutamente essencial que você teste a
aparência e o desempenho do seu site em navegadores em smartphones e tablets. O
teste de dispositivos é discutido no Capítulo 17, Web Design Responsivo.
Um scanner e/ ou câmera
Se você pretende criar suas próprias imagens e texturas, precisará de algumas

ferramentas para criá-las.
Software de Produção Web
Não há escassez de software disponível para criar páginas da web. Nos primeiros dias,
apenas nos contentávamos com ferramentas originalmente projetadas para impressão. Hoje,
existem ferramentas maravilhosas criadas especificamente com o web design em mente que
tornam o processo mais eficiente. É um software de listagem de negócios delicado em um
livro como este porque a) existem tantos programas, b) todo mundo tem seu favorito pessoal,
e c) novas ferramentas surgem tão rapidamente que certamente existem opções mais novas
e legais que você tem acesso a isso não existia quando escrevi isso.
Execute o Windows no seu Mac

Se você tiver um computador Macintosh com um chip Intel executando o macOS (Leopard ou posterior),
não precisará de um computador separado para testar em um ambiente Windows.
Agora é possível executar o Windows diretamente no seu Mac usando o aplicativo gratuito Boot Camp,
que permite alternar para o Windows na reinicialização.
Existem vários outros produtos de VM (Máquina Virtual) para macOS que permitem alternar entre Mac e
NOTA
Windows, incluindo estes:
• VMFusion (www.vmware.com/fusion) é um produto comercial com uma avaliação gratuita que você Para fazer os exercícios deste livro, você só
pode baixar. precisa do editor de texto que acompanha
• O Parallels Desktop para Mac (www.parallels.com) também é um produto comercial com seu sistema operacional e software gratuito de
um teste gratuito. criação de imagens. Não é necessário
comprar qualquer coisa para acompanhar.

• Oracle VirtualBox (virtualbox.org) é um programa gratuito que permite executar um
vários sistemas operacionais convidados, incluindo Windows e vários tipos de Unix.
Todos os produtos de VM exigem que você compre uma cópia do Microsoft Windows, mas com certeza é
melhor do que comprar uma máquina inteira.

Dito isto, aqui está uma visão geral dos tipos de software que compõem as ferramentas do
nosso comércio, juntamente com algumas menções específicas dos mais populares em
cada classe.
Ferramentas de codificação
Embora você possa usar os editores de texto simples que vêm com seu computador, um
editor de código dedicado torna a tarefa de escrever HTML, CSS e JavaScript muito mais
fácil. Os editores de código entendem a sintaxe do código que você escreve, para que
possam fazer coisas para você, como codificação de cores, detecção de erros e finalização
automática de tarefas simples, como fechar tags HTML. Alguns fornecem visualizações de
página para que você possa visualizar os resultados do seu código enquanto trabalha.
A FIGURA 1-6 mostra a aparência de um documento HTML no editor Sublime Text.

Aqui estão apenas alguns dos editores de código mais conhecidos para produção na web
que vale a pena explorar:
• Texto sublime (sublimetext.com)
• Atom (livre do GitHub; atom.io)
• Suportes (livres da Adobe; brackets.io)
• CodeKit (codekitapp.com; somente Mac)
• Adobe Dreamweaver (www.adobe.com/products/dreamweaver.html)
• Coda (panic.com/coda/)
• Microsoft Visual Studio (visualstudio.com)
FIGURA 1-6. O Sublime Text é um exemplo de editor de código dedicado.
Interface do usuário e ferramentas de layout
Há uma nova geração de ferramentas de design de interface feitas especificamente para sites
e outros aplicativos. Por terem sido projetados do zero com o design de interface em mente,
eles parecem antecipar todas as necessidades de um web designer. As ferramentas de design
de interface facilitam o design de vários layouts (como layouts em vários tamanhos de tela),
bem como a exportação de imagens e códigos para uso na produção. Alguns permitem
interatividade básica, como cliques e furtos, para que seus modelos possam ser compartilhados
online e usados para testes básicos de interface.
Sketch (sketchapp.com, apenas Mac), mostrado na FIGURA 1-7, é extremamente popular no

momento em que este artigo foi escrito. Outras opções incluem o seguinte:
• Designer de afinidade (affinity.serif.com/en-us/designer/)
• Adobe XD (www.adobe.com/products/xd.html)
• Figma (fima.com)
• UXPin (uxpin.com)
FIGURA 1-7. Sketch (somente Mac) é um exemplo de ferramenta de design de interface.
Ferramentas de criação gráfica da web
Certamente é possível criar todas as imagens que você precisa para um site usando uma das
ferramentas de design de interface listadas. Existem também programas que se concentram
exclusivamente na criação de imagens que podem exportar arquivos em formato web para
tapetes. Para designers profissionais, o conjunto de ferramentas da Adobe Creative Cloud
(adobe.com) , que inclui Photoshop (FIGURA 1-8), Illustrator e outras ferramentas de design
de ponta, vale o investimento.
Se a taxa de assinatura mensal da Adobe estiver fora de alcance, você pode tentar alternativas
de custo mais baixo que oferecem muitos dos mesmos recursos. O número de ferramentas
gráficas por aí é vertiginoso, então estou reunindo apenas algumas aqui:

• GIMP (gratuito, de código aberto; gimp.org)
• Corel PaintShop Pro (para edição de fotos; paintshoppro.com; somente Windows)
• Corel Draw (para desenho vetorial; coreldraw.com; somente Windows)
• Pixelmator (pixelmator.com; somente Mac)
Os seguintes editores de imagem funcionam diretamente no seu navegador, sem a necessidade

de baixar um programa, embora você precise pagar por uma conta:
• SumoPaint (sumopaint.com)
• Pixlr (pixlr.com)
FIGURA 1-8. Adobe Photoshop é o padrão profissional para edição de imagens.
Uma variedade de navegadores
Um dos maiores desafios para os web designers é que nossos sites podem ter aparência e
comportamento diferentes de navegador para navegador. Por esse motivo, é fundamental que
testemos nossos designs com antecedência e com frequência na maior variedade possível de navegadores.
Estes são os navegadores que os designers e desenvolvedores mantêm para testar:
• Chrome (google.com/chrome)
• Firefox (www.mozilla.org)
• MS Edge (www.microsoft.com/en-us/windows/microsoft-edge; somente Windows)
• Internet Explorer 9–11 (www.microsoft.com; pesquise “Internet Explorer”; somente Windows)
• Safari (support.apple.com/downloads/#safari; apenas Mac)
• Ópera (opera.com)
Você também precisará testar em uma variedade de navegadores de smartphones, incluindo iOS
Safari, navegadores Android e navegadores móveis de terceiros. Discutiremos os testes móveis
mais adiante no Capítulo 17.
Ferramentas de gerenciamento e transferência de arquivos
Web design e desenvolvimento envolvem uma grande quantidade de arquivos em movimento,

particularmente do computador onde você faz o seu trabalho para o computador servidor que
hospeda o site. Para mover arquivos pela Internet, você usa um programa FTP (abreviação de File
Transfer Protocol) . Você descobrirá que muitos serviços de hospedagem oferecem suas próprias
ferramentas de FTP para enviar seus arquivos para seus servidores. Muitos dos editores de código
listados anteriormente também incluem funcionalidade FTP integrada. Ou você pode usar um
programa de FTP autônomo, como um destes:
• Filezilla (filezilla-project.org; grátis, todas as plataformas)
• Cyberduck (cyberduck.io; Mac e Windows)
• WinSCP (winscp.net/eng/index.php; gratuito, somente Windows)
• Transmitir (panic.com/transmit/; somente Mac)
Você também pode achar útil ter um aplicativo de terminal (ferramenta de linha de comando) que
permite digitar comandos Unix para definir permissões de arquivo, mover ou copiar arquivos e
diretórios ou gerenciar o software do servidor.
As ferramentas de linha de comando, que têm vários usos em design da Web e fluxo de trabalho
de desenvolvimento, são discutidas com mais detalhes no Capítulo 20, Ferramentas modernas
de desenvolvimento da Web:
• Terminal (instalado com macOS; mostrado na FIGURA 1-9)
• Cygwin (cygwin.com; emulador Linux para Windows que inclui uma ferramenta de linha
de comando)
FIGURA 1-9. A ferramenta de linha de comando Terminal para macOS.

O que você aprendeu
EXERCÍCIO 1-1.
O QUE VOCÊ APRENDEU
Fazendo um balanço
Espero que este capítulo tenha lhe dado uma visão geral das muitas funções e
Agora que você está dando o primeiro passo no responsabilidades que se enquadram no guarda-chuva do “design da web”. Eu também
aprendizado de web design, pode ser um bom espero que você saia percebendo que você não precisa aprender tudo. E mesmo que
momento para fazer um balanço de seus ativos e você queira aprender tudo eventualmente, não precisa aprender tudo de uma vez.
objetivos. Usando as listas neste capítulo como um
Então relaxe e não se preocupe. A outra boa notícia é que, embora existam muitas
guia geral, tente anotar as respostas para as seguintes
ferramentas profissionais, é possível criar um site básico e colocá-lo em funcionamento
perguntas:
sem gastar muito dinheiro usando ferramentas disponíveis gratuitamente ou baratas e
• Quais são seus objetivos de web design? Para
a configuração do computador existente.
se tornar um web designer profissional?
Para fazer apenas sites pessoais?
Como você verá em breve, é fácil começar a criar páginas da Web — você poderá criar
• Quais aspectos do web design mais lhe interessam? páginas simples quando terminar de ler este livro. A partir daí, você pode continuar
adicionando truques e encontrar seu nicho específico em web design. Enquanto isso,
• Que habilidades atuais você possui que serão
tente responder às perguntas do EXERCÍCIO 1-1.
úteis na criação de páginas da web?
• Quais habilidades você precisará aprimorar?
TESTE-SE
• Quais ferramentas de hardware e software você
já possui para web design?

Cada capítulo deste livro termina com algumas perguntas que você pode responder
• Quais ferramentas você precisa comprar?
para ver se captou as informações importantes. As respostas aparecem no Apêndice
Quais ferramentas você gostaria de comprar
eventualmente?
A.
1. Combine esses profissionais da web com o produto final que eles podem ser
responsável pela produção:
uma. Designer gráfico _____ Documentos HTML e CSS
b. Departamento de Produção _____ Scripts PHP
c. Designer de experiência do usuário _____ Entregas de “olhar e sentir”
d. Programador de back-end _____ Storyboards
2. O que o W3C faz?
3. Combine a tecnologia da web com sua tarefa apropriada:
uma. HTML _____ Verifica um campo de formulário para uma entrada válida
b. CSS _____ Cria um aplicativo Web personalizado do lado do servidor
c. JavaScript _____ Identifica o texto como um título de segundo nível
d. Rubi _____ Torna todos os títulos de segundo nível azuis
4. Qual é a diferença entre desenvolvimento web front-end e back-end?
5. O que uma ferramenta FTP faz e como você consegue uma?
CAPÍTULO
COMO A WEB 2
FUNCIONA
Comecei no web design no início de 1993 – bem perto do início da própria web. Isso foi há um NESTE CAPÍTULO
quarto de século (suspiro!), mas ainda me lembro claramente da primeira vez que olhei para uma
Uma explicação da web no que se
página da web. Era difícil dizer de onde vinha a informação e como tudo funcionava.
refere à internet
O papel do servidor
Este capítulo separa as peças e apresenta algumas terminologias básicas.
Começaremos com o quadro geral e trabalharemos nos detalhes. O papel do navegador
URLs e seus componentes

A INTERNET CONTRA A WEB A anatomia de uma página da web
Não, não é uma batalha até a morte, apenas uma oportunidade para apontar a distinção entre
duas palavras que estão sendo cada vez mais usadas de forma intercambiável.
A internet é uma rede internacional de computadores conectados. Nenhuma empresa é

proprietária da internet; é um esforço cooperativo governado por um sistema de padrões e regras.
O objetivo de conectar computadores, é claro, é compartilhar informações. Há muitas maneiras
pelas quais as informações podem ser transmitidas entre computadores, incluindo e-mail (POP3/
IMAP/SMTP), transferência de arquivos (FTP), shell seguro (SSH) e muitos outros modos
especializados sobre os quais a Internet é construída. Esses métodos padronizados para
transferir dados ou documentos em uma rede são conhecidos como protocolos.
A web (originalmente chamada de World Wide Web, portanto, o “www” nos endereços dos sites) A web é um subconjunto de
é apenas uma das maneiras pelas quais as informações podem ser compartilhadas pela Internet. a Internet. É apenas uma das
Ele é único porque permite que os documentos sejam vinculados uns aos outros por meio de muitas maneiras pelas quais as
links de hipertexto – formando assim uma enorme “teia” de informações conectadas. A web usa informações podem ser transferidas
um protocolo chamado HTTP (HyperText Transfer Protocol). Esse acrônimo deve parecer familiar
computadores em rede.
porque são as primeiras quatro letras de quase todos os endereços de sites, como discutiremos
em uma próxima seção.
21
Servindo suas informações
Uma Breve História da Web

A web nasceu em um laboratório de física de partículas (CERN) em Genebra, Suíça, em 1989. Lá,
um especialista em computação chamado Tim Berners-Lee propôs pela primeira vez um sistema de
gerenciamento de informações que usava um processo de “hipertexto” para vincular documentos
relacionados em uma rede . Ele e seu parceiro, Robert Cailliau, criaram um protótipo e o lançaram para
revisão. Nos primeiros anos, as páginas da web eram somente texto. É difícil acreditar que em 1992, o
mundo tinha apenas cerca de 50 servidores web, no total.
O verdadeiro impulso para a popularidade da web veio em 1992, quando o primeiro navegador gráfico
(NCSA Mosaic) foi introduzido, e a web saiu do campo da pesquisa científica para a mídia de massa.
O desenvolvimento contínuo de tecnologias web é supervisionado pelo World Wide Web Consortium
(W3C).
Se você quiser se aprofundar na história da web, confira os Arquivos de História do W3C em

www.w3.org/History.html.
CURIOSIDADE: Se você olhar para essa página, verá uma entrada de julho de 1993 para o
primeiro “WWW Wizards Workshop”. Embora eu não tenha participado dessa reunião, fiz o design
da camiseta comemorativa!
SERVINDO SUAS INFORMAÇÕES
Vamos falar mais sobre os computadores que compõem a internet. Como eles “exibem”
documentos mediante solicitação, esses computadores são conhecidos como servidores.
Mais precisamente, o servidor é o software (não o próprio computador) que permite que o
computador se comunique com outros computadores; no entanto, é comum usar a palavra
“servidor” para se referir ao computador também. A função do software de servidor é
aguardar uma solicitação de informações e, em seguida, recuperar e enviar essas
informações de volta o mais rápido possível.
Não há nada de especial nos próprios computadores... imagine qualquer coisa, desde uma
máquina Unix de alta potência até um humilde computador pessoal. É o software do
servidor que faz tudo acontecer. Para que um computador faça parte da web, ele deve
estar executando um software de servidor web especial que permita lidar com transações
do HyperText Transfer Protocol. Os servidores da Web também são chamados de
TERMINOLOGIA
servidores HTTP.
Código aberto Existem muitas opções de software de servidor por aí, mas as duas mais populares são
O software de código aberto é o Apache (software de código aberto) e o Microsoft Internet Information Services (IIS). O
desenvolvido como um esforço
Apache está disponível gratuitamente para computadores baseados em Unix e vem
colaborativo com a intenção de
instalado em Macs com macOS. Existe uma versão para Windows também.
disponibilizar seu código-fonte para outros
programadores para uso e modificação.
O Microsoft IIS faz parte da família de soluções de servidor da Microsoft.
Os programas de código aberto geralmente são gratuitos.
Cada computador e dispositivo (roteador, smartphone, carro, etc.) conectado à Internet
recebe um endereço IP numérico exclusivo (“IP” significa “Protocolo de Internet”). Por
exemplo, enquanto escrevo isso, o computador que hospeda oreilly.com tem o endereço
IP 199.27.145.64. Todos esses números podem ser vertiginosos, por isso, felizmente, o
Domain Name System (DNS) foi desenvolvido para nos permitir fazer referência a
Uma palavra sobre navegadores
esse servidor por seu nome de domínio, “oreilly.com”, também. O endereço IP numérico é
TERMINOLOGIA
útil para software de computador, enquanto o nome de domínio é mais acessível para
humanos. A correspondência dos nomes de domínio de texto com seus respectivos Intranets e Extranets
endereços IP numéricos é tarefa de um servidor DNS separado. Se você pensar em um
Quando você pensa em um site, geralmente
endereço IP como um número de telefone, o servidor DNS seria a agenda telefônica.
assume que ele é acessível a qualquer pessoa que
navegue na web. No entanto, muitas organizações
É possível configurar seu servidor web para que mais de um nome de domínio seja mapeado
aproveitam o incrível compartilhamento de
para um único endereço IP, permitindo que vários sites compartilhem um único
informações e o poder de coleta de sites para trocar
servidor.
informações apenas dentro de sua própria rede.
Essas redes especiais baseadas na web são
chamadas
UMA PALAVRA SOBRE NAVEGADORES

intranets. Eles são criados e funcionam
como sites comuns, mas usam dispositivos de
Agora sabemos que o servidor faz o serviço, mas e a outra metade da equação? O software
segurança especiais (chamados firewalls) que
que faz a solicitação é chamado de cliente. impedem que o mundo exterior os veja.
As pessoas usam navegadores de desktop, navegadores móveis e outras tecnologias
assistivas (como leitores de tela) como clientes para acessar documentos na web. O servidor As intranets têm muitos usos, como compartilhar
retorna os documentos para o navegador (também conhecido como agente do usuário nos informações de recursos humanos ou fornecer
acesso a bancos de dados de inventário.
círculos técnicos) para exibir.
As solicitações e respostas são tratadas por meio do protocolo HTTP, mencionado Uma extranet é como uma intranet, mas permite o
acesso a usuários selecionados fora
anteriormente. Embora estejamos falando de “documentos”, o HTTP pode ser usado para
da organização. Por exemplo, uma empresa de
transferir imagens, filmes, arquivos de áudio, dados, scripts e todos os outros recursos da
manufatura pode fornecer a seus clientes senhas que
web que normalmente compõem sites e aplicativos.
permitem verificar o status de seus pedidos no banco
de dados de pedidos da empresa. As senhas
É comum pensar em um navegador como uma janela em um monitor de computador com
determinam
uma página da web exibida nele. Estes são conhecidos como navegadores gráficos ou
navegadores de desktop e, por muito tempo, foram o único jogo de visualização da web na
qual fatia das informações da empresa
cidade. Os navegadores de desktop mais populares até o momento incluem Edge e Internet está acessível.
Explorer para Windows, Chrome, Firefox e Safari, com Opera e Vivaldi na parte traseira.
Atualmente, no entanto, mais da metade do tráfego da Web vem de navegadores móveis

em smartphones e tablets, como Safari no iOS, navegadores Android e Chrome em
dispositivos Android, Opera Mini e uma infinidade de outros navegadores móveis padrão e TERMINOLOGIA
instaláveis (consulte en .wikipedia.org/wiki/Mobile_browser para obter uma lista completa).
lado do servidor e
Navegar na web em uma tela sensível ao toque é o novo normal.
Lado do cliente
Também é importante ter em mente experiências alternativas na web. Usuários com Muitas vezes, em web design, você ouvirá
deficiência visual podem estar ouvindo uma página da web lida por um leitor de tela (ou referências a "lado do cliente" ou
simplesmente tornar seu texto extremamente grande). Os usuários com mobilidade limitada aplicações “do lado do servidor”. Esses termos
são usados para indicar quais
podem usar tecnologia assistiva, como joysticks ou comandos de voz, para acessar links e
máquina está fazendo o processamento.
inserir conteúdo. Os sites que construímos devem ser acessíveis e utilizáveis por todos os
Os aplicativos do lado do cliente são executados
usuários, independentemente de suas experiências de navegação.
na máquina do usuário (também conhecido como
frontend), enquanto os do lado do servidor
A web também está chegando às smart TVs e sistemas de jogos, onde os usuários acessam
aplicativos e funções usam o poder de
nossas páginas com controles remotos de TV ou controles do Xbox. Você nunca sabe onde
processamento do computador servidor (o
a web aparecerá em seguida! backend).
2. Como a Web funciona 23

Endereços de página da Web (URLs)
Mecanismos de renderização do navegador
O programa responsável por converter HTML e CSS no que você vê renderizado tecnicamente referindo-se ao mecanismo de renderização do navegador. Vários
na tela é chamado de mecanismo de renderização (também mecanismo de navegadores geralmente compartilham um mecanismo de renderização; por
navegador ou mecanismo de layout). Os navegadores que você usa em exemplo, o mecanismo Blink alimenta o Chrome, Opera e uma variedade de
computadores desktop e dispositivos móveis são compostos de mecanismos de navegadores Android. A TABELA 2-1 lista os mecanismos de renderização usados
renderização, bem como outros códigos usados para suas próprias interfaces de pelos navegadores da Web mais populares atualmente. Para obter mais
usuário e funcionalidades. Embora eu fale muito sobre quais navegadores suportam informações, pesquise Wikipedia.com por “Comparação de mecanismos de navegador
funções específicas neste livro, estou da web” e “Comparação de navegadores da web”.
TABELA 2-1. Navegadores atuais e seus mecanismos de renderização
Navegador Mecanismo de renderização
Chrome 28+ Blink (bifurcado do WebKit)
Firefox (todos) Gecko (exceto Firefox para iOS, que usa WebKit)
Safari e Safari iOS (todos) WebKit
Internet Explorer 4–11 Tridente
MS Edge (todos) EdgeHTML (fork do Trident)
Ópera 15+ Blink (bifurcado do WebKit)
A realidade é que as páginas podem ter aparência e desempenho diferentes de navegador

para navegador. Isso se deve ao suporte variado para tecnologias da Web, recursos
variados do dispositivo e capacidade dos usuários de definir suas próprias preferências
de navegação. É o aspecto mais desafiador de projetar e desenvolver para o nosso meio.
ENDEREÇOS DE PÁGINAS DA WEB (URLS)
Cada página e recurso na web tem seu próprio endereço especial chamado URL, que
significa Uniform Resource Locator. É quase impossível passar um dia sem ver um URL
(pronuncia-se “URL”, não “erl”) colado na lateral de um ônibus, impresso em um cartão
de visita ou transmitido em um comercial de televisão. Os endereços da Web são
totalmente integrados ao vernáculo moderno.
Alguns URLs são curtos e agradáveis. Outros podem parecer sequências malucas de
caracteres separados por pontos (pontos) e barras, mas cada parte tem um propósito
específico. Vamos separar um.
As partes de um URL
Um URL completo geralmente é composto por três componentes: o protocolo, o nome do

site e o caminho absoluto para o documento ou recurso, conforme mostrado em
FIGURA 2-1.
1Protocolo 2 Nome do site 3 caminho absoluto
http://www.example.com/2018/samples/first.html
Nome de host Nome de domínio Caminho de diretório Documento
FIGURA 2-1. As partes de um URL.
1 http://
A primeira coisa que a URL faz é definir o protocolo que será usado para essa transação
URL versus URI
específica. As letras “HTTP” informam ao servidor para usar o HyperText Transfer O W3C e a comunidade de
Protocol ou entrar no “modo web”. Você também pode ver um URL começando com desenvolvimento estão se afastando
do termo URL (Uniform Resource
https://, que explico na barra lateral “HTTPS, The Secure Web Protocol” .
Locator) e em direção ao URI (Uniform
Resource Identifier) mais genérico e
2 www.exemplo.com tecnicamente preciso. Na rua e até
mesmo no trabalho, no entanto, é
A próxima parte do URL identifica o site por seu nome de domínio. provável que você ainda ouça URL.
Neste exemplo, o nome de domínio é “example.com”. O “www”. parte no início é o nome Aqui está o skinny em URL
de host específico nesse domínio. O nome de host “www” tornou-se uma convenção, versus URI: um URL é um tipo de
mas não é uma regra. Na verdade, às vezes o nome do host pode ser omitido. Pode URI que identifica o recurso por sua
haver mais de um site em um domínio (chamados subdomínios). Por exemplo, também localização (o L em URL) na rede. O
outro tipo de URI é um URN que
pode haver “development.example.com”, “clients.example.com” e assim por diante.
identifica o recurso por nome ou
namespace (o N em URN).
3 /2018/samples/ first.html Por ser mais familiar, vou me ater ao
URL ao longo deste livro. Apenas
Este é o caminho absoluto através dos diretórios no servidor para o documento HTML
saiba que os URLs são um
solicitado, first.html. As palavras separadas por barras são os nomes dos diretórios, subconjunto de URIs, e os termos são
começando com o diretório raiz do host (como indicado pela inicial /). Como a internet frequentemente usados de forma intercambiável.
originalmente compreendia computadores rodando o sistema operacional Unix, nossa

Se você gosta de nerd sobre esse tipo de
maneira atual de fazer as coisas ainda segue as regras e convenções do Unix, daí o / coisa, eu o encaminhei para a entrada URI
separando os nomes dos diretórios. da Wikipedia: en.wikipedia.org/wiki/
Identificador de Recurso Uniforme.
Para resumir, a URL na FIGURA 2-1 diz que gostaria de usar o protocolo HTTP para se
conectar a um servidor web na internet chamado “www.example.com” e solicitar o documento
first.html, localizado em o diretório samples , que está no diretório 2018 .
URLs simplificados
Obviamente, nem todos os URLs que você vê são tão longos. Para chegar ao site da
O'Reilly, você deve digitar oreilly.com em vez de http://www.oreilly.com/index.html.
Veja por que isso funciona.

Ignorando o protocolo
Como quase todas as páginas da Web usam o HyperText Transfer Protocol, o http://
parte é muitas vezes apenas implícita. Este é o caso quando os nomes dos sites são anunciados
HTTPS, o Seguro na mídia impressa ou na TV, como forma de manter o URL fácil de lembrar.
Protocolo da Web
Além disso, os navegadores são programados para adicionar http:// automaticamente como uma
Se você olhar para a barra de endereços
conveniência para economizar alguns pressionamentos de tecla. Pode parecer que você está
enquanto faz compras online ou usa um
site bancário, notará que eles usam o deixando de fora, mas está sendo enviado para o servidor nos bastidores.
protocolo HTTPS. HTTPS, onde “S” significa
Quando começarmos a usar URLs para criar hiperlinks em documentos HTML no Capítulo 6,
“seguro”, é uma modificação do HTTP que
criptografa as informações do formulário
Adicionando Links, você aprenderá que é necessário incluir o protocolo ao criar um link para uma
quando são enviadas entre o cliente do página da Web em outro servidor.
usuário e o servidor. Qualquer página da
Web que tenha campos de formulário que
Apontando para arquivos padrão
aceitem texto (como uma barra de pesquisa
ou um login) deve usar HTTPS. Muitos endereços não incluem um nome de arquivo, mas simplesmente apontam para um diretório,
Até o momento, cerca de 60% das como estes:
páginas (e crescendo!) usam HTTPS e por
http://www.oreilly.com
boas razões. Não só é uma boa ideia manter
http://www.jendesign.com/resume/
os dados do usuário seguros em trânsito, mas
o Google está promovendo a transição para Quando um servidor recebe uma solicitação de um nome de diretório em vez de um arquivo
HTTPS com alguns
específico, ele procura nesse diretório um documento padrão, normalmente denominado index.
incentivos sérios também. Se você tem um
html. Então, quando alguém digita as URLs anteriores em seu navegador, o que ele realmente vê
site que aceita entrada de texto e não usa
HTTPS, seu site não subirá tão alto nos
é isto:
resultados de pesquisa do Google. http://www.oreilly.com/index.html

Além disso, no Chrome, esses sites são http://www.jendesign.com/resume/index.html
marcados com “Não seguro” na barra superior
do navegador. O nome do arquivo padrão (também conhecido como arquivo de índice) pode variar e depende de
HTTPS funciona em conjunto com outro como o servidor está configurado. Nesses exemplos, ele é denominado index.
protocolo, SSL (para Secure Socket html, mas alguns servidores usam o nome de arquivo default.htm. Se o seu site usa programação
Layer), que precisa ser ativado no servidor do lado do servidor para gerar páginas, o arquivo de índice pode ser denominado index.php
para que as transações seguras funcionem.
ou Padrão.aspx. Basta verificar com o administrador do servidor ou com o departamento de suporte
As empresas de hospedagem têm opções
técnico do serviço de hospedagem para certificar-se de dar o nome correto ao arquivo padrão.
para habilitar o SSL, geralmente de graça.
Lembre-se de que o HTTPS protege os

dados do formulário à medida que são Outra coisa a notar é que no primeiro exemplo, a URL original não tinha uma barra final para indicar
enviados ao servidor, mas não faz nada para que era um diretório. Se a barra for omitida, o servidor verificará se a solicitação é um arquivo ou
tornar seu site “seguro” e protegido contra hackers.
um diretório. Se for um diretório, o servidor solicita ao navegador que envie a solicitação novamente
com uma barra. No final, a barra é incluída para diretórios, mesmo que não seja incluída na primeira
vez que for inserida (consulte a Dica de desempenho).
O arquivo de índice também é útil para segurança. Alguns servidores (dependendo de sua
DICA DE P ERFO RMANCE configuração) exibem o conteúdo do diretório se o arquivo padrão não for encontrado. A FIGURA
2-2 mostra como os documentos no diretório housepics são expostos como resultado de um
Se você quiser minimizar as viagens de ida arquivo padrão ausente. Uma maneira de evitar que as pessoas bisbilhotem seus arquivos é ter
e volta ao servidor, inclua barras no final
certeza de que há um arquivo de índice em cada diretório. O administrador do servidor também
dos nomes de diretório em URLs em seus
pode adicionar outras proteções para impedir que seus diretórios sejam exibidos no navegador.
links.
A anatomia de uma página da Web
index.html
Fornecendo a URL para um diretório (em vez
que um nome de arquivo específico) solicita ao servidor que
procure um arquivo padrão, normalmente chamado index.html.
Alguns servidores são configurados para retornar uma lista do

conteúdo desse diretório se o arquivo padrão não for encontrado.
FIGURA 2-2. Alguns servidores exibem o conteúdo do diretório se um arquivo de índice não for
encontrado.
A ANATOMIA DE UMA PÁGINA DA WEB
Estamos todos familiarizados com a aparência das páginas da Web na janela do navegador,
mas o que está acontecendo “por baixo do capô”?
Na parte superior da FIGURA 2-3, você vê uma página da Web mínima conforme aparece em
um navegador gráfico. Embora você a veja como uma página coerente, na verdade ela é
montada a partir de quatro arquivos separados: um documento HTML (index.html), uma folha de
estilo (kitchen.css) e dois gráficos (foods.png e spoon.png). O documento HTML está executando
o show.
Documentos HTML
Você pode ficar tão surpreso quanto eu ao saber que as páginas graficamente ricas e interativas
que vemos na web são geradas por documentos simples e somente texto.
O arquivo de texto nos bastidores é chamado de documento de origem.
Dê uma olhada em index.html, o documento fonte para a página web Jen's Kitchen. Você pode
ver que ele contém o conteúdo de texto da página mais tags especiais (indicadas com colchetes
angulares, < e >) que descrevem cada elemento na página.

A página da web mostrada nesta janela

do navegador consiste em quatro arquivos
separados:
• Um documento de texto HTML
• Uma folha de estilo
• Duas imagens
As tags no documento de origem

HTML fornecem aos navegadores
instruções sobre como o texto está
estruturado e onde as imagens devem ser

colocadas.
index.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>Cozinha da Jen</title> <link
rel="stylesheet" href="kitchen.css" type="text/css">
</head>
<body>
<h1><img src="foods.png" alt="food illustration"> Cozinha da Jen</h1>
<p>Se você gosta de ler sobre <strong>cozinhar e comer</strong>, gostaria de aprender sobre alguns dos melhores restaurantes do mundo,
ou quer apenas algumas receitas de escolha para adicionar à sua coleção, <em> este é o site para você!</em></p>
<p><img src="spoon.png" alt="spoon illustration"> Sua amiga, Jen na cozinha de Jen</p>
<hr>
<small>Direitos autorais 2018, Jennifer Robbins</small> </
body> </html>
cozinha.css
alimentos.png
corpo { fonte: normal 1em Verdana; largura: 80%; margem: 1em automático; }
h1 { fonte: itálico 3em Geórgia; cor: rgb(23, 109, 109); margem: 1em 0
1em; }
img { margem: 0 20px 0 0; }
h1 img { margem inferior: -20px; }

colher.png
pequeno {cor: #666666; }
FIGURA 2-3. O arquivo de origem, a folha de estilo e as imagens que compõem uma página da Web simples.
Adicionar marcas descritivas a um documento de texto é conhecido como “marcar” o

documento. As páginas da Web usam uma linguagem de marcação chamada HyperText
Markup Language, ou HTML, que foi criada especialmente para documentos com links
de hipertexto. HTML define dezenas de elementos de texto que compõem documentos
como títulos, parágrafos, texto enfatizado e, claro, links. Há também elementos que
adicionam informações sobre o documento (como seu título), mídia como imagens e
vídeos e widgets para entradas de formulário, só para citar alguns.
Você pode visualizar a fonte de qualquer página da web. O EXERCÍCIO 2-1 fornece
algumas dicas e indicações.
A versão do HTML que usamos hoje é HTML5. Houve várias versões de HTML desde
seu nascimento em 1989, e algumas que ainda estão em uso hoje.
Há um histórico completo do HTML, todas as suas versões e uma visão geral do que
torna o HTML5 único no Apêndice D, Do HTML+ ao HTML5.
EXERCÍCIO 2-1. Ver fonte
Você pode ver o arquivo HTML de qualquer página da Web visualizando sua fonte em um navegador de desktop.
A maioria dos navegadores modernos mantém a função View Source com as ferramentas do desenvolvedor
e normalmente abre o documento de origem em uma janela separada ou em um painel do desenvolvedor na parte
inferior da janela atual.
AVISO
Veja onde encontrar a função View Source nos principais navegadores de desktop:
Safari: Desenvolver ÿ Mostrar ÿ Origem da página Tenha em mente que, embora aprender com o
trabalho de outras pessoas seja bom, roubar o código

Chrome: Exibir ÿ Desenvolvedor ÿ Exibir código-fonte
de outras pessoas é uma forma ruim (ou até mesmo ilegal).
Firefox: Ferramentas ÿ Desenvolvedor Web ÿ Origem da página
Se você quiser usar o código como o vê, peça
MS Edge: clique com o botão direito do mouse na página e selecione Exibir fonte. Se você não vir essa opção no
permissão e sempre dê crédito a quem fez o trabalho.
menu de contexto, talvez seja necessário ativá-la nas Configurações do desenvolvedor.
Abra uma nova janela do navegador e digite about:flags na barra de endereços.
Em "Configurações do desenvolvedor", marque "Mostrar fonte de exibição" e "Inspecionar elemento" no
menu de contexto. Agora, quando você for para uma página da Web, poderá clicar com o botão direito
do mouse na página e acessar a função Exibir código-fonte. Você também pode usar o atalho de teclado
Ctrl+U ou a tecla F12.
1. Com o navegador de sua escolha, insira este URL em seu navegador:
www.learningwebdesign.com/5e/kitchen.html
Você deve ver a página da web Jen's Kitchen da FIGURA 2-3.
2. Siga as instruções do seu navegador listadas acima para visualizar o documento HTML de origem
para a página Jen's Kitchen. Deve ser igual ao mostrado na figura.
3. Para visualizar uma página um pouco mais complicada, dê uma olhada na fonte da home page do
learningwebdesign.com .
4. A fonte para a maioria dos sites é consideravelmente mais complicada. Veja a fonte de
oreilly. com. Tem folhas de estilo, scripts, gráficos SVG embutidos... o que funciona! Não se preocupe se você
não entender o que está acontecendo. Muito disso parecerá mais familiar quando você terminar de ler este livro.

Uma rápida introdução à marcação HTML

Você aprenderá o âmago da marcação na Parte II, então não quero atrapalhar você
com muitos detalhes agora, mas há algumas coisas que gostaria de destacar sobre
como o HTML funciona e como os navegadores o interpretam.
Leia o documento HTML na FIGURA 2-3 e compare-o com os resultados do navegador.

É fácil ver como os elementos marcados com tags HTML no documento de origem
correspondem ao que é exibido na janela do navegador.
Primeiro, você notará que o texto entre colchetes (por exemplo, <body> e <strong>)
não é exibido na página final. O navegador exibe apenas o que está entre as tags—o
conteúdo do elemento. A marcação está oculta. A tag fornece o nome do elemento
HTML, geralmente uma abreviação como “h1” para “cabeçalho nível 1” ou “em” para
“texto enfatizado”.
Segundo, você verá que a maioria das tags HTML aparecem em pares ao redor do
conteúdo do elemento. Em nosso documento HTML, <h1> indica que o texto a seguir
deve ser um cabeçalho de primeiro nível; </h1> indica o fim do título. Alguns elementos,
chamados de elementos vazios, não possuem conteúdo. Em nosso exemplo, a tag
<hr> indica um elemento vazio que informa ao navegador para “inserir uma regra
horizontal aqui” como um divisor temático.
Como eu não estava familiarizado com programação de computadores quando comecei

a escrever HTML, isso me ajudou a pensar nas tags e no texto como “contas em uma
string” que o navegador interpreta uma a uma, em sequência. Por exemplo, quando o
navegador encontra um colchete aberto (<), ele assume que todos os caracteres a
seguir fazem parte da marcação até encontrar o colchete de fechamento (>). Da mesma
forma, ele assume que todo o conteúdo após uma tag de abertura <h1> é um título até
encontrar a tag de fechamento </h1> . Essa é a maneira pela qual o navegador analisa
o documento HTML. Compreender o método do navegador pode ser útil ao solucionar
problemas de um documento HTML com mau comportamento.
Onde estão as fotos?

Obviamente, não há imagens no próprio arquivo HTML, então como elas chegam
quando você visualiza a página final? Você pode ver na FIGURA 2-3 que cada imagem
é um arquivo separado. As imagens são colocadas no fluxo do texto com o elemento
de imagem HTML (img), que informa ao navegador onde encontrar o gráfico (sua URL).
Quando o navegador vê o elemento img , ele faz outra solicitação ao servidor para o
arquivo de imagem e o coloca no fluxo de conteúdo.
O navegador também envia solicitações ao servidor para folhas de estilo (como kitchen.
css), arquivos JavaScript (.js) e outras mídias incorporadas, como áudio e vídeos.
O software do navegador (ou mais especificamente, seu mecanismo de renderização)
reúne as partes separadas na página final.
A montagem da página geralmente acontece em um instante, então parece que a página inteira
é carregada de uma só vez. Em conexões lentas ou se a página incluir gráficos ou arquivos de
mídia enormes, o processo de montagem pode ser mais aparente, pois as imagens ficam atrás
do texto. A página pode até precisar ser redesenhada à medida que novas imagens, fontes e
folhas de estilo chegam (embora você possa construir suas páginas de forma a evitar que isso
aconteça).
Adicionando um pouco de estilo
Quero direcionar sua atenção para um último ingrediente-chave de nossa página mínima.
Perto do topo do documento HTML há um elemento de link que aponta para o documento da
folha de estilo kitchen.css. Essa folha de estilo inclui algumas linhas de instruções sobre como
a página deve ser exibida no navegador. Estas são instruções de estilo escritas de acordo com
as regras de Cascading Style Sheets (CSS).
O CSS permite que os designers adicionem instruções de estilo visual (conhecidas como
apresentação do documento) ao texto marcado (a estrutura do documento, na terminologia de
web design). Na Parte III, você conhecerá o poder das Folhas de Estilo em Cascata.
A FIGURA 2-4 mostra a página Jen's Kitchen sem (superior) e com (inferior) as instruções de
estilo. Os navegadores vêm equipados com estilos padrão para cada elemento HTML que eles
suportam, portanto, se um documento HTML não tiver instruções de estilo personalizadas, o
navegador usará o seu próprio. Isso é o que você vê na captura de tela na parte superior.
Mesmo apenas algumas regras de estilo podem fazer grandes melhorias na aparência de uma
página. FIGURA 2-4. A página Jen's Kitchen
sem (superior) e com (inferior) regras de
estilo personalizadas.
Adicionando Comportamentos com JavaScript
Para fazer com que os elementos da página façam algo, você usa uma linguagem de script
chamada JavaScript (consulte Nota). Não há scripts na página da Jen's Kitchen porque achei
melhor manter as coisas simples no início do livro, mas saiba que JavaScript é um ingrediente
essencial em sites modernos.
Enquanto o HTML fornece a estrutura e a folha de estilo CSS altera a aparência das coisas, o
JavaScript adiciona um componente de comportamento que controla como as coisas funcionam.
Os scripts podem ser arquivos independentes no servidor (com o sufixo .js ) ou ser escritos
diretamente no documento. Eles podem ser acionados para serem executados imediatamente
quando a página é carregada ou ser acionados por algo que o usuário faz, como clicar ou
passar o mouse em um elemento ou inserir algo em um campo de formulário.
Você terá uma introdução básica ao JavaScript na Parte IV deste livro.
NOTA
O JavaScript não é necessário para a interatividade de links e formulários da web, que funcionam
apenas com HTML.

Juntando tudo
COLOCANDO TUDO JUNTO

1. Para encerrar nossa introdução sobre como a web funciona, vamos traçar um fluxo típico
Sites estáticos x dinâmicos de eventos que ocorre com cada página da web que aparece na tela (FIGURA 2-5).
Sites estáticos consistem em arquivos HTML Solicite uma página da Web digitando sua URL (por exemplo, http:// jenkitchensite.com)
com conteúdo fixo que exibem as mesmas diretamente no navegador ou clicando em um link em uma página. A URL contém as
informações para todos os visitantes. Em informações necessárias para direcionar um documento específico em um servidor Web
outras palavras, cada página que você vê no específico na Internet. Nesse caso, ele aponta para o arquivo padrão (index.html) no
navegador é uma visualização de um único
diretório superior.
arquivo HTML no servidor. Este livro se
concentra na criação de páginas da Web 2. Seu navegador envia uma solicitação HTTP ao servidor nomeado na URL e solicita o
estáticas, pois são diretas e o melhor ponto de arquivo específico. A solicitação também inclui informações sobre quais idiomas o usuário
partida para iniciantes.
pode ler e quais tipos de arquivos o navegador pode aceitar. Se a URL especificar um
Por outro lado, sites dinâmicos
diretório (não um arquivo), é o mesmo que solicitar o arquivo padrão nesse diretório.
são gerados com programação
de backend, como PHP ou ASP.
Cada página é gerada pelo aplicativo 3. O servidor procura o arquivo solicitado e emite uma resposta HTTP na forma de um
em tempo real. Sites dinâmicos acessam cabeçalho HTTP. O cabeçalho inclui informações sobre o arquivo, como a data da última
conteúdo e dados de um banco de dados, e
as páginas finais podem ser personalizadas

modificação, o tamanho do arquivo e seu Content-Type (por exemplo, um arquivo .html
para cada usuário. Para sites extremamente tem o tipo de conteúdo “text/html”).
grandes com centenas ou milhares de
uma. Se a página não puder ser encontrada, o servidor retornará uma mensagem de
páginas, configurar e manter um site
dinâmico é consideravelmente menos erro. A mensagem normalmente diz “404 Not Found”, embora mensagens de erro
trabalhoso do que criar e armazenar cada mais hospitaleiras possam ser fornecidas. Outros tipos de erro também são
página como um documento HTML estático possíveis (consulte a barra lateral “Códigos de status HTTP”).
individualmente.
b. Se o documento for encontrado, o servidor recupera o arquivo solicitado e o retorna
ao navegador. Se o site for dinâmico, o servidor monta a página a partir dos dados
armazenados antes de retorná-la ao navegador.
4. O navegador analisa o documento HTML. Se a página contiver imagens (indicadas pelo

Códigos de status HTTP elemento HTML img ) ou outros recursos externos, como scripts ou folhas de estilo, o
navegador entrará em contato com o servidor novamente para solicitar cada recurso
Os servidores emitem códigos de status em
especificado na marcação.
resposta às solicitações do navegador. A
lista completa de códigos de status é 5. O navegador insere cada imagem no fluxo de documentos onde indicado pelo elemento
bastante longa (você pode ler sobre todos img , aplica estilos e executa scripts. E voilà! A página da web montada é exibida para
eles em en.wikipedia.org/wiki/List_of_
seu prazer de visualização.
HTTP_status_codes), mas aqui estão
algumas respostas comuns: Devo observar que descrevi um cenário tradicional e simplificado aqui para informar como as
200 OK páginas da Web são montadas. Atualmente, é comum que as páginas da Web sejam geradas
301 mudou-se permanentemente

a partir de sistemas de gerenciamento de conteúdo (CMSs) que mantêm o conteúdo em
bancos de dados e usam modelos para montar os dados em páginas em tempo real. Nesse
302 Movido Temporariamente
caso, na Etapa 3b, há um processo mais complicado de montar o arquivo de várias partes
404 não encontrado
em vez de apenas entregar um arquivo existente.
410 Gone (não está mais disponível)
500 Erro interno do servidor
Juntando tudo
Navegador (Cliente) Servidor
1 Digite um URL ou clique em um

link no navegador. Arquivos no Servidor
index.html alimentos.png
2 O navegador envia uma solicitação HTTP. HTT

P re
busca cozinha.css
colher.png
P re
sponse 3 O servidor procura ou monta
HTT “Vejo que você
o arquivo e
solicitou um responde com um HTTP
index.html diretório, resposta.
então estou
enviando
o arquivo
padrão, index.html.
Ops, nenhum arquivo
Aqui está."
Se o arquivo não estiver no
4 O navegador analisa o
servidor, ele retornará uma
documento. Se tiver imagens, folhas de
mensagem de erro.
estilo e scripts, o navegador entrará em
contato com o servidor novamente para cada
recurso.
alimentos.png
cozinha.css
colher.png
5 A página é montada na janela do

navegador.
FIGURA 2-5. Como os navegadores exibem páginas da web.
Colocando suas páginas na web

Se você quiser obter mais informações sobre como registrar nomes de domínio e encontrar um servidor para hospedar seu site, baixe o
artigo intitulado “Colocando suas páginas na Web” (PDF) em learningwebdesign.com/articles/.

Teste-se
TESTE-SE
Vamos jogar uma rodada de “Identifique esse acrônimo!” A seguir estão alguns termos
básicos da web mencionados neste capítulo. As respostas estão no Apêndice A.
1. HTML ______ uma. Início do Mosaic, o primeiro navegador gráfico
2. W3C ______ b. A localização de um documento ou recurso da web
3. CERN ______ c. A linguagem de marcação usada para descrever o conteúdo da web
4. CSS ______ d. Corresponde a nomes de domínio com endereços IP numéricos
5. HTTP ______ e. Um protocolo para transferência de arquivos
6. IP ______ f. Protocolo para transferência de documentos da web na internet
7. URL ______ g. A linguagem usada para instruir a aparência do conteúdo da web
8. NCSA ______ h. Laboratório de física de partículas onde a web nasceu
9. DNS ______ eu. protocolo de internet
10. FTP ______ j. A organização que monitora as tecnologias da web
CAPÍTULO
ALGUMAS GRANDES 3
CONCEITOS VOCÊ
PRECISA SABER
À medida que a web amadurece e o número de dispositivos que acessamos aumenta NESTE CAPÍTULO
exponencialmente, nossos trabalhos como web designers e desenvolvedores ficam

A web em dispositivos móveis
significativamente mais complicados. Francamente, há muito mais acontecendo lá fora do
que eu posso encaixar neste livro. Nos capítulos a seguir, vou me concentrar nos blocos Os benefícios dos padrões da web
básicos de construção de web design - elementos HTML, estilos CSS, uma amostra do
JavaScript e produção de imagens da web - que lhe darão uma base sólida para o Melhoria progressiva
desenvolvimento de suas habilidades.
Web design responsivo
Antes de chegarmos aos detalhes, quero apresentar alguns Grandes Conceitos que todo
Acessibilidade
web designer precisa conhecer. Analisaremos ideias e preocupações que informam nossas
decisões e contribuem para o ambiente web contemporâneo. Desempenho do site
Vou me referir à terminologia introduzida aqui com frequência.
O cerne da questão é que, como web designers, nunca sabemos exatamente como as
páginas que criamos serão visualizadas. Não sabemos quais das dezenas de navegadores
podem ser usados, se é em um computador desktop ou algo mais portátil, qual será o
tamanho da janela do navegador, quais fontes estão instaladas, se funcionalidades como
JavaScript estão habilitadas, como rápido é a conexão com a internet, se as páginas estão
sendo lidas por um leitor de tela e assim por diante. Os Grandes Conceitos neste capítulo
são principalmente reações e métodos para lidar com o elemento inescapável do
Desconhecido em nosso meio. Eles incluem o seguinte:
• A multiplicidade de dispositivos
• Padrões da Web
• Melhoria progressiva
• Web design responsivo
• Acessibilidade
• Desempenho do local
35
Uma infinidade de dispositivos
Como estamos apenas começando, manterei as descrições breves e bastante não

técnicas. Meu objetivo é que você tenha uma compreensão básica do que quero dizer
com termos como “aprimoramento progressivo” quando você os encontrar nas aulas
posteriores. Muitos artigos e livros excelentes foram escritos sobre cada um desses
tópicos e suas técnicas de produção relacionadas, e fornecerei indicadores de recursos
para leitura adicional.
UMA MULTIDÃO DE DISPOSITIVOS
Até 2007, podíamos estar relativamente certos de que nossos usuários visitavam
nossos sites sentados em suas mesas, olhando para um monitor grande, usando uma
conexão de internet rápida. Todos nós tínhamos mais ou menos definido 960 pixels
como uma boa largura para uma página da web com base no tamanho de monitor mais
comum. Naquela época, nossa maior preocupação era lidar com a dúzia de navegadores
de desktop e pular algumas etapas extras para oferecer suporte a versões antigas e
peculiares do Internet Explorer. E achávamos que era difícil!
Embora você pudesse acessar páginas da web e conteúdo da web em telefones

celulares antes de 2007, a introdução dos smartphones iPhone e Android, bem como
redes mais rápidas, anunciaram uma grande mudança em como, quando e onde
navegamos na web (particularmente nos Estados Unidos). Estados Unidos, que ficaram
atrás da Ásia e da UE em tecnologia móvel). Desde então, vimos a introdução de
telefones e tablets de todas as dimensões, bem como navegadores da Web em TVs,
sistemas de jogos e outros dispositivos. E a diversidade só vai aumentar. Acho que o
especialista em web design móvel Brad Frost resume bem em suas ilustrações na
FIGURA 3-1.
O desafio de projetar para todos esses dispositivos vai além de lidar com diferentes
tamanhos de tela. Há um mundo de diferença entre usar um site em uma conexão de
banda larga e em uma rede celular lenta. Os designers precisam resistir a fazer
suposições sobre a velocidade e o contexto da rede com base no tamanho da tela. Só
porque é uma tela pequena não significa que é uma conexão lenta ou
FIGURA 3-1. Brad Frost resume bem a realidade da diversidade de dispositivos (bradfrostweb.com).
Uma infinidade de dispositivos
que a pessoa está com pressa. Não é incomum navegar tranquilamente na web em um
smartphone enquanto está sentado no sofá em casa com uma conexão Wi-Fi sólida. E
iPads com telas maiores e de alta resolução podem estar acessando a internet em
Resista a fazer
conexões 3G pequenas. Em outras palavras, é complicado!
suposições sobre a
Para muitos sites hoje, mais pessoas acessam a web por meio de seus dispositivos móveis velocidade e o contexto
do que em um computador desktop. Uma parcela significativa dos americanos já usa seus da rede com base no
telefones celulares como único acesso à internet. Isso significa que é fundamental obter o
tamanho da tela.
design e a funcionalidade corretos. Fizemos grandes avanços para oferecer uma
experiência agradável aos usuários com dispositivos portáteis, e a tecnologia para atender
às suas necessidades continua na direção certa.
O que eu quero que você aprenda aqui é que a maneira como você vê seu design enquanto
trabalha nele em sua bela máquina desktop não é como ele será experimentado por todos.
Alguns vão vê-lo muito menor. Alguns vão vê-lo carregar dolorosamente lentamente.
Alguns podem estar olhando para ele em uma TV do outro lado da sala. Todos os
profissionais de web design devem manter esse fato em mente.
Para leitura adicional

• Mobile First por Luke Wroblewski (A Book Apart). Luke estava muito à frente da curva
ao insistir que os sites funcionam bem em dispositivos móveis, e ele compartilha sua
perspectiva neste pequeno livro, repleto de ideias.
Web móvel?
Você pode ouvir as pessoas usarem o termo “web móvel”, mas a verdade é que (como Stephen
Hay colocou em um tweet em 2011; veja a FIGURA 3-2), não há web móvel mais do que há web
desktop, ou um Tablet Web, ou assim por diante. Existe apenas a Web, e ela pode ser acessada de
todos os tipos de dispositivos. No momento da redação deste artigo, “web móvel” é usado como uma
espécie de termo genérico para descrever nossos esforços para adaptar nossas habilidades de
design de desktop para acomodar uma variedade muito maior de casos de uso. E, como estamos
descobrindo, há mais de uma maneira de quebrar essa noz.
FIGURA 3-2. Tweet de Stephen Hay de janeiro de 2011. Leia seu artigo de acompanhamento em www.the-
haystack.com/2011/01/07/there-is-no-mobile-web.
3. Alguns grandes conceitos que você precisa conhecer 37

Aderindo aos padrões
SEGUINDO OS PADRÕES
Então, como lidar com essa diversidade? Um bom começo é seguir os padrões
documentados pelo World Wide Web Consortium (W3C). Aderir aos padrões da web é sua
principal ferramenta para garantir que seu site seja consistente em todos os navegadores
compatíveis com os padrões (isso é aproximadamente 99% dos navegadores em uso
atual). Também ajuda a tornar seu conteúdo compatível com o futuro à medida que as
Aderir aos padrões tecnologias da Web e os recursos do navegador evoluem. Outro benefício é que você
da web é sua principal pode dizer aos seus clientes que você cria sites “compatíveis com os padrões”, e eles vão gostar mais de
ferramenta para garantir que
seu site seja tão consistente quanto A noção de conformidade com os padrões pode parecer um acéfalo, mas costumava ser
que todos, incluindo os fabricantes de navegadores, jogavam rápido e solto com HTML e
possível.
scripts. O preço que pagamos foi implementações de navegadores incompatíveis e a
necessidade de criar sites duas vezes para fazê-los funcionar para todos. Eu falo mais
sobre padrões da web ao longo deste livro, então não vou entrar em muitos detalhes aqui.
Basta dizer que os padrões da web são seus amigos. Tudo o que você aprender neste
livro vai começar com o pé direito.

• O site do W3C (w3.org/standards) é o principal recurso para todos os sites
documentos ds.
• A bíblia da conformidade com os padrões e como isso faz sentido para os negócios é
Designing with Web Standards, 3ª Edição, de Jeffrey Zeldman (New Riders). Está
avançando em anos, mas os fundamentos ainda são sólidos.
MELHORIA PROGRESSIVA
Com uma infinidade de navegadores vem uma infinidade de níveis de suporte para os
padrões da web. Na verdade, nenhum navegador implementou todos os padrões 100%, e
sempre há novas tecnologias que estão lentamente ganhando força.
Além disso, os usuários podem definir suas próprias preferências de navegador, para que
NOTA
possam ter um navegador que suporte JavaScript, mas optaram por desativá-lo. O ponto
O aprimoramento progressivo é o outro lado de
aqui é que nos deparamos com uma ampla gama de recursos do navegador - desde
uma abordagem à diversidade de navegadores
apenas suporte básico a HTML até todos os sinos e assobios.
chamada degradação graciosa, na qual você
projeta a experiência totalmente aprimorada O aprimoramento progressivo é uma estratégia para lidar com recursos desconhecidos do
primeiro e depois cria uma série de substitutos navegador (consulte a Nota). Ao projetar com aprimoramento progressivo, você começa
para navegadores não compatíveis. Ambos os com uma experiência básica que disponibiliza o conteúdo ou a funcionalidade principal até
métodos têm seu lugar no desenvolvimento moderno. mesmo para os navegadores ou dispositivos assistivos mais rudimentares. A partir daí,
Você encontrará muitas técnicas de fallback
você adiciona recursos mais avançados para os navegadores que podem lidar com eles.
sugeridas neste livro para garantir que
Você pode terminar com alguns efeitos “legais de se ter”, como animação ou envolver
navegadores menos capazes sejam acomodados.
texto em torno de imagens em formas interessantes, que melhoram a experiência dos
usuários com os navegadores mais avançados, mas não são realmente críticos para a
marca ou a mensagem.
Aprimoramento progressivo
O aprimoramento progressivo é uma abordagem que informa todos os aspectos do design e

produção da página, incluindo HTML, CSS e JavaScript:
Estratégia de autoria
Quando um documento HTML é escrito em ordem lógica e seus elementos são marcados
de maneira significativa, ele poderá ser usado na mais ampla variedade de ambientes de
navegação, incluindo os navegadores mais antigos, navegadores futuros e dispositivos
móveis e assistivos. Pode não parecer exatamente igual, mas o importante é que seu O aprimoramento progressivo
conteúdo esteja disponível. Também garante que os mecanismos de pesquisa como o é uma estratégia para lidar
Google catalogarão o conteúdo corretamente. Um documento HTML limpo com seus com navegador desconhecido
elementos descritos de forma precisa e detalhada é a base para a acessibilidade. capacidades.
Estratégia de estilo
Você pode criar camadas de experiência simplesmente aproveitando a maneira como os

navegadores analisam as regras da folha de estilo. Sem entrar em muitos detalhes
técnicos, você pode escrever uma regra de estilo que torne o fundo de um elemento
vermelho, mas também incluir um estilo que lhe dê um gradiente legal (uma mistura de
uma cor para outra) para navegadores que sabem como renderizar gradientes. Ou você
pode usar um seletor de CSS de ponta para entregar certos estilos apenas para
navegadores de ponta. O conhecimento de que os navegadores simplesmente ignoram
propriedades e regras que eles não entendem lhe dá licença para inovar sem deixar os
navegadores mais antigos de joelhos. Você só precisa estar atento ao estilo da experiência
de linha de base primeiro e, em seguida, adicionar melhorias quando os requisitos mínimos
forem atendidos.
Estratégia de script
Tal como acontece com outras tecnologias da web, existem discrepâncias na forma como
os navegadores lidam com o JavaScript (particularmente em dispositivos que não são
desktop), e alguns usuários optam por desativá-lo completamente. A primeira regra no
aprimoramento progressivo é garantir que a funcionalidade básica - como vincular de
página a página ou realizar tarefas essenciais como envio de dados por meio de formulários
- esteja intacta mesmo quando o JavaScript estiver desativado. Dessa forma, você garante
a experiência básica e a aprimora quando o JavaScript está disponível.

• Não há melhor introdução à abordagem de aprimoramento progressivo do que o livro
Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement, 2ª
Edição, de Aaron Gustafson (New Riders).
• A Web Incerta: Desenvolvimento Web em um Cenário em Mudança por Rob Larson (O'Reilly).
• Quando você tiver mais habilidades, o livro Designing with Progressive Enhancement , de
Todd Parker, Patty Toland, Scott Jehl e Maggie Costello Wachs (New Riders), é um
excelente mergulho profundo nas técnicas e práticas recomendadas. Leia mais sobre isso
em filamentogroup.com/dwpe/.

WEB DESIGN RESPONSIVO

Site pessoal de Ethan Marcotte
ethanmarcotte. com Por padrão, a maioria dos navegadores em dispositivos pequenos, como smartphones e tablets, reduz
a página da Web para caber na tela e fornece mecanismos para ampliar e mover a página. Embora
tecnicamente funcione, não é uma grande experiência. O texto é muito pequeno para ler, os links são
muito pequenos para serem tocados e todo esse zoom e panorâmica é uma distração.
Responsive Web Design (RWD) é uma estratégia para fornecer layouts apropriados para dispositivos
com base no tamanho da janela de visualização (janela do navegador). A chave para o Responsive Web
Design é servir um único documento HTML (com um URL) para todos os dispositivos, mas aplicar folhas
de estilo diferentes com base no tamanho da tela para fornecer o layout mais otimizado para esse
dispositivo. Por exemplo, quando a página é visualizada em um smartphone, ela aparece em uma coluna
com links grandes para facilitar o toque. Mas quando essa mesma página é visualizada em um grande
navegador de desktop, o conteúdo é reorganizado em várias colunas com elementos de navegação
tradicionais. É como mágica! (Exceto que na verdade é apenas CSS.)
A comunidade de web design tem estado em alvoroço sobre design responsivo desde que Ethan
Marcotte escreveu sobre isso e cunhou a frase em seu artigo “Responsive Web Design” em A List Apart
em 2010 (www.alistapart.com/
artigos/responsive-web-design/). Tornou-se uma das principais ferramentas que usamos para lidar com
NASA o tamanho desconhecido da janela de visualização.
nasa.gov
A FIGURA 3-3 mostra alguns exemplos de sites responsivos nas dimensões típicas de um monitor de
desktop, tablet e smartphone. Você pode ver muitos outros exemplos inspiradores no site da galeria
Media Queries (mediaqueri.es). Tente abrir um dos sites responsivos em seu navegador e, em seguida,
redimensione a janela estreita e ampla. Observe como o layout muda com base no tamanho da janela.
Muito legal.
Responsive Web Design ajuda com questões de layout, mas não é uma solução para todos os desafios
de web design móvel. O fato é que fornecer as melhores experiências para seus usuários e o dispositivo
escolhido pode exigir otimizações que vão além do ajuste da aparência. Você pode resolver melhor
alguns problemas usando o servidor para detectar o dispositivo e seus recursos e, em seguida, tomar
decisões sobre o que enviar de volta.
Para alguns sites e serviços, pode ser preferível criar um site móvel separado (consulte a barra lateral
“Sites M-dot” ) com uma interface personalizada e um conjunto de recursos que aproveite os recursos
do telefone, como geolocalização. Dito isso, embora o design responsivo não resolva tudo, é uma parte
importante da solução para fornecer experiências satisfatórias em uma ampla variedade de navegadores.

Abordarei o Web design responsivo com mais detalhes no Capítulo 17, Web Design responsivo, assim
FIGURA 3-3. O layout de um site
responsivo muda com base no tamanho que você tiver mais experiência em código. Lá você encontrará muitos recursos para continuar sua
da janela do navegador. educação em design responsivo.
Sites M-dot
Algumas empresas e serviços optam por criar um site totalmente separado, com um URL exclusivo, apenas
para dispositivos móveis. Os sites M-dot (nomeados porque seus URLs geralmente começam com “m.” ou
“mobile”) oferecem um conjunto reduzido de opções e também podem incluir recursos específicos para celular,
como geolocalização. Muitas das coisas “extras” (como promoções) do site para desktop são simplesmente
Responsive Web Design é
retiradas. (Isso faz você se perguntar o valor que ele agrega no desktop.) Um site móvel dedicado pode ser a
melhor solução se você souber que seus usuários móveis têm padrões de uso muito diferentes daqueles que estão
uma estratégia para lidar
sentados em uma mesa. com tamanho de tela desconhecido.
A FIGURA 3-4 compara os sites primário e m-dot do CVS como eles apareceram no início de 2018.
Você pode ver que os usuários de telefone recebem um conjunto de opções mais simplificado. Outros sites notáveis
com versões móveis dedicadas são o Twitter e o Facebook.
O ponto aqui é que o Web Design Responsivo não é uma solução universal. Para sites que apresentam
principalmente conteúdo de texto, um pequeno ajuste de layout pode ser tudo o que é necessário para oferecer uma
boa experiência de leitura em todos os dispositivos. Para sites complexos e aplicativos da Web, uma experiência
muito diferente pode ser preferida.
A desvantagem de um site móvel dedicado é que é mais que o dobro do trabalho.
Requer planejamento de conteúdo adicional, modelos de design, tempo de produção e manutenção contínua.
Mas se isso significa dar aos seus visitantes a funcionalidade que eles precisam, vale a pena o investimento.
É possível que você tenha um negócio para o qual o uso móvel seja tão distinto do uso de desktop que um
site móvel separado faça sentido, mas, em geral, os sites m-dot estão desaparecendo em favor do RWD. O
Google está ajudando a acelerar esse processo incentivando todos os sites m-dot a migrar para o RWD antes do
lançamento de seu “primeiro índice móvel” em 2018 (webmasters.googleblog.com/2016/11/mobile-first-indexing.
html). Se as classificações dos resultados de pesquisa forem uma preocupação, você poderá obter mais milhagem ao
ser responsivo.
FIGURA 3-4. Uma comparação entre o site para computador e o site para celular dedicado para a mesma
empresa.

Uma Web para Todos (Acessibilidade)
UMA WEB PARA TODOS (ACESSIBILIDADE)

Temos falado sobre o número assustador de navegadores em uso hoje, mas até agora,
abordamos apenas os navegadores visuais controlados com ponteiros do mouse ou
pontas dos dedos. É fundamental, no entanto, ter em mente que as pessoas acessam
a web de muitas maneiras diferentes – com teclado, mouse, comandos de voz, leitores
de tela, saída em Braille, lupas, joysticks, pedais e assim por diante. Os web designers
devem construir as páginas de uma maneira que crie o mínimo de barreiras possível
para obter informações, independentemente da capacidade do usuário e do dispositivo
usado para acessar a web. Em outras palavras, você deve projetar para acessibilidade.
Embora destinadas a usuários com deficiências, como visão deficiente ou mobilidade limitada, as
técnicas e estratégias desenvolvidas para acessibilidade também beneficiam outros usuários com
experiências de navegação abaixo do ideal. Sites acessíveis também são indexados de forma mais
eficaz por mecanismos de busca como o Google. Tornar seu site acessível vale o esforço extra.
Existem quatro grandes categorias de deficiências que afetam a forma como as pessoas interagem com
seus computadores e as informações neles contidas:
Deficiência de visão
Pessoas com baixa ou nenhuma visão podem usar um dispositivo de assistência, como um leitor
de tela, uma tela em Braille ou uma lupa para obter conteúdo da tela.
Eles também podem simplesmente usar a função de zoom de texto do navegador para tornar o
texto grande o suficiente para ser lido.
Deficiência de mobilidade
Usuários com pouco ou nenhum uso de suas mãos podem usar dispositivos especiais, como
mouses e teclados modificados, pedais, comandos de voz ou joysticks para navegar na web e
inserir informações.
Deficiência auditiva
Os usuários com audição limitada ou sem audição perderão os aspectos de áudio de multimídia,
por isso é necessário fornecer alternativas, como transcrições de faixas de áudio ou legendas de
vídeo.
Deficiência cognitiva
Usuários com memória, compreensão de leitura, resolução de problemas e limitações de atenção

se beneficiam quando os sites são projetados de forma simples e clara. Essas qualidades são úteis
para qualquer pessoa que use seu site.
O W3C iniciou a Iniciativa de Acessibilidade da Web (WAI) para atender à necessidade de tornar a Web
utilizável para todos. O site WAI (www.w3.org/WAI) é um excelente ponto de partida para aprender mais
sobre acessibilidade na web. Um dos documentos produzidos pela WAI para ajudar os desenvolvedores
a criar sites acessíveis é o Web Content Accessibility Guidelines (WCAG e WCAG 2.0). Você pode ler
todos eles em www.w3.org/WAI/intro/wcag.php. O governo dos EUA baseou suas diretrizes de
acessibilidade da Seção 508 nos pontos de Prioridade 1 das WCAG (consulte a barra lateral “Requisitos
de acessibilidade do governo: Seção 508”). Tudo
Uma Web para Todos (Acessibilidade)
sites se beneficiam dessas diretrizes, mas se você estiver projetando um site

governamental, a adesão é um requisito.
Outro esforço do W3C é a especificação WAI-ARIA (Accessible Rich Internet

Applications) , que aborda a acessibilidade de aplicativos da Web que incluem conteúdo
gerado dinamicamente, scripts e elementos de interface avançados que são
particularmente confusos para dispositivos assistivos. A Recomendação ARIA define
uma série de funções para conteúdo e widgets que os autores podem aplicar
explicitamente usando o atributo role . As funções incluem barra de menu, barra de
progresso, controle deslizante, cronômetro e dica de ferramenta, para citar apenas
alguns. Para obter a lista completa de funções, acesse www.w3.org/TR/wai-aria/roles#role_definitions.

Os seguintes recursos são bons pontos de partida para explorar mais a acessibilidade
na web:
• A Iniciativa de Acessibilidade da Web (WAI), www.w3.org/WAI
• WebAIM: Web Accessibility in Mind, www.webaim.org
• Manual de Acessibilidade: Criando Sites Compatíveis com 508 por Katie

Cunningham (O'Reilly)
• Design Universal para Aplicativos Web: Aplicativos Web que Alcançam

Todos por Wendy Chisholm e Matt May (O'Reilly)
Requisitos de acessibilidade do governo dos EUA: Seção 508

Se você criar um site que receba financiamento federal do governo dos EUA, 7. As páginas devem ser projetadas para evitar que a tela
será obrigado por lei a cumprir as diretrizes da Seção 508, que garantem que informações e cintilação com uma frequência superior a 2 Hz e inferior a 55 Hz.
tecnologia eletrônicas estejam disponíveis para pessoas com deficiência. O Estado e outros
sites com financiamento público também podem ser obrigados a cumprir.

8. Quando as páginas utilizam linguagens de script para exibir conteúdo ou para criar
elementos de interface, as informações fornecidas pelo script devem ser identificadas
As diretrizes a seguir, extraídas dos Padrões da Seção 508 em www.section508.gov, com texto funcional que possa ser lido por tecnologia assistiva.
fornecem uma boa lista de verificação para acessibilidade básica para todos os sites:
9. Quando uma página da Web requer que um applet, plug-in ou outro

1. Um equivalente de texto para elementos não textuais deve ser fornecido (por estiver presente no sistema cliente para interpretar o conteúdo da página, a página
exemplo, através do atributo “alt” ou no conteúdo do elemento). deve fornecer um link para um plug-in ou applet que esteja em conformidade com
§1194.21(a) a (l).
2. As alternativas equivalentes a qualquer apresentação multimédia devem ser sincronizadas
com a apresentação. 10. Quando os formulários eletrônicos são projetados para serem preenchidos on-line, o
formulário deve permitir que as pessoas que usam tecnologia assistiva acessem as
3. As páginas da Web devem ser projetadas de modo que todas as informações
informações, elementos de campo e funcionalidades necessárias para o preenchimento
transmitido com cor também está disponível sem cor—por exemplo, a partir de
e envio do formulário, incluindo todas as orientações e dicas.
contexto ou marcação.
4. Os documentos devem ser organizados de forma a serem legíveis sem a necessidade

11. Deve ser fornecido um método que permita aos usuários pular links de
de uma folha de estilo associada.
navegação repetitivos.
5. Os cabeçalhos de linha e coluna devem ser identificados para tabelas de dados.
12. Quando for necessária uma resposta cronometrada, o usuário deve ser alertado e dado
6. A marcação deve ser usada para associar dados e células de cabeçalho para tabelas
tempo suficiente para indicar que é necessário mais tempo.
com dois ou mais níveis de cabeçalhos de linha ou coluna.

A necessidade de velocidade (desempenho do site)
A NECESSIDADE DE VELOCIDADE
(DESEMPENHO DO LOCAL)
Embora o número de usuários que acessam a Internet em conexões discadas lentas esteja diminuindo
(3 a 5% nos EUA até o momento), a porcentagem de pessoas que usam telefones celulares para
acessar a Web está aumentando dramaticamente; e para alguns setores, como mídia social e pesquisa,
o celular já ultrapassou o uso de desktops. Se você tem um smartphone, sabe como é frustrante esperar
que uma página da Web seja totalmente exibida em uma conexão de dados de celular.
O desempenho do site é fundamental, independentemente de como seus usuários acessam seu site.
Um estudo do Google em 20091 mostrou que a adição de apenas 100 a 400 milissegundos à página
de resultados de pesquisa resultou em pesquisas reduzidas (-0,2 a -0,6%). A Amazon.com mostrou que
a redução do tempo de carregamento da página em apenas 100 ms resultou em um aumento de 1% na
receita.2 Outros estudos mostram que os usuários esperam que um site seja carregado em menos de
2 segundos, e quase um terço do seu público deixará seu site para outro se não. Além disso, essas
pessoas provavelmente não voltarão. O Google adicionou a velocidade do site ao seu algoritmo de
pesquisa, portanto, se o seu site for lento, provavelmente não aparecerá na cobiçada primeira tela de
resultados.
A conclusão aqui é que o desempenho do site (até milissegundos!) importa muito.
Há muitas coisas que você pode fazer para melhorar o desempenho do seu site e elas se enquadram
em duas grandes categorias: limitar o tamanho dos arquivos e reduzir o número de solicitações ao
servidor. A lista a seguir apenas arranha a superfície da otimização do site, mas fornece uma ideia
geral do que pode ser feito:
• Otimize as imagens para que tenham o menor tamanho de arquivo possível sem sacrificar a
qualidade. Você aprenderá técnicas de otimização de imagem no Capítulo 24, Produção de
ativos de imagem.
• Simplifique a marcação HTML, evitando níveis desnecessários de elementos aninhados.
• Minimize documentos HTML e CSS removendo espaços de caracteres extras e retornos de linha.
• Mantenha o JavaScript no mínimo.
• Adicione scripts de forma que sejam carregados em paralelo com outros recursos de página
e não bloqueie a renderização.
• Não carregue ativos desnecessários (como imagens, scripts ou JavaScript

bibliotecas).
• Reduza o número de vezes que o navegador faz solicitações ao servidor

(conhecido como solicitações HTTP).
1 “Speed Matters”, googleresearch.blogspot.com/2009/06/speed-matters.html.
2 Estatística de “Make Data Matter”, apresentação em PowerPoint de Greg Linden de Stanford

Universidade (2006).
A necessidade de velocidade (desempenho do site)
Cada viagem ao servidor na forma de uma solicitação HTTP leva alguns milissegundos, e esses
milissegundos podem somar. Todos aqueles pequenos widgets do Twitter, botões Curtir do
Facebook e anúncios podem fazer dezenas de solicitações ao servidor cada. Você pode se
surpreender ao ver quantas solicitações de servidor até mesmo um site simples faz.
Se quiser ver por si mesmo, você pode usar a ferramenta Rede disponível com as ferramentas do
desenvolvedor no Chrome, Safari ou Firefox. A ferramenta Rede exibe cada solicitação ao servidor
e quantos milissegundos foram necessários. Veja como você o usa no Chrome (mas todos os
navegadores funcionam da mesma forma):
1. Inicie o navegador Chrome e vá para qualquer página da web.
2. Vá para o menu Visualizar e selecione Desenvolvedor ÿ Ferramentas do Desenvolvedor. Um

painel será aberto na parte inferior do navegador.
3. Selecione a guia Rede na visualização de ferramentas e carregue uma página da web. O gráfico
(comumente chamado de gráfico em cascata) mostra todas as solicitações feitas e os ativos
baixados. As colunas à direita mostram a quantidade de tempo que cada solicitação levou em
milissegundos. Na parte inferior do gráfico, você pode ver um resumo do número de solicitações
feitas e a quantidade total de dados transferidos.
A FIGURA 3-5 mostra uma parte do gráfico de cascata de desempenho para oreilly.com.
Você pode vasculhar qualquer site na web dessa maneira. Pode ser muito educativo.
Não abordarei o desempenho do site em detalhes técnicos profundos neste livro, mas quero que
você se lembre da importância de manter os tamanhos dos arquivos tão pequenos quanto possível
e eliminar solicitações desnecessárias do servidor em seu trabalho de web design.
FIGURA 3-5. Gráficos de cascata como este criado pela ferramenta de desenvolvedor da
Rede do Chrome mostram as solicitações de servidor individuais feitas por uma página da
Web e o tempo que cada solicitação leva.

Teste-se

Existem outras técnicas que são técnicas demais para este livro (e, francamente, para mim), e
imagino que, se você estiver lendo este livro, provavelmente não está pronto para se tornar um
Mais desempenho do site
assistente de desempenho do site. Mas quando você estiver pronto para assumir, aqui estão
Ferramentas
alguns recursos que devem ajudar:
Experimente algumas destas ferramentas para
testar o desempenho do site: • WebPageTest
• Lara Hogan reuniu uma lista de estudos, ferramentas e recursos relacionados ao
desempenho em larahogan.me/design. Você também pode ler o livro dela, Designing for
(webpagetest.org) é um
ferramenta que foi originalmente desenvolvida Performance (O'Reilly), gratuitamente.
para a AOL, mas agora está disponível para
• Web móvel de alto desempenho: Melhores práticas para otimizar aplicativos Web móveis
todos usarem gratuitamente sob uma licença
de código aberto. Basta digitar uma URL e
por Maximiliano Firtman (O'Reilly) abrange métodos e ferramentas de otimização para
o WebPagetest retornará um diagrama em verificar seu progresso.
cascata, captura de tela e outras estatísticas.
• O site do Google Make the Web Faster (code.google.com/speed/) é uma excelente primeira
parada para aprender sobre otimização de sites. Ele compila uma série de excelentes
• Google PageSpeed Insights
(developers.google.com/
tutoriais e artigos, bem como ferramentas para medir a velocidade do site.
speed/pagespeed/insights/) é outro
serviço que analisa o desempenho de
qualquer site para o qual você o aponte. Ele
TESTE-SE
também gera sugestões para fazer sua
página carregar mais rápido.
Aqui estão algumas perguntas que verificam seu conhecimento sobre os Grandes Conceitos.
• A ferramenta YSlow disponível
Se você está perplexo, você pode encontrar as respostas no Apêndice A.
gratuitamente no Yahoo! (yslow.org)
analisa um site de acordo com 23 regras 1. Liste pelo menos dois fatores desconhecidos que você precisa considerar ao projetar e
de desempenho na web e, em seguida,
desenvolver um site.
dá ao site uma nota e sugestões de
melhoria.
2. Combine a tecnologia ou prática à esquerda com o problema que melhor

endereços:
1. ____ Aprimoramento progressivo uma. Leitura assistida e dispositivos de entrada
2. ____ Detecção do lado do servidor b. Velocidades de conexão lentas
3. ____ Design responsivo c. Todos os níveis de recursos do navegador
4. ____ WAI-ARIA d. Determinando qual dispositivo está sendo usado
5. ____ Otimização do e. Uma variedade de tamanhos de tela

desempenho do site
3. As estratégias de acessibilidade na Web levam em conta quatro grandes categorias de

deficiências. Cite pelo menos três e forneça uma medida que você pode tomar para
garantir que o conteúdo seja acessível para cada um.
4. Quando você usaria um gráfico em cascata?
II
HTML PARA ESTRUTURA
CAPÍTULO
CRIANDO UM 4
PÁGINA SIMPLES
(VISÃO GERAL DE HTML)
A Parte I forneceu uma visão geral do ambiente de web design. Agora que NESTE CAPÍTULO
cobrimos os grandes conceitos, é hora de arregaçar as mangas e começar a

Uma introdução aos elementos e
criar uma página web real. Será uma página extremamente simples, mas mesmo
atributos
as páginas mais complicadas são baseadas nos princípios descritos aqui.
Neste capítulo, criaremos uma página da Web passo a passo para que você possa ter uma Marcando uma página da web simples
ideia de como é marcar um documento com tags HTML. Os exercícios permitem que você
Os elementos que fornecem a
trabalhe junto. estrutura do documento
Isto é o que eu quero que você tire deste capítulo:

Solução de problemas de páginas
• Tenha uma ideia de como a marcação funciona, incluindo uma compreensão dos elementos da web quebradas
e atributos.
• Veja como os navegadores interpretam documentos HTML.
• Aprenda como os documentos HTML são estruturados.
• Obtenha um primeiro vislumbre de uma folha de estilo em ação.
Não se preocupe em aprender os elementos de texto específicos ou as regras da folha de

estilo neste momento; chegaremos a eles nos capítulos seguintes. Por enquanto, apenas
preste atenção ao processo, à estrutura geral do documento e à nova terminologia.
UMA PÁGINA DA WEB, PASSO A PASSO
Você deu uma olhada em um documento HTML no Capítulo 2, Como a Web Funciona, mas
agora você poderá criar um você mesmo e brincar com ele no navegador.
A demonstração neste capítulo tem cinco etapas que cobrem os fundamentos da produção de
páginas:
49
Iniciar um editor de texto
Etapa 1: comece com o conteúdo. Como ponto de partida, escreveremos o conteúdo de texto bruto
e veremos o que os navegadores fazem com ele.
Passo 2: Dê a estrutura do documento. Você aprenderá sobre a taxa de sincronização de elementos

HTML e os elementos que configuram áreas para conteúdo e metadados.
Etapa 3: Identifique os elementos do texto. Você descreverá o conteúdo usando os elementos de

texto apropriados e aprenderá sobre a maneira correta de usar HTML.
HTML da maneira mais difícil
Passo 4: Adicione uma imagem. Ao adicionar uma imagem à página, você aprenderá sobre atributos
Eu mantenho meu método de ensinar HTML
e elementos vazios.
à moda antiga – manualmente. Não há melhor
maneira de realmente entender como a
Etapa 5: altere a aparência do texto com uma folha de estilo. Este exercício lhe dá um gostinho da
marcação funciona do que digitá-la, uma tag por
formatação de conteúdo com Cascading Style Sheets.
vez, e depois abrir sua página em um navegador.
Quando terminarmos, você terá escrito o documento para a página mostrada na FIGURA 4-1. Não é
Não leva muito tempo para desenvolver uma
muito chique, mas você tem que começar em algum lugar.
sensação de marcação de documentos corretamente.
Embora você possa optar por usar uma

ferramenta de criação na Web visual ou de
arrastar e soltar, entender o HTML tornará o
uso de suas ferramentas mais fácil e eficiente.
Além disso, você ficará feliz em poder

examinar um arquivo de origem e entender
o que está vendo. Também é crucial para
solucionar problemas de páginas quebradas
ou ajustar a formatação padrão que as
ferramentas da Web produzem.
E vale a pena, os desenvolvedores web

profissionais tendem a marcar o conteúdo
manualmente para melhor controle sobre o
código e a capacidade de tomar decisões
FIGURA 4-1. Neste capítulo, escreveremos o documento HTML para esta página em cinco etapas.
deliberadas sobre quais elementos usar.
Verificaremos nosso trabalho em um navegador com frequência ao longo desta demonstração -

provavelmente mais do que você faria na vida real. Mas como esta é uma introdução ao HTML, é útil
ver a causa e o efeito de cada pequena alteração no arquivo de origem ao longo do caminho.
LANÇAR UM EDITOR DE TEXTO
Neste capítulo e em todo o livro, escreveremos documentos HTML à mão, então a primeira coisa que
precisamos fazer é iniciar um editor de texto. O editor de texto fornecido com seu sistema operacional,
como o Bloco de Notas (Windows) ou o TextEdit (Macintosh), servirá para esses propósitos. Outros
editores de texto funcionam bem, desde que você possa salvar arquivos de texto simples com a
extensão .html . Se você tiver uma ferramenta de criação visual na Web, como o Dreamweaver, deixe-
a de lado por enquanto. Quero que você tenha uma ideia de como marcar um documento manualmente
(consulte a barra lateral “HTML da maneira mais difícil”).
50 Parte II. HTML para estrutura

Esta seção mostra como abrir novos documentos no Bloco de Notas e no TextEdit.
Mesmo se você já usou esses programas antes, dê uma olhada em algumas configurações especiais
que tornarão os exercícios mais suaves. Começaremos com o Bloco de Notas; Os usuários de Mac
podem avançar.
Criando um novo documento no bloco de notas (Windows)

Estas são as etapas para criar um novo documento no Bloco de Notas no Windows 10
(FIGURA 4-2):
1. Procure por “Bloco de Notas” para acessá-lo rapidamente. Clique no Bloco de Notas para abrir uma
nova janela de documento e você estará pronto para começar a digitar. 1
2. Em seguida, torne as extensões visíveis. Esta etapa não é necessária para criar documentos HTML,
mas ajudará a tornar os tipos de arquivo mais claros rapidamente.
Abra o Explorador de Arquivos, selecione a guia Exibir e, em seguida, selecione o botão Opções
à direita. No painel Opções de pasta, selecione a guia Exibir novamente. 2
3. Encontre “Ocultar extensões para tipos de arquivo conhecidos” e desmarque essa opção. 3
4. Clique em OK para salvar a preferência 4, e as extensões de arquivo agora serão

visível.
1 Clique no Bloco de Notas para abrir um

novo documento.
2 Abra o Explorador de Arquivos, selecione a guia

Exibir e, em seguida, selecione o botão Opções
à direita (não mostrado).
Selecione a guia Exibir.
3 Desmarque “Ocultar extensões para

tipos de arquivo."
4 Clique em OK para salvar a preferência e

as extensões de arquivo agora estarão visíveis.
FIGURA 4-2. Criando um novo documento no Bloco de Notas.
4. Criando uma página simples 51

Criando um novo documento no 3. Feche esse documento e abra a caixa de diálogo Preferences no
TextEdit (macOS) menu TextEdit.
Por padrão, o TextEdit cria documentos rich-text , ou seja, documentos 4. Altere estas preferências:
que têm instruções ocultas de formatação de estilo para tornar o texto em Na guia Novo documento, selecione Texto simples 3.
negrito, definir o tamanho da fonte e assim por diante. Em Opções, desmarque todas as opções de formatação automática
Você pode dizer que o TextEdit está no modo rich text quando
4.
uma barra de ferramentas de formatação na parte superior da janela (o
modo de texto simples não). Os documentos HTML precisam ser Na guia Abrir e Salvar, selecione Exibir arquivos HTML como Código
HTML 5 e desmarque “Adicionar extensões '.txt' a arquivos de texto
documentos de texto simples, portanto, precisaremos alterar o formato,
conforme mostrado neste exemplo (FIGURA 4-3): simples” 6. O restante dos padrões deve estar correto.
1. Use o Finder para procurar o TextEdit na pasta Aplicativos. Quando o

encontrar, clique duas vezes no nome ou ícone para iniciar o 5. Quando terminar, clique no botão vermelho no canto superior esquerdo.
aplicativo.
2. Na caixa de diálogo inicial do TextEdit, clique no botão Novo documento 6. Agora crie um novo documento selecionando Arquivo ÿ Novo.
no canto inferior esquerdo. Se você vir o menu de formatação de O menu de formatação não estará mais lá e você poderá salvar seu
texto e a régua de tabulação na parte superior do documento Sem texto como um documento HTML. Você sempre pode converter um
título, você está no modo rich-text 1. Se não vir, você está no modo documento de volta para rich text selecionando Formatar ÿ Tornar
de texto simples 2. De qualquer forma, existem algumas preferências Rich Text quando não estiver usando o TextEdit para HTML.
que você precisa definir.
1 O menu de formatação indica rich text. 2 Documentos de texto simples não possuem menu.
5
3
6
FIGURA 4-3. Iniciando o TextEdit e escolhendo as configurações de “Texto simples” nas Preferências.

Etapa 1: comece com o conteúdo
PASSO 1: COMECE COM O CONTEÚDO
Agora que temos nosso novo documento, é hora de começar a digitar. Uma página da web
tem tudo a ver com conteúdo, então é aí que começamos nossa demonstração. EXERCÍCIO 4-1
orienta você ao inserir o conteúdo de texto bruto e salvar o documento em uma nova pasta.
EXERCÍCIO 4-1. Inserindo conteúdo
1. Digite o conteúdo da página inicial abaixo no novo documento em seu editor de texto. Copie-o
exatamente como você vê aqui, mantendo as quebras de linha da mesma forma para jogar junto.
O texto bruto para este exercício também está disponível online em learningwebdesign.com/5e/
materiais/.
Bistrô Black Goose
O restaurante
O Black Goose Bistro oferece almoço e jantar casual em um ambiente descontraído. O menu
muda regularmente para destacar os ingredientes locais mais frescos.
Refeições
Você se diverte. Nós vamos lidar com a cozinha. O Black Goose Catering pode lidar com
eventos, desde lanches para um encontro até elegantes angariações de fundos corporativas.
Local e Horário
Seekonk, Massachusetts;
De segunda a quinta-feira, das 11h às 21h; Sexta e sábado, das 11h à meia-noite
2. Selecione “Salvar” ou “Salvar como” no menu Arquivo para obter a caixa de diálogo Salvar como (FIGURA 4-4).
A primeira coisa que você precisa fazer é criar uma nova pasta (clique no botão Nova Pasta no Windows e
no Mac) que conterá todos os arquivos do site. O nome técnico da pasta que contém tudo é o diretório raiz
local.
Windows 10 Mac OS 10
ÿ
FIGURA 4-4. Salvando index.html em uma nova pasta chamada bistro.

Etapa 1: comece com o conteúdo
Nomeie a nova pasta como bistro e salve o arquivo de texto como index.html nela. O nome do arquivo precisa terminar
em .html para ser reconhecido pelo navegador como um documento da web. Consulte a barra lateral “Convenções de
nomenclatura” para obter mais dicas sobre como nomear arquivos.
3. Só por diversão, vamos dar uma olhada no index.html em um navegador.
Usuários do Windows: clique duas vezes no nome do arquivo no Explorador de Arquivos para iniciar o navegador
padrão ou clique com o botão direito do mouse no arquivo para a opção de abri-lo no navegador de sua escolha.
Usuários de Mac: inicie seu navegador favorito (estou usando o Google Chrome) e escolha Abrir ou Abrir arquivo no menu
Arquivo. Navegue até index.html e selecione o documento para abri-lo no navegador.
4. Você deverá ver algo como a página mostrada na FIGURA 4-5. Vamos falar sobre o
resultados na seção a seguir.
FIGURA 4-5. Uma primeira olhada no conteúdo em um navegador.
Convenções de nomenclatura
É importante que você siga estas regras e convenções ao nomear seus arquivos: Os nomes de arquivos podem diferenciar maiúsculas de minúsculas, dependendo
da configuração do servidor. O uso consistente de todas as letras minúsculas em
nomes de arquivos, embora não seja obrigatório, é uma maneira de tornar seus
Use sufixos adequados para seus arquivos. Os arquivos HTML devem
nomes de arquivos mais fáceis de gerenciar.
terminar com .html ou .htm. Os gráficos da Web devem ser rotulados
de acordo com seu formato de arquivo: .gif, .png, .jpg (.jpeg também é Mantenha os nomes dos arquivos curtos. Nomes longos são mais propensos a serem
aceitável, embora menos comum) ou .svg. erros ortográficos e nomes curtos reduzem alguns bytes extras do tamanho do
Nunca use espaços de caracteres em nomes de arquivos. É comum arquivo. Se você realmente precisar dar ao arquivo um nome longo e com várias
palavras, poderá separar as palavras com hífens, como a-long-document-title.html,
usar um caractere de sublinhado ou hífen para separar visualmente as palavras em
nomes de arquivos, como robbins_bio.html ou robbins bio.html. para melhorar a legibilidade.
Convenções auto-impostas. É útil desenvolver um
Evite caracteres especiais como ?, %, #, /, :, ;, •, etc. Limite os nomes dos arquivos esquema de nomenclatura consistente para sites enormes - por
a letras, números, sublinhados, hífens e pontos. Também é melhor evitar exemplo, sempre usando letras minúsculas com hífens entre as palavras.
caracteres internacionais, como o sueco å. Isso elimina algumas das suposições de lembrar o que você nomeou um
arquivo quando for vinculá-lo mais tarde.

Etapa 2: forneça a estrutura do documento HTML
Aprendendo com o Passo 1

Nossa página não parece tão boa (FIGURA 4-5). O texto está todo reunido em um bloco –
não era assim que parecia quando o digitamos no documento original. Há algumas lições a
O que os navegadores ignoram
serem aprendidas aqui. A primeira coisa que fica aparente é que o navegador ignora as
quebras de linha no documento de origem. A barra lateral “O que os navegadores ignoram” As seguintes informações no documento de
origem serão ignoradas quando visualizadas
lista outros tipos de informações no documento de origem que não são exibidos na janela do
em um navegador:
navegador.
Espaços de vários caracteres (brancos)
Segundo, vemos que simplesmente digitar algum conteúdo e nomear o documento como .html Quando um navegador encontra
não é suficiente. Embora o navegador possa exibir o texto do arquivo, não indicamos a mais de um espaço em branco consecutivo
estrutura do conteúdo. É aí que entra o HTML.
espaço de caracteres, ele exibe um único espaço.
Usaremos marcação para adicionar estrutura: primeiro ao próprio documento HTML (que Portanto, se o documento contém
será apresentado na Etapa 2), depois ao conteúdo da página (Etapa 3). Uma vez que o grandes, grandes atrás
navegador conheça a estrutura do conteúdo, ele pode exibir a página de uma maneira mais significativa.
o navegador exibe:
há muito, muito tempo
ETAPA 2: FORNEÇA O DOCUMENTO HTML Quebras de linha (retornos de carro).
ESTRUTURA Os navegadores convertem retornos de carro

em espaços em branco, portanto, seguindo a
regra anterior de “ignorar vários espaços em
Temos nosso conteúdo salvo em um documento HTML—agora estamos prontos para começar
branco”, as quebras de linha não têm efeito na
a marcá-lo. formatação da página.
Abas
As guias também são convertidas em

A anatomia de um elemento HTML
espaços de caracteres, então adivinhem?
No Capítulo 2 , você viu exemplos de elementos com uma tag de abertura (<p> para um Eles são inúteis para recuar o texto na
parágrafo, por exemplo) e uma tag de fechamento (</p>). Antes de começarmos a adicionar página da Web (embora possam tornar seu
tags ao nosso documento, vamos examinar a anatomia de um elemento HTML (sua sintaxe) código mais legível).
e estabelecer algumas terminologias importantes. Um elemento de recipiente genérico é

rotulado na FIGURA 4-6. Marcação não reconhecida
Os navegadores são instruídos a ignorar

qualquer tag que não entendam ou que tenha
Etiqueta de abertura Contente Tag de fechamento
sido especificada incorretamente.
(pode ser texto e/ou outros elementos HTML) (começa com /)
Dependendo do elemento e do navegador,
isso pode ter resultados variados. O navegador
<elementname> Conteúdo aqui </ elementname> pode não exibir nada ou pode exibir o conteúdo
da tag como se fosse um texto normal.
Elemento Texto nos comentários
Os navegadores não exibem texto entre

os caracteres especiais 
Exemplo: <h1> Black Goose Bistro </h1>
tags usadas para denotar um comentário.
Veja a próxima barra lateral
“Adicionando comentários ocultos” .
FIGURA 4-6. As partes de um elemento de contêiner HTML.

Os elementos são identificados por tags na fonte de texto. Uma tag consiste no nome do
elemento (geralmente uma abreviação de um nome descritivo mais longo) entre colchetes
angulares (< >). O navegador sabe que qualquer texto entre colchetes está oculto e não é
DICA DE MARCAÇÃO
exibido na janela do navegador.
Barra versus barra invertida
O nome do elemento aparece na tag de abertura (também chamada de tag de início) e
Tags HTML e URLs usam o caractere novamente na tag de fechamento (ou final) precedida por uma barra (/). A tag de fechamento
barra (/). O caractere de barra é
funciona como uma chave “desligada” para o elemento. Tenha cuidado para não usar o
encontrado sob o ponto de interrogação (?)
caractere de barra invertida semelhante em tags finais (consulte a dica “Barra versus barra invertida”).
no teclado QWERTY em inglês (o
posicionamento das teclas nos teclados de As tags adicionadas ao conteúdo são chamadas de marcação. É importante observar que um
outros países pode variar).
elemento consiste tanto no conteúdo quanto em sua marcação (as tags inicial e final). Nem
É fácil confundir a barra com o caractere todos os elementos têm conteúdo, no entanto. Alguns são vazios por definição, como o
de barra invertida (\), que se encontra
elemento img usado para adicionar uma imagem à página. Falaremos sobre elementos
sob o caractere de barra (|); veja a
FIGURA 4-7. A tecla de barra invertida não vazios um pouco mais adiante neste capítulo.
funcionará em tags ou URLs, portanto,
Uma última coisa: capitalização. Em HTML, a capitalização dos nomes dos elementos não é
tome cuidado para não usá-la.
importante (não faz distinção entre maiúsculas e minúsculas). Portanto , <img>, <Img> e
<IMG> são todos iguais no que diz respeito ao navegador. No entanto, a maioria dos
desenvolvedores prefere a consistência de escrever nomes de elementos em letras minúsculas
(consulte a Nota), como farei ao longo deste livro.
FIGURA 4-7. Teclas de barra Estrutura básica do documento

versus barra invertida.
A FIGURA 4-8 mostra o esqueleto mínimo recomendado de um documento HTML. Digo
“recomendado” porque o único elemento obrigatório em HTML é o título. Mas acho que é
melhor, principalmente para iniciantes, organizar explicitamente os documentos em áreas de
metadados (cabeça) e conteúdo (corpo) . Vamos dar uma olhada no que está acontecendo
neste exemplo de marcação mínima.
NOTA
Existe uma versão mais restrita do HTML <!DOCTYPEhtml>

1
chamada XHTML que exige que todos os nomes
de elementos e atributos apareçam em letras minúsculas. <html>
O HTML5 tornou o XHTML praticamente obsoleto,
exceto em certos casos de uso quando combinado

<cabeça>
com outras linguagens XML, mas a preferência
<meta charset="utf-8"> 4
por todos os nomes de elementos em letras 3
minúsculas persistiu.
<title>Título aqui</title> 5
</head>
2
<corpo>
6 O conteúdo da página vai aqui.
</body>
</html>
FIGURA 4-8. A estrutura mínima de um documento HTML inclui cabeçalho e corpo

contido no elemento raiz html .

1. Não quero confundir as coisas, mas a primeira linha do exemplo não é um

elemento. É uma declaração de tipo de documento (também chamada de
declaração DOCTYPE) que permite aos navegadores modernos saber qual
especificação HTML usar para interpretar o documento. Este DOCTYPE
identifica o documento como escrito em HTML5.
2. Todo o documento está contido em um elemento html . O elemento html é

chamado de elemento raiz porque contém todos os elementos do documento e
não pode estar contido em nenhum outro elemento.
3. Dentro do elemento html , o documento é dividido em head e body. O elemento

head contém elementos que pertencem ao documento que não são renderizados
como parte do conteúdo, como título, folhas de estilo, scripts e metadados.
4. meta elementos fornecem metadados do documento, informações sobre o

documento. Nesse caso, especifica a codificação de caracteres (uma coleção
padronizada de letras, números e símbolos) usada no documento como Unicode
versão UTF-8 (consulte a barra lateral “Introdução ao Unicode”). Não quero
entrar em muitos detalhes sobre isso agora, mas sei que existem muitas boas
razões para especificar o charset em cada documento, então eu o incluí como
parte da marcação mínima do documento. Outros tipos de metadados fornecidos
pelo elemento meta são o autor, palavras-chave, status de publicação e uma
descrição que pode ser usada pelos mecanismos de pesquisa.
5. Também no cabeçalho está o elemento de título obrigatório . De acordo com a

especificação HTML, todo documento deve conter um título descritivo.
6. Finalmente, o elemento body contém tudo o que queremos que apareça na

janela do navegador.
Você está pronto para começar a marcar a página inicial do Black Goose Bistro?
Abra o documento index.html em seu editor de texto e vá para o EXERCÍCIO 4-2.
Apresentando o Unicode
Todos os caracteres que compõem os idiomas são armazenados caracteres (letras, números, símbolos, ideogramas, logogramas, etc.) de
em computadores como números. Uma coleção padronizada de caracteres todas as línguas modernas ativas. Você pode ler tudo sobre isso em
com seus números de referência (pontos de código) é chamada de conjunto unicode.org. O Unicode tem três codificações padrão — UTF-8, UTF-16 e
de caracteres codificados, e a maneira pela qual esses caracteres são UTF-32 — que diferem no número de bytes usados para representar os
convertidos em bytes para uso por computadores é a codificação de caracteres (1, 2 ou 3, respectivamente).
caracteres. Nos primórdios da computação, os computadores usavam O HTML5 usa a codificação UTF-8 por padrão, o que permite que uma
conjuntos de caracteres limitados, como ASCII, que continham 128
ampla variedade de idiomas seja misturada em um único documento. É
caracteres (letras das línguas latinas, números e símbolos comuns). A web sempre uma boa ideia declarar a codificação de caracteres de um documento
inicial usava a codificação de caracteres Latin-1 (ISO 8859-1) que incluía 256 com o elemento meta , conforme mostrado no exemplo anterior. Seu
caracteres latinos da maioria dos idiomas ocidentais. Mas dado que a web era servidor também precisa ser configurado para identificar documentos HTML
“mundial”, claramente não era suficiente. como UTF-8 no cabeçalho HTTP (informações sobre o documento que o
servidor envia ao agente do usuário).
Digite Unicode. Unicode (também chamado de Universal Character Set) é Você pode pedir ao administrador do servidor para confirmar a codificação
um conjunto de supercaracteres que contém mais de 136.000 dos documentos HTML.

EXERCÍCIO 4-2. Adicionando estrutura mínima
1. Abra o novo documento index.html se ainda não estiver aberto e <corpo>

adicione a declaração DOCTYPE: Bistrô Black Goose
<!DOCTYPEhtml> O restaurante
O Black Goose Bistro oferece almoço e jantar casual em um
2. Coloque o documento inteiro em um elemento raiz HTML adicionando
ambiente descontraído. O menu muda regularmente para
uma tag de início <html> após o DOCTYPE e uma tag de fim </html>
destacar os ingredientes locais mais frescos.
no final do texto.
3. Em seguida, crie o cabeçalho do documento que contém o título da
página. Insira as tags <head> e </head> antes do conteúdo. Refeições
Dentro do elemento head , adicione informações sobre a codificação Você se diverte. Nós vamos lidar com a cozinha. O Black Goose
de caracteres <meta charset="utf-8"> e o título, “Black Goose Catering pode lidar com eventos, desde lanches para um encontro até
Bistro”, cercado por tags <title> de abertura e fechamento . elegantes angariações de fundos corporativas.
4. Por fim, defina o corpo do documento envolvendo o conteúdo do Local e Horário

texto nas tags <body> e </body> . Quando terminar, o documento Seekonk, Massachusetts;
de origem deve ter esta aparência (a marcação é mostrada em cores De segunda a quinta-feira, das 11h às 21h; sexta e
para destacá-lo): Sábado, das 11h à meia-noite
</body>
<!DOCTYPEhtml> </html>
<html>
5. Salve o documento no diretório bistro , para que ele sobrescreva a

<cabeça>
<meta charset="utf-8"> versão antiga. Abra o arquivo no navegador ou pressione Atualizar
<title>Black Goose Bistrô</title> ou Recarregar se já estiver aberto. A FIGURA 4-9 mostra como deve
ficar agora.
</head>
FIGURA 4-9. A página em um navegador após a definição dos elementos da estrutura do

documento.

Etapa 3: identificar elementos de texto
Não mudou muito na página do bistrô após a configuração do documento, exceto que o
navegador agora exibe o título do documento na barra ou guia superior (FIGURA 4-9). Se
alguém marcar esta página como favorito, esse título também será adicionado à sua lista de
Favoritos ou Favoritos (consulte a barra lateral “Não se esqueça de um bom título”). Mas Não se esqueça de um bom título
o conteúdo ainda é executado em conjunto porque não demos ao navegador nenhuma Um elemento de título não é apenas necessário
indicação de como ele deve ser estruturado. Cuidaremos disso a seguir. para cada documento, mas também é bastante
útil. O título é o que é exibido na lista de Favoritos
ou Favoritos de um usuário e nas guias dos
navegadores da área de trabalho. Os títulos
descritivos também são uma ferramenta
ETAPA 3: IDENTIFICAR ELEMENTOS DE TEXTO fundamental para melhorar a acessibilidade,
pois são as primeiras coisas que uma pessoa
Com um pouco de experiência em marcação, deve ser fácil adicionar a marcação para títulos ouve ao usar um leitor de tela (um dispositivo de
e subtítulos (h1 e h2), parágrafos (p) e texto enfatizado (em) ao nosso conteúdo, como assistência que lê o conteúdo de uma página
em voz alta para usuários com deficiência visual).
faremos no EXERCÍCIO 4-3. No entanto, antes de começarmos, gostaria de falar um pouco
Os mecanismos de pesquisa também dependem
sobre o que estamos fazendo e não fazendo ao marcar conteúdo com HTML.
muito dos títulos dos documentos.
Por esses motivos, é importante fornecer

títulos cuidadosos e descritivos para todos os
seus documentos e evitar títulos vagos, como
Marque Semanticamente "Bem-vindo" ou "Minha página". Você também
pode querer manter o tamanho de seus títulos
O objetivo do HTML é adicionar significado e estrutura ao conteúdo. Não se destina a
sob controle para que eles possam ser exibidos
descrever como deve ser o conteúdo (sua apresentação).
na área de título do navegador. Sabendo que os
usuários normalmente têm várias guias abertas
Seu trabalho ao marcar o conteúdo é escolher o elemento HTML que fornece a descrição
ou uma longa lista de Favoritos, coloque suas
mais significativa do conteúdo disponível. Nos negócios, chamamos isso de marcação
informações de identificação mais exclusivas nos
semântica. Por exemplo, o título mais importante no início do documento deve ser marcado primeiros 20 ou mais
como h1 porque é o título mais importante da página. Não se preocupe com o que parece…
personagens.
você pode facilmente mudar isso com uma folha de estilo. O importante é que você escolha
elementos com base no que faz mais sentido para o conteúdo.
Além de adicionar significado ao conteúdo, a marcação dá estrutura ao documento. A

maneira como os elementos seguem uns aos outros ou se aninham entre si cria O objetivo do HTML é
relacionamentos entre eles. Você pode pensar nessa estrutura como um esboço (seu nome adicionar significado e
técnico é DOM, para Document Object Model). A hierarquia de documentos subjacente dá estrutura ao conteúdo.
aos navegadores dicas sobre como lidar com o conteúdo.
É também a base sobre a qual adicionamos instruções de apresentação com folhas de estilo
e comportamentos com JavaScript.
Embora o HTML tenha sido destinado a ser usado estritamente para significado e estrutura
desde sua criação, essa missão foi um pouco frustrada nos primeiros anos da web. Sem um
sistema de folha de estilo, o HTML foi estendido para dar aos autores maneiras de alterar a
aparência de fontes, cores e alinhamento usando apenas marcação. Esses extras de
apresentação ainda estão por aí, então você pode encontrá-los se visualizar a fonte de sites
mais antigos ou um site feito com ferramentas antigas.
Neste livro, no entanto, vou me concentrar no uso de HTML da maneira correta, de acordo
com a abordagem semântica e baseada em padrões contemporâneos para o design da web.
OK, chega de sermões. É hora de começar a trabalhar nesse conteúdo no EXERCÍCIO 4-3.

EXERCÍCIO 4-3. Definindo elementos de texto
1. Abra o documento index.html em seu editor de texto, caso ainda não esteja aberto.
2. A primeira linha de texto, “Black Goose Bistro”, é o título principal da página, então vamos marcá-la
como um elemento Heading Level 1 (h1) . Coloque a tag de abertura, <h1>, no início da linha e a tag
de fechamento, </h1>, depois dela, assim:
<h1>Black Goose Bistrô</h1>
3. Nossa página também tem três subtítulos. Marque-os como elementos de nível de título 2 (h2) de
maneira semelhante. Eu vou fazer o primeiro aqui; você faz o mesmo para “Catering” e “Location and
Hours”.
<h2>O Restaurante</h2>
4. Cada elemento h2 é seguido por um breve parágrafo de texto, então vamos marcá-los como
elementos de parágrafo (p) de maneira semelhante. Aqui está o primeiro; você faz o resto:
<p>O Black Goose Bistro oferece almoço e jantar casual em um ambiente

descontraído. O menu muda regularmente para destacar os ingredientes locais mais
frescos.</p>
5. Por fim, na seção de Catering, quero enfatizar que os visitantes devem sair
a cozinha para nós. Para enfatizar o texto, marque-o em um elemento de ênfase (em) , conforme
mostrado aqui:
<p>Você se diverte. <em>Nós cuidamos da culinária.</em> Black Goose Catering

pode cuidar de eventos, desde lanches para um encontro até elegantes
angariações de fundos corporativas.</p>
6. Agora que marcamos o documento, vamos salvá-lo como fizemos antes e abrir (ou recarregar) a
página no navegador. Você deverá ver uma página muito parecida com a da FIGURA 4-10. Se isso
não acontecer, verifique sua marcação para ter certeza de que não está faltando nenhum colchete
angular ou uma barra em uma tag de fechamento.
FIGURA 4-10. A página inicial após o conteúdo ter sido marcado com elementos HTML.

Agora estamos chegando a algum lugar. Com os elementos devidamente identificados,

o navegador agora pode exibir o texto de forma mais significativa. Há algumas coisas
importantes a serem observadas sobre o que está acontecendo na FIGURA 4-10.
Adicionando Oculto
Comentários
Elementos de bloco e em linha
Você pode deixar notas na fonte
Embora possa parecer óbvio, vale ressaltar que os elementos de título e parágrafo documento para você e para os outros
começam em novas linhas e não são executados juntos como antes. Isso ocorre marcando-os como comentários.
porque, por padrão, títulos e parágrafos são exibidos como elementos de bloco. Os Qualquer coisa que você colocar entre as
tags de comentário () não será
navegadores tratam os elementos de bloco como se estivessem em pequenas caixas
exibida no navegador e não terá nenhum
retangulares, empilhadas na página. Cada elemento de bloco começa em uma nova efeito no restante da fonte:
linha e, por padrão, algum espaço também é adicionado acima e abaixo de todo o

elemento. Na FIGURA 4-11, as bordas dos elementos do bloco são contornadas em 
Os comentários são úteis para rotular

e organizar documentos longos,
principalmente quando são
compartilhados por uma equipe de
desenvolvedores. Neste exemplo, os
comentários são usados para apontar a
seção da fonte que contém a navegação:


<ul>
…
</ul>

Lembre-se de que, embora o

navegador não exiba comentários na
página da Web, os leitores podem vê-los
se "visualizarem a fonte", portanto,
certifique-se de que os comentários que
você deixa sejam apropriados para todos.
FIGURA 4-11. Os contornos mostram a estrutura dos elementos na página inicial.
Por outro lado, observe o texto que marcamos como enfatizado (em, destacado em
azul na FIGURA 4-11). Ele não inicia uma nova linha, mas permanece no fluxo do
parágrafo. Isso ocorre porque o elemento em é um elemento embutido (também
chamado de elemento semântico de nível de texto ou elemento de frase). Elementos
embutidos não iniciam novas linhas; eles apenas seguem o fluxo.
Estilos padrão
A outra coisa que você notará sobre a página marcada nas FIGURAS 4-10 e 4-11 é
que o navegador tenta dar à página algum

Etapa 4: adicionar uma imagem
hierarquia visual, tornando o título de primeiro nível a coisa maior e mais ousada da página,
com os títulos de segundo nível um pouco menores e assim por diante.
Como o navegador determina a aparência de um h1 ? Ele usa uma folha de estilo! Todos os
navegadores têm suas próprias folhas de estilo internas (chamadas folhas de estilo do agente
do usuário na especificação) que descrevem a renderização padrão dos elementos. A
renderização padrão é semelhante de navegador para navegador (por exemplo, h1s são
sempre grandes e em negrito), mas existem algumas variações (o elemento blockquote para
aspas longas pode ou não ser recuado).
Se você acha que o h1 é muito grande e desajeitado enquanto o navegador o renderiza, basta
alterá-lo com sua própria regra de folha de estilo. Resista à tentação de marcar o título com
outro elemento apenas para deixá-lo com uma aparência melhor - por exemplo, usando um h3
em vez de um h1 para que não seja tão grande. Nos dias anteriores ao suporte onipresente
da folha de estilo, os elementos eram abusados exatamente dessa maneira. Você deve sempre
escolher elementos com base na precisão com que descrevem o conteúdo e não se preocupe
com a renderização padrão do navegador.
Vamos corrigir a apresentação da página com folhas de estilo em breve, mas primeiro, vamos
adicionar uma imagem à página.
PASSO 4: ADICIONAR UMA IMAGEM
Qual é a graça de uma página da web sem imagens? No EXERCÍCIO 4-4, adicionaremos uma
imagem à página com o elemento img . As imagens serão discutidas com mais detalhes no
Capítulo 7, Adicionando imagens, mas, por enquanto, elas nos dão a oportunidade de
introduzir mais dois conceitos básicos de marcação: elementos vazios e atributos.
Elementos vazios
Até agora, quase todos os elementos que usamos na página inicial do Black Goose Bistro
seguiram a sintaxe mostrada na FIGURA 4-6: um pouco de conteúdo de texto cercado por
tags de início e fim.
Um punhado de elementos, no entanto, não tem conteúdo porque são usados para fornecer
uma diretiva simples. Esses elementos são ditos vazios. O elemento imagem (img) é um
exemplo de elemento vazio. Ele diz ao navegador para obter um arquivo de imagem do
servidor e inseri-lo naquele ponto no fluxo do texto.
Outros elementos vazios incluem a quebra de linha (br), quebras temáticas (hr, também
conhecido como “regras horizontais”) e elementos que fornecem informações sobre um
documento, mas não afetam seu conteúdo exibido, como o elemento meta que usamos
anteriormente.
A FIGURA 4-12 mostra a sintaxe muito simples de um elemento vazio (compare-o

com a FIGURA 4-6).

<nome do elemento>
O que é essa barra extra?

Exemplo: O elemento br insere uma quebra de linha. Se você vasculhar documentos
de origem para páginas da Web
<p>1005 Gravenstein Highway North<br>Sebastopol, CA 95472</p>
existentes, poderá ver elementos vazios
com barras extras no final, assim: <img /
>, <br />, <meta /> e <hr />. Isso indica
FIGURA 4-12. Estrutura de elemento vazia. que o documento foi escrito de acordo
com as regras mais rígidas de XHTML.
Em XHTML, todos os elementos,
Atributos incluindo elementos vazios, devem ser

fechados (ou terminados, para usar o
Vamos voltar a adicionar uma imagem com o elemento img vazio . Obviamente, uma tag termo apropriado).
<img> não é muito útil por si só - ela não indica qual imagem usar. Você encerra elementos vazios
adicionando uma barra à direita antes
É aí que entram os atributos. Atributos são instruções que esclarecem ou modificam um
do colchete de fechamento. O espaço
elemento. Para o elemento img , o atributo src (abreviação de “source”) é obrigatório e de caracteres anterior não é necessário,
especifica o local (URL) do arquivo de imagem. mas foi usado para compatibilidade com
navegadores que não tinham
A sintaxe para um atributo é a seguinte:
Analisadores XHTML, portanto, <img/>, <br/> e
nomedoatributo="valor" assim por diante são válidos.
Os atributos vão após o nome do elemento, separados por um espaço. Em elementos

não vazios, os atributos vão apenas na tag de abertura:
<element attributename="valor">
<element attributename="value">Conteúdo</ element> Os atributos são

instruções que esclarecem
Você também pode colocar mais de um atributo em um elemento em qualquer ordem.
ou modificam um elemento.
Basta mantê-los separados por espaços:
<element attribute1="value" attribute2="value">
A FIGURA 4-13 mostra um elemento img com seus atributos obrigatórios rotulados.
Os nomes e valores dos atributos são separados por um sinal de igual (=)
Nome do Atributo Valor Nome do Atributo Valor
<img src="pássaro.jpg" alt="foto do pássaro">

Atributo Atributo
Vários atributos são separados por um espaço
FIGURA 4-13. Um elemento img com dois atributos.

Aqui está o que você precisa saber sobre atributos:
• Os atributos vão após o nome do elemento apenas na tag de abertura, nunca no

marca de fechamento.
• Podem existir vários atributos aplicados a um elemento, separados por espaços na

tag de abertura. A ordem deles não é importante.
• A maioria dos atributos aceita valores, que seguem um sinal de igual (=). Em HTML,
alguns valores de atributo são palavras descritivas únicas. Por exemplo, o atributo
check , que torna uma caixa de seleção de formulário marcada quando o
formulário é carregado, é equivalente a check="checked". Você pode ouvir esse
tipo de atributo chamado de atributo booleano porque descreve um recurso que
está ativado ou desativado.
• Um valor pode ser um número, uma palavra, uma sequência de texto, uma URL
ou uma medida, dependendo da finalidade do atributo. Você verá exemplos de
tudo isso ao longo deste livro.
• Colocar valores de atributo entre aspas duplas é uma forte convenção, mas
observe que as aspas não são obrigatórias e podem ser omitidas.
Além disso, aspas simples ou duplas são aceitáveis, desde que as marcas de
abertura e fechamento correspondam. Observe que as aspas em arquivos HTML
precisam ser retas ("), não curvas (").
• Os nomes e valores dos atributos disponíveis para cada elemento são definidos
nas especificações HTML; em outras palavras, você não pode criar um atributo
para um elemento.
• Alguns atributos são obrigatórios, como os atributos src e alt no elemento img . A
especificação HTML também define quais atributos são necessários para que o
documento seja válido.
Agora você deve estar mais do que pronto para tentar adicionar o elemento img com
seus atributos à página Black Goose Bistro no EXERCÍCIO 4-4. Vamos lançar algumas
quebras de linha lá também.
EXERCÍCIO 4-4. Adicionando uma imagem
1. Se você estiver trabalhando, a primeira coisa que você precisa fazer é obter uma cópia do arquivo de imagem em
seu disco rígido para que você possa vê-lo no lugar quando abrir o arquivo localmente. O arquivo de imagem é
fornecido nos materiais deste capítulo (learningwebdesign.com/5e/materials).
Você também pode obter o arquivo de imagem salvando-o diretamente da página da Web de amostra on-line
em learningwebdesign.com/5e/materials/ch04/bistro. Clique com o botão direito do mouse (ou clique com a
tecla Control pressionada em um Mac) na imagem de ganso e selecione “Salvar em disco” (ou similar) no menu
pop-up, conforme mostrado na FIGURA 4-14. Nomeie o arquivo blackgoose.png. Certifique-se de salvá-lo no bistrô
pasta com index.html.
2. Depois de ter a imagem, insira-a no início do cabeçalho de primeiro nível digitando

o elemento img e seus atributos como mostrado aqui:
<h1><img src="blackgoose.png" alt="logo">Black Goose Bistro</h1>

Windows: Clique com o botão

direito do mouse na imagem para
acessar o menu pop-up.
Mac: Clique com a tecla Control
pressionada na imagem para

acessar o menu pop-up. As opções
podem variar de acordo com o
navegador.
FIGURA 4-14. Salvando um arquivo de imagem de uma página na web.
O atributo src fornece o nome do arquivo de imagem que deve ser inserido e o atributo alt fornece o
texto que deve ser exibido caso a imagem não esteja disponível. Ambos os atributos são necessários em
cada elemento img .
3. Eu gostaria que a imagem aparecesse acima do título, então adicione uma quebra de linha (br) após a img
elemento para iniciar o texto do título em uma nova linha.
<h1><img src="blackgoose.png" alt="logo"><br>Black Goose Bistrô</h1>

4. Vamos dividir o último parágrafo em três linhas para maior clareza. Solte uma tag <br> nos pontos em
que deseja que as quebras de linha ocorram. Tente igualar a captura de tela na FIGURA 4-15.
5. Agora salve index.html e abra-o ou atualize-o na janela do navegador. A página deve se parecer com
a mostrada na FIGURA 4-15. Se isso não acontecer, verifique se o arquivo de imagem,
blackgoose.png, está no mesmo diretório que index.html. Se estiver, verifique se não está faltando
nenhum caractere, como aspas ou colchetes de fechamento, na marcação do elemento img .
FIGURA 4-15. A página do Black Goose Bistro com a imagem do logotipo.

Etapa 5: alterar a aparência com uma folha de estilo
PASSO 5: MUDE O VISUAL COM UM

FOLHA DE ESTILOS
Dependendo do conteúdo e da finalidade do seu site, você pode decidir que a renderização
padrão do navegador do seu documento é perfeitamente adequada.
No entanto, acho que gostaria de melhorar um pouco a página inicial do Black Goose
Bistro para causar uma boa primeira impressão em clientes em potencial. “Prettying up”
é apenas a minha maneira de dizer que gostaria de mudar sua apresentação, que é o
trabalho de Cascading Style Sheets (CSS).
No EXERCÍCIO 4-5, alteraremos a aparência dos elementos de texto e o plano de fundo

da página usando algumas regras simples de folha de estilo. Não se preocupe em
entendê-los todos agora. Entraremos em CSS com mais detalhes na Parte III. Mas quero
pelo menos dar uma ideia do que significa adicionar uma “camada” de apresentação na
estrutura que criamos com nossa marcação.
EXERCÍCIO 4-5. Adicionando uma folha de estilo
1. Abra index.html se ainda não estiver aberto. Vamos usar o elemento de estilo h2 {
para aplicar uma folha de estilo incorporada muito simples à página. Esta é cor: #d1633c;
apenas uma das maneiras de adicionar uma folha de estilo; os outros são tamanho da fonte: 1em;
abordados no Capítulo 11, Introdução às folhas de estilo em cascata.

}
</style>
4. Agora é hora de salvar o arquivo e dar uma olhada nele no navegador.
2. O elemento de estilo é colocado dentro do cabeçalho do documento. Comece
adicionando o elemento de estilo ao documento, conforme mostrado aqui: Deve se parecer com a página da FIGURA 4-16. Se isso não acontecer, vá
até a folha de estilo para se certificar de que você não perdeu um ponto e vírgula
<cabeça>
ou um colchete. Observe a aparência da página com nossos estilos em
comparação com os estilos padrão do navegador (FIGURA 4-15).
<title>Black Goose Bistrô</title>
<estilo>
</style>
</head>
3. Em seguida, digite as seguintes regras de estilo no elemento de estilo

assim como você os vê aqui. Não se preocupe se você não souber exatamente o
que está acontecendo (embora seja bastante intuitivo). Você aprenderá tudo
sobre regras de estilo na Parte III.
<estilo>
corpo {
cor de fundo: #faf2e4;
margem: 0 10%;
família de fontes: sem serifa;
}
h1 {
alinhamento de texto: centro;
família de fontes: serifa;
peso da fonte: normal;
transformação de texto: maiúsculas;
borda inferior: 1px sólido #57b1dc;
FIGURA 4-16. A página Black Goose Bistro após a aplicação
margem superior: 30px;
}
das regras de estilo CSS.

Quando boas páginas ficam ruins
Terminamos com a página do Black Goose Bistro. Você não apenas escreveu sua
primeira página da Web, completa com uma folha de estilo, mas também aprendeu
sobre elementos, atributos, elementos vazios, elementos de bloco e embutidos, a
estrutura básica de um documento HTML e o uso correto de marcação junto o caminho.
Nada mal para um capítulo!
QUANDO BOAS PÁGINAS VÃO RUINS
A demonstração anterior correu bem, mas é fácil que pequenas coisas dêem errado
quando você está digitando a marcação HTML manualmente. Infelizmente, um caractere
perdido pode quebrar uma página inteira. Vou quebrar minha página de propósito para
vermos o que acontece.
E se eu não tivesse digitado a barra na marca de ênfase de fechamento (</em>)?

Com apenas um caractere fora do lugar (FIGURA 4-17), o restante do documento é
exibido em texto enfatizado (itálico). Isso porque sem essa barra, não há nada dizendo
ao navegador para “desativar” a formatação enfatizada, então ele continua (veja Nota).
NOTA
Omitir a barra na tag de fechamento (ou até
<h2>Catering</h2> mesmo omitir a própria tag de fechamento) para

<p>Você se diverte. <em>Nós cuidamos da culinária.<em>A Black Goose elementos de bloco, como títulos ou parágrafos,
Catering pode cuidar de eventos, desde lanches para um encontro até elegantes pode não ser tão dramático.
angariações de fundos corporativas.</p> Os navegadores interpretam o início de um novo
elemento de bloco para significar que o elemento
g.<em> de bloco anterior foi concluído.
FIGURA 4-17. Quando uma barra é omitida, o navegador não sabe quando o elemento
termina, como é o caso deste exemplo.
Corrigi a barra, mas desta vez, vamos ver o que teria acontecido se eu tivesse omitido
acidentalmente um colchete no final da primeira tag <h2> (FIGURA 4-18).
Veja como o título está faltando? Isso porque sem o colchete da tag de fechamento, o
navegador assume que todo o texto a seguir—até o próximo colchete de fechamento (>)
que encontrar—faz parte da tag de abertura <h2> . Os navegadores não exibem nenhum
texto dentro de uma tag, então meu título desapareceu. O navegador simplesmente
ignorou o nome do elemento de aparência estrangeira e passou para o próximo
elemento.

Validando seus documentos
<h2The Restaurant</
h2> <p>O Black Goose Bistro oferece almoço e jantar casual em
um ambiente descontraído. O menu muda regularmente para destacar
Ter problemas? os ingredientes locais mais frescos.</p>
A seguir estão alguns problemas típicos
que surgem quando você está criando páginas da <h2The
Web e visualizando-as em um navegador:
Subtítulo ausente
Alterei meu documento, mas quando recarrego a

Sem o colchete, todos os
página no meu navegador, fica exatamente igual.
caracteres a seguir são
interpretados como parte da
tag e “The Restaurant”
Pode ser que você não tenha salvo seu
desaparece da página.
documento antes de recarregar ou pode tê-lo
salvo em um diretório diferente.
Metade da minha página desapareceu.
Isso pode acontecer se estiver faltando
um colchete de fechamento (>) ou uma aspa FIGURA 4-18. Um colchete ausente faz com que o navegador pense que os caracteres a seguir
dentro de uma tag. Este é um erro comum
fazem parte da tag e, portanto, o texto do título não é exibido.
quando você está escrevendo HTML
manualmente.
Cometer erros em seus primeiros documentos HTML e corrigi-los é uma ótima maneira de
Eu coloquei um gráfico usando a img
aprender. Se você escrever suas primeiras páginas perfeitamente, recomendo mexer no
elemento, mas tudo o que aparece é um ícone
código para ver como o navegador reage a várias mudanças. Isso pode ser extremamente
de imagem quebrado.
útil em páginas de solução de problemas posteriores. Listei alguns problemas comuns na
O gráfico quebrado pode significar algumas
barra lateral "Tendo problemas?" Observe que esses problemas não são específicos para
coisas. Primeiro, pode significar que o
navegador não está iniciantes. Pequenas coisas como esta dão errado o tempo todo, mesmo para os profissionais.
encontrar o gráfico. Certifique-se de que o URL
para o arquivo de imagem esteja correto.
(Discutiremos URLs mais adiante no
Capítulo 6, Adicionando links.) Certifique-se

VALIDANDO SEUS DOCUMENTOS
de que o arquivo de imagem esteja realmente
no diretório que você especificou.
Uma maneira de os desenvolvedores web profissionais detectarem erros em sua marcação
é validar seus documentos. O que isso significa? Validar um documento é verificar sua
Se o arquivo estiver lá, verifique se
ele está em um dos formatos que os marcação para certificar-se de que você cumpriu todas as regras de qualquer versão de
navegadores da Web podem exibir HTML que esteja usando. Documentos sem erros são considerados válidos. É altamente
(PNG, JPEG, GIF ou SVG) e se está
recomendável que você valide seus documentos, principalmente para sites profissionais. Os
nomeado com o sufixo apropriado (.png, .jpeg
documentos válidos são mais consistentes em vários navegadores, são exibidos mais
ou .jpg, .gif ou .svg, respectivamente).
rapidamente e são mais acessíveis.
No momento, os navegadores não exigem que os documentos sejam válidos (em outras
palavras, eles farão o possível para exibi-los, com erros e tudo), mas sempre que você se
afasta do padrão, introduz imprevisibilidade na maneira como a página é tratada por
navegadores ou dispositivos alternativos.
Então, como você garante que seu documento seja válido? Você pode verificar você mesmo
ou perguntar a um amigo, mas os humanos cometem erros e não se espera que você
memorize cada regra de minuto nas especificações. Em vez disso, use um validador,
software que verifica sua fonte em relação à versão HTML que você especificou. Estas são
algumas das coisas que os validadores verificam:

Validando seus documentos
• A inclusão de uma declaração DOCTYPE. Sem ele, o validador não sabe em qual versão do
HTML validar:
• Uma indicação da codificação de caracteres do documento.
• A inclusão de regras e atributos obrigatórios.
• Elementos não padronizados.
• Etiquetas incompatíveis.
• Erros de aninhamento (colocação incorreta de elementos dentro de outros elementos).
• Erros de digitação e outros erros menores.
Os desenvolvedores usam várias ferramentas úteis para verificar e corrigir erros em documentos HTML.
O melhor validador baseado na web está em html5.validator.nu.
Lá você pode fazer upload de um arquivo ou fornecer um link para uma página que já está online.
A FIGURA 4-19 mostra o relatório que o validador gera quando carrego a versão do arquivo index.html
do Bistro que não possui marcação. Para este documento, há vários elementos ausentes que impedem
que este documento seja válido. Ele também mostra o código-fonte do problema e fornece uma explicação
de como o código deve aparecer. Bastante acessível!
As ferramentas de desenvolvedor de navegador integradas para Safari e Chrome também têm validadores
para que você possa verificar seu trabalho rapidamente. Alguns editores de código também possuem
validadores integrados.
FIGURA 4-19. O (X)HTML5 Validator (Living Validator) para verificar erros em documentos HTML
(html5.validator.nu).

Teste-se
ELEMENTO TESTE-SE
REVISÃO: HTML
Agora é um bom momento para se certificar de que você entende os conceitos básicos de marcação.
DOCUMENTO
Use o que você aprendeu neste capítulo para responder às seguintes perguntas.
CONFIGURAR
As respostas estão no Apêndice A.
Este capítulo introduziu os elementos que 1. Qual é a diferença entre uma tag e um elemento?
estabelecem partes de metadados e
conteúdo de um documento HTML. Os

demais elementos introduzidos nos
exercícios serão tratados com mais 2. Escreva a marcação mínima recomendada para um documento HTML5.
profundidade nos capítulos seguintes.
Descrição do elemento
3. Indique se cada um desses nomes de arquivo é um nome aceitável para um documento da Web
corpo Identifica o corpo do circulando "Sim" ou "Não". Se não for aceitável, forneça o
documento que contém a
razão:
contente
cabeça Identifica o cabeçalho do uma. Girassol.html Sim Não

documento que contém
b. index.doc Sim Não
informações sobre o próprio
documento Sim Não
c. cozinhar home page.html
html É o elemento raiz que contém
d. Song_Lyrics.html Sim Não
todos os outros elementos
e. games/ rubix.html Sim Não
meta Fornece informações f. %qualquer coisa.html Sim Não

sobre o documento
título Dá um título à página 4. Todos os exemplos de marcação a seguir estão incorretos. Descreva o que há de errado com
cada um e, em seguida, escreva-o corretamente.
uma. <img "aniversário.jpg">
b. <em>Parabéns!<em>
c. <a href="file.html">texto vinculado</a href="file.html">
d. <p>Este é um novo parágrafo<\p>
5. Como você marcaria este comentário em um documento HTML para que ele
não é exibido na janela do navegador?
lista de produtos começa aqui

CAPÍTULO
MARCANDO TEXTO 5
Assim que seu conteúdo estiver pronto (você o revisou, certo?) e você NESTE CAPÍTULO
adicionou a marcação para estruturar o documento (<!DOCTYPE>, html, head,

title, meta charset e body), você está pronto para identificar os elementos no conteúdo. Escolhendo o melhor elemento para o
seu conteúdo
Este capítulo apresenta os elementos que você deve escolher para marcar o texto.
Provavelmente não há tantos deles quanto você imagina, e realmente apenas um Parágrafos e títulos
punhado que você usará com regularidade. Dito isto, este capítulo é grande e cobre
muito terreno. Três tipos de listas
Ao iniciarmos nosso tour pelos elementos, quero reiterar o quanto é importante escolher Organizando o conteúdo em
elementos semanticamente – isto é, de uma maneira que descreva com mais precisão seções
o significado do conteúdo. Se você não gostar da aparência, altere-o com uma folha de
Elementos de nível de texto (inline)
estilo. Um documento marcado semanticamente garante que seu conteúdo esteja
disponível e acessível na mais ampla variedade de ambientes de navegação, desde Elementos genéricos, div e span
computadores desktop e dispositivos móveis até leitores de tela assistidos. Ele também
permite que leitores não humanos, como programas de indexação de mecanismos de Caracteres especiais
pesquisa, analisem corretamente seu conteúdo e tomem decisões sobre a importância

relativa dos elementos na página.
Com esses princípios em mente, é hora de conhecer os elementos de texto HTML,

começando pelo elemento mais básico de todos eles, o humilde parágrafo.
NOTA
Estarei ensinando marcação de acordo com o

PARÁGRAFOS
padrão HTML5 mantido pelo W3C (www.w3.org/
<p>…</p> TR/html5/). No momento da redação deste
Elemento de parágrafo artigo, a versão mais recente é a Recomendação
Proposta HTML 5.2 (www.
Os parágrafos são os elementos mais rudimentares de um documento de texto. Indique
w3.org/TR/html52/).
um parágrafo com o elemento p inserindo uma tag de abertura <p> no início do
parágrafo e uma tag de fechamento </p> depois dela, conforme mostrado neste exemplo:
<p>Os tipos de letra com serifa têm pequenas lajes nas extremidades dos traços das letras.
Em geral, as fontes com serifa podem facilitar a leitura de grandes quantidades de texto.</
p>
71
Títulos
<p>As fontes sem serifa não possuem placas serifadas; seus traços são quadrados no final.
Helvetica e Arial são exemplos de fontes sem serifa.
Em geral, as fontes sem serifa parecem mais elegantes e modernas.</p>
Os navegadores visuais quase sempre exibem parágrafos em novas linhas com um pouco
de espaço entre eles por padrão (para usar um termo do CSS, eles são exibidos como um
Nenhum texto nu!
bloco). Os parágrafos podem conter texto, imagens e outros elementos embutidos (chamados
Você deve atribuir um elemento a todo de conteúdo de frase), mas não podem conter títulos, listas, elementos de seção ou quaisquer
o texto em um documento. Em outros
elementos que normalmente são exibidos como blocos por padrão.
palavras, todo o texto deve ser incluído
em algum tipo de elemento. Texto que não é
Tecnicamente, não há problema em omitir a tag de fechamento </p> porque ela não é
contido dentro de tags é chamado nu
necessária para que o documento seja válido. Um navegador apenas assume que está
ou texto anônimo , e isso fará com que um
documento seja inválido. fechado quando encontra o próximo elemento de bloco. Muitos desenvolvedores web,
inclusive eu, preferem fechar parágrafos e todos os elementos por uma questão de
consistência e clareza. Eu recomendo que as pessoas que estão apenas aprendendo marcação façam o mes
TÍTULOS
<h1>…</h1> No último capítulo, usamos os elementos h1 e h2 para indicar os títulos da página do Black
<h2>…</h2> Goose Bistro. Na verdade, existem seis níveis de títulos, de h1 a h6. Quando você adiciona
<h3>…</h3> títulos ao conteúdo, o navegador os usa para criar um esboço de documento para a página.
<h4>…</h4> Dispositivos de leitura assistida, como leitores de tela, usam o esboço do documento para
<h5>…</h5> ajudar os usuários a digitalizar e navegar rapidamente por uma página. Além disso, os
<h6>…</h6> mecanismos de pesquisa analisam os níveis de título como parte de seus algoritmos (as
Elementos de título informações em níveis de título mais altos podem ter mais peso). Por esses motivos, é uma
prática recomendada começar com o título do Nível 1 (h1) e trabalhar em ordem numérica,
criando uma estrutura e um esboço lógicos do documento.
Este exemplo mostra a marcação para quatro níveis de título. Níveis de título adicionais
seriam marcados de maneira semelhante.
<h1>Design de tipo</h1>
<h2>Tipos de letra com serifa</h2>

<p>Os tipos de letra com serifa têm pequenas lajes nas extremidades dos traços das letras.
Em geral, as fontes com serifa podem facilitar a leitura de grandes quantidades de texto.
leia.</p>
<h3>Baskerville</h3>
<h4>Descrição</h4>
<p>Descrição do tipo de letra Baskerville.</p>
<h4>Histórico</h4>
<p>A história da fonte Baskerville.</p>
<h3>Geórgia</h3>
<p>Descrição e história do tipo de letra Georgia.</p>
<h2>Fontes sem serifa</h2>

<p>As fontes sem serifa não têm lajes nas extremidades dos traços.</p>

Títulos
A marcação neste exemplo criaria o seguinte esboço de documento:
1. Projeto de Tipo
1. Tipos de letra com

serifa + parágrafo de texto
1. Baskerville
1. Descrição +
parágrafo de texto
2. Histórico +
parágrafo de texto
2. Geórgia +
parágrafo de texto
2. Tipos de letra sem serifa

+ parágrafo de texto
Por padrão, os títulos em nosso exemplo são exibidos em negrito, começando em tipo
muito grande para h1s, com cada nível consecutivo em texto menor, conforme mostrado
na FIGURA 5-1. Você pode usar uma folha de estilo para alterar sua aparência.
h1
h2
h3
h4
h4
h3
h2
FIGURA 5-1. A renderização padrão de quatro níveis de título.
5. Marcação de texto 73
Intervalos Temáticos (Regra Horizontal)
INTERVALOS TEMÁTICOS (REGRA HORIZONTAL)
<hr> Se você quiser indicar que um tópico foi concluído e outro está começando, você pode inserir o que a
Uma regra horizontal especificação chama de “quebra temática em nível de parágrafo” com o elemento hr . O elemento hr
adiciona um divisor lógico entre seções de uma página ou parágrafos sem introduzir um novo nível de título.
Nas versões HTML mais antigas, hr era definido como uma “regra horizontal” porque insere uma linha
horizontal na página. Os navegadores ainda renderizam hr como uma regra sombreada 3-D e a colocam
em uma linha própria com algum espaço acima e abaixo por padrão; mas na especificação HTML5, tem
um novo nome e definição semântica. Se uma linha decorativa é tudo o que você procura, é melhor criar
uma regra especificando uma borda colorida antes ou depois de um elemento com CSS.
hr é um elemento vazio - basta soltá-lo no lugar onde deseja que a quebra automática ocorra, conforme
mostrado neste exemplo e na FIGURA 5-2:
<h3>Horas</h3>
<p>Descrição e histórico do tipo de letra Times.</p>
<hr>
<h3>Geórgia</h3>
<p>Descrição e história do tipo de letra Georgia.</p>
FIGURA 5-2. A renderização padrão de uma quebra temática (regra horizontal).
LISTAS
Os humanos são criadores de listas naturais, e o HTML fornece elementos para marcar três tipos de listas:
Listas não ordenadas
Coleções de itens que não aparecem em nenhuma ordem específica
Listas ordenadas
Listas nas quais a sequência dos itens é importante
Listas de descrição
Listas que consistem em pares de nome e valor, incluindo, mas não se limitando a termos e definições

Listas
Todos os elementos da lista - as próprias listas e os itens que as integram - são exibidos como
elementos de bloco por padrão, o que significa que eles começam em uma nova linha e têm
algum espaço acima e abaixo, mas isso pode ser alterado com CSS.
Nesta seção, veremos cada tipo de lista em detalhes.
Listas não ordenadas
Praticamente qualquer lista de exemplos, nomes, componentes, pensamentos ou opções se <ul>…</ul>

qualifica como uma lista não ordenada. Na verdade, a maioria das listas se enquadra nessa Lista não ordenada
categoria. Por padrão, as listas não ordenadas são exibidas com um marcador antes de cada item
da lista, mas você pode alterar isso com uma folha de estilo, como você verá em breve. <li>…</li>
Listar item em uma lista não ordenada
Para identificar uma lista não ordenada, marque-a como um elemento ul . A abertura <ul>
tag vai antes do primeiro item da lista, e a tag de fechamento </ul> vai depois do último item. Em
seguida, para marcar cada item na lista como um item de lista (li), coloque-o entre as tags li de
abertura e fechamento , conforme mostrado neste exemplo. Observe que não há marcadores no
documento de origem. O navegador os adiciona automaticamente (FIGURA 5-3).
A única coisa que é permitida em uma lista não ordenada (ou seja, entre as tags ul inicial e final)
é um ou mais itens de lista. Você não pode colocar outros elementos lá e pode não haver nenhum
texto não marcado. No entanto, você pode colocar qualquer tipo de elemento de conteúdo em um
item de lista (li):
<ul>
<li>Serif</li>
<li>Sem serifa</li>
<li>Roteiro</li>
<li>Exibir</li>
<li>Dingbats</li>
</ul>
FIGURA 5-3. A renderização padrão da lista não ordenada de amostra. O navegador adiciona os
marcadores automaticamente.
Mas aqui está a parte legal. Podemos pegar essa mesma marcação de lista não ordenada e
mudar radicalmente sua aparência aplicando folhas de estilo diferentes, conforme mostrado na
FIGURA 5-4. Na figura, desativei os marcadores, adicionei marcadores próprios, fiz os itens se
alinharem horizontalmente e até os fiz parecer botões gráficos. A marcação permanece
exatamente a mesma.
Listas
FIGURA 5-4. Com folhas de estilo, você pode dar muitos looks à mesma lista não ordenada.
Listas ordenadas
<ol>…</ol> As listas ordenadas são para itens que ocorrem em uma ordem específica, como
Lista ordenada instruções passo a passo ou instruções de direção. Eles funcionam exatamente como
as listas não ordenadas descritas anteriormente, mas são definidas com o elemento ol
<li>…</li> (para “lista ordenada”, é claro). Em vez de marcadores, o navegador insere números
Listar item dentro de uma lista ordenada
automaticamente antes de itens de lista ordenados (consulte Nota), para que você não
precise numerá-los no documento de origem. Isso facilita a reorganização dos itens da
lista sem renumerá-los.
NOTA
Os elementos de lista ordenada devem conter um ou mais elementos de item de lista, conforme
Se algo for logicamente uma lista ordenada, mostrado neste exemplo e na FIGURA 5-5:
mas você não quiser que os números sejam <ol>
exibidos, lembre-se de que você sempre pode <li>Gutenberg desenvolve tipo móvel (1450)</li>
remover a numeração com folhas de estilo. <li>Linotype é introduzido (1890)</li>
Então vá em frente e marque a lista <li>A fotocomposição se popularizou (década de 1950)</li>
<li>O tipo se torna digital (década de 1980)</li>
semanticamente como um ol e ajuste como ela
</ol>
é exibida com uma regra de estilo.
FIGURA 5-5. A renderização padrão de uma lista ordenada. O navegador adiciona os números
automaticamente.

Listas
Se você quiser que uma lista numerada comece em um número diferente de 1, você
pode usar o atributo start no elemento ol para especificar outro número inicial, conforme
mostrado aqui: Listas de aninhamento
<ol start="17"> Qualquer lista pode ser aninhada em outra
<li>Realce o texto com a ferramenta de texto.</li> lista; ele só precisa ser colocado dentro de um
<li>Selecione a guia Caractere.</li> item de lista. Este exemplo mostra a estrutura
<li>Escolha um tipo de letra no menu pop-up.</li> de uma lista não ordenada aninhada
</ol> no segundo item de uma lista ordenada:
Os itens de lista resultantes seriam numerados 17, 18 e 19, consecutivamente. <ol>

<li></li>
<li>
<ul>
Listas de descrição <li></li>
<li></li>
<dl>…</dl> <li></li>
Uma lista de descrição </ul>
</li>
</ol>
<dt>…</dt>
Quando você aninha uma lista não
Um nome, como um termo ou rótulo
ordenada em outra lista não ordenada, o
navegador altera automaticamente o estilo
<dd>…</dd>
do marcador para a lista de segundo nível.
Um valor, como uma descrição ou definição
Infelizmente, o estilo de numeração não é
alterado por padrão quando você aninha
As listas de descrição são usadas para qualquer tipo de pares de nome/valor, como listas ordenadas. Você precisa definir
termos e suas definições, perguntas e respostas ou outros tipos de termos e suas os estilos de numeração você mesmo com
informações associadas. Sua estrutura é um pouco diferente das outras duas regras CSS.
listas que acabamos de discutir. Toda a lista de descrição é marcada como um dl

elemento. O conteúdo de um dl é um certo número de elementos dt indicando os
nomes e elementos dd para seus respectivos valores. Acho útil pensar neles como
“termos” (para lembrar o “t” em dt) e “definições” (para o “d” em dd), mesmo que esse Troca de balas e
seja apenas um uso das listas de descrição. Numeração
Aqui está um exemplo de uma lista que associa formas de composição com suas Você pode usar a propriedade de folha de
estilo list-style-type para alterar os
descrições (FIGURA 5-6): marcadores e os números das listas. Por
<dl> exemplo, para listas não ordenadas, você
<dt>Linotipo</dt> pode alterar a forma do ponto padrão para um
<dd>O tipo permitido de fundição de linha pode ser selecionado, usado e recirculado quadrado ou um círculo aberto, substituir sua
na máquina automaticamente. Esse avanço aumentou drasticamente a velocidade própria imagem ou remover o marcador
de composição e impressão.</dd> completamente. Para listas ordenadas, você
pode alterar os números para algarismos
<dt>Fotocomposição</dt>
romanos (I, II, III ou i, ii, iii), letras (A, B, C ou a,
<dd>As fontes são armazenadas em filme e depois projetadas em papel
b, c) e vários outros esquemas de numeração.
fotossensível. As lentes ajustam o tamanho do tipo.</dd>
<dt>Tipo digital </dt> Na verdade, desde que a lista esteja

<dd><p>As fontes digitais armazenam o contorno da forma da fonte em um marcada semanticamente, ela não precisa
formato como Postscript. O contorno pode ser dimensionado para qualquer tamanho ser exibida com marcadores ou numeração.
para saída.</p> A alteração do estilo de listas com CSS é
<p>O Postscript surgiu como um padrão devido ao suporte a gráficos abordada no Capítulo 12, Formatando
e seu suporte inicial no computador Macintosh e na impressora a laser da Apple.</ texto.
p>
</dd>
</dl>
Mais elementos de conteúdo
FIGURA 5-6. A renderização padrão de uma lista de definições. As definições são destacadas dos
termos por um travessão.
O elemento dl pode conter apenas elementos dt e dd . Você não pode colocar títulos
ou elementos de agrupamento de conteúdo (como parágrafos) em nomes (dt), mas o
valor (dd) pode conter qualquer tipo de conteúdo de fluxo. Por exemplo, o último
elemento dd no exemplo anterior contém dois elementos de parágrafo (o espaçamento
padrão desajeitado pode ser limpo com uma folha de estilo).
É permitido ter várias definições com um termo e vice-versa. Aqui, cada grupo de
descrição de termos tem um termo e várias definições:
<dl>
<dt>Exemplos de serifa</dt>
<dd>Baskerville</dd>
<dd>Goudy</dd>
<dt>Exemplos sem serifa</dt>

<dd>Helvética</dd>
<dd>Futura</dd>
<dd>Avenir</dd>
</dl>
MAIS ELEMENTOS DE CONTEÚDO
Cobrimos parágrafos, títulos e listas, mas há mais alguns elementos de texto especiais
para adicionar à sua caixa de ferramentas HTML que não se encaixam em uma
categoria organizada: citações longas (blockquote), texto pré -formatado (pré) e
figuras (figura e legenda). Uma coisa que esses elementos têm em comum é que
eles são considerados “conteúdo de agrupamento” na especificação HTML5 (junto
com p, hr, os elementos de lista, main e o div genérico , abordados mais adiante neste capítulo).
A outra coisa que eles compartilham é que os navegadores normalmente os exibem
como elementos de bloco por padrão. A única exceção é o elemento principal mais
recente , que não é reconhecido por nenhuma versão do Internet Explorer (embora
seja suportado no navegador Edge); veja a barra lateral “Suporte HTML5 no Internet Explorer,”
posteriormente neste capítulo, para uma solução alternativa.

Cotações longas
Se você tiver uma citação longa, um depoimento ou uma seção de cópia de outra fonte, <blockquote>…</blockquote>
marque-a como um elemento de citação em bloco . Recomenda-se que o conteúdo dos Uma cotação longa em nível de bloco
elementos blockquote esteja contido em outros elementos, como parágrafos, títulos ou

listas, conforme mostrado neste exemplo:
<p>O renomado designer de tipos, Matthew Carter, tem a dizer sobre sua
profissão:</p>
<blockquote>
<p>Nosso alfabeto não mudou em eras; não há muita latitude em
o que um designer pode fazer com as letras individuais.</p>
<p>Assim como uma peça de música clássica, a partitura é escrita

baixa. Não é algo que é adulterado e, no entanto, cada maestro
interpreta essa partitura de forma diferente. Há tensão na interpretação.</
p>
</blockquote>
A FIGURA 5-7 mostra a renderização padrão do exemplo de blockquote . Isso pode ser NOTA
alterado com CSS.
Há também o elemento inline q para
citações curtas no fluxo do texto. Falaremos
sobre isso mais adiante neste capítulo.
FIGURA 5-7. A renderização padrão de um elemento blockquote .
Texto pré-formatado
No capítulo anterior, você aprendeu que os navegadores ignoram espaços em branco, <pre>…</pre>
como retornos de linha e espaços de caracteres no documento de origem. Mas em Texto pré-formatado
alguns tipos de informação, como exemplos de código ou certos poemas, o espaço em

branco é importante para transmitir significado. Para conteúdo em que o espaço em
branco é semanticamente significativo, use o elemento de texto pré-formatado (pré) . É
um elemento único, pois é exibido exatamente como é digitado, incluindo todos os
NOTA
retornos de carro e vários espaços de caracteres. Por padrão, o texto pré-formatado
também é exibido em uma fonte de largura constante (uma na qual todos os caracteres A propriedade CSS white-space:pre
têm a mesma largura, também chamada de monoespaço), como Courier; no entanto, também pode ser usada para preservar
você pode alterar facilmente a fonte com uma regra de folha de estilo. espaços e retornos na fonte.
O elemento pre neste exemplo é exibido como mostrado na FIGURA 5-8. A segunda parte
da figura mostra o mesmo conteúdo marcado como elemento de parágrafo (p) para
comparação.
<pré>
Este é um exemplo de
um texto com muito
curioso
espaço em branco.
</pre>
<p>
Este é um exemplo de
um texto com muito
curioso
espaço em branco.
</p>
FIGURA 5-8. O texto pré-formatado é único, pois o navegador exibe o espaço em branco
exatamente como é digitado no documento de origem. Compare-o com o elemento de parágrafo,
no qual retornos de várias linhas e espaços de caracteres são reduzidos a um único espaço.
Figuras
<figure>…</figure> O elemento figure identifica o conteúdo que ilustra ou apoia algum ponto do texto. Uma figura
Imagem ou recurso relacionado pode conter uma imagem, um vídeo, um trecho de código, texto ou até mesmo uma tabela –
praticamente qualquer coisa que possa entrar no fluxo do conteúdo da web.
<figcaption>…</figcaption> O conteúdo em um elemento de figura deve ser tratado e referenciado como uma unidade
Descrição de texto de uma figuraindependente. Isso significa que se uma figura for removida de seu posicionamento original
no fluxo principal (para uma barra lateral ou apêndice, por exemplo), tanto a figura quanto o
fluxo principal devem continuar fazendo sentido.
Embora você possa simplesmente adicionar uma imagem a uma página, envolvê-la em tags
de figura torna seu propósito explicitamente claro semanticamente. Também funciona como
um gancho para aplicar estilos especiais a figuras, mas não a outras imagens na página:
<figura>
<img src="piechart.png" alt="gráfico mostrando fontes em dispositivos móveis">
</figura>
Se você quiser fornecer uma legenda de texto para a figura, use o elemento figcaption
acima ou abaixo do conteúdo dentro do elemento figure . É uma maneira semanticamente
mais rica de marcar a legenda do que usar um simples elemento p .

<figura>
<pré>
<código>
NOTA DE SUPORTE DO NAVEGADOR
corpo {
cor de fundo: #000; Os elementos figure e figcaption não são
cor vermelha;
suportados no Internet Explorer versões 8 e
}
anteriores (consulte a barra lateral “Suporte a
</code>
</pre> HTML5 no Internet Explorer”, mais adiante neste
<figcaption>Exemplo de regra CSS .</figcaption> capítulo, para obter uma solução alternativa).
</figura>
No EXERCÍCIO 5-1, você terá a chance de marcar um documento por conta própria e
experimentar os elementos de texto básicos que abordamos até agora.
EXERCÍCIO 5-1. Marcando uma receita
Os donos do Black Goose Bistro decidiram compartilhar receitas e novidades em seu site. Nos exercícios
deste capítulo, nós os ajudaremos com a marcação de conteúdo.
Neste exercício, você encontrará o texto bruto de uma receita. Cabe a você decidir qual elemento
é a melhor correspondência semântica para cada parte do conteúdo. Você usará parágrafos, títulos,
listas e pelo menos um elemento de conteúdo especial.
Você pode escrever as tags diretamente nesta página. Ou, se você quiser usar um editor de texto e ver
os resultados em um navegador, este arquivo de texto, assim como a versão final com marcação, está
disponível em learningwebdesign.com/5e/materials.
Tapenade (papel de azeitona)
Este é um prato muito simples de preparar e é sempre um grande sucesso nas festas.
Meu pai recomenda:
"Faça isso na noite anterior para que os sabores tenham tempo de se misturar. Basta trazer à
temperatura ambiente antes de servir. No inverno, tente servir quente."
Ingredientes
1 8 onças. pote de tomate seco

2 dentes de alho grandes
2/3 c. azeitonas pretas
1 t. alcaparras
Instruções
Misture os tomates e o alho em um processador de alimentos. Misture até ficar o mais suave
possível.
Adicione alcaparras e azeitonas. Pulse o motor algumas vezes até que sejam
incorporados, mas ainda retenha alguns
textura.
Sirva em torradas finas com queijo de cabra e guarnição de manjericão fresco (opcional).
Organizando o conteúdo da página
ORGANIZAR O CONTEÚDO DA PÁGINA
Até agora, os elementos que abordamos lidam com detalhes muito específicos do
conteúdo: um parágrafo, um título, uma figura e assim por diante. Antes do HTML5, não
havia como agrupar esses bits em partes maiores além de envolvê-los em um elemento
genérico de divisão (div) (cobrirei div com mais detalhes posteriormente). O HTML5
introduziu novos elementos que dão significado semântico a seções de uma página ou
NOTA aplicativo típico da Web (consulte Nota), incluindo conteúdo principal (principal),
cabeçalhos (cabeçalho), rodapés (rodapé), seções (seção), artigos (artigo), navegação
Os novos nomes de elementos são baseados
(nav) e conteúdo tangencialmente relacionado ou complementar (à parte). Curiosamente,
em um estudo do Google que analisou os 20
a especificação também lista o antigo elemento de endereço como uma seção, então veremos isso aqui
principais nomes que os desenvolvedores
atribuíram a elementos de divisão genéricos (code.google.
com/webstats/2005-12/classes.html).
Suporte a HTML5 no Internet Explorer

Quase todos os navegadores hoje suportam os elementos semânticos HTML5, e para aqueles que não
suportam, criar uma regra de folha de estilo que diga aos navegadores para formatar cada um como um
elemento de nível de bloco é tudo que você precisa para fazê-los se comportar corretamente:
seção, artigo, nav, side, header, footer, main { display:

block;
}
Infelizmente, essa correção não funcionará para a pequena fração de usuários que ainda estão
usando o Internet Explorer versões 8 e anteriores (menos de 1,5% do tráfego do navegador em 2017).
O IE8 tem permanecido bem além do seu auge porque está vinculado ao popular sistema operacional
Windows Vista. Se você trabalha em um site grande para o qual 1% dos usuários representa milhares de
pessoas, convém estar familiarizado com as soluções alternativas e alternativas para o IE8. Muito provavelmente,
você não precisará apoiá-lo. Ainda assim, correndo o risco de parecer desatualizado, fornecerei notas sobre o
suporte ao IE8 ao longo deste livro.
Por exemplo, a seguir está uma solução alternativa que se aplica apenas ao IE8 e versões
anteriores. Esses navegadores não apenas não reconhecem os elementos HTML5, mas também
ignoram qualquer estilo aplicado a eles. A solução é usar JavaScript para criar cada elemento para
que o IE saiba que ele existe e permitirá aninhamento e estilo. Veja como é um comando JavaScript
que cria o elemento de seção :
documencreateElement("seção");
Felizmente, Remy Sharp escreveu um script que cria todos os elementos HTML5 para IE8 e anteriores de uma
só vez. Ele é chamado de “HTML5 Shiv” (ou Shim) e está disponível em um servidor que você pode apontar em
seus documentos. Basta copiar este código no cabeçalho do seu documento e usar uma folha de estilo para
estilizar os novos elementos como blocos:

O HTML5 Shiv também faz parte do script polyfill Modernizr que adiciona a funcionalidade HTML5 e
CSS3 a navegadores mais antigos sem suporte. Leia mais sobre Modernizr online em modernizr.com.
Ele também é abordado no Capítulo 20, Ferramentas modernas de desenvolvimento da Web.

Conteúdo principal
Atualmente, as páginas da Web são carregadas com diferentes tipos de conteúdo: <main>…</main>
cabeçalhos, barras laterais, anúncios, rodapés, mais anúncios, ainda mais anúncios e Área de conteúdo principal da página ou aplicativo
assim por diante. É útil ir direto ao ponto e apontar explicitamente o conteúdo principal
da página. Use o elemento principal para identificar o conteúdo principal de uma página
ou aplicativo. Ele ajuda os leitores de tela e outras tecnologias assistivas a saberem
onde o conteúdo principal da página começa e substitui os links “Pular para o conteúdo
principal” que foram utilizados no passado. O conteúdo de um elemento principal deve
ser exclusivo dessa página. Em outras palavras, cabeçalhos, barras laterais e outros
elementos que aparecem em várias páginas de um site não devem ser incluídos na seção principal :
<corpo>
<header>…</header>
<principal>
<h1>Humanista sem serifa</h1>


</main>
</body>
A especificação W3C HTML5 afirma que as páginas devem ter apenas um

seção e que não deve ser aninhado dentro de um artigo, lado, cabeçalho,
rodapé ou nav. Isso fará com que o documento seja inválido.
O elemento principal é a adição mais recente à lista de elementos de agrupamento
HTML5. Você pode usá-lo e estilizá-lo na maioria dos navegadores, mas para o Internet
Explorer (incluindo a versão 11, a mais atual até o momento), você precisará criar o
elemento com JavaScript e definir sua exibição para bloquear com uma folha de estilo,
conforme discutido na barra lateral “Suporte a HTML5 no Internet Explorer” . Observe
que main é suportado no MS Edge.
Cabeçalhos e Rodapés
Como os autores da web rotulam as seções de cabeçalho e rodapé em seus documentos <header>…</header>
há anos, era meio óbvio que elementos de cabeçalho e rodapé completos seriam úteis. Material introdutório para página, seção ou artigo
Vamos começar com os cabeçalhos.
<rodapé>…</rodapé>
Cabeçalhos
Rodapé para página, seção ou artigo
O elemento header é usado para material introdutório que normalmente aparece no

início de uma página da web ou no topo de uma seção ou artigo (chegaremos a esses
elementos a seguir). Não há uma lista especificada do que um cabeçalho deve ou deve
conter; qualquer coisa que faça sentido como a introdução de uma página ou seção é
aceitável. No exemplo a seguir, o cabeçalho do documento inclui uma imagem de
logotipo, o título do site e a navegação:
<corpo>
<cabeçalho>
<img src="/images/logo.png" alt="logo">

<h1>Loucos sobre Fontes da Web</h1>
<nav>
<ul>
<li><a href="/">Página inicial</a></li>
NOTA <li><a href="/">Blog</a></li>
<li><a href="/">Loja</a></li>
O código <a href="/"></a> nos exemplos é a </ul>
</nav>
marcação para adicionar links a outras páginas
</header>
da web. Abordaremos os links no Capítulo 6,

Adicionando Links. Normalmente, o valor </body>
seria o URL da página, mas usei uma barra
simples como medida de economia de espaço.
Quando usado em um artigo individual, o cabeçalho pode incluir o título do artigo, o
autor e a data de publicação, conforme mostrado aqui:
<artigo>
<cabeçalho>
<h1>Mais sobre WOFF</h1>
<p>por Jennifer Robbins, <time datetime="2017-11-11">11 de novembro de 2017</
time></p>
</header>

</article>
NOTA
Nem os elementos de cabeçalho nem de rodapé podem conter cabeçalho ou rodapé aninhados
elementos.
Rodapés
O elemento footer é usado para indicar o tipo de informação que normalmente

vem no final de uma página ou artigo, como seu autor, informações de direitos
autorais, documentos relacionados ou navegação. O elemento de rodapé pode
ser aplicado a todo o documento ou pode ser associado a uma seção ou artigo
específico. Se o rodapé estiver contido diretamente no elemento do corpo ,
antes ou depois de todo o outro conteúdo do corpo , ele se aplicará a toda a
página ou aplicativo. Se estiver contido em um elemento de seção (seção,
artigo, nav ou aparte), ele será analisado como o rodapé apenas dessa seção.
Observe que, embora seja chamado de “rodapé”, não há exigência de que
apareça por último no documento ou elemento de seção. Também pode
aparecer no início ou perto do início, se isso fizer sentido.
Neste exemplo simples, vemos as informações típicas listadas na parte inferior de

um artigo marcado como rodapé:
<artigo>
<cabeçalho>
<h1>Mais sobre WOFF</h1>
NOTA <p>por Jennifer Robbins, <time datetime="2017-11-11">11 de novembro de 2017</
time></p>
O elemento tempo será discutido em </header>
a seção "Datas e horários" mais adiante 
<rodapé>
este capítulo.
<p><small>Copyright ©2017 Jennifer Robbins.</small></p>

<nav>
<ul>
<li><a href="/">Anterior</a></li>
<li><a href="/">Próximo</a></li>
</ul>
</nav>
</footer>
</article>
Seções e artigos
Documentos longos são mais fáceis de usar quando são divididos em partes menores. <section>…</section>
Por exemplo, os livros são divididos em capítulos e os jornais têm seções para notícias Grupo temático de conteúdo
locais, esportes, quadrinhos e assim por diante. Para dividir documentos longos da web
<article>…</article>
em seções temáticas, use o elemento section apropriadamente nomeado. As seções
Composição reutilizável e independente
normalmente incluem um título (dentro do elemento de seção ) mais o conteúdo que
tem uma razão significativa para ser agrupado.
O elemento de seção tem uma ampla gama de usos, desde dividir uma página inteira NOTA
em seções principais ou identificar seções temáticas em um único artigo. A especificação do HTML5 recomenda que,
No exemplo a seguir, um documento com informações sobre recursos de tipografia foi se o propósito de agrupar os elementos for
dividido em duas seções com base no tipo de recurso: simplesmente fornecer um gancho para
<seção> estilizar, use o elemento div genérico .
<h2>Livros de tipografia</h2>
<ul>
<li>…</li>
</ul>
</section>
<seção>
<h2>Tutoriais on-line</h2>
<p>Estes são os melhores tutoriais da web.</p>
<ul>
<li>…</li>
</ul>
</section>
Use o elemento artigo para trabalhos independentes que podem ser independentes ou
reutilizados em um contexto diferente (como distribuição). É útil para artigos de revistas
ou jornais, postagens em blogs, comentários ou outros itens que possam ser extraídos
para uso externo. Você pode pensar nisso como um elemento de seção especializado
que responde “sim” à pergunta “Isso poderia aparecer em outro site e fazer sentido?”
Um artigo longo pode ser dividido em várias seções, como mostrado aqui:
<artigo>
<h1>Conheça a Helvetica</h1>
<seção>
<h2>História da Helvetica</h2>
<p>…</p>
</section>
<seção>
<h2>Helvetica hoje</h2>
<p>…</p>
</section>
</article>
Por outro lado, uma seção em um documento da web pode ser composta por vários artigos:
<section id="ensaios">
<artigo>
<h1>Um novo olhar sobre o futuro</h1>
<p>…</p>
</article>
<artigo>
<h1>Conhecendo o Humanista</h1>
<p>…</p>
</article>
</section>
Os elementos de seção e artigo são facilmente confundidos, principalmente porque é

possível aninhar um no outro e vice-versa. Lembre-se de que, se o conteúdo for independente
e puder aparecer fora do contexto atual, é melhor marcar como um artigo.
À parte (barras laterais)
<à parte>…</à parte> O elemento de lado identifica o conteúdo separado, mas tangencialmente relacionado ao
Material tangencialmente relacionado conteúdo circundante. Na impressão, seu equivalente é uma barra lateral, mas não poderia
ser chamada de “barra lateral” porque colocar algo no “lado” é uma descrição de apresentação,
não semântica. No entanto, uma barra lateral é um bom modelo mental para usar o elemento
de lado . apart pode ser usado para citações pull, informações básicas, listas de links, textos
explicativos ou qualquer outra coisa que possa estar associada (mas não crítica) a um
documento.
Neste exemplo, um elemento de lado é usado para uma lista de links relacionados ao artigo
principal:
<h1>Tipografia da Web</h1>
<p>Em 1997, havia formatos de fonte concorrentes e ferramentas para fazê-los…</p>
<p>Agora temos vários métodos para usar fontes bonitas em páginas da web…</p>
<à parte>
<h2>Recursos de fonte da Web</h2>
<ul>
<li><a href="http://typekit.com/">Typekit</a></li>
<li><a href="http://fonts.google.com">Google Fonts</a></li>
</ul>
</aparte>
O elemento lateral não tem renderização padrão, portanto, você precisará torná-lo um
elemento de bloco e ajustar sua aparência e layout com regras de folha de estilo.

Navegação
O elemento nav oferece aos desenvolvedores uma maneira semântica de identificar a navegação <nav>…</nav>
de um site. Anteriormente neste capítulo, vimos uma lista não ordenada que pode ser usada como Links de navegação principais
navegação de nível superior para um site de catálogo de fontes. Envolver essa lista em um elemento
nav deixa seu propósito explicitamente claro:
<nav>
<ul>
<li><a href="/">Serif</a></li>
<li><a href="/">Sans-serif</a></li>
<li><a href="/">Script</a></li>
<li><a href="/">Exibir</a></li>
<li><a href="/">Dingbats</a></li>
</ul>
</nav>
No entanto, nem todas as listas de links devem ser agrupadas em tags de navegação . A
especificação deixa claro que nav deve ser usado para links que fornecem navegação primária em
um site ou em uma seção ou artigo longo. O elemento nav pode ser especialmente útil do ponto de
vista da acessibilidade.
Endereços
Por último, e menos importante, é o elemento de endereço que é usado para criar uma área para <endereço>…</endereço>
informações de contato do autor ou mantenedor do documento. Geralmente é colocado no final do Informações de Contato
documento ou em uma seção ou artigo dentro de um documento. Um endereço estaria em casa

em um elemento de rodapé . É importante observar que o elemento address não deve ser usado
para nenhum endereço antigo em uma página, como endereços de correspondência. Destina-se
especificamente a informações de contato do autor (embora possa ser um endereço de
correspondência). Segue um exemplo de seu uso pretendido:
<endereço>
Contribuição de <a href="../authors/robbins/">Jennifer Robbins</a>, <a href="http://
www.oreilly.com/">O'Reilly Media</a> </ endereço>
Contornos do Documento
Nos bastidores, os navegadores observam a marcação em um diálogo, detalhes e td) como raízes de corte, o que significa que
documento e geram um esquema hierárquico com base nos títulos os títulos nesses elementos não se tornam parte do esboço geral do
do conteúdo. Uma nova seção é adicionada ao contorno sempre documento.
que o navegador encontra um novo nível de título. É uma boa ideia porque permite que o conteúdo seja reaproveitado
Nas versões anteriores do HTML, essa era a única maneira de e mesclado sem quebrar o esquema, mas, infelizmente, nenhum
criar o contorno. O HTML5 introduziu um novo algoritmo de estrutura navegador até hoje o implementou e é improvável que o façam. O
de tópicos que permite aos autores adicionar explicitamente uma W3C manteve os elementos de seção e seu comportamento
nova seção à estrutura de tópicos inserindo um elemento de seção: pretendido na especificação (e é por isso que menciono isso),
artigo, seção, lado e navegação. Além dos quatro elementos de mas agora o preceda com um banner recomendando manter o
corte, a especificação define alguns elementos (blockquote, fieldset, figure,antigo método de cabeçalho hierárquico.
O resumo do elemento embutido
O ROUNDUP DE ELEMENTOS INLINE

Agora que identificamos os pedaços maiores de conteúdo, podemos fornecer significado
semântico às frases dentro dos pedaços usando o que a especificação HTML5 chama de
elementos semânticos em nível de texto. Na rua, é provável que você os ouça chamados de
elementos inline porque eles são exibidos no fluxo de texto por padrão e não causam quebras
de linha. É também assim que eles eram chamados nas versões HTML anteriores ao HTML5.
Elementos de nível de texto (inline)
Apesar de todos os tipos de informações que você pode adicionar a um documento, existem
apenas algumas dúzias de elementos semânticos em nível de texto. A TABELA 5-1 lista todos eles.
Embora possa ser útil ver todos os elementos de nível de texto listados juntos em uma tabela,
eles certamente merecem explicações mais detalhadas.
Texto enfatizado
<em>…</em> Use o elemento em para indicar qual parte de uma frase deve ser enfatizada ou enfatizada. A
Ênfase acentuada colocação de elementos em afeta como o significado de uma frase é interpretado. Considere as
seguintes frases que são idênticas, exceto pelas palavras que são acentuadas:
<p><em>Arlo</em> é muito inteligente.</p>

<p>Arlo é <em>muito</em> inteligente.</p>
A primeira frase indica quem é muito inteligente. O segundo exemplo é sobre o quão inteligente
ele é. Observe que o elemento em tem um efeito sobre o significado da frase.
Os elementos de texto enfatizado (em) quase sempre são exibidos em itálico por padrão
(FIGURA 5-9), mas é claro que você pode exibi-los da maneira que desejar com uma folha de
estilo. Os leitores de tela podem usar um tom de voz diferente para transmitir conteúdo
enfatizado, e é por isso que você deve usar um elemento em apenas quando fizer sentido
semanticamente, não apenas para obter texto em itálico.
Texto importante
<strong>…</strong> O elemento forte indica que uma palavra ou frase é importante, séria ou urgente. No exemplo a
Forte importância seguir, o elemento forte identifica a porção de instruções que requer atenção extra. O elemento
forte não altera o significado da frase; apenas chama a atenção para as partes importantes:
<p>Ao devolver o carro, <strong>deixe as chaves na caixa vermelha ao lado da

recepção</strong>.</p>
Os navegadores visuais normalmente exibem elementos de texto forte em negrito por padrão.
Os leitores de tela podem usar um tom de voz distinto para conteúdo importante, então

TABELA 5-1. Elementos semânticos em nível de texto
Elemento Descrição
uma
Uma âncora ou link de hipertexto (consulte o Capítulo 6 para obter detalhes) Os elementos embutidos
abrev. Abreviação História de fundo
b Adicionada atenção visual, como palavras-chave (negrito) Muitos dos elementos inline que existem
desde o início da web foram introduzidos para
bdi Indica o texto que pode ter requisitos direcionais
alterar a formatação visual das seleções de
bdo Sobreposição bidirecional; indica explicitamente a direção do texto (da esquerda para a texto devido à falta de um sistema de folha de
direita, ltr ou da direita para a esquerda, rtl) estilo. Se você quisesse texto em negrito,
br Quebra de linha você o marcaria como b. Itálico? Use o

elemento i . Na verdade, havia uma vez um
citar Citação; uma referência ao título de uma obra, como o título de um livro elemento de fonte usado apenas para alterar
código a fonte, cor e tamanho do texto (o horror!).

Exemplo de código de computador
Não surpreendentemente, o HTML5 chutou a
dados Datas, horas, pesos e outros valores mensuráveis equivalentes legíveis por fonte puramente de apresentação
máquina
del Texto excluído; indica uma edição feita em um documento elemento ao meio-fio. No entanto, muitos
dos elementos inline de apresentação da
dfn A instância definidora ou primeira ocorrência de um termo velha escola (por exemplo, u para sublinhado
em Texto enfatizado e s para tachado) foram mantidos em HTML5
e receberam novas definições semânticas
eu
Voz alternativa (itálico) ou idioma alternativo (b é agora para “palavras-chave”, s para “texto
ins Texto inserido; indica uma inserção em um documento impreciso” ).
kbd Muitos elementos embutidos têm a

Teclado; texto inserido por um usuário (para documentos técnicos)
renderização de estilo esperada (negrito para
marca Texto contextualmente relevante o elemento b , por exemplo). Outros elementos
Cotação curta e em linha embutidos são puramente semânticos (como

q
abbr ou time) e não possuem renderizações
rubi, rt, rp Fornece anotações ou guias de pronúncia em tipografia e ideogramas do leste padrão. Para quaisquer elementos embutidos,
asiático você pode usar regras CSS se quiser alterar
s Texto incorreto (tachado) a forma como eles são exibidos.
amostra Exemplo de saída de programas
pequena Letras pequenas, como um aviso de direitos autorais ou legal (exibido em um

tamanho de letra menor)
período Conteúdo de frase genérica

Elementos de texto
Forte Conteúdo de grande importância
HTML 4.01 obsoletos
sub Subscrito
Aqui estão alguns elementos de texto antigos
e aí? Sobrescrito que se tornaram obsoletos em HTML5:
Tempo Dados de tempo legíveis por máquina sigla, applet, basefont, big, center, dir
(diretório), font, isindex (caixa de
você
Indica um nome formal, palavra incorreta ou texto que seria sublinhado
pesquisa), menu, strike, tt (teletype).
Menciono-os aqui caso você os encontre em
var Uma variável ou argumento de programa (para documentos técnicos) um documento antigo ao visualizar sua fonte
ou se estiver usando uma ferramenta de
wbr Quebra de palavras
criação na Web mais antiga. Não há razão
para usá-los hoje.
marque o texto como forte apenas quando fizer sentido semanticamente, não apenas para tornar o
texto em negrito.
O seguinte é um breve exemplo de nosso em e exemplos de texto forte . A FIGURA 5-9 não deve
conter surpresas.
FIGURA 5-9. A renderização padrão de texto enfatizado e forte.
Elementos originalmente nomeados por suas propriedades de apresentação
<b>…</b> Já que estamos falando de texto em negrito e itálico, vamos ver o que o antigo b
Palavras-chave ou texto e os elementos i estão até agora. Os elementos b, i, u, se small foram introduzidos nos velhos tempos
visualmente enfatizado (negrito) da web como forma de fornecer instruções de composição (negrito, itálico, sublinhado, tachado e texto
menor, respectivamente). Apesar de seus propósitos de apresentação originais, esses elementos foram
<i>…</i>
incluídos no HTML5 e receberam definições semânticas atualizadas com base em padrões de como
Voz alternativa (itálico)
eles foram usados. Os navegadores ainda os renderizam por padrão como seria de esperar (FIGURA
<s>…</s> 5-10). No entanto, se uma mudança de estilo de tipo é tudo o que você procura, usar uma regra de
Texto incorreto (tachado) folha de estilo é a solução apropriada. Guarde-os para quando forem semanticamente apropriados.
<u>…</u>
Texto anotado (sublinhado)
Vejamos esses elementos e seu uso correto, bem como as alternativas de folha de estilo.
<pequeno>…</pequeno>
Texto jurídico; letras pequenas (tamanho do tipo menor)
Palavras-chave, nomes de produtos e outras frases que precisam se destacar do texto ao redor sem
transmitir importância ou ênfase adicional (consulte a Nota). [Definição antiga: Negrito]
NOTA
Isso me ajuda a pensar em como um leitor de Propriedade CSS: Para texto em negrito, use font-weight. Exemplo: peso da fonte: negrito;
tela leria o texto. Se eu não quero
a palavra lida em um tom de voz alto e Exemplo: <p>As lajes nas extremidades dos traços de letras são chamadas de <b>serifas</
enfático, mas realmente deve ser em negrito, então bb>.</p>

pode ser mais apropriado do que forte.
eu
Indica o texto que está em uma voz ou humor diferente do texto ao redor, como uma frase de outro
idioma, um termo técnico ou um pensamento. [Definição antiga: itálico]
Propriedade CSS: Para texto em itálico, use font-style. Exemplo: estilo da fonte: itálico;

Exemplo: <p>Basta mudar a fonte e <i>Voila!</i>, uma nova personalidade!</p>
Indica o texto incorreto. [Definição antiga: texto tachado]
Propriedade CSS: Para desenhar uma linha através de uma seleção de texto, use text-decoration.
Exemplo: decoração de texto: line-through
Exemplo: <p>Scala Sans foi projetado por <s>Eric Gill</s> Martin Majoor.</p>
você
Há alguns casos em que o sublinhado tem significado semântico, como sublinhar um nome formal
em chinês ou indicar uma palavra incorreta após uma verificação ortográfica, como “Helvitica” no
exemplo a seguir. Observe que o texto sublinhado é facilmente confundido com um link e
geralmente deve ser evitado, exceto em alguns casos de nicho. [Antiga definição: sublinhado]
Propriedade CSS: Para texto sublinhado, use text-decoration. Exemplo: decoração de texto:
sublinhado
Exemplo: <p>A sinalização do metrô de Nova York está definida em <u>Helviteca</u>.</p>
pequena
Indica um adendo ou nota lateral ao texto principal, como as “letras miúdas” legais na parte inferior
de um documento. [Definição antiga: renderiza em fonte menor que o texto ao redor]
Propriedade CSS: Para tornar o texto menor, use font-size. Exemplo: tamanho da fonte: 80%
Exemplo: <p><small>(Esta fonte é gratuita para uso pessoal e comercial.)</small></p>
eu
você
pequena
FIGURA 5-10. A renderização padrão dos elementos b, i, s, u e small .
Citações curtas
<q>…</q> Use o elemento quote (q) para marcar citações curtas, como “To be or not to be”, no
Cotação em linha curta fluxo do texto, conforme mostrado neste exemplo (FIGURA 5-11):
Matthew Carter diz: <q>Nosso alfabeto não mudou em eras.</q>
De acordo com a especificação HTML, os navegadores devem adicionar aspas ao

redor dos elementos q automaticamente, para que você não precise incluí-los no
documento de origem. Alguns navegadores, como o Firefox, renderizam aspas curvas,
o que é preferível. Outros (Safari e Chrome, que usei para meus exemplos) os
renderizam como citações diretas, conforme mostrado na figura.
FIGURA 5-11. Os navegadores adicionam aspas automaticamente ao redor dos elementos q .
Abreviações e Acrônimos
<abbr>…</abbr> Marcar acrônimos e abreviações com o elemento abbr fornece informações úteis para
Abreviatura ou sigla mecanismos de pesquisa, leitores de tela e outros dispositivos.
As abreviaturas são versões abreviadas de uma palavra que termina em ponto (“Conn.”
para “Connecticut”, por exemplo). Acrônimos são abreviações formadas pelas primeiras
letras das palavras em uma frase (como NASA ou EUA). O título
NOTA O atributo fornece a versão longa do termo abreviado, conforme mostrado neste
exemplo:
No HTML 4.01, havia um elemento acrônimo
especialmente para acrônimos, mas o HTML5 o <abbr title="Pontos">pts.</abbr>
tornou obsoleto em favor do uso do abbr para <abbr title="American Type Founders">ATF</abbr>
ambos.
Elementos de aninhamento
Você pode aplicar dois elementos a uma sequência de texto (por exemplo, uma frase que é tanto
uma citação quanto em outro idioma), mas certifique-se de que eles estejam aninhados corretamente.
Isso significa que o elemento interno, incluindo sua tag de fechamento, deve estar completamente
contido no elemento externo e não se sobrepor:
<q><i>Je ne sais pas.</i></q>

Aqui está um exemplo de elementos que estão aninhados incorretamente. Observe que o i interno
elemento não está fechado dentro do elemento q contém :
<q><i>Je ne sais pas.</q></i>

É fácil identificar o erro de aninhamento em um exemplo tão curto, mas quando você está aninhando
passagens longas ou aninhando vários níveis de profundidade, é fácil acabar com sobreposições.
Uma vantagem de usar um editor de código HTML é que ele pode fechar automaticamente os
elementos corretamente ou apontar quando você cometeu um erro.

Citações
O elemento cite é usado para identificar uma referência a outro documento, como um livro, revista, título <cite>…</cite>
de artigo e assim por diante. As citações geralmente são renderizadas em texto em itálico por padrão. Citação
Aqui está um exemplo:
<p>As passagens deste artigo foram inspiradas no <cite> Manual Completo de Tipografia</
cite> de James Felici.</p>
Definindo termos
É comum apontar a primeira e definidora instância de uma palavra em um documento de alguma forma. <dfn>…</dfn>
Neste livro, os termos de definição são definidos em texto azul. Em HTML, você pode identificá-los com Definindo termo
o elemento dfn e formatá-los visualmente usando folhas de estilo.
<p><dfn>As fontes de script </dfn> são baseadas na escrita à mão.</p>
Elementos do código do programa
Vários elementos embutidos são usados para descrever as partes de documentos técnicos, como código <code>…</code>
(código), variáveis (var), amostras de programa (samp) e toques de teclado inseridos pelo usuário Código
(kbd). Para mim, é um lembrete curioso das origens do HTML no mundo científico (Tim Berners-Lee
<var>…</var>
desenvolveu o HTML para compartilhar documentos no laboratório de física de partículas do CERN em
Variável
1989).
<samp>…</samp>
Os elementos de código, amostra e teclado normalmente são renderizados em uma fonte de largura
Exemplo de programa
constante (também chamada de monoespaçado) , como Courier por padrão. As variáveis geralmente
são renderizadas em itálico. <kbd>…</kbd>
Toques de teclado inseridos pelo usuário
Subscrito e sobrescrito
Os elementos subscrito (sub) e sobrescrito (sup) fazem com que o texto selecionado seja exibido em <sub>…</sub>
um tamanho menor, posicionado ligeiramente abaixo (sub) ou acima (sup) da linha de base. Esses Subscrito
elementos podem ser úteis para indicar fórmulas químicas ou equações matemáticas.
<sup>…</sup>
Sobrescrito
A FIGURA 5-12 mostra como esses exemplos de subscrito e sobrescrito normalmente são
renderizados em um navegador.
<p>H<sub>2</sub>0</p>
<p>E=MC<sup>2</sup></p>
FIGURA 5-12. Subscrito e sobrescrito
Texto destacado
<marca>…</marca> O elemento marca indica uma palavra que pode ser considerada especialmente relevante
Texto contextualmente relevante para o leitor. Pode-se usá-lo para destacar dinamicamente um termo de pesquisa em uma
página de resultados, para chamar manualmente a atenção para uma passagem de texto
ou para indicar a página atual em uma série. Alguns designers (e navegadores) dão ao
texto marcado um fundo de cor clara como se estivesse marcado com um marcador de
realce, como mostrado na FIGURA 5-13.
<p>... PARTE I. ADMINISTRAÇÃO DO GOVERNO. TÍTULO IX.
TRIBUTAÇÃO. CAPÍTULO 65C. MASSA. <mark>IMPOSTO DE IMPOSTOS</mark>.

Capítulo 65C: Seção. 2. Cálculo do <mark>imposto imobiliário </mark>.</p>
FIGURA 5-13. Neste exemplo, os termos de pesquisa são identificados com elementos de marca e
recebem um fundo amarelo com uma folha de estilo para que sejam mais fáceis de serem encontrados pelo leitor.
Datas e horários
<hora>…</hora> Quando olhamos para a frase “meio-dia de 4 de novembro”, sabemos que é uma data e
Dados de tempo uma hora. Mas o contexto pode não ser tão óbvio para um programa de computador. O
elemento de tempo nos permite marcar datas e horas de uma maneira confortável para
um humano ler, mas também codificada de maneira padronizada que os computadores
NOTA
podem usar. O conteúdo do elemento apresenta as informações para as pessoas e o
O elemento tempo não se destina a marcar atributo datetime apresenta as mesmas informações de forma legível por máquina.
tempos para os quais uma hora ou data precisa
não pode ser estabelecida, como “o final do ano
O elemento time indica datas, horas ou combinações de data e hora. Ele pode ser usado
passado” ou “a virada do século”.
para passar as informações de data e hora para um aplicativo, como salvar um evento em
um calendário pessoal. Pode ser usado pelos motores de busca para encontrar os artigos
publicados mais recentemente. Ou pode ser usado para reestilizar as informações de
horário em um formato alternativo (por exemplo, mudar das 18h às 18h).
LEITURA ADICIONAL
O atributo datetime especifica as informações de data e/ou hora em um formato de hora
Para obter mais informações sobre os padronizado ilustrado na FIGURA 5-14. O formato de tempo integral começa com a data
detalhes intrincados da especificação de (ano–mês–dia). A seção de hora começa com uma letra “T” e lista horas (no relógio de 24
datas e horas, com exemplos, confira a horas), minutos, segundos (opcional) e milissegundos (também opcional). Finalmente, o
entrada do elemento time na especificação
fuso horário é indicado pelo número de horas atrás (-) ou à frente (+) do Greenwich Mean
HTML5: www.w3.org/TR/2014/
Time (GMT). Por exemplo, “-05:00” indica o fuso horário padrão do leste, que está cinco
REC-html5-20141028/text-level
semantics.html#the-time-element. horas atrás do GMT. Ao identificar apenas datas e horas, você pode omitir as outras
seções.

Um “T” sempre precede a + ou – horas adiantadas ou atrasadas

informação de tempo Horário de Greenwich
ENCONTRO TEMPO FUSO HORÁRIO
AAAA-MM-DD Thh:mm:ss.ddd±hh:mm
Ano Mês Dia Hora Minuto Segundo (opcional) Hora Minuto
Fração de segundo
(opcional)
Exemplo:
15:00 PST em 25 de dezembro de 2016 2016-12-25T15:00-8:00
FIGURA 5-14. Sintaxe padronizada de data e hora.
NOTA
Aqui estão alguns exemplos de valores válidos para datetime:
Você também pode usar o elemento time
• Apenas horário: 21h30
sem o atributo datetime , mas seu conteúdo
<time datetime="21:30">21:30 da noite</time> deve ser uma string de data/hora válida:
• Data apenas: 19 de junho de 2016 <time>2016-06-19</time>

<time datetime="2016-06-19"> 19 de junho de 2016</time>
• Data e hora: 5 de setembro de 1970, 1h11.
<time datetime="1970-09-05T01:11:00">Set. 5, 1970, 1h11</time>
• Data e hora, com informações de fuso horário: 8h do dia 19 de julho de 2015, em

Providência, RI
<time datetime="2015-07-19T08:00:00-05:00"> 19 de julho de 2015, 8h,

Providência RI</time>
Informações legíveis por máquina
O elemento de dados é outra ferramenta para ajudar os computadores a entender o conteúdo. Ele <dados>…</dados>
pode ser usado para todos os tipos de dados, incluindo datas, horas, medidas, pesos, microdados e Dados legíveis por máquina
assim por diante. O atributo de valor necessário fornece as informações legíveis por máquina. Aqui
estão alguns exemplos:
<data value="12">Doze</data>
<data value="978-1-449-39319-9">CSS: o guia definitivo </data>
Não vou entrar em mais detalhes sobre o elemento de dados porque, como iniciante, é improvável que
você esteja lidando com dados legíveis por máquina ainda. Mas é interessante ver como a marcação
pode ser usada para fornecer informações úteis a programas e scripts de computador, bem como a seus
semelhantes.
Texto inserido e excluído

<ins>…</ins> Os elementos ins e del são usados para marcar edições indicando partes de um documento que
Texto inserido foram inseridas ou excluídas (respectivamente). Esses elementos dependem de regras de estilo para
apresentação (ou seja, não há um padrão de navegador confiável).
<del>…</del> Os elementos ins e del podem conter elementos inline ou block, dependendo do tipo de conteúdo que
Texto excluído
eles contêm:
Diretor Executivo: <del title="retired">Peter Pan</del><ins>Pippi

Meia longa</ins>
Adicionando quebras
Quebras de linha
<br> Ocasionalmente, pode ser necessário adicionar uma quebra de linha no fluxo de texto. Vimos como
Quebra de linha os navegadores ignoram as quebras de linha no documento de origem, portanto, precisamos de uma
diretiva específica para dizer ao navegador para “adicionar uma quebra de linha aqui”.
O elemento de quebra de linha embutido (br) faz exatamente isso. O elemento br pode ser usado para
quebrar linhas de endereços ou poesia. É um elemento vazio, o que significa que não tem conteúdo.
Basta adicionar o elemento br no fluxo de texto onde você deseja que ocorra uma quebra, conforme
mostrado aqui e na FIGURA 5-15:
<p>Muito depende <br>de <br><br>uma roda vermelha <br>carrinho de mão</p>
FIGURA 5-15. As quebras de linha são inseridas em cada elemento br . (Exemplo extraído de
“The Red Wheelbarrow” de William Carlos Williams.)
Infelizmente, o elemento br é facilmente abusado. Tenha cuidado para não usar elementos br para
forçar quebras no texto que realmente deveria ser uma lista. Por exemplo, não faça isso:
<p>Horas<br>
Geórgia<br>
Garamond
</p>
Se for uma lista, use o elemento de lista não ordenada semanticamente correto e desative os
marcadores com folhas de estilo:
<ul>
<li>Horas</li>
<li>Geórgia</li>
<li>Garamond</li>
</ul>

Quebras de palavras
O elemento de quebra de palavra (wbr) permite marcar o local onde uma palavra deve <wbr>
quebrar (uma “oportunidade de quebra de linha” de acordo com a especificação) caso Quebra de palavras
não haja espaço suficiente para a palavra inteira (FIGURA 5-16). Ele tira um pouco do
trabalho de adivinhação do navegador e permite que os autores controlem o melhor local
para a palavra ser dividida em duas linhas. Se houver espaço suficiente, a palavra
permanece inteira. Sem quebras de palavras, a palavra permanece unida e, se não O elemento wbr não é suportado por nenhuma
houver espaço suficiente, a palavra inteira é quebrada para a próxima linha. Observe versão do Internet Explorer até o momento. É
que o navegador não adiciona um hífen quando a palavra se divide em duas linhas. O suportado no MS Edge.
wbr se comporta como se fosse um espaço de caracteres no meio da palavra:
<p>A maior palavra que você já ouviu e é assim que funciona:

<em>supercali<wbr>fragilístico<wbr>expialidoz</em>!</p>
FIGURA 5-16. Quando não houver espaço suficiente para uma palavra caber em uma linha, ela será
interrompida no local do elemento wbr .
Você foi apresentado a 32 novos elementos desde seu último exercício. Eu diria que é
hora de experimentar alguns dos elementos embutidos no EXERCÍCIO 5-2.
Acomodando Idiomas Não Ocidentais

Para que a web alcance um público verdadeiramente mundial, ela document ou um elemento para ltr (da esquerda para a direita) ou rtl
precisa ser capaz de suportar a exibição de todos os idiomas do (da direita para a esquerda). Em elementos de nível de frase, ele
mundo, com todos os seus alfabetos, símbolos, direcionalidade e também cria um isolamento bidirecional, impedindo que o texto dentro
pontuação especializada exclusivos. Os esforços de internacionalização do elemento influencie a ordem do texto fora dele. (Esta pode ser uma
do W3C (frequentemente chamados de “i18n” — um i, depois 18 letras, consideração importante ao incorporar texto gerado pelo usuário.)
depois um n) garantem que os formatos e protocolos definidos nas Por exemplo, para incluir uma passagem de hebraico em um
tecnologias da Web sejam utilizáveis em todo o mundo. documento em inglês, use o atributo dir para indicar que a frase deve
Os esforços de internacionalização incluem o seguinte: ser exibida da direita para a esquerda:
• Usando a codificação de caracteres Unicode que contém o <p>É assim que você escreve Shalom:
caracteres, glifos, símbolos, ideogramas e similares de todos os <span dir="rtl">ÿÿÿÿ/>span></p>
idiomas ativos e modernos. O Unicode é discutido no Capítulo 4,
• Fornecer um sistema que permite anotação em rubi, notas que
Criando uma página simples.
normalmente aparecem acima de ideogramas de idiomas do Leste
• Declarar o idioma principal de um documento usando um código de Asiático para fornecer dicas de pronúncia ou traduções (elementos
idioma de duas letras do padrão ISO 639-1 (disponível em www.loc.gov/ ruby, rt e rp ). Consulte as especificações para obter detalhes se isso
standards/iso639-2/php/code_list.php). Por exemplo, inglês é “EN”, for algo que você precisa fazer.
tcheco é “CS” e alemão é “DE”.
O site W3C Internationalization Activity fornece uma coleção
Use o atributo lang no elemento html para declarar o idioma de
completa de técnicas e recursos de autoria de HTML e CSS para ajudar
todo o documento ou em elementos individuais que requerem
em seus esforços de internacionalização: www.w3.org/International/
esclarecimentos.
techniques/authoring-html.
• Acomodando as várias direções de escrita das línguas.
Em HTML, o atributo dir define explicitamente a direção para o
Elementos genéricos (div e span)
EXERCÍCIO 5-2. Identificando elementos embutidos
Este pequeno post para a página Black Goose Bistro News lhe dará <artigo>
a oportunidade de identificar e marcar uma variedade de elementos
<cabeçalho>
inline. Veja se você consegue encontrar frases para marcar com precisão
<p>postado por BGB, 15 de novembro de 2016</p>
com os seguintes elementos:
</header>
b br citar dfn em
<h2>Baixo e Lento</h2>
eu
q pouco tempo <p>Esta semana estou extremamente empolgado com uma nova
Como a marcação é sempre um pouco subjetiva, sua marcação resultante técnica de culinária chamada sous vide. No cozimento sous vide,
pode não ser exatamente igual à minha marcação final, mas há uma você submerge o alimento (geralmente selado a vácuo em plástico) em
oportunidade de usar todos os elementos anteriores no artigo. Para crédito um banho-maria que é ajustado com precisão para a temperatura
extra, existe uma frase que pode ter dois elementos aplicados a ela. (Dica: desejada para a qual você deseja que o alimento seja cozido. Em seu
procure um termo em outro idioma.) livro, Cooking for Geeks, Jeff Potter descreve isso como caça furtiva de
Lembre-se de aninhá-los corretamente fechando o elemento interno antes temperatura ultrabaixa.</p>
de fechar o externo. Além disso, certifique-se de que todos os elementos
de nível de texto estejam contidos em elementos de bloco. <p>No próximo mês, serviremos Salmão Sous Vide com Dill
Hollandaise. Para reservar um lugar no chef
Você pode escrever as tags diretamente nesta página. Ou, se você quiser
mesa, entre em contato conosco antes de 30 de novembro.</p>
usar um editor de texto e ver os resultados em um navegador, este arquivo de
texto está disponível online em learningwebdesign.com/5e/materials junto com o <p>blackgoose@example.com
código resultante. 555-336-1800</p>
<p>Aviso: Salmão cozido em sous vide não é pasteurizado.

Evite-o se estiver grávida ou tiver problemas de imunidade.</p>
</article>
ELEMENTOS GENÉRICOS (DIV E SPAN)
<div>…</div> E se nenhum dos elementos sobre os quais falamos até agora descrever com precisão seu
Elemento genérico de nível de bloco conteúdo? Afinal, existem infinitos tipos de informações no mundo, mas como você viu, nem todos
os elementos semânticos. Felizmente, o HTML fornece dois elementos genéricos que podem ser
<span>… personalizados para descrever seu conteúdo perfeitamente. O elemento div indica uma divisão de
Elemento inline genérico
conteúdo e span
indica uma palavra ou frase para a qual não existe atualmente nenhum elemento de nível de texto.
Os elementos genéricos recebem significado e contexto com o id e a classe
atributos, que discutiremos em breve.
Os elementos div e span não possuem qualidades de apresentação próprias, mas você pode usar
folhas de estilo para formatá-los como quiser. Na verdade, os elementos genéricos são uma
ferramenta primária no design da web baseado em padrões porque permitem que os autores
descrevam o conteúdo com precisão e oferecem muitos “ganchos” para adicionar regras de estilo.
Eles também permitem que os elementos da página sejam acessados e manipulados por
JavaScript.
Vamos gastar um pouco de tempo nos elementos div e span , bem como nos atributos id e class ,
para aprender como os autores os usam para estruturar o conteúdo.

Divida com uma div

Use o elemento div para criar um agrupamento lógico de conteúdo ou elementos na página. Indica
que eles pertencem a uma unidade conceitual ou devem ser tratados como uma unidade por CSS DICA DE MARCAÇÃO
ou JavaScript. Marcando o conteúdo relacionado como um div e dando a ele um id exclusivo ou

É possível aninhar elementos div
indicando que ele faz parte de uma classe, você dá contexto aos elementos no agrupamento.
dentro de outros elementos div , mas não
Vejamos alguns exemplos de elementos div . exagere. Você deve sempre se esforçar
para manter sua marcação o mais simples
Neste exemplo, um elemento div é usado como um contêiner para agrupar uma imagem e dois
possível, portanto, adicione um elemento
parágrafos em uma “listagem” de produto:
div somente se for necessário para
estrutura lógica, estilo ou script.
<div class="listagem">
<img src="images/felici-cover.gif" alt="">
<p><cite>Manual Completo de Tipografia</cite>, James Felici</p>
<p>Uma combinação de histórico de tipos e exemplos de design de tipo bom e
ruim.</p>
</div>
Ao colocar esses elementos em uma div, deixei claro que eles estão conceitualmente
relacionados. Ele também me permite estilizar elementos p dentro de listagens de forma diferente
de outros elementos p no documento.
Aqui está outro uso comum de um div usado para dividir uma página em seções para fins de
layout. Neste exemplo, um título e vários parágrafos são incluídos em uma div e identificados
como a divisão “news”:
<div id="notícias">
<h1>Novo esta semana</h1>
<p>Estamos trabalhando em...</p>
<p>E por último, mas não menos importante,... </p>
</div>
Agora tenho um elemento personalizado ao qual dei o nome de "notícias". Você pode estar
pensando: “Ei, Jen, você não poderia usar um elemento de seção para isso?” Você poderia!
Na verdade, os autores podem recorrer a divs genéricos com menos frequência agora que temos
melhores elementos de seção semântica em HTML5.
Definir uma frase com intervalo

Um span oferece os mesmos benefícios que o elemento div , exceto que é usado para elementos
de frase e não introduz quebras de linha. Como os intervalos são elementos embutidos, eles
podem conter apenas texto e outros elementos embutidos (em outras palavras, você não pode
colocar títulos, listas, elementos de agrupamento de conteúdo etc. em um intervalo). Vamos
direto a alguns exemplos.
Não há elemento de telefone , mas podemos usar um span para dar significado aos números de
telefone. Neste exemplo, cada número de telefone é marcado como um intervalo e classificado
como “tel”:
<ul>
<li>João: <span class="tel">999.8282</li>
<li>Paulo: <span class="tel">888.4889</li>
<li>George: <span class="tel">888.1628</li>
<li>Ringo: <span class="tel">999.3220</li>
</ul>
Você pode ver como os intervalos classificados adicionam significado ao que, de outra
forma, poderia ser uma sequência aleatória de dígitos. Como bônus, o elemento span nos
permite aplicar o mesmo estilo a números de telefone em todo o site (por exemplo, garantindo
que as quebras de linha nunca ocorram dentro deles, usando um espaço em branco CSS :
declaração nowrap ). Isso torna a informação reconhecível não apenas para humanos, mas
também para programas de computador que sabem que “tel” é a informação do número de telefone.
Na verdade, alguns valores—incluindo “tel”—foram padronizados em um sistema de marcação
conhecido como Microformatos que torna o conteúdo da web mais útil para software (veja a
próxima barra lateral “Dados Estruturados em Nutshell”).
id e atributos de classe
Nos exemplos anteriores, vimos os atributos id e class usados para fornecer contexto aos
elementos genéricos div e span . id e class têm propósitos diferentes, entretanto, e é
importante saber a diferença.
Identificação com id
O atributo id é usado para atribuir um identificador exclusivo a um elemento no documento.

Em outras palavras, o valor de id deve ser usado apenas uma vez no documento. Isso o
Valores de id e classe
torna útil para atribuir um nome a um elemento específico, como se fosse um dado. Consulte
Em HTML5, os valores dos atributos a barra lateral “Valores de id e classe” para obter informações sobre como fornecer valores
id e class devem conter um caractere
para o atributo id .
(ou seja, não podem estar vazios) e não
podem conter espaços de caracteres. Este exemplo usa os ISBNs (International Standard Book Numbers) dos livros para identificar
Você pode usar praticamente qualquer exclusivamente cada listagem. Duas listagens de livros não podem compartilhar o mesmo ID.
caractere no valor.
<div id="ISBN0321127307">
Versões anteriores do HTML
<img src="felici-cover.gif" alt="">
tinham restrições nos valores de id (por
exemplo, precisavam começar com uma <p>Uma combinação de histórico de tipos e exemplos de tipos bons e ruins.
letra), mas essas restrições foram removidas </p>
em HTML5. </div>
<div id="ISBN0881792063">
<img src="bringhurst-cover.gif" alt="">
<p><cite>Os elementos do estilo tipográfico</cite>, Robert Bringhurst
</p>
<p>Este livro adorável e bem escrito se preocupa principalmente com a criação de
uma bela tipografia.</p>
</div>
Os autores da Web também usam id ao identificar as várias seções de uma página. No

exemplo a seguir, não pode haver mais de um elemento com o id
de “links” ou “notícias” no documento:
<section id="notícias">

</section>
<aside id="links">

</aparte>

Classificação com classe
O atributo class classifica os elementos em grupos conceituais; portanto, diferentemente

do atributo id , um nome de classe pode ser compartilhado por vários elementos.
Ao tornar os elementos parte da mesma classe, você pode aplicar estilos a todos os
elementos rotulados de uma só vez com uma única regra de estilo ou manipulá-los com
um script. Vamos começar classificando alguns elementos no exemplo anterior do livro. DICA DE MARCAÇÃO
Neste primeiro exemplo, adicionei atributos de classe para classificar cada div como
uma “lista” e para classificar os parágrafos como “descrições”: Use o atributo id para identificar.
<div id="ISBN0321127307" class="listing"> Use o atributo class para classificar.

<cabeçalho>
<img src="felici-cover.gif" alt="">

</header>
<p class="description">Uma combinação de histórico de tipos e exemplos de
tipo bom e ruim.</p>
</div>
<div id="ISBN0881792063" class="listing">

<cabeçalho>
<img src="bringhurst-cover.gif" alt="">

<p><cite>Os elementos do estilo tipográfico</cite>, Robert Bringhurst
</p>
</header>
<p class="description">Este livro adorável e bem escrito se preocupa
principalmente com a criação de uma bela tipografia.</p>
</div>
Atributos Globais
Observe como o mesmo elemento pode ter uma classe e um id. Também é possível
que os elementos pertençam a várias classes. Quando houver uma lista de valores de HTML5 define um conjunto de atributos
classe , basta separá-los com espaços de caracteres. Neste exemplo, classifiquei cada que pode ser usado com cada
div como um “livro” para separá-los de possíveis listagens de “cd” ou “dvd” em outras elemento HTML. Eles são chamados
de atributos globais:
partes do documento:
chave de acesso
<div id="ISBN0321127307" class="livro de listagem">
classe
<img src="felici-cover.gif" alt="CMT cover">
<p><cite>Manual Completo de Tipografia</cite>, James Felici</p> conteúdo editável
<p class="description">Uma combinação de histórico de tipos e exemplos de diretório
tipo bom e ruim.</p>

</div> arrastável
escondido
<div id="ISBN0881792063" class="livro de listagem">
Eu iria
<img src="bringhurst-cover.gif" alt="ETS cover">
<p><cite>Os elementos do estilo tipográfico</cite>, Robert Bringhurst lang
</p>
corretor ortográfico
<p class="description">Este livro adorável e bem escrito está preocupado
acima de tudo com a criação de uma bela tipografia.</p> estilo
</div> tabindex
título
traduzir
Identificar e classificar todos os elementos
O Apêndice B lista todos os
Os atributos id e class não estão limitados apenas a div e span—eles são dois dos atributos globais, seus valores e
atributos globais (veja a barra lateral “Global Attributes” ) em HTML, definições.

Melhorando a acessibilidade com ARIA
o que significa que você pode usá-los com todos os elementos HTML. Por exemplo, você pode
identificar uma lista ordenada como “direções” em vez de envolvê-la em um div:
<ol id="direções">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Isso deve ter dado a você uma boa introdução sobre como usar os atributos class e id para
adicionar significado e organização aos documentos. Trabalharemos com eles ainda mais nos
capítulos de folha de estilo na Parte III. A barra lateral “Dados estruturados em poucas
palavras” discute formas mais avançadas de adicionar significado e dados legíveis por máquina
aos documentos.
MELHORANDO A ACESSIBILIDADE COM ARIA

Como web designers, devemos sempre considerar a experiência dos usuários com tecnologias
assistivas para navegar nas páginas e interagir com as aplicações web.
Seus usuários podem estar ouvindo o conteúdo da página lido em voz alta por um leitor de tela e
usando teclados, joysticks, comandos de voz ou outros dispositivos de entrada sem mouse para
navegar pela página.
Muitos elementos HTML são claramente entendidos quando você olha (ou lê) apenas a fonte
HTML. Elementos como título, cabeçalhos, listas, imagens e tabelas têm significados implícitos
no contexto de uma página, mas elementos genéricos como div e span carecem da semântica
necessária para serem interpretados por um dispositivo auxiliar. Em aplicações web ricas,
especialmente aquelas que dependem fortemente de JavaScript e AJAX (veja Nota), a marcação
NOTA por si só não fornece pistas suficientes sobre como os elementos estão sendo usados ou se um
controle de formulário está atualmente selecionado, requerido ou em alguma outra Estado.
AJAX (JavaScript assíncrono e XML) é
explicado em uma barra lateral no Capítulo
22, Usando JavaScript. Felizmente, temos ARIA (Accessible Rich Internet Applications), um conjunto padronizado de
atributos para tornar as páginas mais fáceis de navegar e os recursos interativos mais fáceis de
usar. A especificação foi criada e mantida por um Grupo de Trabalho da Web Accessibility
Initiative (WAI), razão pela qual você também a chama de WAI-ARIA. ARIA define funções,
estados e propriedades que os desenvolvedores podem adicionar à marcação e scripts para
fornecer informações semânticas mais ricas.
Funções
Os papéis descrevem a função ou propósito de um elemento no contexto do documento.

Algumas funções incluem alerta, botão, caixa de diálogo, controle deslizante e barra de menu,
para citar apenas algumas. Por exemplo, como vimos anteriormente, você pode transformar uma
lista não ordenada em um menu com guias de opções usando folhas de estilo, mas e se você
não conseguir ver que está estilizado dessa maneira? Adicionar role="toolbar" à lista deixa seu propósito claro:

Dados estruturados em poucas palavras
É muito fácil para nós humanos dizer a diferença entre uma receita e <div itemscope itemtype="http://schema.org/Person">
uma crítica de filme. Para mecanismos de busca e outros programas <p itemprop="name">Cindy Sherman</p>
de computador, no entanto, não é tão óbvio. Quando usamos HTML <p itemprop="telephone">555.999-2456</p>
sozinho, todos os navegadores veem parágrafos, cabeçalhos e outros
</div>
elementos semânticos de um documento. Digite estruturado Para obter mais informações sobre o WHATWG, consulte o
dados! Dados estruturados permitem que o conteúdo seja legível por máquina Apêndice D, From HTML+ to HTML5.
também, o que ajuda os mecanismos de pesquisa a fornecer resultados mais

inteligentes e amigáveis ao usuário e pode proporcionar uma melhor experiência
RDFa e RDFa Lite
ao usuário, por exemplo, extraindo informações de eventos de uma página e www.w3.org/TR/xhtml-rdfa-primer/

adicionando-as ao aplicativo de calendário do usuário. O W3C retirou os microdados da especificação HTML5 em
Existem vários padrões para dados estruturados, mas eles compartilham 2013, colocando todos os seus esforços de dados estruturados por
uma abordagem semelhante. Primeiro, eles identificam e nomeiam a trás do RDFa (Resource Description Framework in Attributes) e seu
“coisa” que está sendo apresentada. Então eles apontam as propriedades subconjunto simplificado, RDFa Lite. Ele usa atributos especificados
daquela coisa. A “coisa” pode ser uma pessoa, um evento, um produto, um (vocab, typeof, property, resource e prefix) para aprimorar o
filme... praticamente qualquer coisa que você possa imaginar vendo em conteúdo HTML. Aqui está a mesma pessoa marcada com RDFa:
uma página da web. As propriedades consistem em pares nome/valor. Por
exemplo, “ator”, “diretor” e “duração” são propriedades de um filme. Os
<div vocab="http://schema.org" typeof="Person">
valores dessas propriedades aparecem como o conteúdo de um elemento
<p property="name">Cindy Sherman</p>
HTML. Uma coleção de termos padronizados atribuídos a “coisas”, bem
<p property="telephone">555.999-2456</p>
como suas respectivas propriedades, formam o que é chamado de </div>
vocabulário.
JSON-LD
Os padrões mais populares para adicionar dados estruturados são
json-ld.org
Microformatos, Microdados, RDFa (e RDFa Lite) e JSON-LD.
Eles diferem na sintaxe que usam para adicionar informações sobre JSON-LD (JavaScript Object Notation to serialize Linked Data) é
objetos e suas propriedades. um animal diferente, pois coloca os tipos de objetos e suas
propriedades em um script removido da marcação HTML. Aqui está
Microformatos a versão JSON-LD da mesma pessoa:
microformatos.org
<script type="application/ld+json">
Esse esforço inicial para tornar o conteúdo da Web mais útil criou {
valores padronizados para o id, classe e rel existentes "@context": "http://schema.org/",
Atributos HTML. Não é um padrão documentado, mas é uma "@type": "Pessoa",
convenção que está em uso generalizado porque é muito simples "nome": "Cindy Sherman"
de implementar. Há cerca de uma dúzia de vocabulários de "telefone": "555.999-2456"
microformato estáveis para definir pessoas, organizações,
}
</script>
eventos, produtos e muito mais. Aqui está um pequeno exemplo de
como uma pessoa pode ser marcada usando Microformatos: É possível criar seu próprio vocabulário para uso em seus sites,
mas é mais poderoso usar um vocabulário padronizado. Os grandes
mecanismos de busca criaram o Schema.org, um megavocabulário que
<div class="h-card"> inclui propriedades padronizadas para centenas de “coisas” como
<p class="p-name">Cindy Sherman</p> postagens em blogs, filmes, livros, produtos, resenhas, pessoas,
<p class="p-tel">555.999-2456</p> organizações e assim por diante. Os vocabulários do Schema.org podem
</div>
ser usados com Microdata, RDFa e JSON-LD (os microformatos mantêm
Microdados seus próprios vocabulários separados). Você pode ver ponteiros para o
vocabulário “Pessoa” do Schema.org nos exemplos anteriores. Para obter
html.spec.whatwg.org/multipage/microdata.html
mais informações, a página “Getting Started” do Schema.org fornece uma
Microdata é um padrão HTML WHATWG (Web Hypertext introdução de fácil leitura: schema.org/docs/gs.html.
Application Technology Working Group) que usa atributos
específicos de microdados (itemscope, itemtype, itemprop,
Há muito mais a dizer sobre dados estruturados do que posso colocar
itemid e itemref) para definir objetos e suas propriedades. Aqui
neste livro, mas uma vez que você entenda a semântica básica do HTML,
está um exemplo de uma pessoa definida usando Microdados.
é definitivamente um tópico digno de exploração adicional.

<ul id="tabs" role="toolbar">

<li>AG</li>
<li>HO</li>
<li>PT</li>
<li>UZ</li>
</ul>
Aqui está outro exemplo que revela que o div “status” é usado como um alerta
mensagem:
<div id="status" role="alert">Você não está mais conectado ao servidor.</

div>
Algumas funções descrevem “pontos de referência” que ajudam os leitores a encontrar seu
caminho pelo documento, como navegação, banner, informações de conteúdo,
complementares e principais. Você pode notar que alguns deles soam semelhantes aos
elementos de estruturação de página que foram adicionados no HTML5, e isso não é
coincidência. Um dos benefícios de ter elementos de seção semântica aprimorados é que
eles podem ser usados como pontos de referência, substituindo <div id="main" role="main"> por main.
A maioria dos navegadores atuais já reconhece as funções implícitas dos novos elementos, mas
alguns desenvolvedores adicionam explicitamente funções ARIA até que todos os navegadores
estejam em conformidade. Os elementos de corte emparelham com as funções de referência ARIA
da seguinte maneira:
<nav role="navigation">
NOTA <header role="banner"> (ver Nota)
A função de banner é usada quando o cabeçalho <main role="main">
aplica-se apenas à página inteira, não apenas a
<aside role="complementary">
uma seção ou artigo.
<footer role="contentinfo">
Estados e Propriedades
ARIA também define uma longa lista de estados e propriedades que se aplicam a elementos
interativos, como widgets de formulário e conteúdo dinâmico. Estados e propriedades são indicados
com atributos prefixados com aria-, como aria-disabled, aria-describedby e muitos mais.
A diferença entre um estado e uma propriedade é sutil. Para propriedades, é mais provável que o
valor do atributo seja estável, como aria-labelledby, que associa rótulos a seus respectivos controles
de formulário, ou aria-haspopup, que indica que o elemento tem um menu pop-up relacionado. Os
estados têm valores com maior probabilidade de serem alterados à medida que o usuário interage
com o elemento, como aria-selected.

Obviamente, este treinamento ARIA não é suficiente para permitir que você comece a usá-lo com
confiança hoje, mas deve lhe dar uma boa noção de como ele funciona e

Fugas de Personagem
seu valor potencial. Quando você estiver pronto para se aprofundar e levar suas habilidades para um
nível profissional, aqui estão algumas leituras recomendadas:
O Projeto de Trabalho WAI-ARIA (www.w3.org/TR/wai-aria-1.1/) DICA DE ESPECIFICAÇÃO
Este é o atual rascunho de trabalho da especificação no momento da redação deste documento.

A especificação HTML do W3C agora
ARIA em HTML (www.w3.org/TR/html-aria/) lista quais funções e propriedades ARIA
se aplicam nas descrições de cada
Este W3C Working Draft ajuda os desenvolvedores a usar atributos ARIA com HTML corretamente. elemento HTML (www.w3.org/TR/
Ele apresenta uma ótima lista de todos os elementos HTML, se tem um papel implícito (no qual html52/).
ARIA não deve ser usado) e quais papéis, estados e propriedades se aplicam.
Recursos ARIA em MDN Web Docs
(developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
Este site apresenta muitos links para recursos atualizados e relacionados ao ARIA. É um bom
ponto de partida para a exploração.
Acessibilidade HTML5 (www.html5accessibility.com)
Este site testa quais novos recursos HTML5 são suportados de forma acessível pelos principais
navegadores.
ESCAPE DE PERSONAGEM
Há apenas mais um tópico relacionado ao texto antes de encerrarmos este capítulo. O título da seção
faz parecer que alguém deixou o portão aberto e todos os personagens saíram. O significado real é
mais mundano, embora útil para saber.
Você já sabe que, quando um navegador analisa um documento HTML, quando ele encontra um
símbolo < , ele o interpreta como o início de uma tag. Mas e se você precisar apenas de um símbolo
menor que no seu texto? Caracteres que podem ser mal interpretados como código precisam ser
escapados no documento de origem. Escapar significa que, em vez de digitar o próprio caractere,
você o representa por sua referência de entidade de caractere numérico ou nomeado. Quando o
navegador vê a referência do caractere, ele substitui o caractere apropriado naquele local quando a
página é exibida.
Existem duas maneiras de se referir (escape) a um personagem específico:
• Usando um nome abreviado predefinido para o caractere (chamado entidade nomeada; consulte a
Nota). NOTA
• Usando um valor numérico atribuído que corresponde à sua posição em um conjunto de caracteres HTML define centenas de entidades
codificados (entidade numérica). Os valores numéricos podem estar em formato decimal ou nomeadas como parte da linguagem de
hexadecimal. marcação, o que significa que você não pode
criar sua própria entidade.
Todas as referências de caracteres começam com um & (e comercial) e terminam com um ; (ponto e
vírgula).

Fugas de Personagem
Um exemplo deve deixar isso claro. Gostaria de usar um símbolo menor que no meu
texto, então devo usar a entidade nomeada (<) ou seu equivalente numérico (<)
onde quero que o símbolo apareça (FIGURA 5-17):
<p>3 colheres de chá. < 3 colheres de chá.</p>
ou:
<p>3 colheres de chá. < 3 colheres de chá.</p>
FIGURA 5-17. O caractere especial é substituído pela referência de caractere quando o

documento é exibido no navegador.
Quando escapar de caracteres

Existem alguns casos em que você pode precisar ou desejar usar uma referência de
caractere.
Caracteres de sintaxe HTML

DICA DE MARCAÇÃO
Os caracteres <, >, &, " e ' têm um significado de sintaxe especial em HTML e podem
Essas entidades de caracteres são
ser mal interpretados como código. Portanto, o W3C recomenda que você escape <, >
útil quando você precisa mostrar um
e & caracteres no conteúdo. Se os valores de atributo contiverem um ou aspas duplas,
exemplo de marcação HTML em uma
página da web.
é aconselhável escapar os caracteres de aspas nos valores. As aspas estão bem no
conteúdo e não precisam ser escapadas. (Consulte a TABELA 5-2.)
TABELA 5-2. Caracteres de sintaxe e suas referências de caracteres
Personagem Descrição Nome da entidade Número decimal Nº hexadecimal
< Símbolo de menos que < < <
> Símbolo de maior que > > >
"
Aspa " " "
' Apóstrofo ' ' '
& E comercial & & &

Fugas de Personagem
Personagens invisíveis ou ambíguos
Alguns caracteres não têm exibição gráfica e são difíceis de ver na marcação (TABELA
5-3). Isso inclui o espaço sem quebra ( ), que é usado para garantir que uma
linha não seja interrompida entre duas palavras. Então, por exemplo, se eu marcar
meu nome assim:
Jennifer Robbins
Posso ter certeza de que meu nome e sobrenome sempre ficarão juntos em uma linha.
Outro uso para espaços sem quebra é separar dígitos em um número longo, como
32.000.000.
O espaço de largura zero pode ser colocado em idiomas que não usam espaços entre
as palavras para indicar onde a linha deve quebrar. Um joiner de largura zero é um
espaço não imprimível que faz com que os caracteres vizinhos sejam exibidos em
seus formulários conectados (comum nos idiomas árabe e índico). Os não-juntores de
largura zero impedem que caracteres vizinhos se unam para formar ligaduras ou outros
formulários conectados.
TABELA 5-3. Personagens invisíveis e suas referências de personagens
(sem impressão) Espaço ininterrupto
(sem impressão) En space &ensp;
(sem impressão) Espaço Em &emsp;
(sem impressão) Espaço de largura zero (Nenhum)
(sem impressão) Não-marceneiro de largura zero &zwnj; ‌ ‌
(sem impressão) Marceneiro de largura zero &zwj; ‍ ‍
Limitações de entrada
Se o seu teclado ou software de edição não incluir o caractere que você precisa (ou
se você simplesmente não conseguir encontrá-lo), você pode usar uma entidade de
caractere para ter certeza de obter o caractere desejado. O W3C não endossa essa
prática, então use o caractere apropriado em sua fonte se puder. A TABELA 5-4 lista
alguns caracteres especiais que podem ser menos simples de digitar na fonte.

Juntando tudo
TABELA 5-4. Caracteres especiais e suas referências de caracteres
'
Aspas simples encaracoladas à esquerda ‘ ‘ ‘
'
Aspas simples encaracoladas direitas ’ ’ ’
“
Aspas duplas encaracoladas à esquerda “ “ “
”
Aspas duplas direitas ” ” ”
... Reticências horizontais … … …
© direito autoral &cópia de; © ©
® Marca registrada ® ® ®
™ Marca comercial &troca; ™ …
£ Libra &libra; £ £
¥ Iene ¥ ¥ ¥
€ Euro € € €
– Traço – – –
— Travessão — — —
Uma lista completa de entidades nomeadas HTML e seus pontos de código Unicode
podem ser encontrados como parte da especificação HTML5 em www.w3.org/TR/html5/syntax.
html#named-character-references. Para uma listagem mais amigável de
entidades nomeadas e numéricas, recomendo esta página arquivada no Web
Standards Project: www.webstandards.org/learn/reference/charts/entities.

Até agora, você aprendeu como marcar elementos e conheceu todos os elementos HTML
para adicionar estrutura e significado ao conteúdo de texto. Agora é só uma questão de
prática. O EXERCÍCIO 5-3 lhe dá a oportunidade de experimentar tudo o que cobrimos
até agora: elementos de estrutura de documentos, elementos de agrupamento (bloco),
elementos de fraseado (inline), elementos de seção e entidades de caractere. Divirta-se!

Juntando tudo
EXERCÍCIO 5-3. A página de notícias do Black Goose Bistro
Agora que você foi apresentado a todos os elementos de texto, você pode colocá-los em prática
marcando a página de notícias do site Black Goose Bistro. Obtenha o texto inicial e os arquivos
de marcação finalizados em learningwebdesign.com/5e/materials. Depois de ter o texto, siga
as instruções listadas depois dele. A página resultante é mostrada na FIGURA 5-18.
Notícias do Bistrô Black Goose
Casa
Cardápio
Notícia
Contato
Itens do menu de verão

DICA DE MARCAÇÃO
postado por BGB, 18 de junho de 2017
O nosso chef tem estado ocupado a preparar o menu perfeito para os meses de verão. Pare para Lembre-se de que recuar cada
experimentar estes aperitivos e pratos principais enquanto os dias ainda são longos.
nível hierárquico em sua fonte
HTML torna o documento mais
fácil de verificar e atualizar
Aperitivos
bolsas de feijão preto posteriormente.
Feijão preto picante e uma mistura de queijos mexicanos envoltos em folhas de massa filo e
assados até dourar. $ 3,95
Napoleões do sudoeste com caranguejo - novo item!

Camadas de carne de caranguejo leve, salsa de feijão e milho, e nossas tortilhas de farinha
artesanal. US$ 7,95
Cursos principais
Sate kebabs de camarão com molho de amendoim

Espetos de camarão marinados em capim-limão, alho e molho de peixe e grelhados na perfeição.
Servido com molho de amendoim picante e arroz de jasmim. US$ 12,95
Frango assado condimentado com banana frita - novo item!

Frango tenro assado lentamente na churrasqueira, temperado com molho picante e perfumado e
servido com banana frita e manga fresca. US$ 12,95
Baixo e devagar
postado por BGB, 15 de novembro de 2016
<p>Esta semana estou <em>extremamente</em> animado com uma nova técnica NOTA
culinária chamada <dfn><i>sous vide</i></dfn>. No cozimento em <i>sous vide</i>, você
submerge o alimento (geralmente selado a vácuo em plástico) em um banho-maria que é ajustado O parágrafo “Low and Slow” já está
com precisão para a temperatura desejada para a qual você deseja que o alimento seja cozido. Em marcado com os elementos inline
seu livro, <cite>Cooking for Geeks</cite>, Jeff Potter descreve isso como <q>poaching de temperatura do EXERCÍCIO 5-2).
ultrabaixa.</q></p>
<p>No próximo mês, serviremos <b><i>Sous Vide</i> Salmão com Dill Hollandaise</b>. Para
reservar um lugar na mesa do chef, entre em contato conosco antes de <time datetime="20161130">30
de novembro</time>.</p>
Localização: Baker's Corner, Seekonk, MA

Horário: terça a sábado, das 11h às 23h
Todos os direitos autorais de conteúdo 2017, Black Goose Bistro e Jennifer Robbins
ÿ

Juntando tudo
EXERCÍCIO 5-3. Contínuo
e não se sobreponha. Por fim, vamos identificar as seções com id

atributos. Nomeie o primeiro como “aperitivos” e o segundo como “pratos
principais”.
7. Com nossas seções no lugar, agora podemos marcar o conteúdo.

Estamos reduzidos a h3 para os títulos em cada seção. Escolha os elementos
de lista mais apropriados para descrever os nomes dos itens de menu e suas
descrições. Marque as listas e cada item dentro das listas.
8. Agora podemos adicionar alguns detalhes. Classifique cada preço como “preço”
usando elementos de extensão .
9. Dois dos pratos são novidades. Altere os hífens duplos para um caractere de travessão
e marque “novo item!” como “fortemente importante”. Classifique o título de cada
novo prato como “newitem” (use o elemento dt existente ; não há necessidade de
adicionar um intervalo desta vez). Isso nos permite segmentar títulos de menu com a
classe “newitem” e estilizá-los de maneira diferente de outros itens de menu.
10. Isso cuida do primeiro artigo. O segundo artigo é

já marcado principalmente do exercício anterior, mas você deve marcar o cabeçalho
com o cabeçalho apropriado e as informações de data de publicação.
11. Até agora, tudo bem, certo? Agora faça o conteúdo restante que
aplica-se a toda a página um rodapé. Marque cada linha de conteúdo no rodapé
FIGURA 5-18. A página de menu finalizada.
como um parágrafo.
1. Comece adicionando a declaração DOCTYPE para informar aos navegadores que isso é 12. Vamos contextualizar as informações de local e horário colocando-as em um div
um documento HTML5.
chamado "sobre". Faça com que os rótulos “Localização” e “Horas” apareçam
2. Adicione primeiro todos os elementos da estrutura do documento (html, head, em uma linha, adicionando quebras de linha após eles. Marque as horas com o
meta, título e corpo). Dê ao documento o título “The Black Goose Bistro News”. tempo
elemento (você não precisa das partes de data ou fuso horário).
3. A primeira coisa que faremos é identificar o cabeçalho de nível superior e a lista 13. Por fim, as informações de direitos autorais geralmente são “letras pequenas” em um
de links como o cabeçalho do documento, envolvendo-os em um elemento de documento, então marque-o de acordo. Como toque final, adicione um símbolo de
cabeçalho (não se esqueça da tag de fechamento). Dentro do cabeçalho, o título copyright após a palavra “copyright” usando o teclado ou a tecla © entidade
deve ser um h1 e a lista de links deve ser uma lista não ordenada (ul). Não se personagem.
preocupe em fazer os links dos itens da lista; vamos começar a vincular no próximo Salve como bistro_news.html e verifique sua página em um navegador moderno. Você
capítulo. Dê mais significado à lista identificando-a como a navegação principal do site também pode enviá-lo para validator.nu e certificar-se de que é válido (é uma ótima
(nav). maneira de detectar erros). Como você fez?
4. A página de notícias tem duas postagens intituladas "Itens do menu de verão" e "Baixa
e lenta". Marque cada um como um artigo.
5. Agora vamos colocar o primeiro artigo em forma. Vamos criar um cabeçalho para este DICAS DE MARCAÇÃO
artigo que contenha o cabeçalho (h2 desta vez porque descemos na hierarquia do
documento) e as informações de publicação (p). Identifique a data de publicação do • Escolha o elemento que melhor se adapta ao significado do texto
artigo com o elemento tempo , assim como no EXERCÍCIO 5-2. selecionado.
• Não se esqueça de fechar os elementos com tags de fechamento.

6. O conteúdo após o cabeçalho é um parágrafo simples. No entanto, o menu tem
• Coloque todos os valores de atributo entre aspas para maior clareza.
algumas coisas interessantes acontecendo. Está dividido em duas seções
• “Copiar e colar” é seu amigo ao adicionar a mesma marcação a vários
conceituais (Aperitivos e Pratos Principais), então marque-as como elementos da
elementos. Apenas certifique-se de que o que você copiou está correto
seção. Tenha cuidado para que a tag final da seção de fechamento (</section>)
antes de colá-lo em todo o documento.
apareça antes da tag de fechamento do artigo (</article>) para que os elementos
sejam aninhados corretamente

Teste-se
TESTE-SE
Você estava prestando atenção? Aqui está um conjunto rápido de perguntas para descobrir.
Encontre as respostas no Apêndice A. Quer mais prática?
Tente marcar seu próprio currículo.

1. Adicione a marcação para inserir uma quebra temática entre estes parágrafos:
Comece com o texto bruto e adicione
<p>As pessoas que me conhecem sabem que adoro cozinhar.</p> elementos de estrutura de documentos,
elementos de agrupamento de conteúdo
<p>Criei este site para compartilhar algumas das minhas receitas favoritas.</p> e elementos embutidos como fizemos em
EXERCÍCIO 5-3. Se você não vir um

2. Qual é a diferença entre um blockquote e um elemento q ?
elemento que corresponda às suas
informações corretamente, tente criar um
usando um div ou um span.
3. Qual elemento exibe o espaço em branco exatamente como é digitado na fonte

documento?
4. Qual é a diferença entre um elemento ul e um ol ?
5. Como você remove os marcadores de uma lista não ordenada? (Seja geral, não
específico.)
6. Que elemento você usaria para marcar “W3C” e fornecer seu nome completo (World
Wide Web Consortium)? Você pode escrever a marcação completa?
7. Qual é a diferença entre dl e dt?
8. Qual é a diferença entre id e class?
9. Qual é a diferença entre um artigo e uma seção?

Revisão de elemento: elementos de texto
REVISÃO DE ELEMENTO: ELEMENTOS DE TEXTO
Os atributos globais se aplicam a todos os elementos de texto. Atributos adicionais são listados em seus respectivos elementos.
Seções da página Rompe
Morada Informações de contato do autor br Quebra de linha
artigo Conteúdo autônomo wbr Quebra de palavras
a parte, de lado
Conteúdo tangencial (barra lateral)
Elementos e atributos de frase
rodapé Conteúdo Relacionado
abrev. Abreviação
cabeçalho Conteúdo introdutório
b Atenção visual adicionada (negrito)
navegação
Navegação Primária
seção Grupo de conteúdo conceitualmente relacionado bdi Isolamento bidirecional
bdo Substituição bidirecional
citar Citação
código
Conteúdo do título Exemplo de código
dados
h1...h6 Títulos, níveis 1 a 6 Equivalente legível por máquina
del Texto excluído
citar O URL do conteúdo citado.
Agrupando elementos e atributos de conteúdo data hora Especifica a data e hora de uma alteração
dfn
bloco de citação Bloco de citação Definindo termo
em
citar O URL do conteúdo citado Ênfase no estresse
eu
div Divisão genérica Voz alternativa (itálico)
ins Texto inserido
legenda Imagem ou recurso relacionado
Descrição de texto de uma figura

citar O URL do conteúdo citado
da figura
hora Quebra temática no nível do parágrafo
data hora Especifica a data e hora de uma alteração
(regra horizontal) kbd
Entrada do teclado
a Principal Área de conteúdo principal da página ou aplicativo marca Texto destacado
p Parágrafo q Cotação em linha curta
pré Texto pré-formatado citar O URL do conteúdo citado
rubi Seção contendo texto rubi
rp Parênteses em texto rubi

Listar elementos e atributos rt Anotação Ruby
dd Definição s
Riscado; texto incorreto
dl Lista de definições amostra Saída de amostra
dt Prazo pequena
Anotação; “pequenas letras”
li período Frase genérica do texto

Item de lista (para ul e ol)
sub forte Forte importância
valor Fornece um número para um li em um ol
ol Lista ordenada Subscrito

e aí? Sobrescrito
invertido Numerar a lista na ordem inversa
Tempo Dados de tempo legíveis por máquina
começar Fornece o número inicial para a lista
data hora Fornece data/hora legível por máquina
ul Lista não ordenada data de publicação Indica que o tempo se refere à publicação
você
Atenção adicionada (sublinhado)

CAPÍTULO
ADICIONANDO LINKS 6
Se você estiver criando uma página para a web, é provável que queira vincular a outras páginas e NESTE CAPÍTULO
recursos da web, seja em seu próprio site ou no de outra pessoa. A vinculação, afinal, é o que a web
Link para páginas externas
tem tudo a ver. Neste capítulo, veremos a marcação que faz os links funcionarem — links para
outros sites, para seu próprio site e dentro de uma página. Há um elemento que torna a ligação Vinculando a documentos em seu
possível: a âncora (a). próprio servidor
<a>…</a> Vinculando a um ponto específico
Elemento âncora (link de hipertexto) em uma página
Para fazer uma seleção de texto em um link, basta envolvê-lo nas tags <a>...</a> de abertura e Segmentação de novas janelas
fechamento e usar o atributo href para fornecer o URL da página de destino. O conteúdo do
elemento âncora torna-se o link de hipertexto. Aqui está um exemplo que cria um link para o site da
O'Reilly Media:
<a href="http://www.oreilly.com">Acesse o site da O'Reilly Media </a>

Para tornar uma imagem um link, basta colocar o elemento img no elemento âncora:
<a href="http://www.oreilly.com"><img src="tarsierlogo.gif"

alt="O'Reilly Media site"></a>
A propósito, você pode colocar qualquer elemento de conteúdo HTML em uma âncora para torná-lo
um link, não apenas imagens.
Quase todos os navegadores gráficos exibem o texto vinculado em azul e sublinhado por padrão.
DICA DE USABILIDADE
Alguns navegadores mais antigos colocam uma borda azul em torno das imagens vinculadas, mas
a maioria dos atuais não. Os links visitados geralmente são exibidos em roxo. Os usuários podem Uma palavra de cautela: se você optar
alterar essas cores nas preferências do navegador e, é claro, você pode alterar a aparência dos por alterar as cores dos links, mantenha-
links de seus sites usando folhas de estilo. Mostrarei como no Capítulo 13, Cores e Planos de as consistentes em todo o site para não
confundir seus usuários.
Fundo.
Quando um usuário clica ou toca no texto ou imagem vinculado, a página especificada no elemento
âncora é carregada na janela do navegador. A amostra de marcação de imagem vinculada mostrada
anteriormente pode se parecer com a FIGURA 6-1.
113
O atributo href
FIGURA 6-1. Quando um usuário clica ou toca no texto ou imagem vinculado, a página especificada
no elemento âncora é carregada na janela do navegador.
O ATRIBUTO HREF
Você precisará informar ao navegador para qual documento vincular, certo? O href
(referência de hipertexto) fornece o endereço da página ou recurso (sua URL) para o
navegador. A URL deve sempre aparecer entre aspas.
Na maioria das vezes você apontará para outros documentos HTML; no entanto, você
NUM RELANCE
também pode apontar para outros recursos da Web, como arquivos de imagens, áudio e vídeo.
Estrutura de âncora
Como não há muito para colocar tags de âncora em algum conteúdo, o verdadeiro truque
A estrutura simplificada do elemento âncora para vincular está em obter o URL correto. Há duas maneiras de especificar o URL:
é a seguinte:
<a href="url">conteúdo vinculado </ a> URLs absolutos
Os URLs absolutos fornecem o URL completo do documento, incluindo o protocolo

(http:// ou https://), o nome do domínio e o nome do caminho, conforme necessário.
Você precisa usar uma URL absoluta ao apontar para um documento na web (ou seja,
não em seu próprio servidor):
DICA DE MARCAÇÃO href="http://www.oreilly.com/"
Disputa de URL Às vezes, quando a página para a qual você está vinculando tem um nome de caminho
de URL longo, o link pode parecer bastante confuso (FIGURA 6-2). Apenas tenha em
Se você estiver vinculando a uma página
com um URL longo, é útil copiar o URL da mente que a estrutura ainda é um elemento de contêiner simples com um atributo.
barra de ferramentas de localização em Não deixe o nome do caminho longo intimidá-lo.
seu navegador e colá-lo em seu documento.
URLs relativos
Dessa forma, você evita digitar errado um
único caractere e quebrar todo o link. URLs relativos descrevem o nome do caminho para um arquivo relativo ao documento
atual. URLs relativos podem ser usados quando você está vinculando a outro documento
em seu próprio site (ou seja, no mesmo servidor). Ele não requer o protocolo ou nome de
domínio, apenas o nome do caminho:
href="receitas/index.html"
Neste capítulo, adicionaremos links usando URLs absolutos e relativos ao meu site de
culinária, Jen's Kitchen (veja a FIGURA 6-3). URLs absolutos são fáceis, então vamos tirá-los
do caminho primeiro.

Links para páginas na Web
Abrindo a etiqueta de ancoragem
<a href="https://www.amazon.com/Bequet-Gourmet-Caramel-24oz
-Celtic/dp/B00GZEU10Y/ref=sr_1_1_a_it?ie=UTF8&qid=1467055107&s
r=8-1&keywords=bequet">Bequet Caramels < /a>
URL Texto vinculado Fechando a etiqueta de ancoragem

TENTE
Trabalhando junto com

FIGURA 6-2. Um exemplo de um URL longo. Embora possa fazer com que a marca âncora Cozinha da Jen
pareça confusa, a estrutura é a mesma.
LINK PARA PÁGINAS NA WEB
Muitas vezes, você desejará criar um link para uma página que encontrou na web.
Isso é conhecido como um link externo porque vai para uma página fora do seu próprio
servidor ou site. Para criar um link externo, forneça a URL absoluta, começando com
http:// (o protocolo). Isso informa ao navegador: “Vá para a web e obtenha o seguinte
documento”.
Quero adicionar alguns links externos à página inicial do Jen's Kitchen (FIGURA 6-3).
Primeiro, vou vincular o item da lista “The Food Network” ao site www.foodnetwork.com . FIGURA 6-3. A cozinha da Jen
página.
Marquei o texto do link em um elemento âncora adicionando tags âncora de abertura
e fechamento. Observe que adicionei as tags de âncora dentro do elemento list item Todos os arquivos para a cozinha da Jen
(li) . Isso porque apenas elementos li podem ser filhos de um elemento ul ; colocar site estão disponíveis on-line em
um elemento a diretamente dentro do elemento ul seria um HTML inválido. learningwebdesign.com/5e/

materiais. Baixe todo o
diretório, certificando-se de não alterar a forma
<li><a>A Rede Alimentar </a></li> como seu conteúdo é organizado.
As páginas não são muito interessantes, mas
Em seguida, adiciono o atributo href com a URL completa do site:
elas lhe darão a chance de desenvolver suas
<li><a href="http://www.foodnetwork.com">A Food Network</a></li> habilidades de linkagem.
E voilà! Agora “The Food Network” aparece como um link e leva meus visitantes a A marcação resultante para todos os
exercícios também é fornecida.
esse site quando eles clicam ou tocam nele. Experimente no EXERCÍCIO 6-1.
EXERCÍCIO 6-1. Faça um link externo
Abra o arquivo index.html da pasta jenskitchen . Faça o link do item da lista “Epicurious” para sua página da web em
www.epicurious.com, seguindo meu exemplo de link do Food Network:
<ul>
<li><a href="http://www.foodnetwork.com/">A Food Network</a></li>
<li>Epicuro</li>
</ul>
Quando terminar, salve index.html e abra-o em um navegador. Se você tiver uma conexão com a Internet,
clique no novo link e vá para o site Epicurious. Se o link não o levar até lá, volte e certifique-se de que não perdeu
nada na marcação.
6. Adicionando Links 115

Vinculando em seu próprio site
LINK DO SEU PRÓPRIO SITE
Uma grande parte dos links que você faz é entre as páginas do seu próprio site: da página inicial às
páginas da seção, das páginas da seção às páginas de conteúdo e assim por diante. Nesses casos,
você pode usar um URL relativo—um que chame uma página no
seu próprio servidor.
Sem “http://”, o navegador procura no servidor atual pelo documento vinculado. Um nome de
caminho, a notação usada para apontar para um arquivo ou diretório específico, (consulte a Nota)
NOTA informa ao navegador onde encontrar o arquivo. Os nomes de caminho da Web seguem a convenção
Unix de separar nomes de diretórios e arquivos com barras (/). Um nome de caminho relativo
Em PCs e Macs, os arquivos são organizados
descreve como chegar ao documento vinculado a partir do local do documento atual.
em “pastas”, mas no mundo do
desenvolvimento web, é mais comum referir-
se ao termo equivalente e mais técnico Os nomes de caminhos relativos podem ser um pouco complicados. Na minha experiência de ensino,
“diretório”. Uma pasta é apenas um diretório
nada atrapalha os iniciantes como escrever nomes de caminhos relativos, então vamos dar um passo
com um ícone bonitinho.
de cada vez. Eu recomendo que você faça os EXERCÍCIOS 6-2 a 6-8 à medida que avançamos.
Todos os exemplos de nome de caminho nesta seção são baseados na estrutura do site Jen's
Kitchen mostrada na FIGURA 6-4. Quando você diagrama a estrutura dos diretórios de um site,
geralmente acaba parecendo uma árvore invertida com o diretório raiz no topo da hierarquia. Para o
site Jen's Kitchen, o diretório raiz é denominado jenskitchen. Para outra maneira de ver isso, há
também uma visão do diretório e subdiretórios conforme aparecem no Finder no meu Mac.
Nome de caminho importante
Não é
Ao escrever nomes de caminhos relativos,
siga estas regras para evitar
erros:
/
(jenskitchen)
• Não use barras invertidas (\). Os nomes de
caminho de URL da Web usam apenas
barras (/).
• Não comece com o nome da unidade imagens/ receitas/
(D:, C:, etc.). Embora suas páginas

about.html index.html
sejam vinculadas com sucesso enquanto
estiverem em seu próprio computador,
uma vez que sejam carregadas no servidor
da Web, o nome da unidade é irrelevante massa/
jenskitchen.gif colher.gif
e quebrará seus links.
salmão.html tapenade.html
• Não comece com file://. Isso também

indica que o arquivo é local e
faz com que o link quebre quando é
no servidor.
cuscuz.html linguine.html
FIGURA 6-4. Um diagrama da estrutura do site jenskitchen.

Vinculando dentro de um diretório
A URL relativa mais direta aponta para outro arquivo dentro do mesmo diretório. Ao
Um link para um nome de arquivo
vincular a um arquivo no mesmo diretório, você precisa fornecer apenas o nome do
indica que o arquivo vinculado é
arquivo (seu nome de arquivo). Quando a URL é apenas um nome de arquivo, o
servidor procura o arquivo no diretório atual (ou seja, o diretório que contém o no mesmo diretório que o
documento com o link). documento atual.
Neste exemplo, quero fazer um link da minha página inicial (index.html) para uma
página de informações gerais (about.html). Ambos os arquivos estão no mesmo
diretório (jenkitchen). Assim, da minha página inicial, posso criar um link para a página
de informações simplesmente fornecendo o nome do arquivo na URL (FIGURA 6-5):
<a href="about.html">Sobre o site...</a>
O EXERCÍCIO 6-2 lhe dá a chance de marcar você mesmo um link simples.
Os documentos index.html /
e about.html estão no (jenskitchen)
mesmo diretório.
imagens/ receitas/
massa/
De index.html:
<a href="about.html">Sobre esta página...</a>
O servidor procura o arquivo no mesmo diretório. cuscuz.html linguine.html
FIGURA 6-5. Escrevendo uma URL relativa para outro documento no mesmo diretório.
EXERCÍCIO 6-2. Link no mesmo diretório
Abra o arquivo about.html da pasta jenskitchen . Faça o parágrafo “Voltar para a página inicial”
na parte inferior da página com um link para index.html. O elemento âncora deve estar contido no
elemento p :
<p>Voltar para a página inicial</p>

Quando terminar, salve about.html e abra-o em um navegador. Você não precisa de uma conexão
com a Internet para testar os links localmente (ou seja, em seu próprio computador). Clicar no link
deve levá-lo de volta à página inicial.

Vinculando a um diretório inferior
Mas e se os arquivos não estiverem no mesmo diretório? Você deve fornecer instruções
ao navegador incluindo o nome do caminho na URL. Vamos ver como isso funciona.
Voltando ao nosso exemplo, meus arquivos de receita são armazenados em um

subdiretório chamado receitas. Eu quero fazer um link de index.html para um arquivo nas receitas
diretório chamado salmão.html. O nome do caminho na URL diz ao navegador para
procurar no diretório atual um diretório chamado receitas e, em seguida, procurar o
arquivo salmon.html (FIGURA 6-6):
<li><a href="recipes/salmon.html"> Salmon ao alho</a></li>
salmon.html é um /
diretório menor que (jenskitchen)
index.html.
imagens/ receitas/
massa/
De index.html:
<a href="recipes/salmon.html"> Salmão ao alho</a>
O servidor procura no mesmo diretório que o

cuscuz.html linguine.html
documento atual para o diretório de receitas. Lá encontra salmon.html.
FIGURA 6-6. Escrevendo uma URL relativa para um documento que está um nível de
diretório abaixo do documento atual.
Tente vincular a um arquivo em um diretório no EXERCÍCIO 6-3.
EXERCÍCIO 6-3. Link para um arquivo em um diretório
Abra o arquivo index.html da pasta jenskitchen . Faça o link do item da lista “Tapenade (Olive
Spread)” para o arquivo tapenade.html no diretório de receitas . Lembre-se de aninhar os
elementos corretamente:
<li>Tapenade (pasta de azeitona)</li>

Quando terminar, salve index.html e abra-o em um navegador. Você deve conseguir clicar no novo
link e ver a página da receita de tapenade. Caso contrário, certifique-se de que sua marcação
esteja correta e que a estrutura de diretórios para jenskitchen corresponda aos exemplos.

Agora vamos fazer um link para o arquivo chamado couscous.html, que está localizado
no subdiretório pasta . Tudo o que precisamos fazer é fornecer as direções através de
dois subdiretórios (receitas, depois pasta) para cuscuz.html (FIGURA 6-7):
<li><a href="recipes/pasta/couscous.html">Cuscuz...</a></li> Quando você vincula a um
Os diretórios são separados por barras. A marca âncora resultante informa ao arquivo em um diretório
navegador: “Procure no diretório atual um diretório chamado receitas. Lá você inferior, o nome do caminho
encontrará um diretório chamado pasta, e lá está o arquivo couscous.html.” contém os nomes de cada
subdiretório que você
Agora que fizemos dois níveis de diretório, você deve ter uma ideia de como os nomes
percorre para chegar ao arquivo.
de caminho são montados. Esse mesmo método se aplica a nomes de caminhos
relativos que fazem drill down em qualquer número de diretórios. Basta começar com
o nome do diretório que está no mesmo local do arquivo atual e seguir cada nome de
diretório com uma barra até chegar ao nome do arquivo vinculado.
couscous.html é dois diretórios

/
menores que index.html.
(jenskitchen)
imagens/ receitas/
massa/
De index.html:
<a href="recipes/pasta/couscous.html">Cuscuz</a>
O servidor procura no mesmo diretório que o documento

atual o diretório de receitas e, em seguida, procura o
diretório de massas. cuscuz.html linguine.html
FIGURA 6-7. Gravar uma URL relativa em um documento que esteja dois níveis de diretório
abaixo do documento atual. Você pode tentar no EXERCÍCIO 6-4.
EXERCÍCIO 6-4. Vincular dois diretórios para baixo
Abra o arquivo index.html da pasta jenskitchen . Faça o link do item da lista “Linguine with Clam
Sauce” para o arquivo linguine.html no diretório pasta :
<li>Linguine com molho de amêijoas</li>

Quando terminar, salve index.html e abra-o em um navegador. Clique no novo link para obter a
deliciosa receita.

Vinculando a um diretório superior

Até aí, tudo bem, certo? Agora fica mais interessante. Desta vez, iremos na outra direção e faremos
um link da página da receita de salmão para a página inicial, que está um nível de diretório acima.
Cada ../ no início do nome
do caminho diz ao navegador
No Unix, existe uma convenção de nome de caminho apenas para este propósito, a “barra ponto-
para subir um nível de ponto” (../). Quando você inicia um nome de caminho com ../, é o mesmo que dizer ao navegador
diretório para procurar o “fazer backup de um nível de diretório” e seguir o caminho para o arquivo especificado. Se você
arquivo. estiver familiarizado com a navegação de arquivos na área de trabalho, é útil saber que um “../” tem
o mesmo efeito que clicar no botão Para cima no Windows Explorer ou no botão de seta para a
esquerda no Finder no macOS.
Vamos começar fazendo um link de salmon.html de volta para a página inicial (index.
html). Como salmon.html está no subdiretório de receitas , precisamos voltar ao diretório jenskitchen
para encontrar index.html. Esse nome de caminho informa ao navegador para “fazer backup de um
nível” e, em seguida, procure nesse diretório por index.html
(FIGURA 6-8):
<p><a href="../index.html">[Voltar para a página inicial]</a></p>
Observe que o ../ representa o nome do diretório superior e não precisamos escrever jenskitchen
no nome do caminho.
index.html é um diretório /
maior que salmon.html. (jenskitchen)
cozinha
imagens/ receitas/
../
receitas
massa/
De salmon.html: massa
<a href="../index.html">[Voltar para a página inicial]</a>

O ../ diz ao servidor para fazer backup de um nível (para o jenskitchen
diretório) para procurar o documento index.html. cuscuz.html linguine.html
FIGURA 6-8. Escrevendo uma URL relativa para um documento que é um nível de
diretório acima do documento atual.
Tente adicionar um nome de caminho ponto-ponto-barra a um diretório superior no EXERCÍCIO 6-5.
Mas que tal fazer um link para a página inicial de couscous.html? Você consegue adivinhar como
sairia de dois níveis de diretório? Simples: basta usar o ponto-ponto-barra duas vezes (FIGURA 6-9).

Um link na página couscous.html de volta à página inicial (index.html) ficaria assim:
<p><a href="../../index.html">[Voltar para a página inicial]</a></p>

NOTA
O primeiro ../ faz backup do diretório de receitas ; o segundo ../ faz backup no diretório de
nível superior (jenkitchen), onde index.html pode ser encontrado. Novamente, não há Confesso que às vezes ainda canto silenciosamente
“subir-um-nível, subir-um-nível” para cada ../ ao
necessidade de escrever os nomes dos diretórios; o ../ faz tudo.
tentar decifrar uma URL relativa complicada. Isso
Agora você tenta (EXERCÍCIO 6-6). me ajuda a resolver as coisas.
index.html é dois diretórios /

maior que couscous.html. (jenskitchen)
cozinha
imagens/ receitas/
../
receitas
massa/
salmão.html
../
De cuscuz.html: massa
<a href="../../index.html">[Voltar para a página inicial]</a>
O ../../ diz ao servidor para fazer backup de dois níveis (para receitas
depois jenskitchen) para procurar o documento index.html. cuscuz.html linguine.html
FIGURA 6-9. Escrevendo uma URL relativa para um documento que é dois níveis de diretório mais alto que o
documento atual.
EXERCÍCIO 6-5. Link para um diretório superior
Abra o arquivo tapenade.html do diretório de receitas . Na parte inferior da página, você encontrará este
parágrafo:
<p>[Voltar para a página inicial]</p>

Usando a notação descrita nesta seção, faça este link de texto de volta para a página inicial
(index.html), localizada um nível de diretório acima.
EXERCÍCIO 6-6. Vincule dois níveis de diretório
OK, agora é a sua vez de tentar. Abra o arquivo linguine.html e faça o link do último parágrafo
para a página inicial usando ../../ como eu fiz:
<p>[Voltar para a página inicial]</p>

Quando terminar, salve o arquivo e abra-o em um navegador. Você deve ser capaz de criar um link para a
página inicial.

Vinculação com nomes de caminho relativos da raiz do site
Todos os sites têm um diretório raiz, o diretório que contém todos os diretórios e arquivos do site.
Até agora, todos os nomes de caminho que vimos são relativos ao documento com o link. Outra
Os links relativos à raiz maneira de escrever um nome de caminho relativo é iniciar no diretório raiz e listar os nomes dos
subdiretórios para o arquivo ao qual você deseja vincular. Esse tipo de nome de caminho é
do site geralmente são
conhecido como relativo à raiz do site.
preferidos devido à sua flexibilidade.
Na convenção de nome de caminho do Unix, uma barra (/) no início do nome do caminho indica
que o caminho começa no diretório raiz. O caminho relativo da raiz do site no link a seguir diz:
“Vá para o diretório de nível superior deste site, abra o diretório de receitas e encontre o arquivo
salmon.html
arquivo” (FIGURA 6-10):
<a href="/recipes/salmon.html"> Salmon ao alho</a>
Em nomes de caminho, o diretório raiz /

é sempre identificado por uma barra (/), (jenskitchen)
não pelo nome do diretório.
imagens/ receitas/
massa/
De qualquer documento no site:

<a href="/recipes/salmon.html"> Salmon ao alho</a>
O / no início do nome do caminho informa ao navegador

para iniciar no diretório raiz (jenkitchen). cuscuz.html linguine.html
FIGURA 6-10. Escrevendo uma URL relativa começando no diretório raiz.
Observe que você não precisa (e não deveria) escrever o nome do diretório raiz (jenkitchen) no
AVISO caminho — a barra (/) no início representa o diretório de nível superior no nome do caminho. A
partir daí, basta especificar os diretórios em que o navegador deve procurar.
Os nomes de caminho relativos da raiz do site não funcionarão
em seu computador local, a menos que esteja configurado

como servidor.
Como esse tipo de link começa na raiz para descrever o nome do caminho, ele funciona a partir
de qualquer documento no servidor, independentemente do subdiretório em que esteja localizado.
Os links relativos à raiz do site são úteis para conteúdo que nem sempre está no mesmo
diretório , ou para material gerado dinamicamente. Eles também facilitam copiar e colar links
entre documentos.
No lado negativo, no entanto, os links não funcionarão em sua máquina local, porque serão
relativos ao seu disco rígido. Você terá que esperar até que o site esteja no servidor final para
verificar se os links estão funcionando.

Escrevendo nomes de caminho para imagens
O atributo src no elemento img funciona da mesma forma que o atributo href em âncoras.
Como você provavelmente usará imagens de seu próprio servidor, os atributos src em seus
elementos de imagem serão definidos para URLs relativos.
Vejamos alguns exemplos do site Jen's Kitchen. Primeiro, para adicionar uma imagem à
página index.html , você usaria a seguinte marcação:
<img src="images/jenskitchen.gif" alt="">
A URL diz: “Procure no diretório atual (jenkitchen) as imagens

diretório; lá você encontrará jenskitchen.gif.”
Agora para a pièce de résistance. Vamos adicionar uma imagem ao arquivo couscous.html:
<img src="../../images/spoon.gif" alt="">
Isso é um pouco mais complicado do que vimos até agora. Esse nome de caminho diz ao
navegador para subir dois níveis de diretório até o diretório de nível superior e, uma vez lá,
procurar no diretório de imagens por uma imagem chamada colher.gif. Uau!
Claro, você pode simplificar esse caminho seguindo a rota relativa da raiz do site, caso em
que o nome do caminho para colher.gif (e qualquer outro arquivo no diretório de imagens )
pode ser acessado assim:
<img src="/images/spoon.gif" alt="">
A desvantagem é que você não verá a imagem no lugar até que o site seja carregado no
servidor, mas facilita a manutenção quando ela estiver lá.
EXERCÍCIO 6-7. Tente mais alguns
Antes de prosseguirmos, você pode tentar escrever mais alguns URLs relativos para ter certeza
de que realmente entendeu. Você pode escrever suas respostas aqui no livro ou, se quiser testar
sua marcação para ver se funciona, faça alterações nos arquivos reais. NOTA
Observe que o texto mostrado aqui não está incluído nas páginas de exercícios – você precisará
adicioná-lo antes de criar o link (por exemplo, digite “Ir para a receita do Tapenade” para a primeira A maioria dos nomes de caminho no
pergunta). O código final está nos arquivos de exercícios finalizados na pasta de materiais deste EXERCÍCIO 6-7 podem ser relativos à raiz do
capítulo. Também os incluí no Apêndice A. site, mas escreva-os em relação ao documento
1. Crie um link em salmon.html para tapenade.html: listado para a prática.
Acesse a receita de Tapenade

2. Crie um link em couscous.html para salmon.html:
Experimente com Salmão Alho.
3. Crie um link em tapenade.html para linguine.html:
Experimente o Linguine com Molho de Amêijoas
4. Crie um link em linguine.html para about.html:

Sobre a cozinha da Jen
5. Crie um link em tapenade.html para www.allrecipes.com:
Acesse Allrecipes.com

Vinculando a um ponto específico em uma página
Você sabia que pode criar um link para um ponto específico em uma página da web? Isso é útil para
fornecer atalhos para informações na parte inferior de uma página de rolagem longa ou para voltar ao
topo de uma página com apenas um clique ou toque. A vinculação a um ponto específico da página
também é conhecida como vinculação a um fragmento de documento.
Vincular a um ponto específico em uma página é um processo de duas partes. Primeiro, identifique o
NOTA destino e, em seguida, faça um link para ele. No exemplo a seguir, crio um índice alfabético na parte
superior da página que vincula cada seção alfabética de uma página de glossário (FIGURA 6-11).
O link para outro ponto na mesma página funciona
Quando os usuários clicam na letra H, eles pulam para o cabeçalho “H” na parte inferior da página.
bem para páginas longas e rolantes, mas o efeito
pode ser perdido em uma web curta
página.
Passo 1: Identificando o destino
Eu gosto de pensar neste passo como plantar uma bandeira no documento para que eu possa voltar a
ele facilmente. Para criar um destino, use o atributo id para dar ao elemento alvo no documento um
nome único (que é “único” pois o nome pode aparecer apenas uma vez no documento, não “único”
como em funky e interessante).
Na linguagem da web, este é o identificador do fragmento.
Você pode se lembrar do atributo id do Capítulo 5, Marcando texto, onde o usamos para nomear
elementos genéricos div e span . Aqui, vamos usá-lo para nomear um elemento para que ele possa
servir como um identificador de fragmento, ou seja, o destino de um link.
Aqui está uma amostra da fonte para a página do glossário. Como quero que os usuários possam
vincular diretamente ao cabeçalho “H”, adicionarei o atributo id a ele e darei o valor “startH” (FIGURA
6-11 1):
<h2 id="startH">H</h2>
Etapa 2: vincular ao destino

Com o identificador no lugar, agora posso fazer um link para ele.
No topo da página, crio um link para o fragmento “startH” 2. Como para qualquer link, uso o elemento
Os nomes dos a com o atributo href para fornecer a localização do link. Para indicar que estou vinculando a um
fragmentos são fragmento, uso o símbolo octothorpe (#), também chamado de símbolo de hash, libra ou número, antes
precedidos por um símbolo octotorpedo nome do fragmento:

(#).
<p>... F | G | <a href="#startH">H</a> | eu | J ...</p>
E é isso. Agora, quando alguém clicar no H da listagem no topo da página, o navegador pulará para
baixo e exibirá a seção começando com o título “H” 3.

1 Identifique o destino usando o atributo id .

<h2 id="startH">H</h2>
<dl>
<dt>hexadecimal</dt> DICA DE USABILIDADE
...
Para o topo!
2 Crie um link para o destino. O # antes do nome é necessário para identificá-lo
É uma prática comum adicionar um link
como um fragmento e não como um nome de arquivo.
de volta ao topo da página ao criar um
<p>... | F | G | <a href="#startH">H</a> | eu | J ...</p> link para uma página longa de texto. Isso
alivia a necessidade de os usuários
3
rolarem para trás após cada link.
FIGURA 6-11. Link para um destino específico (um fragmento) em uma única página da web.
Vinculando a um fragmento em outro documento

Você pode vincular a um fragmento em outro documento adicionando o nome do NOTA
fragmento ao final da URL (absoluta ou relativa). Por exemplo, para criar um link
Alguns desenvolvedores ajudam seus irmãos e irmãs
para o cabeçalho “H” da página do glossário de outro documento nesse diretório,
adicionando ids proativamente como âncoras no
a URL ficaria assim:
início de qualquer seção temática de conteúdo
<a href="glossary.html#startH">Consulte o Glossário, letra H</a> (dentro de um nível razoável e dependendo do site).
Dessa forma, outras pessoas podem vincular de

Você pode até vincular destinos específicos em páginas de outros sites colocando
volta a qualquer seção em seu conteúdo.
o identificador de fragmento no final de um URL absoluto, assim:
<a href="http://www.example.com/glossary.html#startH">Consulte o Glossário,
letra H</a>

Segmentação de uma nova janela do navegador
EXERCÍCIO 6-8. Claro, você não tem nenhum controle sobre os fragmentos nomeados nas páginas
Vinculando a um fragmento da web de outras pessoas. Os pontos de destino devem ser inseridos pelo autor
desses documentos para que estejam disponíveis para você. A única maneira de
saber se eles estão lá e onde estão é “Visualizar código-fonte” para a página e procurá-
Quer praticar links para destinos específicos?
los na marcação. Se os fragmentos em documentos externos se moverem ou
Abra glossary.html na pasta de materiais deste
desaparecerem, a página ainda será carregada; o navegador irá apenas para o topo
capítulo.
Parece exatamente com o documento em
da página como faz para links regulares.
FIGURA 6-11.
O EXERCÍCIO 6-8 oferece a oportunidade de adicionar links a fragmentos na página
1. Identifique o h2 “A” como destino de um link do glossário de exemplo.
nomeando-o “startA” com um atributo id :
<h2 id="startA">A</h2> SEGMENTANDO UMA NOVA JANELA DO NAVEGADOR

2. Faça a letra A na parte superior do
page um link para o fragmento identificado. Um problema em colocar links em sua página é que, quando as pessoas clicam
Não esqueça do #:
neles, elas podem nunca mais voltar ao seu conteúdo. A solução tradicional para
<a href="#startA">A</a> esse dilema tem sido abrir a página vinculada em uma nova janela do navegador.
Repita os passos 1 e 2 para cada letra na Dessa forma, seus visitantes podem conferir o link e ainda ter seu conteúdo disponível
parte superior da página até que você onde o deixaram.
realmente saiba o que está fazendo (ou até
não aguentar mais). Você também pode Esteja ciente de que abrir novas janelas do navegador pode causar problemas na
ajudar os usuários a voltar ao topo da página. experiência do usuário do seu site. Abrir novas janelas é problemático para
acessibilidade e pode ser confuso para alguns usuários. Eles podem não ser capazes
3. Faça do título “Glossário” um destino de dizer que uma nova janela foi aberta ou podem nunca encontrar o caminho de
chamado “topo”:
volta para a página original. No mínimo, novas janelas podem ser percebidas como
<h1 id="top">Glossário</h1> um aborrecimento em vez de uma conveniência. Portanto, considere cuidadosamente
4. Adicione um elemento de parágrafo contendo se você precisa de uma nova janela e se os benefícios superam as possíveis desvantagens.
“TOP” no final de cada letra
seção. Faça “TOP” um link para o O método usado para abrir um link em uma nova janela do navegador depende se
identificador que você acabou de fazer no você deseja controlar seu tamanho. Se o tamanho da janela não importa, você pode
topo da página: usar apenas a marcação HTML. No entanto, se você quiser abrir a nova janela com
<p><a href="#top">PARTE SUPERIOR</a></p> dimensões de pixel específicas, precisará usar JavaScript (consulte a barra lateral
“Janelas pop-up” ).
Copie e cole este código no final de cada seção
de letras. Agora seus leitores podem voltar ao
topo da página facilmente em todo o documento.
Janelas pop-up
É possível abrir uma janela do navegador para dimensões específicas e com partes do chrome do
navegador (barras de ferramentas, barras de rolagem, etc.) ativadas ou desativadas, mas você sabe o
que… não vou entrar nisso aqui. Em primeiro lugar, requer JavaScript. Em segundo lugar, na era dos
dispositivos móveis, abrir uma nova janela do navegador em um determinado tamanho de pixel é uma
técnica antiquada. As pessoas geralmente desativam as janelas pop-up de qualquer maneira.
Vale a pena, os pequenos painéis intersticiais que você vê aparecendo em todas as páginas da web
pedindo para você se inscrever em uma lista de e-mails ou mostrando um anúncio são feitos com elementos
HTML e JavaScript, não uma janela de navegador totalmente nova, então isso é um animal totalmente
diferente.
Dito isso, se você tiver um motivo legítimo para abrir uma janela do navegador em um tamanho
específico, vou encaminhá-lo para este tutorial de Peter-Paul Koch no Quirksmode:
www.quirksmode.org/js/popup.html.

Links de e-mail
Para abrir uma nova janela com marcação, use o atributo target no elemento âncora (a) para
informar ao navegador o nome da janela na qual você deseja que o documento vinculado seja
aberto. Defina o valor de target como _blank ou qualquer nome de sua escolha. Lembre-se que
com este método, você não tem controle sobre o tamanho da janela, mas ela geralmente será
aberta como uma nova guia ou em uma nova janela do mesmo tamanho da janela aberta mais
recentemente no navegador do usuário. A nova janela pode ou não ser trazida para a frente
dependendo do navegador e do dispositivo utilizado.
Definir target="_blank" sempre faz com que o navegador abra uma nova janela.
Por exemplo:
<a href="http://www.oreilly.com" target="_blank">O'Reilly</a>
Se você incluir target="_blank" para cada link, cada link abrirá uma nova janela, potencialmente
deixando seu usuário com uma bagunça de janelas abertas. Não há nada de errado com isso,
por si só, desde que não seja usado em demasia.
Outro método é dar à janela de destino um nome específico, que pode ser usado por links Spam-Bots
subsequentes. Você pode dar à janela o nome que quiser (“novo”, “amostra”, o que for), desde
Esteja ciente de que colocar um endereço
que não comece com um sublinhado. O link a seguir abrirá uma nova janela chamada “display”: de e-mail na fonte do documento o torna
suscetível ao recebimento de lixo eletrônico
não solicitado (conhecido como spam). As
<a href="http://www.oreilly.com" target="display">O'Reilly</a>
pessoas que geram listas de spam às vezes
Se você direcionar a janela “exibir” de cada link na página, cada documento vinculado será usam programas de pesquisa automatizados
aberto na mesma segunda janela. Infelizmente, se essa segunda janela ficar oculta atrás da (chamados bots) para vasculhar a web em
busca de endereços de e-mail.
janela atual do usuário, pode parecer que o link simplesmente não funcionou.
Se você quiser que seu endereço de e-mail
seja exibido na página para que os humanos
Você pode decidir qual método (uma nova janela para cada link ou reutilizar janelas nomeadas) possam descobrir, mas os robôs não, você pode
é mais apropriado para seu conteúdo e interface. desconstruir o endereço de uma forma que ainda
seja compreensível para as pessoas – por
exemplo, “você [-at-] example [ponto] com.”
LINKS DE CORREIO Esse truque não funcionará em um mailto
link, porque o endereço de e-mail preciso

Aqui está um pequeno truque de vinculação bacana: o link mailto . Ao usar o protocolo mailto deve ser fornecido como um valor de atributo.
em um link, você pode vincular a um endereço de e-mail. Quando o usuário clica em um mailto Uma solução é criptografar o endereço de e-
link, o navegador abre uma nova mensagem de e-mail pré-endereçada para esse endereço em mail usando JavaScript. O Enkoder Form na
Hivelogic (hivelogic.com/enkoder/) faz isso por
um programa de e-mail designado (consulte a barra lateral “Spam-Bots” ).
você. Basta digitar o texto do link e o endereço
Um exemplo de link mailto é mostrado aqui: de e-mail e o Enkoder gera um código que você
pode copiar e colar em seu documento.
<a href="mailto:alklecker@example.com">Entre em contato com Al Klecker</a>
Como você pode ver, é um elemento âncora padrão com o atributo href . Mas o valor é definido
como mailto:name@address.com. Caso contrário, se você não quiser correr o risco
de receber spam, mantenha seu endereço de e-
O navegador deve ser configurado para iniciar um programa de e-mail, para que o efeito não mail fora do seu documento HTML.
funcione para 100% do seu público. Se você usar o próprio endereço de e-mail como o texto do Usar um formulário de contato é uma boa
alternativa (os formulários da web serão
link, ninguém ficará de fora se a função mailto não funcionar (um bom exemplo de aprimoramento
apresentados no Capítulo 9, Formulários).
progressivo).

Links de telefone
LINKS TELEFÔNICOS
Tenha em mente que os smartphones que as pessoas estão usando para acessar seu site também
podem ser usados para fazer ligações! Por que não economizar um passo para seus visitantes,
permitindo que eles disquem um número de telefone em seu site simplesmente tocando nele na página?
A sintaxe usa o protocolo tel: e é muito simples:
<a href="tel:+01-800-555-1212">Ligue gratuitamente para (800) 555-1212</a>
Quando os usuários móveis tocam no link, o que acontece depende do dispositivo: o Android inicia
o aplicativo do telefone; BlackBerry e IE11 Mobile iniciam a chamada imediatamente; e o iOS abre
uma caixa de diálogo que oferece a opção de ligar, enviar uma mensagem ou adicionar o número
aos Contatos. Os navegadores de desktop podem abrir uma caixa de diálogo para alternar entre
aplicativos (por exemplo, para FaceTime no Safari) ou podem ignorar o link.
Se você não quiser nenhuma interrupção em navegadores de desktop, você pode usar uma regra
CSS que oculta o link para dispositivos não móveis (infelizmente, isso está além do escopo desta
discussão).
Existem algumas práticas recomendadas para o uso de links telefônicos:
• Recomenda-se incluir o número de discagem internacional completo, incluindo o código do país,

para o valor tel: porque não há como saber onde o usuário estará acessando seu site.
• Inclua também o número de telefone no conteúdo do link para que, se o

link não funciona, o número de telefone ainda está disponível.
• Android e iPhone possuem um recurso que detecta números de telefone e os transforma

automaticamente em links. Infelizmente, alguns números de 10 dígitos que não são números
de telefone também podem ser transformados em links. Se o seu documento tiver sequências
de números que podem ser confundidos com números de telefone, você pode desativar a
detecção automática incluindo o seguinte meta
elemento no cabeçalho do seu documento. Isso também impedirá que eles substituam
quaisquer estilos que você aplicou aos links telefônicos.
<meta name="format-detection" content="telephone=no">
TESTE-SE
A lição mais importante deste capítulo é como escrever URLs para links e imagens. Aqui está outra
chance de aprimorar suas habilidades de nome de caminho.
Usando a hierarquia de diretórios mostrada na FIGURA 6-12, escreva a marcação para os links e
gráficos a seguir.
Este diagrama deve fornecer informações suficientes para responder às perguntas. Se você precisar
de trabalho prático para entendê-los, a estrutura de diretórios está disponível no diretório de teste
nos materiais deste capítulo. o

Teste-se
/
(algum site)
diretório raiz (/)
imagens/ exemplos/
index.html tutorial.html
imagens exemplos
pessoas/ lugares/ coisas/
seta.gif bullet.gif instruções.html introdução.html
pessoas lugares coisas
amigos.html família.html canadá.html usa.html acorn.html boot.html coatrack.html
FIGURA 6-12. A estrutura de diretórios para as perguntas “Teste você mesmo”.
documentos são apenas arquivos fictícios e não contêm conteúdo. Eu preenchi o DICA DE MARCAÇÃO
primeiro para você como exemplo. As respostas estão localizadas no Anexo A.

O ../ (ou múltiplos deles) sempre
1. Em index.html (a página inicial do site), escreva a marcação de um link para o aparece no início do nome do caminho
página tutorial.html . e nunca no meio. Se os nomes de
caminho que você escreve tiverem ../
<a href="tutorial.html">...</a> no meio, você fez algo
errado.
2. Em index.html, escreva o elemento âncora para um link para instruções.html.
3. Crie um link para family.html na página tutorial.html.
4. Crie um link para boot.html na página family.html , mas desta vez, comece com o
diretório raiz.
5. Crie um link para a página inicial (index.html) a partir de Instructions.html.

Revisão do elemento: links
6. Crie um link para o site deste livro (learningwebdesign.com) no

arquivo intro.html.
7. Crie um link para instruções.html na página usa.html.
8. Crie um link para a página inicial (index.html) de acorn.html.
Ainda não abordamos o elemento image (img) em detalhes, mas você deve poder preencher
as URLs relativas após o atributo src para especificar a localização dos arquivos de imagem
para esses exemplos.
9. Para colocar o gráfico arrow.gif na página index.html, use este URL:
<img src=" "alt="">
10. Para colocar o gráfico arrow.gif na página intro.html, use este URL:
<img src=" "alt="">
11. Para colocar o bullet.gif gráfico na página friends.html , use este URL:
<img src=" "alt="">
REVISÃO DO ELEMENTO: LINKS
Há realmente apenas um elemento relevante para a criação de links de hipertexto.
Elemento e atributos Descrição
uma
Elemento âncora (link de hipertexto)
href="URL" Localização do arquivo de destino
target=" string de texto" Segmenta uma janela do navegador por nome

CAPÍTULO
ADICIONANDO IMAGENS 7
A explosão da popularidade em massa da web se deveu em parte ao fato de que havia NESTE CAPÍTULO
imagens na página. Antes das imagens, a internet era uma tundra só de texto.
Adicionando imagens com o
As imagens aparecem nas páginas da Web de duas maneiras: incorporadas no conteúdo elemento img
embutido ou como imagens de fundo. Se a imagem fizer parte do conteúdo editorial, como
Acessibilidade da imagem
fotos de produtos, imagens de galeria, anúncios, ilustrações e assim por diante, ela deverá
ser colocada no fluxo do documento HTML. Se a imagem for puramente decorativa, como Adicionando imagens SVG
uma imagem impressionante no plano de fundo do cabeçalho ou uma borda padronizada ao
redor de um elemento, ela deve ser adicionada por meio de Folhas de estilo em cascata. Imagens responsivas
Não só faz sentido colocar imagens que afetam a apresentação em uma folha de estilo, mas
torna o documento mais limpo e acessível e torna o design muito mais fácil de atualizar
posteriormente. Falarei detalhadamente sobre imagens de fundo CSS no Capítulo 13, Cores
e Planos de Fundo.
Este capítulo se concentra na incorporação do conteúdo da imagem no fluxo do documento

e está dividido em três partes. Primeiro, veremos o elemento img testado e comprovado
para adicionar imagens básicas a uma página da maneira como fazemos desde 1992. Ele
funciona bem há mais de 25 anos e, como iniciante, você Descobrirá que também atende à
maioria das suas necessidades.
A segunda parte deste capítulo apresenta alguns dos métodos disponíveis para incorporar
imagens SVG (Scalable Vector Graphics) em documentos HTML.
SVGs são um caso especial e exigem atenção especial.
Finalmente, veremos como a marcação de imagem teve que se adaptar à ampla variedade
de dispositivos móveis com uma introdução a novos elementos de imagem responsivos
(imagem e fonte) e atributos (srcset e tamanhos). À medida que o número de tipos de
dispositivos usados para visualizar a web começou a disparar, percebemos que uma única
imagem pode não atender às necessidades de todos os ambientes de visualização, desde
telas do tamanho da palma da mão em redes celulares lentas até telas de cinema de alta
densidade. Precisávamos de uma maneira de tornar as imagens "responsivas" - ou seja, de veicular imagens
131
Primeiro, uma palavra sobre formatos de imagem
apropriado para seus ambientes de navegação. Depois de alguns anos de idas e vindas
entre o W3C e a comunidade de desenvolvimento, recursos de imagem responsiva foram
adicionados à especificação HTML 5.1 e estão começando a ver amplo suporte para
navegadores.
Quero salientar de antemão que a marcação de imagem responsiva não é tão direta
quanto os exemplos que vimos até agora neste livro. É baseado em conceitos de
desenvolvimento web mais avançados, e a sintaxe pode ser complicada para alguém que
está começando a escrever HTML (é um desafio para profissionais experientes!). Eu o
incluí neste capítulo porque é relevante para adicionar imagens embutidas, mas,
francamente, eu não o culparia se você quisesse pular a seção "Marcação de imagem
responsiva" e voltar a ela depois de terminarmos mais trabalho com Web Design
Responsivo e você tem mais experiência em HTML e CSS em seu currículo.
PRIMEIRO, UMA PALAVRA SOBRE FORMATOS DE IMAGEM
Chegaremos ao elemento img e outros exemplos de marcação em breve, mas primeiro é

importante saber que você não pode colocar qualquer imagem em uma página da web; ele
precisa estar em um dos formatos suportados pela web.
Em geral, as imagens que são compostas por uma grade de pixels coloridos (chamadas
bit mapeadas ou imagens raster, como mostrado na FIGURA 7-1, superior) devem ser
salvas nos formatos de arquivo PNG, JPEG ou GIF para serem colocadas em linha no conteúdo.
Os formatos de imagem de bitmap WebP e JPEG-XR mais novos e otimizados estão
ganhando popularidade lentamente, principalmente agora que temos marcação para
disponibilizá-los aos navegadores que os suportam.
Para imagens vetoriais (FIGURA 7-1, inferior), como o tipo de ícones e ilustrações que
você cria com ferramentas de desenho como o Adobe Illustrator, temos o formato SVG. Há
tanto a dizer sobre SVGs e seus recursos que dei a eles seu próprio capítulo (Capítulo 25,
SVG), mas veremos como adicioná-los a documentos HTML mais adiante neste capítulo.
Se você tiver uma imagem de origem em outro formato popular, como TIFF, BMP ou EPS,
será necessário convertê-la em um formato da Web antes de adicioná-la à página. Se, por
algum motivo, você precisar manter seu arquivo gráfico em seu formato original (por
exemplo, um arquivo para um programa CAD), poderá disponibilizá-lo como imagem
externa fazendo um link direto para o arquivo de imagem, assim:
<a href="architecture.eps">Obtenha o desenho</a>
Você deve nomear seus arquivos de imagem com os sufixos apropriados—.png, .jpg
(ou .jpeg), .gif, .webp e .jxr, respectivamente. Além disso, seu servidor deve ser configurado
para reconhecer e servir adequadamente esses vários tipos de imagem. Todos os softwares
de servidor da web hoje são configurados para lidar com PNG, JPEG e GIF prontos para
uso, mas se você estiver usando SVG ou um dos formatos mais recentes, pode ser
necessário adicionar deliberadamente esse tipo de mídia à lista oficial do servidor.

Primeiro, uma palavra sobre formatos de imagem
As imagens bitmap são

compostas por uma grade
de pixels coloridos.
As imagens
vetoriais contêm
caminhos que são
definidos matematicamente.
FIGURA 7-1. Uma comparação de círculos salvos nos formatos bitmap e vetorial.
Um pouco de informação de fundo pode ser útil aqui. Arquivos de imagem e, de fato, quaisquer
arquivos de mídia que possam residir em um servidor, têm um tipo de mídia oficial (também chamado
de tipo MIME) e sufixos. Por exemplo, SVG tem o tipo MIME image/ svg+xml e os sufixos .svg e .svgz.
Os pacotes do servidor têm maneiras diferentes de lidar com as informações MIME. O popular software
de servidor Apache usa um arquivo no diretório raiz chamado htaccess
que contém uma lista de todos os tipos de arquivo e seus sufixos aceitáveis. Certifique-se de adicionar
(ou peça ao administrador do servidor para adicionar) os tipos MIME de novos formatos de imagem
para que possam ser servidos corretamente. O servidor procura o sufixo (.webp, por exemplo) dos
arquivos solicitados na lista e o compara com o Tipo de Conteúdo (imagem/ webp) que inclui em sua
resposta HTTP ao navegador. Isso informa ao navegador que tipo de dados está chegando e como
analisá-los.
Os navegadores usam aplicativos auxiliares para exibir mídia que eles não podem manipular sozinhos.
O navegador corresponde ao sufixo do arquivo no link para o aplicativo auxiliar apropriado. A imagem
externa pode ser aberta em uma janela de aplicativo separada ou dentro da janela do navegador se o
aplicativo auxiliar for um plug-in do navegador. O navegador também pode solicitar que o usuário salve
o arquivo ou abra um aplicativo manualmente. Também é possível que ele não consiga ser aberto.
Sem mais delongas, vamos dar uma olhada no elemento img e seus atributos obrigatórios e
recomendados.
7. Adicionando Imagens 133

O elemento img
O ELEMENTO IMG
<img> O elemento img informa ao navegador: “Coloque uma imagem aqui”. Você já teve dez vislumbres
Adiciona uma imagem embutida dele usado para colocar gráficos de banner nos exemplos do Capítulo 4, Criando uma página
simples. Você também pode colocar um elemento de imagem no fluxo do texto no ponto em que
deseja que a imagem apareça, como no exemplo a seguir. As imagens permanecem no fluxo do
texto, alinhadas com a linha de base do texto e não causam quebras de linha (HTML5 chama isso
de elemento de frase), conforme mostrado na FIGURA 7-2:
<p>Neste verão, experimente fazer pizza <img src="pizza.png" alt="">

na sua grelha.</p>
FIGURA 7-2. Por padrão, as imagens são alinhadas com a linha de base do texto ao redor
e não causam quebra de linha.
Quando o navegador vê o elemento img , ele faz uma solicitação ao servidor e recupera o arquivo
de imagem antes de exibi-lo na página. Em uma rede rápida com um computador ou dispositivo
rápido, mesmo que uma solicitação separada seja feita para cada arquivo de imagem, a página
geralmente parece chegar instantaneamente. Em dispositivos móveis com conexões de rede lentas,
podemos estar cientes da espera para que as imagens sejam buscadas uma de cada vez. O mesmo
vale para usuários que usam conexões de internet discadas ou outras redes lentas, como o caro
WiFi em hotéis de luxo.
Os atributos src e alt

Os atributos src e alt mostrados na amostra são obrigatórios. O src
são necessários no (source) fornece a localização do arquivo de imagem (sua URL). O alt
elemento img. O atributo fornece texto alternativo que é exibido se a imagem não estiver disponível.
Falaremos um pouco mais sobre src e alt nas próximas seções.
Há algumas outras coisas dignas de nota sobre o elemento img :
• É um elemento vazio, o que significa que não possui conteúdo. Basta colocá-lo no fluxo de texto
onde a imagem deve ir.
• É um elemento embutido, portanto, se comporta como qualquer outro elemento embutido no

fluxo de texto. A FIGURA 7-3 demonstra a natureza em linha dos elementos de imagem.
Quando a janela do navegador é redimensionada, uma linha de imagens reflui para preencher
a nova largura.

O elemento img
FIGURA 7-3. As imagens em linha fazem parte do fluxo normal de documentos. Eles refluem quando a
janela do navegador é redimensionada.
• O elemento img é conhecido como elemento substituído porque é substituído por um arquivo
externo quando a página é exibida. Isso o diferencia dos elementos de texto que têm seu
conteúdo ali mesmo na fonte (e, portanto, não são substituídos).
• Por padrão, a borda inferior de uma imagem se alinha com a linha de base do texto, conforme
mostrado na FIGURA 7-2. Usando CSS, você pode flutuar a imagem para a margem direita
ou esquerda e permitir que o texto flua em torno dela, cortá-la em uma forma, controlar o
espaço e as bordas ao redor da imagem e alterar seu alinhamento vertical.
Falaremos sobre esses estilos na Parte III.
Fornecendo o local com src

O valor do atributo src é a URL do arquivo de imagem. Na maioria dos casos, as imagens que src="URL"
você usa em suas páginas residirão em seu próprio servidor, então você usará URLs relativos Origem (localização) da imagem
para apontá-las.
Se você acabou de ler o Capítulo 6, Adicionando Links, você deve ser bastante habilidoso
em escrever URLs relativos. Resumindo, se a imagem estiver no mesmo diretório que o
documento HTML, você pode fazer referência à imagem pelo nome no atributo src : AVISO
<img src="icon.gif" alt=""> Antes de usar qualquer imagem em sua página da
Os desenvolvedores geralmente organizam as imagens de um site em um diretório chamado web, certifique-se de que você é o proprietário da
imagem, que tem permissão explícita por escrito do
imagens ou img (na verdade, isso ajuda os mecanismos de pesquisa quando você faz dessa
detentor dos direitos autorais ou que ela é de domínio
maneira). Pode até haver diretórios de imagens separados para cada seção do site. Se uma
público. Vincular a uma imagem em outro servidor
imagem não estiver no mesmo diretório que o documento, você precisará fornecer o nome do
(chamado de hotlink ing) é considerado seriamente
caminho para o arquivo de imagem:
chato, então não faça isso a menos que haja um caso
<img src="/images/arrow.gif" alt=""> de uso específico no qual você tenha permissão.
Mesmo assim, esteja ciente de que você não pode

Claro, você pode colocar imagens de outros sites usando um URL completo, como este, mas
controlar a imagem e corre o risco de movê-la ou
não é recomendado (veja Aviso):
renomeá-la, o que quebraria seu link.
<img src="http://www.example.com/images/smile.gif" alt="">

O elemento img
DICA DE P ERFO RMANCE
Aproveite o cache
Quando um navegador baixa uma imagem, ele armazena o arquivo no cache do disco (um espaço
para armazenamento temporário de arquivos no disco rígido). Dessa forma, se precisar reexibir a
página, ele pode simplesmente obter uma cópia local da imagem sem fazer uma nova solicitação ao servidor.
Se você usar a mesma imagem repetidamente, certifique-se de que o atributo src para cada img
elemento aponta para a mesma URL no servidor. A imagem é baixada uma vez e, em seguida, é
chamada do cache para usos subsequentes. Isso significa menos tráfego para o servidor e exibição
mais rápida para o usuário.
Fornecendo texto alternativo com alt

alt="texto"
Texto Alternativo
<p>Se você é <img src="happy.gif" Cada elemento img também deve conter um atributo alt que forneça uma alternativa
alt="happy"> e sabe disso, bata palmas.</p>
de texto à imagem para aqueles que não conseguem vê-la. O texto alternativo (também
Com imagem exibida chamado de texto alternativo) deve servir como substituto do conteúdo da imagem –
transmitindo a mesma informação e função. O texto alternativo é usado por leitores de
tela, mecanismos de pesquisa e navegadores gráficos quando a imagem não carrega
(FIGURA 7-4).
Neste exemplo, um ícone de PDF indica que o texto vinculado baixa um arquivo no
Raposa de fogo
formato PDF. Nesse caso, a imagem está transmitindo um conteúdo valioso que
estaria faltando se a imagem não pudesse ser vista. Fornecer o texto alternativo
“arquivo PDF” replica o propósito da imagem:
Chrome (Mac e Windows) <a href="application.pdf">Inscrição para ensino médio</a> <img src="images/ ÿ
pdflogo.png alt="arquivo PDF">
Um leitor de tela pode indicar a imagem lendo seu valor alt desta forma:
“Aplicativo do ensino médio. Imagem: arquivo PDF”
MS Edge (Windows)
Às vezes, as imagens funcionam como links; nesse caso, fornecer texto alternativo é
fundamental porque o leitor de tela precisa de algo para ler o link. No próximo exemplo,
uma imagem da capa de um livro é usada como um link para o site do livro. Seu texto
Safári (iOS)
alternativo não descreve a capa em si, mas desempenha a mesma função que a
imagem da capa na página (indicando um link para o site):
<a href="http://learningwebdesign.com"><img src="/images/LWD_cover.png"
Safári (Mac) alt="Learning Web Design site"></a>
Se uma imagem não adicionar nada significativo ao conteúdo de texto da página, é

recomendável deixar o valor do atributo alt vazio (null).
FIGURA 7-4. A maioria dos navegadores No exemplo a seguir, um acento floral decorativo não está contribuindo para o
exibe um texto alternativo no lugar da
conteúdo da página, portanto, seu valor alt é nulo. (Você também pode considerar se
imagem se a imagem não estiver disponível.
O Safari para macOS é uma exceção é mais apropriadamente tratado como uma imagem de fundo em CSS, mas eu discordo.)
notável. A substituição do Firefox é a mais perfeita. Observe que não há espaço de caracteres entre as aspas:
<img src="/images/floralembellishment.png" alt="">

O elemento img
Para cada imagem embutida em sua página, considere como o texto alternativo soaria quando
DICA DE ACESSIBILIDADE
lido em voz alta e se isso melhora a experiência ou pode ser intrusivo para um usuário com
tecnologia assistiva. Evite usar “imagem de” ou “gráfico de”
em valores de texto alternativo. Vai ficar claro
O texto alternativo também pode beneficiar os usuários com navegadores gráficos. Se o
que é uma imagem. Se o meio da
usuário tiver optado por desativar as imagens nas preferências do navegador ou se a imagem
imagem, por exemplo, pintura, fotografia
simplesmente não carregar, o navegador pode exibir o texto alternativo para dar ao usuário ou ilustração, for relevante para o conteúdo,
uma ideia do que está faltando. A manipulação de texto alternativo é inconsistente entre os não há problema em incluir o termo descritivo.
navegadores modernos, como mostrado na FIGURA 7-4.
Fornecendo as dimensões com largura e altura

Os atributos de largura e altura indicam as dimensões da imagem em número de pixels. Os largura = "número"
navegadores usam as dimensões especificadas para manter a quantidade certa de espaço Largura da imagem em pixels
no layout enquanto as imagens são carregadas, em vez de reconstruir a página cada vez que
uma nova imagem chega, resultando em uma exibição de página mais rápida. Se apenas altura="número"
Altura da imagem em pixels
uma dimensão for definida, a imagem será dimensionada proporcionalmente.
Esses atributos tornaram-se menos úteis na era do desenvolvimento web moderno. Eles
nunca devem ser usados para redimensionar uma imagem (use seu programa de edição de
imagens ou CSS para isso) e devem ser omitidos inteiramente quando você estiver usando
uma das técnicas de imagem responsiva apresentadas mais adiante neste capítulo.
Eles podem ser usados com imagens que aparecerão no mesmo tamanho fixo em todos os
dispositivos, como um logotipo ou um ícone, para dar uma dica de layout ao navegador.
Certifique-se de que as dimensões em pixels especificadas sejam as dimensões reais da

imagem. Se os valores de pixel forem diferentes das dimensões reais de sua imagem, o LEITURA ADICIONAL
navegador redimensionará a imagem para corresponder aos valores especificados (FIGURA

Acessibilidade da imagem
7-5). Se você estiver usando atributos de largura e altura e sua imagem parecer distorcida
Alguns tipos de imagens, como gráficos de
ou até mesmo levemente embaçada, verifique se os valores estão sincronizados.
dados e diagramas, exigem descrições
longas que não são práticas como valores
alternativos . Esses casos exigem
estratégias alternativas de acessibilidade,
largura="72" altura="72"
que você encontrará nestes recursos:
(tamanho real da imagem)
• “Imagens Acessíveis” em WebAIM
(webaim.org/techniques/
imagens/)
• “Texto Alternativo” no WebAIM

(webaim.org/techniques/alttext/)
largura="144" altura="72"
• As Diretrizes de Acessibilidade de
Conteúdo da Web (WCAG 2.0) no
W3C (www.w3.org/TR/WCAG20-
FIGURA 7-5. Os navegadores redimensionam as imagens para corresponder à largura e altura fornecidas
TECHS/) incluem técnicas para
valores, mas você não deve redimensionar as imagens dessa maneira.
melhorar a acessibilidade em todo o
conteúdo da web. Atenção: este é bem
Agora que você conhece o básico do elemento img , você deve estar pronto para adicionar denso.
algumas fotos ao site Black Goose Bistro Gallery no EXERCÍCIO 7-1.

O elemento img
EXERCÍCIO 7-1. Adicionando e vinculando imagens
Neste exercício, você adicionará imagens às páginas e as usará como links. Todas as fotos e
miniaturas em tamanho real (pequenas versões das imagens) que você precisa foram criadas para você,
e eu lhe dei uma vantagem sobre os arquivos HTML com estilos básicos também. Os arquivos iniciais e
o código resultante estão disponíveis em learningwebdesign.com/5e/materials. Coloque uma cópia da
pasta da galeria em seu disco rígido, certificando-se de mantê-la organizada à medida que a encontra.
Este pequeno site é composto por uma página principal (index.html) e três documentos HTML separados
contendo cada uma das visualizações de imagem maiores (FIGURA 7-6). Primeiro, adicionaremos as
miniaturas e, em seguida, adicionaremos as versões em tamanho real às respectivas páginas. Por fim,
faremos o link das miniaturas para essas páginas. Vamos começar.
Abra o arquivo index.html e adicione as pequenas imagens em miniatura a esta página para acompanhar
o texto. Eu fiz o primeiro para você:
<p><img src="thumbnails/bread-200.jpg" alt="close-up de pão rústico

fatiado" width="200" height="200"><br>Começamos o dia no…
Coloquei a imagem no início do parágrafo, logo após a tag de abertura <p> .
Como todas as imagens em miniatura estão localizadas no diretório de miniaturas , forneci o nome do
caminho na URL. Adicionei uma descrição da imagem com o atributo alt e, como sei que essas miniaturas
aparecerão com exatamente 200 pixels de largura e altura em todos os dispositivos, incluí os atributos
de largura e altura também para informar ao navegador quanto espaço deixe no layout. Agora é sua vez.
1. Adicione as imagens em miniatura burgers-200.jpg e fish-200.jpg no início do

parágrafos em suas respectivas seções, seguindo meu exemplo. Certifique-se de incluir os nomes
dos caminhos e descrições de texto alternativas bem pensadas. Por fim, adicione uma quebra de linha
(<br>) após o elemento img .
Quando terminar, salve o arquivo e abra-o no navegador para ter certeza de que as imagens estão
visíveis e aparecem no tamanho certo.
2. Em seguida, adicione as imagens aos documentos HTML individuais. Eu fiz bread.html para você:
<h1>Galeria: Assados</h1>
<p><img src="photos/bread-800.jpg" alt="close-up de pão rústico
fatiado" width="800" height="600"></p>
Observe que as imagens em tamanho real estão em um diretório chamado fotos, portanto, isso
precisa ser refletido nos nomes dos caminhos. Observe também que, como esta página não foi
projetada para ser responsiva e as imagens terão um tamanho fixo em todos os dispositivos, fui em
frente e incluí os atributos de largura e altura aqui também.
FIGURA 7-6. Páginas da galeria de fotos.
Adicione imagens a burgers.html e fish.html, seguindo meu exemplo. Dica: todas as imagens têm 800
pixels de largura e 600 pixels de altura.
Salve cada arquivo e verifique seu trabalho abrindo-os na janela do navegador.

Gosta de mais prática? 3. De volta ao index.html, vincule as miniaturas aos seus respectivos arquivos. Eu fiz o primeiro:
Se você quiser mais prática, encontrará <p><a href="bread.html"><img src="thumbnails/bread-200.jpg" alt="close

três imagens adicionais (chicken-800. up de pão rústico fatiado" width="200" height="200"></a ><br>Começamos
jpg, fries-800.jpg e tabouleh-800. nosso dia ao raiar do dia…
jpg) com suas versões em miniatura Observe que a URL é relativa ao documento atual (index.html), não ao local da imagem (o diretório de
(chicken-200.jpg, fries-200.jpg e miniaturas ).
tabouleh-200.jpg) em seus diretórios
Faça o link das imagens em miniatura restantes para cada um dos documentos. Se todas as imagens
apropriados. Desta vez, você precisará
estiverem visíveis e você conseguir vincular cada página e voltar para a página inicial novamente,
adicionar suas próprias descrições à página
parabéns, você terminou!
inicial e criar os documentos HTML para as
imagens em tamanho real a partir do zero.

Adicionando imagens SVG
Isso cuida do básico de adicionar imagens a uma página. Em seguida, vamos adicionar imagens
SVG, que são um caso especial, tanto em termos do formato subjacente quanto das maneiras
como elas podem ser adicionadas ao HTML.
ADICIONANDO IMAGENS SVG
Nenhuma lição sobre como adicionar imagens a páginas da web estaria completa sem uma
introdução à adição de SVGs (Scalable Vector Graphics). Afinal, a popularidade das imagens
SVG vem ganhando força graças ao suporte quase onipresente do navegador e à necessidade
de imagens que possam ser redimensionadas sem perda de qualidade. Para imagens em estilo
de ilustração, elas são um sonho responsivo tornado realidade.
Estou guardando meu mergulho profundo em todas as coisas SVG para o Capítulo 25, mas
por enquanto vou dar uma olhada rápida no que eles são feitos para que a marcação de
incorporação faça sentido.
Como mencionei no início deste capítulo, os SVGs são apropriados para o armazenamento de
imagens vetoriais (FIGURA 7-1). Em vez de uma grade de pixels, os vetores são compostos de
formas e caminhos definidos matematicamente. E ainda mais interessante, em SVGs essas
formas e caminhos são especificados por instruções escritas em um arquivo de texto. Deixe
isso acontecer: são imagens que são escritas em texto! Todas as formas e caminhos, bem
como suas propriedades, são escritas na linguagem de marcação SVG padronizada (consulte
a Nota). Como o HTML possui elementos para parágrafos (p) e tabelas (tabela), o SVG possui
NOTA
elementos que definem formas como retângulo (retângulo), círculo (círculo) e caminhos
(caminho). SVG é um exemplo, ou aplicação, de XML (Extensible
Markup Language), que fornece as regras e padrões

Um exemplo simples lhe dará a ideia geral. Aqui está o código SVG que descreve um retângulo de como as linguagens de marcação devem ser
(retângulo) com cantos arredondados (rx e ry, para raio x e raio y) e a palavra “hello” definida escritas e trabalhar juntas. Como resultado, o SVG
como texto com atributos para a fonte e cor (FIGURA 7-7 ). Os navegadores que suportam funciona bem junto com o conteúdo HTML.
SVG lêem as instruções e desenham a imagem exatamente como eu a projetei:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180">

<rect width="300" height="180" fill="purple" rx="20" ry="20"/>
<text x="40" y="114" fill="yellow" font-family="'Verdana-Bold'"
font-size="72">
olá!
</text>
</svg>
FIGURA 7-7. Um SVG simples composto de um retângulo e texto.

Os SVGs oferecem algumas vantagens significativas sobre seus equivalentes em bitmap para
determinados tipos de imagem:
• Como eles salvam apenas instruções sobre o que desenhar, geralmente exigem menos dados do que
uma imagem salva em formato bitmap. Isso significa downloads mais rápidos e melhor desempenho.
• Por serem vetores, podem ser redimensionados conforme a necessidade em um layout responsivo
sem perda de qualidade. Um SVG é sempre bom e nítido. Sem bordas difusas.
• Por serem texto, integram-se bem com HTML/XML e podem ser compactados com ferramentas como
Gzip e Brotli, assim como arquivos HTML.
• Eles podem ser animados.
• Você pode alterar sua aparência com Cascading Style Sheets.
• Você pode adicionar interatividade com JavaScript para que as coisas aconteçam quando os usuários
passe o mouse sobre ou clique na imagem.
Novamente, todos os prós e contras da criação de SVGs, bem como seus muitos recursos, são discutidos
em detalhes no Capítulo 25. Por enquanto, gostaria de me concentrar no HTML necessário para colocá-
los no fluxo de uma página da web . Você tem algumas opções: incorporado com o elemento img ,
escrito no código como um elemento svg embutido, incorporado com objeto e usado como imagem de
fundo com CSS.
Incorporado com o elemento img

Arquivos de texto SVG salvos com o sufixo .svg (às vezes chamado de SVG autônomo) podem ser
tratados como qualquer outra imagem, inclusive colocando-a no documento usando o elemento img .
Você já é um especialista no elemento img , então o exemplo a seguir deve ser claro:
<img src="/images/circle.svg" alt="">
Prós e contras
A vantagem de incorporar um SVG com img é que ele é universalmente suportado em navegadores
que suportam SVG.
Essa abordagem funciona bem quando você está usando um SVG autônomo como um simples substituto
para um GIF ou um PNG, mas há algumas desvantagens em incorporar SVGs com img:
• Você não pode aplicar estilos aos itens dentro do SVG usando uma folha de estilo externa, como um
arquivo .css aplicado a toda a página. O arquivo .svg pode incluir sua própria folha de estilo interna
usando o elemento style , no entanto, para estilizar os elementos dentro dele. Você também pode
aplicar estilos ao próprio elemento img .
• Você não pode manipular os elementos dentro do SVG com JavaScript, então você perde a opção de
interatividade. Scripts em seu documento da web não podem

veja o conteúdo do SVG e os scripts no arquivo SVG não são executados.

Outros efeitos interativos, como links ou estilos :hover , também nunca são acionados
dentro de um SVG incorporado com img .
• Você não pode usar nenhum arquivo externo, como imagens incorporadas ou fontes da
Web, no SVG.
Em outras palavras, SVGs autônomos se comportam como se estivessem em sua própria

bolha pequena e independente. Mas para ilustrações estáticas, tudo bem. Configuração do servidor SVG
Se você estiver usando SVGs e eles não
Suporte do navegador para SVG com img estiverem aparecendo corretamente quando seu
site for carregado, talvez seja necessário
A boa notícia é que todos os navegadores modernos suportam SVGs incorporados com o configurar o servidor para reconhecer o tipo de
elemento img . As duas exceções notáveis são as versões 8 e anteriores do Internet imagem SVG, conforme discutido no início deste
Explorer e o navegador Android anterior à versão 3. Até o momento, os usuários com capítulo. Veja como fazer isso no servidor
Apache, mas configurações semelhantes podem
esses navegadores ainda podem aparecer em números pequenos, mas significativos, em
ser feitas em outras linguagens de servidor:
seus logs de usuário. Se você encontrar um motivo para seu site oferecer suporte a esses
navegadores mais antigos, existem soluções alternativas, que abordarei brevemente na
próxima seção “SVG Fallbacks” . AddType imagem/svg+xml .svg
Inline na fonte HTML

Outra opção para colocar um SVG em uma página da web é copiar o conteúdo do arquivo <svg>
SVG e colá-lo diretamente no documento HTML. Isso é chamado usando o SVG embutido. Uma imagem SVG embutida
Aqui está um exemplo que se parece muito com a img inline

exemplo que vimos na FIGURA 7-2, só que desta vez nossa pizza é uma imagem vetorial
desenhada com círculos e inserida com o elemento svg (FIGURA 7-8). Cada elemento de
círculo tem atributos que descrevem a cor de preenchimento, a posição de seu ponto
central (cx e cy) e o comprimento de seu raio (r):
<p>Neste verão, experimente fazer pizza
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="100" height="100">
<circle fill="#D4AB00" cx="36" cy="36" r="36"/>

<circle opacity=".7" fill="#FFF" stroke="#8A291C" cx="36.1" cy="35.9" r="31.2"/>
<circle fill="#A52C1B" cx="38.8" cy="13.5" r="4.8"/>

<circle fill="#A52C1B" cx="32" cy="37.2" r="4.8"/>
<circle fill="#A52C1B" cx="56" cy="28.3" r="4.8"/>
</svg>
na sua grelha.</p>

FIGURA 7-8. Esta imagem de pizza é um SVG composto por 11 elementos circulares . Em
vez de um elemento img , o código-fonte SVG é colocado diretamente no documento HTML com
um elemento svg .
Este código foi gerado pelo Adobe Illustrator, onde criei a ilustração e salvei em formato SVG.
Eu também o otimizei para remover um monte de sujeira que o Illustrator adiciona lá.
Discutiremos a otimização de SVG no Capítulo 25.
Prós e contras
Os SVGs embutidos permitem que os desenvolvedores aproveitem ao máximo os recursos

do SVG. Quando a marcação SVG está ao lado da marcação HTML, todos os seus elementos
fazem parte da árvore DOM principal. Isso significa que você pode acessar e manipular
objetos SVG com JavaScript, fazendo com que eles respondam à interação ou entrada do usuário.
Existem benefícios semelhantes para folhas de estilo porque os elementos no SVG podem
herdar estilos de elementos HTML. Isso facilita a aplicação dos mesmos estilos a elementos
na página e no gráfico SVG.
No lado negativo, o código para ilustrações SVG pode ficar extremamente longo e pesado,
resultando em documentos HTML inchados que são difíceis de ler.
Mesmo aquela pequena pizza de pepperoni requer um sério bloco de código. Isso também
torna as imagens de um site mais difíceis de manter, já que elas ficam escondidas nos
documentos HTML. Outra desvantagem é que os SVGs embutidos não são armazenados em
cache pelo navegador separadamente do arquivo HTML, portanto, evite esse método para
imagens grandes que são reutilizadas em muitas páginas HTML.
Suporte ao navegador
A boa notícia é que todos os navegadores modernos suportam imagens SVG colocadas em
linha com o elemento svg . As seguintes versões mais antigas do navegador não têm suporte:
Internet Explorer versões 8 e anteriores, Safari versões 5 e anteriores, navegador móvel
Android anterior à versão 3 e iOS anterior à versão 5.
Incorporado com o objeto Elemento

O HTML tem um elemento de incorporação de mídia para todos os fins chamado object.
Falaremos mais sobre isso no Capítulo 10, Embedded Media, mas, por enquanto, saiba que
o objeto é outra opção para incorporar um SVG em uma página da web. É um bom

compromisso entre img e SVG inline, permitindo um SVG totalmente funcional que ainda é
encapsulado em um arquivo separado, que pode ser armazenado em cache.
A tag de objeto de abertura especifica o tipo de mídia (uma imagem svg+xml ) e aponta para o
arquivo a ser usado com o atributo data . O elemento object vem com seu próprio mecanismo de
fallback — qualquer conteúdo dentro do objeto é renderizado se a mídia especificada com os
dados não puder ser exibida. Nesse caso, uma versão PNG da imagem será colocada com uma
img se o .svg não for suportado ou não for carregado:
<object type="image/svg+xml" data="pizza.svg">

<img src="pizza.png" alt="pizza">
</object>
Há uma captura, no entanto. Alguns navegadores baixam a imagem de fallback mesmo que sejam
compatíveis com SVG e não precisem dela. Downloads inúteis não são ideais.
Outra incorporação
A solução alternativa é tornar a imagem de fallback uma imagem de plano de fundo CSS em um
contêiner div vazio. Infelizmente, não é tão flexível para dimensionamento e dimensionamento, mas
Opções
resolve o problema de download extra. Técnicas mais antigas para adicionar SVGs
envolvem o uso de dois outros elementos
<object type="image/svg+xml" data="pizza.svg"> HTML para incorporar mídia: embed e iframe
<div style="imagem de fundo: url(pizza.png); largura 100px; altura: (falaremos sobre eles no Capítulo 10). Você
100px;" role="img" aria-label="pizza"> ainda pode vê-los em uso com SVGs por aí, e
</object> eles funcionam bem para navegadores que
suportam SVG, mas a maioria dos desenvolvedores
Prós e contras os considera desatualizados
A principal vantagem de incorporar SVGs com o elemento object é que eles podem ser roteirizados métodos. Fique com img, svg embutido , objeto
e carregar arquivos externos. Eles também podem usar scripts para acessar o documento HTML e imagem de fundo CSS .
pai (com algumas restrições de segurança). No entanto, como eles são arquivos separados e não
fazem parte do DOM da página, você não pode usar uma folha de estilo no documento HTML para
estilizar elementos dentro do SVG. SVGs incorporados também podem ter alguns comportamentos
de bugs nos navegadores, portanto, certifique-se de testar completamente.
Usado como imagem de fundo com CSS

Eu sei que este é um capítulo HTML, mas eu seria negligente se pelo menos não mencionasse
que SVGs podem ser usados como imagens de fundo com CSS. Este exemplo de regra de estilo
coloca uma imagem decorativa no plano de fundo de um cabeçalho:
cabeçalho {
imagem de fundo: url(/images/decorative.svg);
}
SVG Fallbacks
Como mencionado anteriormente, todos os navegadores modernos suportam SVGs incorporados
como img, incorporados como um objeto ou incluídos inline, o que é uma notícia muito boa.
No entanto, se os logs do seu servidor mostrarem tráfego significativo do Internet Explorer 8 e
anterior, Android versão 3 e anterior ou Safari 5 e anterior, ou se o seu

client requer apenas suporte para esses navegadores, talvez seja necessário usar uma
técnica de fallback. Uma opção é usar o elemento object para incorporar o SVG na página
e aproveitar seu recurso de conteúdo de fallback mostrado anteriormente.
Se você estiver usando SVG como uma imagem com o elemento img , outra opção é usar
o elemento picture (discutido como parte da seção “Marcação de imagem responsiva”
mais adiante neste capítulo). O elemento de imagem pode ser usado para fornecer várias
versões de uma imagem em diferentes formatos. Cada versão é sugerida com o elemento
source , que no exemplo a seguir aponta para a imagem pizza.svg e define seu tipo de
mídia. O elemento de imagem também possui um mecanismo de fallback integrado. Se o
navegador não suportar os arquivos de origem sugeridos ou se não suportar o elemento
picture , os usuários verão a imagem PNG fornecida com o bom e velho elemento img :
<foto>
<source type="image/svg+xml" srcset="pizza.svg">
<img srcset="pizza.png" alt="Sem suporte a SVG">
</picture>
Se você pesquisar no Google por “substituições de SVG”, provavelmente obterá alguns

acessos, muitos dos quais usam JavaScript para detectar suporte. Para obter informações
mais detalhadas sobre fallbacks SVG, recomendo a leitura do artigo de Amelia Bellamy-
Royd, “A Complete Guide to SVG Fallbacks” (css-tricks.com/a-complete-guide-to-svg
fallbacks/) ou o livro de Chris Coyier, Practical SVG (A Book Apart) quando estiver pronto.
Idealmente, você estará lendo isso em um mundo onde as versões antigas do Internet
Explorer e do Android não são mais um problema.
Você está pronto para experimentar os SVGs? Experimente algumas das técnicas de
incorporação que discutimos no EXERCÍCIO 7-2.
EXERCÍCIO 7-2. Adicionando um SVG a uma página
Neste exercício, adicionaremos algumas imagens SVG à página do Black Goose Bistro em que trabalhamos no
Capítulo 4. Os materiais para este exercício estão disponíveis online em learningwebdesign.
com/5e/materiais. Você encontrará tudo em um diretório chamado svg. O código resultante é fornecido com os
materiais.
Este exercício tem duas partes: primeiro, substituiremos o logotipo por uma versão SVG e, segundo,
adicionaremos uma linha de ícones de mídia social na parte inferior da página (FIGURA 7-9).
Parte I: Substituindo o logotipo

1. Abra blackgoosebistro.html em um editor de texto. Deve ficar exatamente como deixamos no Capítulo 4.
2. Só por diversão, vamos ver o que acontece quando você torna o logotipo PNG atual muito grande.
Adicione largura="500" altura="500" à tag img . Salve o arquivo e abra-o no navegador para ver
como as imagens em bitmap ficam borradas quando você as dimensiona para um tamanho maior. Que nojo.
3. Vamos substituí-lo por uma versão SVG do mesmo logotipo usando o método SVG embutido.
Na pasta svg, você encontrará um arquivo chamado blackgoose-logo.svg. Abra-o em seu
editor de texto e copie todo o texto (de <svg> para </svg>).

FIGURA 7-9. A página Black Goose Bistro com imagens SVG.
4. Volte para o arquivo blackgoosebistro.html e exclua todo o elemento img 8. Use o elemento img para colocar três ícones SVG: twitter.svg,
(cuidado para não excluir a marcação ao redor). facebook.svg e instagram.svg. Observe que eles estão localizados no diretório de
Cole o texto SVG em seu lugar. Se você olhar de perto, verá que o SVG ícones . Há também ícones para Tumblr e GitHub se você quiser praticar mais. Aqui
contém dois círculos, uma definição de gradiente e dois caminhos (um para a está uma vantagem sobre o primeiro:
forma starburst e outro para o ganso).
<p><img src="icons/twitter.svg" alt="twitter"></p>
5. Em seguida, defina o tamanho que o SVG deve aparecer na página. Na
9. Salve o arquivo e abra-o no navegador. Os ícones deveriam estar lá, mas
tag svg de abertura , adicione os atributos de largura e altura definidos
são enormes. Vamos escrever algumas regras de estilo para deixar o
para 200px cada.
rodapé bonito. Ainda não fizemos muito com as regras de estilo, então
<h1><svg largura="200px" altura="200px" … copie exatamente o que você vê aqui dentro do elemento de estilo no
Salve o arquivo e abra a página no navegador. Você deve ver o logotipo SVG cabeçalho do documento:
no lugar, muito parecido com o antigo. rodapé

6. Tente ver o que acontece quando você torna o logotipo SVG realmente { borda superior: 1px sólido #57b1dc;
grande! Altere a largura e a altura para 500 pixels, salve o arquivo e recarregue
acolchoamento superior:
a página no navegador. Deve ser grande e afiada! Sem bordas borradas como
1em; } imagem de rodapé {
o PNG. OK, agora coloque o tamanho de volta para 200 ×
200 ou o que for bom para você.
largura: 40px;
altura: 40px;
Parte II: Adicionando ícones margem esquerda: .5em;
7. Em seguida, vamos criar um rodapé na parte inferior da página para ícones de margem direita: .5em; }
mídia social. Abaixo da seção Local e horário, adicione o seguinte (o parágrafo
vazio é onde adicionaremos os logotipos): 10. Salve o arquivo novamente e abra-o no navegador (você deverá ver uma
<rodapé> página parecida com a FIGURA 7-9). Vá em frente e brinque com as
<p>Por favor, visite nossas páginas de mídia social</p> configurações de estilo, ou mesmo com o código no SVG embutido, se quiser
<p> </p> ter uma ideia de como elas afetam a aparência das imagens. É meio divertido.
</rodapé>

Marcação de imagem responsiva
MARCAÇÃO DE IMAGEM RESPONSIVA
Muito rapidamente depois que smartphones, tablets, “phablets” e outros dispositivos entraram em cena, ficou
claro que imagens grandes que ficam ótimas em uma tela grande eram um exagero em telas menores. Todos
aqueles dados de imagem... baixados e desperdiçados.
Forçar imagens enormes em dispositivos pequenos diminui a exibição da página e pode custar dinheiro real
também, dependendo do plano de dados do usuário (e dos custos do servidor). Por outro lado, imagens pequenas
que são baixadas rapidamente podem ficar desfocadas em telas grandes e de alta resolução. Assim como
precisamos de uma maneira de fazer com que páginas inteiras da Web respondam e se adaptem a vários
tamanhos de tela, também precisamos de uma maneira de tornar as imagens dessas páginas “responsivas”.
Nosso confiável elemento img com seu único src

Você fornece várias atributo simplesmente não é suficiente na maioria dos casos.
imagens, dimensionadas ou
Foram necessários alguns anos de propostas, experimentação e discussão entre os fabricantes de navegadores
cortadas para diferentes
e a comunidade de desenvolvimento web, mas agora temos uma maneira de sugerir imagens alternativas usando
tamanhos de tela, e o
apenas a marcação HTML. Sem JavaScript complicado ou hacks do lado do servidor. Os recursos de imagem
navegador escolhe a mais responsivos resultantes (atributos srcset e tamanhos , bem como o elemento picture ) foram incorporados à
apropriada com base no que sabe especificação HTML 5.1, e o suporte ao navegador está crescendo constantemente, liderado pelo navegador
sobre o ambiente de Chrome em setembro de 2014.
visualização atual.
Graças a um fallback infalível e scripts que adicionam suporte a navegadores mais antigos, você pode começar a
usar essas técnicas imediatamente. Dito isto, nada disso está gravado em pedra. As soluções de imagem
responsivas provavelmente serão ajustadas e aprimoradas, ou talvez um dia até se tornem obsoletas. Se você
for incluí-los em seus sites, um bom ponto de partida para se atualizar é o Grupo da Comunidade de Imagens
Responsivas (responsiveimages.org). O RICG é um grupo de desenvolvedores que trabalharam juntos para
elaborar a especificação atual com os criadores do navegador. Eles estão em cima dessas coisas. Você também
deve procurar artigos recentes e talvez até abrir a especificação.
Como funciona
Quando dizemos “imagens responsivas”, estamos falando em fornecer imagens personalizadas para o ambiente
de visualização do usuário. Em primeiro lugar, as técnicas de imagem responsiva impedem que os navegadores
em telas pequenas baixem mais dados de imagem do que o necessário. Eles também incluem um mecanismo
para fornecer telas de alta resolução em imagens de redes rápidas grandes o suficiente para parecerem
extraordinariamente lindas.
Além disso, eles fornecem uma maneira para os desenvolvedores aproveitarem os novos formatos de imagem
mais eficientes.
Resumindo, as imagens responsivas funcionam assim: você fornece várias imagens, dimensionadas ou cortadas
para diferentes tamanhos de tela, e o navegador escolhe a mais apropriada com base no que sabe sobre o
ambiente de visualização atual. As dimensões da tela são um fator, mas a resolução, a velocidade da rede, o que
já está no cache, as preferências do usuário e outras considerações também podem estar envolvidas.

Os atributos e elementos da imagem responsiva abordam os quatro cenários básicos a seguir:
• Fornecimento de imagens extragrandes que parecem nítidas em telas de alta resolução
• Fornecer um conjunto de imagens de várias dimensões para uso em diferentes

tamanhos de tela
• Fornecer versões da imagem com quantidade variável de detalhes com base no tamanho e
orientação do dispositivo (conhecido como o caso de uso da direção de arte )
• Fornecer formatos de imagem alternativos que armazenam a mesma imagem em tamanhos

de arquivo muito menores
Vamos dar uma olhada em cada um desses casos de uso comuns.
Exibições de alta densidade (descritor x)

Tudo o que você vê em uma tela é composto de pequenos quadrados de luz colorida chamados
pixels. Chamamos os pixels que compõem a tela de pixels do dispositivo (às vezes você também os
verá chamados de pixels de hardware
ou pixels físicos). Até recentemente, as telas geralmente acomodavam 72 ou 96 pixels de dispositivo
em uma polegada (agora, 109 a 160 é a norma). O número de pixels por polegada (ppi) é a
resolução da tela.
Imagens de bitmap, como JPEG, PNG e GIF, também são compostas por uma grade de pixels.
Antigamente, os pixels nas imagens, bem como as dimensões dos pixels especificadas em nossas
folhas de estilo, eram mapeadas um a um com os pixels do dispositivo. Uma imagem ou elemento
de caixa com 100 pixels de largura seria disposto em 100 pixels do dispositivo. Agradável e direto.
Proporções de pixel de dispositivo
Não deve ser surpresa que não seja tão simples hoje.
Os dispositivos usam um
Os fabricantes têm aumentado cada vez mais as resoluções de tela em um esforço para melhorar a
qualidade da imagem. O resultado é que os pixels do dispositivo estão ficando cada vez menores, medida chamada de
tão pequenos que nossas imagens e texto seriam ilegíveis se fossem mapeados um a um. pixel de referência para layout
propósitos.
Para compensar, os dispositivos usam uma medida chamada pixel de referência para fins de layout.
Os pixels de referência também são conhecidos como pontos (PT) no iOS, Pixels independentes do
dispositivo (DP ou DiP) no Android ou pixels CSS porque são a unidade de medida que usamos nas
folhas de estilo. O iPhone 8 tem uma tela composta por 750 × 1334 pixels do dispositivo, mas usa
uma grade de layout de 375 ×
667 pontos ou pixels CSS (uma proporção de 2 pixels de dispositivo para 1 pixel de layout — 2:1 ou
2x). Uma caixa com 100 pixels de largura em CSS seria disposta em 200 pixels de dispositivo no
iPhone8. O iPhone X tem uma tela composta de 1125 ×
2436 pixels, mas usa uma grade de layout de 375 × 812 pontos (uma proporção de 3 pixels de
dispositivo para um ponto — ou 3x). Uma caixa de 100 pixels é disposta em 300 pixels de dispositivo
no iPhone X.

A proporção do número de pixels do dispositivo para pixels CSS é chamada de proporção

de pixels do dispositivo (FIGURA 7-10). As proporções de pixel de dispositivo comuns em
dispositivos portáteis são 1,325x, 1,5x, 1,7x, 2x, 2,4x, 3x e até 4x (o “x” é a convenção para
indicar uma proporção de pixel de dispositivo). Até mesmo grandes monitores de desktop
apresentam proporções de 2x, 3x e 4x.
Imagem ou objeto = 1:1 dispositivo-pixel-relação (1x)

referência 3 x 3 ou pixels CSS 3 x 3 pixels do dispositivo, indicados pela grade
proporção de pixel-dispositivo de 2:1 (2x) 3:1 dispositivo-pixel-relação (3x)

6 x 6 pixels do dispositivo 9 x 9 pixels do dispositivo
FIGURA 7-10. Pixels do dispositivo comparados aos pixels CSS/referência.
Digamos que você tenha uma imagem que deseja que apareça com 200 pixels de largura em
todos os monitores. Você pode fazer a imagem com exatamente 200px de largura (px é a
abreviação de pixels), e ela ficará bem em telas de resolução padrão, mas pode ficar um
pouco embaçada em telas de alta resolução. Para que essa imagem pareça nítida em uma
tela com uma proporção de pixel de dispositivo de 2x, você precisaria fazer essa mesma
imagem com 400 pixels de largura. Precisaria ter 600 pixels de largura para parecer nítido
em uma tela de 3x. Infelizmente, as imagens maiores podem ter tamanhos de arquivo quatro
ou mais vezes maiores que o original. Quem quer enviar todos esses dados extras para um
dispositivo 1x que realmente precisa apenas da imagem menor?
Apresentando srcset
Agora temos uma maneira de exibir imagens maiores apenas para os navegadores em telas
que se beneficiam delas. Fazemos isso usando o novo atributo srcset com nosso velho
amigo o elemento img . srcset permite que os desenvolvedores especifiquem uma lista de
opções de fonte de imagem para o navegador escolher.
O valor de srcset é uma lista de opções separadas por vírgulas. Cada item dessa lista tem
duas partes: o URL de uma imagem e um descritor x que especifica a proporção de pixels do
dispositivo de destino. Observe que a lista inteira é o valor de srcset e

vai dentro de um único conjunto de aspas. Esta amostra mostra a estrutura de um valor srcset :
srcset="imagem-URL #x, imagem-URL #x"

O atributo srcset
O atributo src ainda é obrigatório e geralmente é usado para especificar a imagem 1x padrão
especifica uma lista de
para navegadores que não suportam srcset. Verifique se há um alt
opções de imagem para o
atributo também:
navegador escolher.
<img src="imagem-URL" alt="" srcset="imagem-URL #x, imagem-URL #x">
Vejamos um exemplo. Eu tenho uma imagem de um peru que eu gostaria que aparecesse com
200 pixels de largura. Para resolução padrão, criei a imagem com 200 pixels de largura e a
chamei de turkey-200px.jpg. Eu também gostaria que parecesse nítido em telas de alta resolução,
então tenho mais duas versões: turkey-400px.jpg (para 2x) e turkey 600px.jpg (para 3x). Aqui
está a marcação para adicionar a imagem e indicar seus equivalentes de alta densidade com
descritores x: <img src="/images/turkey-200px.jpg" alt="" srcset="/images/turkey-400px.jpg 2x , /
images/turkey-600px.jpg 3x" >
Como os navegadores ignoram retornos de linha e espaços no documento de origem, também

posso escrever esse mesmo elemento empilhado dessa maneira para facilitar a leitura, como
farei ao longo deste capítulo:
<img
src="/images/turkey-200px.jpg" alt=""
srcset="/images/turkey-400px.jpg 2x, /images/
turkey-600px.jpg 3x" >
Isso torna as opções e a estrutura mais claras à primeira vista, você não acha?
Os navegadores que reconhecem o atributo srcset verificam a resolução da tela e baixam o que
acreditam ser a imagem mais adequada. Se o navegador estiver em um Mac com tela Retina
2x, ele poderá baixar image-400px.jpg. Se a proporção de pixels do dispositivo for 1,5x, 2,4x ou
outra, ele verifica o ambiente geral de visualização e faz a melhor seleção. É importante saber Quando usamos srcset com
que quando usamos srcset com o elemento img , estamos entregando as chaves ao navegador o elemento img, estamos
para fazer a seleção final da imagem.
permitindo que o navegador
faça a melhor seleção de
imagem.
Quando usar descritores x
Os descritores X dizem ao navegador para fazer uma seleção com base apenas na resolução
da tela, sem levar em consideração as dimensões da tela ou da janela de visualização. Por esse
motivo, os seletores x são mais usados para imagens que mantêm as mesmas dimensões de
pixel, independentemente do tamanho da tela, como logotipos, emblemas de mídia social ou
outras imagens de largura fixa.
É muito mais provável que você queira que as imagens sejam redimensionadas com base no
tamanho da tela e sejam capazes de servir imagens pequenas para pequenos dispositivos
portáteis e imagens grandes para desktops (esse é o ponto crucial dessa coisa de imagem
responsiva, afinal). Agora que você está familiarizado com o uso do atributo srcset , vamos ver
como ele pode ser usado para fornecer imagens direcionadas a vários tamanhos de tela.
Aqui é onde o srcset realmente brilha.

Imagens de largura variável (descritor w)

Ao criar uma página da Web responsiva, é provável que você queira que os tamanhos das
NOTA imagens sejam alterados com base no tamanho da janela de visualização do navegador (consulte
Observação). Isso é conhecido como uma seleção baseada em viewport. E como você é o tipo
Em um dispositivo móvel, a janela de visualização
de desenvolvedor da Web que se preocupa com a velocidade de exibição das páginas, convém
preenche toda a tela. Em um navegador de
desktop, a janela de visualização é a área onde limitar downloads de dados desnecessários fornecendo imagens de tamanho adequado.
a página é exibida, sem incluir as barras de

Para atingir esse objetivo, use os atributos srcset e size com o elemento img .
rolagem e outros "cromo" do navegador.
Como vimos nos exemplos anteriores, o srcset fornece ao navegador um conjunto de opções de
arquivo de imagem, mas desta vez, ele usa um w-descriptor (descritor de largura) que fornece a
largura real de pixel de cada imagem. O uso de srcset com um descritor w é apropriado quando
as imagens são idênticas, exceto por suas dimensões (em outras palavras, elas diferem apenas
em escala). Aqui está um exemplo de um atributo srcset que fornece quatro opções de imagem
e especifica suas respectivas larguras de pixel por meio de descritores w. Observe novamente
que toda a lista está em um único conjunto de aspas:
srcset="morangos-480.jpg 480w,
morangos-960.jpg 960w,
morangos-2400.jpg 2400w"
Usando o atributo de tamanhos
Isso é um bom começo, mas sempre que você usar w-descriptors, você também precisa usar o
O atributo de tamanhos atributo de tamanhos para informar ao navegador o tamanho aproximado que a imagem
é obrigatório quando você aparecerá no layout da página. Há um motivo muito bom (além de ser obrigatório na especificação),
usa descritores de largura. e vale a pena entender.
Quando um navegador baixa o documento HTML para uma página da Web, a primeira coisa que
ele faz é examinar todo o documento e estabelecer sua estrutura de tópicos (seu Document
Object Model, ou DOM). Então, quase imediatamente, um pré- carregador sai para pegar todas
as imagens do servidor para que estejam prontas. Finalmente, o CSS e o JavaScript são
baixados. É provável que a folha de estilo tenha instruções para layout e tamanhos de imagem,
mas no momento em que o navegador vê os estilos, as imagens já foram baixadas. Por esse
motivo, temos que dar ao navegador uma boa dica com o atributo de tamanhos se a imagem
preencherá toda a largura da janela de visualização ou apenas uma parte dela. Isso permite que
o pré-carregador escolha o arquivo de imagem correto da lista srcset .
Começaremos com o cenário mais simples em que a imagem é um banner e sempre aparece em
100% da largura da janela de visualização, independentemente do dispositivo (FIGURA 7-11).
Aqui está o elemento img completo :
<img src="morangos-640.jpg"
alt="cestos de morangos maduros"
tamanhos="100vw">

FIGURA 7-11. A imagem preenche 100% da largura da janela de visualização, independentemente de seu tamanho.
Neste exemplo, o atributo de tamanhos informa ao navegador que a imagem preenche toda a janela
de visualização usando unidades de largura da janela de visualização (vw), a unidade mais comum Navegadores que não
para o atributo de tamanhos , para que o navegador possa escolher a melhor imagem para o trabalho. support srcset e tamanhos usam
Por exemplo, 100vw se traduz em 100% da largura da janela de visualização, 50vw seria 50% e assim a imagem especificada no atributo
por diante. Você também pode usar em, px e algumas outras unidades CSS, mas não pode usar src.
porcentagens. Os navegadores que não suportam srcset e tamanhos simplesmente usam a imagem
especificada no atributo src .
Dimensionar uma imagem para preencher toda a largura do navegador é um caso bastante específico.
Mais provavelmente, suas imagens serão um componente em um layout de página responsivo que
redimensiona e reorganiza para fazer o melhor uso da largura de tela disponível.
A FIGURA 7-12 mostra uma barra lateral de fotos de alimentos que ocupam toda a largura
da tela em dispositivos pequenos, ocupam uma parte da largura em dispositivos maiores e
aparecem em três em um layout para grandes janelas do navegador.
FIGURA 7-12. A largura das imagens muda com base na largura da janela de visualização.

Para casos como esses, use o atributo de tamanhos para informar ao navegador algo sobre como a
imagem será dimensionada para cada layout. O valor de tamanhos é uma lista separada por vírgulas na
qual cada item tem duas partes. A primeira parte entre parênteses é uma condição de mídia que descreve
um parâmetro como a largura da janela de visualização. A segunda parte é um comprimento que indica a
largura que a imagem ocupará no layout se a condição da mídia for atendida. Veja como essa sintaxe se
parece:
tamanhos="(recurso de mídia: condição) comprimento,

(recurso de mídia: condição) comprimento,
(recurso de mídia: condição) comprimento"
Adicionei algumas condições de mídia ao exemplo anterior e agora temos um elemento img válido
completo para uma das imagens fotográficas na FIGURA 7-12:
<img src="morangos-640.jpg" alt="cestos de morangos maduros"

size="(max-width: 480px) 100vw,
(largura máxima: 960px) 70vw,
240px">
O atributo de tamanhos informa ao navegador o seguinte:
• Se a janela de visualização tiver 480 pixels de largura ou menos (a largura máxima é 480
pixels), a imagem preenche 100% da largura da janela de visualização.
• Se a janela de visualização for maior que 480 pixels, mas não maior que 960 pixels (largura máxima:
960px), a imagem aparecerá em 70% da janela de visualização.
(Este layout tem 15% de margens à esquerda e à direita das imagens, ou 30% no total.)
• Se a janela de visualização for maior que 960 pixels e não atender a nenhuma das condições de mídia
anteriores, a imagem será dimensionada para exatamente 240 pixels.
AVISO Agora que o navegador sabe a largura da janela de visualização e quão grande a imagem aparecerá
O atributo de tamanhos redimensionará uma

dentro dela, ele pode selecionar a imagem mais apropriada da lista srcset para download.
imagem mesmo que não haja CSS aplicado a ela.

Se houver uma regra CSS especificando o tamanho
Há um pouco mais de uso de tamanhos do que o mostrado aqui - outras condições de mídia, unidades de
da imagem que está em conflito com o valor dos tamanhos
comprimento adicionais, até mesmo a capacidade de solicitar ao navegador que calcule as larguras para
atributo, a regra de estilo vence (ou seja,
você. Se você planeja usar imagens baseadas na largura da janela de visualização em seus projetos,
ultrapassa o valor de tamanhos ).
recomendo ler as especificações para aproveitar ao máximo as possibilidades.
NOTA
Estratégias e ferramentas para produzir os conjuntos de imagens para layouts responsivos são apresentadas
no Capítulo 24, Produção de ativos de imagem.

Direção de Arte (elemento de imagem)

Até agora, analisamos a seleção de imagens com base na resolução da tela e no <imagem>…</imagem>
tamanho da janela de visualização. Em ambos os cenários, o conteúdo da imagem Especifica várias opções de imagem
não muda, apenas redimensiona.

<translation>…</translation>
Mas às vezes, redimensionar não é suficiente. Você pode querer cortar detalhes Especifica fontes de imagem alternativas
importantes de uma imagem quando ela é exibida em uma tela pequena. Você pode
querer alterar ou remover o texto da imagem se ela ficar muito pequena para ser
legível. Ou você pode querer fornecer as versões paisagem (largura) e retrato (altura)
da mesma imagem para layouts diferentes.
Por exemplo, na FIGURA 7-13, toda a imagem da mesa, bem como o prato, lê bem
Use o elemento de imagem quando
em telas maiores, mas no tamanho do smartphone, fica difícil ver os detalhes
simplesmente redimensionar a
deliciosos. Seria bom fornecer versões alternativas da imagem que fizessem sentido
imagem não for suficiente.
para as condições de navegação.
Esse jantar parece delicioso em navegadores de desktop. (1280px de

largura)
Os detalhes são perdidos quando a imagem Cortar nos detalhes mais importantes pode fazer mais
completa é reduzida em dispositivos pequenos. sentido.
(300px de largura) (300px de largura)
FIGURA 7-13. Algumas imagens ficam ilegíveis quando redimensionadas para dispositivos móveis.
Este cenário é conhecido como seleção baseada em direção de arte e é

preenchido com o elemento de imagem . O elemento picture não possui atributos;
é apenas um wrapper para alguns elementos de origem e um elemento img .
O elemento img é obrigatório e deve ser o último elemento da lista. Se a imagem
for deixado de fora, nenhuma imagem será exibida porque é a peça que é realmente

colocando a imagem na página. Vamos examinar um elemento de imagem de amostra e,

em seguida, separá-lo:
<foto>
<source media="(min-width: 1024px)" srcset="icecream-large.jpg">
<source media="(min-width: 760px)" srcset="icecream-medium.jpg">
<img src="icecream-small.jpg" alt="mão segurando casquinha de sorvete
e texto que diz Saboreie o verão">
</picture>
Este exemplo informa ao navegador que, se a janela de visualização tiver 1024
pixels de largura ou mais, use a versão grande da imagem da casquinha de sorvete.
Se for maior que 760 pixels (mas menor que 1024, como em um tablet), use a
versão média. Finalmente, para viewports menores que 760 pixels e, portanto, não
correspondem a nenhuma das consultas de mídia nos elementos de origem
anteriores , a versão pequena deve ser usada (FIGURA 7-14). A versão pequena,
conforme especificado no elemento img , será usada para navegadores que não reconhecem ima
e fonte.
Cada elemento de origem inclui um atributo de mídia e um atributo srcset . Ele

também pode usar o atributo de tamanhos , embora isso não seja mostrado no
exemplo anterior. O atributo de mídia fornece uma consulta de mídia para verificar
as condições atuais de navegação. É semelhante às condições de mídia que vimos
no exemplo anterior do srcset , mas o atributo media especifica uma consulta de
mídia CSS completa (falaremos mais sobre consultas de mídia no Capítulo 17,
Design Web Responsivo). O atributo srcset fornece a URL para a imagem a ser
usada se a consulta de mídia for uma correspondência. No exemplo anterior, há
apenas uma imagem especificada, mas também pode ser uma lista separada por
vírgulas se você quiser fornecer várias opções usando descritores x ou w.
Os navegadores baixam a imagem da primeira fonte que corresponde às condições

atuais, portanto, a ordem dos elementos de origem é importante. A URL fornecida
no atributo srcset é passada para o atributo src no img
Iphone iPad Navegador Chrome na área de trabalho
FIGURA 7-14. O elemento de imagem fornece diferentes versões de imagem a serem originadas
em vários tamanhos de tela.

elemento. Novamente, é a img que coloca a imagem na página, então não a omita. O atributo alt
para o elemento img é obrigatório, mas alt não é permitido no elemento de origem .
A direção de arte é o principal uso do elemento de imagem , mas vamos ver mais uma coisa que
ela pode fazer para completar nossa discussão sobre imagens responsivas.
Formatos de Imagem Alternativos (tipo Atributo)

Era uma vez, no início dos anos 1990, o único tipo de imagem que você podia colocar em uma
página da web era um GIF. Os JPEGs surgiram não muito tempo depois, e esperamos quase uma NOTA
década pelo suporte confiável do navegador para o formato PNG mais rico em recursos.
Os formatos de imagem bitmap, incluindo
Leva um tempo notoriamente longo para que novos formatos de imagem se tornem universalmente
WebP, JPEG 2000 e JPEG XR, são
suportados. No passado, isso significava simplesmente evitar formatos mais recentes.
discutidos com mais detalhes no Capítulo
Em um esforço para reduzir o tamanho dos arquivos de imagem, foram desenvolvidos formatos de 23, Web Image Basics.
imagem mais eficientes — como WebP, JPEG 2000 e JPEG XR — que podem compactar imagens
significativamente menores do que seus equivalentes JPEG e PNG (consulte a Nota). E mais uma
vez, alguns navegadores os suportam e outros não. A diferença é que hoje podemos usar o
elemento picture para servir os formatos de imagem mais recentes para navegadores que podem
manipulá-los e um formato de imagem padrão para navegadores que não podem. Não precisamos
mais esperar pelo suporte universal ao navegador.
No exemplo a seguir, o elemento picture especifica duas alternativas de imagem antes do JPEG
Tipos de arquivo (MIME)
alternativo listado no elemento img : A web usa um padrão

sistema para comunicar o tipo de
<foto>
<source type="image/webp" srcset="pizza.webp"> arquivos de mídia sendo transferidos
entre o servidor e o navegador.
<source type="image/jxr" srcset="pizza.jxr">
<img src="pizza.jpg" alt=""> Ele é baseado no MIME (Multipurpose
</picture> Internet Mail Extension), que foi
originalmente desenvolvido para
Para seleções baseadas em formato de imagem, cada elemento de origem tem dois atributos: o enviar anexos por e-mail. Cada
atributo srcset que vimos antes e o atributo type para especificar o tipo de arquivo (também formato de arquivo tem um tipo
conhecido como seu tipo MIME, consulte o “File (MIME ) Tipos” padronizado (como imagem,
Barra Lateral). Neste exemplo, a primeira fonte aponta para uma imagem que está no formato aplicativo, áudio ou vídeo), subtipo
que identifica o formato específico e
WebP e a segunda especifica um JPEG XR. Novamente, o navegador usa a imagem da primeira
uma ou mais extensões de arquivo. Na nossa
fonte que corresponde ao suporte de imagem do navegador, portanto, faz sentido colocá-las em
Por exemplo, o atributo type especifica
ordem do menor para o maior tamanho de arquivo. a opção WebP com seu tipo/
subtipo (imagem/webp) e usa a
extensão de arquivo apropriada
Suporte ao navegador (.webp). Outros exemplos de tipos
MIME de mídia são image/jpeg
Enquanto escrevo esta seção, parece que um novo navegador está adicionando suporte para pic (extensões .jpg, .jpeg), video/mpeg
ture, srcset e tamanhos todos os dias, mas é claro que as versões antigas do navegador têm o
mau hábito de permanecer por anos. No entanto, esse não é um motivo para evitar o uso de (extensões .mpg, .mpe, .mpeg, .m1v, .mp2 , .mp3 e .mp
A lista completa de tipos MIME
imagens responsivas. Em primeiro lugar, todos esses recursos são projetados para incluir o
registrados é publicada pela IANA
elemento img como um recurso interno para navegadores que não reconhecem a marcação mais
(Internet Assigned Numbers
recente. Na pior das hipóteses, o navegador pega a imagem especificada no elemento img . Authority) em www.iana.org/
atribuições/tipos de mídia.

Se isso não for suficiente, tente incluir o Picturefill em suas páginas da web.
Picturefill é um exemplo de polyfill, um script que faz com que navegadores mais
antigos se comportem como se suportassem uma nova tecnologia – neste caso,
imagens responsivas. Foi criado por Scott Jehl do Filament Group, criadores de
muitas ferramentas de design responsivo e desenvolvimento de front-end. Acesse scottjehl.github.io/
picturefill/ para baixar o script e ler o tutorial bem completo sobre como ele funciona e
como usá-lo.
Resumo das imagens responsivas

Esta tem sido uma longa discussão sobre imagens responsivas, e nós apenas
arranhamos a superfície. Vimos como usar o elemento img com srcset e tamanhos
para fazer seleções baseadas em proporção de pixels e tamanho da janela de
SUPORTE DO NAVEGADOR
visualização (você pode tentar no EXERCÍCIO 7-3). Também vimos como a imagem
GORJETA
O elemento pode ser usado para seleções baseadas em direção de arte e baseadas em tipo de imagem .
O site CanIUse.com é uma ótima ferramenta

Eu mantive meus exemplos curtos e agradáveis, mas saiba que é possível combinar
para verificar o suporte do navegador para HTML,
CSS e outras tecnologias web front-end. Digite
técnicas de maneiras diferentes, muitas vezes resultando em uma torre de código
picture, srcset ou tamanhos para ver onde está para cada imagem. Para ver alguns exemplos de como essas técnicas de imagem
o suporte do navegador. responsiva podem ser combinadas para atingir mais de uma condição, recomendo o
artigo de Andreas Bovens “Imagens responsivas: casos de uso e trechos de código
documentados para você começar” no site Dev.Opera (dev.opera .com/articles/
imagens-responsivas/).
Também recomendo o tutorial de 10 partes “Responsive Images 101” de Jason

Grigsby na Cloud Four. Ele entra em um pouco mais de detalhes do que eu consegui
aqui e fornece links para outros bons recursos. Comece com a “Parte 1:
Definições” (cloudfour.com/thinks/responsive-images-101-definitions/).
EXERCÍCIO 7-3. Adicionando imagens responsivas
Pronto para experimentar algumas dessas imagens responsivas? Eu recomendo baixar a versão mais
recente do Google Chrome (google.com/chrome/) ou Firefox (firefox.com) para ter certeza de que ela suporta
os recursos HTML de imagem responsiva. Os materiais para este exercício são fornecidos em
learningwebdesign.com/5e/materials. Use o diretório responsivogallery que contém um arquivo HTML inicial
e um diretório de imagens .
Vamos dar uma repaginada na página Black Goose Bistro Gallery usando imagens responsivas. Agora,
em vez de o usuário clicar em uma miniatura e ir para uma página separada, as imagens grandes
aparecem diretamente na página e são redimensionadas para preencher o espaço disponível. Pequenos
dispositivos e navegadores que não suportam imagens obtêm uma versão de 400 pixels quadrados de
cada imagem (FIGURA 7-15).
1. Abra o arquivo index.html localizado no diretório responsivogallery em um texto ou HTML

editor. Eu adicionei um elemento meta que define a janela de visualização para o mesmo tamanho que a largura
do dispositivo, o que é necessário para tornar esta página responsiva. Eu também adicionei um estilo para img
elementos que define sua largura máxima para 100% do espaço disponível. Essa é a parte que faz com
que as imagens sejam reduzidas para larguras de tela menores. Falaremos muito mais sobre

Dispositivos pequenos como o iPhone mostram Em viewports maiores que 480 pixels,
a imagem cortada de 400 pixels quadrados. como o iPad mostrado aqui, a versão
completa da imagem é usada. Ele é
redimensionado para preencher a largura
disponível da página entre as margens.
Em monitores de desktop muito grandes, a versão completa da imagem Os navegadores que não suportam a imagem exibem a imagem
é redimensionada para preencher a largura disponível. quadrada de 400 pixels especificada pelo elemento img .
FIGURA 7-15. A Galeria Black Goose Bistro com imagens responsivas no lugar.
Dispositivos menores veem uma versão quadrada cortada da imagem. Os navegadores maiores obtêm a imagem completa
que é redimensionada para preencher a largura do conteúdo.
design responsivo no Capítulo 17, então não se preocupe muito com isso agora. Eu só queria
apontar as mudanças do nosso exercício anterior.
2. Como queremos alternar entre as versões horizontal e quadrada da imagem nesta página, precisaremos usar o
elemento picture . Comece adicionando o esqueleto de um elemento de imagem no primeiro parágrafo após "Nossos
produtos assados", incluindo a imagem
wrapper e seu elemento img necessário . O elemento img aponta para a versão quadrada padrão da imagem
(bread-400.jpg). Adicione um elemento de quebra de linha após a imagem
elemento para iniciar o texto na próxima linha: ÿ

<p>
<foto>
<img src="images/bread-400.jpg" alt="close-up de pão rústico
fatiado">
</picture>
<br>Começamos nosso dia…
3. Isso cuida de dispositivos pequenos e do fallback para dispositivos não compatíveis. Agora adicione um
elemento de origem que diga ao navegador para usar uma versão paisagem de 1200 pixels da imagem
quando a janela de visualização for maior que 480 pixels:
<p>
<foto>
<source media="(min-width: 480px)"
srcset="images/bread-1200.jpg">
fatiado">
</picture>
Observe que, como há apenas uma imagem especificada na fonte, poderíamos ter usado um atributo
src simples aqui, mas temos mais trabalho a fazer, então o srcset nos prepara para a próxima etapa.
4. Como não queremos forçar uma imagem tão grande em todos, vamos dar ao navegador uma versão de
800 pixels também. (Ainda mais versões seriam úteis, mas para manter este exercício gerenciável,
vamos parar em duas.) Lembre-se de que o srcset
O atributo especifica uma lista de imagens separadas por vírgulas e suas respectivas larguras de pixel
com descritores w. Adicionei o descritor de 1200w à imagem original e adicionei a opção de 800 pixels
ao srcset. Por fim, use o atributo de tamanhos para informar ao navegador que a imagem ocupará
80% da largura da janela de visualização (a folha de estilo adiciona uma margem de 10% nos lados
esquerdo e direito, deixando 80% para o conteúdo). Agora o navegador pode escolher o tamanho mais
adequado.
<p>
<foto>
<source media="(min-width: 480px)"
srcset="images/bread-1200.jpg 1200w,
images/bread-800.jpg 800w"
tamanhos="80vw">
fatiado">
</picture>
5. Salve o arquivo. Inicie o navegador de desktop Chrome ou Firefox e redimensione a janela para o mais
estreito possível. Abra index.html e você deverá ver a versão quadrada cortada da foto do pão. Arraste
lentamente o canto da janela do navegador para torná-la mais larga. Quando ficar mais largo que 480
NOTA pixels, deve mudar para a versão completa da foto. Se você vir um pequeno “800” no canto da imagem,
isso significa que o navegador baixou bread-800.jpg para esta tarefa. Continue expandindo a janela e a
Se você não vir as imagens, pode ser imagem deve ficar cada vez maior. Se você vir “1200”, significa que está usando bread-1200.jpg. Quando
que seus nomes de caminho estejam a imagem maior estiver no cache do navegador, você não verá a versão de 800 pixels novamente. Tente
incorretos ou o diretório de imagens não tenha fazer a janela estreita e larga novamente e observe o que muda. Parabéns!
sido copiado para o seu computador.
Agora você é um web designer responsivo oficial! Tornar as janelas estreitas e largas é como passamos
boa parte do nosso dia de trabalho.
6. Adicione as duas imagens restantes à página, seguindo meu exemplo. Tente experimentar
com diferentes larguras mínima e máxima no atributo de mídia .

Teste-se
Ufa! ESTAMOS ACABANDO

Alternativas para
Isso encerra nossa exploração de imagens. Vimos como colocar imagens com o elemento Imagens responsivas
img e seus atributos src e alt necessários. Já falamos sobre a importância de um bom
Embora seja ótimo ter uma solução HTML para
texto alternativo para acessibilidade. Também analisamos algumas maneiras de incorporar obter as imagens certas para os navegadores
imagens SVG em uma página da web. Por fim, adotamos os recursos de imagem certos, o sistema atual é complicado com pilhas
responsivos recém-criados, incluindo srcset e tamanhos para o elemento img para de código e a necessidade de produzir várias
imagens. Se você trabalha em um site com muitas
direcionar telas de alta densidade ou para fornecer uma variedade de tamanhos de
imagens, pode ser incontrolável. O processamento
imagem para o navegador escolher, e os elementos de imagem e origem para direção
de imagens é uma tarefa que implora para ser
de arte e formatos de imagem alternativos. Agora tente responder a algumas perguntas automatizada. A solução: deixe o servidor fazer
para testar seus conhecimentos. isso!
Felizmente, existem muitas ferramentas e
TESTE-SE serviços, tanto de código aberto quanto pagos,

que permitem que o servidor faça o trabalho de
criar versões de imagem apropriadas em tempo
As imagens são uma grande parte da experiência na web. Responda a essas perguntas
real. Você carrega o maior tamanho disponível
para ver como você absorveu os conceitos-chave deste capítulo. As respostas corretas da imagem e deixa o servidor lidar com o resto
podem ser encontradas no Apêndice A. — não há necessidade de criar e armazenar várias
versões de cada imagem. Em geral, os serviços

1. Quais atributos devem ser incluídos em cada elemento img ?
de geração de imagens tratam apenas de
redimensionamento, e não de direção de arte ou
tipos alternativos de imagem; no entanto, pelo
2. Escreva a marcação para adicionar uma imagem chamada furry.jpg que esteja no menos um serviço (Cloudinary.com) usa a
mesmo diretório do documento atual. detecção de rosto como base para o corte de
imagens.
Alguns sistemas de gerenciamento de conteúdo

(CMSs) possuem recursos de redimensionamento
3. Cite duas razões para incluir texto alternativo para um elemento img . de imagem integrados. Outra opção é instalar o
software em seu próprio servidor. Tenha em
mente, no entanto, que exigir que o JavaScript
esteja em execução não é o ideal. Existem
também muitas soluções de terceiros que fornecem
serviços de redimensionamento de imagem (como
4. O que pode estar acontecendo de errado se suas imagens não aparecerem quando
Cloudinary.com e Kraken.io), geralmente por uma
você visualizar a página em um navegador? Há três explicações possíveis.
taxa. Para sites grandes e com imagens pesadas,
vale a pena dar uma olhada.
Jason Grigsby, da Cloud Four, compilou

uma planilha de software e serviços de
5. Qual é a diferença entre um descritor x e um descritor w?
redimensionamento de imagem que serve
como um bom ponto de partida.
Você pode acessá-lo em seu artigo,
“Serviços de redimensionamento de imagem” (cloudfour.
com/thinks/image-resizing services/)
6. Qual é a diferença entre um pixel de dispositivo e um pixel CSS (referência)?
ou em tinyurl.com/pmpbyzj.

Teste-se
7. Combine os cenários de imagem responsiva com as soluções HTML:
uma. <img src="" alt="" srcset="URL x-descriptor">
b. <img src="" alt=" srcset="URL w-descriptor" tamanhos="#">

c. <foto>
<source type="…" srcset="">
<img src="" alt="">
</picture>
d. <foto>
<source media="()" srcset="">
<img src="" alt="">
</picture>
____ Você deseja que a imagem sempre preencha a largura da janela do navegador.
____ Você deseja aproveitar a economia de arquivos do formato de imagem WebP.
____ Você deseja remover o texto de uma imagem quando ela estiver em tamanho pequeno
telas.
____ Você deseja que as imagens de seus produtos pareçam o mais nítidas possível
em telas de alta resolução.
____ Você deseja mostrar um close-up da ação em uma imagem de notícias em pequenas
telas.
____ Você deseja que a imagem seja redimensionada quando fizer parte do layout
em uma tela grande.
8. Pergunta de desafio: Descreva o que este exemplo diz ao navegador para fazer:
<foto>
<source size="(min-width: 480px) 80vw, 100vw"
srcset="photo-200.webp
200w
foto-400.webp 400w,
foto-800.webp 800w,
photo-1200.webp 1200w"
type="imagem/webp">
<img src=" foto-400.jpg" alt=""
size="(min-width: 480px) 80vw,
100vw" srcset="photo-200.jpg
200w,
foto-400.jpg 400w,
foto-800.jpg 800w,
foto-1200.jpg 1200w">
</picture>

Teste-se
9. O que é cache e como isso afeta o desempenho da página da web?
CRÉDITOS FOTOGRÁFICOS
Muitas das imagens deste capítulo são do

10. Cite uma vantagem e uma desvantagem de adicionar um SVG a uma página com o
fabuloso site de fotos royalty-free Unsplash.com:
elemento img . ravioli de Davide Ragusa, hambúrgueres de
Niklas Rhöse, casquinha de sorvete de Alex
Jones, mesa de jantar de Jay Wennington,
morangos de Priscilla Fong. Da coleção “No
Rights Restrictions” do Flickr: prato de peixe
11. Cite uma vantagem e uma desvantagem do SVG inline.

de Renata Maia, muffins de Hasma Kanouni.
Todos os outros não são creditados
imagens de domínio público.
12. Quando seria apropriado adicionar um SVG a uma página como imagem de fundo com
CSS?
13. O que esse pedaço de código está descrevendo e quando você pode precisar usá-lo?
imagem/svg+xml
14. O que esse pedaço de código está descrevendo e onde você o encontraria?
http://www.w3.org/2000/svg

Revisão do elemento: imagens
REVISÃO DO ELEMENTO: IMAGENS
A seguir estão os elementos que você aprendeu em sua exploração de marcação de imagem.
imagem Insere uma imagem embutida
alt="texto" Texto Alternativo
src="url" A localização do arquivo de imagem
srcset="lista de urls com Imagens para usar em diferentes situações

descritores"
size="listar condições Tamanhos de imagem para layouts diferentes
de mídia e tamanhos de
layout"
largura = "número" Largura do gráfico
altura="número" Altura do gráfico
usemap="usemap" Indica o mapa de imagem do lado do cliente a ser usado
foto Contêiner que fornece várias fontes para seu elemento img contido
fonte Fornece fontes alternativas para o elemento img
src="URL" Endereço do recurso de imagem
srcset="URL" Imagens para usar em diferentes situações
size =" lista de tamanhos de Tamanhos de imagem para diferentes layouts de página
origem"
media=" consulta de mídia" Consulta para determinar a mídia aplicável
type=" tipo de mídia" Tipo de mídia (MIME) de arquivo de imagem incorporado
svg Adiciona uma imagem SVG inline

CAPÍTULO
MARCAÇÃO DE TABELA 8
Antes de iniciarmos a marcação para tabelas, vamos verificar nosso progresso até agora. Nós NESTE CAPÍTULO
cobrimos muito território: como estabelecer a estrutura básica de um documento HTML, como
Como as tabelas são usadas
marcar o texto para dar significado e estrutura, como fazer links e como incorporar imagens
simples na página. Estrutura básica da tabela
Este capítulo e os próximos dois capítulos, Capítulo 9, Formulários, e Capítulo 10, Mídia
Abrangendo linhas e colunas
incorporada, descrevem a marcação para conteúdo especializado que talvez você não
precise imediatamente. Se você está ficando ansioso para fazer suas páginas parecerem Grupos de linhas e colunas
boas, pule direto para a Parte III e comece a brincar com as Folhas de Estilo em Cascata. As
Tornando as tabelas acessíveis
tabelas, formulários e capítulos de mídia estarão aqui quando você estiver pronto para eles.
Você ainda está comigo? Excelente. Vamos falar de mesas. Começaremos revisando como
as tabelas devem ser usadas e, em seguida, aprenderemos os elementos usados para criá-las.
Lembre-se, este é um capítulo HTML, então vamos nos concentrar na marcação que estrutura
o conteúdo em tabelas, e não vamos nos preocupar com a aparência das tabelas (que serão
abordadas em vários capítulos CSS na Parte III) .
COMO USAR AS TABELAS

As tabelas HTML foram criadas para casos em que você precisa adicionar material tabular
(dados organizados em linhas e colunas) a uma página da web. As tabelas podem ser usadas
para organizar cronogramas, comparações de produtos, estatísticas ou outros tipos de
informações, conforme mostrado na FIGURA 8-1. Observe que “dados” não significa
necessariamente números. Uma célula de tabela pode conter qualquer tipo de informação,
incluindo números, elementos de texto e até imagens e objetos multimídia.
Nos navegadores visuais, a disposição dos dados em linhas e colunas dá aos leitores uma
compreensão instantânea das relações entre as células de dados e seus respectivos rótulos
de cabeçalho. Tenha em mente quando você está criando tabelas, no entanto,
163
Como usar tabelas
w3c.org
wikipedia.org
mbta.org
FIGURA 8-1. Exemplos de tabelas usadas para informações tabulares, como

gráficos, calendários e agendas.
que alguns leitores ouvirão seus dados serem lidos em voz alta com um leitor de tela ou
lendo uma saída em Braille. Mais adiante neste capítulo, discutiremos as medidas que
você pode tomar para tornar o conteúdo da tabela acessível a usuários que não têm o
benefício da apresentação visual.
Nos dias anteriores às folhas de estilo, as tabelas eram a única opção para criar layouts
de várias colunas ou controlar o alinhamento e os espaços em branco. As tabelas de
layout, particularmente os complexos arranjos de tabelas aninhadas que antes eram
padrão de design da web, seguiram o caminho do dodô. Se você precisar de linhas e
colunas para fins de apresentação, existem alternativas que usam CSS para obter o efeito
desejado. Em uma abordagem conhecida como CSS Tables, as divs aninhadas fornecem
a marcação e as propriedades da tabela CSS fazem com que elas se comportem como
linhas e células no navegador. Você também pode obter muitos dos efeitos que anteriormente exigiam

Estrutura Mínima da Tabela
marcação de tabela usando técnicas Flexbox e Grid Layout (consulte o Capítulo 16, CSS
Layout com Flexbox e Grid).
Dito isso, este capítulo se concentra nos elementos de tabela HTML usados para marcar
semanticamente linhas e colunas de dados conforme descrito na especificação HTML.
ESTRUTURA MÍNIMA DA TABELA
Vamos dar uma olhada em uma tabela simples para ver do que ela é feita. Aqui está uma <tabela>…</tabela>
pequena tabela com três linhas e três colunas que lista as informações nutricionais. Conteúdo tabular (linhas e colunas)
Item do menu Calorias <tr>…</tr>

Gordura (g)
Linha da tabela
Sopa de frango 120 2
Salada César 400 26 <th>…</th>

Cabeçalho da tabela
A FIGURA 8-2 revela a estrutura desta tabela de acordo com o modelo de tabela HTML.
<td>…</td>
Todo o conteúdo da tabela vai para células organizadas em linhas.
Dados da célula da tabela
As células contêm informações de cabeçalho (títulos para as colunas, como “Calorias”) ou
dados, que podem ser qualquer tipo de conteúdo.
tabela
célula de cabeçalho célula de cabeçalho célula de cabeçalho

fileira Item do menu Calorias Gordo
célula de dados célula de dados célula de dados

fileira Sopa de frango 120 2
célula de dados célula de dados célula de dados

fileira Salada César 400 26
FIGURA 8-2. As tabelas são compostas de linhas que contêm células. As células são os recipientes
para o conteúdo.
Bastante simples, certo? Agora vamos ver como essas partes se traduzem em elementos
(FIGURA 8-3).
<tabela>
<tr> <th>Item de menu</th> <th>Calorias</th> <th>Gordura</th> </tr>
<td>Sopa de macarrão
<tr> <td>120</td> <td>2</td> </tr>
com frango</td>
<tr> <td>Salada César</td> <td>400</td> <td>26</td> </tr>
</table>
FIGURA 8-3. Os elementos que compõem a estrutura básica de uma tabela.
8. Marcação da Tabela 165

Estrutura Mínima da Tabela
A FIGURA 8-3 mostra os elementos que identificam a tabela (tabela), linhas (tr, para “linha da tabela”)
e células (th, para “cabeçalhos da tabela” e td, para “dados da tabela”). As células são o coração da
tabela, porque é para onde vai o conteúdo real. Os outros elementos apenas mantêm as coisas juntas.
Mesas de estilo
Depois de construir a estrutura da tabela na O que não vemos são elementos de coluna. O número de colunas em uma tabela está implícito no
marcação, não há problema em adicionar uma
número de células em cada linha. Essa é uma das coisas que tornam as tabelas HTML potencialmente
camada de estilo para personalizar sua
complicadas. As linhas são fáceis - se você quiser que a tabela tenha três linhas, basta usar três
aparência.
elementos tr . As colunas são diferentes. Para uma tabela com quatro colunas, você precisa garantir
Folhas de estilo podem e devem ser usadas para
controlar esses aspectos da apresentação visual
que cada linha tenha quatro elementos td ou th . (Há mais sobre a história da coluna, que abordo na
de uma tabela. Veremos todas as ferramentas de seção “Grupos de Linhas e Colunas” mais adiante neste capítulo.)
formatação necessárias nos capítulos a seguir:
Escrito em um documento de origem, a marcação para a tabela na FIGURA 8-3

Capítulo 12, Formatando Texto:
se parece com o exemplo a seguir. É comum empilhar os elementos th e td para torná-los mais fáceis
• Configurações de fonte para o conteúdo da célula
de encontrar na fonte. Isso não afeta como o navegador os renderiza.
• Cor do texto nas células
Capítulo 13, Cores e

<tabela>
Planos de fundo:
<tr>
• Cores de fundo <th>Item de menu</th>
• Imagens de fundo lado a lado <th>Calorias</th>
<th>Gordura (g)</th>
Capítulo 14, Pensando Dentro do
</tr>
Caixa:
<tr>
• Dimensões da mesa (largura e altura) <td>Sopa de macarrão com frango</td>
<td>120</td>
• Fronteiras
<td>2</td>
</tr>
• Preenchimento da célula (espaço ao redor <tr>
do conteúdo da célula) • Margens ao redor <td>Salada César</td>
<td>400</td>
da mesa
<td>26</td>
Capítulo 19, Mais técnicas de CSS: </tr>
• Propriedades especiais para controle </table>
bordas e espaçamento entre células
Lembre-se, todo o conteúdo deve ir em células, ou seja, dentro dos elementos td ou th .
Você pode colocar qualquer conteúdo em uma célula: texto, gráfico ou até mesmo outra tabela.
As tags de início e fim da tabela identificam o início e o fim do material tabular. O elemento de tabela
DIVERTIDO COM AS ESPECIFICAÇÕES pode conter diretamente apenas algum número de elementos tr (linha), uma legenda e, opcionalmente,
os elementos do grupo de linhas e colunas listados na seção "Grupos de linhas e colunas" . A única
De acordo com a especificação HTML5,
coisa que pode entrar no elemento tr é algum número de elementos td ou th . Em outras palavras,
um elemento de tabela pode conter “nesta
ordem: opcionalmente um elemento de legenda ,
pode não haver conteúdo de texto na tabela e elementos tr que não estejam contidos em um td ou
seguido por zero ou mais colgroup th.

elementos, seguidos opcionalmente por um
elemento thead , seguido por zero ou mais
elementos tbody ou um ou mais elementos tr , Finalmente, a FIGURA 8-4 mostra como a tabela ficaria em uma página da Web simples, conforme
seguidos opcionalmente por um elemento tfoot exibida por padrão em um navegador. Eu sei que não é emocionante. A excitação acontece no CSS.
(mas só pode haver um elemento tfoot filho no O que vale a pena notar é que as tabelas sempre começam em novas linhas por padrão nos
total).”
navegadores.
Bem, estou feliz por termos esclarecido isso!

Cabeçalhos de tabela
EXERCÍCIO 8-1.
Fazendo uma mesa simples
Tente escrever a marcação para a tabela mostrada na
FIGURA 8-5. Você pode abrir um editor de texto ou
simplesmente anotá-lo no papel. A marcação final é
fornecida na pasta de materiais (www.
learningwebdesign.com/5e/materials).
Observe que adicionei uma borda de 1 pixel ao redor
das células com uma regra de estilo apenas para deixar
a estrutura clara. Se você quiser bordas em suas tabelas,

FIGURA 8-4. A renderização padrão da nossa tabela de amostra em um navegador. copie este elemento de estilo no cabeçalho do(s)
documento(s) que você criou para os exercícios deste

Aqui está a fonte para outra tabela. Você pode dizer quantas linhas e colunas ele terá capítulo:
quando for exibido em um navegador?
<tabela> <estilo>
<tr> td, th {
<th>Hambúrgueres</th> borda: cinza sólido de 1px;
<td>Carne orgânica alimentada com capim</td>
<td>Feijão Preto</td> } </style>
</tr> Certifique-se de fechar todos os elementos da tabela.
<tr>
Tecnicamente, você não é obrigado a fechar os
<th>Batatas</th>
elementos tr, th e td , mas eu quero que você adquira
<td>Batata Idaho cortada à mão</td>
o hábito de escrever código-fonte organizado para
<td>Batata doce temperada</td>
</tr> máxima previsibilidade em todos os dispositivos de
</table> navegação.
Se você adivinhou que é uma tabela com duas linhas e três colunas, acertou! Dois
elementos tr criam duas linhas; um th e dois elementos td em cada linha criam três colunas.
CABEÇALHOS DE TABELA
Como você pode ver na FIGURA 8-4, o texto marcado como cabeçalhos (th elementos) é
exibido de forma diferente das outras células na tabela (td elementos). A diferença, no
entanto, não é puramente cosmética. Os cabeçalhos de tabela são importantes porque FIGURA 8-5. Escreva a marcação para esta tabela.
fornecem informações ou contexto sobre as células na linha ou coluna que precedem. O
elemento th pode ser tratado de forma diferente do tds por dispositivos de navegação
alternativos. Por exemplo, leitores de tela podem ler o cabeçalho em voz alta antes de cada
célula de dados (“Item de menu: Salada Caesar, Calories: 400, Fat-g: 26”).
Desta forma, os cabeçalhos são uma ferramenta chave para tornar o conteúdo da tabela
acessível. Não tente falsificá-los formatando uma linha de elementos td de forma diferente
do resto da tabela. Por outro lado, não evite usar th elementos por causa de sua renderização
padrão (negrito e centralizado). Em vez disso, marque os cabeçalhos semanticamente e
altere a apresentação posteriormente com uma regra de estilo.
Isso cobre o básico. Antes de ficarmos mais sofisticados, experimente o EXERCÍCIO 8-1.

Células Abrangentes
EXERCÍCIO 8-2. CÉLULAS DISTRIBUÍDAS

Extensões de coluna
Uma característica fundamental da estrutura da tabela é a extensão da célula, que é o
alongamento de uma célula para cobrir várias linhas ou colunas. A abrangência de células permite
Tente escrever a marcação para a tabela criar estruturas de tabela complexas, mas tem o efeito colateral de tornar a marcação um pouco
mostrada na FIGURA 8-7. Você pode abrir um
mais difícil de acompanhar. Também pode tornar potencialmente mais difícil para os usuários
editor de texto ou simplesmente anotá-lo no
com leitores de tela seguirem.
papel. Eu adicionei bordas para revelar a estrutura
da célula na figura, mas sua tabela não as terá a
Você cria um cabeçalho ou intervalo de célula de dados adicionando os atributos colspan ou
menos que você adicione a folha de estilo mostrada
rowspan , como discutiremos a seguir.
no EXERCÍCIO 8-1.
Novamente, a marcação final é fornecida na
pasta de materiais .
Algumas dicas: Extensões de coluna

• A primeira e a terceira linhas mostram que a As extensões de coluna, criadas com o atributo colspan no elemento td ou th , estendem uma
tabela tem um total de três colunas.
célula para a direita para abranger as colunas subsequentes (FIGURA 8-6).
• Quando uma célula é estendida, seu td Aqui, uma extensão de coluna é usada para aplicar um cabeçalho a duas colunas (adicionei uma
elemento não aparece na tabela. borda ao redor das células para revelar a estrutura da tabela na captura de tela).
<tabela>
<tr>
<th colspan="2">Gordura</th>
</tr>
<tr>
<td>Gordura saturada (g)</td>
<td>Gordura Insaturada (g)</td>
FIGURA 8-7. Pratique as extensões de coluna </tr>
escrevendo a marcação para esta tabela. </table>
FIGURA 8-6. O atributo colspan estende uma célula para a direita para abranger o número especificado
de colunas.
AVISO Observe na primeira linha (tr) que há apenas um º elemento, enquanto a segunda linha tem dois
elementos td . O th para a coluna que foi estendida não está mais na origem; a célula com o
Tenha cuidado com os valores de colspan .
colspan representa isso. Cada linha deve ter o mesmo número de células ou valores colspan
Se você especificar um número que exceda o
número de colunas na tabela, os navegadores equivalentes . Por exemplo, há dois elementos td e o valor de colspan é 2, portanto, o número
adicionarão colunas à tabela existente, o que implícito de colunas em cada linha é igual.
normalmente estraga tudo.
Tente fazer a extensão das colunas no EXERCÍCIO 8-2.

Acessibilidade da mesa
Extensões de linha EXERCÍCIO 8-3.
Os intervalos de linha, criados com o atributo rowspan , funcionam exatamente como os Períodos de linha
intervalos de coluna, mas fazem com que a célula se estenda para baixo em várias linhas. Neste
exemplo, a primeira célula da tabela se estende por três linhas (FIGURA 8-8). Tente escrever a marcação para a tabela
<tabela> mostrada na FIGURA 8-9. Lembrar
<tr> que as células que são estendidas não aparecem
<th rowspan="3"> Tamanho da veiculação</th> no código da tabela.
<td>Pequeno (8 onças)</td> Algumas dicas:
</tr>
<tr> • As linhas sempre se estendem para baixo,
<td>Médio (16 onças)</td> portanto, a célula “laranja” faz parte da primeira
</tr> linha, mesmo que seu conteúdo esteja
<tr> centralizado verticalmente.
<td>Grande (24 onças)</td>
• As células que são estendidas não
</tr>
</table> aparecem no código.
Novamente, observe que os elementos td para as células que foram estendidas (as primeiras
células nas linhas restantes) não aparecem na origem. O rowspan="3" implica células para as
duas linhas subsequentes, portanto, nenhum elemento td é necessário.
Se você adorava estender colunas, vai adorar estender linhas no EXERCÍCIO 8-3.
FIGURA 8-9. Pratique intervalos de linha

escrevendo a marcação para esta tabela.
FIGURA 8-8. O atributo rowspan estende uma célula para baixo para abranger o número especificado de linhas.
Espaço dentro e entre as células
Por padrão, as tabelas se expandem apenas o suficiente para caber no conteúdo das células,
que podem parecer um pouco apertadas. Versões antigas do HTML incluíam atributos
cellpadding e cellpacing para adicionar espaço dentro e entre células, mas eles foram expulsos
do HTML5 por serem marcações obsoletas e de apresentação.
A maneira correta de ajustar o espaçamento das células da tabela é com folhas de estilo, é claro.
A seção “Estilizando Tabelas” no Capítulo 19, Mais Técnicas de CSS aborda o espaçamento
das células.
ACESSIBILIDADE DE MESA
Como web designer, é importante que você sempre tenha em mente como o conteúdo do seu
site será usado pelos visitantes com deficiência visual. É especialmente desafiador entender o
material tabular usando um leitor de tela, mas a especificação HTML fornece medidas para
melhorar a experiência e tornar seu conteúdo mais compreensível.

Acessibilidade da mesa
Descrevendo o conteúdo da tabela
<caption>…</caption> A maneira mais eficaz de fornecer aos usuários com deficiência visual uma visão geral de
Título ou descrição a ser exibido com a tabela sua tabela é dar a ela um título ou descrição com o elemento de legenda . As legendas são
exibidas ao lado da tabela (geralmente, acima dela) e podem ser usadas para descrever o
conteúdo da tabela ou fornecer dicas sobre como ela é estruturada.
Quando usado, o elemento de legenda deve ser a primeira coisa dentro do elemento de
tabela , conforme mostrado neste exemplo, que adiciona uma legenda ao gráfico nutricional
do início do capítulo:
<tabela>
<caption>Informações Nutricionais</caption>
<tr>
<th>Item de menu</th>
<th>Calorias</th>
<th>Gordura (g)</th>
</tr>

</table>
A legenda é exibida acima da tabela por padrão, conforme mostrado na FIGURA 8-10,
embora você possa usar uma propriedade de folha de estilo para movê-la abaixo da tabela
(lado da legenda: parte inferior).
FIGURA 8-10. A legenda da tabela é exibida acima da tabela por padrão.
Para descrições mais longas, você pode considerar colocar a tabela em uma figura
elemento e usando o elemento figcaption para a descrição. A especificação HTML5 tem
várias sugestões para fornecer descrições de tabela (www.w3.org/TR/html5/tabular-
data.html#table-descriptions-techniques).
Conectando células e cabeçalhos
Discutimos os cabeçalhos brevemente como um método direto para melhorar a acessibilidade

do conteúdo da tabela, mas às vezes pode ser difícil saber qual cabeçalho se aplica a quais
células. Por exemplo, os cabeçalhos podem estar na borda esquerda ou direita de uma linha
em vez de no topo de uma coluna. E embora possa ser fácil para os usuários com visão
compreender a estrutura de uma tabela de relance, para os usuários que ouvem os dados
como texto, a organização geral não é tão clara. Os atributos scope e headers permitem que
os autores associem explicitamente os cabeçalhos e seus respectivos conteúdos.

Grupos de linhas e colunas
alcance
O atributo scope associa um cabeçalho de tabela à linha, coluna, grupo de linhas (como tbody) ou
ALERTA DE SUPORTE DO NAVEGADOR
grupo de colunas no qual ele aparece usando os valores row, col, rowgroup ou colgroup,
respectivamente. Este exemplo usa o atributo scope para declarar que uma célula de cabeçalho se Embora os recursos avançados de mesa destinados a
aplica à linha atual: melhorar a acessibilidade estejam nas especificações
há muitos anos, o suporte por leitores de tela e outros

<tr>
dispositivos de assistência não é confiável, na melhor
<th scope="row">Marte</th> das hipóteses. Ainda é recomendado que você marque
<td>.95</td>
<td>.62</td> seus dados semanticamente dentro das células da
<td>0</td> tabela e que eles façam sentido quando lidos em ordem
</tr> a partir da fonte, que é exatamente como alguns de
Especialistas em acessibilidade recomendam que cada elemento contenha um escopo seus visitantes podem encontrá-los.
atributo para tornar seus dados associados explicitamente claros.
cabeçalhos
Para tabelas realmente complicadas nas quais o escopo não é suficiente para associar uma célula de
dados da tabela ao seu respectivo cabeçalho (como quando a tabela contém várias células estendidas),
o atributo headers é usado no td
elemento para vinculá-lo explicitamente ao valor de id de um cabeçalho . Neste exemplo, o
conteúdo da célula “.38” está vinculado ao cabeçalho “Diâmetro medido em terras”:
<th id="diameter">Diâmetro medido em terras</th>


<td headers="diameter">.38</td>

Infelizmente, o suporte ao recurso id/headers não é confiável. A prática recomendada é criar tabelas
de forma que um escopo simples
atributo fará o trabalho.
Esta seção é obviamente apenas a ponta do iceberg da acessibilidade de tabelas.

As instruções detalhadas sobre a criação de tabelas acessíveis estão além do escopo deste livro
para iniciantes. Se você quiser saber mais, recomendo “Criando Tabelas Acessíveis” no WebAIM
(webaim.org/techniques/tables/data) como um excelente ponto de partida.
Há mais um conjunto importante de elementos para ajudar a tornar clara a estrutura semântica
de uma tabela: elementos de agrupamento de linhas e colunas.
GRUPOS DE LINHAS E COLUNAS

As tabelas de amostra que vimos até agora neste capítulo foram reduzidas ao essencial para
deixar a estrutura clara enquanto você aprende como as tabelas funcionam. Mas as tabelas no
mundo real nem sempre são tão simples. Confira a beleza na FIGURA 8-11 da especificação
CSS Writing Modes Level 3. Você pode identificar três grupos de colunas (um com cabeçalhos,
dois com duas colunas cada) e três agrupamentos de linhas (cabeçalhos, dados e uma nota de
rodapé).

Grupos de linhas e colunas
Agrupamentos de tabelas conceituais como esses são marcados com elementos de grupo de linhas
e grupos de colunas que fornecem estrutura semântica adicional e mais “ganchos” para estilo ou
script. Por exemplo, os grupos de linhas e colunas na FIGURA 8-11 foram estilizados com bordas
VER FONTE E
mais grossas para destacá-los visualmente.
Veja a fonte da tabela na FIGURA
8-11 em www.w3.org/TR/
css-writing-modes-3/#unicode-bidi
(você precisa rolar um pouco para baixo).
A fonte é muito longa para imprimir aqui, mas
está claramente marcada e fácil de seguir.
Observe que ele usa todos os elementos do
grupo de linhas, grupos de colunas e o
atributo scope que vimos na última seção
para associar
cabeçalhos com linhas. Existem vários
tabelas interessantes nesta página para

seu prazer de visualização da fonte.
FIGURA 8-11. Um exemplo de uma tabela com grupos de linhas e colunas (da
especificação CSS Writing Modes Level 3).
Elementos do Grupo de Linhas
<thead>…</thead> Você pode descrever linhas ou grupos de linhas como pertencentes a um cabeçalho, rodapé ou
Grupo de linhas do cabeçalho da tabela corpo de uma tabela usando os elementos thead, tfoot e tbody , respectivamente.
Alguns agentes de usuário (outra palavra para navegador) podem repetir as linhas de cabeçalho e
<tbody>…</tbody> rodapé em tabelas que abrangem várias páginas. Por exemplo, as linhas de cabeçalho e rodapé
Grupo de linhas do corpo da tabela
podem ser impressas em todas as páginas de uma tabela de várias páginas. Os autores também
podem usar esses elementos para aplicar estilos a várias regiões de uma tabela.
<tfoot>…</tfoot>
Grupo de linhas do rodapé da tabela Os elementos do grupo de linhas podem conter apenas um ou mais elementos tr . Eles não
contêm conteúdo de texto direto. O elemento thead deve aparecer primeiro, seguido por qualquer
número de elementos tbody , seguido por um tfoot opcional.
Esta é a marcação do grupo de linhas para a tabela na FIGURA 8-11 (td e os elementos estão
ocultos para economizar espaço):
<tabela>
…
<thead>

<tr></tr>
<tr></tr>
<tr></tr>
<thead>
<tbody>

<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>

Finalizando as Tabelas
<tfoot>

<tr></tr>
</tfoot>
</table>
Elementos do Grupo de Colunas
Como você aprendeu, as colunas estão implícitas no número de células (td ou th) em cada <colgroup>…</colgroup>
linha. Você pode agrupar colunas semanticamente (e atribuir valores de id e classe ) usando Um grupo de colunas semanticamente relacionado
o elemento colgroup .
<col>…</col>
Os grupos de colunas são identificados no início da tabela, logo após a legenda Uma coluna em um grupo de colunas
se houver um, e eles dão ao navegador um pequeno aviso sobre a disposição das colunas
na tabela. O número de colunas que um colgroup representa é especificado com o atributo
span . Aqui está a seção do grupo de colunas no início da tabela na FIGURA 8-11:
<tabela>
<caption>…</caption>
<colgroup></colgroup>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>

Isso é tudo o que há para isso. Se você precisar acessar colunas individuais em um grupo
col para script ou estilo, identifique-as com elementos col . A seção do grupo de colunas
anterior também poderia ter sido escrita assim:
<colgroup></colgroup>
<colgroup>
<col class="iniciar">
<col class="fim">
</colgroup>
<colgroup>
<col class="iniciar">
<col class="fim">
</colgroup>
Observe que os elementos colgroup não contêm conteúdo — eles apenas fornecem uma
NOTA
indicação da estrutura de coluna semanticamente relevante. Os elementos vazios são
usados como identificadores para scripts ou estilos, mas não são obrigatórios. Quando os elementos colgroup contêm col
elementos, eles não devem ter um vão
atributo.
ENCERRANDO AS TABELAS
Este capítulo forneceu uma boa visão geral dos componentes das tabelas HTML.
O EXERCÍCIO 8-4 combina a maior parte do que abordamos para dar a você um pouco
mais de prática na criação de tabelas.

Finalizando as Tabelas
EXERCÍCIO 8-4. O desafio da mesa
Agora é hora de reunir as habilidades de escrita de tabelas que 4. Comece com a linha superior e preencha os elementos th e td de
você adquiriu neste capítulo. Seu desafio é escrever o documento de da esquerda para a direita, incluindo qualquer extensão de linha ou coluna conforme necessário.
origem para a tabela mostrada na FIGURA 8-12. Eu ajudo com a primeira linha.
A primeira célula (a que está no canto superior esquerdo) abrange a

altura de duas linhas, portanto, obtém um atributo rowspan . vou usar um th
aqui para mantê-lo consistente com o resto da linha. Esta célula não tem
conteúdo:
<tabela>
<tr>
<th rowspan="2"></th>
</tr>
A célula na segunda coluna da primeira linha se estende pela largura de

duas colunas, portanto, obtém um atributo colspan :
<tabela>
FIGURA 8-12. O desafio da mesa.
<tr>
Vou guiá-lo através de um passo de cada vez.
<th colspan="2">Um cabeçalho comum para dois
1. Primeiro, abra um novo documento em seu editor de texto e subtítulos</th>
configure sua estrutura geral (DOCTYPE, html, head, title e body </tr>
elementos). Salve o documento como table.html no diretório de sua
A célula na terceira coluna foi estendida pelo colspan que acabamos
escolha.
de adicionar, então não precisamos incluí-la na marcação. A célula na
2. Em seguida, para deixar os limites das células e da tabela claros quando quarta coluna também se estende por dois
você verificar seu trabalho, vou pedir que você adicione algumas regras linhas:
simples de folha de estilo ao documento. Não se preocupe em entender
<tabela>
exatamente o que está acontecendo aqui (embora seja bastante intuitivo);
<tr>
basta inserir este elemento de estilo no cabeçalho do documento exatamente
como você o vê aqui:
<th colspan="2">Um cabeçalho comum para dois
<cabeça> subtítulos</th>
<title>Desafio de mesa</title> <th rowspan="2">Cabeçalho 3</th>
<estilo> </tr>
td, th { borda: 1px sólido #CCC; }
5. Agora é a sua vez. Continue preenchendo os elementos th e td para as quatro
tabela { borda: preto sólido de 1px; }
linhas restantes da tabela. Aqui está uma dica: a primeira e a última células da
</style>
</head> segunda linha foram estendidas. Além disso, se estiver em negrito no exemplo,
torne-o um cabeçalho.
3. Agora é hora de começar a construir a tabela. Normalmente, começo
6. Para completar o conteúdo, adicione o título sobre a tabela usando
configurando a tabela e adicionando quantos elementos de linha vazios forem
o elemento de legenda .
necessários para a tabela final como espaços reservados, conforme mostrado
aqui. Você pode dizer pela figura que existem cinco linhas nesta tabela: 7. Use o atributo scope para certificar-se de que os cabeçalhos Thing A, Thing B
e Thing C estejam associados a suas respectivas linhas.
<corpo>
<tabela> 8. Finalmente, forneça os grupos de linhas e colunas da tabela para maior clareza
<tr></tr> semática. Não há tfoot nesta tabela. Existem dois grupos de colunas: uma
<tr></tr> coluna para cabeçalhos, o restante para dados. Use o intervalo
<tr></tr> atributo (sem necessidade de identificação de coluna individual).
<tr></tr>
9. Salve seu trabalho e abra o arquivo em um navegador. A tabela deve se
<tr></tr>
parecer com a desta página. Se não, volte e ajuste sua marcação. Se você
</table>
estiver perplexo, a marcação final para este exercício é fornecida na pasta de
</body>
materiais .

Teste-se
TESTE-SE
As respostas a essas perguntas aparecem no Apêndice A.
1. Quais são as partes (elementos) de uma tabela HTML básica?
2. Quais elementos uma tabela pode conter diretamente (ou seja, filhos de primeiro nível)?
3. Que elementos um tr pode conter?
4. Quando você usaria o elemento col (coluna)?
5. Encontre cinco erros nesta marcação de tabela:
<caption>Primeiro horário de televisão 1965</caption>

<table>
Quinta à noite
<tr></tr>
<th>7:30</th>
<th>8:00</th>
<th>8:30</th>
<tr>
<td>Festa</td>
<td>Donna Reed Show</td>
<td>Enfeitiçada</td> <tr>
<colspan="2">Laredo</colspan>
<td>Daniel Boone</td> </tr> </
table>

Revisão do elemento: tabelas
REVISÃO DO ELEMENTO: TABELAS
A seguir, um resumo dos elementos que abordamos neste capítulo.
tabela Estabelece um elemento de tabela
tr Estabelece uma linha dentro de uma tabela
td Estabelece uma célula dentro de uma linha da tabela
colspan="número" Número de colunas que a célula deve abranger
rowspan="número" Número de linhas que a célula deve abranger
headers="nome do cabeçalho " Associa a célula de dados a um cabeçalho
º Cabeçalho da tabela associado a uma linha ou coluna
abr="texto" Rótulo alternativo para quando a célula de cabeçalho é

referenciada em outros contextos
colspan="número" Número de colunas que a célula deve abranger
rowspan="número" Número de linhas que a célula deve abranger
headers="nome do cabeçalho " Associa um cabeçalho a outro cabeçalho
escopo="linha|col| Associa o cabeçalho a uma linha, grupo de linhas, coluna

rowgroup|colgroup" ou grupo de colunas
rubrica Dá à tabela um título que é exibido no navegador
colgroup Declara um grupo de colunas
span="número" Número de colunas que o grupo de colunas abrange; não

pode ser usado quando o grupo col contém elementos col
colo Declara uma coluna
intervalo="número" Número de colunas que a coluna abrange
corpo Identifica um grupo de linhas do corpo da tabela
cabeça Identifica um grupo de linhas de cabeçalho de tabela
tfoot Identifica um grupo de linhas de rodapé de tabela

CAPÍTULO
FORMULÁRIOS 9
Não demorou muito para a web mudar de uma rede de páginas para ler para um lugar onde você vai NESTE CAPÍTULO
para fazer as coisas – fazer compras, reservar passagens de avião, assinar petições, pesquisar um
Como funcionam os formulários
site, postar um tweet… sobre!
Os formulários da Web lidam com todas essas interações.
Elementos para adicionar
Na verdade, em resposta a essa mudança de página para aplicativo, o HTML5 introduziu uma widgets de formulário
abundância de novos controles e atributos de formulário que facilitam o preenchimento de formulários

Tornando os formulários acessíveis
pelos usuários e a criação dos desenvolvedores. Tarefas que tradicionalmente dependiam de JavaScript
podem ser tratadas apenas por marcação e comportamento do navegador nativo. O HTML5 introduz Noções básicas de design de formulário
vários novos elementos relacionados a formulários, 12 novos tipos de entrada e muitos novos atributos
(eles estão listados na TABELA 9-1 no final deste capítulo). Alguns desses recursos estão esperando
que a implementação do navegador seja atualizado, portanto, terei certeza de observar quais controles
podem não ser universalmente suportados.
Este capítulo apresenta formulários da web, como eles funcionam e a marcação usada para criá-los.
Também discutirei brevemente a importância do design de formulários da web.
COMO FUNCIONAM OS FORMULÁRIOS
Há duas partes em um formulário de trabalho. A primeira parte é o formulário que você vê na própria
página que é criada usando a marcação HTML. Os formulários são compostos de botões, campos de
entrada e menus suspensos (conhecidos coletivamente como controles de formulário) usados para
coletar informações do usuário. Os formulários também podem conter texto e outros elementos.
O outro componente de um formulário da web é um aplicativo ou script no servidor que processa as

informações coletadas pelo formulário e retorna uma resposta apropriada. É o que faz o formulário
funcionar. Em outras palavras, postar um
177
Como funcionam os formulários
Documento HTML com elementos de formulário não é suficiente. Aplicativos e scripts da

Web exigem conhecimento de programação que está além do escopo deste livro, mas a
barra lateral “Como fazer com que seus formulários funcionem” , mais adiante neste
capítulo, fornece algumas opções para obter os scripts de que você precisa.
Da entrada de dados à resposta

Se você vai criar formulários da web, é benéfico entender o que está acontecendo nos
bastidores. Este exemplo rastreia as etapas de uma transação usando um formulário simples
que reúne nomes e endereços de e-mail para uma lista de discussão; no entanto, é típico do
processo para muitas formas.
1. Sua visitante — vamos chamá-la de Sally — abre a página com um formulário da web na
janela do navegador. O navegador vê os elementos de controle de formulário na
marcação e os renderiza com os controles de formulário apropriados na página, incluindo
dois campos de entrada de texto e um botão Enviar (mostrado na FIGURA 9-1).
2. Sally gostaria de se inscrever para esta lista de discussão, então ela insere seu nome e
endereço de e-mail nos campos e envia o formulário clicando no botão Enviar.
3. O navegador coleta as informações inseridas, codifica-as (consulte a barra lateral “Uma

palavra sobre codificação”) e as envia para o aplicativo da Web no servidor.
4. O aplicativo da web aceita as informações e as processa (ou seja, faz o que for
programado para fazer com elas). Neste exemplo, o nome e o endereço de e-mail são
adicionados a um banco de dados de lista de endereçamento.
5. O aplicativo da web também retorna uma resposta. O tipo de resposta enviada de volta
depende do conteúdo e da finalidade do formulário. Aqui, a resposta é uma simples
página da web dizendo obrigado por se inscrever na lista de discussão. Outros
aplicativos podem responder recarregando a página de formulário com informações
atualizadas, movendo o usuário para outra página de formulário relacionada ou emitindo
uma mensagem de erro se o formulário não for preenchido corretamente, para citar
apenas alguns exemplos.
6. O servidor envia a resposta do aplicativo da web de volta ao navegador, onde é exibida.

Sally pode ver que o formulário funcionou e que ela foi adicionada à lista de discussão.
Uma palavra sobre codificação

Os dados do formulário são codificados pelo mesmo método usado para URLs. Espaços
e outros caracteres que não são permitidos são traduzidos em seus equivalentes hexadecimais.
Por exemplo, cada caractere de espaço nos dados de formulário coletados é representado pelo
caractere + ou %20 e um caractere de barra (/) é substituído por %2F. Você não precisa se
preocupar com isso; o navegador lida com isso automaticamente.

O elemento formulário
Nome = Sally Braço Forte

E-mail = strongarm@example.com
Dados aplicativo da web

(armazena dados no banco de dados)
Resposta
(HTML)
FIGURA 9-1. O que acontece nos bastidores quando um formulário da web é enviado.
O ELEMENTO DE FORMA
Os formulários são adicionados às páginas da Web com (sem surpresa aqui) o elemento de <form>…</form>
formulário . O elemento de formulário é um contêiner para todo o conteúdo do formulário, Formulário interativo
incluindo alguns controles de formulário, como campos e botões de entrada de texto. Também
pode conter elementos de bloco (h1, p e listas, por exemplo). No entanto, pode não
conter outro elemento de formulário .
Este documento fonte de amostra contém um formulário semelhante ao mostrado em

FIGURA 9-1: DICA DE MARCAÇÃO
<!DOCTYPEhtml>
Tenha cuidado para não aninhar elementos de formulário
<html>
<cabeça> ou permitir que eles se sobreponham. Um formulário
elemento deve ser fechado antes que
<title>Inscrição na lista de e-mails</title>
<meta charset="utf-8"> o próximo comece.
</head>
9. Formulários 179
<corpo>
<h1>Inscrição na lista de e-mails</h1>
NOTA
<form action="/mailinglist.php" method="POST">
<fieldset>
É uma prática recomendada atual envolver
controles de formulário em elementos HTML <legend>Junte-se à nossa lista de e-mail</legend>
<p>Receba notícias sobre a banda, como datas de turnês e lançamentos especiais
semânticos, como listas ou divs. Listas
de MP3 enviados para sua caixa de entrada.</p>
ordenadas, conforme mostrado neste exemplo, <ol>
são uma solução popular, mas saiba que <li><label for="firstlast">Nome:</label>
geralmente há estilos padrão que você precisará <input type="text" name="fullname" id="firstlast"></li>
<li><label for="email">E-mail:</label>
limpar antes de estilizá-los, principalmente em
<input type="text" name="email" id="email"></li>
navegadores móveis. O conjunto de campos, legenda e rótulo </ol>
os elementos usados no exemplo melhoram a <input type="submit" value="Submit">
acessibilidade. Eles são explicados mais adiante </fieldset>
neste capítulo.
</form>
</body>
</html>
Além de ser um contêiner para elementos de controle de formulário, o elemento de formulário

possui alguns atributos necessários para interagir com o programa de processamento de
formulários no servidor. Vamos dar uma olhada em cada um.
O atributo de ação
O atributo action fornece o local (URL) do aplicativo ou script que será usado para processar
o formulário. O atributo action neste exemplo envia os dados para um script chamado
mailinglist.php:
<form action="/mailinglist.php" method="POST">...</form>
O sufixo .php indica que este formulário é processado por um script escrito na linguagem de
script PHP, mas os formulários da web podem ser processados por qualquer uma das seguintes
tecnologias:
• PHP (.php) é uma linguagem de script de código aberto mais comumente usada com o
servidor web Apache. É a opção de processamento de formulários mais popular e
amplamente suportada.
• Microsoft ASP (Active Server Pages; .asp) é um ambiente de programação

para o Microsoft Internet Information Server (IIS).
• ASP.NET da Microsoft (Active Server Page; .aspx) é uma nova linguagem da Microsoft que
foi projetada para competir com o PHP.
• Ruby on Rails. Ruby é a linguagem de programação usada com a plataforma Rails. Muitos
aplicativos da web populares são construídos com ele.
• JavaServer Pages (.jsp) é uma tecnologia baseada em Java semelhante ao ASP.
• Python é uma linguagem de script popular para aplicativos da Web e de servidor.
Existem outras opções de processamento de formulários que podem ter seus próprios sufixos
ou nenhum (como é o caso da plataforma Ruby on Rails). Verifique com seu

programador, administrador de servidor ou documentação de script para o nome e local

apropriados do programa a serem fornecidos pelo atributo de ação (consulte a Dica de
hospedagem na Web).
DICA DE ALOJAMENTO DE WEB
Às vezes, há um código de processamento de formulário, como PHP, embutido no arquivo
Se você sabe que deseja ou precisa trabalhar com uma
HTML. Nesse caso, deixe a ação vazia e o formulário será postado na própria página.
determinada linguagem de processamento de formulários,
certifique-se de confirmar que ela é compatível ao
comprar um serviço de hospedagem na web.
O atributo do método
O atributo method especifica como as informações devem ser enviadas ao servidor. Vamos
usar esses dados coletados do formulário de amostra na FIGURA 9-1 como exemplo.
nome completo = Sally Strongarm

e-mail = strongarm@example.com
Quando o navegador codifica essas informações para sua viagem ao servidor, fica assim
(consulte a barra lateral anterior se precisar de uma atualização sobre a codificação): Fazendo seus formulários
fullname=Sally+Strongarm&email=strongarm%40example.com funcionarem
Se você não é um programador, não se preocupe.

Existem apenas dois métodos para enviar esses dados codificados para o servidor: POST ou
Você tem algumas opções para tornar seus
GET, indicados pelo atributo method no elemento de formulário . O método é opcional e formulários operacionais:
terá como padrão GET se omitido. Veremos a diferença entre os dois métodos nas seções a
Use brindes do plano de hospedagem
seguir. Nosso exemplo usa o método POST, conforme mostrado aqui:
Muitos planos de hospedagem de sites incluem
acesso a scripts para funções simples, como

<form action="/mailinglist.php" method="POST">...</form> listas de discussão.
Planos mais avançados podem até fornecer
O método GET tudo o que você precisa para adicionar um
sistema completo de carrinho de compras ao seu
Com o método GET, os dados do formulário codificado são inseridos diretamente na URL site como parte de sua taxa mensal de hospedagem.
A documentação ou uma pessoa de suporte

enviada ao servidor. Um caractere de ponto de interrogação separa o URL dos seguintes
técnico deve estar disponível para ajudá-lo a usá-
dados, conforme mostrado aqui:
los.
obter http://www.bandname.com/mailinglist.php?name=Sally+Strongarm&email= ÿ
Contrate um programador
strongarm%40example.com
Se você precisar de uma solução personalizada,
GET é inadequado se o envio do formulário realizar uma ação, como deletar algo ou adicionar talvez seja necessário contratar um programador
dados a um banco de dados, pois se o usuário voltar, ele será enviado novamente. que tenha habilidades de programação do lado do
servidor. Diga ao seu programador o que você
deseja realizar com seu formulário e ele sugerirá
uma solução. Novamente, você precisa ter permissão

O método POST para instalar scripts em seu servidor em seu plano
de hospedagem atual e que o servidor suporta o

Quando o método do formulário é definido como POST, o navegador envia uma solicitação
idioma que você escolher.
de servidor separada contendo alguns cabeçalhos especiais seguidos pelos dados. Em teoria,
apenas o servidor vê o conteúdo dessa solicitação e, portanto, é o melhor método para enviar
informações seguras, como um endereço residencial ou outras informações pessoais. Na
prática, certifique-se de que o HTTPS esteja habilitado em seu servidor para que os dados do
usuário sejam criptografados e inacessíveis em trânsito. (HTTPS é discutido no Capítulo 2,
Como funciona a Web.)
9. Formulários 181
Variáveis e Conteúdo
O método POST também é preferível para enviar muitos dados, como uma entrada de texto
longa, porque não há limite de caracteres como há para GET.
NOTA O método GET é apropriado se você quiser que os usuários possam marcar os resultados de
um envio de formulário (como uma lista de resultados de pesquisa). Como o conteúdo do
POST e GET não diferenciam maiúsculas de minúsculas e
formulário está à vista, GET não é apropriado para formulários com informações pessoais ou
são comumente listados em letras maiúsculas por
convenção. Em documentos XHTML, entretanto, o valor financeiras privadas. Além disso, GET não pode ser usado quando o formulário é usado para
do atributo method (post ou get) deve ser fornecido em carregar um arquivo.
todas as letras minúsculas.
Neste capítulo, ficaremos com o método POST mais prevalente. Agora que passamos pelos
aspectos técnicos do elemento de formulário , vamos voltar nossa atenção para os controles
de formulário.
VARIÁVEIS E CONTEÚDO
Os formulários da Web usam uma variedade de controles que permitem que os usuários
insiram informações ou escolham entre as opções. Os tipos de controle incluem vários campos
de entrada de texto, mas toneladas, menus e alguns controles com funções especiais. Eles
são adicionados ao documento com uma coleção de elementos de controle de formulário que
examinaremos um por um na próxima seção “O Grande Resumo do Controle de Formulário” .
Como web designer, você precisa estar familiarizado com as opções de controle para tornar
seus formulários fáceis e intuitivos de usar. Também é útil ter uma ideia do que os controles
de formulário estão fazendo nos bastidores.
O atributo do nome
O trabalho de cada controle de formulário é coletar um bit de informação de um usuário.
No exemplo de formulário anterior, os campos de entrada de texto coletam o nome e o
endereço de e-mail do visitante. Para usar o termo técnico, “fullname” e “email” são duas
Todos os controles de
variáveis coletadas pelo formulário. Os dados inseridos pelo usuário (“Sally Strongarm” e
formulário (exceto os botões
“strongarm@example.com”) são o valor ou conteúdo das variáveis.
enviar e redefinir) devem incluir um nome
atributo. O atributo name fornece o nome da variável para o controle. Neste exemplo, o texto reunido
por um elemento textarea é definido como a variável “comment”:
<textarea name="comment" rows="4" cols="45" placeholder="Deixe-nos um comentário."></

textarea>
Quando um usuário insere um comentário no campo (“Esta é a melhor banda de todos os

tempos!”), ele seria passado para o servidor como um par nome/valor (variável/conteúdo) assim:
comment=Esta+é+a+melhor+banda+de sempre%21
Todos os elementos de controle de formulário devem incluir um atributo de nome para que o
aplicativo de processamento de formulário possa classificar as informações. Você pode incluir
um atributo name para os elementos do botão submit e reset , mas eles não são obrigatórios,
pois possuem funções especiais (enviar ou redefinir o formulário) não relacionadas à coleta
de dados.

O grande resumo de controle de formulário
Nomeando suas variáveis

Você não pode simplesmente nomear controles à toa. O aplicativo da Web que processa os dados é
programado para procurar nomes de variáveis específicos. Se você estiver projetando um formulário para
funcionar com um aplicativo ou script preexistente, precisará descobrir os nomes de variáveis específicos a
serem usados no formulário para que eles falem o mesmo idioma. Você pode obter os nomes das variáveis
nas instruções fornecidas com um script pronto para uso no servidor, no administrador do sistema ou no
programador com o qual está trabalhando.
Se o script ou aplicativo for criado posteriormente, certifique-se de nomear suas variáveis de forma simples e
descritiva e documentá-las bem. Além disso, para evitar confusão, recomenda-se nomear cada variável de
forma exclusiva - ou seja, não use o mesmo nome para duas variáveis (no entanto, pode haver exceções
para as quais é desejável). Você também deve evitar colocar espaços de caracteres em nomes de variáveis.
Em vez disso, use um sublinhado ou hífen.
Cobrimos o básico do elemento de formulário e como as variáveis são nomeadas.
Agora podemos chegar ao verdadeiro cerne da marcação de formulário: os controles.
O GRANDE CURSO DE CONTROLE DE FORMULÁRIO
Essa é a parte divertida — brincar com a marcação que adiciona controles de formulário à página. Esta
seção apresenta os elementos usados para criar o seguinte:
• Controles de entrada de texto
• Controles de entrada de texto especializados
• Botões de envio e redefinição
• Botões de rádio e caixa de seleção
• Menus suspensos e de rolagem
• Seleção de arquivos e controle de upload
• Controles ocultos
• Datas e horários
• Controles numéricos
• Controle do seletor de cores
Faremos uma pausa ao longo do caminho para permitir que você os experimente construindo o formulário de
pedido de pizza mostrado na FIGURA 9-2.
Como você verá, a maioria dos controles são adicionados a um formulário por meio do elemento input . A NOTA
funcionalidade e a aparência do elemento de entrada mudam com base no valor do atributo type na tag. Em Os atributos associados a cada tipo de
HTML5.2, existem vinte e dois entrada estão listados na TABELA 9-1
tipos de controles de entrada. Vamos dar uma olhada em todos eles. no final deste capítulo.
9. Formulários 183
FIGURA 9-2. O formulário de pedido de pizza que construiremos nos exercícios deste capítulo.
Controles de entrada de texto
Uma das tarefas de formulário da web mais comuns é inserir informações de texto. Qual elemento
NOTA você usa para coletar entrada de texto depende se os usuários são solicitados a inserir uma
única linha de texto (entrada) ou várias linhas (área de texto).
Os exemplos de marcação ao longo desta
seção incluem o elemento label , que é usado Esteja ciente de que, se o seu formulário tiver campos de entrada de texto, ele precisará usar o
para melhorar a acessibilidade. protocolo HTTPS seguro para proteger o conteúdo inserido pelo usuário enquanto seus dados
Discutiremos o rótulo na próxima seção estiverem em trânsito para o servidor (consulte a barra lateral “HTTPS, o Protocolo da Web
"Recursos de acessibilidade de Seguro” para Mais Informações).
formulário" , mas, enquanto isso, quero que
você se acostume a ver a marcação de formulário adequada.
Campo de texto de linha única
<input type="texto"> Um dos tipos de entrada de formulário mais simples é o campo de entrada de texto para inserir
Controle de entrada de texto de linha única uma única palavra ou linha de texto. Na verdade, é o tipo de entrada padrão, o que significa que
é o que você obterá se esquecer de incluir o atributo type ou incluir um valor não reconhecido.
Adicione um campo de entrada de texto a um formulário inserindo um elemento de entrada com
seu atributo type definido como text, conforme mostrado aqui e na FIGURA 9-3:
<li><label>Cor favorita: <input type="text" name="favcolor"

value="Red" maxlength="50"></label></li>

Campo de entrada de texto (tipo de entrada="texto")
NOTA
O estilo de renderização específico dos controles de formulário
varia de acordo com o sistema operacional e a versão do

Campo de entrada de texto de várias linhas com conteúdo de texto (input type="textarea") navegador.
Campo de entrada de texto de várias linhas com texto de espaço reservado (input type="textarea")
FIGURA 9-3. Exemplos das opções de controle de entrada de texto para formulários da web.
Existem alguns atributos lá que eu gostaria de destacar:
nome
O atributo name é necessário para indicar o nome da variável.
valor
O atributo value especifica o texto padrão que aparece no campo quando o

formulário é carregado. Quando você redefine um formulário, ele retorna a esse NOTA DE SUPORTE DO NAVEGADOR
valor. O valor do atributo value é enviado ao servidor, portanto, neste exemplo, o
Versões do Internet Explorer anteriores à versão 11 e versões
valor “Red” será enviado com o formulário, a menos que o usuário o altere.
anteriores do Android não suportam espaço reservado.
Como alternativa, você pode usar o atributo placeholder para fornecer uma dica do
que digitar no campo, como “Minha cor favorita”. O valor de placeholder não é
enviado com o formulário e é puramente um aprimoramento da interface do usuário.
Você o verá em ação na próxima seção.
comprimento máximo , comprimento mínimo
Por padrão, os usuários podem digitar um número ilimitado de caracteres em um

campo de texto, independentemente de seu tamanho (a exibição rola para a direita
se o texto exceder a largura de caracteres da caixa). Você pode definir um limite
máximo de caracteres usando o atributo maxlength se o programa de processamento
de formulário que estiver usando exigir. O atributo minlength especifica o número
mínimo de caracteres.
9. Formulários 185
Tamanho
O atributo size especifica o comprimento do campo de entrada em número de caracteres visíveis.

No entanto, é mais comum usar folhas de estilo para definir o tamanho da área de entrada. Por
padrão, um widget de entrada de texto é exibido em um tamanho que acomoda 20 caracteres.
Campo de entrada de texto de várias linhas
<textarea>…</textarea> Às vezes, você desejará que seus usuários possam inserir mais do que apenas uma linha de texto. Para
Controle de entrada de texto multilinha essas instâncias, use o elemento textarea , que é substituído por uma caixa de entrada de texto
multilinha e rolável quando exibida pelo navegador (FIGURA 9-3).
Ao contrário do elemento input vazio , você pode colocar conteúdo entre as tags de abertura e
fechamento no elemento textarea . O conteúdo do elemento textarea aparece na caixa de texto quando
o formulário é exibido no navegador. Ele também é enviado ao servidor quando o formulário é enviado,
portanto, considere cuidadosamente o que vai lá. <p><label>Inscrição oficial do concurso: <br>
<em>Diga-nos por que você ama a banda. Cinco vencedores receberão passes para os
bastidores!</em><br>
<textarea name="contest_entry" rows="5" cols="50">A banda é incrível!</textarea></label></
p>
Os atributos rows e cols fornecem uma maneira de especificar o tamanho da área de texto
com marcação. rows especifica o número de linhas que a área de texto deve exibir e cols especifica a
largura em número de caracteres (embora seja mais comum usar CSS para especificar a largura do
campo). Barras de rolagem serão fornecidas se o usuário digitar mais texto do que cabe no espaço
alocado.
Há também alguns atributos não mostrados no exemplo. O atributo wrap especifica se as

quebras de linha suaves (em que o texto é quebrado naturalmente na borda da caixa) são
preservadas quando o formulário é enviado. Um valor de suave
(o padrão) não preserva quebras de linha. O valor hard preserva as quebras de linha quando o atributo
cols é usado para definir a largura do caractere da caixa.
Os atributos maxlength e minlength definem o número máximo e mínimo de caracteres que podem ser
digitados no campo.
Não é incomum que os desenvolvedores não coloquem nada entre as tags de abertura e
fechamento e forneçam uma dica do que deve ir lá com um espaço reservado
atributo em vez disso. O texto do espaço reservado, diferentemente do conteúdo da área de texto, não
é enviado ao servidor quando o formulário é enviado. Exemplos de conteúdo de área de texto e texto
de espaço reservado são mostrados na FIGURA 9-3.
<p>Inscrição oficial do concurso:<br>

<em>Diga-nos por que você ama a banda. Cinco vencedores receberão passes para os
bastidores!</em><br>
<textarea name="contest_entry" placeholder="50 palavras ou menos" rows="5" cols="50"></
textarea>
</p>

desativado e somente leitura

Os atributos desativado e somente leitura impedem que os usuários interajam com um controle de
formulário, mas funcionam de maneira um pouco diferente.
Quando um elemento de formulário está desabilitado, ele não pode ser selecionado. Os navegadores visuais
podem renderizar o controle como acinzentado por padrão (o que você pode alterar com CSS, é claro).
O estado desabilitado só pode ser alterado com um script. Este é um atributo útil para restringir o acesso a alguns campos de
formulário com base nos dados inseridos anteriormente no formulário e pode ser aplicado a qualquer controle de formulário ou
conjunto de campos.
O atributo readonly impede que o usuário altere o valor do controle de formulário (embora possa ser
selecionado). Isso permite que os desenvolvedores usem scripts para definir valores para controles
dependentes de outros dados inseridos anteriormente no formulário. As entradas que são somente leitura
devem ter fortes indícios visuais de que são de alguma forma diferentes de outras entradas, ou podem ser
confusas para usuários que estão tentando alterar seus valores. O atributo readonly pode ser usado com
textarea e controles de entrada baseados em texto (consulte a TABELA 9-1 no final deste capítulo).
A diferença mais importante é que os campos somente leitura são enviados quando o formulário é enviado,
mas os desabilitados não.
Campos de entrada de texto especializados
Além da entrada de texto genérica de linha única, há vários tipos de entrada para
inserir tipos específicos de informações, como senhas, termos de pesquisa, endereços
de e-mail, números de telefone e URLs.
Campo de entrada de senha
Um campo de senha funciona exatamente como um campo de entrada de texto, exceto <input type="senha">
que os caracteres são obscurecidos por asterisco (*) ou marcadores (•) ou outro Controle de texto de senha
caractere determinado pelo navegador.
É importante observar que, embora os caracteres inseridos no campo de senha não

sejam visíveis para espectadores casuais, o formulário não criptografa as informações,
portanto, não deve ser considerado uma medida de segurança real.
Aqui está um exemplo da marcação para um campo de senha. A FIGURA 9-4 mostra
como pode ficar depois que o usuário inserir uma senha no campo.
<li><label for="form-pswd">Senha:</label><br>
<input type="password" name="pswd" maxlength="12" id="form-pswd"></li>
FIGURA 9-4. As senhas são convertidas em marcadores na exibição do navegador.
9. Formulários 187
Pesquisa, e-mail, números de telefone e URLs

<input type="pesquisa"> Até o HTML5, a única maneira de coletar endereços de e-mail, números de telefone,
Campo de pesquisa URLs ou termos de pesquisa era inserir um campo de entrada de texto genérico. Em
HTML5, os tipos de entrada email, tel, url e search dão ao navegador um aviso sobre
<input type="email"> que tipo de informação esperar no campo. Esses tipos de entrada usam os mesmos
Endereço de email
atributos que o tipo de entrada de texto genérico descrito anteriormente (nome,
comprimento máximo , comprimento mínimo, tamanho e valor), bem como vários
<input type="tel">
outros atributos (consulte a TABELA 9-1 no final do capítulo).
Número de telefone
Todos esses tipos de entrada são normalmente exibidos como entradas de texto de linha
<input type="url"> única. Mas os navegadores que os suportam podem fazer algumas coisas interessantes
Local (URL)
com as informações semânticas extras. Por exemplo, o Safari no iOS usa o tipo de entrada
para fornecer um teclado adequado à tarefa de entrada, como o teclado com um botão
Pesquisar para o tipo de entrada de pesquisa ou um botão “.com” quando o tipo de entrada
é definido como url (FIGURA 9-5). Os navegadores geralmente adicionam um ícone de
“campo limpo” de um clique (geralmente um pequeno X) nos campos de pesquisa. Um
navegador de suporte pode verificar a entrada do usuário para ver se ela é válida, por
exemplo, certificando-se de que o texto inserido em uma entrada de e- mail segue a
estrutura padrão de endereço de e-mail (no passado, você precisava de JavaScript para
validação). Por exemplo, os navegadores Opera (FIGURA 9-6) e Chrome exibem um aviso
se a entrada não corresponder ao formato esperado.
Embora as entradas de email, pesquisa, telefone e URL sejam bem suportadas por
navegadores atualizados, pode haver inconsistências na maneira como são tratadas.
Os navegadores mais antigos, como o Opera Mini e qualquer versão do Internet Explorer
anterior à 11, não os reconhecem, mas exibem a entrada de texto genérica padrão, que
funciona perfeitamente.
tipo de entrada = "e-mail" tipo de entrada = "pesquisar" tipo de entrada="tel" tipo de entrada="url"
FIGURA 9-5. O Safari no iOS fornece teclados personalizados com base no tipo de entrada.

AVISO
Os valores dos controles de formulário devem
ser verificados pelo código do servidor (PHP,

FIGURA 9-6. O Opera exibe um aviso quando a entrada não corresponde ao formato de e- mail
ASP.NET, etc.), pois podem ser hackeados ou
esperado como parte de seu suporte de validação do lado do cliente.
manipulados. Portanto, embora facilitem o
controle e a validação da entrada do usuário,
ainda é vital realizar verificações no lado do
servidor antes de atualizar o banco de dados no
servidor.
Sugestões suspensas
<datalist>…</datalist>
Entrada de menu suspenso
O elemento datalist permite que o autor forneça um menu suspenso de valores sugeridos para
qualquer tipo de entrada de texto. Ele fornece ao usuário alguns atalhos para selecionar, mas se
nenhum for selecionado, o usuário ainda poderá digitar seu próprio texto. Dentro da lista de dados
elemento, os valores sugeridos são marcados como elementos de opção . Use a lista
atributo no elemento de entrada para associá-lo ao id de sua respectiva lista de dados.
No exemplo a seguir (FIGURA 9-7), uma lista de dados sugere várias opções de nível educacional
para uma entrada de texto:
<p>Educação concluída: <input type="text" list="edulevel"

nome="educação">
<datalist id="edulevel">
<option value="Ensino Médio">
<option value="Bacharelado">
<option value="Mestrado">
<option value="PhD">
</datalist>
Até o momento, o suporte do navegador para datalists permanece irregular. O Chrome e o Opera
o suportam, mas há um bug que torna as listas de dados impossíveis de rolar (ou seja, inutilizáveis)
se a lista for muito longa, então é melhor usado para listas curtas de opções. O IE11 e o Edge têm
implementações com bugs, e o Safari e o iOS não o suportam. A boa notícia é que, se não houver
suporte, os navegadores apresentarão uma entrada de texto simples, o que é um fallback
perfeitamente aceitável. Você também pode usar um polyfill JavaScript para criar a funcionalidade de datalist .
FIGURA 9-7. Uma lista de dados cria um menu pop-up de valores sugeridos para um campo de
entrada de texto.
9. Formulários 189
Botões Enviar e Redefinir

<input type="enviar">
Envia os dados do formulário para o servidor
Mais alguns botões
Há um punhado de elementos de botão
<input type="reset">
personalizados que estão um pouco fora do
Redefine os controles de formulário para suas configurações padrão
caminho comum para iniciantes, mas no
interesse da meticulosidade, aqui eles estão Existem vários tipos de botões que podem ser adicionados aos formulários da web. A maioria
escondidos em uma barra lateral.
fundamental é o botão enviar. Quando clicado ou tocado, o botão de envio envia imediatamente os dados
do formulário coletados ao servidor para processamento.
Botões de imagem
Um botão de redefinição retorna os controles de formulário ao estado em que estavam quando o formulário
<input type="imagem">
foi carregado inicialmente. Em outras palavras, redefinir o formulário não limpa simplesmente todos os
Este tipo de controle de entrada permite campos.
substituir o botão de envio por uma imagem
de sua escolha. A imagem aparecerá plana, Ambos os botões enviar e redefinir são adicionados por meio do elemento input . Como mencionado
não como um botão 3D.
anteriormente, como esses botões têm funções específicas que não incluem a entrada de dados, eles são
Infelizmente, esse tipo de botão tem
os únicos elementos de controle de formulário que não requerem o atributo name , embora não haja
problemas de acessibilidade, portanto, inclua
um valor alt cuidadosamente escolhido . problema em adicionar um se você precisar.
Os botões Enviar e Redefinir são fáceis de usar. Basta colocá-los no local apropriado no formulário, que na
Botão de entrada personalizado
maioria dos casos está no final.
<input type="botão">
Por padrão, o botão de envio é exibido com o rótulo "Enviar" ou "Enviar consulta" e o botão de redefinição
Definir o tipo do elemento de entrada como
é rotulado como "Redefinir". Você pode alterar o texto no botão usando o atributo value , conforme
“botão” cria um botão que pode
mostrado no botão reset neste exemplo (FIGURA 9-8).
ser personalizado com JavaScript. Ele não
tem função predefinida por conta própria, ao
contrário dos botões enviar e redefinir.
<p><input type="submit"> <input type="reset" value="Começar de novo"></p>
O elemento botão
<botão>…</botão>
O elemento botão é um elemento
flexível para criar botões personalizados

semelhantes aos criados com o
elemento de entrada . O conteúdo do

elemento do botão (texto e/ou imagens) é o
que é exibido no botão.
Para obter mais informações sobre o que

você pode fazer com o elemento botão , FIGURA 9-8. Botões de envio e redefinição.
leia “Push My Button” de Aaron Gustafson
em digital-web.com/ O botão de reset não é usado em formulários com tanta frequência quanto costumava ser. Isso ocorre
artigos/push_my_button. “When to Use porque no desenvolvimento de formulários contemporâneo, usamos JavaScript para verificar a validade
the Button Element”, de Chris Coyier, é
das entradas de formulário ao longo do caminho, para que os usuários recebam feedback à medida que avançam.
outra leitura útil (css tricks.com/use-button-
Com design e assistência cuidadosos, menos usuários devem chegar ao final do formulário e precisam
element/).
redefinir tudo. Ainda assim, é uma boa função estar ciente.
Neste ponto, você já sabe o suficiente sobre marcação de formulário para começar a construir o questionário
mostrado na FIGURA 9-2.
O EXERCÍCIO 9-1 orienta você nos primeiros passos.

EXERCÍCIO 9-1. Iniciando o formulário de pedido de pizza
Aqui está o cenário. Você é o web designer responsável por criar um formulário Seu desafio é transformar o esboço em uma forma funcional. Eu lhe dei
de pedido de pizza online para o Black Goose Bistro. O proprietário entregou uma vantagem criando um documento básico com conteúdo de texto e
a você um esboço (FIGURA 9-9) do conteúdo do formulário. marcação e estilos mínimos. Este documento, pizza.html, está disponível
Existem notas adesivas do programador com informações sobre o script online em learningwebdesign.com/5e/
e os nomes das variáveis que você precisa usar. materiais. O formulário finalizado também é fornecido.
FIGURA 9-9. Um esboço do formulário de pedido de pizza do Black Goose Bistro.
9. Formulários 191
1. Abra o arquivo pizza.html em um editor de texto. botões no final, logo antes da tag </form> . Observe que eles nos
2. A primeira coisa que faremos é colocar tudo depois do parágrafo de introdução pediram para alterar o texto no botão de envio.
em um elemento de formulário . O programador deixou uma nota especificando <p><input type="submit" value="Traga-me uma
a ação e o método a ser usado para este formulário. O elemento de formulário pizza!"><input type="reset"></p>
resultante deve ficar assim (mantenha-o em uma linha):
6. Agora, salve o documento e abra-o em um navegador. As peças acabadas
<form action="http://www.blackgoosebistro.com/ geralmente devem corresponder à FIGURA 9-2. Se não, então você tem mais
pizza.php" method="POST"> algum trabalho a fazer.
…
</form> Quando o documento parecer correto, dê uma olhada inserindo algumas

informações e enviando o formulário. Você deve obter uma resposta como
3. Neste exercício, trabalharemos na seção “Suas informações” do formulário.
a mostrada na FIGURA 9-10. Sim, pizza.php
Comece com os primeiros quatro controles de formulário de entrada de texto
realmente funciona, mas desculpe, nenhuma pizza será entregue.
curtos que são marcados apropriadamente como uma lista não ordenada. Aqui
está o primeiro; você insere os outros três:
<li>Nome: <input type="text" name="customername"> </

li>
DICAS: Escolha o tipo de entrada mais apropriado para cada campo de
entrada. Certifique-se de nomear os elementos de entrada conforme
especificado na nota do programador.
4. Após “Instruções de entrega:” adicione uma quebra de linha e uma área de

texto de várias linhas. Como não estamos escrevendo uma folha de estilo
para este formulário, use marcação para torná-lo quatro linhas de comprimento
e 60 caracteres de largura (no mundo real, CSS é preferível porque oferece um
controle mais ajustado):
<li>Instruções de entrega:<br>
<textarea name="instructions" rows="4" cols="60"
maxlength="400" placeholder="No máximo 400
caracteres"></textarea></li>
FIGURA 9-10. Você deverá ver uma página de resposta como esta se seu formulário
5. Vamos pular o resto do formulário por enquanto até termos mais alguns estiver funcionando. Os campos de descrição da pizza serão adicionados em
controles, mas podemos adicionar o envio e redefinir exercícios posteriores, então eles retornarão “vazios” por enquanto.
Botões de rádio e caixa de seleção
Tanto a caixa de seleção quanto os botões de opção simplificam a escolha dos visitantes entre
NOTA várias opções fornecidas. Eles são semelhantes, pois funcionam como pequenos interruptores
Eu omiti o fieldset e o rótulo

liga / desliga que podem ser alternados pelo usuário e são adicionados com o elemento de
entrada . Eles servem a funções distintas, no entanto.
elementos dos exemplos de código para botões
de opção, caixas de seleção e menus para manter
Um controle de formulário composto por uma coleção de botões de opção é apropriado quando
a estrutura de marcação o mais simples e clara
apenas uma opção do grupo é permitida – em outras palavras, quando as seleções são
possível. Na próxima seção “Recursos de
mutuamente exclusivas (como “Sim ou Não” ou “Recolha ou Entrega ").
acessibilidade de formulário”, você aprenderá
Quando um botão de rádio está “ligado”, todos os outros devem estar “desligados”, mais ou menos
por que é importante incluí-los em sua marcação
como os botões costumavam funcionar em rádios antigos: pressione um botão e o restante saia.
para todos os elementos de formulário.
Quando as caixas de seleção são agrupadas, no entanto, é possível selecionar quantas ou

poucas do grupo forem desejadas. Isso os torna a escolha certa para listas nas quais mais de
uma seleção está correta.

Botões do rádio
Os botões de opção são adicionados a um formulário por meio do elemento de entrada com o <input type="radio">
atributo de tipo definido como "rádio". Aqui está a sintaxe para um botão de rádio mínimo: Botao de radio
<input type="radio" name="variable" value="value">
O atributo name é obrigatório e desempenha um papel importante na ligação de várias entradas

de rádio em um conjunto. Quando você dá a várias entradas de botão de opção o mesmo valor de
nome (“idade” no exemplo a seguir), elas criam um grupo de opções mutuamente exclusivas.
Neste exemplo, os botões de opção são usados como uma interface para os usuários inserirem
sua faixa etária. Uma pessoa não pode pertencer a mais de uma faixa etária, então rádio mas
toneladas são a escolha certa. A FIGURA 9-11 mostra como os botões de opção são renderizados
no navegador.
<p>Quantos anos você tem?</p>

<ol>
<li><input type="radio" name="age" value="under24" check> abaixo de 24</li>
<li><input type="radio" name="age" value="25-34" > 25 a 34</li>
<li><input type="radio" name="age" value="35-44"> 35 a 44</li>

<li><input type="radio" name="age" value="over45"> 45+</li>
</ol>
Observe que todos os elementos de entrada têm o mesmo nome de variável (“idade”), mas seus
valores são diferentes. Como esses são botões de opção, apenas um botão pode ser verificado por
vez e, portanto, apenas um valor será enviado ao servidor para processamento quando o formulário
for enviado.
Você pode decidir qual botão é verificado quando o formulário é carregado adicionando o atributo
check ao elemento de entrada (consulte Nota). Neste exemplo, o botão ao lado de “abaixo de 24” NOTA
será verificado quando a página for carregada.
Pode parecer que o atributo check não tem
valor, mas é um dos atributos em HTML que
pode ser minimizado para
uma palavra. Nos bastidores, o atributo
Botões de opção (tipo de entrada = "rádio") Caixas de seleção (tipo de entrada = "caixa de seleção")
verificado minimizado representa o
bastante redundante:
verificado="verificado"
Uma das regras do XHTML mais rigoroso
sintaxe é que os atributos não podem ser

minimizados desta forma.
FIGURA 9-11. Os botões de opção (esquerda) são apropriados quando apenas uma seleção é
permitida. As caixas de seleção (à direita) são melhores quando os usuários podem escolher qualquer
número de opções, de nenhuma a todas.
9. Formulários 193
Botões da caixa de seleção
<input type="checkbox"> As caixas de seleção são adicionadas por meio do elemento de entrada com seu tipo definido como caixa de seleção.
Botão de caixa de seleção Assim como nos botões de opção, você cria grupos de caixas de seleção atribuindo-lhes o mesmo
valor de nome . A diferença, como já observamos, é que mais de uma caixa de seleção pode ser
marcada por vez. O valor de cada botão marcado será enviado ao servidor quando o formulário for
enviado. Aqui está um exemplo de um grupo de botões de caixa de seleção usados para indicar
interesses musicais; FIGURA 9-11
mostra como eles ficam no navegador:
<p>Que tipo de música você ouve?</p>

<ul>
<li><input type="checkbox" name="genre" value="punk" check> Punk
rock</li> <li><input type="checkbox" name="genre" value="indie" selected>
Rock indie</li> <li><input type="checkbox" name="genre" value="hiphop">
Hip Hop</li> <li><input type="checkbox" name="genre" value=
"rockabilly">Rockabilly</li>
</ul>
As caixas de seleção não precisam necessariamente ser usadas em grupos, é claro. Neste exemplo,
uma única caixa de seleção é usada para permitir que os visitantes optem por promoções especiais.
O valor do controle será passado para o servidor somente se o usuário marcar a caixa.
<p><input type="checkbox" name="OptIn" value="yes"> Sim, envie-me

notícias e promoções especiais por e-mail.</p>
Os botões de caixa de seleção também usam o atributo check para torná-los pré-selecionados
quando o formulário é carregado.
No EXERCÍCIO 9-2, você terá a chance de adicionar botões de rádio e de caixa de seleção ao
formulário de pedido de pizza.
EXERCÍCIO 9-2. Adicionando botões de opção e caixas de seleção
A próxima seção do formulário de pedido de pizza do Black Goose Bistro usa botões de opção e caixas de
seleção para selecionar as opções de pizza. Abra o documento pizza.html e siga estas etapas:
1. Na seção “Design Your Dream Pizza”, há listas de opções de Crosta e Coberturas.

As opções de crosta devem ser botões de opção porque as pizzas têm apenas uma crosta. Insira um botão
de opção antes de cada opção. Siga este exemplo para as opções de crosta restantes:
<li><input type="radio" name="crust" value="white"> Branco clássico</li>

2. Marque as opções de Coberturas como você fez as opções de Crosta, mas desta vez, o tipo
deve ser caixa de seleção. Certifique-se de que o nome da variável para cada um seja toppings[], e que
a opção “Red sauce” esteja pré-selecionada (marcada), conforme observado no esboço.
3. Salve o documento e verifique seu trabalho abrindo-o em um navegador para certificar-se de que está
correto; em seguida, envie o formulário para verificar se está funcionando corretamente.

Menus
Outra maneira de fornecer uma lista de opções é colocá-las em um menu suspenso ou de <selecione>…</selecione>
rolagem. Os menus tendem a ser mais compactos do que grupos de botões e caixas de Controle de menus
seleção.
<opção>…</opção>
Você adiciona menus suspensos e de rolagem a um formulário com a seleção Uma opção dentro de um menu
elemento. Se o menu é suspenso ou rolado é o resultado de como você especifica seu
tamanho e se você permite que mais de uma opção seja selecionada. <optgroup>…</optgroup>
Vamos dar uma olhada em ambos os tipos de menu. Um agrupamento lógico de opções dentro
um menu
Menus suspensos
O elemento select é exibido como um menu suspenso (também chamado de menu suspenso)
por padrão quando nenhum tamanho é especificado ou se o atributo size estiver definido
como 1. Nos menus suspensos, apenas um item pode ser selecionado. Aqui está um exemplo
(mostrado na FIGURA 9-12):
<p>Qual é a sua banda favorita dos anos 80?

<select name="EightiesFave">
<option>A cura</option>
<option>Gêmeos Cocteau</option>
<option>Lágrimas por medo</option>
<option>Gêmeos Thompson</option>
<option value="EBTG">Tudo menos a garota</option>
<option>Modo Depeche</option>
<option>Os Smiths</option>
<option>Novo pedido</option>
</select>
</p>
FIGURA 9-12. Os menus suspensos se abrem quando o usuário clica na seta ou barra.
Você pode ver que o elemento select é apenas um contêiner para várias opções
elementos. O conteúdo do elemento de opção escolhido é o que é passado para o aplicativo
da web quando o formulário é enviado. Se, por algum motivo, você quiser enviar um valor
diferente do que aparece no menu, use o atributo value para fornecer um valor de substituição.
Por exemplo, se alguém selecionar “Everything But the Girl” no menu de amostra, o formulário
enviará o valor “EBTG” para a variável “EightiesFave”. Para os demais, o conteúdo entre a
opção
tags serão enviadas como o valor.
Menus de rolagem
Para fazer com que o menu seja exibido como uma lista de rolagem, basta especificar o
número de linhas que deseja que fiquem visíveis usando o atributo size . Este menu de exemplo tem
9. Formulários 195
as mesmas opções que a anterior, exceto que foi configurada para ser exibida como uma
lista de rolagem com seis linhas de altura (FIGURA 9-13):
<p>Que bandas dos anos 80 você ouvia?

<select name="EightiesBands" size="6" multiple>
<option>A cura</option>
<option>Gêmeos Cocteau</option>
<option selected>Tears for Fears</option>
<option selected>Thompson Twins</option>
<option value="EBTG">Tudo menos a garota</option>
<option>Modo Depeche</option>
<option>Os Smiths</option>
<option>Novo pedido</option>
</select>
</p>
FIGURA 9-13. Um menu de rolagem com várias opções selecionadas.
Você pode notar alguns atributos minimizados ali. O múltiplo

O atributo permite que os usuários façam mais de uma seleção na lista de rolagem. Observe
que os menus suspensos não permitem seleções múltiplas; quando o navegador detecta o
atributo múltiplo , ele exibe um pequeno menu de rolagem automaticamente por padrão.
Use o atributo selecionado em um elemento de opção para torná-lo o valor padrão para o
controle de menu. As opções selecionadas são realçadas quando o formulário é carregado.
O atributo selecionado também pode ser usado com menus suspensos.
Agrupar opções de menu

Você pode usar o elemento optgroup para criar grupos conceituais de opções.
NOTA O atributo de rótulo obrigatório fornece o cabeçalho do grupo (consulte a Nota).
A FIGURA 9-14 mostra como os grupos de opções são renderizados em navegadores modernos.
O atributo label no optgroup
elemento não é o mesmo que o rótulo <select name="icecream" size="7" multiple>
elemento usado para melhorar a acessibilidade <optgroup label="tradicional">
<option>baunilha</option>
(discutido mais adiante neste capítulo).
<option>chocolate</option>
</optgroup>
<optgroup label="fancy">
<option>Super praliné</option>
<option>Surpresa de nozes</option>
<option>Milho doce</option>
</optgroup>
</select>

EXERCÍCIO 9-3.
Adicionando um cardápio
O único outro controle que precisa ser

adicionado ao formulário de pedido é um menu
suspenso para selecionar o número de pizzas a
serem entregues.
1. Insira um elemento de menu de seleção

com a opção de pedir entre 1 e 6 pizzas:
FIGURA 9-14. Grupos de opções.
No EXERCÍCIO 9-3, você usará o elemento select para permitir que os clientes do Black Goose <p>Quantas pizzas:
Bistro escolham um número de pizzas para o pedido.
<select name="pizzas"
size="1">
<option>1</option>
<-- mais opções aqui -->
Controle de seleção de arquivo </select>
</p>
<input type="arquivo"> 2. Salve o documento e faça check-in
Campo de seleção de arquivo um navegador. Você também pode enviar
o formulário para ter certeza de que está
Os formulários da Web podem coletar mais do que apenas dados. Eles também podem ser usados
funcionando. Você deve obter a página de
para transmitir documentos externos do disco rígido de um usuário. Por exemplo, uma empresa de resposta “Obrigado” listando todas as
impressão pode usar um formulário da web para fazer upload de arte para um pedido de cartão de visita. informações inseridas no formulário.
Uma revista poderia usar um formulário para coletar fotos digitais para um concurso de fotografia. Parabéns! Você construiu seu primeiro
formulário web funcional. No EXERCÍCIO 9-4,
O controle de seleção de arquivos permite que os usuários selecionem um documento do disco rígido
adicionaremos uma marcação que o tornará
a ser enviado com os dados do formulário. Nós o adicionamos ao formulário usando nosso velho mais acessível a dispositivos assistivos.
amigo, o elemento input , com seu tipo definido como arquivo.
A amostra de marcação aqui (FIGURA 9-15) mostra um controle de seleção de arquivo usado para
envios de fotos:
<form action="/client.php" method="POST" enctype="multipart/form-data">

<label>Envie uma foto para ser usada como seu ícone online <em>(opcional)
</em><br>
<input type="file" name="photo"></label>
</form>
O widget de upload de arquivo varia um pouco de acordo com o navegador e o sistema operacional,
mas geralmente é um botão que permite acessar o sistema de organização de arquivos em seu
computador (FIGURA 9-15).
Entrada de arquivo (no navegador Chrome)
FIGURA 9-15. Um campo de formulário de seleção de arquivo.
9. Formulários 197
É importante notar que quando um formulário contém um elemento de entrada de seleção de

arquivo, você deve especificar o tipo de codificação (enctype) como multipart/form-data
no elemento form e use o método POST.
O tipo de entrada de arquivo tem alguns atributos. O atributo accept informa ao navegador quais
tipos de arquivo podem ser aceitos (áudio, vídeo, imagem ou algum outro formato identificado por
seu tipo de mídia). A adição de vários atributos permite que vários arquivos sejam selecionados
para upload. O atributo obrigatório , como diz, requer que um arquivo seja selecionado.
Controles ocultos
<input type="hidden"> Pode haver momentos em que você precise enviar informações para o aplicativo de processamento
Campo de controle oculto de formulários que não vêm do usuário. Nesses casos, você pode usar um controle de formulário
oculto que envia dados quando o formulário é enviado, mas não fica visível quando o formulário é
exibido em um navegador.
AVISO
Os controles ocultos são adicionados por meio do elemento input com o tipo definido como oculto.
É possível que os usuários acessem e Seu único propósito é passar um par nome/valor para o servidor quando o formulário é enviado.
manipulem controles de formulário ocultos. Neste exemplo, um elemento de formulário oculto é usado para fornecer a localização do
Se você se tornar um desenvolvedor web documento de agradecimento apropriado a ser exibido quando a transação for concluída:
profissional, aprenderá a programar
defensivamente para esse tipo de coisa.
<input type="hidden" name="success-link" value="http://www.example.com/
thankyou.html">
Eu trabalhei com formulários que tinham dezenas de controles ocultos no formulário
elemento antes de chegar às partes que o usuário realmente preenche. Esse é o tipo de
informação que você obtém do programador de aplicativos, administrador do sistema ou de quem
está ajudando você a processar seus formulários. Se você estiver usando um script existente,
certifique-se de verificar as instruções anexas para ver se alguma variável de formulário oculta é
necessária.
Controles de data e hora

<input type="data"> Se você já reservou um hotel ou um voo online, sem dúvida usou um pequeno widget de calendário
Controle de entrada de data para escolher a data. Provavelmente, esse pequeno calendário foi criado com JavaScript. O
HTML5 introduziu seis novos tipos de entrada que tornam os widgets de seleção de data e hora
<input type="time">
parte dos recursos de exibição integrados padrão de um navegador, assim como podem exibir
Controle de entrada de tempo
caixas de seleção, menus pop-up e outros widgets hoje. Até o momento, os seletores de data e
<input type="datetime-local"> hora são implementados em apenas alguns navegadores (Chrome, Microsoft Edge, Opera, Vivaldi
Controle de data/hora e Android), mas em navegadores não compatíveis, os tipos de entrada de data e hora são exibidos
como um texto perfeitamente utilizável - campo de entrada em vez disso. A FIGURA 9-16 mostra
<input type="mês">
os widgets de data e hora renderizados no Chrome no macOS.
Especifica um mês em um ano
<input type="semana">
Especifica uma determinada semana em um ano

tipo de entrada = "hora"
tipo de entrada = "data" input type="datetime-local"
tipo de entrada = "mês" tipo de entrada = "semana"
FIGURA 9-16. Entradas do seletor de data e hora (mostradas no Chrome no macOS).
Os novos tipos de entrada relacionados a data e hora são os seguintes: NOTA
<input type="date" name="name" value="2017-01-14"> O atributo value é opcional, mas pode ser incluído para fornecer
uma data ou hora de início no widget. Ele está incluído aqui para
Cria um controle de entrada de data, como um calendário pop-up, para especificar uma
demonstrar os formatos de data e hora.
data (ano, mês, dia). O valor inicial deve ser fornecido no formato de data ISO (AAAA-
MM-DD).
<input type="time" name="name" value="03:13:00">

Cria um controle de entrada de hora para especificar uma hora (hora, minuto, segundos,
seções fracionárias) sem indicação de fuso horário. O valor é fornecido como hh:mm:ss.
<input type="datetime-local" name="name" value="2017-01-14T03:13:00">

Cria um controle de entrada de data/hora combinado sem informações de fuso horário
(AAAA-MM-DDThh:mm:ss).
9. Formulários 199
<input type="month" name="name" value="2017-01">
Cria um controle de entrada de data que especifica um determinado mês em um ano (AAAA-
MM).
<input type="week" name="name" value="2017-W2">
Cria um controle de entrada de data para especificar uma determinada semana em um ano
usando um formato de numeração de semana ISO (YYYY-W#).
Entradas Numéricas
<input type="número"> Os tipos de entrada de número e intervalo coletam dados numéricos. Para o número
Entrada de número entrada, o navegador pode fornecer um widget giratório com setas para cima e para baixo para
selecionar um valor numérico específico (uma entrada de texto pode ser exibida em agentes do
<input type="intervalo"> usuário que não suportam o tipo de entrada). A entrada de intervalo geralmente é exibida como
Entrada do controle deslizante
um controle deslizante (FIGURA 9-17) que permite ao usuário selecionar um valor dentro de um
variar:
<label>Número de convidados <input type="number" name="guests" min="1"

max="6"></label>
<label>Satisfação (0 a 10) <input type="range" name="satisfaction" min="0"

max="10" step="1"></label>
tipo de entrada = "número"
tipo de entrada = "intervalo"
FIGURA 9-17. Os tipos de entrada de número e intervalo (mostrados no Chrome no macOS).
Os tipos de entrada number e range aceitam os atributos min e max para especificar os
valores mínimo e máximo permitidos para a entrada (novamente, o navegador pode verificar se
a entrada do usuário está em conformidade com a restrição).
Tanto o mínimo quanto o máximo são opcionais, e você também pode definir um sem o outro.
Valores negativos são permitidos. Quando o elemento é selecionado, o valor pode ser
aumentado ou diminuído com as teclas numéricas de um teclado de computador, além de ser
movido com o mouse ou com o dedo.

O atributo step permite que os desenvolvedores especifiquem os incrementos aceitáveis

para entrada numérica. O padrão é 1. Um valor de “.5” permitiria valores 1, 1,5, 2, 2,5 e
assim por diante; um valor de 100 permitiria 100, 200, 300 e assim por diante. Você também
pode definir o atributo step como any para aceitar explicitamente qualquer incremento de valor.
Esses dois elementos permitem apenas os valores de etapa calculados, não uma lista
especificada de valores permitidos (como 1, 2, 3, 5, 8, 13, 21). Se você precisar de valores
personalizados, precisará usar JavaScript para programar esse comportamento.
Como esses são elementos mais novos, o suporte do navegador é inconsistente. Alguns
widgets de interface do usuário incluem setas para cima e para baixo para aumentar ou
diminuir a quantidade, mas muitos não. Navegadores móveis (iOS Safari, Android, Chrome
para Android) atualmente não suportam min, max e step. O Internet Explorer 9 e versões
anteriores não oferecem suporte a entradas de número e intervalo. Novamente, os
navegadores que não suportam esses novos tipos de entrada exibem um campo de entrada
de texto padrão, o que é um bom substituto.
Seletor de cores
A intenção do tipo de controle de cores é criar um seletor de cores pop-up para selecionar <input type="color">
visualmente um valor de cor semelhante àqueles usados em sistemas operacionais ou Seletor de cores
programas de edição de imagens. Os valores são fornecidos em valores RGB hexadecimais

(#RRGGBB). A FIGURA 9-18 mostra o seletor de cores no Chrome no macOS (é o mesmo
que o seletor de cores do macOS). Navegadores não compatíveis - atualmente todas as
versões do IE, iOS Safari e versões mais antigas do Android - exibem a entrada de texto
padrão.
<label>Sua cor favorita: <input type="color" name="favorite">

</label>
FIGURA 9-18. O tipo de entrada de cor (mostrado no Chrome no macOS).
9. Formulários 201
Isso encerra o resumo do controle de formulário. Aprender a inserir controles de formulário

é uma parte do processo de produção de formulários, mas qualquer desenvolvedor web
que se preze dedicará tempo para garantir que o formulário seja o mais acessível possível.
Felizmente, existem algumas coisas que podemos fazer na marcação para descrever a
estrutura do formulário.
Mais alguns elementos de formulário
Por uma questão de completude, vamos examinar os elementos de formulário restantes. Eles foram
adicionados em HTML5 e, até o momento, eles ainda têm suporte a navegadores irregular. Eles são
um pouco esotéricos de qualquer maneira, então você pode esperar um pouco para adicioná-los à
sua caixa de ferramentas HTML. Já abordamos o elemento datalist para fornecer valores sugeridos
para entradas de texto. O HTML5 também introduziu os seguintes elementos:
progresso
<progresso>…</progresso>
Indica o estado de um processo em andamento
O elemento de progresso fornece aos usuários feedback sobre o estado de um processo em

andamento, como um download de arquivo. Pode indicar uma porcentagem específica de
conclusão (determinada), como uma barra de progresso, ou apenas indicar um estado de
“espera” (indeterminado), como um spinner. O elemento progress requer scripts para funcionar.
Porcentagem baixada: <progress max="100" id="fave">0</progress>
metro
<metro>…</metro>
Representa uma medição dentro de um intervalo
medidor representa uma medição dentro de um intervalo conhecido de valores (também conhecido
como medidor). Possui vários atributos: min e max indicam os valores mais altos e mais baixos
para o intervalo (o padrão é 0 e 100); baixo e alto podem ser usados para acionar alertas em
níveis indesejáveis; e ótimo especifica um valor preferencial.
<meter min="0" max="100" name="volume">60%</meter>
resultado
<saída>…</saída>
Valor de saída calculado
Simplificando, o elemento de saída indica o resultado de um cálculo por um script ou programa.

Este exemplo, retirado da especificação HTML5.2, usa a saída
element e JavaScript para exibir a soma dos números inseridos nas entradas a e b.
<form onsubmit="return false" oninput="o.value = a.valueAsNumber +

b.valueAsNumber">
<input name=a type=number step=any>
+ <input name=b type=number step=any> =
<output name=o for="a b"></output>
</form>

Recursos de acessibilidade de formulário
RECURSOS DE ACESSIBILIDADE DO FORMULÁRIO
É essencial considerar como os usuários sem o benefício dos navegadores visuais

poderão entender e navegar pelos seus formulários da web. Os elementos de formulário
label, fieldset e legend melhoram a acessibilidade tornando claras as conexões
semânticas entre os componentes de um formulário. Não só a marcação resultante é
semanticamente mais rica, mas também há mais elementos disponíveis para atuar como
“ganchos” para as regras da folha de estilo. Todos ganham!
Rótulos
Embora possamos ver o rótulo “Endereço” ao lado de um campo de texto para inserir um <label>…</label>
endereço em um navegador visual, na fonte, o rótulo e o campo de entrada podem ser Anexa informações aos controles de formulário
separados. O elemento label associa o texto descritivo ao seu respectivo campo de

formulário. Isso fornece um contexto importante para usuários com navegadores baseados
em fala. Outra vantagem de usar rótulos é que os usuários podem clicar ou tocar em
qualquer lugar deles para selecionar ou focar o controle de formulário. Os usuários com
dispositivos de toque apreciarão o alvo de toque maior.
Cada elemento de rótulo está associado a exatamente um controle de formulário. Existem

duas maneiras de usá-lo. Um método, chamado associação implícita, aninha o controle e
sua descrição em um elemento de rótulo . No exemplo a seguir, os rótulos são atribuídos
a caixas de seleção individuais e suas descrições de texto relacionadas. (A propósito,
esta é a maneira de rotular botões de opção e caixas de seleção. Você não pode atribuir
um rótulo a todo o grupo.)
<ul>
<li><label><input type="checkbox" name="genre" value="punk"> Punk
rocha</label></li>
<li><label><input type="checkbox" name="genre" value="indie"> Independente
rocha</label></li>
<li><label><input type="checkbox" name="genre" value="hiphop"> Hip
Pule</label></li>
<li><label><input type="checkbox" name="genre" value="rockabilly">
Rockabilly</label></li>
DICA DE MARCAÇÃO
</ul>
Para manter os IDs relacionados a
O outro método, chamado de associação explícita, combina o rótulo com a referência de
formulários distintos de outros IDs na página,
id do controle . O atributo for diz para qual controle o rótulo se destina. Essa abordagem
considere prefaciá-los com “form-” conforme
é útil quando o controle não está diretamente ao lado de seu texto descritivo na fonte. Ele mostrado nos exemplos.
também oferece a vantagem potencial de manter o rótulo e o controle como dois elementos Outra técnica para manter os formulários
distintos, que você pode achar útil ao alinhá-los com folhas de estilo. organizados é dar ao elemento de formulário
um nome de ID e incluí-lo como prefixo nos
IDs dos controles que ele contém da seguinte
<label for="form-login-username"> Conta de login</label> forma:
<input type="text" name="login" id="form-login-username">
<form id="form-login">
<label for="form-login-password">Senha</label> <input id="form-login-user">
<input type="password" name="password" id="form-login-password"> <input id="form-login-passwd">
9. Formulários 203
conjunto de campos e legenda
<fieldset>…</fieldset O elemento fieldset indica um grupo lógico de controles de formulário. Um conjunto de campos
também pode incluir um elemento de legenda que fornece uma legenda para os campos
Controles e rótulos relacionados a grupos
incluídos.
<legenda>…</legenda>
A FIGURA 9-19 mostra a renderização padrão do exemplo a seguir, mas você pode usar folhas
Atribui uma legenda a um conjunto de campos
de estilo para alterar a maneira como o conjunto de campos e a legenda aparecem (consulte
Aviso):
<fieldset>
AVISO <legend> Inscrição na lista de e-mails</legend>

<ul>
Fieldsets e lendas tendem a jogar algumas <li><label>Adicione-me à sua lista de e-mails <input type="radio" name="list"
value="yes" selected></label></li> <li><label>Não, obrigado <input type
bolas curvas quando se trata de estilo. Por
="rádio" nome="lista" valor="não">
exemplo, as cores de fundo em fieldsets são </label></li>
tratadas de forma diferente de navegador </ul>
para navegador. As legendas são únicas </fieldset>
porque seu texto não quebra. A solução é
<fieldset>
colocar neles um elemento span ou b e
<legend>Informações do cliente</legend>
controlar a apresentação do elemento contido <ul>
sem sacrificar a acessibilidade. Certifique-se <li><label>Nome completo: <input type="text" name="fullname"></label> </li>
de fazer muitos testes se você estilizar esses
elementos de formulário. <li><label>E-mail: <input type="text" name="email"></label></li>
<li><label>Estado: <input type="text" name="state"></label></li>
</ul>
</fieldset>
FIGURA 9-19. A renderização padrão de conjuntos de campos e legendas.
No EXERCÍCIO 9-4, vamos encerrar o formulário de pedido de pizza tornando-o mais acessível
com rótulos e conjuntos de campos.

EXERCÍCIO 9-4. Rótulos e conjuntos de campos
Nosso formulário de pedido de pizza está funcionando, mas precisamos 3. Crie outro fieldset apenas para as opções Crust, novamente alterando a descrição
rotulá-lo adequadamente e criar alguns conjuntos de campos para torná-lo mais de um parágrafo para uma legenda. Faça o mesmo para as seções Coberturas e
utilizável em dispositivos assistivos. Mais uma vez, abra o documento pizza.html e Número. No final, você terá três conjuntos de campos contidos no conjunto de
siga estas etapas. campos “especificações da pizza” maior. Quando terminar, salve seu documento
Eu gosto de começar com os traços largos e preencher os detalhes mais tarde, e abra-o em um navegador.
então vamos começar este exercício organizando os controles de formulário em Agora deve parecer muito próximo do formato final mostrado na FIGURA 9-2,
conjuntos de campos, e então faremos toda a rotulagem. Você poderia fazer o dadas as diferenças esperadas do navegador:
contrário e, idealmente, apenas marcaria os rótulos e os conjuntos de campos à <fieldset>

medida que avançasse, em vez de adicioná-los todos mais tarde. <legend>Crust <em>(Escolha um)</em>:</legend>
<ul>…</ul>
1. A seção “Suas informações” na parte superior do formulário está definitivamente
</fieldset>
relacionada conceitualmente, então vamos agrupar tudo em um elemento fieldset .
Altere a marcação do título da seção de um parágrafo (p) para uma legenda 4. OK, agora vamos colocar alguns rótulos. No conjunto de campos "Suas
para o conjunto de campos: informações", vincule explicitamente o rótulo à entrada de texto usando o for/
<fieldset> método de rótulo de identificação . Envolva a descrição em tags de rótulo e
<legend>Suas informações</legend> adicione o id à entrada. Os valores for/id devem ser descritivos e devem
<ul> corresponder. Eu fiz o primeiro para você; você faz os outros quatro:
<li>Nome: <input type="text" name="fullname">
</li>
…
<li><label for="form-name">Nome:</label> <input type="text"
name="fullname" id="form-name"></li>
</ul>
</fieldset> 5. Para os botões de opção e caixa de seleção, envolva o elemento de rótulo
2. Em seguida, agrupe as questões Crust, Toppings e Number em um grande em torno da entrada e seu rótulo de valor. Desta forma, o botão será selecionado
conjunto de campos com a legenda “Pizza specs” (o texto está lá; você só quando o usuário clicar ou tocar em qualquer lugar dentro do elemento label .
precisa alterá-lo de p para legenda): Aqui está o primeiro; você faz o resto:
<h2>Desenhe a pizza dos seus sonhos:</h2> <li><label><input type="radio" name="crust" value="white">

<fieldset> Branco clássico</label></li>
<legend>Especificações da pizza </legend>

Salve seu documento e pronto! Os rótulos não têm nenhum efeito sobre a
Crosta…
aparência do formulário por padrão, mas você pode se sentir bem com o valor
Coberturas…
Número… semântico adicionado e talvez até usá-los para aplicar estilos em outro momento.
</fieldset>
Widgets de formulário DIY função pretendida do div (uma caixa de listagem) e cada li (uma opção nessa
caixa de listagem). Há também muitos estados e propriedades ARIA que
Apesar de ter dezenas de widgets de formulário direto do HTML para escolher,
tornam os formulários, tanto padrão quanto personalizados, utilizáveis com
é comum que os desenvolvedores “enrole seus próprios” widgets de formulário
dispositivos assistivos. Para obter uma lista completa, consulte www.w3.org/
usando marcação, CSS e JavaScript. Isso pode ser preferível se você quiser
TR/wai aria/states_and_properties.
fornecer funcionalidade personalizada ou tornar o estilo do formulário mais
sofisticado. Por exemplo, você pode criar um menu suspenso usando uma lista Widgets de formulários personalizados requerem scripts e CSS muito além
não ordenada dentro de um div do escopo deste livro, mas eu queria que você conhecesse a técnica.
em vez do elemento select padrão : Também é extremamente fácil errar, tornando a interação de um usuário com
o formulário embaraçosa e frustrante (mesmo para usuários com visão), então
<div class="select" role="listbox">
“faça o seu próprio” com cuidado.
<ul class="lista de opções">
O artigo “How to Build Custom Form Widgets” no MDN Web Docs fornece
<li class="option" role="option">Vermelho</li>
<li class="option" role="option">Amarelo</li> uma boa visão geral (developer.mozilla.org/en-US/
</ul> docs/Web/Guide/HTML/Forms/How_to_build_custom_form_
</div> widgets). Você também pode optar por usar um widget personalizado pré-
criado de uma das bibliotecas JavaScript disponíveis, como jQuery UI
Para ajudar tecnologias assistivas, como leitores de tela, a reconhecer isso como
(jqueryui.com).
um elemento de formulário, use o atributo role ARIA para descrever o
9. Formulários 205
Layout e design do formulário
FORMULÁRIO DE LAYOUT E DESIGN
Não posso encerrar este capítulo sem dizer algumas palavras sobre design de formulários, embora
este capítulo seja sobre marcação, não sobre apresentação.
Formulários utilizáveis
Um formulário mal projetado pode arruinar a experiência de um usuário em seu site e impactar
negativamente seus objetivos de negócios. Formulários mal projetados significam clientes perdidos,
por isso é fundamental acertar - tanto na área de trabalho quanto para dispositivos de tela pequena
com seus requisitos especiais. Você quer que o caminho para uma compra ou outra ação seja o mais
simples possível.
O tópico do bom design de formulários da web é rico e poderia encher um livro por si só.
Na verdade, existe um livro assim: Web Form Design (Rosenfeld Media) do especialista em formulários
da web Luke Wroblewski, e eu recomendo muito. O livro subsequente de Luke, Mobile First (A Book
Apart), inclui dicas sobre como formatar formulários em um contexto móvel. Você pode navegar por
mais de uma centena de artigos sobre formulários em seu site em www.lukew.com/ff?tag=forms.
Aqui vou oferecer apenas uma pequena amostra de dicas do Web Form Design para você começar,
mas vale a pena ler o livro inteiro:
Evite perguntas desnecessárias.
Ajude seus usuários a preencher seu formulário com a maior facilidade possível, não incluindo
perguntas que não sejam absolutamente necessárias para a tarefa em questão. Perguntas
extras, além de retardar as coisas, podem deixar o usuário desconfiado de suas motivações para
perguntar. Se você tiver outra maneira de obter as informações (por exemplo, o tipo de cartão de
crédito pode ser determinado a partir dos quatro primeiros números da conta), use meios
alternativos e não sobrecarregue o usuário. Se houver informações que possam ser úteis, mas
que não sejam obrigatórias, considere perguntar mais tarde, depois que o formulário for enviado
e você tiver construído um relacionamento com o usuário.
Considere o impacto da colocação do rótulo.
A posição do rótulo em relação à entrada afeta o tempo de preenchimento do formulário. Quanto

menos os olhos do usuário precisarem percorrer a página, mais rápido será o preenchimento do
formulário. Colocar os rótulos acima de seus respectivos campos cria um alinhamento único para
verificações e conclusão mais rápidas, principalmente quando você está solicitando informações
familiares (nome, endereço etc.).
As etiquetas posicionadas na parte superior também podem acomodar etiquetas de comprimentos
variados e funcionam melhor em dispositivos estreitos de tela pequena. No entanto, eles resultam
em um formato mais longo, portanto, se o espaço vertical for uma preocupação, você poderá
posicionar os rótulos à esquerda das entradas. O alinhamento à esquerda dos rótulos resulta no
preenchimento mais lento do formulário, mas pode ser apropriado se você quiser que o usuário
diminua a velocidade ou seja capaz de verificar e considerar os tipos de informações necessárias.

Layout e design do formulário
Escolha os tipos de entrada com cuidado.
Como você viu neste capítulo, existem alguns tipos de entrada para escolher e, às vezes, não é fácil decidir
qual usar. Por exemplo, uma lista de opções pode ser apresentada como um menu suspenso ou várias
opções com caixas de seleção. Pese cuidadosamente os prós e os contras de cada tipo de controle e faça o
acompanhamento com o teste do usuário.
Entradas relacionadas ao grupo.
É mais fácil analisar os vários campos, menus e botões em um formulário se eles estiverem agrupados
visualmente por tópico relacionado. Por exemplo, as informações de contato de um usuário podem ser
apresentadas em um grupo compacto para que cinco ou seis entradas sejam percebidas como uma unidade.
Normalmente, tudo o que você precisa é de uma indicação muito sutil, como uma régua horizontal fina e
algum espaço extra. Não exagere.
Esclareça as ações primárias e secundárias.
A ação principal no final do formulário geralmente é alguma forma de botão de envio (“Comprar”, “Registrar”,
etc.) que sinaliza a conclusão do formulário e a prontidão para seguir em frente. Você quer que esse botão
seja visualmente dominante e fácil de encontrar (alinhando-o ao longo do eixo principal do formulário também
é útil). Usando JavaScript, você pode desativar o botão de envio como não funcionando até que todos os
dados necessários tenham sido preenchidos.
Ações secundárias tendem a levar você um passo atrás, como limpar ou redefinir o formulário. Se você
precisar incluir uma ação secundária, certifique-se de que ela tenha um estilo diferente e menos importante
do que a ação principal. Também é uma boa ideia fornecer uma oportunidade para desfazer a ação.
Formas de estilo
Como vimos neste capítulo, a renderização padrão da marcação de formulário não está à altura da qualidade que
vemos na maioria dos formulários profissionais da web hoje. Quanto a outros elementos, você pode usar folhas de
estilo para criar um layout de formulário limpo, bem como alterar a aparência da maioria dos controles de formulário.
Algo tão simples quanto um bom alinhamento e uma aparência consistente com o resto do seu site pode ajudar
muito a melhorar a impressão que você causa em um usuário.
Lembre-se de que os widgets de formulário são desenhados pelo navegador e informados pelas convenções do
sistema operacional. No entanto, você ainda pode aplicar dimensões, margens, fontes, cores, bordas e efeitos de
fundo a elementos de formulário, como entradas de texto, menus de seleção, áreas de texto, conjuntos de campos,
rótulos e legendas. Certifique-se de testar em uma variedade de navegadores para verificar se há surpresas
desagradáveis. O Capítulo 19, Mais técnicas de CSS, na Parte III, lista algumas técnicas específicas quando
você tiver mais experiência com CSS. Para obter mais ajuda, uma pesquisa na web por “CSS para formulários”
resultará em vários tutoriais.
9. Formulários 207
Teste-se
TESTE-SE
Pronto para testar seu know-how em formulários da web? Aqui estão algumas perguntas para
ter certeza de que você entendeu o básico. Você encontrará as respostas no Apêndice A.
1. Decida se cada um desses formulários deve ser enviado via GET ou POST
método:
uma. Um formulário para acessar sua conta bancária online ________
b. Um formulário para enviar a arte da camiseta para a impressora ________
c. Um formulário para pesquisar artigos arquivados ________
d. Um formulário para coletar entradas de ensaios longos ________
2. Qual elemento de controle de formulário é mais adequado para as seguintes tarefas? Quando
a resposta for “entrada”, certifique-se de incluir também o tipo. Algumas tarefas podem ter
mais de uma resposta correta.
uma. Escolha o seu signo astrológico de 12 signos.
b. Indique se você tem histórico de doença cardíaca (sim ou não).
c. Escreva uma resenha do livro.
d. Selecione seus sabores de sorvete favoritos de uma lista de oito sabores.
e. Selecione seus sabores de sorvete favoritos de uma lista de 25 sabores.
3. Cada um desses exemplos de marcação contém um erro. Você consegue identificar?
uma. <input name="country" value="Seu país aqui.">
b. <checkbox name="color" value="teal">
c. <select name="picolé">
<option value="laranja">
<option value="uva">
<option value="cherry">
</select>
d. <input type="senha">
e. <textarea name="essay" width="100" height="6">Sua história.

</textarea>

Revisão do elemento: formulários
REVISÃO DO ELEMENTO: FORMULÁRIOS
A tabela a seguir lista todos os elementos e atributos relacionados a formulários

incluídos no HTML 5.2 (alguns atributos não foram abordados neste capítulo). Os
atributos para cada tipo de entrada estão listados na TABELA 9-1.
botão Botão de entrada genérica
auto-foco Focaliza automaticamente o controle de formulário quando a página é carregada
nome="texto" Fornece um nome de variável exclusivo para o controle
Desativado Desativa a entrada para que não possa ser selecionada
type="enviar|redefinir|botão" O tipo de botão personalizado
valor="texto" Especifica o valor a ser enviado ao servidor
menu="idvalue" Especifica um menu pop-up designado
formulário, formação, tipo de formulário, método Atributos relacionados ao envio de formulário usados para botões de tipo de envio e redefinição
de formulário, renovação de formulário, destino
de formulário
lista de dados Fornece uma lista de opções para entradas de texto
conjunto de campo Controles e rótulos relacionados a grupos
Desativado Desativa todas as entradas no conjunto de campos para que não possam ser selecionadas, editadas ou
enviadas
form="idvalue" Associa o elemento a um formulário específico
Formato Elemento de formulário
ação="url" Localização do programa de processamento de formulários (obrigatório)
método="obter|postar" O método usado para enviar os dados do formulário
enctype=" tipo de conteúdo" O método de codificação, geralmente application/x-www-form-urlencoded

(padrão) ou multipart/form-data
accept-charset="conjunto de caracteres" Codificações de caracteres a serem usadas
autocompletar Configuração padrão para o recurso de preenchimento automático para controles no formulário
nome="texto" Nome do formulário a ser usado na API document.forms
novalidar Ignora a validação de controle de formulário para este formulário
target="texto|_blank|_self| Define o contexto de navegação

_parent|_top"
9. Formulários 209
entrada Cria uma variedade de controles, com base no valor do tipo
auto-foco Indica que o controle deve estar pronto para entrada quando o documento for carregado
type="enviar|redefinir|botão| O tipo de entrada

texto|senha|caixa de seleção|rádio|
imagem|arquivo|oculto|email|tel| pesquisar|
url|data|hora|
datahora-local|mês|semana|
número|intervalo|cor"
Consulte a TABELA 9-1 para obter uma lista

completa de atributos associados a cada
tipo de entrada.
Desativado Desativa a entrada para que ela não possa ser selecionada, editada ou enviada
form=" valor do id do formulário" Associa o controle a um formulário especificado
etiqueta Anexa informações aos controles
for="texto" Identifica o controle associado por sua referência de id
lenda Atribui uma legenda a um conjunto de campos
metro Representa um valor fracionário dentro de um intervalo conhecido
alto="número" Indica a faixa considerada “alta” para o medidor
baixo="número" Indica a faixa considerada “baixa” para o medidor
max="número" Especifica o valor mais alto para o intervalo
min="número" Especifica o valor mais baixo para o intervalo
ótimo="número" Indica o número considerado “ótimo”
valor="número" Especifica o valor real ou medido
grupo de opções Define um grupo de opções
Desativado Desabilita o optgroup para que não possa ser selecionado
etiqueta="texto" Fornece um rótulo para um grupo de opções
opção Uma opção dentro de um controle de menu de seleção
Desativado Desativa a opção para que não possa ser selecionada
etiqueta="texto" Fornece um rótulo alternativo para a opção
selecionado Pré-seleciona a opção
valor="texto" Fornece um valor alternativo para a opção
resultado Representa os resultados de um cálculo
for="texto" Cria um relacionamento entre a saída e outro elemento

progresso Representa o progresso de conclusão de uma tarefa (pode ser usado mesmo que o valor máximo da tarefa não seja
conhecido)
max="número" Especifica o valor total ou o tamanho final da tarefa
valor="número" Especifica quanto da tarefa foi concluída
selecionar Menu suspenso ou lista de rolagem
auto-foco Indica que o controle deve estar destacado e pronto para entrada quando o documento for carregado
Desativado Indica que o controle não está funcionando; pode ser ativado com um script
múltiplo Permite várias seleções em uma lista de rolagem
requeridos Indica que a entrada do usuário é necessária para este controle
tamanho="número" A altura da lista de rolagem em linhas de texto
área de texto Campo de entrada de texto de várias linhas
Dica para o recurso de preenchimento automático de formulário

autocompletar
auto-foco Indica que o controle deve estar destacado e pronto para entrada quando o documento for carregado
cols="número" A largura da área de texto em caracteres
dirname="texto" Permite que a direcionalidade do texto seja enviada
Desativado Desativa o controle para que não possa ser selecionado
modo de entrada Dica para selecionar uma modalidade de entrada
comprimento máximo="texto" Especifica o número máximo de caracteres que o usuário pode inserir
minlength="texto" Especifica o número mínimo de caracteres que o usuário pode inserir
espaço reservado="texto" Fornece uma pequena dica para ajudar o usuário a inserir os dados corretos
somente leitura Torna o controle inalterável pelo usuário
requeridos Indica que a entrada do usuário é necessária para este controle
linhas="número" A altura da área de texto em linhas de texto
wrap="hard|soft" Controla se as quebras de linha na entrada de texto são retornadas nos dados; duro
preserva as quebras de linha, enquanto o soft não
9. Formulários 211
TABELA 9-1. Atributos disponíveis para cada tipo de entrada
Atributo enviar senha de texto do botão de redefinição caixa de seleção arquivo de imagem de rádio oculto
aceitar •
alt •
autocompletar • •
auto-foco • • • • • • • • •
verificado • •
Desativado • • • • • • • • • •
Formato • • • • • • • • • •
formação • •
tipo de formulário • •
método de formulário • •
formanovalidar • •
formtarget • •
altura •
Lista •
máximo
min
comprimento máximo • • •
minlength • • •
múltiplo •
nome • • • • • • • • • •
padronizar • •
marcador de posição • •
somente leitura • •
requeridos • • • • •
Tamanho • • •
src •
degrau
valor • • • • • • • • •
largura •

data, hora, data e hora local,

Atributo o email telefone, pesquisa, intervalo de números de URL mês, semana cor
aceitar
alt
autocompletar • • • • • •
auto-foco • • • • • •
verificado
Desativado • • • • • •
Formato • • • • • •
formação
tipo de formulário
método de formulário
formanovalidar
formtarget
altura
Lista • • • • • •
máximo • • •
min • • •
comprimento máximo • •
minlength • •
múltiplo • •
nome • • • • • •
padronizar • •
marcador de posição • •
somente leitura • • •
requeridos • • • •
Tamanho • •
src
degrau • • •
valor • • • • • •
largura
9. Formulários 213
CAPÍTULO
MÍDIA INCORPORADA 10
A especificação HTML define o conteúdo incorporado da seguinte forma: NESTE CAPÍTULO
conteúdo que importa outro recurso para o documento ou O elemento iframe

conteúdo de outro vocabulário inserido no documento
No Capítulo 7, Adicionando Imagens, você viu exemplos de ambas as partes dessa definição O elemento objeto
porque as imagens são um tipo de conteúdo incorporado. A img e a foto
Players de vídeo e áudio
elementos apontam para um recurso de imagem externo usando os atributos src ou srcset ,
e o elemento svg incorpora um arquivo de imagem escrito no vocabulário SVG bem na página. O elemento tela
Mas as imagens certamente não são as únicas coisas que você pode colocar em uma página
da web. Neste capítulo, veremos outros tipos de conteúdo incorporado e suas respectivas
marcações, incluindo o seguinte:
• Uma janela para visualizar uma fonte HTML externa (iframe)
• Elementos de incorporação multiuso (objeto e incorporação)
• Players de vídeo e áudio (vídeo e áudio)
• Uma área de desenho programável que pode ser usada para animações ou interatividade
semelhante a um jogo (tela)
JANELA EM UMA JANELA (IFRAME)

O elemento iframe (abreviação de inline frame) permite incorporar um documento HTML <iframe>…</iframe>
separado ou outro recurso da Web em um documento. Já existe há muitos anos, mas Uma janela de navegação aninhada
recentemente se tornou uma das formas mais populares de compartilhar conteúdo entre sites.
215
Janela em uma janela (iframe)
Por exemplo, quando você solicita o código para incorporar um vídeo do YouTube ou um
mapa do Google Maps, eles fornecem um código baseado em iframe para copiar e colar
em sua página. Muitos outros sites de mídia estão seguindo o exemplo porque permite que
eles controlem aspectos do conteúdo que você está colocando em sua página. Os frames
inline também se tornaram uma ferramenta padrão para incorporar conteúdo de anúncio
que poderia ter sido tratado com Flash no passado. Os sites de tutoriais da Web podem
usar quadros embutidos para incorporar amostras de código nas páginas.
Adicionar um iframe à página cria uma pequena janela em uma janela (ou um contexto de
navegação aninhado, como é conhecido na especificação) que exibe o recurso externo.
Você coloca um quadro embutido em uma página de forma semelhante a uma imagem,
especificando a origem (src) de seu conteúdo. Os atributos de largura e altura especificam
as dimensões do quadro. O conteúdo no próprio elemento iframe é o conteúdo de fallback
para navegadores que não suportam o elemento, embora praticamente todos os
navegadores suportem iframes neste momento.
Neste exemplo muito grosseiro, o documento pai exibe a página da web glossary.html em
um quadro embutido (FIGURA 10-1). Esse iframe tem seu próprio conjunto de barras de
rolagem porque o documento HTML incorporado é muito longo para caber. Para ser honesto,
você não costuma ver iframes usados dessa maneira (exceto para exemplos de código,
talvez), mas é uma boa maneira de entender como eles funcionam.
<h1>Um quadro embutido</h1>
<iframe src="glossary.html" largura="400" altura="250" >

Leia o <a href="glossary.html">glossário</a>.
</iframe>
FIGURA 10-1. Os quadros embutidos (adicionados com o elemento iframe ) são como uma
janela do navegador dentro do navegador que exibe documentos e recursos HTML externos.
Nos usos modernos do iframe, a janela não é tão óbvia. De fato, geralmente não há
indicação de que haja um quadro embutido ali, como mostrado pelo exemplo do Google
Maps na FIGURA 10-2.

Janela em uma janela (iframe)
FIGURA 10-2. As bordas de um iframe geralmente não são detectáveis, conforme mostrado
neste Google Map incorporado.
Existem algumas preocupações de segurança com o uso de iframes porque eles podem agir como
janelas abertas pelas quais os hackers podem se infiltrar. O atributo sandbox impõe restrições
sobre o que o conteúdo emoldurado pode fazer, como não permitir formulários, pop-ups, scripts e
similares.
A segurança de iframe está além do escopo deste capítulo, mas você precisará aprimorar se for
usar iframes em seu site. Eu recomendo o artigo do MDN Web Docs “From object to iframe: Other
Embedding Technologies” (developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/
Other_embedding_technologies), que fornece uma boa visão geral dos problemas de segurança
do iframe.
Para ter uma ideia de como os iframes funcionam, use um para incorporar seu vídeo favorito em
uma página do EXERCÍCIO 10-1.
EXERCÍCIO 10-1. Incorporando um vídeo com iframe
Se você quiser explorar um iframe, é fácil pegar um do YouTube para incorporar seu
vídeo favorito em uma página.
Comece criando um novo documento HTML, incluindo os elementos estruturais básicos que
abordamos no Capítulo 4, Criando uma página simples.
Acesse o YouTube e quando estiver na página do vídeo escolhido, procure o botão
Compartilhar; em seguida, escolha a opção Incorporar. O código iframe está lá para você
copiar e colar. Se você clicar em “Mostrar mais”, haverá mais opções de configuração. Basta
copiar o código do iframe e colá-lo no novo documento HTML. Abra-o em um navegador e
pronto!
10. Mídia Embutida 217

Incorporador multiuso (objeto)
EMBEDDER MULTIUSOS (OBJETO)

<objeto>…</objeto> Nos primeiros dias, os navegadores da Web eram extremamente limitados no que eles
Representa recurso externo podiam renderizar, então eles contavam com plug-ins para ajudá-los a exibir mídia que eles
não podiam manipular nativamente. Applets Java, filmes em Flash, RealMedia (um antigo
<param> formato de áudio e vídeo da Web) e outras mídias exigiam plug-ins de terceiros para serem
Parâmetros de um objeto reproduzidos no navegador. Caramba, até mesmo as imagens JPEG exigiam um plug-in para
serem exibidas.
Para incorporar esses recursos de mídia na página, usamos o objeto e incorporamos

elementos. Eles têm usos ligeiramente diferentes. O elemento de objeto é um posicionador
Um plug-in é um software de objeto multiuso. Ele pode ser usado para colocar uma imagem, criar um contexto de
que fornece a um navegação aninhado (como um iframe) ou incorporar um recurso que deve ser manipulado
navegador uma por um plug-in. O elemento embed deve ser usado apenas com plug-ins.
funcionalidade que ele não possui nativamente.
Para ser franco, embora ainda em uso, o objeto está saindo de moda e incorporado
está praticamente extinto (eu o guardei em uma breve barra lateral). Mídias como applets
Java e filmes em Flash estão desaparecendo rapidamente, e os navegadores modernos
usam APIs para exibir vários tipos de mídia nativamente. Além disso, os navegadores móveis,
bem como o navegador Microsoft Edge para desktop, não oferecem suporte a plug-ins.
Dito isso, vamos dar uma olhada no elemento object . No mínimo, o elemento object usa o
atributo data para apontar para o recurso e o tipo
atributo para fornecer seu tipo MIME. Qualquer conteúdo dentro das tags de elemento de
O elemento de incorporação objeto será usado como substituto para navegadores que não suportam o tipo de recurso
O elemento embed foi criado pela incorporado. Aqui está um elemento de objeto simples que coloca uma imagem SVG na
Netscape para uso com tecnologias de página e fornece um substituto para PNG:
plug-in. Ele sempre foi bem suportado, <object data="picture.svg" type="image/svg+xml">
mas não foi adotado em uma <img src="imagem.png" alt="">
especificação formal até o HTML5. Com </object>
tantas outras opções para incorporar mídia,
o elemento de incorporação não é tão útil Atributos adicionais para o elemento objeto estão disponíveis e variam de acordo com o tipo
quanto antes. Ele é frequentemente usado de mídia que está colocando. O formato de mídia também pode exigir que o objeto contenha
como um substituto quando há uma boa
vários elementos param que definem parâmetros específicos para esse tipo de mídia.
razão para oferecer suporte a versões de
navegador extremamente antigas.
embed é um elemento vazio que aponta

para um recurso externo com o atributo
src :
Flash de despedida
<embed type="video/quicktime"
src="movies/hekboy.mov" O anúncio da Apple de que nunca mais suportaria Flash em seus dispositivos iOS deu
width="320" height="256"> ao HTML5 um enorme impulso e acabou levando a Adobe a interromper o
Existem atributos específicos de mídia desenvolvimento de seus produtos Flash para dispositivos móveis. Pouco tempo depois, a
adicionais que definem parâmetros Microsoft anunciou que estava descontinuando seu reprodutor de mídia Silverlight em vez de
semelhantes ao elemento param , mas não alternativas HTML5. Até o momento, o HTML5 está longe de ser capaz de reproduzir os vastos
vou abordá-los todos aqui. recursos e funcionalidades do Flash, mas está chegando lá gradualmente. É provável que
Na verdade, acho que é tudo o que há a dizer ocasionalmente vejamos Flash players na área de trabalho, mas a trajetória longe dos plug-ins
sobre incorporar. e em direção às tecnologias padrão da Web parece clara.

Vídeo e áudio
Neste exemplo, os elementos param especificam se o filme inicia automaticamente

(não) ou tem controles visíveis (sim):
<object type="video/quicktime" data="movies/hekboy.mov" width="320" TERMINOLOGIA
height="256">
<param name="autostart" value="false"> API
<param name="controller" value="true"> Uma API (Application Programming Interface) é
</object> um conjunto padronizado de comandos, nomes
de dados, propriedades, ações e assim por diante,

que permite que um aplicativo de software se
VÍDEO E ÁUDIO comunique com outro. O HTML5 introduziu uma
série de APIs que fornecem aos navegadores
Até recentemente, os navegadores não tinham recursos integrados para lidar com recursos programáveis que anteriormente só
vídeo ou som, então usavam plug-ins para preencher a lacuna. Com o desenvolvimento podiam ser alcançados com plug-ins de terceiros.
da web como uma plataforma de padrões abertos, e com conexões de banda larga
permitindo downloads mais pesados do que anteriormente, parecia ser a hora de
Algumas APIs têm um componente
tornar o suporte multimídia parte dos recursos prontos para uso dos navegadores.
de marcação, como a incorporação de
Insira os novos elementos de vídeo e áudio e suas respectivas APIs (veja a barra lateral “API” ). com os novos elementos de vídeo
multimídia
e áudio HTML5 (API Media Player). Outros
As boas e as más notícias acontecem inteiramente nos bastidores com

JavaScript ou componentes do lado do servidor,
A boa notícia é que os elementos de vídeo e áudio são bem suportados em como a criação de aplicativos da Web que
funcionam mesmo sem uma conexão com a
navegadores modernos, incluindo IE 9+, Safari, Chrome, Opera e Firefox para desktop
Internet (API de aplicativo da Web offline).
e iOS Safari 4+, Android 2.3+ e Opera Mobile (no entanto, não Ópera Mini).
O W3C está trabalhando em muitas e muitas APIs
Mas se você está imaginando um mundo perfeito onde todos os navegadores suportam para uso com aplicativos da Web, todas em vários
estágios de conclusão e implementação. A maioria
vídeo e áudio em perfeita harmonia, temo que não seja tão simples. Embora todos
tem suas próprias especificações, separadas da
eles tenham se alinhado na marcação e JavaScript para incorporar players de mídia,
própria especificação HTML5, mas geralmente são
infelizmente eles não concordaram sobre quais formatos suportar. incluídas sob o amplo guarda-chuva HTML5 que
Vamos fazer uma breve viagem pela terra dos formatos de arquivo de mídia. Se você abrange aplicativos baseados na web.
deseja adicionar vídeo ou áudio à sua página, é importante entender isso.
Uma lista de todas as APIs e especificações

Como funcionam os formatos de mídia
HTML5 em desenvolvimento está disponível em html5-
Quando você prepara conteúdo de áudio ou vídeo para entrega na Web, há duas panorama.net, mantido por Erik Wilde. Você
também encontrará introduções a APIs mais
decisões de formato a serem tomadas. A primeira é como a mídia é codificada (os
conhecidas no Apêndice D.
algoritmos usados para converter a fonte em 1s e 0s e como eles são compactados).
O método usado para codificação é chamado de codec, que é a abreviação de “code/
decodificar” ou “compactar/descompactar”. Há um zilhão de codecs por aí (isso é uma
estimativa). Alguns provavelmente soam familiares, como MP3; outros podem parecer
novos, como H.264, Vorbis, Theora, VP8 e AAC.
Segundo, você precisa escolher o formato do contêiner para a mídia. Você pode
pensar nele como um arquivo ZIP que mantém a mídia compactada e seus metadados
juntos em um pacote. Normalmente, um formato de contêiner é compatível com mais
de um tipo de codec, e a história completa é complicada. Como o espaço é limitado
neste capítulo, vou direto ao assunto e apresentar as combinações de contêiner/codec
mais comuns para a web. Se você for adicionar vídeo ou áudio ao seu site, recomendo
que você se familiarize mais com todos esses formatos.

Vídeo e áudio
Conheça os formatos de vídeo
Para vídeo, as opções mais comuns são as seguintes:

LEITURA ADICIONAL Recipiente MPEG-4 + codec de vídeo H.264 + codec de áudio AAC. Essa combinação
Para uma introdução completa ao vídeo

é geralmente chamada de “MPEG-4” e usa o sufixo de arquivo .mp4 ou .m4v . O H.264
e áudio HTML, recomendo é um codec de vídeo flexível e de alta qualidade, mas é patenteado e deve ser
Iniciando a mídia HTML5: faça o licenciado mediante o pagamento de uma taxa. Todos os navegadores atuais que
A maioria dos novos vídeos e áudios suportam vídeo HTML5 podem reproduzir arquivos MPEG-4 com o codec H.264. O
Padrões para a Web por Silvia
codec H.265 mais recente (também conhecido como HEVC, High Efficiency Video
Pfeiffer e Tom Green (Apress).
Coding) está em desenvolvimento e reduz a taxa de bits pela metade, mas não é bem
suportado até o momento.
Recipiente WebM + codec de vídeo VP8 + codec de áudio Vorbis. “WebM” é um formato
de contêiner que tem a vantagem de ser de código aberto e livre de royalties. Ele usa
a extensão de arquivo .webm . Ele foi originalmente projetado para funcionar com
codecs VP8 e Vorbis.
Recipiente WebM + codec de vídeo VP9 + codec de áudio Opus. O codec de vídeo VP9
do projeto WebM oferece a mesma qualidade de vídeo que VP8 e H.264 com metade
da taxa de bits. Por ser mais recente, não é tão bem suportado, mas é uma ótima
opção para navegadores que podem reproduzi-lo.
Recipiente Ogg + codec de vídeo Theora + codec de áudio Vorbis. Isso geralmente é
chamado de “Ogg Theora”, e o arquivo deve ter um sufixo .ogv . Todos os codecs e o
contêiner nesta opção são de código aberto e livres de patentes ou restrições de
royalties, mas alguns dizem que a qualidade é inferior a outras opções. Além de novos
navegadores, ele é compatível com algumas versões mais antigas do Chrome, Firefox
e Android que não suportam WebM ou MP4, portanto, incluí-lo garante a reprodução
para mais usuários.
Claro, o problema que mencionei anteriormente é que os fabricantes de navegadores não

concordaram com um único formato para suporte. Alguns vão com opções de código aberto
e livres de royalties, como Ogg Theora ou WebM. Outros estão aderindo ao H.264 apesar
dos requisitos de royalties. O que isso significa é que nós, desenvolvedores da web,
precisamos fazer várias versões de vídeos para garantir suporte em todos os navegadores.
A TABELA 10-1 lista quais navegadores suportam as várias opções de vídeo (consulte a
barra lateral “Configuração do Servidor” ).
Configuração do servidor
Nas TABELAS 10-1 e 10-2, a coluna Tipo identifica o tipo MIME de cada formato de
mídia. Se o seu site estiver sendo executado no servidor Apache, para garantir que os arquivos
de vídeo e áudio sejam veiculados corretamente, talvez seja necessário adicionar seus
respectivos tipos ao arquivo .htaccess do servidor. O exemplo a seguir adiciona o tipo/subtipo
MP4 e as extensões:
AddType vídeo/mp4 mp4 m4v

Vídeo e áudio
Conheça os formatos de áudio
A paisagem é semelhante para formatos de áudio: vários para escolher, mas nenhum
formato compatível com todos os navegadores (TABELA 10-2). PARA TAMBÉM
EXPLORAÇÃO
MP3. O formato MP3 (abreviação de MPEG-1 Audio Layer 3) é um codec e um
contêiner em um, com a extensão de arquivo.mp3. Tornou-se onipresente como HLS (HTTP Streaming
um formato de download de música. Vídeo)
WAV. O formato WAV (.wav) também é um codec e um contêiner em um. Este formato Se você leva a sério o vídeo da Web,
é descompactado, por isso só é bom para clipes muito curtos, como efeitos sonoros. deve se familiarizar com o HLS (HTTP
Streaming Video), um formato de
streaming que pode adaptar sua taxa de
Recipiente Ogg + codec de áudio Vorbis. Isso geralmente é chamado de “Ogg bits em tempo real. A entrada da Wikipedia
HLS é um lugar tão bom quanto qualquer
Vorbis” e é servido com a extensão de arquivo .ogg ou .oga .
outro para começar: en.wikipedia.org/wiki/
Recipiente MPEG 4 + codec de áudio AAC. O “áudio MPEG4” (.m4a) é menos HTTP_Live_Streaming.
comum que o MP3.
Recipiente WebM + codec de áudio Vorbis. O formato WebM (.webm) também pode
conter apenas áudio.
Recipiente WebM + codec de áudio Opus. Opus é um codec de áudio mais recente
e eficiente que pode ser usado com WebM.
TABELA 10-1. Suporte de vídeo em navegadores de desktop e móveis (a partir de 2017)
Formato Modelo IE MS Edge Chrome Firefox Safari Opera Android iOS Safari
MP4 (H.264) vídeo/mp4 mp4 m4v 9.0+ 12+ 4+ Sim* 3.2+ 25+ 4,4+ 3.2+
– – 6+ 4.0+ – 15+ 2,3+ –

WebM (VP8) vídeo/webm webm webmv
– 14+ 29+ 28+ – 16+ 4,4+ –

WebM (VP9) vídeo/webm webm webmv
– – 3.0+ 3,5+ – 13+ 2,3+ –

Ogg Theora vídeo/ogg ogv
* A versão do Firefox varia de acordo com o sistema operacional.
TABELA 10-2. Suporte de áudio em navegadores atuais (a partir de 2017)
Formato Modelo IE MS Edge Chrome Firefox Opera Safari iOS Safari Android
MP3 áudio/mpeg mp3 9,0+ 12+ 3.0+ 22+ 15+ 4+ 4.1 2,3+
WAV – 12+ 8,0+ 3,5+ 11,5+ 4+ 3.2+ 2,3+

áudio/wav ou
áudio/onda
– 4.0+ 3,5+ 11,5+ – – 2,3+

Ogg Vorbis áudio/ogg ogg oga –
11,0+ 12+ 12.0+ – 15+ 4+ 4.1+ 3.0+

Áudio MPEG-4/AAC /mp4 m4a
WebM/Vórbis – – 6.0+ 4.0+ 11,5+ – – 2.3.3+

áudio/webm webm
– 14+ 33+ 15+ 20+ – – –
WebM/Opus áudio/webm webm

Vídeo e áudio
Adicionando um vídeo a uma página
<vídeo>…</vídeo> Acho que está na hora de chegarmos à marcação para adicionar um vídeo a uma
Adiciona um player de vídeo à página página da web (afinal, este é um capítulo HTML). Vamos começar com um exemplo
que assume que você está projetando para um ambiente onde você sabe exatamente
qual navegador seu usuário usará. Quando este for o caso, você pode fornecer apenas
um formato de vídeo usando o atributo src na tag de vídeo (assim como você faz para uma img).
A FIGURA 10-3 mostra um filme com o player padrão no navegador Chrome.
FIGURA 10-3. Um filme incorporado usando o elemento de vídeo (mostrado no Chrome em um Mac).
Ferramentas de codificação de vídeo e áudio
Existem inúmeras opções para editar e codificar arquivos de vídeo e áudio, então não posso abordá-las todas aqui, mas as ferramentas a seguir são gratuitas e fazem
o trabalho.
Conversão de vídeo Conversão de áudio

• Handbrake (handbrake.fr) é uma ferramenta de código aberto popular para • Audio Converter (online-audio-converter.com) é uma das ferramentas gratuitas
converter para MPEG4 com H.264, H.265, VP8 e Theora. Está disponível de áudio e vídeo do 123Apps.com que converte arquivos para MP3, WAV,
para Windows, macOS e Linux. OGG e muito mais.
• Firefogg (firefogg.org) é uma extensão do Firefox para • Media.io (media.io) é um serviço web gratuito que converte áudio
conversão de vídeo para os formatos WebM (VP8 e VP9) e Ogg Theora. para MP3, WAV e OGG.
Basta instalar a extensão Firefogg no Firefox (plataforma cruzada); em
• MediaHuman Audio Converter (www.mediahuman.com/
seguida, visite o site do Firefogg e converta o vídeo usando sua interface
audio-converter/) é gratuito para Mac e Windows e pode converter
online. • FFmpeg (ffmpeg.org) é uma ferramenta de linha de comando de
para todos os formatos de áudio listados neste capítulo e muito mais.
código aberto para converter praticamente qualquer formato de vídeo. Se você Ele tem uma interface fácil de arrastar e soltar, mas é praticamente
não estiver confortável com a linha de comando, existem vários pacotes de sem frescuras.
software (alguns pagos, outros gratuitos) que oferecem uma interface de
• Max (sbooth.org/Max/) é um conversor de áudio de código aberto
usuário para o FFmpeg para torná-lo mais amigável. (somente Mac).
• Audacity (www.audacityteam.org) é gratuito, de código aberto,

• Freemake (freemake.com) é um vídeo e áudio gratuitos
software de áudio multiplataforma para gravação e edição multipista. Ele
ferramenta de conversão para Windows que suporta mais de 500 formatos
pode importar e exportar arquivos em muitos dos formatos listados neste
de mídia.
capítulo.

Vídeo e áudio
Aqui está um elemento de vídeo simples que incorpora um filme e um player em uma web
página:
<video src="highlight_reel.mp4" width="640" height="480"

poster="highlight_still.jpg" controla a reprodução automática>
Seu navegador não suporta vídeo HTML5. Obtenha o <a
href="highlight_reel.mp4"> vídeo MP4</a>
</video>
Os navegadores que não oferecem suporte a vídeo exibem qualquer conteúdo fornecido
no elemento de vídeo . Neste exemplo, ele fornece um link para o filme que seu visitante
pode baixar e reproduzir em outro player.
Há também alguns atributos nesse exemplo que vale a pena examinar em detalhes:
largura=" medição de pixel"

altura=" medição de pixel "
Especifica o tamanho da caixa que o media player incorporado ocupa na tela.
Geralmente, é melhor definir as dimensões para corresponder exatamente às
dimensões em pixels do filme. O filme será redimensionado para corresponder às
dimensões definidas aqui.
poster="url da imagem"
Fornece a localização de uma imagem que é mostrada no lugar do vídeo antes de
ser reproduzido.
controles
Adicionar o atributo de controles solicita que o navegador exiba seus controles de

mídia integrados, geralmente um botão de reprodução/pausa, um “buscador” que
permite mover para uma posição dentro do vídeo e controles de volume. É possível
criar sua própria interface de player personalizada usando CSS e JavaScript se você
quiser mais consistência entre os navegadores.
Reprodução automática
Faz com que o vídeo comece a ser reproduzido automaticamente após ter baixado o
suficiente do arquivo de mídia para ser reproduzido sem parar. Em geral, o uso de
reprodução automática deve ser evitado para permitir que o usuário decida quando
o vídeo deve começar. a reprodução automática não funciona no iOS Safari e em
alguns outros navegadores móveis para proteger os usuários de downloads de dados
desnecessários.
Além disso, o elemento video pode usar o atributo loop para fazer o vídeo ser reproduzido
novamente após o término (ad infinitum), silenciado para reproduzir a faixa de vídeo sem
o áudio e pré -carregar para sugerir ao navegador se os dados do vídeo devem ser
buscados assim que a página carregar (preload="auto") ou espere até que o usuário
clique no botão play (preload="none"). A configuração preload="metadata" carrega
informações sobre o arquivo de mídia, mas não a própria mídia. Um dispositivo pode
decidir como lidar melhor com a configuração automática ; por exemplo, um navegador
em um smartphone pode proteger o uso de dados de um usuário ao não pré-carregar a
mídia, mesmo quando ela estiver definida como automática.

Vídeo e áudio
Fornecendo opções de formato de vídeo
Você se lembra no Capítulo 7 quando fornecemos várias imagens para esteiras com o elemento
picture usando vários elementos de origem ? Bem, a imagem tirou essa ideia do vídeo!
Como você viu, não é fácil encontrar um formato de vídeo que agrade a todos os navegadores
(embora o MPEG4/H.264 chegue perto). Além disso, novos formatos de vídeo eficientes como
VP9 e H.265 estão disponíveis, mas não são suportados em navegadores mais antigos. Usando
elementos de origem , podemos deixar os navegadores usarem o que puderem.
Na marcação, uma série de elementos de origem dentro do elemento de vídeo apontam para
cada arquivo de vídeo. Os navegadores pesquisam na lista até encontrarem um compatível e
baixam apenas essa versão. O exemplo a seguir fornece um videoclipe no formato WebM/VP9
aprimorado para navegadores de suporte, bem como um MP4 e Ogg Theora para outros
navegadores. Isso abrangerá praticamente todos os navegadores que suportam vídeo HTML5
(consulte a barra lateral “Flash Video Fallback”).
<video id="video" controls poster="img/poster.jpg">

<source src="clip.webm" type="video/webm">
<source src="clip.mp4" type="video/mp4">
<source src="clip.ogg" type="video/ogg">
<a href="clip.mp4">Baixe o MP4 do clipe.</a>
</vídeo>;
Players de vídeo personalizados
Uma das coisas poderosas sobre o elemento de vídeo e a API do Media Player é que o sistema
permite muita personalização. Você pode alterar a aparência dos botões de controle com CSS e
manipular a funcionalidade com JavaScript. Isso está além do escopo deste capítulo, mas eu
recomendo o artigo “Creating a Cross-Browser Video Player” de Eric Shepherd, Chris Mills e Ian
Devlin (developer.mozilla.org/en-US/Apps/Fundamentals/
Audio_and_video_delivery/cross_browser_video_player) para uma boa visão geral.
Você também pode estar interessado em experimentar um player de vídeo pré-fabricado que
oferece boa aparência e desempenho avançado, como suporte para formatos de streaming de
vídeo. Você pode implementar muitos deles adicionando uma ou duas linhas de JavaScript ao
seu documento e, em seguida, usando o elemento video , então não é difícil começar. Há um
bom resumo de opções de player de vídeo plug-and-play listadas no VideoSWS
(videosws.praegnanz.de/).
Retrocesso de vídeo em Flash
Os navegadores mais antigos, principalmente o Internet Explorer versões 8 e anteriores, não

suportam vídeo. Se o IE8 estiver causando um desvio significativo nas estatísticas do seu site,
você pode optar por fornecer um substituto de filme em Flash. O artigo “Criando um player de
vídeo entre navegadores” mencionado anteriormente tem uma explicação completa da técnica.
Outro artigo que vale a pena ler é o “Video for Everybody” de Kroc Camen (camendesign.
com/code/video_for_everybody). É um pouco datado, mas tenho certeza que seria útil,
equilibrado com seu conhecimento atualizado de suporte ao navegador.

Vídeo e áudio
Adicionando áudio a uma página
Se você entendeu o exemplo de marcação de vídeo , já sabe como <áudio>…</áudio>

adicionar áudio a uma página. O elemento de áudio usa os mesmos Adiciona um arquivo de áudio à página
atributos que o elemento de vídeo , com exceção de largura, altura e pôster

(porque não há nada para exibir). Assim como o elemento de vídeo , você pode fornecer uma
pilha de opções de formato de áudio usando o elemento de origem , conforme mostrado no
exemplo aqui. A FIGURA 10-4 mostra como o reprodutor de áudio pode ficar quando
renderizado no navegador.
<p>Toque "Percussion Gun" de White Rabbits</p>
<audio id="whiterabbits" controla preload="auto">

<source src="percussiongun.mp3" type="audio/mp3">
<source src="percussiongun.ogg" type="audio/ogg">
<source src="percussiongun.webm" type="audio/webm">
<p>Baixe "Arma de Percussão":</p>
<ul>
<li><a href="percussiongun.mp3">MP3</a></li>
<li><a href="percussiongun.ogg">Ogg Vorbis</a></li>
</ul>
</audio>
FIGURA 10-4. Reprodutor de áudio como renderizado no Firefox.
Se você tiver apenas um arquivo de áudio, poderá simplesmente usar o atributo src . Se você
quer ser mau, você pode incorporar áudio em uma página, configurá-lo para tocar
automaticamente e depois fazer um loop, e não fornecer nenhum controle para pará-lo assim:
<audio src="jetfighter.mp3" loop de reprodução automática></audio>
Mas você nunca faria algo assim, certo? Certo?! Claro que não.
Adicionando faixas de texto
O elemento track fornece uma maneira de adicionar texto sincronizado com a linha do tempo <faixa>…</faixa>
de uma faixa de vídeo ou áudio. Alguns usos incluem o seguinte: Adiciona texto sincronizado à
mídia incorporada
• Legendas em idiomas alternativos
• Legendas para deficientes auditivos
• Descrições do que está acontecendo em um vídeo para deficientes visuais
• Títulos de capítulos para permitir a navegação pela mídia
• Metadados que não são exibidos, mas podem ser usados por scripts

Vídeo e áudio
Claramente, adicionar faixas de texto torna a mídia mais acessível, mas tem o bônus
adicional de melhorar o SEO (Search Engine Optimization). Também pode permitir deep
linking, vinculando-se a um ponto específico na linha do tempo da mídia.
A FIGURA 10-5 mostra como as legendas podem ser renderizadas em um navegador

que suporte o elemento track .
FIGURA 10-5. Um vídeo com legendas.
Use o elemento track dentro do elemento de vídeo ou áudio que deseja anotar. O
elemento track deve aparecer após todos os elementos de origem , se houver, e pode
incluir estes atributos:
src
Aponta para o arquivo de texto.
Gentil
Especifica o tipo de anotação de texto que você está fornecendo (legendas, legendas, descrições ,
capítulos ou metadados). Se kind for definido como subtitle, você também deverá especificar o idioma
(atributo srclang ) usando uma tag de idioma de duas letras padronizada da IANA (consulte a Nota).
NOTA
A lista completa de códigos de idioma de etiqueta
duas letras está publicada em www.iana.org/

Fornece um nome para a faixa que pode ser usado na interface para selecionar uma
assign ments/language-subtag-registry/lan
faixa específica.
guage-subtag-registry.
predefinição
Marca uma faixa específica como padrão e pode ser usada em apenas uma faixa
dentro de um elemento de mídia.

Vídeo e áudio
O código a seguir fornece opções de legendas em inglês e francês para um filme:
<video width="640" height="320" controles>

<source src="japanese_movie.mp4" type="video/mp4">
<source src="japanese_movie.webm" type="video/webm">
<track src="english_subtitles.vtt"
kind="legendas"
srclang="pt"
label="legendas em inglês"
padrão>
<track src="francês.vtt"
kind="legendas"
srclang="fr"
label="Sous-titres en français">
</video>
WebVTT
Você notará no exemplo anterior que a trilha aponta para um arquivo com extensão .vtt
sufixo. Esse é um arquivo de texto no formato WebVTT (Web Video Text Tracks) que contém
uma lista de sugestões. Se parece com isso:
WEBVTT
00:00:01.345 --> 00:00:03.456

Bem-vindo ao Artefato [aplausos]
00:00:06.289 --> 00:00:09.066

Há um monte de novas tecnologias móveis para discutir.
00:00:06.289 --> 00:00:13.049

Estamos felizes por todos vocês terem se juntado a nós no Alamo Drafthouse.
As dicas são separadas por espaços de linha vazios. Cada sugestão tem um horário de início
e término no formato horas:minutos:segundos:milissegundos , separados por uma “seta” (-->).
O texto de sugestão (legenda, legenda, descrição, capítulo ou metadados) está em uma linha
abaixo. Opcionalmente, um ID pode ser fornecido para cada sugestão na linha acima da
sequência de tempo.
Você provavelmente pode adivinhar que há muito mais para dominar faixas de texto para
vídeo e áudio. Dê uma olhada nos seguintes recursos:
• “Adicionando legendas e legendas ao vídeo HTML5” em MDN Web Docs

(developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/
Adicionando_captions_and_subtitles_to_HTML5_video)
• Tutorial de legendas em Tutoriais Miracle (www.miracletutorials.com/how-to create-

NOTA
captionssubtitles-for-video-and-audio-in-webtvv-srt-dfxp-format/)
Outros formatos de texto temporizado
• A especificação WebVTT no W3C está disponível em www.w3.org/TR/
incluem legendagem SRT (substituída
webvtt1/ por WebVTT) e TML/DFXP, que é
Se você quiser brincar com o elemento de vídeo , passe algum tempo com mantido pelo W3C e suportado pelo
Internet Explorer, mas não é recomendado
EXERCÍCIO 10-2.
na especificação HTML5 para trilha.

Tela
EXERCÍCIO 10-2. Incorporando um player de vídeo
Neste exercício, você adicionará um vídeo a uma página com o vídeo 3. Salve e visualize o documento em seu navegador. Se você ver o
elemento. Nos materiais do Capítulo 10, você encontrará o pequeno filme mensagem de fallback, seu navegador é antigo e não suporta o elemento
sobre testes em túnel de vento nos formatos MPEG-4, OGG/Theora e de vídeo . Se você vir os controles, mas nenhum vídeo, ele não suporta
WebM. MP4, então tente novamente com um dos outros formatos.
1. Crie um novo documento com a configuração HTML5 adequada, ou 4. O elemento de vídeo é bastante simples, então você pode se sentir
você pode usar o mesmo documento usado no EXERCÍCIO 10-1. feito neste momento, mas eu encorajo você a brincar um pouco com isso
2. Comece adicionando o elemento video com o atributo src para ver o que acontece. Aqui estão algumas coisas para tentar:
apontou para windtunnel.mp4 porque o vídeo MP4 tem o melhor • Redimensione o player de vídeo com a largura e a altura
suporte ao navegador. Certifique-se de incluir a largura (320 pixels) e a atributos.
altura (262 pixels), bem como o atributo de controles para que você • Adicione o atributo de reprodução automática .
tenha uma maneira de reproduzir e pausar. Inclua alguma cópia substituta
• Remova o atributo de controles e veja como é
no elemento de vídeo , seja uma mensagem ou um link para o vídeo:
um usuário.
• Reescreva o elemento de vídeo usando elementos de origem para

<video src="windtunnel.mp4" largura="320" cada um dos três formatos de vídeo fornecidos.
altura="262" controles>
Desculpe, seu navegador não suporta vídeo HTML5.
</video>
TELA
Outro legal, “Olha mãe, sem plug-ins!” adição em HTML5 é a tela
elemento e a API Canvas associada. O elemento canvas cria uma área em uma
página da Web para desenho com um conjunto de funções JavaScript para criar
linhas, formas, preenchimentos, texto, animações e assim por diante. Você poderia
usá-lo para exibir uma ilustração, mas o que dá ao elemento canvas tanto potencial
(e deixa o mundo do desenvolvimento web tão encantado) é que tudo é gerado com
script. Isso significa que é dinâmico e pode desenhar coisas em tempo real e
responder à entrada do usuário. Isso o torna uma plataforma bacana para criar
animações, jogos e até aplicativos inteiros, todos usando o comportamento do
navegador nativo e sem plug-ins proprietários como o Flash.
Vale a pena notar que a área de desenho da tela é baseada em raster, o que
significa que é composta por uma grade de pixels. Isso o diferencia de outro padrão
de desenho, SVG, que usa formas vetoriais e caminhos definidos com pontos e
matemática.
NOTA A boa notícia é que todos os navegadores atuais suportam o elemento canvas até o
Se você tiver um bom motivo para oferecer

momento, com exceção do Internet Explorer 8 e anteriores (consulte a Nota). Tornou-
suporte ao IE8, a biblioteca JavaScript
se tão bem estabelecido que o software Animate da Adobe (o substituto do Flash
FlashCanvas (flashcanvas.net) adiciona Pro) agora exporta para o formato de tela.
suporte a tela usando a API de desenho do Flash.
A FIGURA 10-6 mostra alguns exemplos do elemento canvas usado para criar
jogos, programas de desenho, uma ferramenta de estrutura molecular interativa e um

Tela
animação de asteróides. Você pode encontrar mais exemplos em EnvatoTuts+ (código.

tutsplus.com/articles/21-ridiculously-impressive-html5-canvas-experiments-
-net-14210), no blog de David Walsh (davidwalsh.name/canvas-demos), bem como os
resultados de sua própria pesquisa na web.
mahjong.frvr.com/ muro.deviantart.com/
www.e ectgames.com/demos/canvascycle/ alteradoqualia.com/canvasmol/
FIGURA 10-6. Alguns exemplos do elemento canvas usado para jogos,

animações e aplicativos.
Dominar o elemento canvas é mais do que podemos assumir aqui, particularmente

sem nenhuma experiência em JavaScript, mas vou lhe dar um gostinho de como é
desenhar com JavaScript. Isso deve lhe dar uma boa ideia de como funciona e também
uma nova apreciação da complexidade de alguns desses exemplos.
O elemento tela
Você inclui um espaço de tela na página com o elemento de tela e especifica as <canvas>…</canvas>
dimensões com os atributos de largura e altura . E isso é realmente tudo o que há Adiciona uma área de desenho dinâmico 2D
para a marcação. Para navegadores que não suportam o elemento canvas , você pode
fornecer algum conteúdo alternativo (uma mensagem, imagem ou o que parecer
apropriado) dentro das tags:
<canvas width="600" height="400" id="my_first_canvas">

Seu navegador não suporta tela HTML5. Tente usar o Chrome, Firefox, Safari ou
MS Edge.
</canvas>

Tela
A marcação apenas limpa um espaço sobre o qual o desenho acontecerá. Você pode
afetar o próprio espaço de desenho com CSS (adicionar uma borda ou uma cor de
fundo, por exemplo), mas todo o conteúdo da tela é gerado por script e não pode ser
selecionado para estilização com CSS.
Desenhando com JavaScript

A API do Canvas inclui funções para criar formas, como strokeRect()
para desenhar um contorno retangular e beginPath() para iniciar um desenho de linha.
Algumas funções movem as coisas, como girar() e dimensionar(). Ele
também inclui atributos para aplicar estilos (por exemplo, lineWidth,
font, stroke Style e fillStyle).
Sanders Kleinfeld criou o seguinte exemplo de código para seu livro HTML5 for
Publishers (O'Reilly). Ele teve a gentileza de me permitir usá-lo neste livro. A FIGURA
10-7 mostra o rosto sorridente simples que criaremos com a API do Canvas.
FIGURA 10-7. O produto final do nosso exemplo “Hello Canvas”. Veja o original em
exemplos.oreilly.com/0636920022473/my_first_canvas/my_first_canvas.html.
E aqui está o script que o criou. Não se preocupe se você ainda não conhece
JavaScript. Basta folhear o script e prestar atenção aos comentários embutidos.
Também descreverei algumas das funções em uso no final. eu aposto
você vai entender a essência dele muito bem.
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
telaApp();
}
função telaApp(){
var theCanvas = document.getElementById('my_first_canvas');
var my_canvas = theCanvas.getContext('2d');
my_canvas.strokeRect(0,0,200,225) //
para começar, desenhe uma borda ao redor da tela

Tela
//desenha a
face my_canvas.beginPath();
my_canvas.arc(100, 100, 75, (Math.PI/180)*0, (Math.PI/180)*360, false);
// dimensões do círculo
my_canvas.strokeStyle = "black"; // contorno do círculo é preto
my_canvas.lineWidth = 3; // contorno tem três pixels de largura
my_canvas.fillStyle = "yellow"; // preenche o círculo com amarelo
my_canvas.stroke(); // desenha o círculo my_canvas.fill(); // preenche
o círculo my_canvas.closePath();
// agora, desenhe o olho

esquerdo my_canvas.fillStyle = "black"; // muda para preto para o
preenchimento my_canvas.beginPath(); my_canvas.arc(65, 70, 10,
(Math.PI/180)*0, (Math.PI/180)*360, false);
my_canvas.stroke(); // desenha o
círculo my_canvas.fill(); // preenche o
círculo my_canvas.closePath();
// agora, desenhe o olho

direito my_canvas.beginPath();
my_canvas.arc(135, 70, 10, (Math.PI/180)*0, (Math.PI/180)*360, false);
my_canvas.stroke(); // desenha o
círculo my_canvas.fill(); // preenche o
círculo my_canvas.closePath();
// desenha um
sorriso my_canvas.lineWidth = 6; // muda para seis pixels de largura para
contorno my_canvas.beginPath(); my_canvas.arc(99, 120, 35, (Math.PI/
180)*0, (Math.PI/180)*-180, false); // dimensões do semicírculo my_canvas.stroke();
my_canvas.closePath();
// Smiley fala!
my_canvas.fillStyle = "preto"; // muda para preto para preenchimento de
pixels my_canvas.font my_canvas.fillText
texto = '20px _sans';
("Hello
// usa
Canvas!",
fonte sem
45,
serifa
200);de// 20
escreve
texto } </script>
Por fim, aqui estão um pouco mais de informações sobre as funções da API do Canvas usadas
no exemplo:
strokeRect(x1, y1, x2, y2)
Desenha um contorno retangular do ponto (x1, y1) a (x2, y2). Por padrão, a origem da tela
(0, 0) é o canto superior esquerdo e as coordenadas xey são medidas à direita e para baixo .
começoCaminho()
Inicia um desenho de linha.
closePath()
Termina um desenho de linha que foi iniciado com beginPath().

Tela
arc(x, y, arc_radius, angle_radians_beg, angle_radians_end)
Desenha um arco onde (x,y) é o centro do círculo, arc_radius é o comprimento

do raio do círculo e angle_radians_beg e _end indicam o início e o fim do
ângulo do arco.
derrame()
Desenha a linha definida pelo caminho. Se você não incluir isso, o caminho não
aparecerá na tela.
encher()
Preenche o caminho especificado com beginPath() e endPath().
fillText(seu_texto, x1, y1)
Adiciona texto à tela começando na coordenada (x,y) especificada.
Além disso, os seguintes atributos foram usados para especificar cores e estilos:
espessura da linha
Largura da borda do caminho.

estilo de traço
Cor da borda.
estilo de preenchimento
Cor do preenchimento (interior) da forma criada com o caminho.

Fonte
A fonte e o tamanho do texto.
É claro que a API do Canvas inclui muito mais funções e atributos do que usamos
aqui. Para obter uma lista completa, consulte a especificação HTML5 Canvas 2D
Context do W3C em www.w3.org/TR/2dcontext. Uma pesquisa na web mostrará
muitos tutoriais do Canvas, caso você esteja pronto para aprender mais. Além
disso, posso recomendar estes recursos:
• O livro HTML5 Canvas, Segunda Edição, de Steve Fulton e Jeff Fulton

(O'Reilly).
• Se o vídeo for mais rápido, experimente este tutorial de David Geary: HTML5
Canvas for Developers (shop.oreilly.com/product/0636920030751.do).

Teste-se
TESTE-SE
Nós vimos todos os tipos de maneiras de colocar coisas em páginas da web neste capítulo.
Vimos como usar o iframe para criar uma “janela em uma janela” para exibir recursos externos
da Web; objeto para recursos que requerem plug-ins, reprodutores de vídeo e áudio; e o espaço
de desenho programável em tela 2-D. Agora veja se você estava prestando atenção. Como
sempre, as respostas estão no Apêndice A.
1. O que é um “contexto de navegação aninhado” e como você criaria um?
2. Por que você usaria o atributo sandbox com um iframe?
3. Cite algumas instâncias em que você pode precisar saber o tipo MIME para seu arquivo de
mídia.
4. Identifique cada um dos itens a seguir como um formato de contêiner, codec de vídeo ou áudio
codec:
uma. Ogg ____________________

b. H.264 ____________________
c. VP8 ____________________
d. Vorbis ____________________
e. WebM ____________________
f. Theora ____________________
g. Opus ____________________
h. MPEG-4 ____________________
5. O que o atributo pôster faz?
6. O que é um arquivo .vtt ?
7. Liste pelo menos duas diferenças entre SVG e Canvas.
8. Liste as duas funções da API do Canvas que você usaria para desenhar um retângulo e
preenchê-lo com vermelho. Você não precisa escrever o script inteiro.

Revisão do elemento: mídia incorporada
REVISÃO DO ELEMENTO: MÍDIA INCORPORADA
Os elementos a seguir são usados para incorporar arquivos de mídia de vários tipos em páginas da web.
Elemento e Atributos Descrição
áudio Incorpora um player de áudio na página
src="URL" Endereço do recurso
crossorigin="anônimo| Como o elemento trata solicitações de outras origens (servidores)

credenciais de uso"
preload="auto|nenhum|metadados" Indica quanto o recurso de mídia deve ser armazenado em buffer no carregamento da página
Reprodução automática
Indica que a mídia pode ser reproduzida assim que a página for carregada
ciclo Indica que o arquivo de mídia deve começar a ser reproduzido automaticamente quando chegar ao
fim
mudo Desativa a saída de áudio
controles Indica que o navegador deve exibir um conjunto de controles de reprodução para o arquivo de mídia
tela Representa uma área bidimensional que pode ser usada para renderizar gráficos de bitmap dinâmicos
altura A altura da área da tela
largura A largura da área da tela
Embutir Incorpora um objeto multimídia que requer um plug-in para reprodução na página.
Certos tipos de mídia exigem atributos personalizados não listados abaixo.
src="URL" Endereço do recurso de mídia
type=" tipo de mídia" O tipo de mídia (MIME) da mídia
largura = "número" A dimensão horizontal do player de vídeo em pixels
altura="número" A dimensão vertical do player de vídeo em pixels
iframe Cria um contexto de navegação aninhado para exibir recursos HTML em uma página
src="URL" Endereço do recurso HTML
srcdoc=" Código fonte HTML" A fonte HTML de um documento a ser exibido no quadro embutido
nome="texto" Atribui um nome ao quadro embutido a ser referenciado por links direcionados
caixa de areia= Regras de segurança para conteúdo aninhado

"permitir-formulários|
permitir-ponteiro-lock|
permitir pop-ups|
permitir-mesma-origem|
permitir-scripts|
permitir-top-navegação"
Permitir tela cheia Indica que os objetos no quadro embutido têm permissão para usar requestFullScreen()

Revisão do elemento: mídia incorporada
Elemento e Atributos Descrição
objeto Um elemento genérico para incorporar um recurso externo
dados="URI" Endereço do recurso
type=" tipo de mídia" O tipo de mídia (MIME) do recurso
tipo deve corresponder Indica que o recurso deve ser usado somente se o valor do atributo type e o tipo de conteúdo do
recurso corresponderem
nome="texto" O nome do objeto a ser referenciado por scripts
form="formulário ID" Associa o objeto a um elemento de formulário
parâmetro Fornece um parâmetro dentro de um elemento de objeto
nome="texto" Define o nome do parâmetro
valor="texto" Define o valor do parâmetro
fonte Permite que os autores especifiquem várias versões de um arquivo de mídia (usado com vídeo
e áudio)
src="texto" O endereço do recurso
type=" tipo de mídia" O tipo de mídia (MIME) do recurso
acompanhar
Especifica um recurso externo (texto ou áudio) que é sincronizado com um arquivo de mídia que
melhora a acessibilidade, navegação ou SEO
kind="legendas|legendas| Tipo de faixa de texto

descrições|capítulos|metadados"
src="texto" Endereço do recurso externo
srclang=" tag de idioma válido" Idioma da faixa de texto
etiqueta="texto" Um título para a faixa que pode ser exibido pelo navegador
predefinição Indica que a faixa deve ser usada por padrão se não substituir a preferência do usuário
ences
vídeo Incorpora um player de vídeo na página
src="URL" Endereço do recurso
crossorigin="anônimo| Como o elemento trata solicitações de outras origens (servidores)

credenciais de uso"
poster="URL" A localização de um arquivo de imagem que é exibido como um espaço reservado antes que o vídeo
comece a ser reproduzido
preload="auto|nenhum|metadados" Indica a quantidade de buffer que o recurso de mídia precisará
loop de reprodução Indica que a mídia pode ser reproduzida assim que a página for carregada
automática Indica que o arquivo de mídia deve começar a ser reproduzido automaticamente quando chegar ao
fim
mudo Desativa a saída de áudio
controles Indica que o navegador deve exibir um conjunto de controles de reprodução para o arquivo de mídia
largura = "número" Especifica a dimensão horizontal do player de vídeo em pixels
altura="número" Especifica a dimensão vertical do player de vídeo em pixels

III
CSS PARA APRESENTAÇÃO
CAPÍTULO
APRESENTAÇÃO 11
ESTILO EM CASCATA
LENÇÓIS
Você já ouviu falar bastante das folhas de estilo, e agora vamos finalmente colocá-las em NESTE CAPÍTULO
prática e começar a dar às nossas páginas um estilo muito necessário. Cascading Style Sheets
(CSS) é o padrão W3C para definir a apresentação de documentos escritos em HTML e, de Os benefícios e o poder do CSS
fato, em qualquer linguagem XML.

Como a marcação HTML cria uma
A apresentação, novamente, refere-se à forma como o documento é entregue ao usuário, seja estrutura de documento
mostrado na tela do computador, exibido no celular, impresso em papel ou lido em voz alta por
um leitor de tela. Com as folhas de estilo lidando com a apresentação, o HTML pode lidar com Regras de estilo de escrita
a tarefa de definir a estrutura e o significado do documento, conforme pretendido.

Anexando estilos ao documento
HTML
CSS é uma linguagem separada com sua própria sintaxe. Este capítulo aborda a terminologia
Grandes conceitos: herança,
CSS e os conceitos fundamentais que o ajudarão a se orientar para os próximos capítulos,
especificidade, cascata, ordem de
onde você aprenderá como alterar estilos de texto e fonte, adicionar cores e planos de fundo e
regras e modelo de caixa
até mesmo fazer o layout básico da página. Ao final da Parte III, pretendo fornecer uma base
sólida para leitura adicional por conta própria e muita prática.
OS BENEFÍCIOS DO CSS
Não que você precise convencer ainda mais de que as folhas de estilo são o caminho a seguir,
mas aqui está um resumo rápido dos benefícios do uso de folhas de estilo.
• Controles precisos de tipo e layout. Você pode obter precisão semelhante à impressão
usando CSS. Existe até um conjunto de propriedades voltadas especificamente para a
página impressa (mas não as abordaremos neste livro).
• Menos trabalho. Você pode alterar a aparência de um site inteiro editando uma folha de
estilo. Isso também garante a consistência da formatação em todo o site.
239
Como funcionam as folhas de estilo
• Sites mais acessíveis. Quando todas as questões de apresentação são tratadas por CSS,
você pode marcar seu conteúdo de forma significativa, tornando-o mais acessível para
dispositivos não visuais ou móveis.
Venha para pensar sobre isso, realmente não há desvantagens em usar folhas de estilo.
Existem alguns aborrecimentos persistentes de inconsistências do navegador, mas eles podem
ser evitados ou contornados se você souber onde procurá-los.
O poder do CSS
Não estamos falando de pequenos ajustes visuais aqui, como alterar a cor dos títulos ou
adicionar recuos de texto. Quando usado em todo o seu potencial, o CSS é uma ferramenta
de design robusta e poderosa. Meus olhos foram abertos pela primeira vez para as
possibilidades de usar CSS para design pela variedade e riqueza dos designs no CSS Zen
Garden (www.csszengarden.com).
Nos dias nebulosos de outrora (2003), quando os desenvolvedores ainda hesitavam em

desistir de seus layouts baseados em tabelas para CSS, o site CSS Zen Garden de David
Shea demonstrou exatamente o que poderia ser feito usando apenas CSS. David postou um
documento HTML e convidou designers para contribuir com suas próprias folhas de estilo que
deram ao documento um design visual. A FIGURA 11-1 mostra apenas alguns dos meus
favoritos. Todos esses designs usam exatamente o mesmo documento de origem HTML.
Além disso, eles não incluem um único elemento img (todas as imagens estão no fundo dos
elementos). Mas veja como cada página parece diferente – e quão sofisticada. Isso tudo é
feito com folhas de estilo. É a prova do poder de manter o CSS separado do HTML e a
apresentação separada da estrutura.
O CSS Zen Garden não está mais sendo atualizado e agora é considerado um documento
histórico de um ponto de virada na adoção de padrões web.
Apesar de sua idade, ainda acho que é uma boa lição para demonstrar exatamente o que o
CSS pode fazer.
É verdade que é preciso muita prática para poder criar layouts CSS como os mostrados na
FIGURA 11-1. Habilidades de design gráfico matadoras também ajudam (infelizmente, você
não as obterá neste livro). Estou mostrando isso de antemão porque quero que você esteja
ciente do potencial do design baseado em CSS, principalmente porque os exemplos neste
livro para iniciantes tendem a ser simples e diretos. Leve o seu tempo aprendendo, mas fique
de olho no prêmio.
COMO FUNCIONAM AS FOLHAS DE ESTILO
É tão fácil quanto 1-2-3!
1. Comece com um documento marcado em HTML.
2. Escreva regras de estilo para a aparência de certos elementos.
240 Parte III. CSS para apresentação

CSS Zen Dragen pelo cais

por Matthew Buchanan por Peter Ong Kelmscott
Organica Creativa Shaolin Yokobue

por Eduardo Cesário por Javier Cabrera
FIGURA 11-1. Essas páginas do CSS Zen Garden usam o mesmo documento de
origem HTML, mas o design é alterado apenas com CSS (usado com permissão do CSS
Zen Garden e dos designers individuais).
3. Anexe as regras de estilo ao documento. Quando o navegador exibe o documento, ele

segue suas regras para renderização de elementos (a menos que o usuário tenha
aplicado alguns estilos obrigatórios, mas falaremos sobre isso mais tarde).
OK, então há um pouco mais do que isso, é claro. Vamos dar a cada uma dessas etapas
um pouco mais de consideração.
1. Marcando o Documento
Você sabe muito sobre marcação de conteúdo dos capítulos anteriores. Por exemplo, você
sabe que é importante escolher elementos que descrevam com precisão o significado do
conteúdo. Você também me ouviu dizer que a marcação
11. Apresentando Folhas de Estilo em Cascata 241

EXERCÍCIO 11-1. cria a estrutura do documento, às vezes chamada de camada estrutural, sobre a qual a
Um primeiro olhar camada de apresentação pode ser aplicada.
Neste e nos próximos capítulos, você verá que entender a estrutura do seu documento e
Neste capítulo, adicionaremos alguns

as relações entre os elementos é fundamental para o seu trabalho como autor de uma
estilos simples a um pequeno artigo. O folha de estilo.
documento, cooking.html, e sua imagem
Nos exercícios deste capítulo, você terá uma ideia de como é simples alterar a aparência
associada, salads.jpg, estão disponíveis em
learningwebdesign.com/5e/materials/. de um documento com folhas de estilo. A boa notícia é que preparei um pequeno
Por enquanto, basta abrir o documento

documento HTML para você brincar. Você pode se familiarizar com a página com a qual
em um navegador para ver como ele trabalharemos no EXERCÍCIO 11-1.
fica por padrão (deve ser algo como a
FIGURA 11-2). Você também pode abrir o
documento em um editor de texto para se 2. Escrevendo as Regras
preparar para acompanhar os próximos
dois exercícios. Uma folha de estilo é composta de uma ou mais instruções de estilo (chamadas de regras
de estilo) que descrevem como um elemento ou grupo de elementos deve ser exibido. O
primeiro passo para aprender CSS é se familiarizar com as partes de uma regra. Como
você verá, eles são bastante intuitivos de seguir. Cada regra seleciona um elemento e declara
como deve ser.
O exemplo a seguir contém duas regras. O primeiro torna todos os elementos h1 no

documento verdes; a segunda especifica que os parágrafos devem estar em uma fonte
grande e sem serifa. As fontes sem serifa não têm uma pequena laje (uma serifa) nas
extremidades dos traços e tendem a parecer mais elegantes e modernas.
h1 { cor: verde; }
p { tamanho da fonte: grande; família de fontes: sem serifa; }
Na terminologia CSS, as duas seções principais de uma regra são o seletor que identifica
o elemento ou elementos a serem afetados e a declaração que fornece as instruções de
renderização. A declaração, por sua vez, é composta por uma propriedade
(como cor) e seu valor (verde), separados por dois pontos e um espaço. Uma ou mais
FIGURA 11-2. É assim que o artigo declarações são colocadas entre colchetes, conforme mostrado na FIGURA 11-3.
se parece sem nenhuma instrução de
folha de estilo. Embora não o tornemos
bonito, você terá uma ideia de como as
folhas de estilo funcionam.
declaração bloco de declaração
seletor { propriedade: valor; } seletor {

propriedade1: valor1;
}
FIGURA 11-3. As partes de uma regra de estilo.

Seletores
No exemplo de folha de estilo pequena anterior, os elementos h1 e p são usados como

Seletores neste livro
seletores. Isso é chamado de seletor de tipo de elemento e é o tipo mais básico de
seletor. As propriedades definidas para cada regra serão aplicadas a cada h1 e p Em vez de jogar os seletores em você
todos de uma vez, eu os espalhei para que
elemento no documento, respectivamente.
você possa dominar alguns de cada vez.
Outro tipo de seletor é um seletor de ID, que seleciona um elemento com base no valor Aqui é onde você vai encontrá-los:
do atributo id de um elemento. É indicado com o símbolo # . Por exemplo, o seletor Capítulo 11:
#recipe tem como alvo um elemento com id="recipe". Seletor de tipo de elemento (p.243)
Nos próximos capítulos, apresentarei seletores mais sofisticados que você pode usar Seletores agrupados (p.252)
para direcionar elementos, incluindo maneiras de selecionar grupos de elementos e Capítulo 12:
elementos que aparecem em um contexto específico. Consulte a barra lateral “Seletores Seletores descendentes (p.281)
neste livro” para obter detalhes.
Seletores de ID e classe (p.282–6)
Dominar seletores – ou seja, escolher o melhor tipo de seletor e usá-lo estrategicamente Seletores filho, próximo irmão e irmãos
– é um passo importante no domínio do CSS. seguintes (p.283)
Seletor universal (*) (p.285)
Declarações Capítulo 13:
Seletores de pseudo-classe (p.316)

A declaração é composta por um par propriedade/valor. Pode haver mais de uma
Seletores de pseudo-elementos (p.320)
declaração em uma única regra; por exemplo, a regra para o elemento p mostrada
anteriormente no exemplo de código tem as propriedades font-size e font-family . Seletores de atributos (p.323)
Cada declaração deve terminar com um ponto e vírgula para mantê-la separada da
declaração a seguir (consulte a Nota). Se você omitir o ponto e vírgula, a declaração e a
seguinte serão ignoradas. Os colchetes e as declarações que eles contêm são
frequentemente chamados de bloco de declaração (FIGURA 11-3).
NOTA
Como o CSS ignora espaços em branco e retornos de linha dentro do bloco de
declaração, os autores normalmente escrevem cada declaração no bloco em sua própria Tecnicamente, o ponto e vírgula não é
obrigatório após a última declaração do bloco,
linha, conforme mostrado no exemplo a seguir. Isso torna mais fácil encontrar as
mas é recomendável que você adquira o
propriedades aplicadas ao seletor e dizer quando a regra de estilo termina.
hábito de sempre terminar as declarações com
p
um ponto e vírgula. Isso tornará a adição de
{ tamanho da fonte:
declarações à regra mais tarde muito mais fácil.
grande; família de fontes: sem
serifa; }
Observe que nada realmente mudou aqui - ainda há um conjunto de chaves, ponto e
vírgula após cada declaração e assim por diante. A única diferença é a inserção de
retornos de linha e alguns espaços de caracteres para alinhamento.
Propriedades
O coração das folhas de estilo está na coleção de propriedades padrão que podem ser
aplicadas aos elementos selecionados. A especificação CSS completa define dezenas
de propriedades para tudo, desde recuos de texto até como os cabeçalhos das tabelas
devem ser lidos em voz alta. Este livro abrange as propriedades ed mais comuns e com
melhor suporte que você pode começar a usar imediatamente.

Valores
Os valores dependem da propriedade. Algumas propriedades fazem medições de

comprimento, algumas usam valores de cor e outras têm uma lista predefinida de palavras-chave.
Quando você usa uma propriedade, é importante saber quais valores ela aceita; no
entanto, em muitos casos, o simples bom senso servirá bem. Ferramentas de autoria,
como Dreamweaver ou Visual Studio, fornecem dicas de valores adequados para escolha.
Antes de prosseguirmos, por que não praticar um pouco as regras de estilo de escrita no
EXERCÍCIO 11-2?
EXERCÍCIO 11-2. Sua primeira folha de estilo
Abra cooking.html em um editor de texto. No cabeçalho do documento você verá • Adicione também uma margem esquerda de 100 pixels aos títulos h2 .
que eu configurei um elemento de estilo para você digitar as regras. O elemento de • Adicione uma borda laranja de 1 pixel na parte inferior do elemento h1 usando esta
estilo é usado para incorporar uma folha de estilo em um documento HTML. Para declaração:
começar, vamos simplesmente adicionar a pequena folha de estilo que acabamos de
ver nesta seção. Digite as seguintes regras no documento, exatamente como você as border-bottom: laranja sólido de 1px;
vê aqui: • Mova a imagem para a margem direita e permita que o texto flua em torno
<estilo> dela com a propriedade float . A margem abreviada
h1 { A propriedade mostrada nesta regra adiciona zero pixels de espaço na parte
cor verde; superior e inferior da imagem e 12 pixels de espaço à esquerda e à direita da

} imagem (os valores são espelhados da maneira explicada no Capítulo 14,
p Pensando dentro da caixa):
{ tamanho da fonte:
grande; família de fontes: sem img {
serifa; } flutuar: direita;
</style> margem: 0 12px;
}
Salve o arquivo e dê uma olhada nele no navegador. Você deve notar algumas
Quando terminar, o documento deve ser parecido com o mostrado na FIGURA 11-4.
mudanças (se o seu navegador já usa uma fonte sans-serif, você pode ver
apenas uma mudança de tamanho). Caso contrário, volte e verifique se você
incluiu o colchete de abertura e fechamento e o ponto e vírgula. É fácil omitir
acidentalmente esses caracteres, fazendo com que a folha de estilo não funcione.
Agora vamos editar a folha de estilo para ver como é fácil escrever regras e ver
os efeitos das mudanças. Aqui estão algumas coisas para tentar.
IMPORTANTE: Lembre-se de que você precisa salvar o documento após cada

alteração para que as alterações fiquem visíveis ao recarregá-lo no navegador.
• Torne o elemento h1 “cinza” e dê uma olhada nele no navegador.

Em seguida, torná-lo "azul". Por fim, faça-o “laranja”. (Vamos percorrer a lista
completa de nomes de cores disponíveis no Capítulo 13, Cores e Planos de
Fundo.)
• Adicione uma nova regra que torne os elementos h2 laranja também.
• Adicione uma margem esquerda de 100 pixels aos elementos de parágrafo (p)
usando esta declaração:
margem esquerda: 100px;
Lembre-se de que você pode adicionar essa nova declaração à regra existente FIGURA 11-4. O artigo depois de adicionar uma pequena folha de estilo.
para elementos p . Não é bonito, apenas diferente.

3. Anexando os Estilos ao Documento

No exercício anterior, incorporamos a folha de estilo diretamente no documento usando o
elemento style . Essa é apenas uma das três maneiras pelas quais as informações de
Comentários em estilo
estilo podem ser aplicadas a um documento HTML. Você experimentará cada um deles Lençóis
em breve, mas é útil ter uma visão geral dos métodos e da terminologia antecipadamente.
Às vezes é útil deixar comentários
sobre você ou seus colaboradores em
Folhas de estilo externas uma folha de estilo. CSS tem sua própria
sintaxe de comentário, mostrada aqui:
Uma folha de estilo externa é um documento separado, somente texto, que contém
várias regras de estilo. Ele deve ser nomeado com o sufixo .css . O .css /* comentário vai aqui */
documento é então vinculado (através do elemento link ) ou importado (através de O conteúdo entre /* e */ será ignorado
uma regra @import em uma folha de estilo) em um ou mais documentos HTML. quando a folha de estilo for analisada, o que
Dessa forma, todos os arquivos de um site podem compartilhar a mesma folha de significa que você pode deixar comentários
estilo. Este é o método mais poderoso e preferido para anexar folhas de estilo ao conteúdo. em qualquer lugar de uma folha de estilo,
mesmo dentro de uma regra:
Discutiremos mais as folhas de estilo externas e começaremos a usá-las nos
exercícios do Capítulo 13. corpo
{ tamanho da fonte: pequeno;
Folhas de estilo /* altere isso mais tarde */ }
incorporadas Este é o tipo de folha de estilo com o qual trabalhamos no exercício.

Um uso para comentários é rotular
Ele é colocado em um documento por meio do elemento de estilo e suas regras se
seções da folha de estilo para facilitar a
aplicam apenas a esse documento. O elemento de estilo deve ser colocado no
localização posterior; por exemplo:
cabeçalho do documento. Este exemplo também inclui um comentário (veja a barra
lateral “Comentários em Folhas de Estilo” ).
/* ESTILOS DE RODAPÉ */
<cabeça>
<title>Título do documento obrigatório aqui</title> Os comentários CSS também são úteis
<estilo> para ocultar temporariamente as declarações

/* regras de estilo aqui */ de estilo no processo de design. Quando
</style> estou experimentando vários estilos, posso
</head>
desativá-los rapidamente colocando-os entre /
* e */, verificar o design em um navegador e
Estilos embutidos
remover os caracteres de comentário para
Você pode aplicar propriedades e valores a um único elemento usando o estilo tornar o
atributo no próprio elemento, como mostrado aqui: estilo apareça novamente. É muito mais
rápido do que redigitar a coisa toda.
<h1 style="color: red">Introdução</h1>
Para adicionar várias propriedades, basta separá-las com ponto e vírgula, assim:
<h1 style="color: red; margin-top: 2em">Introdução</h1>
Os estilos embutidos se aplicam apenas ao elemento específico em que aparecem.

Estilos inline devem ser evitados, a menos que seja absolutamente necessário
sobrescrever estilos de uma folha de estilo incorporada ou externa. Os estilos
embutidos são problemáticos, pois intercalam informações de apresentação na
marcação estrutural. Eles também tornam mais difícil fazer alterações porque cada
atributo de estilo deve ser caçado na fonte.
O EXERCÍCIO 11-3 lhe dá a oportunidade de escrever um estilo embutido e ver como ele
funciona. Não trabalharemos com estilos embutidos após este ponto pelos motivos listados
anteriormente, então aqui está sua chance.

Os grandes conceitos
EXERCÍCIO 11-3. OS GRANDES CONCEITOS

Aplicando um estilo embutido
Existem algumas grandes ideias que você precisa ter em mente para se sentir
confortável com o comportamento das Folhas de Estilo em Cascata. Vou apresentá-los
Abra o artigo cooking.html no último a esses conceitos agora para que não precisemos desacelerar para uma palestra
estado em que o deixou no EXERCÍCIO
quando estivermos rolando pelas propriedades de estilo. Cada uma dessas ideias será
11-2. Se você trabalhou até o final do
revisitada e ilustrada com mais detalhes nos próximos capítulos.
exercício, você terá uma regra que torna os
elementos h2 laranja.
Escreva um estilo embutido que torne o

Herança
segundo h2 cinza. Faremos isso na tag de
abertura h2 usando o estilo
Seus olhos são da mesma cor dos seus pais? Você herdou a cor do cabelo deles?
atributo, como mostrado aqui:
Bem, assim como os pais transmitem características para seus filhos, os elementos
<h2 style="color: cinza">O
HTML com estilo transmitem certas propriedades de estilo para os elementos que eles contêm.
Prato Principal</h2>
Observe no EXERCÍCIO 11-1, quando estilizamos os elementos p em uma fonte grande
Observe que deve ser cinza-com-um-a (não
sem serifa, o elemento em no segundo parágrafo ficou grande e sem serifa também,
cinza-com-um-e) porque é assim que a cor é
embora não tenhamos escrito uma regra especificamente para ele (FIGURA 11-5). Isso
definida na especificação.
ocorre porque o elemento em herdou os estilos do parágrafo em que está.
Salve o arquivo e abra-o em um navegador.
Agora, o segundo título é cinza,
A herança fornece um mecanismo para estilizar elementos que não possuem regras
substituindo a cor laranja definida na folha próprias de estilos explícitas.
de estilos incorporada. O outro h2
o título não é afetado. Parágrafo sem estilo
Parágrafo com estilos aplicados
O elemento em é grande e sem serifa,

embora não tenha regras de estilo próprias. Ele herda
estilos do parágrafo que o contém.
FIGURA 11-5. O elemento em herda os estilos que foram aplicados ao parágrafo.
Estrutura do documento
É aqui que a compreensão da estrutura do seu documento se torna importante. Como

observei antes, os documentos HTML têm uma estrutura ou hierarquia implícita. Por
exemplo, o artigo de exemplo com o qual estamos brincando tem um elemento raiz
html que contém um cabeçalho e um corpo, e o corpo contém elementos de
cabeçalho e parágrafo. Alguns dos parágrafos, por sua vez, contêm elementos
embutidos, como imagens (img) e texto enfatizado (em). Você pode visualizar a
estrutura como uma árvore de cabeça para baixo, ramificando-se da raiz, como

html
cabeça corpo
estilo do título meta h1p ph2p p p h2 pp
em img em em
FIGURA 11-6. A estrutura em árvore do documento de amostra, cooking.html.
Pais e filhos
A árvore do documento torna-se uma árvore genealógica quando se trata da relação entre
os elementos. Todos os elementos contidos em um determinado elemento são chamados de
seus descendentes. Por exemplo, os elementos h1, h2, p, em e img no documento da
FIGURA 11-6 são todos descendentes do corpo
elemento.
Um elemento que está diretamente contido em outro elemento (sem níveis hierárquicos
intervenientes) é chamado de filho desse elemento. Por outro lado, o elemento que contém
é o pai. Por exemplo, o elemento em é o filho do elemento p e o elemento p é seu pai.
Todos os elementos superiores a um determinado elemento na hierarquia são seus

ancestrais. Dois elementos com o mesmo pai são irmãos. Não nos referimos a “tias” ou
“primos”, então a analogia para por aí. Isso tudo pode parecer acadêmico, mas será útil
quando você estiver escrevendo seletores CSS.
Passe adiante
Quando você escreve uma regra de estilo relacionada à fonte usando o elemento p como
seletor, a regra se aplica a todos os parágrafos do documento, bem como aos elementos de
texto embutidos que eles contêm. Vimos a evidência do elemento em herdando as
propriedades de estilo aplicadas ao seu pai (p) na FIGURA 11-5. FIGURA 11-7
demonstra o que está acontecendo em termos do diagrama de estrutura do documento.
Observe que o elemento img é excluído porque as propriedades relacionadas à fonte não se
aplicam a imagens.
Observe que venho dizendo que “certas” propriedades são herdadas. É importante observar
que algumas propriedades da folha de estilo são herdadas e outras não. Em geral, as
propriedades relacionadas ao estilo do texto—tamanho da fonte, cor, estilo e afins—
são transmitidos. Propriedades como bordas, margens, planos de fundo e assim por diante
que afetam a área em caixa ao redor do elemento tendem a não ser transmitidas.
Isso faz sentido quando você pensa sobre isso. Por exemplo, se você colocar uma borda

html
cabeça corpo
estilo do título meta h1p ph2p p p h2 pp
em img em em
p {tamanho da fonte: grande; font-family: sans serif;}
FIGURA 11-7. Certas propriedades aplicadas ao elemento p são herdadas por seus filhos.
ao redor de um parágrafo, você não desejaria uma borda ao redor de cada elemento
embutido (como em, strong ou a) que ele contém também.
CSS DICA
Você pode usar a herança a seu favor ao escrever folhas de estilo. Por exemplo, se você
Quando você aprende uma nova deseja que todos os elementos de texto sejam azuis, você pode escrever regras de estilo
propriedade, é uma boa ideia observar separadas para cada elemento no documento e definir a cor como “azul”. Uma maneira
se ela herda. A herança é anotada para melhor seria escrever uma única regra de estilo que aplicasse a propriedade color ao
cada listagem de propriedade neste livro.
elemento body e deixar que todos os elementos contidos no corpo herdassem esse estilo
Na maioria das vezes, a herança segue
(FIGURA 11-8).
suas expectativas.
Qualquer propriedade aplicada a um elemento específico substitui os valores herdados
dessa propriedade. Voltando ao exemplo do artigo, se especificarmos que o elemento
deve ser laranja, isso substituiria a configuração azul herdada.
Se você aplicar a propriedade color ao

elemento body , ela será passada para todos
html os elementos do documento.
cabeça corpo corpo {cor: azul;}
estilo do título meta h1p p h2 ppp h2 p p
em img em em
(A cor será exibida para a imagem somente se houver uma borda aplicada a ela.)
FIGURA 11-8. Todos os elementos no documento herdam certas propriedades aplicadas ao elemento
body .

Estilos conflitantes: a cascata

Você já se perguntou por que eles são chamados de folhas de estilo “em cascata”? CSS permite
que você aplique várias folhas de estilo ao mesmo documento, o que significa que haverá
A “cascata” refere-se
conflitos. Por exemplo, o que o navegador deve fazer se a folha de estilo importada de um
ao que acontece quando várias
documento disser que os elementos h1 devem ser vermelhos, mas sua folha de estilo
fontes de informação de estilo
incorporada tem uma regra que torna h1s roxo? As duas regras de estilo com seletores h1 têm
disputam o controle
peso igual, certo?
dos elementos de um
As pessoas que escreveram a especificação da folha de estilo anteciparam esse problema e
página.
criaram um sistema hierárquico que atribui pesos diferentes às várias fontes de informação de
estilo. A cascata refere-se ao que acontece quando várias fontes de informações de estilo
disputam o controle dos elementos em uma página: as informações de estilo são passadas
(“cascatas”) até serem substituídas por uma regra de estilo com mais peso. O peso é considerado
com base na prioridade da origem da regra de estilo, na especificidade do seletor e na ordem da
regra.
Prioridade Hierarquia de Regras de Estilo
As informações de estilo podem vir de várias

Se você não aplicar nenhuma informação de estilo a uma página da Web, ela será renderizada
origens, listadas aqui da prioridade mais alta
de acordo com a folha de estilo interna do navegador. Estamos chamando isso de renderização
para a mais baixa. Em outras palavras, os itens
padrão; o W3C chama isso de folha de estilo do agente do usuário. Os usuários individuais mais altos na lista substituem os itens abaixo.
também podem aplicar seus próprios estilos (a folha de estilos do usuário, também chamada de
folha de estilos do leitor ), que substituem os estilos padrão em seus navegadores. No entanto, • Qualquer regra de estilo marcada como !importante
se o autor da página da Web tiver anexado uma folha de estilo (a folha de estilo do autor), isso pelo leitor (usuário)
substituirá os estilos do usuário e do agente do usuário. A barra lateral "Hierarquia de regras de estilo"
• Qualquer regra de estilo marcada como !importante
fornece uma visão geral da ordem em cascata da prioridade mais alta para a mais baixa. pelo autor
• Folhas de estilo escritas pelo autor • Folhas de

A única exceção é se o usuário identificou um estilo como “importante”, caso em que esse estilo
estilo criadas pelo leitor (usuário)
substituirá todos os estilos concorrentes (consulte a barra lateral “Atribuindo importância” ).
Isso permite que os usuários mantenham as configurações que acomodam uma deficiência,
• As regras de estilo padrão do navegador ("usuário
como o tipo extra grande para deficiência visual.
folha de estilo do agente”)
Especificidade
É possível que surjam conflitos em que um elemento esteja recebendo instruções de estilo de
mais de uma regra. Por exemplo, pode haver uma regra que se aplique a parágrafos e outra
regra para um parágrafo que tenha o ID “intro”. Qual regra o parágrafo de introdução deve usar?
Quando duas regras em uma folha de estilo entram em conflito, o tipo de seletor é usado para Quando duas regras em uma única
determinar o vencedor. Quanto mais específico o seletor, mais peso é dado para substituir folha de estilo entram em conflito, o
declarações conflitantes. Em nosso exemplo, o seletor que inclui o nome do ID (#intro) é mais tipo de seletor é usado para
específico do que um seletor de elemento geral (como p), então essa regra se aplicaria ao determinar o vencedor.
parágrafo “intro”, substituindo as regras definidas para todos os parágrafos.
É um pouco cedo para discutirmos a especificidade porque analisamos apenas dois tipos de
seletores. Por enquanto, coloque o termo especificidade e o conceito de que alguns

Atribuindo importância Se desejar
que uma regra não seja substituída por uma regra conflitante requisitos, como tipo grande ou texto de alto contraste para deficientes
subsequente, inclua o indicador !important logo após o valor da visuais, nunca são substituídos.
propriedade e antes do ponto e vírgula dessa regra. Por exemplo, para Com base nos exemplos anteriores, se a folha de estilo do leitor
garantir que o texto do parágrafo seja azul, use a seguinte regra: incluir esta regra
p {cor: preto;}
p {cor: azul !importante;}
o texto ainda seria azul porque todos os estilos do autor (mesmo aqueles
Mesmo que o navegador encontre um estilo embutido posteriormente não marcados como !importantes) têm precedência sobre os estilos do
no documento (que deve substituir uma folha de estilo em todo o leitor. No entanto, se o estilo do leitor conflitante estiver marcado como !
documento), como esta:
importante, como este p {cor: preto !importante;}
<p style="cor: vermelho">

esse parágrafo ainda será azul porque a regra com o indicador ! os parágrafos serão pretos e não poderão ser substituídos por nenhum
important não pode ser substituída por outros estilos na folha de estilo estilo fornecido pelo autor.
do autor.
Esteja ciente de que o indicador !important não é um cartão livre para
A única maneira de uma regra !important ser substituída é por uma sair da cadeia. As melhores práticas ditam que ele deve ser usado com
regra conflitante em uma folha de estilo de leitor (usuário) que também foi moderação, se for o caso, e certamente nunca apenas para sair de uma
marcada como !important. Isso é para garantir que o leitor especial situação complicada com herança e cascata.
seletores têm mais “peso” e, portanto, substituem outros em seu radar.

Revisitaremos a especificidade com muito mais detalhes no Capítulo 12, Formatando Texto
quando você tem mais tipos de seletores.
Ordem da regra
Depois que todas as fontes de folha de estilo tiverem sido classificadas por prioridade e
A cascata segue
depois que todas as folhas de estilo vinculadas e importadas tiverem sido embaralhadas,
uma regra de “o último vence”.
provavelmente haverá conflitos nas regras com pesos iguais. Quando esse for o caso, a
Qualquer regra que apareça por ordem em que as regras aparecem é importante. A cascata segue uma regra de “o último
último tem a última palavra.
vence”. Qualquer regra que apareça por último tem a última palavra.
Dentro de uma folha de estilo, se houver conflitos dentro de regras de estilo de peso
idêntico, o que vier por último na lista “vence”. Veja estas três regras, por exemplo:
<estilo>
p{ cor: vermelho; }
p{ cor: azul; }
p{ cor: verde; }
</style>
Nesse cenário, o texto do parágrafo ficará verde porque a última regra na folha de estilo —
ou seja, a mais próxima do conteúdo do documento — substitui as anteriores.
Processualmente, o parágrafo recebe uma cor, depois uma nova e, finalmente, um terceiro
(verde) que é usado. A mesma coisa acontece quando estilos conflitantes ocorrem em uma
única pilha de declarações:

<estilo>
p{ cor: vermelho; cor
azul; cor verde; } Usando Ordem de Regra para
Fallbacks
</style>
Muitas propriedades CSS são
A cor resultante será verde porque a última declaração substitui as duas anteriores. É fácil testadas e verdadeiras e são suportadas
substituir acidentalmente declarações anteriores dentro de uma regra quando você entra em por todos os navegadores; no entanto,
propriedades compostas, portanto, esse é um comportamento importante a ser lembrado. sempre surgem novas propriedades úteis
que demoram um pouco para serem
Esse é um exemplo muito simples. O que acontece quando as regras da folha de estilo de
implementadas pelos navegadores. É comum
diferentes fontes entram em jogo?
que apenas um ou dois navegadores
suportem um novo recurso e que outros
Vamos considerar um documento HTML que tenha uma folha de estilo incorporada (adicionada
fiquem para trás ou nunca o suportem.
com o elemento style ) que começa com uma regra @import para importar um arquivo .css
Também leva muito tempo para alguns
externo . Esse mesmo documento HTML também tem alguns estilos embutidos navegadores antigos desaparecerem completamente da existê
atributos aplicados a elementos h1 particulares .
Felizmente, existem várias maneiras de
DOCUMENTO DE ESTILO (externo.css): fornecer fallbacks (estilos alternativos usando

propriedades com melhor suporte) para
…
navegadores não compatíveis. O método
h1 { cor: vermelho }
mais direto tira proveito do comportamento
…
interno dos navegadores de ignorar qualquer
DOCUMENTO HTML: declaração que eles não entendem e, em
seguida, usar a ordem das regras
<!DOCTYPEhtml>
<html> estrategicamente.
<cabeça> Neste exemplo, adicionei uma
<título>…</título> imagem de borda decorativa a um
<estilo> elemento usando a imagem de borda
@import url(externo.css); /* configura primeiro para vermelho */ propriedade e forneceu uma borda
h1 { color: purple;} /* substituído por roxo */ sólida de fallback com o testado e
</style>
propriedade de fronteira verdadeira . Os
</head>
navegadores de suporte usam a imagem
<corpo>
porque é a última regra na pilha. Não
<h1 style="color: blue">Cabeçalho</h1> /* azul vem por último e vence */
… os navegadores de suporte definem
</body> uma borda sólida, mas param por aí
</html> quando chegam à propriedade border-
image que não entendem. Eles não
Quando o navegador analisa o arquivo, ele chega primeiro à folha de estilo importada, que travarão ou lançarão um erro. Eles
define h1s como vermelho. Em seguida, ele encontra uma regra com peso igual na folha de simplesmente ignoram. A borda é exibida
como a linha vermelha sólida de fallback
estilo incorporada que substitui a regra importada, de modo que h1s é definido como roxo. À
nesses navegadores, o que é bom, mas
medida que continua, ele encontra uma regra de estilo bem em um h1 que define sua cor para azul.
os usuários com navegadores compatíveis
Porque essa regra veio por último, é o vencedor, e esse h1 será azul. Esse é o efeito que
verão a borda decorativa conforme pretendido.
testemunhamos no EXERCÍCIO 11-3. Observe que outros h1s neste documento sem regras
h1 {
de estilo embutido seriam roxo, porque essa foi a última cor h1 aplicada a todo o documento. /* fallback primeiro */
borda: 25px sólido #eee; /*
técnica mais nova */
border-image: url(fancyframe.
O modelo da caixa png) 55 preenchimento / 55px / 25px;
}
Já que estamos falando de Big CSS Concepts, é apropriado apresentar a pedra angular do Você verá esse método de fornecer
sistema de formatação visual CSS: o modelo de caixa. A maneira mais fácil de pensar no fallbacks colocando as propriedades mais
modelo de caixa é que os navegadores veem todos os elementos da página (tanto em bloco recentes por último ao longo deste livro.
quanto em linha) como contidos em um pequeno

caixa retangular. Você pode aplicar propriedades como bordas, margens, preenchimento
Uma rápida história do CSS e planos de fundo a essas caixas e até reposicioná-las na página.
A primeira versão oficial do CSS (a Vamos entrar em muito mais detalhes sobre o modelo de caixa no Capítulo 14, mas ter
Recomendação CSS Nível 1, também uma noção geral dele o beneficiará mesmo quando discutirmos o texto e os planos de
conhecida como CSS1) foi lançada em
fundo nos dois capítulos seguintes.
1996 e incluía propriedades para adicionar
instruções de fonte, cor e espaçamento aos Para ver os elementos mais ou menos como o navegador os vê, escrevi regras de estilo
elementos da página. Infelizmente, a falta de que adicionam bordas ao redor de cada elemento de conteúdo em nosso artigo de
suporte ao navegador impediu a adoção
generalizada do CSS por vários anos.
exemplo: h1 { border: 1px solid blue; }
h2 { borda: azul sólido de 1px; }
p { borda: azul sólido de 1px; }
CSS Nível 2 (CSS2), lançado em 1998, em { borda: azul sólido de 1px; }
mais notavelmente adicionou propriedades img { borda: azul sólido de 1px; }
para posicionamento que permitiam que o
CSS fosse usado para o layout da página. A FIGURA 11-9 mostra os resultados. As bordas revelam a forma de cada caixa de
Também introduziu estilos para outros tipos elemento de bloco. Há caixas ao redor dos elementos embutidos (em e img) também.
de mídia (como impressão e portátil) e Se você observar os títulos, verá que as caixas de elementos de bloco se expandem
métodos mais sofisticados para selecionar para preencher a largura disponível da janela do navegador, que é a natureza dos
elementos. CSS Nível 2, Revisão 1 (CSS2.1)
elementos de bloco no fluxo normal do documento. As caixas embutidas abrangem
fez alguns pequenos ajustes no CSS2 e
tornou-se uma Recomendação em 2011.
apenas os caracteres ou a imagem que contêm.
O CSS Nível 3 (CSS3) é diferente das

versões anteriores, pois é dividido em
módulos individuais, cada um abordando
um recurso como animação, layouts de
várias colunas ou bordas. Enquanto alguns
módulos são
sendo padronizados, outros permanecem

experimentais. Dessa forma, os
desenvolvedores de navegadores podem
começar a implementar (e podemos começar
a usar!) um recurso de cada vez, em vez de
esperar que uma especificação inteira esteja “pronta”.
Agora que cada módulo CSS está em seu
própria pista, os módulos têm seus próprios
números de nível. Não mais grande, todas
as versões CSS abrangentes. Módulos
recém-introduzidos, como o Grid Layout
Module, começam no Nível 1. Módulos que já
existiram
um tempo pode já ter atingido o nível 4.

FIGURA 11-9. As regras em torno de todos os elementos revelam suas caixas de elementos.
Você não vai acreditar em quantas

especificações individuais estão em
andamento! Para uma visão geral das
especificações em seus vários estados de Seletores Agrupados

“pronto”, consulte a página de trabalho atual do
CSS do W3C em www.w3.org/Style/CSS/ Ei! Esta é uma boa oportunidade para mostrar a você um atalho de regra de estilo útil.
trabalho atual. Se você precisar aplicar a mesma propriedade de estilo a vários elementos, poderá
agrupar os seletores em uma regra, separando-os com vírgulas. este

Unidades de medida CSS
uma regra tem o mesmo efeito que as cinco regras listadas anteriormente. Agrupá-los torna as
edições futuras mais eficientes e resulta em um tamanho de arquivo menor:
h1, h2, p, em, img { borda: 1px azul sólido; }

Teste rápido
Agora você tem dois tipos de seletor em sua caixa de ferramentas: um seletor de elemento
Você pode adivinhar por que eu não adicionei a
simples e seletores agrupados.
propriedade border ao corpo
elemento e deixá-lo herdar todos os
elementos no seletor agrupado?
UNIDADES DE MEDIDA CSS

Responda:
propriedades
herdadas.
são
não
que
Este capítulo estabelece as bases para as próximas lições, então é um bom momento para se fronteiras
Porque
uma
das
é
familiarizar com as unidades de medida usadas em CSS. Você os usará para definir o tamanho
da fonte, a largura e a altura dos elementos, margens, recuos e assim por diante.
A lista completa é fornecida na barra lateral “Unidades CSS”.
Alguns parecerão familiares (como polegadas e milímetros), mas há algumas unidades que
têm mais explicações: unidades absolutas, rem, em e vw/vh. Saber como usar unidades CSS
de forma eficaz é outra dessas habilidades básicas de CSS.
Unidades CSS
CSS3 fornece uma variedade de unidades de medida. Eles se dividem em duas grandes CH largura zero, igual à largura de um zero (0) na fonte e tamanho atuais.
categorias: absolutos e relativos.
vw unidade de largura da janela de visualização, igual a 1/100 da largura da

Unidades absolutas
janela de visualização atual (janela do navegador).
Unidades absolutas têm significados predefinidos ou equivalentes do mundo real.
vh unidade de altura da viewport, igual a 1/100 da altura da viewport atual.
Com exceção dos pixels, eles não são apropriados para páginas da Web que
aparecem nas telas.

unidade mínima da viewport vmin , igual ao valor de vw ou vh,
px pixel, definido como igual a 1/96 de polegada em CSS3.
o que for menor.
dentro polegadas.
unidade máxima da janela de visualização vmax , igual ao valor de vw ou vh,
milímetros milímetros.
o que for maior.
centímetros centímetros.
¼ milímetro.
q
NOTAS
pt pontos (1/72 polegada). Os pontos são uma unidade comumente usada no
design de impressão. • Embora não seja uma “unidade”, as porcentagens são outro valor de medição comum
computador
picas (1 pica = 12 pontos ou 1/6 de polegada). Os pontos são uma unidade para elementos de página da web. As porcentagens são calculadas em relação a
comumente usada no design de impressão. outro valor, como o valor de uma propriedade aplicada ao elemento atual ou seu pai
ou ancestral. A especificação sempre diz em que valor percentual para uma propriedade
Unidades relativas é calculado.
As unidades relativas são baseadas no tamanho de outra coisa, como o tamanho do texto
padrão ou o tamanho do elemento pai. Quando usados para layouts de página, os valores percentuais garantem que os
em uma unidade de medida igual ao tamanho da fonte atual. elementos da página permaneçam proporcionais.
• Elementos filho não herdam os valores relativos de seus

ex x-height, aproximadamente a altura de um “x” minúsculo na fonte.
pai, mas sim o valor calculado resultante.
rem root em, igual ao tamanho em do elemento raiz (html). • O IE9 suporta vm em vez de vmin. IE e Edge (todas as versões a partir de 2017) não
suportam vmax.

Unidades Absolutas
Unidades absolutas têm significados predefinidos ou equivalentes do mundo real. Eles são sempre
do mesmo tamanho, independentemente do contexto em que aparecem.
A unidade absoluta mais popular para web design é o pixel, que CSS3 define como 1/96 polegada.
Os pixels estão em casa em uma tela baseada em pixels e oferecem controle preciso sobre o tamanho
do texto e dos elementos na página. Por um tempo, os pixels eram tudo o que usávamos. Então
percebemos que eles são muito rígidos para páginas que precisam se adaptar a uma ampla variedade
de tamanhos de tela e preferências do usuário.
Medidas relativas como rem, em e % são mais apropriadas para a natureza fluida do meio.
Enquanto estivermos chutando px para o meio-fio, todas as unidades absolutas -

como pt, pc, in, mm e cm - estão fora porque são irrelevantes nas telas, embora
possam ser úteis para imprimir folhas de estilo. Isso restringe um pouco suas
opções de unidade.
Dito isso, os pixels ainda têm seu lugar no design da web para elementos que realmente devem
permanecer do mesmo tamanho, independentemente do contexto. As larguras das bordas são
apropriadas em pixels, assim como as imagens que possuem dimensões de pixel inerentes.
Unidades Relativas
Como acabei de estabelecer, as unidades relativas são o caminho a seguir para a maioria das
medições da web, e existem algumas opções: rem, em e vw/vh.
A unidade rem
Rem Fallbacks para Antigos
Navegadores IE CSS3 introduziu uma medida relativa chamada rem (para raiz em) que é baseada no tamanho da
fonte do elemento raiz (html) , seja lá o que for. Em navegadores modernos, o tamanho da fonte raiz
A desvantagem do rems é que o IE8
padrão é 16 pixels; portanto, um rem é equivalente a uma unidade de 16 pixels (a menos que você o
e anteriores não oferecem suporte a eles
defina explicitamente para outro valor).
e você precisa fornecer uma declaração
de fallback com a medida equivalente Um elemento de tamanho 10rem mediria 160 pixels.
em pixels.
Na maioria das vezes, você pode usar unidades rem como uma medida absoluta em regras de estilo;
Existem ferramentas de produção que
podem converter automaticamente todas no entanto, como é relativo, se o tamanho da fonte base mudar, o tamanho de um rem também muda.
as suas unidades rem em pixels, que são Se um usuário alterar o tamanho da fonte base para 24 pixels para facilitar a leitura à distância ou se
discutidas no Capítulo 20, Ferramentas de a página for exibida em um dispositivo que tenha um tamanho de fonte padrão de 24 pixels, esse
desenvolvimento modernas.
elemento 10rem se tornará 240 pixels. Isso parece desonesto, mas tenha certeza de que é um
recurso, não um bug. Há muitos casos em que você deseja que um elemento de layout se expanda
caso o tamanho do texto aumente. Ele mantém a página proporcional ao tamanho da fonte, o que
pode ajudar a manter comprimentos de linha ideais.
A unidade em
Um em é uma unidade de medida relativa que, na tipografia tradicional, é baseada na largura da letra
maiúscula M (daí o nome “em”). No CSS

especificação, um em é calculado como a distância entre as linhas de base quando a fonte é

definida sem nenhum espaço extra entre as linhas (também conhecido como entrelinha).
Para texto com tamanho de fonte de 16 pixels, um em mede 16 pixels; para texto de 12 pixels,
um em é igual a 12 pixels; e assim por diante, como mostrado na FIGURA 11-10.
caixa em
NOTA
Não confunda a unidade de medida em
Ei! Ei! Ei! mento com o elemento em HTML usado

para indicar texto enfatizado. São coisas
totalmente diferentes.
tipo 12px tipo 16px tipo 24px
1em = 12px 1em = 16px 1em = 24px
FIGURA 11-10. Um em é baseado no tamanho do texto.
Depois que a dimensão de um em para um elemento de texto é calculada pelo navegador, ela
pode ser usada para todos os tipos de outras medidas, como recuos, margens, largura do
elemento na página e assim por diante. Basear as medidas no tamanho do texto ajuda a manter
tudo em proporção caso o texto seja redimensionado.
O truque para trabalhar com ems é lembrar que eles são sempre relevantes para o tamanho da
fonte atual do elemento. Para emprestar um exemplo do CSS de Eric Meyer e Estelle Weyl: The
Definitive Guide (O'Reilly), se você definir uma margem esquerda de 2em em um h1, h2 ep ,
esses elementos não se alinharão bem porque as unidades em são baseadas nos tamanhos de
seus respectivos elementos (FIGURA 11-11).
h1, h2, p { margem esquerda: 2em; }
FIGURA 11-11. As medidas em são sempre relevantes para o tamanho da fonte do elemento.
Um em para um elemento pode não ser o mesmo para outro.
Comprimentos percentuais da janela de visualização (vw/vh)
As unidades de largura da janela de visualização (vw) e altura da janela de visualização (vh)

são relativas ao tamanho da janela de visualização (janela do navegador). Um vw é igual a
1/100 da largura da viewport. Da mesma forma, um vh é igual a 1/100 da altura da viewport.
Unidades baseadas em viewport são úteis para fazer com que imagens e elementos de texto
permaneçam em toda a largura ou altura da viewport:

Ferramentas do desenvolvedor diretamente no seu navegador
cabeçalho {
largura:
100vw; altura: 100vh; }
Também é fácil especificar uma unidade como uma porcentagem específica do tamanho da
janela, como 50%:
img {
largura:
50vw; altura: 50vh; }
NOTA DE SUPORTE DO NAVEGADOR Relacionadas estão a unidade vmin (igual ao valor de vw ou vh, o que for menor) e vmax
(igual ao valor de vw ou vh, o que for maior).
O IE9 suporta vm em vez de vmin. IE e Edge
(todas as versões a partir de 2017) não suportam Isso deve fornecer uma boa introdução às unidades que você usará em suas folhas de estilo.
a porta vmax. Recomendo a leitura do módulo CSS Values and Units completo (www.w3.org/TR/css3-
values/) para aprofundar seu conhecimento e facilitar a compreensão dos valores listados para
as propriedades neste livro. Além das unidades de comprimento, ele inclui valores baseados
em texto (como palavras-chave, strings de texto e URLs), números e valores percentuais,
cores e muito mais.
FERRAMENTAS DO DESENVOLVEDOR DIREITO

SEU NAVEGADOR
Por causa da cascata, um único elemento de página pode ter estilos aplicados de várias
fontes. Isso pode dificultar a depuração de uma página quando os estilos não estão sendo
exibidos da maneira que você acha que deveriam. Felizmente, todos os principais navegadores
vêm com ferramentas de desenvolvedor que podem ajudá-lo a resolver as coisas.
Abri o documento cozinhando.html simples no qual estamos trabalhando no navegador Chrome

e selecione Exibir ÿ Desenvolvedor ÿ Ferramentas do desenvolvedor no menu. O painel
Developer Tools é aberto na parte inferior do documento, como você pode ver na FIGURA
11-12. Você também pode torná-la sua própria janela separada clicando no ícone de janelas
no canto superior esquerdo.
Na guia Elementos à esquerda, posso ver a fonte HTML do documento.

O conteúdo é inicialmente oculto para que você possa ver a estrutura do documento com mais
clareza, mas clicar nas setas abre cada seção. Quando clico no elemento na fonte (como o
segundo elemento p mostrado na figura), esse elemento também é destacado na visualização
da janela do navegador.
Na guia Estilos à direita, posso ver todos os estilos que estão sendo aplicados ao elemento
selecionado. No exemplo, vejo as propriedades font-size, font-family e margin-left do
elemento style no documento. Se houvesse documentos CSS externos, eles também seriam
listados. Também posso ver a “Folha de estilo do agente do usuário”, que é o estilo padrão do
navegador. Nesse caso, a folha de estilo do navegador adiciona o espaço de margem ao redor
do parágrafo. O Chrome também fornece um diagrama de modelo de caixa para o elemento
selecionado que mostra as dimensões do conteúdo, preenchimento, borda e margens
aplicadas. Essa é uma ótima ferramenta para solucionar problemas de espaçamento
inesperado em layouts.

Ferramentas do desenvolvedor diretamente no seu navegador
Os elementos selecionados
no código são destacados na

visualização do navegador.
Todos os estilos que são aplicados

ao elemento selecionado.
Fonte HTML para a página.
Margens, bordas e
preenchimentos aplicados ao
elemento.
FIGURA 11-12. O navegador Chrome com o painel Ferramentas do desenvolvedor aberto.
O legal é que quando você edita as regras de estilo no painel, as alterações são refletidas na visualização
do navegador da página em tempo real! Se eu selecionar o h1
elemento e mudar a cor de laranja para verde, ele fica verde na janela. É uma ótima maneira de
experimentar ou solucionar problemas de um design; no entanto, as alterações não estão sendo feitas
no próprio documento. É apenas uma visualização, então você terá que duplicar as alterações em sua
fonte.
Você pode inspecionar qualquer página na web dessa maneira, brincar com a ativação e desativação de
estilos e até mesmo adicionar alguns dos seus próprios. Nada do que você faz tem qualquer efeito no
site real, então é apenas para sua educação e diversão.
Os inspetores de elementos e estilos são apenas a ponta do iceberg do que as ferramentas de

desenvolvimento de navegadores podem fazer. Você também pode ajustar e depurar JavaScript, verificar
o desempenho, visualizar o documento em várias simulações de dispositivos e muito mais. A boa notícia
é que todos os principais navegadores agora possuem ferramentas integradas com recursos semelhantes.
Como desenvolvedor web, você descobrirá que eles são seus melhores amigos.
• Chrome DevTools (Exibir ÿ Desenvolvedor ÿ Ferramentas do desenvolvedor)

developer.chrome.com/devtools
• Firefox (Ferramentas ÿ Desenvolvedor Web)

developer.mozilla.org/en-US/docs/Tools
• Microsoft Edge (abrir com a tecla F12)

developer.microsoft.com/en-us/microsoft-edge/platform/documentation/
f12-devtools-guide/

Avançando com CSS
• Safari (Desenvolver ÿ Mostrar Inspetor da Web)

developer.apple.com/library/content/documentation/AppleApplications/
Conceptual/Safari_Developer_Guide/Introduction/Introduction.html)
• Opera (Exibir ÿ Ferramentas do desenvolvedor ÿ Opera Dragonfly)

www.opera.com/dragonfly/
• Internet Explorer 9+ (abra com a tecla F12)

msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx
AVANÇANDO COM CSS
Este capítulo cobriu todos os fundamentos das Folhas de Estilo em Cascata, incluindo sintaxe
de regras, formas de aplicar estilos a um documento e os conceitos centrais de herança, a
cascata (incluindo prioridade, especificidade e ordem de regras) e o modelo de caixa. As
folhas de estilo não devem mais ser um mistério e, a partir de agora, estaremos apenas
construindo sobre essa base adicionando propriedades e seletores ao seu arsenal e
expandindo os conceitos apresentados aqui.
CSS é um tópico vasto, muito além do escopo deste livro. As livrarias e a web estão repletas
de informações sobre folhas de estilo para todos os níveis de habilidade. Compilei uma lista
dos recursos que achei mais úteis durante o meu processo de aprendizagem. Também forneci
uma lista de ferramentas populares que auxiliam na escrita de folhas de estilo.
Livros
Não faltam bons livros sobre CSS por aí, mas esses são os que me ensinaram, e me sinto
bem em recomendá-los.
• CSS: O Guia Definitivo, 4ª Edição por Eric A. Meyer e Estelle Weyl

(O'Reilly)
• CSS Cookbook por Christopher Schmitt (O'Reilly)
Recursos online
Os sites listados aqui são bons pontos de partida para a exploração online de folhas de estilo.
CSS-Tricks (css-tricks.com)
O é o blog do guru CSS Chris Coyier. Chris adora CSS e compartilha com entusiasmo
suas pesquisas e ajustes em seu site.
World Wide Web Consortium (www.w3.org/TR/CSS/)
O World Wide Web Consortium supervisiona o desenvolvimento de tecnologias web,

incluindo CSS. Esta página é um “instantâneo” das especificações CSS. Veja também
www.w3.org/Style/CSS/current-work.

Teste-se
Documentos da Web MDN (developer.mozilla.org)
As páginas CSS no MDN incluem páginas de referência detalhadas, tutoriais passo a passo
e demonstrações. É um ótimo hub para pesquisar qualquer tecnologia da web.
A List Apart (www.alistapart.com/topics/code/css/)
Esta revista online apresenta alguns dos melhores pensamentos e textos sobre web design
de ponta e baseado em padrões. Foi fundada em 1998 por Jeffrey Zeldman e Brian Platz.
TESTE-SE
Aqui estão algumas perguntas para testar seus conhecimentos básicos de CSS. As respostas são
fornecidas no Apêndice A.
1. Identifique as várias partes desta regra de estilo:
blockquote { altura da linha: 1,5; }

seletor: ______________ valor: ____________________
propriedade: _____________ declaração: ________________
2. Qual será a cor dos parágrafos quando esta folha de estilo incorporada for aplicada a um
documento? Por quê?
<style type="text/css">
p { cor: roxo; }
p{ cor: verde; }
p { cor: cinza; }
</style>
3. Reescreva cada um desses exemplos de CSS. Alguns deles estão completamente incorretos,
e alguns poderiam ser escritos de forma mais eficiente.
uma. p {font-family: sans-serif;}

p {tamanho da fonte: 1em;}
p {altura da linha: 1,2em;}
b. blockquote
{ tamanho da fonte: 1em
altura da linha: 150%
cor: cinza }
c. corpo
{cor de fundo: preto;}
{cor: #666;}
{margem esquerda: 12em;}
{margem direita: 12em;}

Teste-se
d. p {cor: branco;}
blockquote {cor: branco;}
li {cor: branco;}
e. <strong style="red">Aja agora!</strong>
4. Circule todos os elementos que você espera que apareçam em vermelho

quando a seguinte regra de estilo for aplicada a um documento com a estrutura
diagramada na FIGURA 11-13.
div#intro { color: red;}
html
cabeça corpo
título estilo h1 div id="intro" div id="principal" p
p ul h2 p h2 p
img forte li li li
FIGURA 11-13. A estrutura do documento de um documento de amostra.

CAPÍTULO
FORMATAÇÃO DO TEXTO 12
Agora que você já começou a formatar o texto, você está pronto para ir para o fundo do poço? No NESTE CAPÍTULO
final deste capítulo, você obterá mais de 40 propriedades CSS adicionais usadas para manipular
Propriedades da fonte
a aparência do texto. Ao longo do caminho, você também aprenderá a usar seletores mais
poderosos para direcionar elementos em um contexto específico e com um id ou nome de classe Fontes da Web
específico .
Tipografia avançada com CSS3
A natureza da web torna a especificação do tipo complicada, se não totalmente frustrante,
principalmente se você tiver experiência em design para impressão ou mesmo formatação de
texto em um programa de processamento de texto. Não há como saber com certeza se a fonte Configurações de linha de texto
especificada estará disponível ou quão grande ou pequeno o tipo aparecerá quando atingir os
Efeitos de texto
navegadores de seus usuários. Abordaremos as melhores práticas para lidar com esses desafios
à medida que avançamos. Seletores: descendentes,
ID e classe
Ao longo deste capítulo, vamos enfeitar um menu online do Black Goose Bistro semelhante ao
que marcamos no Capítulo 5, Marcando texto. Eu o encorajo a trabalhar junto com os exercícios Visão geral da especificidade
para ter uma ideia de como as propriedades funcionam. A FIGURA 12-1 mostra a aparência do
menu antes e depois de terminarmos. Não é uma obra-prima, porque estamos apenas arranhando Listar estilos
a superfície do CSS aqui, mas pelo menos o texto tem mais personalidade.
PROPRIEDADES BÁSICAS DA FONTE
Quando crio um documento de texto (para impressão ou para a Web), uma das primeiras coisas
que faço é especificar uma fonte. Em CSS, as fontes são especificadas usando um conjunto de
propriedades relacionadas à fonte para tipo de letra, tamanho, peso, estilo de fonte e caracteres
especiais. Há também propriedades de atalho que permitem especificar vários atributos de fonte
em uma única regra.
261
Propriedades básicas da fonte
FIGURA 12-1. Vistas antes e depois do menu Black Goose Bistro em que
trabalharemos neste capítulo.
Uma palavra sobre listagens de propriedades
Cada listagem de propriedades CSS neste livro é acompanhada de informações sobre como ela
se comporta e como usá-la. As listagens de propriedades incluem:
Valores:
Esses são os valores aceitos para o imóvel. Os valores de palavra-chave predefinidos aparecem
na fonte do código (por exemplo, minúscula , itálico ou versalete) e devem ser digitados
exatamente como mostrado.
Predefinição:
Este é o valor que será usado para a propriedade por padrão (seu valor inicial)—
isto é, se nenhum outro valor for especificado. Observe que os valores padrão da folha de estilo
do navegador podem variar dos padrões definidos em CSS.
Aplica-se a:
Algumas propriedades se aplicam apenas a certos tipos de elementos.
Herda:
Isso indica se a propriedade é passada para os descendentes do elemento.
Palavras-chave em todo o CSS
Todas as propriedades CSS aceitam as três palavras-chave de todo o CSS: initial, inherit e
unset. Como são compartilhados por todas as propriedades, eles não são listados com os valores
das listagens de propriedades individuais.
• A palavra-chave inicial define explicitamente a propriedade para seu valor padrão (inicial). • A
palavra-chave inherit permite forçar explicitamente um elemento a herdar uma propriedade de estilo
de seu pai. Isso pode ser útil para substituir outros estilos aplicados a esse elemento e garantir que
o elemento sempre corresponda ao seu pai. • Finalmente, unset apaga os valores declarados que
ocorrem anteriormente na cascata, definindo a propriedade para herdar ou inicial, dependendo se

herda ou não.

Especificando o nome da fonte
Escolher um tipo de letra, ou família de fontes, como é chamado em CSS, para o seu texto é NUM RELANCE
um bom ponto de partida. Vamos começar com a propriedade font-family e seus valores. Propriedades da fonte
As propriedades relacionadas à fonte CSS2.1
família de fontes
são universalmente suportadas:
Valores: uma ou mais fontes ou nomes de família de fontes genéricas, separados por vírgulas
família de fontes
Predefinição: depende do navegador tamanho da fonte
Aplica-se a: todos os elementos espessura da fonte
estilo de fonte
Herda: sim
variante de fonte
Use a propriedade font-family para especificar uma fonte ou lista de fontes (conhecida como Fonte
pilha de fontes) por nome, conforme mostrado nestes exemplos: O CSS Font Module Level 3 adiciona
essas propriedades para um manuseio

body { família de fontes: Arial; }
de fontes mais sofisticado, embora o suporte do
var { família de fontes: Courier, monoespaçado; }
p { família de fontes: "Duru Sans", Verdana, sans-serif; } navegador seja inconsistente no momento da
redação deste artigo:
Aqui estão alguns requisitos de sintaxe importantes:
esticar a fonte
• Todos os nomes de fontes, com exceção de famílias de fontes genéricas, devem ser font-variant-ligatures
maiúsculas. Por exemplo, use Arial em vez de arial. font-variant-position
font-variant-caps
• Use vírgulas para separar vários nomes de fontes, conforme mostrado no segundo e terceiro fonte-variante-numérico
exemplos. font-variant-alternates
font-variant-east-asian
• Observe que os nomes de fontes que contêm um espaço de caracteres (como Duru Sans no
ajuste de tamanho da fonte
terceiro exemplo) devem aparecer entre aspas.
fonte-kerning
Você pode estar se perguntando: “Por que especificar mais de uma fonte?” Essa é uma boa configurações de recursos de fonte
pergunta e nos leva a um dos desafios de especificar fontes para a web. substituição de idioma de fonte
Limitações de fonte
Os navegadores estão limitados a exibir as fontes às quais têm acesso. Tradicionalmente, isso
significava as fontes que já estavam instaladas no disco rígido do usuário. Em 2010, no entanto,
houve um boom no suporte do navegador para fontes da Web incorporadas usando a regra
CSS @font-face , então tornou-se possível para os designers fornecerem suas próprias fontes.
Consulte a barra lateral “Say Hello to Web Fonts” para obter mais informações.
Mas voltando à nossa regra de família de fontes . Mesmo quando você especifica que a fonte
deve ser Futura em uma regra de estilo, se o navegador não conseguir encontrá-la (por
exemplo, se essa fonte não estiver instalada no computador do usuário ou a fonte da Web
fornecida não carregar), o navegador usa sua fonte padrão.
Felizmente, o CSS nos permite fornecer uma lista de fontes de backup (aquela pilha de fontes
que vimos anteriormente) caso nossa primeira escolha não esteja disponível. Se a primeira
fonte especificada não for encontrada, o navegador tenta a próxima e percorre a lista até
encontrar uma que funcione. Na terceira regra de família de fontes mostrada no exemplo de
código anterior, se o navegador não encontrar Duru Sans, ele usará Verdana e, se Verdana
não estiver disponível, substituirá alguma outra fonte sans-serif.
12. Formatando Texto 263

Diga Olá para Web Fonts

A capacidade de fornecer sua própria fonte para uso em uma página da Web existe desde 1998, mas
nunca foi viável devido a inconsistências do navegador. Felizmente, essa história mudou e agora as fontes
da web são uma opção perfeitamente viável. A web nunca esteve melhor!
Há muito a dizer sobre fontes da web, então esta barra lateral é apenas uma introdução, começando
com os desafios.
Formatos de fonte da Web
Houve dois obstáculos principais para incluir fontes em páginas da web. Primeiro, há o problema de que
diferentes navegadores suportam diferentes formatos de fonte. A maioria das fontes vem no formato
OpenType (OTF) ou TrueType (TTF), mas as versões mais antigas do Internet Explorer aceitam apenas
seu Embedded Open Type (EOT) proprietário.
A boa notícia é que existe um novo padrão para empacotar fontes para entrega em páginas da Web que
todos os fornecedores de navegadores, até mesmo o IE, estão implementando. O novo formato, WOFF/
WOFF2 (para Web Open Font Format versões 1 e 2), é um contêiner que empacota arquivos de fonte
para entrega na web. Agora que o IE9 suporta WOFF, um dia pode ser tudo o que precisamos. No
momento da redação deste artigo, no entanto, ainda é uma prática recomendada fornecer a mesma fonte
em vários formatos diferentes (mais sobre isso em breve).
O outro problema com o fornecimento de fontes em páginas da web é que as empresas de fontes, ou
fundições, estão preocupadas (uma maneira educada de dizer “assustado”) que suas fontes ficarão
vulneráveis em servidores e disponíveis para download. As fontes custam muito para serem criadas e
são muito valiosas. A maioria vem com licenças que cobrem usos muito específicos por um número
limitado de máquinas, e “grátis para download para qualquer coisa” geralmente não está incluído.
Portanto, para vincular a uma fonte da Web, você precisa usar a fonte legalmente e fornecê-la de uma
maneira que todos os navegadores suportem. Existem duas abordagens gerais para fornecer fontes:
hospede-as você mesmo ou use um serviço de fontes da web. Vejamos as duas opções.
Hospede seu próprio

Na opção “host your own”, você encontra a fonte desejada, coloca-a em seu servidor em todos os formatos
necessários e vincula-a à sua página web usando o CSS3 @font-face
regra. Vale a pena notar que cada arquivo de fonte corresponde a um único peso ou variante de um tipo
de letra. Portanto, se você quiser usar as versões regular, negrito e itálico, precisará hospedar três arquivos
de fonte diferentes e fazer referência a cada um em seu CSS.
Etapa 1: encontre uma fonte. Isso pode ser um pouco desafiador porque o Contrato de Licença de
Usuário Final (EULA) para praticamente todas as fontes comerciais não cobre o uso da web. Certifique-
se de adquirir a licença web adicional, se estiver disponível. No entanto, graças à demanda, algumas
fundições estão abrindo fontes para uso na web e há um número crescente de fontes de código aberto
que você pode usar gratuitamente. O serviço Fontspring (fontspring.com), de Ethan Dunham, é um ótimo
lugar para comprar fontes que possuem uma licença web que você pode usar em seu site ou em seu
próprio computador. O site Font Squirrel (fontsquirrel.com), também de Ethan Dunham, é uma ótima fonte
de fontes de código aberto que podem ser usadas para fins comerciais gratuitamente.
Etapa 2: salve-o em vários formatos. Até o momento, fornecer vários formatos (EOT, WOFF, TTF,
SVG) é uma realidade. A fonte recomendada para os vários formatos é o fornecedor de fontes onde você
comprou a fonte, pois eles serão da melhor qualidade e

aprovado sob o EULA. Se você tem uma fonte de código aberto (uma que está variam de grátis a centenas de dólares por mês.
livre de restrições de licenciamento) e precisa de formatos alternativos, existe Aqui estão alguns serviços de incorporação de fontes que são populares
um serviço que pegará sua fonte e fará tudo o que você precisa para você – o
até o momento, mas vale a pena fazer uma pesquisa na web para ver o que
“@font-face Generator” da Font Squirrel (www.fontsquirrel.com/fontface/ é oferecido atualmente.
generator). Vá para essa página e faça o upload da sua fonte, e ela devolve a
fonte em TTF, EOT, WOFF, WOFF2 e SVG, bem como o código CSS que você Fontes da Web do Google (www.google.com/webfonts)
precisa para fazê-la funcionar. O Google Web Fonts é um serviço gratuito que fornece acesso a
centenas de fontes de código aberto gratuitas para uso comercial. Tudo o
Etapa 3: Faça o upload para o servidor. Os desenvolvedores normalmente que você precisa fazer é escolher uma fonte e copiar e colar o código que
mantêm seus arquivos de fonte no mesmo diretório que os arquivos CSS, mas eles geram para você. Se você não tem um orçamento de fontes e não é
isso é apenas uma questão de preferência. Se você baixar um pacote do Font muito específico sobre fontes, esse é um caminho maravilhoso a seguir.
Squirrel, certifique-se de manter as peças juntas como você as encontrou. Vamos usá-lo no primeiro exercício deste capítulo.
Passo 4: Escreva o código. Vincule a fonte ao seu site usando a regra @font-
face em seu documento .css . O “at-rule” dá à fonte um nome de família de Typekit, da Adobe (www.typekit.com)
fontes que você pode referenciar posteriormente em sua folha de estilo. Ele
O Typekit foi o primeiro serviço de fonte da Web e agora faz parte da
também lista os locais dos arquivos de fonte em seus vários formatos. Este
Adobe. O serviço deles usa JavaScript para vincular as fontes ao seu
exemplo de código entre navegadores foi desenvolvido por Ethan Dunham (sim,
site de forma a melhorar o desempenho e a qualidade em todos os
ele de novo!) para resolver um bug no IE. Recomendo a leitura do artigo completo
navegadores. Eu também recomendo o blog deles para excelentes
em blog.fontspring.
artigos sobre como o tipo funciona (veja blog.typekit.com/
com/2011/02/forther-hardening-of-the-bulletproof-syntax/.
categoria/tipo-renderização/).
Veja também a versão atualizada de Paul Irish em paulirish.com/2009/
bulletproof-font-face-implementation-syntax/. Fontes.com (fontes.com)
@Tipo de letra { Fonts.com possui a maior coleção de fontes das maiores fundições de fontes.
família de fontes: 'MyWebFont'; Se você precisar de uma fonte específica, é provável que eles a tenham.
src: url('webfont.eot'); /* Modos de compatibilidade do IE9 */
src: url('webfont.eot?#iefix') format('embedded opentype'), / Outros serviços incluem Cloud Typography by Hoefler & Co.
* IE6-IE8 */
(www.typography.com/cloud/welcome/), Typotheque (www.
url('webfont.woff') format('woff'), /*
typotheque.com/webfonts) e Fonts Live (www.fontslive.
Navegadores modernos */
com). Eles diferem no número de fontes que oferecem e em suas estruturas
url('webfont.ttf') format('truetype'), /* Safari,
Android, iOS */ de taxas, então você pode querer comprar ao redor. Fontstand
url('webfont.svg#svgFontName') format('svg'); /* iOS (fontstand.com/) permite que você alugue fontes mensalmente, o que,
legado */ dependendo do seu uso, pode ser uma fração do custo de compra da fonte.
}
Então você apenas se refere ao nome da fonte estabelecida em suas regras
Resumindo fontes da web
de fonte, assim:
O método que você usa para adicionar fontes ao seu site fica a seu critério.
p {font-family: MyWebFont; }
Se você gosta de controle total, hospedar sua própria fonte (legalmente, é
claro) pode ser um bom caminho a percorrer. Se você precisar de uma fonte
Use um serviço de incorporação de fontes
muito particular e conhecida porque a marca do seu cliente depende dela, você
Se isso parece muito trabalho, você pode querer se inscrever em um dos provavelmente a encontrará em um dos serviços de fonte da Web por um preço.
serviços de incorporação de fontes que fazem todo o trabalho pesado para Se você quiser experimentar as fontes da Web e escolher entre as que estão
você. Por uma taxa, você obtém acesso a fontes de alta qualidade e o serviço disponíveis gratuitamente, o Google Web Fonts é para você.
lida com o licenciamento de fontes e a proteção de fontes para as fundições.
Eles também geralmente fornecem uma interface e ferramentas que tornam a
Agora você tem uma boa base para incluir fontes da web em suas páginas da
incorporação de uma fonte tão fácil quanto copiar e colar.
web. É provável que o cenário mude rapidamente nos próximos anos, portanto,
Os serviços têm uma variedade de estruturas de taxas. Alguns cobram faça sua própria pesquisa quando estiver pronto para começar.
taxas mensais; alguma carga pela fonte. Alguns têm uma sobretaxa de largura
de banda também. Existem geralmente planos em camadas que

Famílias de fontes genéricas
Essa última opção, “alguma outra fonte sans-serif”, merece mais discussão. “Sans serif” é apenas
NOTA
uma das cinco famílias de fontes genéricas que você pode especificar com a propriedade font-family .
Os nomes de família de fontes genéricas não Quando você especifica uma família de fontes genérica, o navegador escolhe uma fonte disponível
precisam ser capitalizados na regra de estilo.
dessa categoria estilística. A FIGURA 12-2 mostra exemplos de cada família.
serifa Decorativo
golpes
Horários Geórgia
Times New Roman Lucida
sem serifa
Em linha reta
golpes
Verdana Trabuco MS
Arial Arial Preto
monoespaço
Correio
Fonte monoespaçada Fonte proporcional

(larguras diferentes) Correio Novo Andale Mono
(larguras iguais)
cursivo
Chancelaria da Apple Comic Sans Snell
fantasia
Impacto Estêncil Mojo
FIGURA 12-2. Exemplos das cinco famílias de fontes genéricas.
serifa
Exemplos: Times, Times New Roman, Geórgia
Os tipos de letra com serifa têm apêndices decorativos semelhantes a lajes (serifas) nas
extremidades de certos traços de letras.
sem serifa
Exemplos: Arial, Arial Black, Verdana, Trebuchet MS, Helvetica, Genebra
Tipos de letra sem serifa têm traços de letra retos que não terminam em serifa.

monoespaço
Exemplos: Courier, Courier New e Andale Mono
Em fontes monoespaçadas (também chamadas de largura constante), todos os caracteres

ocupam a mesma quantidade de espaço em uma linha. Por exemplo, um W maiúsculo não
será maior que um i minúsculo. Compare isso com fontes proporcionais (como a que você
está lendo agora) que atribuem larguras diferentes a caracteres diferentes.
cursivo
Exemplos: Apple Chancery, Zapf-Chancery e Comic Sans
As fontes cursivas emulam um script ou aparência manuscrita.
fantasia
Exemplos: fonte de impacto, ocidental ou outra fonte decorativa
As fontes de fantasia são puramente decorativas e seriam apropriadas para linhas de

cabeçalho e outros tipos de exibição.
Estratégias de pilha de fontes
A melhor prática para especificar fontes para páginas da Web é começar com sua primeira escolha,
fornecer algumas alternativas semelhantes e, em seguida, terminar com uma família de fontes
genérica que pelo menos leve os usuários ao padrão estilístico correto. Por exemplo, se você
deseja uma fonte vertical, sem serifa, você pode começar com uma fonte da web se estiver
fornecendo uma (Oswald), listar algumas que são mais comuns (Univers, Tahoma, Geneva) e
terminar com a genérica sem serifa. Não há limite para o número de fontes que você pode incluir,
mas muitos designers se esforçam para mantê-lo abaixo de 10.
família de fontes: Oswald, Univers, Tahoma, Genebra, sem serifa;
Uma boa pilha de fontes deve incluir fontes estilisticamente relacionadas que são conhecidas por
serem instaladas na maioria dos computadores. Manter as fontes que vêm com os sistemas
operacionais Windows, macOS e Linux, bem como as fontes que são instaladas com pacotes de
software populares, como Microsoft Office e Adobe Creative Suite, oferece uma lista sólida de
fontes “seguras para a Web” para escolher a partir de. Um bom lugar para procurar fontes seguras
para a web relacionadas com o estilo é o CSS Font Stack (www.
cssfontstack. com). Existem muitos artigos sobre estratégias de pilha de fontes que estão a apenas
uma pesquisa do Google. Eu recomendo “8 Definitive Font Stacks” de Michael Tuck
(www.sitepoint.com/eight-definitive-font-stacks), que é antigo, mas bom.
Então, como você vê, especificar fontes para a web é mais como apenas sugeri-las. Você não tem
controle absoluto sobre qual fonte seus usuários verão.
Você pode ter sua primeira escolha; você pode obter o fallback genérico. É uma daquelas
peculiaridades de web design com as quais você aprende a conviver.
Agora parece um bom momento para começar a formatar o menu Black Goose Bistro.
Adicionaremos novas regras de estilo, uma de cada vez, à medida que aprendemos novas
propriedades, começando com o EXERCÍCIO 12-1.

EXERCÍCIO 12-1. Formatando um cardápio
Neste exercício, alteraremos as fontes do corpo e do cabeçalho principal 3. Quero uma fonte sofisticada para o título “Black Goose Bistro, Summer
do documento de menu do Black Goose Bistro, menu.html, disponível Menu”, então escolhi uma fonte de exibição gratuita chamada Marko One
em.learningwebdesign.com/5e/materials. Abra o documento em um editor de do Google Web Fonts (www.google.com/webfonts). O Google me deu o
texto. Você também pode abri-lo em um navegador para ver seu estado “antes”. código para vincular o arquivo de fonte em seu servidor ao meu arquivo
Deve ser algo como a FIGURA 12-1. HTML (na verdade, é um link para uma folha de estilo externa). Ele deve
Agarre-se a este documento, porque este exercício continuará à medida que ser colocado no cabeçalho do documento, portanto, copie-o exatamente
pegarmos propriedades de fonte adicionais. como aparece, mas mantenha-o em uma linha. Coloque-o após o título e
Incluí uma fonte incorporada neste exercício para mostrar como é fácil fazer antes do elemento de estilo .
isso com um serviço como o Google Web Fonts. <cabeça>
1. Use uma folha de estilo incorporada para este exercício. Comece adicionando <title>Black Goose Bistrô</title>
um elemento de estilo no cabeçalho do documento, assim: <link href="http://fonts.googleapis.com/ ÿ
css?family=Marko+One" rel="stylesheet">
<cabeça>
<estilo>
<title>Black Goose Bistrô</title> …
<estilo>
4. Agora escreva uma regra que a aplique ao elemento h1 . Observe que
especifiquei Georgia ou outra fonte serif como fallbacks:
</style>
</head> <estilo>
2. Eu gostaria que o texto principal aparecesse em Verdana ou alguma outra body {font-family: Verdana, sans-serif;}
fonte sem serifa. Em vez de escrever uma regra para cada elemento no h1 {font-family: "Marko One", Georgia, serif;}
documento, escreveremos uma regra para o elemento body que será
</style>
herdado por todos os elementos que ele contém. Adicione esta regra à 5. Salve o documento e recarregue a página no navegador. Isto
folha de estilo incorporada: deve se parecer com a FIGURA 12-3. Observe que você precisará ter
uma conexão com a Internet e um navegador atual para visualizar a
<estilo> fonte do título do Marko One. Trabalharemos no tamanho do texto na próxima
body {font-family: Verdana, sans-serif;} exercício.
</style>
FIGURA 12-3. O menu depois de alterarmos apenas a família de fontes.

Especificando o tamanho da fonte
Use a propriedade font-size apropriadamente nomeada para especificar o tamanho do texto.
tamanho da fonte Fornecendo Medição

Valores:
Valores
unidade de comprimento | porcentagem | xx-pequeno | x-pequeno | pequeno | médio | grande
| x-grande | xx-grande | menor | maior Ao fornecer valores de medição, a unidade
Predefinição: médio deve seguir imediatamente o número, assim:
Aplica-se a: todos os elementos

margem: 2em;
Herda: sim
Adicionar um espaço antes da unidade
fará com que a propriedade não funcione:
Você pode especificar o tamanho do texto de várias maneiras:
INCORRETO: margem: 2 em;
• Usando uma das unidades de comprimento CSS, conforme mostrado aqui:
É aceitável omitir a unidade de medida
h1 { tamanho da fonte: 1,5em; } para valores zero:
Ao especificar um número de unidades, certifique-se de que a abreviatura da unidade segue imediatamente o margem: 0;
número, sem espaço extra entre caracteres (consulte a barra lateral “Fornecendo valores de medição”).
As unidades de comprimento CSS são discutidas no Capítulo 11, Introdução às folhas de estilo em cascata.
Veja também a barra lateral “CSS Units Cheat Sheet” .
NUM RELANCE
• Como um valor percentual, dimensionado para cima ou para baixo da fonte herdada do elemento
Folha de dicas de unidades CSS
Tamanho:
Como referência rápida, aqui estão as unidades de

h1 { tamanho da fonte: 150%; }
comprimento CSS novamente:
• Usando uma das palavras-chave absolutas (xx-small, x-small, small, medium, large, x-
Unidades relativas
large, xx-large). Na maioria dos navegadores atuais, médio corresponde ao tamanho em ex rem CH
da fonte padrão.
vw vh vmin vmax
h1 { tamanho da fonte: x-large; }
Unidades absolutas
• Usando uma palavra-chave relativa (maior ou menor) para aumentar ou diminuir o texto em relação ao texto ao
px dentro milímetros cm
redor:
q pt computador
strong { tamanho da fonte: maior; }
Eu vou direto ao ponto e digo que, apesar de todas essas opções, os valores preferidos para
tamanho da fonte no web design contemporâneo são as unidades de comprimento relativo
em e rem, bem como valores percentuais. Você pode especificar o tamanho da fonte em
Os valores de tamanho de fonte
pixels (px), mas, em geral, eles não fornecem a flexibilidade necessária no design de páginas
preferidos são em, rem e %.
da web. Todas as outras unidades absolutas (pt, pc, in, etc.) também estão fora, a menos
que você esteja criando uma folha de estilo especificamente para impressão.
Explicarei os valores de tamanho de fonte baseados em palavras-chave em breve, mas vamos começar nossa
discussão com a prática recomendada usando valores relativos.

Dimensionamento de texto com valores relativos
A melhor prática para definir o tamanho da fonte dos elementos da página da Web é fazê-lo de
maneira que respeite a preferência do usuário. Os valores de dimensionamento relativos %, rem e
em permitem que você use o tamanho de fonte padrão como base para dimensionamento
proporcional de outros elementos de texto. Geralmente não é importante que os títulos tenham
exatamente 24 pixels; é importante que sejam 1,5 vezes maiores que o texto principal para que se
destaquem. Se o usuário alterar suas preferências para aumentar o tamanho da fonte padrão, os
títulos também aparecerão maiores.
Para manter o tamanho padrão do navegador, defina o tamanho da fonte do elemento raiz para
NOTA 100% (consulte Nota):
Também é prática comum colocar o corpo html{

tamanho da fonte: 100%;
para 100%, mas configurá-lo no elemento html é uma
abordagem mais flexível.

}
Isso define a base para o dimensionamento relativo. Como o tamanho da fonte padrão para todos
os navegadores modernos é 16 pixels, vamos supor que nosso tamanho base seja 16 pixels daqui
para frente (também teremos em mente que pode ser diferente).
Valores rem
A unidade rem, que significa “raiz em”, é sempre relativa ao tamanho do elemento raiz (html) . Se
o tamanho da raiz for 16 pixels, então um rem é igual a 16 pixels.
Observe que as unidades rem não são compatíveis O que é bom sobre as unidades rem é que, porque elas são sempre relativas ao mesmo elemento,
com o Internet Explorer 8 e versões anteriores. Se, por
elas têm o mesmo tamanho onde quer que você as use ao longo do documento. Dessa forma, eles
algum motivo, você precisar oferecer suporte a
funcionam como uma unidade absoluta. No entanto, se o tamanho da raiz for diferente de 16 pixels,
navegadores antigos, será necessário fornecer uma
os elementos especificados nos valores rem serão redimensionados de acordo e proporcionalmente.
declaração de fallback definida em pixels. Existem
É o melhor dos dois mundos.
também ferramentas que alteram automaticamente
todas as suas unidades rem para pixels, conforme Aqui está o mesmo título dimensionado com valores rem:
discutido no Capítulo 20, Ferramentas modernas de desenvolvimento da Web.
h1 { tamanho da fonte: 1.5rem; } /* 1,5 x 16 = 24 */
Em medidas
As unidades Em são baseadas no tamanho da fonte do elemento atual. Quando você especifica o
tamanho da fonte em ems, ele será relativo ao tamanho herdado desse elemento.
Depois que o em é calculado para um elemento, ele também pode ser usado para outras medidas,
como margens, preenchimento, larguras de elemento e qualquer outra configuração que você
queira que seja sempre relativa ao tamanho da fonte.
Aqui eu usei unidades em para especificar o tamanho de um h1 que herdou o tamanho da fonte
padrão de 16 pixels da raiz:
h1 { tamanho da fonte: 1,5em; } /* 1,5 x 16 = 24 */
Existem alguns problemas para trabalhar com ems. Uma é que, devido a erros de arredondamento,
há alguma inconsistência na forma como os navegadores e as plataformas renderizam o texto
definido em ems.

O outro aspecto complicado de usar ems é que eles são baseados na herança
tamanho do elemento, o que significa que seu tamanho é baseado no contexto em que são
aplicados.
O h1 no exemplo anterior foi baseado em um tamanho herdado de 16 pixels.

Mas se esse h1 tivesse aparecido em um elemento de artigo que tivesse seu tamanho de fonte
definido como 14 pixels, ele herdaria o tamanho de 14 pixels e seu tamanho resultante seria de
apenas 21 pixels (1,5 × 14 = 21). A FIGURA 12-4 mostra os resultados.
A MARCAÇÃO
<h1>Título no corpo</h1>
<p>Lígula leo pellentesca,…</p>
<artigo>
<h1>Título no artigo</h1>
<p>Vivamus…</p>
</article>
OS ESTILOS
h1 {
tamanho da fonte: 1,5em; /* configura todos os h1s para 1.5em */
}
artigo {
font-size: .875em /* 14 pixels com base no padrão de 16px */
}
FIGURA 12-4. Todos os elementos h1 são dimensionados em 1,5em, mas são de tamanhos
diferentes devido ao contexto em que aparecem.
A partir deste exemplo, você pode ver que um elemento definido em ems pode aparecer em NOTA
tamanhos diferentes em diferentes partes do documento. Se você quisesse que o h1 no artigo
Ethan Marcotte apresentou o alvo
também tivesse 24 pixels, você poderia calcular o valor em dividindo o tamanho do alvo pelo seu ÷ contexto = fórmula de resultado em seu
contexto: 24 / 14 = 1,71428571 em. (Não há necessidade de arredondar esse número para livro Responsive Web Design (A Book Apart).
baixo... o navegador sabe o que fazer com ele.) É útil para converter valores de pixel em
porcentagens e ems.
Se você tiver elementos aninhados em várias camadas de profundidade, o tamanho dos
compostos aumentará ou diminuirá, o que pode criar problemas. Com muitas camadas de
aninhamento, o texto pode ficar muito pequeno. Ao trabalhar com ems, preste muita atenção e
escreva regras de estilo de uma forma que leve o contexto em consideração.
Essa natureza de composição do em é o que impulsionou a popularidade da unidade rem

previsível.

Valores percentuais
Vimos um valor percentual (100%) usado para preservar o tamanho da fonte padrão, mas você
pode usar valores percentuais para qualquer elemento. Eles são bem diretos.
Para calcular os valores
% e em, use esta fórmula:
Neste exemplo, o h1 herda o tamanho padrão de 16px do elemento html e a aplicação do valor de
tamanho do alvo ÷ tamanho 150% multiplica esse valor herdado , resultando em um h1 de 24 pixels:
do contexto = resultado.
h1 { tamanho da fonte: 150%; } /* 150% de 16 = 24 */
Trabalhando com palavras-chave
Uma maneira alternativa de especificar o tamanho da fonte é usando uma das

palavras-chave absolutas predefinidas: xx-small, x-small, small, medium, large, x-
large e xx-large. As palavras-chave não correspondem a medições específicas, mas
são dimensionadas de forma consistente uma em relação à outra. O tamanho padrão
é médio nos navegadores atuais. A FIGURA 12-5 mostra como cada uma das palavras-
chave absolutas é renderizada em um navegador quando o texto padrão é definido em
16 pixels. Incluí amostras no Verdana e no Times para mostrar que, mesmo com o
mesmo tamanho de base, há uma grande diferença de legibilidade em tamanhos pequenos e inferior
Verdana foi projetado para ser legível em telas com tamanhos de fonte pequenos; Times foi
projetado para impressão, portanto, é menos legível nesse contexto.
FIGURA 12-5. Texto dimensionado com palavras-chave absolutas.
As palavras-chave relativas, maiores e menores, são usadas para mudar o tamanho do texto em
relação ao tamanho do texto do elemento pai. A quantidade exata de alteração de tamanho é
determinada por cada navegador e está fora de seu controle. Apesar dessa limitação, é uma
maneira fácil de aumentar ou diminuir o tipo de texto se as proporções exatas não forem críticas.
Você pode aplicar seu novo conhecimento sobre fontes CSS no EXERCÍCIO 12-2.

EXERCÍCIO 12-2. Configurando o tamanho da fonte
Vamos refinar o tamanho de alguns dos elementos de texto para dar ao menu online uma aparência
mais sofisticada. Abra menu.html em um editor de texto e siga as etapas. Você pode salvar o documento a
qualquer momento e dar uma olhada no navegador para ver os resultados do seu trabalho. Você também deve
se sentir à vontade para experimentar outros valores de tamanho ao longo do caminho.
1. Existem muitas abordagens para dimensionar texto em páginas da web. Neste exemplo, comece por
colocando uma estaca no chão e definindo o tamanho da fonte do elemento do corpo para 100%, abrindo
caminho para as medidas em seguida:
corpo {
família de fontes: Verdana, sem serifa;
}
2. O padrão do navegador de 16 pixels é um tamanho bom para o texto da
página principal, mas gostaria de melhorar a aparência dos níveis de
cabeçalho. Eu gostaria que o título principal tivesse 24 pixels, ou uma vez e
meia maior que o corpo do texto [destino (24) ÷ contexto (16) = 1,5]. Vou
adicionar uma nova regra que define o tamanho do h1 para 1,5em. Eu
poderia ter usado 150% para conseguir a mesma coisa.
h1 {
tamanho da fonte: 1,5em;
}
3. Agora faça os h2s do mesmo tamanho que o corpo do texto para que eles
misturar-se melhor com a página:
h2 {
tamanho da fonte: 1em;
}
FIGURA 12-6. O menu online após algumas pequenas alterações no
A FIGURA 12-6 mostra o resultado de nossos esforços de dimensionamento de fontes. tamanho da fonte nos títulos.
Peso da fonte (negrito)

Após as famílias e o tamanho da fonte, as propriedades de fonte restantes são
simples. Por exemplo, se você quiser que um elemento de texto apareça em negrito,
use a propriedade font-weight para ajustar o negrito do tipo.
espessura da fonte
Valores: normais | negrito | mais ousado | isqueiro | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800
| 900
Predefinição: normal
Herda: sim
Como você pode ver, a propriedade font-weight tem muitos valores predefinidos,
incluindo termos descritivos (normal, bold, bolder e light) e nove valores
numéricos (100 a 900) para direcionar vários pesos de uma fonte, se estiverem disponíveis.
273
12. Formatando Texto
Como a maioria das fontes comumente usadas na web tem apenas dois pesos, normal (ou
romano) e negrito, o único valor de peso de fonte que você usará na maioria dos casos é
negrito. Você também pode usar normal para fazer com que o texto que apareceria em negrito
(como texto forte ou títulos) apareça com uma espessura normal.
O gráfico numérico pode ser útil ao usar fontes da Web com uma grande variedade de pesos
(já vi algumas fontes da Web do Google que exigem valores de tamanho numéricos). Se vários
pesos não estiverem disponíveis, configurações numéricas de 600 e superiores geralmente
resultam em texto em negrito, conforme mostrado na FIGURA 12-7 (embora mesmo isso possa
variar de acordo com o navegador).
Se uma face em negrito separada não estiver disponível, o navegador pode “sintetizar” uma
NOTA fonte em negrito reforçando a face normal disponível (consulte a Nota).
O CSS Fonts Module Level 3 introduziu a
propriedade font-synthesis , que permite aos

autores desligar (com valor nenhum) ou
permitir fontes em negrito sintetizadas (valor
de peso); no entanto, ainda é considerado
experimental neste momento.
FIGURA 12-7. O efeito (e a falta dele!) dos valores de peso da fonte .
Estilo da fonte (itálico)

A propriedade font-style afeta a postura do texto, ou seja, se as formas das letras são verticais
(normais) ou inclinadas (itálicas e oblíquas).
estilo de fonte
Valores:
normais | itálico | oblíquo
Herda: sim
Use a propriedade font-style para tornar o texto em itálico. Outro uso comum é fazer com que
o texto em itálico nos estilos padrão do navegador (como texto enfatizado) seja exibido
normalmente. Há um valor oblíquo que especifica uma versão inclinada da fonte; no entanto,
os navegadores geralmente exibem oblíquo exatamente da mesma forma que itálico.
Experimente peso e estilo no EXERCÍCIO 12-3.

EXERCÍCIO 12-3. Tornando o texto em negrito e itálico
De volta ao cardápio. Decidi que gostaria que todos os nomes dos itens de
menu estivessem em negrito. O que eu não vou fazer é envolver cada um
em tags <b> … isso seria tão 1996! Eu também não vou marcá-los como
elementos fortes ... isso não é semanticamente correto. Em vez disso, a
coisa certa a fazer é simplesmente aplicar um estilo aos elementos dt (termo de
definição) semanticamente corretos para torná-los todos em negrito de uma só
vez. Adicione esta regra ao final da folha de estilo, salve o arquivo e experimente
no navegador:
dt { peso da fonte: negrito; }

Agora que todos os nomes dos itens de menu estão em negrito, alguns dos
textos que marquei como fortes não estão se destacando muito bem, então
acho que vou deixá-los em itálico para dar mais ênfase. Para fazer isso, basta
aplicar a propriedade font style ao elemento strong :
strong { estilo da fonte: itálico;}

Mais uma vez, salve e recarregue. Deve se parecer com o detalhe mostrado em FIGURA 12-8. Aplicando o peso da fonte e o estilo da fonte
FIGURA 12-8. propriedades.
Variante de fonte em CSS2.1 (Small Caps)
variante de fonte
Valores: normais | versalete

Herda: sim
Alguns tipos de letra vêm em uma variante “small caps”. Este é um design de fonte separado
que usa pequenas letras maiúsculas no lugar de letras minúsculas. Os caracteres em
versalete são projetados para corresponder ao tamanho e à densidade do texto em minúsculas
para que se misturem.
Maiúsculas devem ser usadas para sequências de três ou mais letras maiúsculas que
aparecem no fluxo do texto, como acrônimos e abreviaturas, que podem parecer distorcidas
como maiúsculas de tamanho normal. Compare NASA e USA na fonte padrão com NASA e
USA em versalete. As versaletes também são recomendadas para horários como 1h ou
anúncio de 2017.
Quando a propriedade font-variant foi introduzida no CSS2.1, era um truque que permitia
aos designers especificar uma fonte em versalete para elementos de texto.
O CSS3 expandiu bastante o papel da variante de fonte, como abordarei na próxima seção
“Tipografia avançada com CSS3”. Por enquanto, veremos apenas a versão CSS2.1 de
font-variant.

Na maioria dos casos, os navegadores simulam letras maiúsculas reduzindo as letras

maiúsculas na fonte atual. Para os defensores da tipografia, isso não é o ideal e resulta em
espessuras de traço inconsistentes, mas você pode achar uma opção aceitável para
adicionar variedade a pequenas quantidades de texto. Você verá um exemplo de versalete
Universo ultra condensado
quando usarmos a propriedade font-variant no EXERCÍCIO 12-5.
Font Stretch (Condensado e Estendido)

Universo condensado
esticar a fonte
Valores: normais | ultracondensado | extracondensado | condensado |

semi-condensado | semi-expandido | expandido | extra-expandido
Universos | ultra-expandido
Universo Estendido Herda: sim
A propriedade font-stretch do CSS3 diz ao navegador para selecionar uma fonte normal,
FIGURA 12-9. Exemplos de
condensada ou estendida na família de fontes (FIGURA 12-9). Se o navegador não
versões condensadas, normais
e estendidas da fonte Universe. encontrar uma fonte correspondente, ele não tentará sintetizar a largura esticando ou
comprimindo o texto; ele pode apenas substituir uma fonte de largura diferente. O suporte
ao navegador está apenas começando a funcionar para esta propriedade. Até o momento,
ele funciona no IE11+, Edge, Firefox, Chrome 48+, Opera e Android 52+, mas ainda não é
compatível com Safari ou iOS Safari; no entanto, isso pode mudar.
AVISO
A propriedade da fonte do atalho
Tenha cuidado ao usar propriedades abreviadas
como fonte. Qualquer propriedade omitida é Especificar várias propriedades de fonte para cada elemento de texto pode ficar repetitivo e
redefinida para seu valor padrão. Por outro lado, demorado, então os criadores do CSS forneceram a propriedade de fonte abreviada , que
as taquigrafias são uma boa maneira de obter uma compila todas as propriedades relacionadas à fonte em uma regra.
lousa em branco, se você precisar de uma.
Fonte
Valores: estilo da fonte peso da fonte variante da fonte alongamento da fonte tamanho da fonte/altura da linha
família de fontes | legenda | ícone | cardápio | caixa de mensagens | legenda pequena |

CROSS-NAVEGADOR
Barra de status
DICA DE APOIO
Predefinição: depende do valor padrão para cada propriedade listada
Se você incluir valores para a propriedade
font-stretch mais recente na fonte
abreviado, primeiro liste uma versão que omite
Herda: sim
o trecho para navegadores que não o suportam.
Você terminará com duas declarações como esta: O valor da propriedade font é uma lista de valores para todas as propriedades de
fonte que acabamos de ver, separadas por espaços de caracteres. É importante
h3 notar que apenas a versão CSS2.1 de font-variant (small-caps) pode ser usada na fonte
{ fonte: negrito 1.25em Helvética;
atalho (que é uma das razões pelas quais eu o mantive separado). Nesta propriedade, a
fonte: negrito estendido 1,25em
Helvetica; ordem dos valores é importante:
} { font: style weight stretch variante size/ line-height font-family; }

No mínimo, a propriedade de fonte deve incluir um valor de tamanho de fonte e um valor de EXERCÍCIO 12-4.
família de fontes , nessa ordem. Omitir um ou colocá-los na ordem errada faz com que toda a
Usando a propriedade
regra seja inválida. Este é um exemplo de um valor mínimo de propriedade de fonte:
de fonte abreviada
p { fonte: 1em sem serifa; }

Um último ajuste no menu, e então faremos
Depois de atender aos requisitos de tamanho e família, os outros valores são opcionais e podem uma breve pausa. Para economizar espaço,
aparecer em qualquer ordem antes do tamanho da fonte. Quando o estilo, peso, alongamento ou podemos substituir todas as propriedades de
variante é omitido, seu valor é definido como normal. Isso facilita a substituição acidental de uma fonte que especificamos para o elemento h1
por uma declaração com a abreviação
configuração anterior pela propriedade abreviada, portanto, tenha cuidado ao usá-la.
propriedade da
fonte : h1 {
Há um valor lá, line-height, que ainda não vimos. Ao que parece, ele ajusta a altura da linha de fonte: bold 1.5em "Marko One",
texto e é usado para adicionar espaço entre as linhas de texto. Ele aparece logo após o tamanho Georgia, serifa;
}
da fonte, separado por uma barra, conforme mostrado nestes exemplos. A propriedade line-
height é abordada com mais detalhes posteriormente neste capítulo. Você pode achar redundante incluir o
valor de peso da fonte em negrito nesta regra.
Afinal, o elemento h1 já estava em negrito por
h3 { fonte: negrito oblíquo versalete 1.5em/1.8em Verdana, sans-serif; } h2 padrão, certo? O problema das propriedades
{ fonte: negrito 1.75em/2 sem serifa; } abreviadas é que, se você omitir um valor, ele
será redefinido para o valor padrão dessa
No EXERCÍCIO 12-4, usaremos a propriedade shorthand font para fazer algumas alterações nos
propriedade, não para o valor padrão do
títulos h1 no menu bistro. navegador.
Nesse caso, o peso da fonte padrão

Palavras-chave de fonte do sistema valor dentro de uma declaração de fonte
é normal. Como nossa folha de estilo
A propriedade font também tem vários valores de palavras-chave (caption, icon, menu, message- substitui o estilo de cabeçalho em negrito
box, small-caption e status-bar) que representam as fontes do sistema, as fontes usadas pelos padrão do navegador, o h1 aparecerá no
sistemas operacionais para coisas como rótulos para ícones e itens de menu . Eles podem ser texto de peso normal se não o colocarmos
úteis quando você está projetando um aplicativo da Web para que ele corresponda ao ambiente explicitamente em negrito na propriedade font .
As propriedades abreviadas podem ser
em que o usuário está trabalhando. Esses são considerados valores abreviados porque
complicadas dessa maneira... preste atenção
encapsulam a fonte, tamanho, estilo e peso da fonte usada para cada finalidade com apenas uma
para não deixar algo de fora e substituir um valor
palavra-chave. padrão ou herdado com o qual você estava contando.
Assim como a propriedade de fonte abreviada , o EXERCÍCIO 12-4 é curto e agradável. Você pode salvá-lo e vê-lo no
navegador. Se você fez seu trabalho
corretamente, ele deve ficar exatamente igual
ao da etapa anterior.
TIPOGRAFIA AVANÇADA COM CSS3
Agora você tem um bom kit de ferramentas básico para formatar fontes com CSS. Se você quiser
ser chique, você deve ler todas as propriedades no Módulo de Fontes CSS Nível 3, que lhe dão
muito mais controle sobre a seleção e posição de caracteres.
Vou manter minhas descrições breves por causa das restrições de espaço e do fato de que muitos
desses recursos ainda são experimentais ou têm suporte de navegador muito limitado. Mas se
você gosta de tipografia agradável, peço que faça mais pesquisas, começando com a especificação
em www.w3.org/TR/css-fonts-3.

Variante de fonte em CSS3
A coleção de propriedades prefixadas com variantes de fonte em CSS3 visa dar aos
designers e desenvolvedores acesso a caracteres especiais (glifos) em fontes que podem
tornar a tipografia de uma página mais sofisticada.
Como mencionei anteriormente, o CSS3 Font Module expandiu bastante a definição de

font-variant. Agora ele pode servir como uma propriedade abreviada para várias propriedades
prefixadas com variante de fonte . Essas propriedades ainda são consideradas
experimentais, embora o suporte ao navegador esteja começando a melhorar. Ainda assim,
é interessante ver como o controle de fontes no web design está evoluindo, então vamos dar uma olhada.
NOTA
Com exceção de font-variant-position, que tem um propósito específico, as outras propriedades de font-
variant são ótimas oportunidades para praticar o aprimoramento progressivo.
Eles são bons para ter, mas OK para perder.
font-variant-ligatures
Uma ligadura é um glifo que combina dois ou mais caracteres em um símbolo. Um
NOTA
exemplo comum é a combinação de um f minúsculo e i, onde o ponto no i se torna parte
A propriedade font-variant-ligatures tem uma do f (ÿ). As ligaduras podem suavizar a aparência de pares de letras desajeitados
longa lista de valores, que você pode encontrar conhecidos, e os glifos de ligadura são incluídos em muitas fontes. A propriedade font-
em www.w3.org/TR/css-fonts 3/#propdef-font-
variant-ligatures fornece uma maneira de controlar o uso de ligaduras em páginas da
variant-ligatures.
web. Este é melhor suportado do que os outros, e já funciona no IE10+, Chrome 34+,
bem como Safari e Opera (com o prefixo -webkit- ). Eu esperaria que o suporte ao
navegador melhorasse constantemente.
font-variant-caps
Permite a seleção de glifos de versalete (small-caps) do conjunto de caracteres da
fonte em vez de simulá-los no navegador. O valor all-small caps usa versaletes para
letras maiúsculas e minúsculas. unicase usa letras maiúsculas apenas para maiúsculas
e as letras minúsculas na palavra permanecem as mesmas. titleting-caps é usado para
títulos em letras maiúsculas, mas foi projetado para ser menos forte. Outras opções são
petite-caps e all-petite-caps.
font-variant-position
Seleciona glifos sobrescritos (super) ou subscritos (sub) do conjunto de caracteres da
fonte quando estão disponíveis. Caso contrário, o navegador cria texto superscript ou
subscript para os elementos sup e sub encolhendo o caractere e movendo-o acima ou
abaixo da linha de base.
fonte-variante-numérico
Permite a seleção de vários estilos de caracteres numéricos se estiverem disponíveis.
Por exemplo, você pode escolher numerais proporcionais ou alinhados em colunas
como em uma planilha (números proporcionais/números tabulares) optar por
numerais de estilo antigo (números de estilo antigo) onde alguns caracteres mergulham

abaixo da linha de base e especifique se as frações devem estar na diagonal ou empilhadas

(frações diagonais/frações empilhadas). Ele também permite que você faça com que os
números ordinais pareçam 2º em vez de 2º (ordinal) e oferece uma maneira de usar zeros
com barras através deles, como é preferido em alguns contextos (zero com barra).
font-variant-alternates
As fontes às vezes oferecem mais de um glifo para um caractere específico – por exemplo,
alguns desenhos de swash para a letra S ou um s antiquado que se parece mais com um
f. font-variant-alternates fornece uma maneira de especificar swashes e outros caracteres
alternativos. Muitos de seus valores são específicos da fonte e devem ser definidos
primeiro com a regra @font-features-values . Vou deixar uma explicação mais profunda
para a especificação.
font-variant-east-asian
Permite a seleção de glifos asiáticos específicos.
Finalmente, a antiga propriedade font-variant que existe desde o início do CSS foi atualizada
para ser uma propriedade abreviada para todas as propriedades listadas aqui. Você pode usá-
lo hoje com o valor original de letras pequenas e será perfeitamente válido. Uma vez que
essas propriedades ganhem força, ele poderá fazer muito mais.
Outras propriedades CSS3

É hora de terminar nossa revisão das propriedades da fonte no Módulo de Fontes Nível 3. Vou
lhe dar uma ideia geral do que está disponível (ou estará, depois que o suporte do navegador
for atualizado) e você pode se aprofundar nas especificações sobre seu próprio:
ajuste de tamanho da fonte
O tamanho que o texto aparece na página geralmente tem mais a ver com a altura do x
minúsculo (sua altura x) do que com o tamanho especificado do texto. Por exemplo, o tipo
de 10 pontos com altura x relativamente grande provavelmente é mais fácil de ler do que
o tipo de 10 pontos com pequenas letras minúsculas delicadas. O ajuste de tamanho da fonte
A propriedade permite que o navegador ajuste o tamanho de uma fonte de fallback até
que sua altura x corresponda à altura x da fonte de primeira escolha. Isso pode garantir
melhor legibilidade, mesmo quando uma fonte de fallback precisa ser usada.
fonte-kerning
Kerning é o espaço entre os glifos de caracteres. As fontes geralmente contêm metadados
sobre quais pares de letras precisam ser agrupados para que o espaçamento de uma
palavra pareça consistente. A propriedade font-kerning permite que as informações de
kerning da fonte sejam aplicadas (normal), desligadas (nenhum) ou deixadas a critério
do navegador (auto).
configurações de recursos de fonte
Essa propriedade dá aos autores a capacidade de controlar recursos tipográficos

avançados em fontes OpenType que não são amplamente usadas, como swashes, pequenas

Alterando a Cor do Texto
caps, ligaduras, frações automáticas e muito mais. Esses recursos devem parecer
familiares, pois muitos deles podem ser controlados com várias variantes de fonte
propriedades. Na verdade, a especificação recomenda que você use font-variant sempre
que possível e reserve configurações de recursos de fonte para casos extremos. No
momento da redação deste artigo, no entanto, a propriedade font-feature-settings tem
melhor suporte ao navegador, portanto, por enquanto, pode ser uma opção melhor.
Esteja ciente de que ele se espalha mal, o que significa que é fácil desfazer uma
configuração quando você a usa mais tarde para definir outra coisa. CSS-Tricks fornece
uma boa visão geral de Robin Rendle (css-tricks.com/almanac/properties/f/font-feature-settings).
substituição de idioma de fonte
Essa propriedade experimental controla o uso de glifos específicos do idioma.
Finalmente passamos pelas várias maneiras de controlar fontes em CSS (demorou um

pouco!), mas esse é apenas um aspecto da apresentação de texto. Alterar a cor do texto é
outra opção de design comum.
LEITURA ADICIONAL
Para uma boa visão geral dos recursos do OpenType e por que eles valem a pena, leia
“Cuidando com os recursos do OpenType” de Tim Brown no Adobe Typekit (practice.typekit.com/
lição/caring-about-opentype-features/).
MUDANDO A COR DO TEXTO

Você teve um vislumbre de como alterar a cor do texto no Capítulo 11, Introdução às folhas
de estilo em cascata e, para ser honesto, não há muito mais a dizer sobre isso aqui. Você
altera a cor do texto com a propriedade color .
cor
Valores: valor da cor (nome ou numérico)
Predefinição: depende do navegador e das preferências do usuário
Herda: sim
Usar a propriedade de cor é muito simples. O valor da cor

A propriedade pode ser um nome de cor predefinido (consulte a barra lateral “Nomes de
cores” ) ou um valor numérico que descreve uma cor RGB específica. Aqui estão alguns
exemplos, que tornam os elementos h1 em um documento cinza:
h1 { cor: cinza; }
h1 { cor: #666666; }
h1 { cor: #666; }
h1 { cor: rgb(102.102.102); }

Mais alguns tipos de seletor
Não se preocupe com os valores numéricos por enquanto; Eu só queria que você visse como
eles são. A cor RGB é discutida em detalhes no Capítulo 13, Cores e Planos de Fundo,
portanto, neste capítulo, ficaremos apenas com os nomes das cores para fins de demonstração.
NUM RELANCE
A cor é herdada, portanto, você pode alterar a cor de todo o texto em um documento aplicando Nomes de cores
a propriedade color ao elemento body , conforme mostrado aqui:
CSS2.1 define 17 cores padrão
corpo { cor: fúcsia; } nomes:
Preto branco roxo

OK, então você provavelmente não gostaria que todo o seu texto fosse fúcsia, mas você
entendeu. Lima azul marinho
prata fúcsia marrom

Por uma questão de precisão, quero salientar que a propriedade de cor não é estritamente uma
Oliva azul laranja
propriedade relacionada ao texto. Na verdade, de acordo com a especificação CSS, ele é usado
vermelho
verde
para alterar a cor do primeiro plano (em oposição ao plano de fundo) de um elemento. O primeiro
cerceta amarelo cinza
plano de um elemento consiste tanto no texto que ele contém quanto em sua borda. Portanto,
quando você aplicar uma cor a um elemento (incluindo elementos de imagem), saiba que a cor O CSS Color Module Level 3 atualizado
permite que nomes de um conjunto
também será usada para a borda, a menos que haja uma propriedade de cor de borda
maior de 140 nomes de cores sejam
específica que a substitua. Falaremos mais sobre bordas e cores de bordas no Capítulo 14,
especificados em folhas de estilo. Você pode
Pensando Dentro da Caixa. ver amostras de cada na FIGURA 13-2
e em learningwebdesign.com/
Antes de adicionarmos cor ao menu online, quero fazer uma pequena viagem paralela e colornames.html.
apresentar mais alguns tipos de seletores que nos darão mais flexibilidade na segmentação de
elementos no documento para estilização.
MAIS ALGUNS TIPOS DE SELETOR

Até agora, usamos nomes de elementos como seletores. No capítulo anterior, você viu como
agrupar seletores em uma lista separada por vírgulas para poder aplicar propriedades a vários
elementos de uma só vez. Aqui estão alguns exemplos dos seletores que você já conhece:
Seletor de elemento p { cor: marinho; }

Seletores agrupados p, ul, td, th { cor: marinho; }
A desvantagem de selecionar elementos dessa maneira, é claro, é que a propriedade (neste

caso, texto azul marinho) é aplicada a todos os parágrafos e outros elementos listados no
documento. Às vezes, você deseja aplicar uma regra a um ou mais parágrafos específicos.
Nesta seção, veremos três tipos de seletores que nos permitem fazer exatamente isso: seletores
descendentes, seletores de ID e seletores de classe.
Um espaço de caractere
entre o elemento
Seletores de Descendentes
nomes significa que o
Um seletor descendente tem como alvo elementos que estão contidos em (e, portanto, são segundo elemento deve ser
descendentes de) outro elemento. É um exemplo de seletor contextual porque seleciona o contido no primeiro.
elemento com base em seu contexto ou relação com outro elemento. A barra lateral “Outros
seletores contextuais” lista mais alguns.

Os seletores descendentes são indicados em uma lista separada por um espaço de caracteres.
Este exemplo tem como alvo elementos de texto enfatizado (em) , mas somente quando eles
aparecem em itens de lista (li). Texto enfatizado em parágrafos e outros elementos não seriam
afetados (FIGURA 12-10).
li em { cor: azeitona; }
html
cabeça corpo
título estilo p ul h2
em em li li li em
em em
li em { propriedade: valor; }
FIGURA 12-10. Somente elementos em dentro de elementos li são selecionados. O outro em

elementos não são afetados.
Aqui está outro exemplo que mostra como os seletores contextuais podem ser agrupados em uma
lista separada por vírgulas, exatamente como vimos anteriormente. Esta regra tem como alvo os
elementos, mas apenas quando eles aparecem nos títulos h1, h2 e h3 :
h1 em, h2 em, h3 em { cor: vermelho; }
Também é possível aninhar seletores descendentes com várias camadas de profundidade. Este
exemplo tem como alvo elementos em que aparecem em âncoras (a) em listas ordenadas (ol):
ol a em { font-variant: small-caps; }
Seletores de ID
De volta ao Capítulo 5, Marcando texto, aprendemos sobre o atributo id , que dá a um elemento
O símbolo # identifica um um nome de identificação exclusivo (sua referência id). O atributo id pode ser usado com qualquer
seletor de ID. elemento e é comumente usado para dar significado aos elementos genéricos div e span . Os
seletores de ID permitem segmentar elementos por seus valores de ID . O símbolo que identifica
os seletores de ID é o octothorpe (#), também conhecido como símbolo de hash ou libra.
Aqui está um exemplo de um item de lista com uma referência de id :
<li id="sleestak"> T-shirt elegante</li>

Agora você pode escrever uma regra de estilo apenas para esse item da lista usando um seletor
de ID, assim (observe o # antes da referência de ID ):
li#sleestak { cor: azeitona; }
Como os valores de id devem ser exclusivos no documento, é aceitável omitir o nome do

elemento. A regra a seguir é equivalente à última:
#sleestak { cor: azeitona; }
Você também pode usar um seletor de ID como parte de um seletor contextual. Neste exemplo,
um estilo é aplicado apenas a elementos que aparecem dentro do elemento identificado como
“recursos”. Dessa forma, você pode tratar links no elemento chamado “resources” de maneira
diferente de todos os outros links na página sem qualquer marcação adicional.
#resources a { text-decoration: none; }
Você deve estar começando a ver o poder dos seletores e como eles podem ser usados
estrategicamente junto com uma marcação semântica bem planejada.
Outros seletores contextuais

Seletores descendentes são um dos quatro tipos de seletores contextuais
(chamados de combinadores nas especificações de Seletores Nível 3 e Nível 4). Os outros
três são seletores filho, seletores de irmãos próximos e seletores de irmãos subsequentes .
Seletor filho
Um seletor filho é semelhante a um seletor descendente, mas visa apenas os filhos
diretos de um determinado elemento. Não pode haver outros níveis hierárquicos intermediários.
Eles são indicados com o símbolo de maior que (>). A regra a seguir afeta o texto
enfatizado, mas somente quando está contido diretamente em um elemento p . Um elemento
em dentro de um link (a) dentro do parágrafo não seria afetado.
p > em {peso da fonte: negrito;}
Seletor do próximo irmão

Um seletor do próximo irmão tem como alvo um elemento que vem diretamente após outro
elemento com o mesmo pai. É indicado com um sinal de mais (+) . Esta regra dá tratamento
especial aos parágrafos que seguem um h1. Outros parágrafos não são afetados.
h1 + p {estilo de fonte: itálico;}
Seletores de irmãos subsequentes

Um seletor de irmão subsequente seleciona um elemento que compartilha um pai com o
elemento especificado e ocorre depois dele na ordem de origem. Eles não precisam seguir
um ao outro diretamente. Esse tipo de seletor é novo no CSS3 e não é compatível com o
Internet Explorer 8 e versões anteriores. A regra a seguir seleciona qualquer h2 que
compartilhe um elemento pai (como uma seção ou artigo) com um h1 e apareça depois dele
no documento.
h1 ~ h2 {peso da fonte: normal;}

Seletores de classe
Um último tipo de seletor, e então podemos voltar às propriedades de estilo de texto. O outro
O símbolo de ponto (.) identificador de elemento que você aprendeu no Capítulo 5 é o identificador de classe ,
indica um seletor de classe. usado para classificar elementos em um grupo conceitual. Ao contrário do atributo id , vários
elementos podem compartilhar um nome de classe . Não apenas isso, mas um elemento
pode pertencer a mais de uma classe.
Você pode direcionar elementos pertencentes à mesma classe com – você adivinhou – um
seletor de classe. Os nomes das classes são indicados com um ponto (.) no início do seletor.
Por exemplo, para selecionar todos os parágrafos com class="special", use este seletor (o
ponto indica que a seguinte palavra é um seletor de classe):
p.special { cor: laranja; }
Para aplicar uma propriedade a todos os elementos de uma mesma classe, omita o nome do
elemento no seletor (certifique-se de deixar o ponto; é o caractere que indica uma classe).
Este exemplo tem como alvo todos os parágrafos e qualquer outro elemento que tenha sido
marcado com class="special":
.special { cor: laranja; }
Especificidade 101
No Capítulo 11, apresentei o termo especificidade, que se refere ao fato de que seletores
mais específicos têm mais peso quando se trata de lidar com conflitos de regras de estilo.
Agora que você conhece mais alguns seletores, é um bom momento para revisitar esse
conceito tão importante.
Esta lista de tipos de seletores do mais para o menos específico deve servir bem na maioria
dos cenários:
• Estilos embutidos com o atributo style são mais específicos do que (e serão
sobrepor…)
• Seletores de ID, que são mais específicos do que (e substituirão…)
• Seletores de classe, que são mais específicos do que (e substituirão…)
• Seletores de elementos individuais
A história completa é um pouco mais complicada, mas aqui está em poucas palavras. Para
calcular a especificidade, comece desenhando três caixas:
[ ] [ ] [ ]
Agora conte o número de IDs no seletor e coloque esse número na primeira caixa. Em
seguida, conte o número de classes e pseudoclasses no seletor e coloque esse número na
segunda caixa. Terceiro, conte os nomes dos elementos e coloque esse número na terceira
caixa.
A especificidade é comparada caixa a caixa. A primeira caixa que não é um empate determina
qual seletor vence. Aqui está um exemplo simples de duas regras conflitantes para o elemento
h1 :

h1 { cor: vermelho;} [0] [0] [1]

h1.special { cor: cal; } [0] [1] [1] Mais sobre especificidade
A segunda tem um seletor de classe e a primeira não; portanto, o segundo é mais específico e A visão geral da especificidade neste
tem mais peso. capítulo é suficiente para você começar, mas

quando você ficar mais experiente e suas
Que tal algo mais complicado? folhas de estilo se tornarem mais complicadas,
você poderá descobrir que precisa de uma
article#main sidebar.sidebar:hover > h1:first-of-type [1] [3] [3]
compreensão mais completa do funcionamento
.xxxxxxxx a:link [0] [8] [1] interno.
Para obter a explicação técnica de

O segundo seletor tem como alvo um link em um elemento com uma string de nomes de classe
exatamente como a especificidade é calculada,
(representada por “.x”). Mas o primeiro seletor tem um ID (#main) e, portanto, é mais específico. consulte o Nível do módulo de seletores de CSS
4 especificação em www.w3.org/TR/
Você pode precisar fazer esse cálculo de especificidade completo, mas na maioria dos casos seletores4/#especificidade.
Eric Meyer fornece uma descrição
você saberá qual seletor é mais específico seguindo as diretrizes gerais listadas anteriormente.
completa, porém mais digerível, desse
sistema em seu livro Selectors, Specificity,
Você pode usar a especificidade estrategicamente para manter suas folhas de estilo simples e and the Cascade: Applying CSS to Documents
(O'Reilly). Este material também está incluído
sua marcação mínima. Por exemplo, é possível definir um estilo para um elemento (p, neste
em seu livro
exemplo) e, em seguida, substituir quando necessário usando seletores mais específicos.
co-autoria com Estelle Weyl, CSS: The
Definitive Guide, 4e (O'Reilly).
p { altura da linha: 1,2em; } [0] [0] [1] Se você está procurando ajuda online,
blockquote p { line-height: 1em; } [0] [0] [2] recomendo o artigo da Smashing
p.intro { altura da linha: 2em; } [0] [1] [1] Magazine “CSS Specificity: Things You
Should Know” (coding.smashingmagazine.
Nesses exemplos, os elementos p que aparecem dentro de uma citação em bloco têm uma
altura de linha menor do que os parágrafos comuns. No entanto, todos os parágrafos com uma classe com/2007/07/27/css-specificity things-
de “intro” terá uma altura de linha de 2em, mesmo que apareça dentro de uma citação em you-should-know/) por Vitaly Friedman. Tem
bloco, pois os seletores de classe são mais específicos. mais de uma década, mas os conceitos são
verdadeiros.
Compreender os conceitos de herança e especificidade é fundamental para dominar CSS, e há
Quanto à maioria dos tópicos de web
muito mais a ser dito sobre especificidade. A barra lateral “Mais sobre especificidade” fornece design, o site MDN Web Docs fornece
referências úteis. uma explicação abrangente:
developer.mozilla.org/en-US/docs/
Agora, de volta ao menu. Felizmente, nossa página Black Goose Bistro foi marcada completa e
Web/CSS/Especificidade.
semanticamente, então temos muitas opções para selecionar elementos específicos. Experimente
esses novos seletores no EXERCÍCIO 12-5.
O seletor universal
O seletor de elemento universal (*) corresponde a qualquer curinga de , como um #intro* { cor: cinza; }
elemento em linguagens de programação. A regra de estilo Esteja ciente de que todos os elementos serão selecionados com o seletor
universal, incluindo alguns que você pode não esperar estilizar. Por exemplo,
* { borda: cinza sólido de 1px; }
alguns estilos podem atrapalhar seus controles de formulário, portanto, se sua
coloca uma borda cinza de 1 pixel ao redor de cada elemento no
página contiver entradas de formulário, a aposta mais segura é evitar o seletor
documento. Também é útil como seletor contextual, conforme mostrado neste
universal.
exemplo que seleciona todos os elementos em uma seção “intro”:

EXERCÍCIO 12-5. Usando seletores
Desta vez, adicionaremos mais algumas regras de estilo usando seletores Então, agora tudo o que temos a fazer é escrever uma regra usando um seletor
descendentes, ID e classe combinados com as propriedades de fonte e cor que de classe para alterar a fonte para Georgia ou alguma fonte serif, deixar os preços
aprendemos até agora. em itálico e acinzentá-los de volta:
1. Gostaria de adicionar um pouco de cor chamativa ao “novo item!” .preço {

elementos próximos a determinados nomes de itens de menu. Eles são marcados família de fontes: Georgia, serifa;
como fortes, para que possamos aplicar a propriedade de cor ao forte estilo de fonte: itálico;
elemento. Adicione esta regra à folha de estilo incorporada, salve o arquivo e cor: cinza;
recarregue-o no navegador: }
strong 5. Da mesma forma, na div “info” , posso alterar a aparência dos spans que foram
{ estilo da fonte: itálico; marcados como pertencentes à classe “label” para destacar os rótulos:
cor: tomate;
}
.label {
Isso funcionou, mas agora o forte elemento “Muito picante” na descrição é intensidade da fonte: Negrito;
“tomate” vermelho também, e não é isso que eu quero. variante de fonte: letras minúsculas;
A solução é usar um seletor contextual que tenha como alvo apenas os estilo de fonte: normal;
elementos fortes que aparecem nos elementos dt . Remova a declaração de
}
cor que você acabou de escrever da regra forte e crie uma nova regra que tenha 6. Finalmente, há um aviso na parte inferior da página que quero fazer pequeno e
como alvo apenas os elementos fortes dentro dos termos da lista de definição: vermelho. Ele recebeu a classe "aviso", para que eu possa usá-lo como um seletor
para direcionar apenas esse parágrafo para estilo. Enquanto estou nisso, vou
dt forte { cor: tomate; } aplicar o mesmo estilo ao elemento sup (o asterisco da nota de rodapé)
anteriormente na página para que eles correspondam. Observe que usei um
2. Observe a fonte do documento e você verá que o conteúdo foi dividido em três divs
seletor agrupado, portanto, não preciso escrever uma regra separada.
exclusivas: info, aperitivos e entradas. Podemos usar isso a nosso favor quando
se trata de estilo. Por enquanto, vamos fazer algo simples e aplicar uma cor azul-
petróleo ao texto na div com o ID “info”. Como a cor herda, precisamos aplicar a p.aviso, sup {
propriedade apenas à div e ela será passada para h1 e p: tamanho da fonte: pequeno;
cor vermelha;
}
A FIGURA 12-11 mostra os resultados de todas essas mudanças. Agora temos

#info { cor: verde-azulado; }
alguns toques de cor e tratamentos tipográficos especiais.
3. Agora vamos ser um pouco mais sofisticados e fazer o parágrafo dentro da
seção “info” em itálico de uma forma que não afete os outros parágrafos da
página. Novamente, um seletor contextual é a resposta. Esta regra seleciona
apenas os parágrafos contidos na seção de informações do documento:
#info p { estilo da fonte: itálico; }
4. Quero dar um tratamento especial a todos os preços do cardápio.

Felizmente, todos eles foram marcados com elementos span :
<span class="price">$3,95
FIGURA 12-11. O estado atual do menu bistrô.

Ajustes de linha de texto
AJUSTES DE LINHA DE TEXTO

O próximo lote de propriedades de texto tem a ver com o tratamento de linhas inteiras de
texto em vez das formas dos caracteres. Eles permitem que os autores da web criem texto
da web com recuos, espaço extra entre as linhas (entrelinhas) e diferentes alinhamentos
horizontais, semelhantes à impressão.
Altura da linha
altura da linha
Valores: número | medição de comprimento | porcentagem | normal
Herda: sim
A propriedade line-height define a distância mínima da linha de base à linha de base no

texto. Nós o vimos anteriormente como parte da propriedade de fonte abreviada . Diz-se
que a propriedade line-height especifica uma distância “mínima” porque se você colocar
uma imagem alta ou caracteres grandes em uma linha, a altura dessa linha se expandirá
para acomodá-la.
Uma linha de base é a linha imaginária sobre a qual ficam os fundos dos personagens.
Definir uma altura de linha em CSS é semelhante a adicionar entrelinha na configuração
de tipo tradicional; no entanto, em vez de o espaço ser adicionado entre as linhas, o espaço
extra é dividido acima e abaixo do texto. O resultado é que line-height define a altura de
uma caixa de linha na qual a linha de texto é centralizada verticalmente (FIGURA 12-12).
line-height é definido como 2em (duas vezes o tamanho do

texto); o espaço extra é dividido igualmente acima e abaixo da
Tamanho de 1em para este texto linha de texto, centralizando-o verticalmente na altura da linha.
Linha de base
altura da linha: 2em;
FIGURA 12-12. As linhas de texto são centralizadas verticalmente na altura da linha.
Esses exemplos mostram três maneiras diferentes de tornar a altura da linha duas vezes a
altura do tamanho da fonte:
p { altura da linha: 2; }
p { altura da linha: 2em; }
p { altura da linha: 200%; }

Quando um número é especificado sozinho, conforme mostrado no primeiro exemplo, ele atua
como um fator de escala que é multiplicado pelo tamanho da fonte atual para calcular o valor da
altura da linha .
As alturas de linha também podem ser especificadas em uma das unidades de comprimento CSS.
Ems e valores percentuais são baseados no tamanho da fonte atual do elemento. Nos três
exemplos, se o tamanho da fonte for 16 pixels, a altura da linha calculada seria de 32 pixels (veja
a FIGURA 12-12).
A diferença entre usar um fator de escala (valor numérico) e um valor relativo (em ou %) é como
eles herdam. Se você definir a altura da linha com um fator de escala para um documento inteiro
no elemento body , seus descendentes herdarão o multiplicador. Se o fator de escala for definido
como 2 para o corpo, um título de 24 pixels terminará com uma altura de linha de 48 pixels.
Se você definir a altura da linha no elemento do corpo usando ems ou porcentagens, seus
descendentes herdarão o tamanho calculado com base no tamanho da fonte do corpo. Por
exemplo, se a altura da linha for definida como 1em para o elemento do corpo (calculado em 16
pixels), um título de 24 pixels herdará a altura da linha calculada de 16 pixels, não o valor de 1em.
Este provavelmente não é o efeito que você procura, tornando os valores numéricos uma opção
mais intuitiva.
Recuos
A propriedade text-indent recua a primeira linha do texto por um valor especificado.
recuo de texto
Valores: medição de comprimento | percentagem
NOTA Predefinição: 0
A propriedade text-indent recua apenas a Aplica-se a: bloquear contêineres

primeira linha de um bloco. Se você quiser
Herda: sim
espaço ao longo de todo o lado do bloco de
texto, use uma das propriedades de margem ou Você pode especificar uma medida de comprimento ou um valor percentual para o recuo do texto.
preenchimento para adicioná-lo.
Os resultados são mostrados na FIGURA 12-13. Aqui estão alguns exemplos: p#1
Os designers podem estar acostumados a { text-indent: 2em; }
especificar recuos e margens em conjunto, mas
p#2 { recuo do texto: 25%; }
para ser consistente com a forma como o CSS
os trata, as margens serão discutidas como p#3 { text-indent: -35px; }

parte do modelo de caixa no Capítulo 14.
Os valores percentuais são calculados com base na largura do elemento pai e são passados para
seus elementos descendentes como valores percentuais (valores não calculados). Portanto, se
uma div tiver um recuo de texto de 10%, todos os seus descendentes também terão.
No terceiro exemplo, observe que um valor negativo foi especificado, e tudo bem. Isso fará com
que a primeira linha do texto fique à esquerda da borda esquerda do texto (também chamado de
recuo deslocado).

2em
25% DICA DE DESIGN
Se você usar um recuo deslocado, certifique-

se de que também haja um preenchimento
esquerdo aplicado ao elemento. Caso
–35px contrário, o texto suspenso pode desaparecer
da borda esquerda da janela do navegador.
FIGURA 12-13. Exemplos da propriedade text-indent .
Alinhamento de Texto Horizontal

Você pode alinhar o texto para páginas da Web como faria em um processador de texto ou
programa de editoração eletrônica com a propriedade text-align .
alinhamento de texto
Valores: esquerda | direito | centro | justificar | iniciar | fim
Predefinição: começar
Aplica-se a: bloquear contêineres
Herda: sim
Esta é uma propriedade bastante simples de usar. Os resultados dos vários valores de
alinhamento de texto CSS2.1 são mostrados na FIGURA 12-14.
text-align: Alinha o texto na margem esquerda
esquerda text- Alinha o texto na margem direita
align: direita text- Centraliza o texto no bloco de texto
align: centro text-align: Alinha

justificar
o texto nas margens direita e esquerda
O CSS Text Module Level 3 adicionou os valores inicial e final , que especificam o lado da NOTA
caixa de linha ao qual o texto deve se alinhar (consulte a Nota). Isso acomoda idiomas que
O Módulo de Texto CSS Nível 3 também define
são escritos verticalmente e da direita para a esquerda. Para idiomas de leitura da esquerda
duas novas propriedades relacionadas ao
para a direita, o início corresponde à esquerda.
alinhamento de texto—text-align-last (para
Boas notícias - apenas mais cinco propriedades de texto para ir! Então estaremos prontos alinhar a última linha de texto) e text-justify
para experimentar alguns deles no menu Black Goose Bistro. (para um controle mais ajustado sobre como o
espaço é inserido no texto justificado).

Sublinhados e outras “decorações”
alinhamento de texto: esquerda;
text-align: direita;
text-align: justificar;
FIGURA 12-14. Exemplos de valores de alinhamento de texto CSS2.1 .
NOTA
SUBLINHADOS E OUTROS
O módulo de texto CSS3 inclui melhorias “DECORAÇÕES”
mentos à decoração de texto, incluindo linha de
decoração de texto, cor de decoração de texto , Se você quiser colocar uma linha abaixo, sobre ou através do texto, ou se quiser desativar
estilo de decoração de texto, pular decoração
o sublinhado nos links, a decoração de texto é a propriedade para você.
de texto e posição de sublinhado de texto.
Nenhuma versão do IE ou Edge oferece suporte decoração de texto
a essas propriedades, mas, com exceção de
Valores: nenhum | sublinhar | overline | passagem de linha | piscar
-skip, elas são compatíveis com outros
Predefinição: Nenhum
navegadores modernos.
Veja CanIUse.com para detalhes. todos os elementos
Aplica-se a:
Herda: não, mas como as linhas são desenhadas em elementos filhos, elas podem parecer
“decoradas” também
Os valores para decoração de texto são intuitivos e são mostrados na FIGURA 12-15.
decoração de texto: sublinhado;
sublinhado Sublinha o elemento
overline Desenha uma linha sobre o texto
passagem de linha Desenha uma linha através do texto
decoração de texto: overline;

O uso mais popular da propriedade text-decoration é desativar os sublinhados que
aparecem automaticamente no texto vinculado, conforme mostrado aqui:
a { text-decoration: none; }
decoração de texto: linha;

Há algumas palavras de advertência a serem ditas em relação à decoração de texto:
FIGURA 12-15. Exemplos de valores • Primeiro, se você se livrar dos sublinhados nos links, certifique-se de que haja outras
de decoração de texto .
dicas para compensar, como cor e peso.

Alterando a capitalização
• Por outro lado, como os sublinhados são uma indicação visual tão forte para “clique
aqui”, sublinhar o texto que não é um link pode ser enganoso e frustrante. Considere
se o itálico pode ser uma alternativa aceitável.
• Finalmente, não há razão para fazer seu texto piscar. Os fabricantes de navegadores
concordam e, portanto, abandonaram o suporte para texto intermitente. O IE nunca o
apoiou em primeiro lugar.
MUDANÇA DE CAPITALIZAÇÃO
Lembro-me de quando os programas de editoração eletrônica introduziram um recurso que

me permitia alterar a capitalização do texto em tempo real (OK, estou namorando aqui).
Isso tornou mais fácil ver como meus títulos podem ficar em letras maiúsculas sem precisar
redigitá-los. CSS inclui esse recurso também com a propriedade text-transform .
transformação de texto
Valores: nenhum | capitalizar | minúsculas | maiúsculas | largura completa
Herda: sim
Quando você aplica a propriedade text-transform a um elemento de texto, ela altera sua
capitalização ao renderizar sem alterar a maneira como é digitada na fonte. Os valores são
os seguintes (FIGURA 12-16):
Nenhum Como está digitado na fonte
capitalizar Capitaliza a primeira letra de cada palavra
minúscula Deixa todas as letras minúsculas
maiúscula Deixa todas as letras maiúsculas
largura completa Escolhe uma versão de “largura total” de um personagem, se existir

(não é bem suportado)
transformação de texto: nenhum;

(como foi digitado na fonte)
text-transform: capitalizar;
transformação de texto: minúsculas;
FIGURA 12-16. A propriedade text-transform altera a capitalização dos caracteres quando

eles são exibidos, independentemente de como são digitados na fonte.

Espaçado
ESPAÇADO
As próximas duas propriedades de texto são usadas para inserir espaço entre letras
(espaçamento de letras) ou palavras (espaçamento de palavras) quando o texto é exibido.
espaçamento entre letras
Valores: medição de comprimento | normal
Herda: sim
espaçamento entre palavras
Valores: medição de comprimento | normal
Herda: sim
As propriedades de espaçamento entre letras e espaçamento entre palavras fazem o que dizem:
adicionam espaço entre as letras do texto ou palavras em uma linha, respectivamente.
A FIGURA 12-17 mostra os resultados do espaçamento entre letras e palavras aplicados ao

parágrafo simples mostrado aqui:
<p>Menu de verão do Black Goose Bistro</p>
p { espaçamento entre letras: 8px; }
p { espaçamento entre palavras: 1,5em; }
FIGURA 12-17. espaçamento entre letras (superior) e espaçamento entre palavras (inferior).
Vale a pena notar que quando você especifica as medidas em, o tamanho calculado é passado
para os elementos filhos, mesmo que eles tenham um tamanho de fonte menor que o pai.
No EXERCÍCIO 12-6 , mais adiante neste capítulo, faremos uma última viagem de volta ao menu
do Black Goose Bistro e usaremos a propriedade de espaçamento entre letras em h2s.

Sombra de texto
SOMBRA DO TEXTO
A propriedade text-shadow adiciona uma “sombra” abaixo do seu texto que faz com que
pareça pairar ou aparecer acima da página. Desde que o design de cores planas se tornou
moda, as sombras caíram fora de moda, mas ainda podem ser uma ferramenta visual útil,
principalmente quando seu texto está na frente de um plano de fundo estampado ou
fotográfico.
As sombras de texto são desenhadas atrás do texto, mas na frente do plano de fundo e da
borda, se houver. As sombras de texto são suportadas por todos os navegadores atuais.
As versões 9 e anteriores do Internet Explorer não têm suporte.
sombra de texto
Valores: 'deslocamento horizontal' 'deslocamento vertical' 'raio de desfoque' 'cor' | Nenhum
Predefinição: Nenhum text-shadow: .2em .2em prata;
Herda: sim
O valor da propriedade text-shadow é duas ou três medidas (um deslocamento horizontal,

text-shadow: -.3em -.3em prata;
um deslocamento vertical e um raio de desfoque opcional) e uma cor. A FIGURA 12-18
mostra um exemplo de uma declaração de sombra de texto mínima.
FIGURA 12-18. Uma sombra de texto mínima.
h1 {
cor: verde escuro;
text-shadow: .2em .2em prata;
}
h1 {
cor: verde escuro;
text-shadow: -.3em -.3em prata; }
O primeiro valor é um deslocamento horizontal que posiciona a sombra à direita do texto

(um valor negativo puxa a sombra para a esquerda do texto). A segunda medida é um
deslocamento vertical que move a sombra para baixo na quantidade especificada (um valor text-shadow: .2em .2em .1em prata;
negativo move a sombra para cima). A declaração termina com a especificação da cor
(prata). Se a cor for omitida, a cor do texto será usada.
Isso deve dar uma ideia de como as duas primeiras medições funcionam, mas essa sombra sombra de texto: .2em .2em .3em prata;
nítida não parece muito... bem... sombria. O que ele precisa é de uma medição de raio de
desfoque. Zero (0) não é desfoque, e o desfoque fica mais suave com valores mais altos
FIGURA 12-19. Adicionando um raio de desfoque
(FIGURA 12-19). Normalmente, você só precisa mexer nos valores até obter o efeito a um sombreamento de texto.
desejado.
É possível aplicar várias sombras de texto ao mesmo elemento. Se você variar a posição e
as quantidades de desfoque, poderá dar ao texto a aparência de várias fontes de luz.

Sombra de texto
Então vá se divertir com as sombras de texto, mas tome cuidado para não exagerar. Não só as
sombras podem dificultar a leitura do texto, mas adicionar uma sombra a tudo pode diminuir o
desempenho da página (rolagem, interações do mouse etc.), o que é particularmente
problemático para navegadores móveis sem muito poder de processamento. Além disso, tome
cuidado para que seu texto não precise de sombra para ficar visível. Pessoas com navegadores
não compatíveis não verão nada. Meu conselho é usar sombras projetadas como um
aprimoramento de uma maneira que não seja crítica se elas não aparecerem.
O EXERCÍCIO 12-6 lhe dá a chance de experimentar mais propriedades de formatação de

texto para dar um pouco de polimento no menu do Black Goose Bistro.
As outras propriedades do texto

No interesse de economizar espaço e manter este um livro de text-align-last (CSS3) Especifica como a última linha de um bloco
nível introdutório, não dei a essas propriedades o tratamento de texto deve ser justificada quando a propriedade text-align
completo, mas vale a pena mencioná-las. Cada um é rotulado com do elemento é definida para justificar. Por exemplo, muitas vezes
o Nível CSS em que foi introduzido. é preferível ter a última linha justificada à esquerda para o texto
justificado para evitar palavras com espaçamento estranho.
Para obter ainda mais propriedades relacionadas a

texto em desenvolvimento, consulte os seguintes módulos de texto CSS: tab-size (CSS3) Especifica o comprimento do caractere de
• Módulo de Texto CSS Nível 3: tabulação (ponto Unicode 0009) em número de caracteres ou
medida de comprimento.
www.w3.org/TR/css-text-3
• Módulo de Decoração de Texto CSS Nível 3: hífens (CSS3) Fornece controle sobre como o texto é hifenizado.
manual significa que a hifenização acontece apenas quando
www.w3.org/TR/css-text-decor-3
há um hífen adicionado na fonte. auto dá controle ao navegador
• Módulo de Texto CSS Nível 4 (ainda em rascunho de trabalho e
e nenhum desativa a hifenização completamente.
considerado experimental): www.w3.org/TR/css-text-4
overflow-wrap (CSS3) Especifica se os navegadores têm permissão

white-space (CSS2) Especifica como o espaço em branco
para quebrar palavras para ajustar o texto em sua caixa delimitadora.
na origem do elemento é tratado no layout. Por exemplo, o valor
pre preserva os espaços de caracteres e retorna encontrados na
fonte, semelhante ao elemento pre HTML. pontuação pendente (CSS3) Determina
se o sinal de pontuação pode estar fora da caixa de linha do
elemento no início ou no final de uma linha. A pontuação
vertical-align (CSS2) Especifica o alinhamento vertical da linha
suspensa pode fazer com que as margens pareçam mais
de base de um elemento embutido em relação à linha de
organizadas.
base do texto ao redor.
As propriedades a seguir estão na especificação, mas não devem ser
Também é usado para definir o alinhamento vertical do
usadas. Em vez disso, use o atributo dir HTML.
conteúdo em uma célula da tabela (td).
quebra de palavra e quebra de linha (CSS3) Afeta como a direção (CSS3) Especifica a direção na qual o texto é lido:
quebra de texto é calculada em palavras e linhas, da esquerda para a direita (ltr) ou da direita para a
respectivamente, em vários idiomas, incluindo o leste asiático esquerda (rtl).
(chinês, japonês, coreano). unicode-bidi (CSS2) Relacionado a recursos bidirecionais do

Unicode. A Recomendação afirma que permite ao autor
gerar níveis de incorporação dentro do algoritmo de incorporação

text-justify (CSS3) Especifica a maneira de
Unicode. Se você não tem ideia do que isso significa, não se
qual espaço deve ser adicionado dentro e entre as palavras
preocupe. Nem eu.
quando a propriedade text-align no elemento é definida para
justificar.

Sombra de texto
EXERCÍCIO 12-6. Toques finais
Vamos adicionar alguns toques finais ao menu online, menu.html. Observe que eu usei um seletor próximo irmão (h2 + p) para selecionar qualquer
Pode ser útil salvar o arquivo e visualizá-lo no navegador após cada etapa para ver o parágrafo que segue um h2.
efeito de suas edições e ter certeza de que você está no caminho certo. A folha de estilo 6. Em seguida, adicione uma cor mais suave aos nomes dos itens de menu (em dt
finalizada é fornecida na pasta de materiais deste capítulo. elementos). Escolhi “sienna”, um dos nomes do módulo de cores CSS3.
Observe que os elementos fortes nesses dt
1. Primeiro, tenho em mente algumas mudanças globais no elemento corpo . os elementos permanecem em vermelho “tomate” porque a cor aplicada aos
Eu mudei de ideia sobre a família de fontes. Acho que uma fonte serif como elementos fortes substitui a cor herdada por seus pais.
Georgia seria mais sofisticada e apropriada para um menu de bistrô. Vamos
dt
também usar a altura da linha
{ peso da fonte:
propriedade para abrir as linhas de texto e torná-las mais fáceis de ler.
negrito; cor: siena;}
Faça essas atualizações na regra de estilo do corpo , conforme mostrado:
7. Finalmente, para dar um chute, adicione uma sombra sob o título h1 . Você pode
body brincar um pouco com os valores para ver como funciona. Acho que parece um
{ font-family: Georgia, serif;
pouco desajeitado contra um fundo branco, mas quando você tem uma imagem de
tamanho da fonte: pequeno;
fundo padronizada, às vezes uma sombra fornece o pequeno soco que você precisa
altura da linha: 1,75em;
para fazer o texto se destacar. Observe como os valores das sombras são pequenos
}
- um pouco já ajuda muito!
2. Também quero redesenhar a seção “info” do documento.
Remova a configuração de cor azul-petróleo excluindo toda essa regra. Feito isso,
deixe o h1 verde oliva e o parágrafo no cabeçalho cinza. Adicione declarações de h1
cores às regras existentes:
{ fonte: bold 1.5em "Marko One", Georgia, serif; cor:
azeitona;
#info { cor: verde-azulado; } /* deletar */ text-shadow: .05em .05em .1em lightslategray;}
h1
E terminamos! A FIGURA 12-20 mostra como o menu se parece
{ fonte: bold 1.5em "Marko One", Georgia, serif; cor:
azeitona;} agora — uma melhoria em relação à versão sem estilo, e usamos apenas
#info p propriedades de texto e cor para fazer isso. Observe que não tocamos em um único
{ estilo da fonte: caractere da marcação do documento no processo. Essa é a beleza de manter o estilo
itálico; cor: cinza;} separado da estrutura.
3. Em seguida, para imitar um menu de restaurante sofisticado, vou centralizar

alguns elementos-chave na página com a propriedade text-align .
Escreva uma regra com um seletor agrupado para centralizar os títulos e a seção
“info”:
h1, h2, #info { text-

align: center;}
4. Quero tornar os títulos h2 “Aperitivo” e “Pratos principais” mais atraentes. Em vez do
tipo grande e em negrito, usarei todas as letras maiúsculas, espaçamento extra
entre letras e cores para chamar a atenção para os títulos. Aqui está a nova regra
para elementos h2 que inclui todas essas mudanças:
h2
{ tamanho da fonte: 1em;
espaçamento entre letras: .5em;
cor: azeitona;}
5. Estamos muito próximos agora; apenas mais alguns ajustes para aqueles
parágrafos logo após os títulos h2 . Vamos centralizá-los também e torná-los em
itálico:
h2 + p
{ text-align: center;
estilo da fonte: itálico;} FIGURA 12-20. O menu formatado do Black Goose Bistro.

Alterando marcadores e números da lista
ALTERANDO AS MARCAS E NÚMEROS DA LISTA
Antes de encerrarmos este capítulo sobre propriedades de texto, quero mostrar alguns
ajustes que você pode fazer em listas numeradas e com marcadores. Como você sabe, os
navegadores inserem automaticamente marcadores antes de itens de lista não ordenados e
números antes de itens em listas ordenadas (os marcadores de lista). Na maioria das vezes,
a renderização desses marcadores é determinada pelo navegador. No entanto, o CSS
fornece algumas propriedades que permitem aos autores escolher o tipo e a posição do
marcador ou desativá-los completamente.
Escolhendo um marcador
Aplique a propriedade list-style-type ao elemento ul, ol ou li e selecione o tipo de marcador

NOTA que aparece antes de cada item da lista (consulte a Nota).
Esta seção documenta os tipos de estilo de

tipo de estilo de lista
lista CSS2.1 que são bem suportados nos
navegadores atuais. CSS3 estende a Valores: nenhum | disco | círculo | quadrado | decimais | zero à esquerda | alfa
inferior | alfa superior | baixo-latim | latim superior | baixo-romano | alto-romano |
funcionalidade de marcador mostrada aqui,
grego inferior
incluindo um método para os autores definirem
seus próprios estilos de lista, permitindo a Predefinição: disco
numeração em vários idiomas (www.w3.org/TR/

Aplica-se a: ul, ol e li (ou elementos cujo valor de exibição é item de lista)
css3-lists/).
Herda: sim
Na maioria das vezes, os desenvolvedores usam a propriedade list-style-type com seu valor
definido como none para remover marcadores ou números completamente. Isso é útil quando
você está usando a marcação de lista como base para um menu de navegação horizontal ou
as entradas em um formulário da web. Você pode manter a semântica, mas se livrar dos
marcadores irritantes.
Os valores de disco, círculo e quadrado geram formas de marcadores, assim como os

NOTA
navegadores vêm fazendo desde o início da própria web (FIGURA 12-21).
CSS3 introduz o @counter-style Infelizmente, não há como alterar a aparência (tamanho, cor, etc.) dos marcadores gerados,
regra, que fornece tipos de marcadores de caixa, então você fica preso à renderização padrão do navegador.
cheque, diamante e traço , bem como a capacidade
de especificar seus próprios marcadores quando um disco círculo quadrado
predefinido não funcionar. Consulte a especificação
para obter detalhes.
FIGURA 12-21. O tipo de estilo de lista valoriza disco, círculo e quadrado.
As palavras-chave restantes (TABELA 12-1) especificam vários estilos de numeração e

letras para uso com listas ordenadas.

TABELA 12-1. Sistema de letras e numeração (CSS2.1)
Palavra-chave Sistema
Função de exibição do item de lista
decimal 1, 2, 3, 4, 5…
Você deve ter notado que as
decimal-à esquerda- 01, 02, 03, 04, 05…
propriedades de estilo de lista se aplicam
zero-alfa inferior-alfa a, b, c, d, e... a “elementos cujo valor de exibição é item de lista”.
A especificação CSS2.1 permite que
superior A, B, C, D, E...
qualquer elemento funcione como um item
baixo-latim a, b, c, d, e… (o mesmo que alfa inferior) de lista, definindo sua propriedade display
como item de lista. Esta propriedade pode
latim superior A, B, C, D, E… (o mesmo que alfa superior)
ser aplicada a qualquer elemento HTML ou
baixo-romano eu, ii, iii, iv, v... elementos em outras linguagens XML. Por
exemplo, você pode marcar ou numerar
alto-romano I,II,III,IV,V…
automaticamente uma série de parágrafos
grego inferior ÿ, ÿ, ÿ, ÿ, ÿ… definindo a propriedade de exibição de
elementos de parágrafo (p) como item de
lista, conforme mostrado neste exemplo:
Posição do marcador
p.letrado {
Por padrão, o marcador fica fora da área de conteúdo do item da lista, sendo exibido display: item de lista;
tipo de estilo de lista: alfa superior;
como um recuo deslocado. A propriedade list-style-position permite que você puxe o }
marcador dentro da área de conteúdo para que ele seja executado no conteúdo da lista.
posição-estilo-lista
Valores: dentro | fora | pendurado
Predefinição: fora
Herda: sim
fora
Apliquei uma cor de fundo verde claro aos itens da lista
na FIGURA 12-22 para revelar os limites de suas caixas
de área de conteúdo.
Você pode ver que quando a posição é definida para o

lado externo (superior), os marcadores ficam fora da
área de conteúdo.
li {cor de fundo: #F99;}

ul#fora {list-style-position: outside;} lado de dentro
ul#inside {list-style-position: inside;}
CSS3 adiciona o valor de deslocamento para a posição do

estilo de lista. é semelhante ao interior, mas os marcadores
aparecem do lado de fora e adjacentes à borda esquerda da
área sombreada.
FIGURA 12-22. A propriedade list-style-position .

Faça suas próprias balas
Você também pode usar sua própria imagem como um marcador usando a imagem de estilo de lista
propriedade.
imagem-estilo-lista
Valores: url(local) | Nenhum
Herda: sim
O valor da propriedade list-style-image é o URL da imagem que você deseja usar como marcador. O tipo
de estilo de lista é definido como disco como backup caso a imagem não seja exibida ou a propriedade
não seja suportada pelo navegador ou outro agente do usuário. O resultado é mostrado na FIGURA 12-23.
ul {
tipo de estilo de lista: disco;
list-style-image: url(/images/rainbow.gif);
lista-estilo-posição: fora;
}
FIGURA 12-23. Usando uma imagem como marcador.
CSS DICA
Há uma propriedade abreviada de estilo de lista que combina os valores de tipo, posição e imagem, em qualquer
ordem. Por exemplo:
ul
{ estilo de lista: url(/images/rainbow.gif) disco externo; }
Como para todas as abreviações, tome cuidado para não substituir as propriedades de estilo de lista definidas anteriormente
na folha de estilo.
Uau! Que capítulo! Começamos examinando as propriedades para especificar fontes e formas de caracteres,
seguidas de uma revisão de todas as configurações e efeitos de nível de texto. Você também tem que usar
seletores descendentes, ID e classe e olhou um pouco mais de perto a especificidade. Completamos com
as propriedades disponíveis para adicionar algum estilo às listas. Eu não espero que você tenha todas essas
propriedades memorizadas (embora muitas se tornem uma segunda natureza quanto mais você praticar),
mas vamos ver como você se sai nas questões a seguir.

Teste-se
TESTE-SE
É hora de ver o quão bem você entende as propriedades de fonte e seletores apresentados
neste capítulo. Verifique o Apêndice A para as respostas se você ficar preso.
1. Combine a propriedade de estilo com as amostras de texto na FIGURA 12-24.
uma.
_______ {tamanho da fonte: 1,5em;}
b. _______ {text-transform: capitalizar;}
c. _______ {text-align: right;}
d. _______ {font-family: Verdana; tamanho da fonte: 1.5em;}
e. _______ {espaçamento entre letras: 3px;}
f. _______ {fonte: negrito itálico 1.2em Verdana;}
g. _______ {text-transform: maiúsculas;}
h. _______ {text-indent: 2em;}
eu.
_______ {variante de fonte: versalete;}
fonte e tamanho padrão
FIGURA 12-24. Amostras de texto estilizado.

Teste-se
2. Aqui está uma chance de praticar um pouco a escrita de seletores. Usando o diagrama mostrado
na FIGURA 12-25, escreva as regras de estilo que tornam cada um dos elementos descritos
aqui vermelho (cor: vermelho;). Escreva o seletor da forma mais eficiente possível.
uma. Todos os elementos de texto no documento
b. elementos h2
c. h1 elementos e todos os parágrafos
d. Elementos pertencentes à classe especial
e. Todos os elementos na seção “intro”
f. elementos fortes na seção “principal”
g. Crédito extra: apenas o parágrafo que aparece após um h2
html
cabeça corpo
p classe="especial" ul h2 p h2 p classe="especial"
img forte li li li Forte
FIGURA 12-25. Estrutura do documento de exemplo.

Revisão CSS: Propriedades de fonte e texto
REVISÃO CSS: FONTE E TEXTO

PROPRIEDADES
Neste capítulo, abordamos as propriedades usadas para formatar elementos de texto.

Aqui está um resumo em ordem alfabética.
Propriedade Descrição
cor Especifica a cor de primeiro plano (texto e bordas) para um elemento
direção Indica se o texto é lido da esquerda para a direita ou da direita para a

esquerda
Fonte Uma propriedade abreviada que combina propriedades de fonte
família de fontes Especifica um tipo de letra ou família de fontes genéricas
configurações de recursos de Permite acesso a recursos OpenType menos usados
fontes kerning de fontes Controla como os navegadores implementam dados de kerning

(espaço entre caracteres)
substituição de idioma de fonte Controla o uso de glifos específicos do idioma
tamanho da fonte Especifica o tamanho da fonte
ajuste de tamanho da fonte Corresponde à altura x de uma fonte de fallback com a fonte especificada
esticar a fonte Seleciona uma fonte condensada, normal ou estendida
estilo de fonte Especifica fontes itálicas ou oblíquas
fonte-síntese Controla se um navegador pode simular fontes em negrito ou itálico
variante de fonte Especifica uma fonte em versalete
font-variant-alternates Seleciona versões alternativas de glifos de caracteres
font-variant-caps Seleciona versaletes e alternativas semelhantes quando

disponíveis
font-variant-east-asian Seleciona glifos alternativos em chinês, japonês e

coreano
font-variant-ligatures Seleciona ligaduras para certos pares de letras quando disponíveis
fonte-variante-numérico Seleciona glifos de números alternativos
font-variant-position Seleciona glifos de caracteres subscritos ou sobrescritos
espessura da fonte Especifica o negrito da fonte
pontuação pendente Indica se a pontuação pode ficar fora da caixa de conteúdo
Controla como o texto é hifenizado
espaçamento entre letras hífens Insere espaço entre as letras
quebra de linha Descreve regras para quebrar linhas
altura da linha Indica a distância entre as linhas de base das linhas de texto vizinhas

Revisão CSS: Propriedades de fonte e texto
lista-estilo-imagem lista- Especifica uma imagem a ser usada como marcador de lista
estilo-posição lista-estilo-tipo Coloca um marcador de lista dentro ou fora da área de conteúdo
Seleciona o tipo de marcador para itens de lista
overflow wrap Especifica se o navegador pode quebrar linhas dentro de palavras

para evitar estouro
tamanho da guia
Especifica o comprimento de um caractere de tabulação
alinhamento de texto Indica o alinhamento horizontal do texto
text-align-last Especifica como a última linha do texto justificado é alinhada
decoração de texto Especifica sublinhados, overlines e linhas através
recuo de texto Especifica a quantidade de recuo da primeira linha em um bloco
justificar texto Indica como o espaço é distribuído no texto justificado
sombra de texto Adiciona uma sombra sob o texto
transformação de texto Altera a capitalização do texto quando ele é exibido
unicode-bidi Funciona com algoritmos bidirecionais Unicode
alinhamento vertical Ajusta a posição vertical dos elementos embutidos em relação à linha
de base
espaço em branco Especifica como o espaço em branco na fonte é exibido
quebra de palavras Especifica se as linhas das palavras devem ser quebradas
espaçamento entre palavras Insere espaço entre as palavras
quebra de palavras Indica se o navegador pode quebrar linhas dentro de palavras para
evitar estouro (o mesmo que overflow-wrap)

CAPÍTULO
CORES E 13
FUNDOS
MAIS SELECTOR E
FOLHAS DE ESTILO EXTERNAS
Se você tivesse visto a web em 1993, teria achado que era um assunto triste para os NESTE CAPÍTULO
padrões de hoje - todos os fundos eram cinza e todo o texto era preto. Então veio o
Nomes de cores CSS
Netscape Navigator e, com ele, um punhado de atributos HTML que permitiam um
controle rudimentar (mas bem-vindo) sobre as cores e planos de fundo das fontes. Por Valores de cores RGB
anos, nós fizemos isso. Mas, felizmente, agora temos propriedades de folha de estilo que
estabeleceram esses atributos de apresentação não mencionáveis Cores de primeiro e segundo plano
descansar.
Vamos cobrir muito terreno neste capítulo. Claro, apresentarei todas as propriedades Imagens de plano de fundo lado a lado
para especificar cores e planos de fundo. Este capítulo também completa sua coleção de
Gradientes de cores
tipos de seletor e mostra como criar uma folha de estilo externa. Nossa primeira tarefa,
no entanto, é explorar as opções para especificar cores em CSS, incluindo uma cartilha Seletores de pseudoclasse,
sobre a natureza da cor em monitores de computador. pseudoelemento e atributo
Folhas de estilo externas
ESPECIFICAÇÃO DE VALORES DE COR
Existem duas maneiras principais de especificar cores em folhas de estilo - com um

nome de cor predefinido, como temos feito até agora:
cor vermelha; cor: azeitona; cor azul;
Ou, mais comumente, com um valor numérico que descreve uma determinada cor RGB
(o modelo de cores em monitores de computador). Você pode ter visto valores de cor
que se parecem com estes:
cor: #FF0000; cor: #808000; cor: #00F;
Chegaremos a todos os detalhes da cor RGB em um momento, mas primeiro, uma seção
curta e doce sobre os nomes de cores padrão.
303
Especificando valores de cores
Nomes de cores
A maneira mais intuitiva de especificar uma cor é chamá-la pelo nome. Infelizmente, você não
pode inventar qualquer nome de cor e esperar que funcione. Tem que ser uma das palavras-
chave de cor predefinidas na Recomendação CSS. CSS1 e CSS2 adotaram os 16 nomes de
cores padrão originalmente introduzidos no HTML 4.01. CSS2.1 lançado em laranja para um
total de 17 (FIGURA 13-1).
CSS3 adiciona suporte para o conjunto estendido de 140 nomes de cores (bastante fantasiosos).
FATO ENGRAÇADO Agora podemos especificar nomes como burlywood, peachpuff, oldlace e meu favorito de
longa data, papayawhip! As cores estendidas são mostradas na FIGURA 13-2, mas se você
Os nomes de cores estendidos,
também conhecidos como nomes de cores quiser uma visão mais precisa, aponte seu navegador para learningwebdesign.
X11, foram originalmente fornecidos com o X com/colornames.html. CSS3 também adicionou a palavra-chave transparente , que pode ser
Window System for Unix. usada com qualquer propriedade que tenha um valor de cor.
Os nomes de cores são fáceis de usar - basta colocar um no lugar como o valor de qualquer
propriedade relacionada à cor:
cor: prata; cor

de fundo: cinza; cor da
borda inferior: cerceta;
preto cinza prata branco

#000000 #808080 #C0C0C0 #FFFFFF
marrom vermelho
roxo fúcsia
#800000 #FF0000 #800080 #FF00FF
verde Lima amarelo

#008000 #00FF00 azeitona #808000 #FFFF00
azul aqua
marinha #000080 #0000FF cerceta #008080 #00FFFF
laranja (CSS 2.1)

#FFA500
FIGURA 13-1. Os 17 nomes de cores padrão em CSS2.1. (Observe que “gray” deve
ser escrito com um “a”.)

FIGURA 13-2. Os 140 nomes de cores estendidos em CSS3. Tenha em mente que estes parecem
bastante diferentes em uma tela.
13. Cores e Fundos 305

Valores de cores RGB
Os nomes são fáceis, mas como você pode ver, eles são limitados. De longe, a maneira mais
comum de especificar uma cor é pelo seu valor RGB. Ele também oferece milhões de cores
para você escolher.
Para aqueles que não estão familiarizados com a forma como os computadores lidam com
cores, começarei com o básico antes de pular para a sintaxe CSS.
Uma palavra sobre a cor RGB
Os computadores criam as cores que você vê em um monitor combinando três cores de luz:
vermelho, verde e azul. Isso é conhecido como o modelo de cores RGB. Você pode fornecer
Por que 255?
receitas (de tipos) para cores informando ao computador quanto de cada cor deve ser
Na cor RGB verdadeira, 8 misturado. A quantidade de luz em cada “canal” de cor é normalmente descrita em uma escala
bits de informação são dedicados a cada cor
de 0 (nenhuma) a 255 (explosão total) , embora também possa ser fornecido em porcentagem.
canal. Porque 8 bits podem descrever
Quanto mais próximos os três valores estiverem de 255 (100%), mais próxima a cor resultante
256 tons (28 = 256), as cores são
medidas em uma escala de 0 a 255. ficará do branco (FIGURA 13-3). Quer saber por que a escala é de 0 a 255? Veja o “Por que
255?” Barra Lateral.
Qualquer cor que você vê em seu monitor pode ser descrita por uma série de três números:
um valor vermelho, um valor verde e um valor azul. Essa é uma das maneiras pelas quais os
editores de imagem, como o Adobe Photoshop, acompanham as cores de cada pixel em uma
imagem. Com o sistema de cores RGB, uma agradável lavanda pode ser descrita como R:200,
G:178, B:230.
Juntas, 255 cores em cada canal podem definir cerca de 16,7 milhões de combinações de
cores. Este espaço de cores de milhões de cores é conhecido como Truecolor. Existem
diferentes maneiras de codificar essas cores (ou seja, convertê-las em bytes para
computadores), e a web usa uma codificação chamada sRGB. Portanto, se você vir uma
opção para salvar imagens como sRGB em um programa gráfico, clique em Sim.
O modelo de cores RGB
R: 255 R: 128 R: 0 R: 200

(100%) (50%) (0%) (78%)
G: 255 B: 255 G: 128 B: 128 G: 0 B: 0 G: 178 B: 230

(100%) (100%) (50%) (50%) (0%) (0%) (70%) (90%)
RGB: 255, 255, 255 RGB: 128, 128, 128 RGB: 0, 0, 0 RGB: 200, 178, 230
branco cinzento Preto lavanda agradável
FIGURA 13-3. Os computadores criam cores em um monitor misturando diferentes quantidades

de luz vermelha, verde e azul (portanto, RGB). A cor no meio de cada diagrama mostra o que
acontece quando os três canais de cores são combinados. Quanto mais luz houver em cada
canal (ou seja, quanto maior o valor numérico), mais próxima a combinação estará do branco.

Escolhendo uma cor
Há várias maneiras de escolher uma cor e encontrar seus valores de cor RGB. Uma opção
rápida e fácil é acessar o Google.com e pesquisar “seletor de cores” e voilà—um seletor de
A Paleta da Web
cores completo (FIGURA 13-4, à esquerda)! Se você costuma manter um programa de edição
de imagens como o Adobe Photoshop aberto e à mão, pode usar seu seletor de cores Você pode encontrar os termos paleta da
Web ou cores seguras para a Web em
integrado (FIGURA 13-4, à direita).
ferramentas de produção na Web, como
Dreamweaver ou Photoshop. A web
começou nos dias em que os monitores de
computador normalmente podiam exibir
apenas 256 cores por vez. A paleta da web
era uma coleção de 216 cores que podiam
ser exibidas nos sistemas operacionais
Windows e Macintosh sem pontilhamento
e, portanto, eram “seguras” para a web.
Essa era está muito atrás de nós, assim
como a necessidade de restringir nossas
escolhas de cores à paleta da web.
Seletor de cores do Google Seletor de cores do Photoshop
FIGURA 13-4. Seletores de cores como o do Google.com (pesquise “seletor de

cores”) e no Photoshop.
Os seletores de cores do Google e do editor de imagens mostram como a cor selecionada

seria expressa em vários modelos de cores (para revelar os valores no Google, clique em
"Mostrar valores de cores" abaixo do seletor). RGB é o mais comum para web design, então
estamos focando nossa atenção nele. HSL (Hue Saturation Lightness or Luminosity) é outra
opção para especificar cores em folhas de estilo, e veremos isso em breve (consulte Nota).
CMYK (Cyan Magenta Yellow black) é usado principalmente para mídia de impressão, então NOTA
você não o usará, exceto talvez para traduzir cores de impressão para seus equivalentes de
HSL não é o mesmo que HSB (Hue
tela.
Saturation Brightness), outro modelo de
Quando você seleciona uma cor do espectro no seletor de cores, os valores de vermelho, cor fornecido no Photoshop e em outros
verde e azul são listados, conforme indicado na FIGURA 13-4. E olhe ao lado do símbolo # - editores de imagem.
esses são os mesmos três valores, convertidos em equivalentes hexadecimais para que
estejam prontos para serem usados em uma folha de estilo. Vou explicar os valores
hexadecimais de seis dígitos em um momento.
Escrevendo valores RGB em folhas de estilo
CSS permite que valores de cores RGB sejam especificados em vários formatos. Voltando a
essa agradável lavanda, poderíamos adicioná-la a uma folha de estilo listando cada valor em
uma escala de 0 a 255:
cor: rgb(200, 178, 230);

Você também pode listá-los como valores percentuais, embora isso seja menos comum:
cor: rgb(78%, 70%, 90%);

Ou você pode fornecer a versão hexadecimal de seis dígitos que vimos nos seletores de cores.
Esses seis dígitos representam os mesmos três valores RGB, exceto que foram convertidos em
equivalentes hexadecimais (ou hex para abreviar).
Observe que os valores RGB hexadecimais são precedidos pelo símbolo # e não requerem a
NUM RELANCE
notação rgb() mostrada nos exemplos anteriores. Elas podem ser maiúsculas ou minúsculas,
mas é recomendável que você seja consistente:
Especificando valores RGB
Existem quatro formatos para fornecer

cor: #C8B2E6;
Valores RGB em CSS:
Existe uma última maneira abreviada de especificar valores de cores hexadecimais. Se o seu
rgb(255, 255, 255) valor for composto por três pares de dois dígitos ou letras, como
rgb(100%, 100%, 100%) cor: #FFCC00; ou cor: #993366;

#FFFFFF você pode condensar cada par em um dígito ou letra. É mais fácil digitar e ler, e reduz um pouco
#FFF o tamanho do arquivo. Estes exemplos são equivalentes aos que acabamos de listar:
Todos esses exemplos especificam branco.
cor: #FC0; ou cor: #936;
Sobre valores hexadecimais
É hora de esclarecer o que está acontecendo com essa sequência de caracteres de seis dígitos.
O que você está vendo é na verdade uma série de três números de dois dígitos, um para
vermelho, verde e azul. Mas em vez de decimal (base-10, o sistema que estamos acostumados),
esses valores são escritos em hexadecimal, ou base-16. FIGURA 13-5
mostra a estrutura do valor RGB hexadecimal.
#RRGGBB Valores RGB hexadecimais

deve ser precedido pelo
# símbolo.
Hex Hex Hex

VERMELHO valor AZUL
valor VERDE valor
FIGURA 13-5. Os valores RGB hexadecimais são compostos por três números de dois dígitos, um
para vermelho, um para verde e um para azul.
O sistema de numeração hexadecimal usa 16 dígitos: 0–9 e A–F (para representar as

GORJETA
quantidades 10–15). A FIGURA 13-6 mostra como isso funciona. O sistema hexadecimal é
amplamente utilizado na computação porque reduz o espaço necessário para armazenar certas
Valores hexadecimais úteis
informações. Por exemplo, os valores RGB são reduzidos de três para dois dígitos depois de
Branco = #FFFFFF ou #FFF
convertidos em hexadecimal.
(o equivalente a 255.255.255)
Preto = #000000 ou #000 Agora que a maioria dos softwares gráficos e de desenvolvimento da Web fornecem acesso
(o equivalente a 0,0,0) fácil a valores de cores hexadecimais (como vimos na FIGURA 13-4), não há muita necessidade
de traduzir os valores RGB para hexadecimais, como precisávamos fazer antigamente . Se você
precisar, há muitos conversores de decimal para hexadecimal online.

Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hex 0 1 2 3 4 5 6 7 8 9 UMA B C D E F
O número decimal 32 O número decimal 42
00
é representado como é representado como
dezesseis
Lugar, colocar
uns
Lugar, colocar
20
2 dezesseis e 0 unidades
2A
2 dezesseis e 10 unidades
FIGURA 13-6. O sistema de numeração hexadecimal é de base 16.
Cor RGBa
A cor RGBa permite especificar uma cor e torná-la tão transparente ou opaca
quanto você desejar. O “a” em “RGBa” significa alfa, que é um canal adicional
que controla o nível de transparência em uma escala de 0 (totalmente As versões 8 e anteriores do Internet Explorer
transparente) a 1 (totalmente opaco). Veja como fica escrito em uma regra de estilo: não oferecem suporte a cores RGBa, portanto,
se uma porcentagem significativa de seus
cor: rgba(0, 0, 0, .5);
usuários tiver esses navegadores, convém
Os primeiros três valores entre parênteses são valores RGB antigos regulares, neste caso fornecer um substituto. Escolha uma cor RGB
criando a cor preta. O quarto valor, 0,5, é o nível de transparência. Então essa cor é preta que se aproxime da aparência que você está
procurando e liste-a primeiro na regra de
com 50% de transparência. Isso permite que outras cores ou padrões de fundo apareçam
estilo. O IE ignora o valor RGBa e os
ligeiramente (FIGURA 13-7).
navegadores de suporte substituirão a cor
opaca quando chegarem à segunda declaração.
cor: rgba(0, 0, 0, .1); h1 {

cor: rgb(120, 120, 120);
cor: rgba(0, 0, 0, .5); cor: rgba(0, 0, 0, .5);
}
cor: rgba(0, 0, 0, 1);
FIGURA 13-7. Títulos com vários níveis de transparência usando valores RGBa.
Cor HSL
CSS3 introduziu a capacidade de especificar cores por seus valores HSL: Matiz
(cor), Saturação e Luminosidade (ou Luminosidade). Neste sistema, as cores são
As cores HSL e HSLa não são compatíveis com
distribuídas em torno de um círculo na ordem do arco-íris, com o vermelho na
o Internet Explorer versões 8 e anteriores,
posição superior (12 horas). Os valores de matiz são então medidos em graus ao
portanto, use um fallback se precisar oferecer
redor do círculo: vermelho em 0°/360°, verde em 120° e azul em 240°, com outras suporte a esses navegadores.
cores no meio. Saturação é um valor percentual de 0% (cinza) a 100% (cor em
explosão total). A luminosidade (ou brilho) também é um valor percentual de 0%
(mais escuro) a 100% (mais claro).

A FIGURA 13-8 mostra um matiz, ciano (localizado a 180° na roda) com seus níveis de
saturação e luminosidade associados. Você pode ver por que algumas pessoas acham esse
sistema mais intuitivo de usar, porque uma vez que você trava em um tom, é fácil torná-lo mais
forte, mais escuro ou mais claro, aumentando ou diminuindo os valores percentuais. Os valores
RGB não são nada intuitivos, embora alguns designers experientes desenvolvam um sentimento
por eles.
MATIZ: 180° (Ciano)
SATURAÇÃO
100% 75% 50% 25% 0%
100%
75%
50%
25%
FIGURA 13-8. Um matiz no modelo de cores HSL, com seus valores de saturação e
luminosidade associados.
Em CSS, os valores HSL são fornecidos como o valor de matiz e duas porcentagens. Eles
nunca são convertidos em valores hexadecimais, como pode ser feito para RGB. Aqui está
a lavanda da FIGURA 13-3 , como seria especificada usando HSL:
cor: hsl(265, 51%, 80%);
Escolhendo a cor HSL
Existem vários seletores de cores HSL online. No seletor de cores do Google, clique em
"Mostrar valores de cores" abaixo do painel para revelar os valores HSL da cor selecionada.
Aqui estão algumas outras ferramentas interessantes que vale a pena conferir:
• Um excelente seletor de cores HSL por Brandon Mathis (hslpicker.com/)
• Seletor de cores HSL (www.workwithcolor.com/hsl-color-picker-01.htm)
• HSLa Explorer por Chris Coyier em CSS-Tricks (css-tricks.com/examples/

HSLaExplorer/)
AVISO
Esteja ciente de que o modelo de cores HSB listado no seletor de cores do Photoshop não é o mesmo que
HSL e não pode ser usado para CSS.

Cor do primeiro plano
Cor HSLa
Assim como no RGB, você pode adicionar um canal alfa para definir a transparência das
cores HSL, resultando no modelo de cores HSLa. Quanto ao RGBa, o quarto valor é o grau
de transparência em uma escala de 0 (totalmente transparente) a 1 (totalmente opaco).
Este exemplo especifica uma cor verde primavera que é 65% opaca:
cor: hsla(70, 60%, 58%, 0,65);
Resumindo Valores de Cores

Levamos algumas páginas para chegar aqui, mas o processo de escolha e especificação
de cores nas folhas de estilo é realmente fácil:
• Escolha um dos nomes de cores predefinidos,
ou
• Use um seletor de cores para selecionar uma cor e copiar os valores RGB (de
preferência os valores hexadecimais de seis dígitos). Coloque esses valores na regra
de estilo usando um dos quatro formatos de valor RGB e pronto. Ou você pode usar o
HSL, se parecer mais fácil para você.
Há mais uma maneira colorida de preencher um elemento, e são os gradientes (cores que
desvanecem de um matiz para outro), mas vou guardá-los para o final deste capítulo.
COR DO PRIMEIRO PLANO

Agora que sabemos como escrever valores de cores, vamos às propriedades relacionadas
a cores. Você pode especificar as cores do primeiro plano e do plano de fundo para O primeiro plano de um
elemento consiste em sua
qualquer elemento HTML. Há também propriedades de cores de borda que aceitam
valores de cores, mas chegaremos a elas no Capítulo 14, Pensando dentro da caixa. texto e borda (se um for
especificado).
O primeiro plano de um elemento consiste em seu texto e borda (se houver uma
especificada). Você especifica uma cor de primeiro plano com a propriedade color , como
vimos no último capítulo quando a implementamos para dar um toque especial ao texto.
Aqui estão os detalhes para a propriedade de cor mais uma vez.
cor
Valores: valor da cor (nome ou numérico)
Predefinição: depende do navegador e das preferências do usuário
Herda: sim
No exemplo a seguir, o primeiro plano de um elemento blockquote é definido como verde

com um nome de cor. Você pode ver que aplicar a propriedade color ao elemento
blockquote significa que a cor é herdada pelos elementos p e em .

Cor de fundo
contém (FIGURA 13-9). A borda tracejada grossa ao redor de toda a cotação do

bloco também é verde; no entanto, se aplicarmos uma propriedade border-color a
esse mesmo elemento, essa cor substituirá a configuração de primeiro plano verde.
A REGRA DE ESTILO
blockquote
{ borda: 4px tracejada;
cor verde;
}
A MARCAÇÃO
<blockquote>
Na latitude do centro da Nova Inglaterra, os repolhos não são seguros... </blockquote>
FIGURA 13-9. Aplicando uma cor ao primeiro plano de um elemento.
COR DE FUNDO
Use background-color para aplicar uma cor de fundo a qualquer elemento.
cor de fundo
Valores: valor da cor (nome ou numérico) | transparente
Predefinição: transparente
Herda: não
Uma cor de fundo preenche a tela atrás do elemento que inclui a área de conteúdo e
qualquer preenchimento (espaço extra) adicionado ao redor do conteúdo, estendendo-
se por trás da borda até a borda externa. Vamos ver o que acontece quando usamos
a propriedade background-color para tornar o plano de fundo da mesma amostra de
blockquote verde claro (FIGURA 13-10):
blockquote
{ borda: 4px tracejada;
cor verde;
cor de fundo: #c6de89;
}

Cor de fundo
FIGURA 13-10. Adicionando uma cor de fundo verde claro ao bloco de citação de amostra.
Como esperado, a cor de fundo preenche a área atrás do texto, até a borda.
Observe atentamente as lacunas na borda e você verá que a cor de fundo vai para UM IMPORTANTE
EXCEÇÃO
a borda externa. Mas é aí que o pano de fundo para; se aplicarmos uma margem
ao redor desse elemento, o plano de fundo não se estenderá até a margem. Quando você aplica um plano de fundo ao
Revisitaremos todos esses componentes de um elemento quando falarmos sobre elemento body (ou mais genericamente, no
o modelo de caixa CSS. Por enquanto, apenas saiba que, por padrão, se sua borda html raiz ) , ele é tratado de forma especial.
tiver lacunas, o plano de fundo será exibido. Ele não é preso à caixa, mas se estende
para cobrir toda a
Vale a pena notar que as cores de fundo não herdam, mas como a configuração janela de exibição.
de fundo padrão para todos os elementos é transparente, a cor de fundo do pai é

exibida por meio de seus elementos descendentes. Por exemplo, você pode alterar
a cor de fundo de uma página inteira aplicando a propriedade de cor de fundo ao
elemento do corpo e a cor será exibida em todos os elementos da página (consulte
“Uma exceção importante”).
Além de definir a cor de toda a página, você pode alterar a cor de fundo de
qualquer elemento, tanto no nível do bloco (como a citação em bloco mostrada no
exemplo anterior) quanto na linha. Neste exemplo, usei a cor Para colorir o plano de
e propriedades de cor de fundo para destacar uma palavra marcada como um fundo de toda a página,
termo “glossário”. Você pode ver na FIGURA 13-11 que a cor de fundo preenche a aplique a propriedade
pequena caixa criada pelo elemento dfn embutido. background-color ao
A REGRA DE ESTILO elemento body.
.glossário {
cor: #0378a9; /* azul */
cor de fundo: amarelo; }
A MARCAÇÃO
<p>Toda variedade de repolho teve sua origem no repolho selvagem de

Europa (<dfn class="glossary"><i>Brassica oleracea</i></dfn>)</p>
FIGURA 13-11. Aplicando a propriedade background-color a um elemento embutido.

Recortando o fundo
RECORDANDO O FUNDO
Tradicionalmente, a área de pintura de fundo (a área na qual as cores de preenchimento são
aplicadas) de um elemento se estende até a borda externa da borda, como vimos na FIGURA
DICA DE DESIGN 13-10. CSS3 introduziu a propriedade background-clip para dar aos designers mais controle
sobre onde a área de pintura começa e termina.
Usando cores
Aqui estão algumas dicas rápidas relacionadas clipe de fundo
ao trabalho com cores:
Valores: caixa-borda | caixa de enchimento | caixa de conteúdo
• Limite o número de cores que você usa em
Predefinição: caixa de borda
uma página. Nada cria caos visual mais
rápido do que muitas cores. Aplica-se a: todos os elementos
Eu costumo escolher um dominante
Herda: não
cor e uma cor de destaque. Também
posso usar alguns tons de cada um, mas
O valor padrão da caixa de borda desenha a área de pintura para a borda externa da borda,
resisto a adicionar muitos tons diferentes.
como vimos. A FIGURA 13-12 mostra que a caixa de preenchimento inicia a área de pintura
na borda externa da área de preenchimento para o elemento (e na borda interna da borda).
• Ao especificar uma cor de primeiro e segundo
Por fim, content-box permite que o plano de fundo preencha apenas a área de conteúdo do
plano, certifique-se de que haja contraste
adequado. As pessoas tendem a preferir ler elemento.
textos escuros em fundos muito claros online.
Não posso deixar de sentir que estou estragando um pouco a surpresa do modelo da caixa
• Lembre-se de usuários daltônicos ao
de elementos e suas propriedades aqui, já que estava guardando isso para o próximo capítulo.
selecionar cores. O artigo de Chris Coyier
Eu adicionei algum preenchimento (espaço entre o conteúdo e a borda) para que os efeitos
“Noções básicas de acessibilidade: testando
sua página para daltonismo” (css-tricks.com/ das configurações do clipe fiquem mais aparentes.
bloco de citação {
access-basics-testing-your page-for- preenchimento: 1em; borda: 4px tracejada; cor verde; cor de fundo: #C6DE89;}
color-blindness/) é um bom lugar para }
começar a pesquisar estratégias para
um design amigável para daltônicos.
clipe de fundo: caixa de borda;

A cor contribui tanto para a
estética e usabilidade de um site, por isso é

importante acertar. O livro Color Accessibility
Workflows (A Book Apart) de Geri Coady
fornece muitas práticas recomendadas.
clipe de fundo: caixa de preenchimento;
clipe de fundo: caixa de conteúdo;
FIGURA 13-12. A propriedade background-clip .

Jogando com opacidade
JOGAR COM OPACIDADE

Anteriormente, falamos sobre o formato de cor RGBa, que adiciona um nível de transparência quando
aplicado a uma cor ou plano de fundo. No entanto, há outra maneira de tornar um elemento ligeiramente
transparente - a propriedade de opacidade do CSS3 .
opacidade
Valores: número (0 a 1)
Predefinição: 1
Herda: não
O valor para opacidade é um número entre 0 (completamente transparente) e 1 (completamente

opaco). Um valor de 0,5 dá ao elemento uma opacidade de 50%. A configuração de opacidade se
A configuração de opacidade
se aplica a todo o elemento—tanto
aplica a todo o elemento—tanto o primeiro plano quanto o plano de fundo (se um tiver sido definido).
Se você quiser afetar apenas um ou outro, use um valor de cor RGBa. o primeiro plano e o fundo.
No exemplo de código a seguir (e na FIGURA 13-13), um título recebeu uma cor dourada e uma cor
de fundo branca. Quando a propriedade de opacidade é definida, ela permite que o fundo azul da
página apareça tanto no texto quanto na caixa do elemento.
h1 {cor: ouro; fundo: branco; opacidade: .25;}
h1 {cor: ouro; fundo: branco; opacidade: .5;}
h1 {cor: ouro; fundo: branco; opacidade: 1;}
opacidade: 0,25; A propriedade opacity não tem suporte no

Internet Explorer versões 8 e anteriores.
Se você precisar dar suporte ao IE8, use uma
opacidade: 0,5; regra de estilo com o filtro proprietário da Microsoft
e, em seguida, substitua-a pela regra de estilo
de opacidade padrão.
opacidade: 1;
h1 {
filtro:alfa(opacidade=50);
opacidade: 0,5;
}
FIGURA 13-13. Definir a opacidade em um elemento afeta as cores do primeiro plano e do plano de
fundo.
Você pode estar ansioso para tirar essas propriedades de cor e plano de fundo para dar uma olhada,
e nós o faremos em um momento, mas primeiro, quero apresentá-lo a alguns dos seletores CSS mais
sofisticados e completar sua coleção. O “De uma olhada”
a barra lateral lista os seletores com os quais você deve se sentir confortável até agora.

Seletores de pseudoclasse
SELECTOR DE PSEUDO-CLASSE
Você já notou que um link geralmente tem uma cor quando você clica nele e outra cor
NUM RELANCE
quando você volta para aquela página? Isso porque, nos bastidores, seu navegador está
Revisão do seletor acompanhando quais links foram clicados (ou “visitados”, para usar o jargão). O navegador
Aqui está um resumo rápido dos tipos

também acompanha outros estados, como se o cursor do usuário está sobre um elemento
de seletor que já abordamos (estado de foco), se um elemento é o primeiro de seu tipo, se é o primeiro ou último filho
(“E” significa “Elemento”): de seu pai e se um formulário elemento foi verificado ou desabilitado, apenas para citar
Seletor de tipo de elemento alguns.
E {propriedade: valor;}
Em CSS, você pode aplicar estilos a elementos nesses estados usando um tipo especial
Seletores agrupados
E1, E2, E3 {propriedade: valor;} de seletor chamado seletor de pseudoclasse . É um nome estranho, mas você pode
Seletor de descendentes pensar nele como se os elementos em um determinado estado pertencessem à mesma
E1 E2 {propriedade: valor;} classe. No entanto, o nome da classe não está na marcação - é algo que o navegador
Seletor filho apenas acompanha. Então é como uma classe... é uma pseudo-classe.
E1 > E2 {propriedade: valor;}
Os seletores de pseudoclasse são indicados pelo caractere dois-pontos (:) . Eles
Seletor do próximo irmão
normalmente vão imediatamente após o nome de um elemento – por exemplo, li:first-child.
E1 + E2 {propriedade: valor;}
Seletor de irmãos subsequentes Existem algumas pseudo-classes em CSS3, e o W3C está enlouquecendo no Módulo
E1 ~ E2 {propriedade: valor;} Seletor de CSS Nível 4, lançando novas pseudo-classes, a maioria das quais não tem
Seletor de ID
suporte a navegadores até o momento. Nesta seção, apresentarei os mais usados e os
E#id {propriedade: valor;}
mais bem suportados como um kit inicial sólido. Você pode explorar os seletores de ponta
#id {propriedade: valor;}
Seletor de classe à medida que ganha mais experiência. A lista completa de seletores CSS (incluindo o
E.class {propriedade: valor;} Nível 4), com descrições, pode ser encontrada no Apêndice C.
.class {propriedade: valor;}
Seletor universal
* {propriedade: valor;}
Link Pseudo-Classes
Os seletores de pseudoclasses mais básicos direcionam links ( elementos a) com base
no fato de terem sido clicados. As pseudoclasses de link são um tipo de pseudoclasse
dinâmica porque são aplicadas como resultado da interação do usuário com a página, e
não como algo na marcação.
:link Aplica um estilo a links não clicados (não visitados)

DICA DE USABILIDADE
:visitou Aplica um estilo aos links que já foram clicados
Ao alterar a aparência de links e links Por padrão, os navegadores normalmente exibem o texto vinculado em azul e os links
visitados, certifique-se de que eles ainda
que foram clicados em roxo, mas você pode alterar isso com algumas regras de estilo.
pareçam links.
Existem limitações sobre quais propriedades podem ser aplicadas aos links :visited ,
conforme explicado na barra lateral “Links visitados e segurança” .
Nesses exemplos, alterei a cor dos links não clicados para marrom e os links visitados
para cinza. É comum que os links visitados tenham uma cor mais suave do que os links
não clicados:
um:link {
cor: marrom;
}
a:visitou {
cor: cinza;
}

Pseudoclasses de ação do usuário
Outro tipo de estados de destino de pseudoclasse dinâmicos que resultam de ações diretas do
usuário.
Links visitados e segurança
:foco Aplica-se quando o elemento está selecionado e pronto para entrada
Os navegadores rastreiam quais links
:flutuar Aplica-se quando o ponteiro do mouse está sobre o elemento foram visitados, mas para alguns usuários,
um registro de seus links visitados (que podem
:active Aplica-se quando o elemento (como um link ou botão) está sendo clicado ou tocado
ser roubados por um site malicioso) pode ser
indesejável. Para pessoas em regiões com
severas restrições à visualização de conteúdo
Estado de foco online, esse registro nas mãos erradas pode
até ser fatal. Quando foi determinado que os
Se você já usou um formulário da web, deve estar familiarizado com a forma como um navegador estilos visuais aplicados aos links visitados,
enfatiza visualmente um elemento de formulário quando você o seleciona. Quando um elemento bem como os métodos que os navegadores
é destacado e está pronto para entrada, diz-se que ele tem “foco”. O seletor :focus permite aplicar usam para rastreá-los, poderiam ser usados
estilos personalizados a elementos quando eles estão no estado focado. para rastrear os históricos de visualização
dos usuários, algumas mudanças foram feitas
Neste exemplo, quando um usuário seleciona uma entrada de texto, ela obtém uma cor de fundo na forma como os links visitados são tratados.
amarela para se destacar das outras entradas de formulário:

A primeira mudança foi limitar as
input:focus { background-color: amarelo; }
propriedades de apresentação visual
que podem ser aplicadas aos links
Estado de foco visitados. Regras de estilo com :visited
seletores de pseudoclasse podem
O seletor :hover é interessante. Ele tem como alvo os elementos enquanto o ponteiro do mouse
usar apenas as seguintes
do usuário está diretamente sobre eles. Você pode usar o estado de foco com qualquer elemento, propriedades: cor, cor de fundo,
embora seja mais comumente usado com links para fornecer ao usuário feedback visual de que cor da borda (e propriedades da
uma ação é possível. Os estados de foco também são usados para acionar menus pop-up para borda lateral individual) e cor do contorno.
Qualquer outra propriedade será ignorada.
navegação ou para revelar mais informações sobre um objeto na página.
Além disso, você não pode usar nenhum
valor que torne o link transparente, incluindo
Esta regra dá aos links uma cor de fundo rosa claro enquanto o mouse passa sobre eles: a palavra-chave transparente e os valores de
cores RGBa e HSLa.
Sob o capô, o mecanismo DOM que monitora

a: pairar { quais links foram visitados sempre retornará
cor: marrom;
um estado “não visitado”, mesmo quando os
cor de fundo: #ffd9d9;
estilos visitados forem exibidos na tela. Isso
}
também mantém o histórico de navegação
No capítulo anterior, vimos a propriedade text-decoration usada para desativar os sublinhados oculto no nível DOM.
nos links. Você pode usar o seletor :hover para fazer o
sublinhados aparecem apenas “ao passar o mouse”: O destino da pseudo classe :visited é
incerto, portanto, não aplique estilos que
a: pairar { sejam críticos para a usabilidade do seu site.
decoração de texto: sublinhado;
}
É importante observar que não há um estado de foco verdadeiro em dispositivos de tela sensível
ao toque, como smartphones e tablets, portanto, os efeitos de foco devem ser usados com cuidado
e soluções alternativas (consulte a barra lateral “Passar o mouse em dispositivos de toque”).

Estado ativo
Finalmente, o seletor :active aplica estilos a um elemento enquanto ele está sendo
ativado. No caso de um link, é o estilo que é aplicado enquanto está sendo clicado
ou enquanto a ponta do dedo está em contato com ele em uma tela sensível ao
toque. Esse estilo pode ser exibido apenas por um instante, mas pode dar uma
indicação sutil de que algo aconteceu. Neste exemplo, iluminei a cor do estado
ativo (de marrom para vermelho):
a:ativo {
cor vermelha;
cor de fundo: #ffd9d9;
}
Juntando tudo
Os designers da Web geralmente fornecem estilos para todos esses estados de
link porque é uma maneira fácil de fornecer um bom feedback em cada estágio de
clicar em um link (e geralmente melhora os padrões do navegador). Na verdade,
os usuários esperam esse feedback: ver rapidamente quais links foram seguidos,
A ordem necessária
fazer com que os links façam algo quando apontam para eles e receber confirmação
para pseudo-classes quando os links são clicados com sucesso.
é: :link
:visitou Quando você aplica estilos a elementos com todas as cinco pseudoclasses, a
:foco ordem em que aparecem é importante para que funcionem corretamente. Por
exemplo, se você colocar :link ou :visited por último, eles substituem os outros
:flutuar
estados, impedindo que apareçam. A ordem necessária para as pseudoclasses
:ativo
de link é :link, :visited, :focus, :hover, :active (LVFHA, que você pode lembrar
com LoVe For Hairy Animals, ou o dispositivo mnemônico de sua escolha).
Passe o mouse em dispositivos de toque
Na área de trabalho, o ponteiro do mouse pode passar sobre os elementos na tela, para dispositivos móveis ou para evitar o estado :hover e ficar com cliques diretos.
mas os dispositivos de toque respondem apenas quando a tela é realmente tocada. É possível servir os estilos sem foco em uma folha de estilo direcionada
Isso pode tornar os efeitos de foco problemáticos em smartphones e tablets. especificamente para dispositivos de toque.
As soluções JavaScript estão além do escopo deste capítulo, portanto, recomendo

Quando os efeitos de foco são aplicados a um link ( um elemento a), os sistemas esses recursos para começar. É necessário algum conhecimento de JavaScript.
operacionais móveis podem exibir os estilos de estado de foco após um único toque.
Para seguir o link, o usuário deve tocar novamente. Outros elementos acionados • “4 novas maneiras de lidar com efeitos pegajosos :hover em dispositivos móveis
por foco, como menus pop-up, podem ficar presos abertos, exigindo que o usuário dispositivos” (www.javascriptkit.com/dhtmltutors/sticky-hover issue-solutions.shtml).
toque em outro lugar ou recarregue a página para limpá-la (não é uma boa experiência
do usuário e um fator decisivo para alguns designs).
• Procure por “estados de foco em dispositivos de toque” no StackOverflow.
com e veja perguntas e respostas relacionadas a esta questão.

Não há uma solução única baseada em CSS para esse problema. Sempre
O Stack Overflow é um fórum onde os programadores podem fazer
incluir os estilos de estado :focus e :active junto com os estilos :hover pode
perguntas e obter ajuda de colegas programadores. Você encontrará muitas
ajudar em algumas situações. Caso contrário, suas opções são usar JavaScript soluções, mas também alguns becos sem saída.
para programar o efeito desejado

É recomendável que você forneça um estilo :focus para usuários que usam o
teclado para tabular os links em uma página em vez de clicar com o mouse.
Aplicar o mesmo estilo usado para :hover é comum, embora não seja obrigatório.
Para resumir, os estilos de link que mostrei devem ficar assim na folha de estilo. A
FIGURA 13-14 mostra os resultados.
a { text-decoration: none; } /* desativa os sublinhados para todos os links */

a:link { cor: marrom; }
a:visitou { cor: cinza; }
a:foco { cor: marrom; cor de fundo: #ffd9d9; }
a:hover { cor: marrom; cor de fundo: #ffd9d9; }
a:ativo { cor: vermelho; cor de fundo: #ffd9d9; }
a:link um foco a:ativo a:visitou

a: passar o mouse
Os links são marrons e não Conforme o botão do mouse Depois que esse link for
sublinhados. Enquanto o mouse estiver sobre está sendo pressionado, o link visitado, o link ficará cinza.
o link ou quando o link estiver fica vermelho brilhante.
foco, a cor de fundo rosa aparece.
FIGURA 13-14. Alterando as cores e planos de fundo dos links com seletores de
pseudo-classe.
Outros seletores de pseudo-classe
OK…cinco pseudo-classes CSS3 para baixo, apenas mais 40 para ir! Bem, não sei
você, mas parece que vai demorar um pouco, e temos outros tipos de seletores
para explorar. No entanto, eu quero que você saiba o que é possível hoje e o que
está em andamento, então eu coloquei os seletores de pseudoclasses CSS3 na
barra lateral “Mais Pseudoclasses CSS” . Além disso, você pode encontrar a lista
completa de seletores de Nível 3 e 4 no Apêndice C, Seletores CSS, Nível 3 e 4
com breves descrições.
Eu também recomendo a leitura de “An Ultimate Guide to CSS Pseudo Classes

and Pseudo-Elements” de Ricardo Zea da Smashing Magazine (www.
smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and
pseudo-elements/). Ele fez o trabalho duro de fornecer explicações e exemplos de
todos os seletores de pseudo-classe CSS3 em um grande resumo.

Seletores de pseudo-elementos
Mais pseudoclasses CSS3
O W3C vem criando todos os tipos de maneiras Pseudoclasses estruturais Insira pseudo-classes
interessantes de selecionar conteúdo para Eles permitem a seleção com base em Esses seletores se aplicam a estados típicos
estilizar com base nos estados que o navegador onde o elemento está na estrutura do para entradas de formulário:
acompanha em tempo real. documento (a árvore do documento): :ativado
CSS3 introduziu uma enorme quantidade de :raiz :Desativado
pseudo classes, a maioria das quais são
:vazio :verificado
suportadas pelos navegadores hoje. É claro que
:primeiro filho
o Internet Explorer 8 e versões anteriores não
:último filho Pseudoclasses de localização (além
têm suporte, mas você pode usar o polyfill
de :link e :visited)
Selectivizr (selectivizr.com) para emular o suporte
:filho único
no caso raro de precisar oferecer suporte ao IE 6–8. :target (identificador de fragmento)
:primeiro do tipo
Um excelente recurso para aprender mais
:último do tipo Pseudoclasse linguística
sobre esses seletores CSS Nível 3 e 4,
incluindo informações de suporte ao :somente do tipo :lang()
navegador, é CSS4-selectors.com de Nelly Brekardin. :nth-filho()
Pseudoclasse lógica
:n-ésimo-último filho()
:não()
:nth-of-type()
:nth-last-of-type()
SELETORES DE PSEUDOELEMENTOS
As pseudoclasses não são o único tipo de pseudosseletores. Há também quatro pseudo-
elementos que agem como se estivessem inserindo elementos fictícios na estrutura do
documento para estilização. Em CSS3, os pseudoelementos são indicados por um
símbolo de dois pontos (::) para diferenciá-los das pseudoclasses.
No entanto, todos os navegadores suportam a sintaxe de dois-pontos (:) como foram
definidos no CSS2, então muitos desenvolvedores mantêm isso para garantir a
compatibilidade com navegadores mais antigos.
Primeira letra e linha

NOTA Os pseudoelementos a seguir são usados para selecionar a primeira linha ou a primeira
letra do texto em um elemento conforme exibido no navegador.
Existem algumas propriedades nesta lista que
você ainda não viu. Abordaremos as propriedades ::primeira linha
relacionadas à caixa (margem, preenchimento,
Este seletor aplica uma regra de estilo à primeira linha do elemento especificado.
borda) no Capítulo 14, Pensando dentro da
As únicas propriedades que você pode aplicar, no entanto, são as seguintes: cor
caixa. A propriedade float é apresentada no
decoração de texto
Capítulo 15, Flutuante e Posicionamento.
propriedades da fonte alinhamento vertical
propriedades de fundo transformação de texto
espaçamento entre palavras altura da linha
espaçamento entre letras

::primeira carta
Isso aplica uma regra de estilo à primeira letra do elemento especificado. As propriedades que
você pode aplicar são limitadas ao seguinte:
cor propriedades de preenchimento vertical-align
propriedades da fonte (se float não for nenhum)
propriedades de fundo propriedades de margem
espaçamento entre letras propriedades da borda
espaçamento entre palavras altura da linha

decoração de texto flutuador
transformação de texto
A FIGURA 13-15 mostra exemplos dos seletores de pseudoelementos ::first-line e ::first-letter .
p::primeira linha { espaçamento entre letras: 9px; }
p::primeira letra { tamanho da fonte: 300%; cor laranja; }
::primeira linha
::primeira carta
FIGURA 13-15. Exemplos de seletores de pseudoelementos ::first-line e ::first-letter .
Conteúdo gerado com ::antes e ::depois
Você viu como os navegadores adicionam marcadores e números às listas automaticamente, mesmo
que eles não estejam na fonte HTML. Esse é um exemplo de conteúdo gerado, conteúdo que os
navegadores inserem na hora. É possível dizer aos navegadores para gerar conteúdo antes ou depois
de qualquer elemento que você goste usando os pseudo-elementos ::before e ::after (veja Nota).
NOTA
Embora os dois-pontos duplos sejam especificados no

O conteúdo gerado pode ser usado para adicionar ícones antes de itens de lista, para exibir URLs ao
CSS3, você pode usar dois-pontos simples para
lado de links quando os documentos da Web são impressos, para adicionar aspas apropriadas ao
compatibilidade com versões anteriores. Os navegadores
idioma em torno de uma cotação e muito mais. Aqui está um exemplo simples que insere uma
também são obrigados a suportar dois-pontos únicos
imagem usando a função url() antes do parágrafo e “Obrigado”. no final do parágrafo. Compare a daqui para frente.
marcação com o que você vê renderizado no navegador (FIGURA 13-16).

OS ESTILOS:
p.aviso::antes {
conteúdo: url(exclamação.png);
margem direita: 6px; }
p.warning::after
"
conteúdo: { Obrigado.";
cor: vermelho; }
A MARCAÇÃO:
<p class="warning">Somos obrigados a avisá-lo de que alimentos mal cozidos são

um risco à saúde.</p>
FIGURA 13-16. Conteúdo gerado adicionado com os pseudoseletores ::before e ::after .
Há algumas coisas dignas de nota neste exemplo:
• O seletor de pseudo-elemento vai imediatamente após o elemento de destino

sem nenhum espaço.
• A regra de pseudoelemento insere o conteúdo e especifica como ele

deve ser estilizado em um bloco de declaração.
• A propriedade content , que fornece o conteúdo que você deseja inserir, é

requeridos. O seletor não fará nada sem ele.
• Se desejar espaços entre o conteúdo gerado e o conteúdo do documento de origem,

você deve incluir os espaços de caracteres entre as aspas do valor ou aplicar uma
margem.
Se você deseja inserir uma imagem, como um ícone ou outra marca, especifique o URL
sem aspas:
li:antes { conteúdo: url(imagens/estrela.png) }
Ao usar o conteúdo gerado, lembre-se de que o que você inserir não se tornará parte
do DOM do documento. Ele existe apenas na exibição do navegador e não é acessível
a dispositivos de assistência, como leitores de tela. É melhor usar o conteúdo gerado
para decorações e outros “extras” que não são críticos para o seu significado e
mensagem.
LEITURA ADICIONAL
“Aprendendo a usar os pseudo-elementos :before e :after em CSS” por Louis Lazaris

(www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after pseudo-elements-
in-css /).

Seletores de atributos
SELECTOR DE ATRIBUTO
Estamos finalmente na reta final com os seletores. Os seletores de atributos visam
FATO ENGRAÇADO
elementos com base em nomes ou valores de atributos, o que fornece muita flexibilidade
para selecionar elementos sem a necessidade de adicionar muita marcação de classe ou id . Seletores de classe e ID são apenas tipos
Os seletores de atributo CSS3 estão listados aqui: especiais de seletores de atributo.
elemento[atributo]
O seletor de atributo simples visa elementos com um atributo específico,
independentemente de seu valor. O exemplo a seguir seleciona qualquer imagem
que tenha um atributo title .
img[título] {borda: 3px sólido;}
elemento[attribute="valor exato "]

O seletor de valor de atributo exato seleciona elementos com um valor específico
para o atributo. Este seletor combina imagens com exatamente o valor do título
“primeira série”.
img[title="primeira série"] {borda: 3px sólido;}
elemento[atributo~="valor"]
O seletor de valor de atributo parcial (indicado com um til, ~) permite especificar uma
parte de um valor de atributo. O exemplo a seguir procura a palavra “grade” no título,
para que as imagens com o valor do título “first grade” e “second grade” sejam
selecionadas.
img[title~="grade"] {borda: 3px sólido;}
elemento[atributo|="valor"]
O seletor de valor de atributo separado por hífen (indicado com uma barra, |)
segmenta valores separados por hífen. Esse seletor corresponde a qualquer link
que aponte para um documento escrito em uma variação do idioma inglês (en), seja
o valor do atributo en-us (inglês americano), en-in (inglês indiano), en-au-tas
(australiano inglês), etc. [hreflang|="en"] {borda: 3px sólido;}
element[attribute^="primeira parte do valor"]

O seletor de valor de atributo de substring inicial (indicado com um quilate, ^)
corresponde a elementos cujos valores de atributo especificados começam na
sequência de caracteres no seletor. Este exemplo aplica o estilo apenas a imagens
localizadas no diretório /images/ icons .
img[src^="/images/icons"] {borda: 3px sólido;}
elemento[attribute$="última parte do valor"]

O seletor de valor de atributo de substring final (indicado com um cifrão, $)
corresponde a elementos cujos valores de atributo especificados terminam na string
de caracteres no seletor. Neste exemplo, você pode aplicar um estilo apenas aos
elementos a que vinculam a arquivos PDF.
a[href$=".pdf"] {border-bottom: 3px sólido;}

Imagens de fundo
element[attribute*="qualquer parte do valor"]

O seletor de valor de atributo de substring arbitrário (indicado com um aster isk, *) procura a string de
texto fornecida em qualquer parte do valor de atributo especificado. Esta regra seleciona qualquer
imagem que contenha a palavra “fevereiro” em algum lugar em seu título.
img[title*="February"] {borda: 3px sólido;}
OK, terminamos com os seletores! Você tem sido um verdadeiro truper. Acho que definitivamente é hora de
experimentar as cores do primeiro plano e do plano de fundo, bem como alguns desses novos tipos de
seletor no EXERCÍCIO 13-1 , antes de passar para as imagens de plano de fundo.
IMAGENS DE FUNDO
Vimos como adicionar imagens ao conteúdo do documento usando o elemento img , mas a maioria das
imagens decorativas são adicionadas a páginas e elementos como plano de fundo com CSS. Afinal,
decorações como padrões de fundo de ladrilhos são parte firme da apresentação, não da estrutura.
Percorremos um longo caminho desde os dias em que os sites eram gráficos gigantes cortados e mantidos
juntos com tabelas (estreme).
Nesta seção, veremos a coleção de propriedades usadas para colocar e empurrar

imagens de plano de fundo, começando com a imagem de plano de fundo básica
propriedade.
Adicionando uma imagem de fundo

A propriedade background-image adiciona uma imagem de fundo a qualquer elemento. Seu trabalho
principal é fornecer a localização do arquivo de imagem.
imagem de fundo
Valores: url(local da imagem) | Nenhum
Nenhum
Predefinição:
Herda: não
O valor de background-image é uma espécie de detentor de URL que contém a localização da imagem
NOTA (ver Nota).
A URL é relativa a onde quer que a regra CSS esteja no momento. Se a regra estiver em uma folha de estilo
O termo adequado para esse “titular de URL”
é uma notação funcional. É a mesma sintaxe incorporada (um elemento de estilo no documento HTML), o nome do caminho na URL deverá ser relativo
usada para listar valores RGB decimais e ao local do arquivo HTML.

percentuais. Se a regra CSS estiver em uma folha de estilo externa, o nome do caminho para a imagem deverá ser
relativo ao local do arquivo .css .
Como alternativa, fornecer URLs relativos à raiz do site para imagens garante que a imagem de fundo possa
ser encontrada independentemente da localização das regras de estilo.

Imagens de fundo
EXERCÍCIO 13-1. Adicionando cor a um documento
Neste exercício, começaremos com um menu simples em preto e branco e daremos a ele 4. Faça o fundo do cabeçalho branco com 50%
alguma personalidade com cores de primeiro e segundo plano (FIGURA 13-17). Você deve transparência (R:255, G:255, B:255, .5) para que uma dica da cor de fundo apareça.
ter experiência suficiente escrevendo regras de estilo a esta altura que eu não vou segurar
sua mão tanto quanto nos exercícios anteriores. Desta vez, você escreve as regras. Você 5. Já adicionei uma regra que desativa os sublinhados nos links
pode comparar seu trabalho com a folha de estilo final fornecida com os materiais deste
(text-decoration:none), então vamos confiar na cor para fazer os
capítulo. links aparecerem. Escreva uma regra que torne os links do mesmo
roxo que o h1 (#939).
Abra o arquivo summer-menu.html (obtenha-o em learningwebdesign. 6. Torne os links visitados em roxo suave (#937393).
com/5e/materials) em um editor de texto. Você descobrirá que já existe uma
7. Quando o mouse for posicionado sobre os links, deixe o texto em um roxo mais claro
folha de estilo incorporada que fornece formatação básica de texto. Você só
(#c700f2) e adicione uma cor de fundo branca (#fff).
precisa trabalhar nas cores. Sinta-se à vontade para salvar o documento em qualquer
Isso parecerá um pouco como se os links estivessem acendendo quando o
etapa do caminho e visualizar seu progresso em um navegador.
mouse estiver apontando para ele. Use essas mesmas regras de estilo para quando
os links estiverem em foco.
1. Torne o cabeçalho h1 roxo (R:153, G:51, B:153 ou #993399) adicionando uma
8. À medida que o mouse está sendo clicado (ou tocado em um dispositivo de toque),
nova declaração à regra h1 existente. Observe que, como esse valor tem todos
adicione uma cor de fundo branca e faça com que o texto fique roxo vibrante (#ff00ff).
os dígitos duplos, você pode usar a versão condensada (#939).
Certifique-se de que todas as pseudoclasses de link estejam na ordem correta.
2. Deixe os títulos h2 em marrom claro (R:204, G:102, B:0, #cc6600 ou

Quando terminar, sua página deve se parecer com a FIGURA 13-17.
#c60).
Adicionaremos imagens de plano de fundo a esta página mais tarde, portanto, se você
3. Deixe o fundo de toda a página verde claro (R:210, G:220, B:157 ou #d2dc9d).
quiser continuar experimentando cores diferentes em elementos diferentes, faça uma
Agora pode ser um bom momento para salvar, dar uma olhada em um navegador
cópia deste documento e dê um novo nome a ele.
e solucionar problemas se o plano de fundo e os títulos não aparecerem em cores.
Lembre-se de que o seletor de cores do Google é um destino fácil para cores e seus
equivalentes RGB.
AVISO
Não se esqueça do caractere # antes dos valores hexadecimais. A regra não

funcionará sem ela.
roxo roxo suave roxo brilhante

R:153, G:51, B:153 R:147, G:115, B:147 R:199, G:0, B:242
#993399 ou #939 #937393 #C700F2
roxo vibrante luz verde marrom claro

R:255, G:0, B:255 R:210, G:220, B:157 R:204, G:102, B:0
#FF00FF #D2DC9D #CC6600 ou #C60
FIGURA 13-17. A página do menu Black Goose Bistro com cores aplicadas.

Imagens de fundo
O diretório raiz é indicado por uma barra no início da URL. Por exemplo:
imagem de fundo: url(/imagens/fundo.jpg);

NUM RELANCE
A desvantagem, como para todos os URLs relativos à raiz do site, é que você não poderá testá-
Propriedades do plano de fundo
lo localmente (do seu próprio computador), a menos que o tenha configurado como um servidor.
As propriedades relacionadas ao plano
de fundo são: Esses exemplos e a FIGURA 13-18 mostram imagens de fundo aplicadas atrás de uma página
inteira (corpo) e um único elemento blockquote com preenchimento e uma borda aplicada.
cor de fundo
imagem de fundo
corpo
fundo de repetição
{ imagem de fundo: url(estrela.png); }
posição de fundo
anexo de fundo
blockquote
background-clip { imagem de fundo: url(ponto.png);
background-size preenchimento: 2em;
background borda: 4px tracejada; }
DICA DE DESIGN
Imagens de fundo lado a lado
Ao trabalhar com imagens de plano de

fundo, lembre-se destas diretrizes e dicas:
• Use uma imagem simples que não

interferir na legibilidade do texto sobre ele.
• Sempre forneça um valor de cor de fundo

que corresponda à cor primária da
imagem de fundo. Se a imagem de fundo

não for exibida, pelo menos o design geral
da página será semelhante.
Isso é particularmente importante se a

cor do texto for ilegível em relação ao
fundo branco padrão do navegador.
• Como de costume na web, mantenha o arquivo

tamanho das imagens de fundo o menor
star.png ponto.png
possível.
150 × 150 pixels 50 × 50 pixels
FIGURA 13-18. Imagens de fundo lado a lado adicionadas com a imagem de fundo
propriedade.

Imagens de fundo
Aqui você pode ver o comportamento padrão da imagem de fundo. A imagem começa
no canto superior esquerdo e é ladrilhada horizontal e verticalmente até que todo o
elemento seja preenchido (embora você aprenda como alterar isso em breve). Assim Sempre especifique uma
como as cores de fundo, as imagens de fundo lado a lado preenchem a área atrás da cor de fundo semelhante
área de conteúdo, preenchem o espaço de preenchimento extra ao redor do conteúdo
caso sua imagem de fundo
e se estendem até a borda externa da borda (se houver). Você pode alterar a área de não seja carregada.
pintura de fundo com a propriedade background-clip .
Se você fornecer uma cor de fundo e uma imagem de fundo para um elemento, a
imagem será colocada sobre a cor. Na verdade, é recomendável fornecer uma cor de
backup com matiz semelhante, caso a imagem não seja baixada .
Agora você pode tentar adicionar uma imagem de fundo lado a lado a uma página no
EXERCÍCIO 13-2.
EXERCÍCIO 13-2. Adicionando uma imagem de fundo lado a lado
Neste exercício, vamos adicionar uma imagem simples de fundo lado Eu quero salientar que bullseye.png é um gráfico PNG ligeiramente
a lado ao menu. As imagens fornecidas para este exercício devem estar transparente, então ele combina com qualquer cor de fundo. Tente alterar
no diretório de imagens . temporariamente a cor de fundo do elemento body adicionando uma
Adicione uma declaração à regra de estilo do corpo que torna a segunda declaração de cor de fundo na parte inferior da pilha para substituir
imagem bullseye.png lado a lado no plano de fundo da página. Certifique-se a anterior. Brinque com cores diferentes e observe como os círculos se
de incluir o nome do caminho relativo à folha de estilo (neste caso, o misturam. Quando terminar de experimentar, exclua a segunda declaração
documento HTML atual). para que o fundo fique verde novamente e você esteja pronto para os
próximos exercícios.
imagem de fundo: url(images/bullseye.png);
Fácil, não é? Quando você salva e visualiza a página no navegador, ela
deve se parecer com a FIGURA 13-19.
FIGURA 13-19. O menu com uma imagem de fundo simples lado a lado.

Imagens de fundo
Repetição em segundo plano
Como vimos na FIGURA 13-18, as imagens são colocadas lado a lado para a esquerda e para a direita, para cima e
para baixo, quando deixadas por conta própria. Você pode alterar esse comportamento com a propriedade de
repetição em segundo plano .
fundo de repetição
Valores: repetir | sem repetição | repetir-x | repetir-y | espaço | redondo
Predefinição: repetir
Herda: não
Se você quiser que uma imagem de fundo apareça apenas uma vez, use o valor da palavra -chave
sem repetição :
corpo {
imagem de fundo: url(estrela.png);
repetição de fundo: sem repetição;
}
Você também pode restringir a imagem para lado a lado apenas horizontalmente (repeat-x) ou
verticalmente (repeat-y), conforme mostrado nestes exemplos:
corpo {
repetição de fundo: repetir-x;
}
corpo {
background-repeat: repeat-y;
}
A FIGURA 13-20 mostra exemplos de cada um desses valores de palavra-chave. Observe que em
todos os exemplos, o mosaico começa no canto superior esquerdo do elemento (ou janela do
navegador quando uma imagem é aplicada ao elemento body ). Na próxima seção, mostrarei como
mudar isso.
Os valores de palavras-chave restantes, espaço e redondo, tentam preencher a área de pintura de

fundo disponível um número par de vezes.
Quando a repetição do plano de fundo é definida como espaço, o navegador calcula quantas
O Internet Explorer 8 e versões anteriores não oferecem imagens de plano de fundo podem caber na largura e na altura da área de plano de fundo e adiciona
suporte a palavras- chave de espaço e arredondamento quantidades iguais de espaço entre cada imagem. O resultado são linhas e colunas uniformes e
para repetição em segundo plano. nenhuma imagem cortada (FIGURA 13-21).
A palavra-chave round faz com que o navegador esmague a imagem de fundo horizontalmente e
verticalmente (não necessariamente proporcionalmente) para caber na área de fundo um número
par de vezes (FIGURA 13-21).
Vamos experimentar alguns padrões de repetição de fundo no EXERCÍCIO 13-3.

Imagens de fundo
sem repetição
repetir-x
repetir
FIGURA 13-20. Desativando o ladrilho automático sem repetição (superior), aplicando ladrilhos
no eixo horizontal com repetição x (meio) e aplicando ladrilhos no eixo vertical com repetição y
(inferior).
espaço
redondo
FIGURA 13-21. Exemplos de palavras- chave de espaço e redondas para repetição em segundo plano.
O exemplo de “espaço” seria menos desajeitado se a cor de fundo combinasse com a imagem, mas deixei
em branco para demonstrar melhor como o valor do espaço funciona.

Imagens de fundo
EXERCÍCIO 13-3. Controlando a direção do ladrilho
Agora vamos tentar alguns azulejos um pouco mais sofisticados na página Summer Menu. Desta vez,
adicionaremos um plano de fundo lado a lado ao longo da borda superior do elemento de cabeçalho .
1. Na regra de cabeçalho , adicione a imagem purpledot.png e configure-a para repetir apenas horizontalmente:
cabeçalho
{ margem superior: 0;
preenchimento: 3em 1em 2em 1em;
cor de fundo: rgba(255,255,255,.5);
imagem de fundo: url(imagens/purpledot.png);
}
2. Salve o arquivo e veja-o no navegador. Deve ser algo como a FIGURA 13-22.
Eu recomendo redimensionar a janela do seu navegador mais e mais estreita e prestar atenção à posição do
padrão de fundo. Vê como está sempre ancorado à esquerda? Você vai aprender como ajustar a posição a
seguir. Tente alterar a regra de estilo para que o ponto se repita apenas na vertical; em seguida, faça com que
não se repita (defina-o de volta para repeat-x e salve quando terminar).
FIGURA 13-22. Adicionando uma imagem de ladrilho horizontal ao cabeçalho.
3. Finalmente, experimente o espaço e os valores de repetição de arredondamento na imagem de fundo do

corpo e veja se você gosta do efeito. Observe que os blocos são espaçados uniformemente no corpo do
documento, não apenas na janela de visualização, portanto, você pode ver alguns círculos recortados na
borda inferior do navegador. Exclua a declaração de repetição em segundo plano para que ela volte à
repetição padrão para os próximos exercícios: body {
repetição de fundo: espaço;

}

Imagens de fundo
Posição de fundo
A propriedade background-position especifica a posição da imagem de origem
no fundo. Você pode pensar na imagem de origem como a primeira imagem colocada no plano de fundo
a partir da qual as imagens lado a lado se estendem. Aqui está o imóvel e seus diversos valores.
posição de fundo
Valores: medição de comprimento | porcentagem | esquerda | centro | direito | topo | fundo
Predefinição: 0% 0% (igual ao canto superior esquerdo)
Herda: não
Para posicionar a imagem de origem, forneça valores horizontais e verticais que descrevam onde colocá-
la. Há uma variedade de maneiras de fazê-lo.
Posicionamento da palavra-chave
Os valores de palavra-chave (esquerda, direita, superior, inferior e central)

posicionam a imagem de origem em relação às bordas externas do preenchimento
do elemento. Por exemplo, a esquerda posiciona a imagem até a borda esquerda
da área de fundo. A posição de origem padrão corresponde ao topo esquerdo.
As palavras-chave são normalmente usadas em pares, como nestes exemplos:
posição de fundo: parte inferior

esquerda; posição de fundo: centro direito;
As palavras-chave podem aparecer em qualquer ordem. Se você fornecer apenas uma palavra-
chave, a palavra-chave ausente será considerada central. Assim, background-position: right
tem o mesmo efeito que background-position: right center.
Medidas de comprimento
Especificar a posição usando medidas de comprimento, como pixels ou ems, indica uma quantidade
de deslocamento do canto superior esquerdo do elemento até o canto superior esquerdo da Quando você está
imagem de origem do plano de fundo. Quando você está fornecendo valores de comprimento, a fornecendo valores de
medição horizontal sempre vem primeiro. comprimento ou
A especificação de valores negativos é permitida e faz com que a imagem fique para fora da área porcentagem, a medição
de fundo visível. horizontal sempre vem primeiro.
Este exemplo posiciona o canto superior esquerdo da imagem a 200 pixels da borda esquerda e
50 pixels abaixo da borda superior do elemento (ou mais especificamente, a borda de preenchimento
por padrão): background-position: 200px 50px;
Porcentagens
Os valores percentuais são fornecidos em pares horizontais/verticais, com 0% 0%

correspondente ao canto superior esquerdo e 100% 100% correspondente ao canto inferior direito.
Tal como acontece com os valores de comprimento, a medição horizontal sempre vem em primeiro
lugar.

Imagens de fundo
É importante observar que o valor percentual se aplica tanto à área da tela quanto à própria
imagem. Um valor horizontal de 25% posiciona o ponto a 25% da borda esquerda da
imagem em um ponto que está a 25% da borda esquerda da área de posicionamento do
Deslocamentos de borda de fundo plano de fundo. Um valor vertical de 100% posiciona a borda inferior da imagem na borda
A especificação CSS3 também inclui uma

inferior do posicionamento
área.
sintaxe de quatro partes para a posição do
plano de fundo que permite especificar um posição de fundo: 25% 100%; Assim
deslocamento (em comprimento ou
porcentagem de uma borda específica). Esta como acontece com as palavras-chave, se você fornecer apenas uma porcentagem, a
é a sintaxe: outra será considerada 50% (centralizada).
posição de fundo: A FIGURA 13-23 mostra os resultados de cada um dos exemplos de posição de fundo acima
deslocamento de palavra-chave de borda
mencionados com a repetição de fundo definida como sem repetição para maior clareza. Isso é
deslocamento de palavra-chave de borda;
Neste exemplo, uma imagem de origem

é posicionada a 50 pixels da borda direita
e 50 pixels da parte inferior da área de
posicionamento do elemento:
posição de fundo:
direita 50px inferior 50px; posição de fundo: parte inferior esquerda;
Essa sintaxe de quatro partes não é suportada

pelo IE 8 e anterior, Safari e iOS Safari 6 e
anterior e Android 4.3 e anterior.
posição de fundo: centro direito;

ou
posição de fundo: direita;
300px
posição de fundo: 300px 50px;
25%
posição de fundo: 25% 100%;
25%
FIGURA 13-23. Posicionando uma imagem de fundo não repetitiva. Se essas imagens de fundo
pudessem se repetir, elas se estenderiam para a esquerda e para a direita e/ou para cima e para baixo
a partir das posições iniciais.

Imagens de fundo
possível posicionar a imagem de origem e deixá-la lado a lado a partir daí, em ambas as
direções ou apenas na horizontal ou na vertical. Quando a imagem está lado a lado, a posição
da imagem inicial pode não ser óbvia, mas você pode usar a posição de fundo
para fazer um padrão de ladrilho começar em um ponto diferente da borda esquerda da imagem.
Isso pode ser usado para manter um padrão de fundo centrado e simétrico.
Origem da posição de fundo

Observe na FIGURA 13-23 que quando a imagem de origem foi colocada no canto de um
elemento, ela foi colocada dentro da borda (somente imagens repetidas se estendem abaixo da
borda até a borda externa). Esta é a posição padrão, mas você pode alterá-la com a propriedade background-origin não é compatível com o
Internet Explorer 8 e versões anteriores.
background-origin .
origem de fundo
Valores: caixa-borda | caixa de enchimento | caixa de conteúdo
Predefinição: caixa de estofamento
Herda: não
Esta propriedade define os limites da área de posicionamento do plano de fundo da mesma

forma que o clipe de plano de fundo definiu a área de pintura do plano de fundo. Você pode
definir os limites da caixa de borda (para que a imagem de origem seja colocada sob a borda
externa da borda, caixa de preenchimento (borda externa do preenchimento, logo dentro da
borda) ou caixa de conteúdo (a área de conteúdo real do elemento).
Esses termos se tornarão mais significativos quando você se familiarizar com o modelo de caixa
no próximo capítulo. Enquanto isso, a FIGURA 13-24 mostra os resultados de cada uma das
opções de palavras-chave.
caixa de borda caixa de estofamento caixa de conteúdo
FIGURA 13-24. Exemplos de palavras -chave de origem em segundo plano .
Antes de passarmos para as propriedades restantes do plano de fundo, confira o EXERCÍCIO

13-4 para ter uma ideia do posicionamento do plano de fundo.

Imagens de fundo
EXERCÍCIO 13-4. Posicionando imagens de fundo
Vamos nos divertir com a posição da imagem de fundo no menu. Primeiro Veja como ocultar declarações como comentários CSS:
vamos fazer alguns ajustes sutis nas imagens de fundo que já estão lá, e corpo {
então vamos trocá-las por um fundo totalmente diferente e brincar um pouco …
mais. Ainda estamos trabalhando com o summer-menu.html cor de fundo: #d2dc9d;

/* imagem de fundo: url(images/bullseye.png);
documento, que deve ter padrões de ladrilhos repetidos no corpo posição de fundo: centro 200px; */
e elementos de cabeçalho . }
1. Estou pensando que, como os principais elementos do menu são 4. Agora, adicione a imagem blackgoose.png (também um PNG
centralizados, seria bom se os padrões de fundo também ficassem semitransparente) ao fundo da página. Configure-o para não repetir e
centralizados. Adicione esta declaração ao corpo e ao cabeçalho centralize-o no topo da página:
as regras; em seguida, salve e veja no navegador.
imagem de fundo: url(images/blackgoose.png);
posição de fundo: parte superior central; repetição de fundo: sem repetição;
posição de fundo: parte superior central;
Você pode não notar a diferença até redimensionar o navegador de forma
ampla e estreita novamente. Agora o padrão está ancorado no centro e Dê uma olhada na janela do navegador e observe o plano de fundo rolar
revela mais ou menos em ambas as bordas, não apenas na borda direita para cima com o conteúdo quando você rolar a página.
como antes. 5. Quero que você tenha uma ideia das várias palavras-chave de posição e
valores numéricos. Experimente cada um deles e veja no navegador.
2. Para chutes, altere os valores da posição do plano de fundo para que os
pontos roxos fiquem ao longo da borda inferior do cabeçalho (parte inferior Certifique-se de rolar a página e ver o que acontece.
central). (Isso não parece tão bom; estou colocando o meu de volta no Observe que quando você fornece uma porcentagem ou palavra-
topo.) Então tente mover bullseye.png para baixo 200 pixels (centro 200px). chave para a posição vertical, ela se baseia na altura de todo o
Observe que o padrão ainda preenche a tela inteira - movemos a imagem documento, não apenas na janela do navegador. Você também pode tentar
suas próprias variações.
de origem para baixo, mas o plano de fundo ainda está definido para ladrilhar
em todas as direções. A FIGURA 13-25 mostra o resultado dessas mudanças.
posição de fundo: parte superior direita;
posição de fundo: parte inferior direita;

3. Parece bom, mas vamos nos livrar do plano de fundo no
corpo por enquanto. Eu quero te mostrar um pequeno truque. Durante o posição de fundo: esquerda 50%;
processo de design, prefiro ocultar estilos nos comentários em vez de excluí- posição de fundo: centro 100px;
los completamente. Dessa forma, não preciso lembrá-los ou digitá-los
novamente; Eu só tenho que remover os indicadores de comentários e eles 6. Deixe a imagem posicionada no centro 100px para que você esteja pronto
estão de volta. Quando o design está pronto e é hora de publicar, eu retiro os para o próximo exercício. Sua página deve se parecer com a mostrada à
estilos não utilizados para manter o tamanho do arquivo baixo. direita na FIGURA 13-25.
Padrão de fundo centralizado Imagem não repetitiva posicionada
FIGURA 13-25. Os resultados do posicionamento da imagem de origem nos padrões de plano de fundo lado a lado (esquerda) e posicionamento de um único
logotipo de plano de fundo (direita).

Imagens de fundo
Anexo de fundo
No exercício anterior, pedi para você rolar a página e observar o que acontece com
a imagem de fundo. Como esperado, ele rola junto com o documento e sai do topo
da janela do navegador, que é seu comportamento padrão.
No entanto, você pode usar a propriedade background-attachment para liberar o
fundo do conteúdo e permitir que ele permaneça fixo em uma posição enquanto o
restante do conteúdo rola.
anexo de fundo Uma grande imagem de fundo não

Valores: rolar | fixo | local repetida no corpo do documento.
Predefinição: rolagem
Herda: não
Com a propriedade background-attachment , você pode escolher se a imagem de

fundo rola com o conteúdo ou fica em uma posição fixa. Quando uma imagem é fixa,
ela permanece na mesma posição em relação à janela de visualização do navegador
(em vez de estar em relação ao elemento que ela preenche). Você verá o que quero
dizer em um minuto (e você mesmo pode tentar no EXERCÍCIO 13-5).
No exemplo a seguir, uma imagem grande e não lado a lado é colocada no fundo de anexo de fundo: rolagem;
todo o documento (o elemento do corpo ). Por padrão, quando o documento rola, a Por padrão, a imagem de fundo é
imagem rola também, movendo-se para cima e para fora da página, conforme anexada ao elemento body e rola a
página quando o conteúdo rola.
mostrado na FIGURA 13-26. No entanto, se você definir o valor de background-
attachment como fixo, ele permanece onde foi colocado inicialmente e o texto rola para cima.
body
{ imagem de fundo: url(imagens/bigstar.gif);
posição de fundo: centro 300px;
anexo de fundo: fixo; }
O valor local , que foi adicionado em CSS3, é útil quando um elemento tem seu
próprio mecanismo de rolagem. Em vez de rolar com o scroller da viewport, local faz
com que a imagem de fundo seja fixada ao conteúdo do elemento de rolagem. Essa
palavra-chave não é compatível com o IE8 e versões anteriores e também pode ser anexo de fundo: fixo;
problemática em navegadores móveis.
Quando o anexo de fundo é definido
como fixo, a imagem permanece em sua
posição relativa à área de visualização do
navegador e não rola com o conteúdo.
FIGURA 13-26. Impedindo a rolagem

da imagem de fundo com a propriedade
background-attachment .

Imagens de fundo
EXERCÍCIO 13-5. Tamanho do plano de fundo
Posição fixa OK, temos apenas mais uma propriedade de imagem de fundo para cobrir antes de encerrar
tudo com a propriedade abreviada de fundo . Até agora, as imagens de fundo que vimos são
Quando saímos do menu bistrô pela exibidas no tamanho real da própria imagem. Você pode alterar o tamanho da imagem
última vez, aplicamos uma imagem de usando a propriedade background-size .
logotipo grande e não repetida ao fundo da página.
Deixaremos assim, mas usaremos a tamanho de fundo
propriedade background-attachment para
Valores: comprimento | porcentagem | automóvel | capa | conter
mantê-lo no mesmo lugar mesmo quando a
página rolar: Predefinição: auto
corpo { Aplica-se a: todos os elementos
imagem de fundo: url(imagens/

Herda: não
blackgoose.png);
Existem várias maneiras de especificar o tamanho da imagem de fundo. Talvez o mais
posição de fundo: centro 100px;
simples seja especificar as dimensões em unidades de comprimento, como pixels ou ems.
anexo de fundo: fixo; Como de costume, quando dois valores são fornecidos, o primeiro é usado como medida
} horizontal. Se você fornecer apenas um valor, ele será usado como medida horizontal e o
Salve o documento, abra-o no valor vertical será definido como automático.
navegador e tente rolar. A imagem
de fundo permanece na área de Este exemplo redimensiona a imagem de fundo target.png , que tem um tamanho intrínseco
visualização do navegador. Legal né? de 300 pixels por 300 pixels (FIGURA 13-27):
Para crédito extra, veja o que acontece
cabeçalho
quando você corrige o anexo do padrão de
{ imagem de fundo: url(imagens/destino.png);
pontos no cabeçalho. (Spoiler: fica no
tamanho do plano de fundo: 600px 150px;
mesmo lugar, mas apenas dentro do cabeçalho
}
em si. Quando o cabeçalho desliza para fora da
vista, o mesmo acontece com o plano de fundo.) Os valores percentuais são calculados com base na área de posicionamento do plano de
fundo, que por padrão vai até a borda interna da borda, mas pode ter sido alterada com a
origem do plano de fundo – algo a ter em mente. Portanto, um valor horizontal de 50% não
torna a imagem metade de sua largura; em vez disso, ele o dimensiona para 50% da largura
da área de posicionamento (FIGURA 13-27). Novamente, o valor horizontal vai primeiro. Não
há problema em misturar valores de porcentagem e comprimento, conforme mostrado neste
exemplo:
cabeçalho
{ imagem de fundo: url(imagens/destino.png);
tamanho do fundo: 50% 10em;
}
A palavra-chave auto redimensiona a imagem em qualquer direção necessária para manter

suas proporções. Imagens de bitmap, como GIF, JPEG e PNG têm proporções intrínsecas,
portanto, sempre permanecerão proporcionais quando um valor de dimensionamento for
definido como automático. Algumas imagens, como gradientes SVG e CSS, não possuem
proporções intrínsecas. Nesse caso, auto define a largura ou altura para 100% da largura ou
altura da área de posicionamento do plano de fundo.
A capa e as palavras -chave são adições interessantes em CSS3. Quando você define o
tamanho do plano de fundo a ser coberto, o navegador redimensiona uma imagem de plano
de fundo grande o suficiente para alcançar todos os lados da área de posicionamento do
plano de fundo. Haverá apenas uma imagem porque ela preenche todo o elemento, e é provável que

Imagens de fundo
alvo.png
300 × 300 pixels
AVISO
Ao dimensionar uma imagem de bitmap, como um

GIF ou PNG maior, você corre o risco de que ela
fique embaçada e pixelizada. Use o
dimensionamento do plano de fundo com cuidado.
tamanho do plano de fundo: 600px 300px; tamanho do fundo: 50% 10em;
FIGURA 13-27. Redimensionando uma imagem de fundo com unidades de comprimento e

porcentagens específicas.
partes da imagem ficarão fora da área de posicionamento se as proporções da

imagem e da área de posicionamento não corresponderem (FIGURA 13-28).
Por outro lado, contém tamanhos de imagem grandes o suficiente para preencher
a largura ou a altura da área de posicionamento (dependendo das proporções da
imagem). A imagem inteira ficará visível e “contida” dentro da área de fundo
(FIGURA 13-28). Se houver espaço sobrando, a imagem de fundo será repetida, a
menos que a repetição de fundo esteja definida como sem repetição.
div#A
{ imagem de fundo: url(target.png);
tamanho do fundo: capa; }
div#B
{ imagem de fundo: url(target.png);
tamanho do fundo: conter; }
tamanho do fundo: capa; tamanho do fundo: conter;
Toda a área de fundo do elemento é coberta e a A imagem é dimensionada proporcionalmente

imagem mantém suas proporções mesmo se for para caber inteiramente no elemento. Pode haver
cortada. espaço para ladrilhos (como mostrado).
FIGURA 13-28. Exemplos da capa e contêm palavras-chave de tamanho de fundo.

A propriedade de fundo abreviado
O FUNDO CURTO
PROPRIEDADE
Cuidado com as substituições
Você pode usar a útil propriedade background para especificar todos os seus estilos de
A propriedade background é eficiente, mas plano de fundo em uma declaração.
use-a com cuidado. Já abordamos isso antes,
mas vale a pena repetir. fundo
Como background é uma propriedade
Valores: fundo-cor fundo-imagem fundo-repetir fundo-anexo fundo-posição fundo-
abreviada, quando você omite um valor, essa
clipe
propriedade será redefinida para seu padrão.
background-origin background-size
Tenha cuidado para não substituir
acidentalmente as regras de estilo anteriores Predefinição: ver propriedades individuais
na folha de estilos com uma regra abreviada posterior que
reverte suas configurações para seus padrões.
Neste exemplo, a imagem de fundo Herda: não
dots.gif não será aplicada a elementos h3

O valor da propriedade de plano de fundo é uma lista de valores que seriam fornecidos para
porque ao omitir o valor de background-
image, você basicamente define esse valor as propriedades de plano de fundo individuais listadas anteriormente. Por exemplo, esta regra
como none: de fundo
h1, h2, h3 body { background: white url(star.png) sem repetição superior direito fixo; }
{ background: red url(dots.gif) repeat-
x; } substitui esta regra por cinco declarações separadas:
corpo
h3
{ cor de fundo: branco;
{ fundo: verde; } imagem de fundo: url(estrela.png);
Para substituir propriedades específicas, use posição de fundo: parte superior direita;
a propriedade de plano de fundo específica anexo de fundo: fixo;
que você pretende alterar. Por exemplo, se }
a intenção no exemplo anterior fosse alterar
Todos os valores de propriedade para background são opcionais e podem aparecer em
apenas a cor de fundo dos elementos h3 , a
propriedade background-color seria a qualquer ordem. A única restrição é que quando você está fornecendo as coordenadas para
escolha correta. a propriedade background-position , o valor horizontal deve aparecer primeiro, imediatamente
seguido pelo valor vertical. Como acontece com qualquer propriedade abreviada, esteja
ciente de que se algum valor for omitido, ele será redefinido para seu valor padrão. Consulte
a barra lateral “Cuidado com substituições” .
No EXERCÍCIO 13-6, você pode converter suas extensas propriedades de plano de fundo
em uma única declaração com plano de fundo.
EXERCÍCIO 13-6. Converter em propriedade abreviada
Este é fácil. Substitua todas as declarações relacionadas ao plano de fundo no altura da linha: 175%;
corpo do menu bistro por uma única declaração de propriedade de plano de margem: 0 15%;
fundo: background: #d2dc9d url(images/blackgoose.png) sem
repetição centro 100px fixo;
corpo { }
família de fontes: Georgia, serifa;
Faça o mesmo para o elemento header e pronto.

A propriedade de fundo abreviado
Vários fundos
CSS3 introduziu a capacidade de aplicar várias imagens de fundo a um único elemento.
Para aplicar vários valores para imagem de fundo, coloque-os em uma lista separada NOTA DE SUPORTE DO NAVEGADOR
por vírgulas. Os valores de propriedade adicionais relacionados ao plano de fundo O Internet Explorer 8 e versões anteriores não
também vão em listas separadas por vírgulas; o primeiro valor listado se aplica à primeira oferecem suporte a várias imagens de plano de
imagem, o segundo valor à segunda e assim por diante. fundo e ignorarão totalmente qualquer declaração
de plano de fundo com mais de um valor.
Embora as declarações CSS geralmente funcionem em uma regra de “o último vence”,
A correção é escolher uma imagem de plano
para várias imagens de plano de fundo, a que estiver listada por último vai na parte
de fundo para o elemento como um substituto
inferior, e cada imagem anterior nas camadas da lista em cima dela. Você pode pensar
para o IE e outros navegadores não compatíveis
nelas como camadas do Photoshop, pois elas são empilhadas na ordem em que
e, em seguida, especificar os vários planos de fundo
aparecem na lista. Dito de outra forma, a imagem definida pelo primeiro valor ficará na regras que o substituem:
frente e as outras se alinharão atrás dela, na ordem em que forem listadas.
corpo {
corpo { /* para navegadores não compatíveis */
imagem de fundo: url(imagem1.png), url(imagem2.png), url(imagem3.png); background: url(image_fallback.
posição de fundo: superior esquerdo, centro central, inferior direito; png) superior esquerdo sem
repetição de fundo: sem repetição, sem repetição, sem repetição; repetição; /* vários fundos */
…
background: url(image1.png) parte
} superior esquerda sem repetição,
Como alternativa, você pode aproveitar a propriedade abreviada de plano de fundo para url(image2.png) centro centro sem
simplificar a regra. Agora a propriedade background tem três séries de valores, separadas repetição,
por vírgulas: url(image3.png) inferior direito sem
repetição;
corpo { /* cor de fundo */ cor de fundo:
background: papayawhip; }
url(image1.png) superior esquerdo sem repetição,
url(image2.png) centro centro sem repetição,
url(image3.png) inferior direito sem repetição;
}
A FIGURA 13-29 mostra o resultado. O grande 1 laranja está posicionado no canto

superior esquerdo, o 2 está centralizado vertical e horizontalmente e o 3 está no canto
inferior direito. Todas as três imagens de fundo compartilham a área de posicionamento
de fundo de um elemento do corpo . Experimente você mesmo no EXERCÍCIO 13-7.
FIGURA 13-29. Três imagens de fundo separadas adicionadas ao elemento body .

Como um arco-íris (Gradientes)
EXERCÍCIO 13-7. Várias imagens de fundo
Neste exercício, experimentaremos várias imagens de plano de fundo

(certifique-se de não estar usando uma versão antiga do IE, ou isso não funcionará).
Eu gostaria que o padrão de pontos no cabeçalho percorresse os lados

esquerdo e direito. Eu também tenho uma pequena silhueta de ganso
(gooseshadow.png) que pode ficar fofa andando pela parte inferior do cabeçalho.
Estou tornando este exemplo amigável para navegadores não compatíveis (IE8 e
anteriores) fornecendo uma declaração de fallback com apenas uma imagem e
separando a declaração de cor de fundo para que ela não seja substituída. Se o
IE8 não for uma preocupação, você não precisa do fallback.
Você pode ver no exemplo que estamos colocando três imagens em um único
cabeçalho: pontos no lado esquerdo, pontos no lado direito e um ganso na parte
inferior.
cabeçalho { FIGURA 13-30. O cabeçalho do menu bistrô com duas linhas de pontos
…
e um pequeno gráfico de ganso no elemento do cabeçalho .
background: url(images/purpledot.png) center top repeat-x;
background:
url(images/purpledot.png) superior esquerdo repeat-y,
url(images/purpledot.png) superior direito repeat-y,
url(images/gooseshadow.png) 90% inferior sem repetição;
cor de fundo: rgba(255,255,255,.5);
}
A FIGURA 13-30 mostra o resultado final. Meh, eu gostava mais antes, mas você
entendeu.
COMO UM ARCO-ÍRIS (GRADIENTES)
Um gradiente é uma transição de uma cor para outra, às vezes por meio de várias cores. No
passado, a única maneira de colocar um gradiente em uma página da web era criar um em um
programa de edição de imagem e adicionar a imagem resultante com CSS.
Os gradientes são Agora podemos especificar gradientes de cores usando apenas a notação CSS, deixando a tarefa
imagens que os de renderizar as misturas de cores para o navegador. Embora sejam especificados com código,
navegadores geram em os gradientes são imagens. Eles simplesmente são gerados em tempo real.
tempo real. Use-os como Uma imagem gradiente não tem tamanho ou proporções intrínsecas; o tamanho corresponde ao
usaria uma imagem de fundo. elemento ao qual é aplicado. Os gradientes podem ser aplicados em qualquer lugar em que uma
imagem possa ser aplicada: imagem de fundo, imagem de borda e imagem de estilo de lista.
Vamos ficar com exemplos de imagens de fundo neste capítulo.
Existem dois tipos de gradientes:
• Gradientes lineares mudam as cores ao longo de uma linha, a partir de uma borda do elemento
para o outro.
• Os gradientes radiais começam em um ponto e se espalham para fora em forma circular ou

elíptica.

Gradientes Lineares
A notação linear-gradient() fornece o ângulo da linha de gradiente
e um ou mais pontos ao longo dessa linha onde a cor pura está posicionada (paradas
de cores). Você pode usar nomes de cores ou qualquer um dos valores numéricos de
cores discutidos anteriormente neste capítulo, incluindo transparência. O ângulo da
linha de gradiente é especificado em graus (ndeg) ou com palavras-chave. Com graus, 0deg
aponta para cima, e os ângulos positivos giram no sentido horário, de modo que 90
graus apontam para a direita. Portanto, se você quiser ir de aqua na borda superior
para verde na borda inferior, defina a rotação para 180 graus:
imagem de fundo: gradiente linear (180 graus, aqua, verde);
As palavras-chave descrevem a direção em incrementos de 90° (para cima, para a direita,

para baixo, para a esquerda). Nosso gradiente de 180 graus também pode ser especificado
com a palavra-chave to bottom . O resultado é mostrado na FIGURA 13-31 (topo):
imagem de fundo: gradiente linear (para baixo, aqua, verde);
Você também pode usar a sintaxe “to” para apontar para os cantos. O gradiente a
seguir seria desenhado do canto inferior esquerdo para o canto superior direito. O
ângulo resultante de um gradiente desenhado entre os cantos é determinado pela
proporção da caixa.
imagem de fundo: gradiente linear (no canto superior direito, aqua, verde);
No exemplo a seguir, o gradiente agora vai da esquerda para a direita (90 graus) e
inclui uma terceira cor, laranja, que aparece em 25% da linha de gradiente (FIGURA
13-31, meio). Você pode ver que o posicionamento da parada de cor é indicado após o
valor da cor. Você pode usar porcentagens ou qualquer medida de comprimento. A
primeira e a última parada de cor não exigem posições porque são definidas como 0%
e 100%, respectivamente, por padrão.
imagem de fundo: gradiente linear (90 graus, amarelo, laranja 25%, roxo);
Você certamente não está limitado a ângulos retos. Especifique qualquer grau que você
gostaria de fazer a cabeça de gradiente linear nessa direção. Você também pode
especificar quantas cores desejar. Se nenhuma posição for especificada, as cores serão
espaçadas uniformemente ao longo do comprimento da linha de gradiente. Se você
posicionar a última cor antes do final da linha de gradiente (como o azul em 50% neste
exemplo), a última cor continua até o final da linha de gradiente (FIGURA 13-31, inferior):
imagem de fundo: gradiente linear (54 graus, vermelho, laranja, amarelo, verde,
azul 50%);
DICA DE P ERFO RMANCE
Os gradientes oferecem vantagens e desvantagens quando se trata de desempenho.

No lado positivo, eles não exigem uma chamada extra para o servidor e exigem menos bytes
para download do que imagens. Por outro lado, toda essa renderização em tempo real requer
tempo e poder de processamento que podem prejudicar o desempenho. Gradientes radiais são os
piores culpados. Eles podem ser particularmente problemáticos em dispositivos móveis, onde o
poder de processamento pode ser limitado. Considere servir uma folha de estilos separada sem
gradientes para dispositivos móveis.

gradiente linear (180 graus, aqua, verde);

ou
gradiente linear (para baixo, aqua, verde);
gradiente linear (90 graus, amarelo, laranja 25%, roxo);
amarelo laranja roxo

(0%) (25%) (100%)
gradiente linear (54 graus, vermelho, laranja, amarelo, verde, azul 50%);
azul começa 50% ao

longo da linha de gradiente
linha de gradiente a 54°
FIGURA 13-31. Exemplos de gradientes lineares.
Esses exemplos são bem extravagantes, mas se você escolher suas cores e parar
corretamente, os gradientes são uma boa maneira de dar aos elementos um
sombreamento sutil e uma aparência 3D. O botão na FIGURA 13-32 usa um gradiente
de fundo para obter uma aparência 3D sem gráficos.
a.botão {
FIGURA 13-32. Um botão 3D feito
background: linear-gradient(para baixo, #e2e2e2 0%, #dbdbdb 50%,
apenas com CSS. #d1d1d1 51%, #fefe 100%);
}
Isso conclui nosso tour rápido e sujo de gradientes lineares. Você deve saber que eu
realmente apenas arranhei a superfície do comportamento do gradiente linear e

possibilidades, então você pode querer verificar os recursos na barra lateral “Leituras
Adicionais” . É hora de passar para gradientes radiais.
LEITURA ADICIONAL
Gradientes radiais A cobertura mais detalhada da sintaxe

de gradiente CSS que li está no livro de
Gradientes radiais, como o nome diz, irradiam de um ponto em um círculo ao longo de um
Eric Meyer, Colors, Backgrounds, and
raio de gradiente (como uma linha de gradiente, mas sempre aponta para fora do centro). Gradients (O'Reilly). O mesmo conteúdo
No mínimo, um gradiente radial requer duas paradas de cor, conforme mostrado neste está disponível em CSS: O
exemplo: Guia Definitivo, de Eric Meyer e
Estelle Weyl (também de O'Reilly).
imagem de fundo: gradiente radial (amarelo, verde);
Online, recomendo estas visões gerais
Por padrão, o gradiente preenche a área de fundo disponível e seu centro é posicionado no e tutoriais:
centro do elemento (FIGURA 13-33). O resultado é uma elipse se o elemento contido for • “CSS Gradients” de Chris Coyier
um retângulo e um círculo se o elemento for quadrado. (css-tricks.com/css3-gradients/)
• “Usando CSS Gradients” em
MDN Web Docs (developer.mozilla.
org/en-US/docs/Web/CSS/CSS_
Imagens/Usando_CSS_gradients)
• “CSS3 Gradients”, parte do e-book
CSS Mine de Martin Michalek
(www.cssmine.com/ebook/css3-
gradientes)
FIGURA 13-33. Um gradiente radial mínimo com tamanho e posição padrão.
Isso já parece bem legal, mas você não precisa se contentar com o padrão.
A notação radial-gradient() permite especificar a forma, o tamanho e a posição central do
gradiente:
Forma
Na maioria dos casos, a forma do gradiente radial resultará da forma do elemento ou

de um tamanho explícito aplicado a ele, mas você também pode especificar a forma
usando as palavras-chave círculo ou elipse . Quando você transforma um gradiente
em um círculo (sem especificações de tamanho conflitantes), ele permanece circular
mesmo quando está em um elemento retangular (FIGURA 13-34, superior).
imagem de fundo: gradiente radial (círculo, amarelo, verde);
Tamanho
O tamanho do gradiente radial pode ser especificado em unidades de comprimento ou

porcentagens, que se aplicam ao raio de gradiente, ou com palavras-chave. Se você
fornecer apenas um comprimento, ele será usado para largura e altura, resultando em
um círculo. Quando você fornece dois comprimentos, o primeiro é a medida horizontal
e o segundo é vertical (FIGURA 13-34, meio). Para elipses, você também pode fornecer
valores de porcentagem ou misturar porcentagens com valores de comprimento.
imagem de fundo: gradiente radial (200px 80px, aqua, verde);

radial-gradiente (círculo, amarelo, verde);
gradiente radial (200px 80px, aqua, verde);
gradiente radial (lado mais distante na parte inferior direita, amarelo, laranja 50%, roxo);
FIGURA 13-34. Exemplos de dimensionamento e posicionamento de gradientes radiais.
Há também quatro palavras-chave - lado mais próximo, canto mais próximo,

lado mais distante e canto mais distante - que definem o comprimento do raio de
gradiente em relação aos pontos no elemento que o contém.
Posição
Por padrão, o centro do gradiente é posicionado no centro do centro, mas

você pode alterar isso usando a sintaxe de posicionamento que abordamos
para a propriedade background-position . A sintaxe é a mesma, mas deve
ser precedida pela palavra-chave at , como neste exemplo (FIGURA 13-34, inferior).
Observe que, neste exemplo, incluí uma parada de cor laranja adicional na
marca de 50%.
imagem de fundo: gradiente radial (lado mais distante na parte inferior
direita, amarelo, laranja 50%, roxo);

Gradientes de repetição
Se você quiser que seu padrão de gradiente se repita, use a notação repeating-linear-gra
dient() ou repeating-radial-gradient() . A sintaxe é a mesma para gradientes simples, mas
adicionar “repetindo-” faz com que o padrão repita as paradas de cor infinitamente em ambas
as direções. Isso é comumente usado para criar padrões listrados interessantes. Neste
exemplo simples, um gradiente de branco para prata (cinza claro) se repete a cada 30 pixels
porque a cor prata está definida como 30px (FIGURA 13-35, superior):
background: repeating-linear-gradient(para baixo, branco, prata 30px);
Este exemplo cria um padrão diagonal de listras laranja e brancas (FIGURA 13-35, inferior).
As bordas são nítidas porque a faixa branca começa exatamente no ponto em que a laranja
termina (em 12px) sem desbotamento:
plano de fundo: gradiente-linear repetitivo (45 graus, laranja, laranja 12px, branco
12px, branco 24px);
gradiente-linear repetitivo (para baixo, branco, prata 30px);
repeating-linear-gradient (45 graus, laranja, laranja 12px, branco 12px, branco 24px);
FIGURA 13-35. Repetindo o padrão de gradiente.
Suporte ao navegador e prefixos de fornecedores
Todos os principais navegadores começaram a adicionar suporte para a sintaxe de gradiente

padrão entre 2012 e 2013 (consulte a Nota de suporte do navegador), portanto, eles são
confiáveis há vários anos. No entanto, se você precisar oferecer suporte a navegadores mais A sintaxe de gradiente padrão é compatível
antigos, poderá fazê-lo usando a sintaxe de gradiente proprietária de cada navegador com com Internet Explorer 10+, Edge, Firefox
um prefixo de fornecedor (consulte a barra lateral “Prefixos de fornecedor” ). Para o 16+, Chrome 26+, Safari 6.1+, iOS 7.1+ e
Android 4.4+.
Internet Explorer 9 e versões anteriores, você pode usar sua função de filtro proprietária .
Ou siga a rota de aprimoramento progressivo e use uma cor sólida como alternativa.

Prefixos de fornecedor
Os fabricantes de navegadores geralmente começam a mexer em soluções proprietárias para tecnologias da

Web de ponta antes que as especificações estejam totalmente definidas. Por muitos anos, eles mantiveram sua
experimentação separada da implementação final, adicionando um prefixo de fornecedor
(ou prefixo do navegador) ao nome da propriedade ou função. O prefixo indica que a implementação é
proprietária e ainda está em andamento. Por exemplo, enquanto o Safari estava implementando formas de quebra
de texto, ele usava sua própria versão prefixada -webkit- da propriedade padrão shape-outside :
-webkit-shape-outside: url(cube.png);
A TABELA 13-1 lista os prefixos usados pelos principais navegadores.
TABELA 13-1. Prefixos do fornecedor do navegador
Prefixo Organização Navegadores mais populares
-EM- Microsoft Internet Explorer
-moz- Mozilla Foundation Firefox, Camino, SeaMonkey
-o- Software Opera Ópera, Ópera Mini, Ópera Móvel
-webkit- Originalmente Apple; Safari, Chrome, Android, Silk,

agora código aberto BlackBerry, WebOS, muitos outros
Os prefixos de fornecedores permitiram que os desenvolvedores começassem a usar novos recursos CSS
interessantes nos navegadores que os suportavam, o que foi uma vantagem para avançar o design da web
e a especificação. No lado negativo, todo o sistema acabou sendo complicado e muitas vezes mal utilizado.
No final, os fabricantes de navegadores concordaram em colocar o sistema de prefixo em repouso e não liberar
mais propriedades proprietárias.
Atualmente, os navegadores ocultam recursos experimentais por trás de “sinalizadores” (opções que você pode
ativar ou desativar) ou em versões de visualização de tecnologia separadas que os desenvolvedores podem acessar
apenas para fins de teste. Quando um recurso parece estável, ele é tornado público na versão formal do navegador.
Veremos métodos para testar recursos CSS individuais no Capítulo 19, Mais técnicas de CSS.
No entanto, existem algumas propriedades e recursos CSS que entraram em voga durante a era do prefixo que
ainda exigem prefixos para funcionar em navegadores mais antigos, caso você opte por suportá-los. A sintaxe de
gradiente é um desses recursos.
Ferramentas de prefixação
Escrever todas essas propriedades prefixadas redundantes é uma grande dor, mas, felizmente, existem algumas
ferramentas que irão gerá-las para você automaticamente.
Se você usar uma das sintaxes de pré-processador CSS (como Sass, LESS ou Stylus), poderá aproveitar seus
prefixos “mixins”. Falaremos mais sobre pré-processadores no Capítulo 19.
Se você escrever seu CSS na sintaxe padrão, poderá executá-lo por meio de um pós -processador
como AutoPrefixer quando terminar. O Autoprefixer analisa seus estilos e adiciona automaticamente
prefixos apenas para as propriedades e notações que precisam deles.
A prefixação acontece como parte de uma “etapa de compilação” por meio de uma ferramenta de compilação como
o Grunt. Para uma boa visão geral, consulte “Autoprefixer: um pós-processador lidando com prefixos de fornecedores
da melhor maneira possível” em CSS-Tricks (css-tricks.com/autoprefixer/). Falarei mais sobre ferramentas de
construção no Capítulo 20, Ferramentas modernas de desenvolvimento da Web.

Um gradiente para todos os navegadores
O exemplo a seguir mostra o gradiente linear amarelo para verde escrito para abordar
todos os navegadores, passados e presentes, com o filtro do Internet Explorer
equivalente jogado em boa medida. Observe que há diferenças na sintaxe. Onde a
especificação CSS3 usa a palavra-chave to bottom , a maioria das outras usa top. Uma
versão muito antiga usada pelos navegadores WebKit usados –webkit-gradient
para gradientes lineares e radiais, mas foi rapidamente substituído por funções separadas.
Outra diferença não evidente neste exemplo é que na sintaxe antiga, 0deg apontava para
a borda direita, não para a borda superior como era padronizado em CSS3, e os ângulos
aumentavam no sentido anti-horário.
Este é um pedaço sério de código para um único gradiente e, felizmente, estamos muito
perto de isso não ser mais necessário:
fundo: #ffff00; /* Navegadores antigos */

background: -moz-linear-gradient(topo, #ffff00 0%, #00ff00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, superior esquerdo, inferior esquerdo, color

stop(0%,#ffff00), color-stop(100%,#00ff00)); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(top, #ffff00 0%,#00ff00 100%); /* Chrome10+,

Safari5.1+ */
background: -o-linear-gradient(top, #ffff00 0%,#00ff00 100%); /* Ópera
11.10+ */
background: -ms-linear-gradient(top, #ffff00 0%,#00ff00 100%); /* IE10+ */
background: linear-gradient(para baixo, #ffff00 0%,#00ff00 100%); /* Padrão

W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00',
endColorstr='#00ff00',GradientType=0 ); /* IE6-9 */
Nos próximos capítulos, sempre que uma propriedade exigir prefixos de fornecedores,
com certeza anotarei. Caso contrário, você pode assumir que o CSS padrão é tudo o que
você precisa.
Projetando gradientes
Esse último exemplo de código foi um doozy! Prefixos de fornecedores à parte, apenas a
tarefa de descrever gradientes pode ser assustadora. Embora não seja impossível
escrever o código à mão, recomendo que você faça o que eu faço – use uma ferramenta
de gradiente online. Uma opção é o Ultimate CSS Gradient Generator da Colorzilla
(www.colorzilla.com/gradient-editor/), mostrado na FIGURA 13-36. Basta inserir quantas
paradas de cores desejar, deslizar os controles deslizantes até obter a aparência desejada
e copiar o código. Foi exatamente o que fiz para obter o exemplo que acabamos de ver.
O CSS Gradient Generator da Virtuosoft é outra boa opção que também inclui suporte
para repetição de gradientes (www.virtuosoft.eu/
tools/css-gradient-generator/).

Finalmente, Folhas de Estilo Externas
FIGURA 13-36. O Ultimate CSS Gradient Generator (www.colorzilla.com/gradient editor) facilita muito
a criação de gradientes CSS.
Se você quer ficar louco, dê uma olhada nos padrões de fundo selvagens feitos com
gradientes montados por Lea Verou em sua CSS3 Patterns Gallery (lea.verou.me/
css3patterns) (FIGURA 13-37). É inspirador, e você pode dar uma olhada no código usado
para criá-los.
FINALMENTE, FOLHAS DE ESTILO EXTERNAS
De volta ao Capítulo 11, Apresentando folhas de estilo em cascata, eu disse a você que
existem três maneiras de conectar folhas de estilo a um documento HTML: inline com o
atributo style , incorporado com o elemento style e como um .css externo
documento vinculado ou importado para o documento. Nesta seção, finalmente chegamos a
essa terceira opção.
FIGURA 13-37. Galeria de padrões
Folhas de estilo externas são de longe a maneira mais poderosa de usar CSS porque você
CSS3 montada por Lea Verou
(lea.verou.me/css3patterns). Você também pode fazer alterações de estilo em um site inteiro simplesmente editando um único documento
pode gostar do livro de Lea, CSS Secrets: de folha de estilo. Essa é a vantagem de ter todas as informações de estilo em um só lugar,
Better Solutions to Everyday Web Design e não misturadas com a fonte do documento.
Problems (O'Reilly).
Além disso, como um único documento de estilo é baixado e armazenado em cache pelo
navegador para todo o site, há menos código para baixar com cada documento, resultando
em melhor desempenho.
Primeiro, um pouco sobre o próprio documento de folha de estilo. Uma folha de estilo externa
é um documento de texto simples com pelo menos uma regra de folha de estilo. Ele pode
não incluir nenhuma tag HTML (de qualquer forma, não há motivo para incluí-las). Pode conter

comentários, mas eles devem usar a sintaxe de comentário CSS que você já viu:
/* Este é o fim da seção */
A folha de estilo deve ser nomeada com o sufixo .css (há algumas exceções a essa
regra, mas é improvável que você as encontre como iniciante). Também pode começar
com @charset at-rule para declarar a codificação de caracteres, embora você realmente
precise fazer isso apenas se estiver usando uma codificação diferente de UTF-8. Se
você usar @charset, ele deve ser o primeiro elemento na folha de estilo, sem caracteres,
incluindo comentários ou regras de estilo, antes dele.
A FIGURA 13-38 mostra a aparência de um documento de folha de estilo curto em meu editor de texto.
FIGURA 13-38. As folhas de estilo externas contêm apenas regras e comentários CSS em um
documento de texto simples.
Existem duas maneiras de aplicar uma folha de estilo externa: o elemento link e uma
regra @import . Vejamos esses dois métodos de anexo.
Usando o elemento link

O elemento link define um relacionamento entre o documento atual e um recurso
externo. De longe, seu uso mais popular é vincular a folhas de estilo. O elemento link
vai no cabeçalho do documento, conforme mostrado aqui:
<cabeça>
<title>Títulos são obrigatórios.</title>

<link rel="stylesheet" href="/path/stylesheet.css">
</head>
Você precisa incluir dois atributos no elemento link :

EXERCÍCIO 13-8. rel="folha de estilo"

Define a relação do documento vinculado ao documento atual. O valor do atributo rel é sempre
Fazendo uma folha de
folha de estilo quando você está vinculando a uma folha de estilo.
estilo externa
href="url"
Não há problema em usar uma folha de
Fornece a localização do arquivo .css .
estilo incorporada ao projetar uma página, mas
provavelmente é melhor movê-la para uma folha
Você pode incluir vários elementos de link em diferentes folhas de estilo e todos eles se aplicarão. Se
de estilo externa assim que o design estiver
concluído, para que possa ser reutilizado por vários
houver conflitos, o que estiver listado por último substituirá as configurações anteriores, devido à
documentos no site. Faremos exatamente isso para ordem das regras e à cascata.
a folha de estilo do menu de verão.
1. Abra a versão mais recente do menu.html de

verão. Selecione e corte todas as regras Importando com @import
dentro do elemento de estilo , mas deixe o
O outro método para anexar uma folha de estilo externa a um documento é importá-la com uma regra
<style>...</style>
tags porque nós as usaremos em um momento. @import . A regra @import é outro tipo de regra que você pode adicionar a uma folha de estilo, seja
em um documento de folha de estilo .css externo ou diretamente no elemento de estilo , conforme
2. Crie um novo texto ASCII simples mostrado no exemplo a seguir:

documento e cole todas as regras de estilo. <cabeça>
Certifique-se de que nenhuma marcação tenha <estilo>
entrado por acidente. @import url("/path/stylesheet.css");
3. Salve este documento como menustyles.css p { font-face: Verdana;}
no mesmo diretório que o documento Summer
</style>
menu.html . <title>Títulos são obrigatórios.</title>
</head>
4. Agora, de volta ao summer-menu.html,
adicione uma regra @import para anexar a Neste exemplo, uma URL relativa é mostrada, mas também pode ser uma URL absoluta (começando
folha de estilo externa: com http://). A regra @import deve ir no início da folha de estilo antes de qualquer seletor. Você pode
<estilo> importar mais de uma folha de estilo e todas elas serão aplicadas, mas as regras da última folha de
@import url(menustyles.css); estilo listada têm precedência sobre as anteriores.
</style>
Salve o arquivo e recarregue-o no
navegador. Deve ter a mesma aparência de Você também pode limitar a importação de uma folha de estilo a tipos de mídia específicos (como tela,
quando a folha de estilo foi incorporada. Se impressão ou projeção, para citar alguns) ou ambientes de visualização (orientação, tamanho da tela
não, volte e certifique-se de que tudo etc.) usando consultas de mídia. As consultas de mídia são um método para aplicar estilos com base
corresponde aos exemplos.
na mídia usada para exibir o documento. Eles aparecem após a regra @import em uma lista separada
por vírgulas. Por exemplo, se você criou uma folha de estilo que deve ser importada e usada apenas
5. Exclua todo o elemento de estilo e, desta vez,
quando o documento for impresso, use esta regra:
adicionaremos a folha de estilo com um elemento
de link no cabeçalho do
documento.
@import url(print_styles.css) print;
<link rel="stylesheet"
Ou para servir uma folha de estilo especial apenas para dispositivos pequenos, você também pode
href="menustyles.css"> Novamente,
consultar a viewport:
teste seu trabalho salvando o documento e
dando uma olhada nele no navegador. @import url(small_device.css) tela e (max-width: 320px;);
Falaremos muito mais sobre media queries no Capítulo 17, Responsive Web Design, mas vou
mencioná-las aqui porque são relevantes para a importação de folhas de estilo.
Você pode tentar os métodos link e @import no EXERCÍCIO 13-8.

Embrulhando-o
Usando folhas de estilo modulares

Como você pode compilar informações de várias folhas de estilo externas, as folhas de estilo
modulares tornaram-se uma técnica popular para gerenciamento de estilos.
Muitos desenvolvedores mantêm estilos que reutilizam com frequência, como tratamentos de
tipografia, regras de layout ou estilos relacionados a formulários, em folhas de estilo separadas
e, em seguida, combinam-nos de maneira combinada usando regras @import . Novamente,
as regras @import precisam vir antes das regras que usam seletores.
Aqui está um exemplo de uma folha de estilo que importa várias folhas de estilo externas: NOTA
/* tipografia básica */ Você também pode fornecer a URL sem

@import url("type.css"); a notação url() :
/* entradas de formulário */
@import "/path/style.css";
@import url("forms.css"); Novamente, nomes de caminho absolutos,
começando na raiz, garantirão que o
/* navegação */
documento .css sempre seja encontrado.
@import url("list-nav.css");
/* estilos específicos do site */

corpo { fundo: laranja; }
/* mais regras de estilo */
Essa é uma boa técnica para se ter em mente ao adquirir experiência na criação de sites.
Você descobrirá que existem algumas soluções que funcionam bem para você, e é bom não
ter que reinventar a roda a cada novo site. As folhas de estilo modulares são um bom
dispositivo de organização e economia de tempo; no entanto, eles podem ser um problema
para desempenho e armazenamento em cache.
Se você usar esse método, é recomendável compilar todos os estilos em um único documento
antes de entregá-los a um navegador. Não se preocupe, você não precisa fazer isso
manualmente; existem ferramentas por aí que farão isso por você.
Os pré-processadores CSS LESS e Sass (que serão apresentados formalmente no Capítulo
20) são apenas duas ferramentas que oferecem funcionalidade de compilação.
EMBRULHANDO-O
Cobrimos muito terreno (ou pano de fundo, para ser mais preciso) neste capítulo. Examinamos
maneiras de definir as cores de primeiro plano e plano de fundo para um elemento usando
vários sistemas numéricos e nomes de cores. Analisamos as opções para ajustar o nível de
transparência com a propriedade de opacidade e os espaços de cores RGBa e HSLa.
Passamos muito tempo explorando as várias maneiras de adicionar uma imagem de fundo e
ajustar como ela se repete, onde a imagem de origem é colocada e como ela é dimensionada.
Vimos como os gradientes lineares e radiais também podem ser usados como imagens de
fundo. Ao longo do caminho, você pegou seletores de pseudoclasse, pseudoelemento e
atributo e procurou maneiras de anexar folhas de estilo externas. Acho que é o suficiente para
um capítulo! Veja o quanto você se lembra com este pequeno teste.

Teste-se
TESTE-SE
Desta vez, testarei suas proezas de fundo inteiramente com perguntas de correspondência
e de múltipla escolha. As respostas aparecem no Apêndice A.
1. Qual dessas áreas é preenchida com uma cor de fundo por padrão?
uma. A área por trás do conteúdo
b. Qualquer preenchimento adicionado ao redor do conteúdo
c. A área sob a fronteira
d. O espaço de margem ao redor do elemento
e. Tudo o que precede
f. a e b
g. a, b e c
2. Qual destas não é uma forma de especificar a cor branca em CSS?
uma. #FFFFFF
b. #FFF
c. rgb(255, 255, 255)
d. rgb(FF, FF, FF)
e. branco
f. rgb(100%, 100%, 100%)
3. Combine a pseudoclasse com os elementos que ela visa.
uma. a:link 1. Links que já foram clicados
b. a:visitou 2. Um elemento destacado e pronto para entrada
c. a: passar o mouse 3. Um elemento que é o primeiro elemento filho de seu pai
d. a:ativo 4. Um link com o ponteiro do mouse sobre ele
e. :foco 5. Links que ainda não foram visitados
f. :first-child 6. Um link que está sendo clicado

Teste-se
4. Combine as regras a seguir com suas respectivas amostras, conforme mostrado

na FIGURA 13-39. Todas as amostras na figura usam o mesmo documento de
origem, consistindo em um elemento de parágrafo ao qual foram aplicados alguns
preenchimentos e uma borda.
1 2 3
4 5 6
FIGURA 13-39. Amostras para a pergunta 4.
uma. corpo {
imagem de fundo: url(graphic.gif);
}
b. p{
posição de fundo: 50% 0%;
}
c. corpo {
}
d. p{
background: url(graphic.gif) sem repetição no centro direito;
}
e. corpo {
background-repeat: repeat-y;
}
f. body
{ background: url(graphic.gif) no-repeat right center;
}

Revisão de CSS: Propriedades de cor e plano de fundo
REVISÃO CSS: COR E FUNDO

PROPRIEDADES
Aqui está um resumo das propriedades cobertas neste capítulo, em ordem

alfabética.
background Propriedade abreviada que combina propriedades de plano de fundo
background-attachment Especifica se a imagem de fundo rola ou é

fixo
clipe de fundo Especifica até onde a imagem de fundo deve se estender
cor de fundo Especifica a cor de fundo de um elemento
imagem de fundo Fornece a localização de uma imagem para usar como plano de fundo
origem de fundo Determina como a posição do plano de fundo é calculada (da

borda da borda, preenchimento ou caixa de conteúdo)
posição de fundo Especifica a localização da imagem de fundo de origem
repetição de fundo Especifica se e como uma imagem de fundo se repete (telhas)
tamanho de fundo Especifica o tamanho da imagem de fundo
cor Especifica a cor do primeiro plano (texto e borda)
opacidade Especifica o nível de transparência do primeiro plano e do plano

de fundo

CAPÍTULO
PENSANDO POR DENTRO 14

A CAIXA
No Capítulo 11, Introdução às folhas de estilo em cascata, descrevi o modelo de caixa NESTE CAPÍTULO
como um dos conceitos fundamentais do CSS. De acordo com o modelo de caixa, cada
As partes de uma caixa de elemento
elemento em um documento gera uma caixa na qual propriedades como largura, altura,
preenchimento, bordas e margens podem ser aplicadas. Você provavelmente já tem uma Configurando as dimensões da caixa
ideia de como as caixas de elementos funcionam ao adicionar planos de fundo aos
elementos. Este capítulo abrange todas as propriedades relacionadas à caixa, começando Preenchimento
com uma visão geral dos componentes de uma caixa de elemento e, em seguida, Fronteiras
analisando as propriedades da caixa de dentro para fora: dimensões de conteúdo,
preenchimento, bordas e margens. Contornos
Margens
A CAIXA DE ELEMENTOS
Atribuindo funções de exibição
Como vimos, cada elemento em um documento, tanto em nível de bloco quanto em linha,
Adicionando uma sombra projetada
gera uma caixa de elemento retangular. Os componentes de uma caixa de elemento são
diagramados na FIGURA 14-1. Preste atenção à nova terminologia – ela será útil para
manter as coisas corretas mais adiante no capítulo.
Borda externa Borda interna
Área de margem
Área de preenchimento
Vestibulum varius neque nec sem aliquam,

a interdum eros feugiat. Nunc ultricies leo ac
Área de conteudo
pulvinar blandit. Morbi vestibulum, dolor sed
venenatis gravida, arcu odio
FIGURA 14-1. As partes de uma caixa de elemento de acordo com o modelo de caixa CSS.
355
Especificando as dimensões da caixa
Área de conteudo
No centro da caixa do elemento está o próprio conteúdo. Na FIGURA 14-1, a área de conteúdo é indicada
por uma caixa branca.
Bordas internas
As bordas da área de conteúdo são chamadas de bordas internas da caixa do elemento. Embora as
A quantidade de espaço bordas internas sejam distinguidas por uma mudança de cor na FIGURA 14-1, em páginas reais, a borda
ocupado por um elemento na da área de conteúdo é invisível.
página inclui o conteúdo mais a Preenchimento
quantidade total de preenchimento,

O preenchimento é a área entre a área de conteúdo e uma borda opcional.
bordas e margens aplicadas ao
No diagrama, a área de preenchimento é indicada por uma cor amarelo-laranja.
elemento. O preenchimento é opcional.
Fronteira
A borda é uma linha (ou linha estilizada) que envolve o elemento e seu preenchimento. As bordas
também são opcionais.
Margem
A margem é uma quantidade opcional de espaço adicionada na parte externa da borda. No diagrama, a
margem é indicada com sombreamento azul claro, mas, na realidade, as margens são sempre
transparentes, permitindo que o plano de fundo do elemento pai apareça.
Borda externa
As bordas externas da área de margem formam as bordas externas da caixa do elemento. Esta é a área
total que o elemento ocupa na página e inclui a largura da área de conteúdo mais a quantidade total de
preenchimento, borda e margens aplicadas ao elemento. A borda externa no diagrama é indicada com
uma linha pontilhada, mas em páginas da Web reais, a borda da margem é invisível.
Todos os elementos possuem esses componentes de caixa; no entanto, como você verá, algumas
propriedades se comportam de forma diferente dependendo se o elemento é bloco ou embutido. Na verdade,
veremos algumas dessas diferenças imediatamente quando analisarmos as dimensões das caixas.
ESPECIFICAÇÃO DAS DIMENSÕES DA CAIXA
largura
Valores: comprimento | porcentagem | auto
Predefinição: auto
Aplica-se a: elementos em nível de bloco e elementos em linha substituídos (como imagens)
Herda: não

altura
Herda: não
dimensionamento de caixa
Valores: DICA DE SUPORTE DO NAVEGADOR

caixa de conteúdo | caixa de borda
Predefinição: caixa de conteúdo Os principais navegadores começaram a oferecer
todos os elementos
suporte à propriedade box-sizing em 2011 e 2012.
Aplica-se a:
Para navegadores lançados antes disso (Chrome
Herda: não
<10, Safari <5.1, Safari iOS <5.1 ou Android <4.3),
existe a versão prefixada –webkit- box-sizing, mas

Por padrão, a largura e a altura de um elemento de bloco são calculadas automaticamente
neste ponto, o prefixo não é mais considerado
pelo navegador (portanto, o valor automático padrão ). A caixa será tão larga quanto a janela
necessário. O Internet Explorer 6 e 7 não suportam
do navegador ou outro elemento de bloco que contenha, e tão alto quanto necessário para
tamanho de caixa , mas estão bastante extintos.
caber no conteúdo. No entanto, você pode usar as propriedades de largura e altura para
tornar a área de conteúdo de um elemento em uma largura ou altura específica.
Infelizmente, definir as dimensões da caixa não é tão simples quanto simplesmente soltar
essas propriedades em sua folha de estilo. Você precisa saber exatamente qual parte da caixa
do elemento você está dimensionando.
Existem duas maneiras de especificar o tamanho de um elemento. O método padrão—

introduzido no CSS1—aplica os valores de largura e altura à caixa de conteúdo. Isso significa
que o tamanho resultante do elemento será as dimensões que você especificar mais a
quantidade de preenchimento e bordas que foram adicionadas ao elemento. O outro método -
introduzido como parte da propriedade box-sizing em CSS3 - aplica os valores de largura e
altura à caixa de borda, que inclui o conteúdo, o preenchimento e a borda. Com este método,
a caixa de elemento visível resultante, incluindo preenchimento e bordas, terá exatamente as
dimensões que você especificar. Vamos nos familiarizar com os dois métodos nesta seção.
Independentemente do método escolhido, você pode especificar a largura e a altura apenas

para elementos em nível de bloco e elementos embutidos sem texto, como imagens.
As propriedades de largura e altura não se aplicam a elementos de texto embutido (não
substituídos) e são ignoradas pelo navegador. Em outras palavras, você não pode especificar
a largura e a altura de uma âncora (a) ou elemento forte (veja Nota). NOTA
Na verdade, existe uma maneira de aplicar largura
e propriedades de altura para elementos embutidos,

Dimensionando a caixa de conteúdo
como âncoras (a): forçando-os a se comportar como
elementos de bloco com o
Por padrão (ou seja, se você não incluir uma regra de dimensionamento de caixa em seus
estilos), as propriedades de largura e altura são aplicadas à caixa de conteúdo. É assim que propriedade de exibição , abordada no final deste
capítulo.
todos os navegadores atuais interpretam os valores de largura e altura, mas você pode
especificar explicitamente esse comportamento definindo box-sizing: content-box.
14. Pensando dentro da caixa 357

No exemplo a seguir e na FIGURA 14-2, uma caixa simples recebe uma largura de 500 pixels e uma altura
de 150 pixels, com 20 pixels de preenchimento, uma borda de 5 pixels e uma margem de 20 pixels ao
redor. No modelo de caixa de conteúdo padrão, os valores de largura e altura são aplicados apenas à
área de conteúdo.
p{
fundo: #f2f5d5;
largura: 500px;
altura: 150px;
preenchimento: 20px;
borda: cinza sólido de 5px;
margem: 20px;
}
A largura resultante da caixa do elemento visível acaba sendo de 550 pixels: o conteúdo mais 40px de
preenchimento (20px à esquerda e à direita) e 10px de borda (5px à esquerda e à direita).
Caixa de elemento visível =
5px + 20px + 500px largura + 20px + 5px = 550 pixels
Quando você adiciona 40 pixels de margem, a largura de toda a caixa do elemento é de 590 pixels. Saber
o tamanho resultante de seus elementos é fundamental para que os layouts se comportem de forma
previsível.
Caixa de elemento =
20px + 5px + 20px + 500px largura + 20px + 5px + 20px = 590 pixels
modelo de caixa de conteúdo
20px 5px 20px largura: 500px 20px 5px 20px
Largura total da caixa visível = 550px
Largura total do elemento = 590px
FIGURA 14-2. Especificando a largura e a altura com o modelo content-box .
Usando o modelo de caixa de borda

A outra maneira de especificar o tamanho de um elemento é aplicar dimensões de largura e altura a toda
a caixa visível, incluindo o preenchimento e a borda.
Como esse não é o comportamento padrão do navegador, você precisa definir explicitamente box-sizing:
border-box na folha de estilo.

Vejamos o mesmo exemplo de parágrafo da seção anterior e vejamos o que acontece

quando o tornamos 500 pixels usando o método border-box (FIGURA 14-3). Todas as
outras declarações de estilo para a caixa permanecem as mesmas.
p{
…
dimensionamento de caixa: caixa de borda;

largura: 500px;
altura: 150px;
}
Agora a largura da caixa visível é de 500 pixels (compare com 550 pixels no modelo
content-box), e a largura total do elemento é de 540px. Muitos desenvolvedores
consideram o modelo de caixa de borda uma maneira mais intuitiva de dimensionar elementos.
É particularmente útil para especificar larguras em porcentagens, que é a base do
design responsivo. Por exemplo, você pode fazer duas colunas com 50% de largura e
saber que elas caberão uma ao lado da outra sem ter que mexer com a adição de
preenchimento calculado e larguras de borda à mistura (embora você ainda precise
levar em conta as margens).
modelo de caixa de borda
20px largura: 500px; 20px
Largura total da caixa visível = 500px
Largura total do elemento = 540px
box-sizing: content-box;
largura: 500px;
dimensionamento de caixa: caixa de borda;
largura: 500px;
FIGURA 14-3. Dimensionando um elemento com o método border-box . O diagrama inferior

compara as caixas resultantes de cada método de dimensionamento.

Na verdade, muitos desenvolvedores simplesmente configuram tudo no documento para usar o

modelo border-box , definindo-o no elemento raiz (html) , e definindo todos os outros elementos
para herdar, assim:
html {box-sizing: border-box;}

*, *:antes, *:depois {box-sizing: herdar;}
Para obter mais informações sobre essa técnica, leia o artigo de Chris Coyier “Inheriting box-sizing
Provavelmente Slightly Better Best-Practice” (css-tricks.com/inheriting box-sizing-probably-slightly-
better-best-practice).
Máximo e Mínimo
Dimensões
Especificando a Altura
Se você deseja definir um limite no
tamanho de um elemento de bloco, use
A propriedade height funciona da mesma forma que a largura. Na prática geral, é menos comum
as propriedades max- e min- largura e
especificar a altura dos elementos. É mais de acordo com a natureza da mídia permitir que a altura
altura.
seja calculada automaticamente, permitindo que a caixa do elemento mude com base no tamanho
altura máxima, largura máxima, da fonte, nas configurações do usuário ou em outros fatores. Se você especificar uma altura para
min-altura, min-largura um elemento que contém texto, certifique-se de considerar também o que acontece se o conteúdo
não couber. Felizmente, o CSS oferece algumas opções, como veremos na próxima seção.
Valores: comprimento | porcentagem | Nenhum
Essas propriedades funcionam apenas com

nível de bloco e elementos substituídos
(como imagens). Quando o modelo de caixa
de conteúdo é usado, o valor se aplica apenas
Como lidar com estouro
à área de conteúdo, portanto, se você aplicar
Quando um elemento é dimensionado muito pequeno para seu conteúdo, você pode especificar o
preenchimento, bordas ou margens, isso tornará
a caixa de elemento geral que fazer com o conteúdo que não cabe usando a propriedade overflow .
maior, mesmo se uma propriedade max-

transbordar
width ou max height tiver sido especificada.
Observe também que o IE8 não suporta Valores: visível | escondido | rolar | auto
dimensionamento de caixa em elementos com max-/
tamanhos mínimos . Predefinição: visível

AVISO Herda: não
Evite usar larguras e alturas máximas e mínimas A FIGURA 14-4 demonstra os valores predefinidos para overflow. Na figura, os vários valores são
com a caixa de borda aplicados a um elemento de 150 pixels quadrados. A cor de fundo torna as bordas da área de
modelo. Eles são conhecidos por causar
conteúdo aparentes.
problemas no navegador.
visível
O valor padrão é visível, o que permite que o conteúdo fique sobre a caixa do elemento para
que tudo possa ser visto.
escondido
Quando o estouro é definido como oculto, o conteúdo que não cabe é cortado e não aparece
além das bordas da área de conteúdo do elemento.
rolagem
Quando a rolagem é especificada, as barras de rolagem são adicionadas à caixa do elemento

para permitir que os usuários rolem pelo conteúdo. Esteja ciente de que eles podem se tornar

Preenchimento
visível escondido rolagem automático (texto curto) automático (texto longo)
FIGURA 14-4. Opções para lidar com estouro de conteúdo. As opções de rolagem e automática
têm barras de rolagem cinza estreitas à direita do texto (conforme renderizado no macOS).
visível apenas quando você clica no elemento para rolá-lo. Há um problema com esse valor no iOS
antigo (<4), Android (<2.3) e alguns outros navegadores móveis mais antigos, portanto, pode valer a
pena usar uma alternativa mais simples para overflow:scroll para dispositivos móveis.
auto
O valor auto permite que o navegador decida como lidar com o estouro. Na maioria dos casos, as
barras de rolagem são adicionadas apenas quando o conteúdo não cabe e são necessárias.
PREENCHIMENTO
O preenchimento é o espaço entre a área de conteúdo e a borda (ou o local que a borda estaria se não
fosse especificada). Acho útil adicionar preenchimento aos elementos ao usar uma cor de fundo ou uma O preenchimento é o
borda. Dá ao conteúdo um pouco de espaço para respirar e evita que a borda ou a borda do plano de
espaço entre o conteúdo e o
fundo batam contra o texto. a fronteira.
Você pode adicionar preenchimento aos lados individuais de qualquer elemento (nível de bloco ou
embutido). Há também uma propriedade de preenchimento abreviado que permite adicionar preenchimento
em todos os lados de uma só vez.
padding-top, padding-right, padding-bottom, padding-left

Valores: comprimento | percentagem
Predefinição: 0
Herda: não

Preenchimento
preenchimento
Predefinição: 0
Herda: não
As propriedades padding-top, padding-right, padding-bottom e padding-left especificam uma

quantidade de preenchimento para cada lado de um elemento, conforme mostrado neste exemplo
e na FIGURA 14-5 (observe que também adicionei um cor de fundo para tornar as bordas externas
da área de preenchimento aparentes).
blockquote
{ padding-top: 2em;
padding-right: 4em;
estofamento-fundo: 2em;
padding-esquerda: 4em;
cor de fundo: #D098D4; /* luz verde */
}
2em
4em 4em
2em
FIGURA 14-5. Adicionando preenchimento ao redor do conteúdo de um elemento.
Especifique o preenchimento em qualquer uma das unidades de comprimento CSS (em e px são
as mais comuns) ou como uma porcentagem da largura do elemento pai. Sim, a largura do pai é
usada como base, mesmo para preenchimento superior e inferior. Se a largura do elemento pai
mudar, o mesmo acontecerá com os valores de preenchimento em todos os lados do elemento
filho, o que torna os valores percentuais um pouco complicados de gerenciar.
A propriedade de preenchimento abreviado

Como alternativa para definir o preenchimento de um lado de cada vez, você pode usar a
propriedade de preenchimento de mão curta para adicionar preenchimento ao redor do elemento.
A sintaxe é interessante; você pode especificar quatro, três, dois ou um valor para um único preenchimento
propriedade. Vamos ver como isso funciona, começando com quatro valores.
Quando você fornece quatro valores de preenchimento , eles são aplicados a cada lado no
sentido horário , começando na parte superior. Algumas pessoas usam o dispositivo mnemônico
“TRouBLe” para a ordem Superior Direita Inferior Esquerda. Esta é uma sintaxe comum para
aplicar valores abreviados em CSS, então dê uma olhada cuidadosa:

Preenchimento
preenchimento: canto superior direito inferior esquerdo;
Usando a propriedade padding , podemos reproduzir o padding especificado com as

quatro propriedades individuais no exemplo anterior assim:
blockquote
{ preenchimento: 2em 4em 2em 4em;
cor de fundo: #D098D4;
}
Se o preenchimento esquerdo e direito forem iguais, você poderá reduzi-lo fornecendo

apenas três valores. O valor para “right” (o segundo valor na string) será espelhado e usado
NUM RELANCE
para “left” também. É como se o navegador assumisse que o valor “left” está faltando,
então ele apenas usa o valor “right” em ambos os lados. A sintaxe para três valores é a Valores abreviados
seguinte: 1 valor
preenchimento: superior direito/ inferior esquerdo; preenchimento: 10px;
Aplicado em todos os lados.

Essa regra seria equivalente ao exemplo anterior porque o preenchimento nas bordas
esquerda e direita do elemento é definido como 4em: 2 valores
blockquote preenchimento: 10px 6px;

{ preenchimento: 2em 4em 2em;
O primeiro é superior e inferior; a segunda é
cor de fundo: #D098D4;
} esquerda e direita.
Continuando com este padrão, se você fornecer apenas dois valores, o primeiro é usado 3 valores
para as bordas superior e inferior e o segundo é usado para as bordas esquerda e direita: preenchimento: 10px 6px 4px;
O primeiro é o topo; a segunda é esquerda e
direita; terceiro é inferior.
preenchimento: superior/ inferior direito/ esquerdo;
Novamente, o mesmo efeito obtido pelos dois exemplos anteriores pode ser alcançado 4 valores
com esta regra:

preenchimento: 10px 6px 4px 10px;
blockquote Aplicado no sentido horário nas bordas
{ preenchimento: 2em 4em; superior, direita, inferior e esquerda consecutivamente
cor de fundo: #D098D4; (TRBL).
}
Observe que todos os exemplos anteriores têm o mesmo efeito visual mostrado na FIGURA
14-5.
Por fim, se você fornecer apenas um valor, ele será aplicado a todos os quatro lados do
elemento. Esta declaração aplica 15 pixels de preenchimento em todos os lados de uma div
elemento:
div#anúncio {
borda: 1px sólido;
}
Sinta como adicionar preenchimento a elementos no EXERCÍCIO 14-1.

Preenchimento
EXERCÍCIO 14-1. Adicionando um pouco de preenchimento
Neste exercício, começaremos a adicionar propriedades de caixa para melhorar a aparência de um site da
fictícia Black Goose Bakery. Eu lhe dei uma vantagem marcando a fonte (bakery.html). Ao contrário das
páginas dos exercícios anteriores, a página de padaria usa uma folha de estilo externa, bakery-styles.css.
Tudo o que faremos para formatar este site nos próximos capítulos acontecerá no arquivo CSS, portanto,
você nunca precisará editar o documento HTML; no entanto, esse é o arquivo que você abrirá no navegador
para ver os resultados de suas alterações de estilo. Todos os arquivos estão disponíveis em
learningwebdesign.com/5e/materials.
A FIGURA 14-6 mostra fotos antes e depois do local. Serão necessários vários exercícios ao longo de três
capítulos para chegar lá, e o preenchimento é apenas o começo. No Capítulo 16, Layout CSS com Flexbox
e Grid, transformaremos essa lista de navegação feia em uma bela barra de menu de navegação (enquanto
isso, desvie os olhos) e daremos à página um layout de duas colunas adequado para telas maiores.
NOTA
Comece familiarizando-se com o documento de origem. Abra bakery.html em um navegador e um editor
Este design usa uma fonte da web do Google
de texto para ver com o que você precisa trabalhar. A folha de estilo foi adicionada com uma regra @import
chamada Stint. Você precisará ter um
no elemento de estilo . O documento foi marcado com cabeçalho
conexão com a internet para vê-lo.
(incluindo uma seção de navegação ), seções principal, lateral e rodapé .
Se você estiver trabalhando offline, verá
Agora dê uma olhada em bakery-styles.css em seu editor de texto. Usei comentários na folha de estilo
Georgia ou alguma fonte com serifa, o que é
para organizar os estilos relacionados a cada seção (pontos de bônus para você se você mantiver os
bom para esses propósitos, mas sua página
estilos organizados à medida que avança!). Você encontrará estilos para formatação de texto, cores e
não será exatamente como as das figuras. planos de fundo — todas as propriedades que abordamos até agora neste livro, portanto, devem parecer
familiares. Agora vamos adicionar algumas regras ao bakery-styles.css para adicionar preenchimento aos elementos.
FIGURA 14-6. Antes e depois do site da Black Goose Bakery.

Preenchimento
1. A primeira coisa que faremos é definir o modelo de dimensionamento de caixa para caixa de borda para todos os
elementos do documento. Adicione essas novas regras ao elemento de estilo existente. Isso tornará as medições mais
simples daqui para frente.
html { box-
sizing: border-box; } * { tamanho da
caixa: herdar; }
2. Agora encontre os estilos para o cabeçalho e dê-lhe uma altura. Ele preencherá 100% da largura da página por
padrão, então a largura é cuidada. Eu escolhi 15em para a altura porque parecia alto o suficiente para acomodar o
conteúdo e mostrar uma boa quantidade da imagem de fundo do croissant, mas você pode brincar com isso.
cabeçalho {
…
altura: 15em; }
3. A seção principal vai precisar de um pouco de estofamento, então adicione 1em de estofamento em todos os lados.
Você pode adicionar esta declaração após os estilos principais existentes.
a Principal {
…
preenchimento: 1em; }
4. Em seguida, vamos ficar um pouco mais sofisticados com o elemento de lado (“Horas”). Precisaremos de
preenchimento extra no lado esquerdo para que a imagem de fundo da vieira lado a lado fique visível.
Existem várias abordagens para aplicar diferentes quantidades de preenchimento para cada lado, mas vou fazer
isso de uma maneira que lhe dê experiência de substituir declarações anteriores deliberadamente.
Use a propriedade abreviada de preenchimento para adicionar 1em de preenchimento em todos os lados
do elemento lateral . Em seguida, escreva uma segunda declaração que adiciona 45 pixels de preenchimento
apenas no lado esquerdo. Como a declaração padding-left vem em segundo lugar, ela substituirá a configuração
1em aplicada com a abreviação.
a parte, de lado {
preenchimento: 1em;
padding-esquerdo: 45px; }
5. Finalmente, esse rodapé parece fino e apertado. Vamos adicionar preenchimento, o que aumentará a altura do
rodapé e dará algum espaço ao conteúdo.
rodapé {
…
FIGURA 14-7. As áreas sombreadas indicam o

6. Salve o documento bakery-styles.css e abra (ou recarregue) bakery.html no navegador para ver o resultado
do seu trabalho. As mudanças neste ponto são bastante sutis. A FIGURA 14-7 destaca as adições de
preenchimento adicionado ao principal (azul), ao lado
(rosa) e ao rodapé (amarelo). Cores adicionadas para
preenchimento.
fins de demonstração, mas não renderizadas no navegador.

Fronteiras
FRONTEIRAS
Uma borda é simplesmente uma linha desenhada ao redor da área de conteúdo e seu preenchimento
(opcional). Você pode escolher entre oito estilos de borda e torná-los qualquer largura e cor que
desejar. As bordas podem ser aplicadas ao redor do elemento ou apenas em um lado ou lados
específicos. CSS3 introduziu propriedades para arredondar os cantos ou aplicar imagens nas bordas.
Começaremos nossa exploração de fronteira com os vários estilos de fronteira.
Estilo de borda
O estilo é a mais importante das propriedades da borda porque, de acordo com a especificação
DICA DE DESIGN CSS, se não houver um estilo de borda especificado, a borda não existe (o padrão é nenhum). Em
outras palavras, você deve sempre declarar o estilo da borda, ou as outras propriedades da borda
Bordas inferiores em
serão ignoradas.
vez de sublinhados
Os estilos de borda podem ser aplicados em um lado de cada vez ou com a propriedade de estilo
Desativar os sublinhados de
links e substituí-los por uma de borda abreviada .
borda inferior personalizada é uma
técnica de design comum. Ele clareia a estilo de borda superior, estilo de borda direita,
aparência dos links enquanto ainda os estilo de borda inferior, estilo de borda esquerda
destaca do texto comum.
Valores: nenhum | sólido | escondido | pontilhado | tracejado | duplo | sulco | cume | inserir
| início
Herda: não
estilo de borda
Valores: nenhum | sólido | escondido | pontilhado | tracejado | duplo | sulco | cume | inserir
| início
Herda: não
O valor da propriedade border-style é uma das 10 palavras-chave que descrevem os estilos de

borda disponíveis, conforme mostrado na FIGURA 14-8. O valor oculto não é equivalente a nenhum.
Use as propriedades de estilo de borda específicas do lado (border-top-

style, border right-style, border-bottom-style e border-left-style) para
aplicar um estilo a um lado do elemento. Se você não especificar uma
largura, a largura média padrão será usada. Se não houver cor especificada,
a borda usará a cor de fundo do elemento (igual ao texto).
No exemplo a seguir, apliquei um estilo diferente a cada lado de um elemento para mostrar as
propriedades de borda de um lado em ação (FIGURA 14-9).

Fronteiras
FIGURA 14-8. Os estilos de borda disponíveis (mostrados na largura média padrão).
div#bobo {
estilo de borda superior: sólido;
border-right-style: tracejado;
estilo de fundo de borda: duplo;
estilo de borda esquerda: pontilhado;
largura: 300px;
altura: 100px;
}
A propriedade abreviada de estilo de borda funciona no sistema no sentido horário

(TRouBLe) descrito para preenchimento anteriormente. Você pode fornecer quatro
valores para todos os quatro lados ou menos valores quando as bordas esquerda/
direita e superior/inferior forem iguais. O efeito de borda boba no exemplo anterior
também pode ser especificado com a propriedade border-style como mostrado aqui, e
o resultado seria o mesmo mostrado na FIGURA 14-9:
estilo de borda: sólido pontilhado duplo pontilhado;
FIGURA 14-9. Estilos de borda aplicados a lados individuais de um elemento.

Fronteiras
Largura da borda (espessura)

Use uma das propriedades de largura da borda para especificar a espessura da borda.
Mais uma vez, você pode direcionar cada lado do elemento com uma propriedade de
lado único ou especificar vários lados de uma vez no sentido horário com a propriedade
abreviada de largura de borda .
largura da borda superior, largura da borda direita,

largura da borda inferior, largura da borda esquerda
Valores: comprimento | fino | médio | espesso
Predefinição: médio
Herda: não
largura da borda
Herda: não
A maneira mais comum de especificar a largura das bordas é usando uma medida de
pixel ou em; no entanto, você também pode especificar uma das palavras-chave (fino,
médio ou grosso) e deixar a renderização para o navegador.
Incluí uma combinação de valores neste exemplo (FIGURA 14-10). Observe que também
incluí a propriedade border-style porque, se não incluísse, a borda não seria renderizada:
div#ajuda {
largura da borda superior: fina;
fino largura da borda direita: médio;
largura da borda inferior: grossa;
largura da borda esquerda: 12px;
estilo de borda: sólido;
largura: 300px;
altura: 100px;
12px médio }
ou:
div#ajuda {
largura da borda: fino médio grosso 12px;
espesso estilo de borda: sólido;
largura: 300px;
altura: 100px;
FIGURA 14-10. Especificando a largura das bordas. }

Fronteiras
Cor da borda
As cores da borda são especificadas da mesma maneira: por meio das propriedades específicas
do lado ou da propriedade abreviada da cor da borda . Quando você especifica uma cor de DICA DE DESIGN
borda, ela substitui a cor de primeiro plano conforme definida pela propriedade color do elemento.
Configurando a cor da borda para
transparente permite que o plano de fundo seja
cor da borda superior, cor da borda direita,
exibido através da borda, mas mantém a largura
border-bottom-color, border-left-color da borda conforme especificado. Isso pode ser
Valores: nome da cor ou valor RGB/HSL | transparente útil quando você está criando efeitos de rollover
(:hover) com bordas, porque o espaço onde a
Predefinição: o valor da propriedade de cor para o elemento
borda aparecerá é mantido mesmo quando o
Aplica-se a: todos os elementos mouse é
Herda: não
não sobre o elemento.
Cor da borda
Valores: nome da cor ou valor RGB/HSL | transparente
Predefinição: o valor da propriedade de cor para o elemento
Herda: não
Você sabe tudo sobre como especificar valores de cores e deve estar se acostumando com as
propriedades abreviadas também, então manterei este exemplo curto e agradável (FIGURA
14-11). Aqui, forneci dois valores para a cor da borda abreviada
propriedade para tornar a parte superior e inferior de um div marrom e os lados esquerdo e
direito aqua:
div#especial {
cor da borda: aqua marrom;
estilo de borda: sólido;
largura da borda: 6px;
largura: 300px;
altura: 100px;
}
FIGURA 14-11. Especificando a cor das bordas.

Fronteiras
Contornos CSS
Outro tipo de regra que você pode desenhar em torno de um elemento é um contorno. Os contornos parecem
bordas e a sintaxe é a mesma, mas há uma diferença importante. Os contornos, ao contrário das bordas, não
são calculados na largura da caixa do elemento. Eles apenas deitam em cima, não interferem em nada. Os
Os contornos são uma boa ferramenta contornos são desenhados na borda externa da borda (se houver uma especificada) e se sobrepõem à margem.
para verificar o layout da página

Como os contornos não afetam o layout, eles são uma ótima ferramenta para verificar seu design.
enquanto você trabalha.
Você pode ativá-los e desativá-los sem afetar as medidas de largura para ver onde e como as caixas de
elemento estão posicionadas.
As propriedades de contorno são semelhantes às propriedades de borda com uma diferença importante: não é
possível especificar contornos para lados específicos da caixa do elemento — é tudo ou nada.
estilo de contorno
Valores: automóvel | sólido | nenhum | pontilhado | tracejado | duplo | sulco | cume |

inserir | início
Esses são os mesmos valores de estilo de borda , com a adição de auto, que permite que o navegador
escolha o estilo. Além disso, você não pode definir o estilo de contorno para oculto.
largura do contorno

O mesmo que valores de largura de borda .
cor de contorno
Valores: nome da cor ou valor RGB/HSL | invertido
Predefinição: invertido
O valor de inversão padrão aplica o inverso da cor de fundo ao contorno, mas tem muito pouco suporte ao
navegador.
contorno-deslocamento
Valores: comprimento
Predefinição: 0
Por padrão, o contorno é desenhado fora da borda da borda. contorno-deslocamento

move o contorno além da borda por um comprimento especificado.
contorno
Valores: estilo de contorno largura do contorno cor do contorno
Predefinição: Padrões de propriedades individuais
A propriedade de contorno abreviado combina valores para estilo do contorno, largura do contorno e
cor do contorno. Lembre-se de que você pode especificá-los apenas para todos os lados do elemento de
uma vez.
div#story { contorno: 2px vermelho pontilhado; }

Fronteiras
Combinando estilo, largura e cor

Os autores do CSS não economizaram quando se trata de atalhos de borda. Eles também criaram
propriedades para fornecer valores de estilo, largura e cor em uma declaração, um lado de cada
vez. Você pode especificar a aparência de lados específicos ou usar a propriedade border para
alterar todos os quatro lados de uma vez.
borda superior, borda direita, borda inferior, borda esquerda

Valores: estilo de borda largura da borda cor da borda
Predefinição: padrões para cada propriedade
Herda: não
fronteira
Valores: estilo de borda largura da borda cor da borda
Predefinição: padrões para cada propriedade
Herda: não
Os valores de borda e as propriedades de borda específicas do lado podem incluir valores de estilo,
largura e cor em qualquer ordem. Você não precisa declarar todos os três, mas se o valor do estilo
da borda for omitido, nenhuma borda será renderizada.
A propriedade abreviada de borda funciona um pouco diferente das outras propriedades abreviadas
que abordamos, pois leva um conjunto de valores e sempre os aplica a todos os quatro lados do
elemento. Em outras palavras, ele não usa o sistema TRBL no sentido horário que vimos com
outras propriedades abreviadas.
Aqui está um punhado de exemplos de atalhos de borda válidos para dar uma ideia de como eles
funcionam:
h1 { borda esquerda: vermelho .5em sólido; } /* apenas borda esquerda */

h2 { borda inferior: 1px sólido; } p.example /* apenas borda inferior */
{ borda: 2px pontilhado #663; } /* todos os quatro lados */
Cantos arredondados com raio de borda

Talvez você queira que suas caixas de elementos pareçam um pouco mais suaves e arredondadas.
Bem, então, a propriedade border-radius é para você! Existem propriedades de canto individuais,
bem como uma abreviação de raio de borda .
raio superior esquerdo da borda, raio superior direito da borda,

raio inferior direito da borda, raio inferior esquerdo da borda
Predefinição: 0
Herda: não

Fronteiras
p{ raio de borda
largura: 200px;
Valores: 1, 2, 3 ou 4 valores de comprimento ou porcentagem
altura: 100px;
fundo: laranja escuro;
Predefinição: 0
}
Herda: não
Para arredondar o canto de um elemento, basta aplicar um dos limites de raio de borda
propriedades, mas lembre-se de que você verá o resultado apenas se o elemento tiver uma borda
ou cor de fundo. Os valores são normalmente fornecidos em ems ou pixels. As porcentagens são
permitidas e são boas para manter a curva proporcional à caixa caso ela seja redimensionada,
raio da borda: 1em;
mas você pode encontrar algumas inconsistências no navegador.
Você pode segmentar os cantos individualmente ou usar o raio da borda abreviado

propriedade. Se você fornecer um valor para border-radius, ele será aplicado a todos os quatro
cantos. Quatro valores são aplicados no sentido horário, começando no canto superior esquerdo
(superior esquerdo, superior direito, inferior direito, inferior esquerdo). Quando você fornece dois
valores, o primeiro é usado para o canto superior esquerdo e o canto inferior direito, e o segundo
para os outros dois cantos.
raio da borda: 50px;

Compare os valores do raio da borda com as caixas resultantes na FIGURA 14-12.
Você pode obter muitos efeitos diferentes, de cantos levemente suavizados a uma forma de
cápsula longa, dependendo de como você define os valores.
Todos os navegadores têm suportado propriedades border-radius usando a sintaxe padrão (ou seja,
sem prefixos) desde cerca de 2010. Existem propriedades prefixadas para Firefox <3.6 e Safari <5.0,
borda-topo-direita-raio: 50px;
mas elas são tão antigas que provavelmente não vale a pena se preocupar. No entanto, o Internet
Explorer 8 e versões anteriores não oferecem suporte ao raio de borda . Mas, neste caso, as chances
são de que a usabilidade do seu site não dependa de cantos arredondados, então esta é uma boa
oportunidade para praticar aprimoramento progressivo: navegadores não compatíveis obtêm cantos
quadrados perfeitamente aceitáveis, e todos os navegadores modernos recebem algo extra .
Cantos elípticos
raio da borda superior esquerda: 1em; Até agora, os cantos que fizemos são seções de círculos perfeitos, mas você também pode fazer
raio da borda superior direita: 2em;
borda-inferior-direita-raio: 1em;
um canto elíptico especificando dois valores: o primeiro para o raio horizontal e o segundo para o
borda inferior esquerda: 2em; raio vertical (veja a FIGURA 14-13, A e B).
ou
Um raio de borda superior direita: 100px 50px;
raio da borda:
FIGURA 14-12. 1em
Faça2em;
os cantos das caixas
de elemento arredondados com as B border-top-right-radius: 50px 20px;
propriedades border-radius . borda-topo-esquerda-raio: 50px 20px;
Se você quiser usar a propriedade abreviada, os raios horizontal e vertical são separados por
uma barra (caso contrário, eles seriam confundidos com valores de canto diferentes). O exemplo
a seguir define o raio horizontal em todos os cantos para 60px e o raio vertical para 40px (FIGURA
14-13, C):
C borda-raio: 60px / 40px;

Fronteiras
Se você quiser ver algo realmente maluco, dê uma olhada em um raio de borda
propriedade abreviada que especifica uma elipse diferente para cada um dos quatro
cantos. Todos os valores horizontais estão alinhados à esquerda da barra no sentido
horário (superior esquerdo, superior direito, inferior direito, inferior esquerdo), e todos
os valores verticais correspondentes estão alinhados à direita (FIGURA 14-13, D):
raio da borda D : 36px 40px 60px 20px / 12px 10px 30px 36px;
UMA B
borda-topo-direita-raio: 100px 50px; borda-topo-direita-raio: 50px 20px;

borda-topo-esquerda-raio: 50px 20px;
C D
raio da borda: 60px / 40px; raio da borda:

36px 40px 60px 20px/12px 10px 30px 36px;
FIGURA 14-13. Aplicando cantos elípticos em caixas.
Agora é hora de tentar sua mão nas fronteiras. O EXERCÍCIO 14-2 não só lhe dará
alguma prática, mas também lhe dará algumas idéias sobre como as bordas podem
ser usadas para adicionar interesse visual aos designs.
EXERCÍCIO 14-2. Truques de fronteira
Neste exercício, vamos nos divertir com as bordas da página Black Goose 2. Agora experimente algumas propriedades de raio de borda para adicionar
Bakery. Além de colocar bordas ao redor das seções de conteúdo da página, cantos arredondados generosos às seções principal e lateral . Um raio de
usaremos bordas para reforçar os títulos e como alternativa aos sublinhados 25 pixels deve servir. Pixels são minha escolha sobre ems aqui porque não
nos links. quero que o raio seja dimensionado com o texto. Comece adicionando esta
1. Abra bakery-styles.css em um editor de texto, se ainda não estiver. Poço declaração aos estilos para main:
comece com o básico usando a propriedade de borda abreviada para raio da borda: 25px;
adicionar uma regra dupla tan ao redor do elemento principal . Adicione a
nova declaração à regra existente para main: E dê apenas ao canto superior direito do lado um canto arredondado
correspondente:
a Principal {
… a parte, de lado {
…
preenchimento:
1em; borda: double 4px #EADDC4; } borda-topo-direita-raio: 25px;
}

Fronteiras
3. Apenas por diversão (e prática), adicionaremos uma borda decorativa em dois lados do assado
rubricas de mercadorias (h3). Encontre a regra existente para elementos h3 e adicione uma declaração que adiciona
uma regra sólida de 1 pixel na parte superior do título. Adicione outra que adicione uma régua sólida de 3 pixels
mais grossa à esquerda. Eu quero que as bordas sejam da mesma cor que o texto, então não precisamos especificar
a cor da borda. Por fim, para evitar que o texto bata na borda esquerda, adicione um pouco de preenchimento (1em)
à esquerda do conteúdo do título:
h3 {
…
borda superior: sólido de 1px;

borda esquerda: sólido de 3px;
padding-esquerda: 1em; }
4. A última coisa que faremos é substituir o sublinhado padrão por uma borda inferior decorativa sob os links. Comece
desativando o sublinhado para todos os links. Adicione esta regra na seção "estilos de link" da folha de estilo:
uma {
decoração de texto: nenhuma;

}
Em seguida, adicione uma borda pontilhada de 1 pixel à borda inferior dos links:
uma {

borda inferior: 1px pontilhada;
}
Como costuma ser o caso quando você adiciona uma borda a um elemento, é uma boa ideia também adicionar um
pouco de preenchimento para evitar que as coisas batam umas nas outras:
uma {

borda inferior: 1px pontilhada;
fundo de preenchimento: .2em;
}
Agora você pode salvar a folha de estilo e recarregar bakery.html no navegador. FIGURA 14-14
mostra um detalhe de como sua página deve estar até agora.
FIGURA 14-14. Os resultados de nossas adições de fronteira.

Fronteiras
Bordas perfeitas
O CSS3 introduziu as propriedades border-image-* , que permitem A abreviação de borda fornece um estilo de fallback para a borda caso a
preencher os lados e os cantos de uma caixa de borda com uma imagem imagem não seja carregada ou se a imagem da borda não for compatível
de sua escolha, conforme mostrado na FIGURA 14-15. com o navegador.
As imagens de borda são aplicadas com uma coleção de cinco A regra de imagem de borda diz ao navegador para aplicar a imagem
propriedades: • border-image-source indica a localização da imagem fancyframe.png à borda, cortar 55 pixels das bordas e usar o centro da
imagem para preencher o centro da caixa.
• fatia de imagem de borda divide a imagem em nove seções usando
A largura da área da borda é de 55px e a imagem deve ser empurrada em
medidas de deslocamento
direção às margens em 25px. Por fim, as áreas da imagem que compõem
• border-image-width especifica a largura da área da borda as laterais devem se esticar para preencher a largura e a altura da caixa.
• border-image-repeat especifica se a imagem deve
estique ou repita ao longo dos lados Isso não é muita explicação, eu sei, mas escrevi um artigo, “Border
• border-image-outset empurra a borda para longe do Images”, que entra em mais detalhes. Você pode baixá-lo em
conteúdo pela quantidade especificada learningwebdesign.com/articles/. Para obter ainda mais informações sobre
imagens de borda, confira estes recursos:
Há também uma propriedade de imagem de borda abreviada
que combina as propriedades individuais na seguinte sintaxe: • O Módulo CSS Background and Borders Nível 3 (www.
w3.org/TR/css3-background/#the-border-image-source)
border-image: fatia de origem / largura / início
repetir; • A listagem de imagens de borda em CSS-Tricks (css-tricks.com/
almanaque/properties/b/border-image/), para uma explicação
As regras de estilo para a borda da imagem na FIGURA 14-15 são as
seguintes: menos densa
borda: sólido de 5px #d1214a; /* vermelho */

border-image: url(fancyframe.png) 55 fill / 55px / 25px stretch;
55px 55px
fantasyframe.png Com imagem de borda Sem imagem de borda
FIGURA 14-15. Exemplos de uma imagem de borda aplicada a uma caixa.

Margens
MARGENS
Uma margem é uma quantidade opcional de espaço que você pode adicionar na parte externa da borda.
CSS DICA
As margens evitam que os elementos batam uns nos outros ou na borda da janela do navegador ou
Margens padrão do navegador viewport.
Você deve ter notado que o espaço é As propriedades de margem abreviadas e específicas de lado funcionam de maneira muito parecida
adicionado automaticamente em torno de
com as propriedades de preenchimento que já vimos; no entanto, as margens têm alguns
títulos, parágrafos e outros elementos de comportamentos especiais a serem observados.
bloco. Esse é o navegador
folha de estilo padrão no trabalho, aplicando

valores de margem acima e abaixo desses
margem superior, margem direita, margem inferior, margem esquerda
elementos. Valores: comprimento | porcentagem | auto
É bom ter em mente que o navegador está

aplicando seus próprios valores para margens
e preenchimento nos bastidores. Esses valores Aplica-se a: todos os elementos
serão usados
Herda: não
a menos que você as substitua especificamente
por suas próprias regras de estilo.
margem
Se você estiver trabalhando em um design e
se deparar com quantidades misteriosas de
espaço que não adicionou, os estilos padrão Predefinição: auto
do navegador podem ser os culpados. Para
solucionar o problema, recomendo usar a
ferramenta Web Inspector do seu navegador, Herda: não
que mostrará a origem de todos os estilos
aplicados ao elemento. Ou se você simplesmente As propriedades de margem são muito simples de usar. Você pode especificar uma quantidade de
não quer se preocupar com os estilos do margem para aparecer em cada lado do elemento ou usar a margem
navegador, uma solução é redefinir o propriedade para especificar todos os lados de uma vez.
preenchimento e as margens de todos os
elementos para zero, o que é discutido na seção A propriedade de margem abreviada funciona da mesma forma que a abreviação de preenchimento .
“Redefinição de CSS” em Quando você fornece quatro valores, eles são aplicados no sentido horário (superior, direito, inferior,
esquerdo) nas laterais do elemento. Se você fornecer três valores, o valor do meio se aplicará aos lados
Capítulo 19, Mais Técnicas de CSS.
esquerdo e direito. Quando dois valores são fornecidos, o primeiro é usado para a parte superior e
inferior e o segundo se aplica às bordas esquerda e direita. Finalmente, um valor será aplicado a todos
os quatro lados do elemento.
Como na maioria das medições da Web, ems, pixels e porcentagens são as formas mais comuns de
especificar margens. No entanto, esteja ciente de que, se você especificar um valor percentual, ele será
calculado com base na largura do elemento pai. Se a largura do pai mudar, o mesmo acontecerá com
as margens em todos os quatro lados do elemento filho (o preenchimento também tem esse
FERRAMENTA DE PODER
comportamento). A palavra-chave auto permite que o navegador preencha a quantidade de margem
Centralização com margens necessária para ajustar ou preencher o espaço disponível (consulte a barra lateral Power Tool ).
automáticas
Definir a margem como automática nos lados A FIGURA 14-16 mostra os resultados dos seguintes exemplos de margem. Eu adicionei uma borda
esquerdo e direito de um elemento dimensionado
vermelha aos elementos nos exemplos para tornar seus limites mais claros. As regras pontilhadas
tem o efeito de centralizar o elemento em seu
foram adicionadas na ilustração da figura para indicar as bordas externas das margens apenas para
contêiner.
fins de clareza, mas não são algo que você veria no navegador.

Margens
A p#A
{ margem:
4em; borda: 2px vermelho
sólido; fundo: #e2f3f5; }
B p#B
{ margin-top: 2em;
margem direita: 250px;
margem inferior: 1em;
margem esquerda:
4em; borda: 2px vermelho
sólido; fundo: #e2f3f5; }
Adicionar uma margem
C corpo
ao elemento body adiciona
{ margem: 0
20%; borda: vermelho espaço entre o conteúdo da
sólido de 3px; cor de fundo: página e as bordas da janela
#e2f3f5; }
de visualização.
UMA
4em
4em 4em
4em
B
2em
4em 250px
1em
20% 20%
FIGURA 14-16. Aplicando margens ao corpo e a elementos individuais.

Margens
Dê uma olhada no Exemplo C na FIGURA 14-16. Aqui eu apliquei a margem

propriedade para o elemento body do documento. Para esse design específico, defino a
margem superior como zero (0) para que o corpo comece rente à borda superior da janela
do navegador. Adicionar quantidades iguais de margem aos lados esquerdo e direito do
corpo mantém o conteúdo da página centralizado e dá um pouco de espaço para respirar.
Comportamento da margem
Embora seja fácil escrever regras que apliquem valores de margem em torno de elementos
HTML, é importante estar familiarizado com algumas das peculiaridades do comportamento
de margem.
Recolher margens
O comportamento de margem mais significativo a ser observado é que as margens superior
As margens adjacentes se e inferior dos elementos vizinhos colapsam. Isso significa que, em vez de acumular, as
sobrepõem e somente o maior margens adjacentes se sobrepõem e apenas o maior valor é usado.
valor será usado.
Usando os dois parágrafos da figura anterior como exemplo, se o elemento superior tiver
uma margem inferior de 4em, e o elemento seguinte tiver uma margem superior de 2em, o
espaço de margem resultante entre os elementos não somará 6em. colapso e a margem
resultante entre os parágrafos será de 4em, o maior valor especificado. Isso é demonstrado
na FIGURA 14-17.
LEITURA ADICIONAL
A única vez que as margens superior e inferior não colapsam é para elementos flutuantes
Recolher margens
ou absolutamente posicionados (chegaremos a isso no Capítulo 15, Flutuante e
Quando o espaçamento entre e ao redor Posicionamento). As margens dos lados esquerdo e direito nunca colapsam, então elas
dos elementos se comporta de forma
são boas e previsíveis.
imprevisível, as margens em colapso
geralmente são as culpadas. Aqui estão
alguns artigos que se aprofundam no

comportamento das margens em colapso.
Embora tenham sido escritas há muito tempo,
as informações ainda são sólidas e podem
ajudá-lo a entender o que está acontecendo
nos bastidores de seus layouts.
• “Sem margem para erro” por Andy

4em
Budd (www.andybudd.com/
archives/2003/11/no_margin_for_
erro)
• “Uncollapsing Margins” de Eric Meyer
(www.complexspiral.
com/publications/uncolapsing margins)
FIGURA 14-17. As margens verticais dos elementos vizinhos colapsam para que apenas o
valor maior seja usado.

Margens
Margens em elementos embutidos
Você pode aplicar margens superior e inferior a elementos de texto embutidos (ou
"elementos embutidos não substituídos", para usar a terminologia CSS apropriada), mas
não adicionará espaço vertical acima e abaixo do elemento, e a altura da linha não mudança.
No entanto, quando você aplica as margens esquerda e direita a elementos de texto
embutidos, o espaço da margem será mantido livre antes e depois do texto no fluxo do
elemento, mesmo se esse elemento quebrar em várias linhas.
Apenas para manter as coisas interessantes, as margens em elementos em linha

substituídos, como imagens, são renderizadas em todos os lados e, portanto, afetam a altura da linha.
Consulte a FIGURA 14-18 para obter exemplos de cada um.
em {margem: 2em; }
img { margem: 2em; }
FIGURA 14-18. Exemplos de margens em elementos embutidos. Apenas margens horizontais são
renderizadas em elementos não substituídos (topo). As margens são renderizadas em todos os lados dos
elementos substituídos, como imagens.
Margens negativas
Vale ressaltar que é possível especificar valores negativos para margens.

Quando você aplica uma margem negativa, o conteúdo, o preenchimento e a borda são
movidos na direção oposta que resultaria de um valor de margem positivo.
Vou deixar isso claro com um exemplo. A FIGURA 14-19 mostra dois parágrafos vizinhos
com bordas de cores diferentes aplicadas para mostrar seus limites.
Na visualização da esquerda, adicionei uma margem inferior de 3em ao parágrafo superior,
o que tem o efeito de empurrar o parágrafo seguinte para baixo nesse valor. Se eu
especificar um valor negativo (–3em), o elemento a seguir se move para cima nesse valor e
sobrepõe o elemento com a margem negativa.

Atribuindo tipos de exibição
p.top { margin-bottom: 3em; } p.top { margin-bottom: -3em; }

Empurra o parágrafo seguinte para baixo em 3 ems. O elemento a seguir sobe 3 ems.
FIGURA 14-19. Usando margens negativas.
Isso pode parecer uma coisa estranha de se fazer e, de fato, você provavelmente não
faria blocos de texto sobrepostos como mostrado. O ponto aqui é que você pode usar
margens com valores positivos e negativos para mover elementos na página. Esta é a
base de algumas técnicas de layout CSS mais antigas.
Agora vamos usar as margens para adicionar algum espaço entre as partes da página inicial
da Black Goose Bakery no EXERCÍCIO 14-3.
ATRIBUINDO TIPOS DE EXIBIÇÃO
Já que estamos falando de caixas e do modelo de layout CSS, este é um bom momento
para apresentar a propriedade display . Você já deve estar familiarizado com o
comportamento de exibição de elementos de bloco e em linha. Embora o HTML atribua
comportamentos de exibição (ou tipos de exibição, para usar o termo CSS mais recente)
aos elementos que ele define, existem outras linguagens baseadas em XML que podem
usar CSS que não fazem o mesmo. Por isso, a propriedade display foi criada para permitir
que os autores especifiquem como os elementos devem se comportar nos layouts.
exibição
Valores: em linha | bloco | atropelamento | flexionar | grade | fluxo | fluxo-raiz | item de lista
| mesa | grupo-linha-tabela | tabela-cabeçalho-grupo | grupo de rodapé de mesa | linha
de mesa | célula de mesa | tabela-coluna-grupo | coluna-mesa | legenda da tabela | rubi
| base de rubi | texto-rubi | recipiente à base de rubi | recipiente-texto rubi | bloco em
linha | mesa em linha | inline-flex | grade em linha | conteúdo | Nenhum
Predefinição: em linha
Herda: sim

Atribuindo tipos de exibição
EXERCÍCIO 14-3. Adicionando espaço de margem em torno de elementos
É hora de ajustar as margens ao redor dos elementos na página da padaria. 5. Adicione um pouco de espaço extra acima dos títulos h3 na área principal.
Começaremos ajustando as margens de todo o documento e, em seguida, faremos Eu escolhi 2.5em, mas você pode brincar com valores diferentes para ver o que você
ajustes em cada seção de cima para baixo. Você deve ter bakery-styles.css aberto em mais gosta:
um editor de texto.
h3 {
1. É uma prática comum definir a margem do elemento body como zero, limpando …
assim a configuração de margem padrão do navegador. margem superior: 2,5em;

Adicione esta declaração de margem aos estilos de corpo e salve o arquivo e }
abra-o em um navegador. Você verá que os elementos agora vão até a borda da
6. Finalmente, adicione algum espaço ao redor do lado. Desta vez, vamos fazer
janela sem espaço entre eles.
quantidades diferentes de cada lado por diversão. Coloque 1em na parte superior,
corpo { 2,5% no lado direito, 0 na parte inferior e 10% de margem à esquerda. Eu vou deixar
…
você fazer isso sozinho. Você pode fazer todas essas alterações com uma
margem: 0; declaração? Se você quiser verificar seu trabalho, minha versão finalizada da página
}
Black Goose Bakery até agora está disponível com os materiais de exercício para
este capítulo.
NOTA
7. Salve a folha de estilo novamente e recarregue a página no navegador.
Deve se parecer com o da FIGURA 14-20. Isso não é o mais
Quando o valor é 0, você não precisa fornecer uma unidade específica.
design bonito, especialmente se a janela do seu navegador estiver aberta.
No entanto, se você redimensionar a janela do seu navegador, você descobrirá que
2. Se você for um observador cuidadoso, deve ter notado que ainda há um pouco de não seria tão ruim quanto a versão de tela pequena em um
espaço em branco acima da barra de navegação colorida. Essa é a margem superior projeto responsivo. (Aposto que você mal pode esperar pelo capítulo de Web
da lista ul empurrando todo o elemento nav para baixo da borda superior do Design Responsivo para aprender como consertar isso!)
navegador. Vamos cuidar disso. Adicione uma nova regra de estilo na seção “estilos
de navegação” da folha de estilo:
nav ul
{ margem: 0; }
3. As margens são boas para deslocar elementos no layout. Por exemplo, acho que
gostaria de mover o h1 com o logotipo um pouco para baixo, então adicionarei uma
margem à borda superior. Eu brinquei com alguns valores antes de decidir por 1.5em
para esta nova regra de estilo:
cabeçalho h1
{ margem superior: 1.5em;
}
Eu gostaria que o parágrafo de introdução no cabeçalho ficasse um pouco mais

próximo do logotipo, então vamos ser malucos e usar uma margem superior negativa
para puxá-lo para cima. Adicione esta declaração à regra de estilo existente:
cabeçalho p {
…
margem superior: -12px;

}
4. Dê à seção principal uma margem de 2,5% em todos os lados:
a Principal {
…
margem: 2,5%;
}
FIGURA 14-20. A página inicial da Black Goose Bakery após a adição de

preenchimento, bordas e margens.

Sombras de caixa
A propriedade display define o tipo de caixa de elemento que um elemento gera no layout.
Além dos tipos familiares de exibição em linha e em bloco , você também pode fazer com
AVISO
que os elementos sejam exibidos como itens de lista ou as várias partes de uma tabela.
Tenha em mente que alterar a apresentação Há também vários valores para anotação rubi para idiomas do Leste Asiático. Como você
de um elemento HTML com a propriedade de pode ver na lista de valores, existem muitos tipos de exibição, mas apenas alguns são usados
exibição CSS não altera a definição desse na prática diária.
elemento como nível de bloco ou embutido em
A atribuição de tipo de exibição é útil para obter efeitos de layout, mantendo intacta a
HTML. Colocar um elemento de nível de bloco
dentro de um elemento embutido sempre será semântica da fonte HTML. Por exemplo, é uma prática comum fazer com que os elementos li
inválido, independentemente de sua função de (que geralmente são exibidos com as características de elementos de bloco) sejam exibidos
exibição. como elementos embutidos para transformar uma lista em uma barra de navegação horizontal.
Você também pode fazer uma exibição de elemento a (âncora) inline como um bloco para
dar a ele uma largura e altura específicas: ul.navigation li { display: inline; }
ul.navigation li a { display: block; }

Outro valor útil para a propriedade display é none, que remove totalmente o conteúdo do
fluxo normal. Ao contrário de visibilidade: oculto, que apenas torna o elemento invisível,
mas mantém o espaço que ele ocuparia em branco, display: none remove o conteúdo e o
espaço que ele ocuparia é fechado.
Um uso popular de exibição: nenhum é impedir que determinado conteúdo do documento

LEITURA ADICIONAL
de origem seja exibido em uma mídia específica, como quando a página é impressa ou
“Cinco maneiras de ocultar elementos em exibida em dispositivos com telas pequenas. Por exemplo, você pode exibir URLs para links
CSS” por Baljeet Rathi (www.sitepoint.com/ em um documento quando ele é impresso, mas não quando é exibido em uma tela de
five-way-to-hide-elements-in-css) compara computador onde os links são interativos.
vários métodos para ocultar conteúdo,
incluindo display: none. Esteja ciente de que o conteúdo que tem sua exibição definida como nenhum ainda é
baixado com o documento. Definir algum conteúdo para exibição: none para dispositivos
com telas pequenas pode manter a página mais curta, mas não está fazendo nada para
reduzir o uso de dados ou o tempo de download.
SOMBRAS DE CAIXA
Chegamos à última parada do tour da caixa de elementos. No Capítulo 12, Formatando
texto, você aprendeu sobre a propriedade text-shadow , que adiciona uma sombra projetada
Os navegadores lançados antes de 2011 ao texto. A propriedade box-shadow aplica uma sombra ao redor de toda a caixa do elemento
exigem prefixos de fornecedor para sombra de
visível (excluindo a margem).
caixa. Sombras de caixa não são suportadas
no Internet Explorer versões 8 e anteriores. Sombra da caixa
Este é um caso de aprimoramento progressivo
Valores: 'deslocamento horizontal' 'deslocamento vertical' 'distância de desfoque' 'distância de propagação' inserção
- é provável que uma caixa sem sombra seja
de cor | Nenhum
adequada para usuários que se apegam a
versões antigas de navegadores. Predefinição: Nenhum
Herda: não

Sombras de caixa
O valor da propriedade box-shadow deve parecer familiar para você depois de UMA
trabalhar com text-shadow: especifique as distâncias de deslocamento horizontal e

vertical, a quantidade que a sombra deve desfocar e uma cor. Para sombras de caixa,
você também pode especificar uma quantidade de espalhamento , que aumenta (ou
diminui com valores negativos) o tamanho da sombra. Por padrão, a cor da sombra é
igual à cor de fundo do elemento, mas a especificação de uma cor a substitui.
A FIGURA 14-21 mostra os resultados dos exemplos de código a seguir. A adiciona

uma sombra de caixa simples 6 pixels para a direita e 6 pixels para baixo, sem borrar
ou espalhar. B adiciona um valor de desfoque de 5 pixels e C mostra o efeito de um
valor de dispersão de 10 pixels. As sombras das caixas são sempre aplicadas na área
fora da borda do elemento (ou no local que estaria se uma borda não fosse
B
especificada). Se o elemento tiver um fundo transparente ou translúcido, você não verá
a sombra da caixa na área atrás do elemento.
A. box-shadow: 6px 6px cinza;
B. box-shadow: 6px 6px 5px cinza; /* Desfoque de 5 pixels */
C. box-shadow: 6px 6px 5px 10px cinza; /* Desfoque de 5px, espalhamento de 10px */
Você pode fazer a renderização da sombra dentro das bordas da caixa do elemento
visível adicionando a palavra-chave inset à regra. Isso faz parecer que o elemento
está pressionado na tela (FIGURA 14-22).
C
box-shadow: inserir 6px 6px 5px cinza;
FIGURA 14-21. Adicionando

sombras ao redor de um elemento com
a propriedade box-shadow .
FIGURA 14-22. Uma sombra de caixa inserida é renderizada no interior da caixa do elemento. AVISO
Sombras de caixa, sombras de texto e

Quanto à sombra de texto, você pode especificar várias sombras de caixa em um gradientes consomem muito poder do
elemento fornecendo os valores em uma lista separada por vírgulas. Os valores que processador porque você está transferindo
vêm primeiro são colocados no topo e as sombras subsequentes são colocadas atrás o fardo de interpretá-los e renderizá-los
dele na ordem em que aparecem na lista. para o navegador. Quanto mais você usar,
mais lento será o desempenho e, como
todos sabemos, desempenho é tudo na
web. Então vá com calma com eles.

Teste-se
TESTE-SE
Neste ponto, você deve ter uma boa noção das caixas de elementos e como
manipular o espaço dentro e ao redor delas. No próximo capítulo, começaremos
a mover as caixas pela página, mas primeiro, por que não praticar um pouco de
DICAS ÚTEIS escrita de regras para preenchimento, bordas e margens no teste a seguir?
• As bordas das margens externas são Neste teste, sua tarefa é escrever as declarações que criam os efeitos mostrados em
indicadas por linhas azuis pontilhadas. •
cada exemplo na FIGURA 14-23 (consulte Dicas Úteis). Todos os parágrafos
Todas as medidas necessárias são fornecidas mostrados aqui compartilham uma regra que define as dimensões e a cor de fundo de
em azul.
cada parágrafo. Você só precisa fornecer as declarações de propriedade relacionadas à caixa.
• As bordas são pretas ou vermelhas.
As respostas, como sempre, aparecem no Apêndice A.
UMA.
B.
C.
D.
E.
F.
REVISÃO CSS: PROPRIEDADES DA CAIXA
fronteira Uma propriedade abreviada que combina propriedades de borda
topo de fronteira Combina propriedades de borda para cada lado do elemento

fronteira direita
borda inferior
borda esquerda
Cor da borda Propriedade abreviada para especificar a cor das bordas
borda-top-color Especifica a cor da borda para cada lado do elemento

borda-direita-cor
borda-fundo-cor
borda-cor-esquerda
imagem de borda Adiciona uma imagem dentro da área da borda
início de imagem de borda A que distância a imagem da borda deve ser posicionada longe da área da borda.
border-image-repetir A maneira como a imagem preenche os lados da borda
fatia-imagem-borda Os pontos em que a imagem da borda deve ser dividida em cantos e lados
fonte-imagem-borda A localização do arquivo de imagem a ser usado para a imagem da borda
A mesa continua...

Revisão CSS: Propriedades da caixa
2 em
Todos os exemplos
neste exercício começam
com o estilo mostrado
aqui e compartilham as
propriedades listadas
abaixo.
p { cor de fundo: #C2F670;

2 em
largura: 200px;
altura: 200px;}
UMA B
4 pixels 4 pixels
4 pixels
2 em 1 em
2 em
1 em
6 em 6 em 6 em
1 em
2 em 2 em 1 em
C D E
2 pixels
1 em
(Mesma quantidade de (Mesma quantidade de

margem nos lados margem nos lados
esquerdo e direito) esquerdo e direito)
1 em
FIGURA 14-23. Escreva as declarações para esses exemplos.

Revisão CSS: Propriedades da caixa
largura da imagem da borda A largura do espaço que a imagem da borda deve ocupar
raio de borda
Propriedade abreviada para arredondar os cantos da caixa do elemento visível
raio da borda superior esquerda raio Especifica a curva de raio para cada canto individual
da borda superior direita da borda raio
inferior da borda direita da borda raio inferior esquerdo
estilo de borda Propriedade abreviada para especificar o estilo das bordas
estilo de borda superior Especifica o estilo de borda para cada lado do elemento
estilo de borda direita
estilo de borda inferior
estilo de borda esquerda
largura da borda
Propriedade abreviada para especificar a largura das bordas
largura da borda Especifica a largura da borda para cada lado do elemento

largura da borda direita
largura-fundo-borda
largura da borda esquerda
dimensionamento de caixa Especifica se as dimensões de largura e altura se aplicam à caixa de conteúdo ou à caixa de borda
Sombra da caixa
Adiciona uma sombra ao redor da caixa do elemento visível
exibição Define o tipo de caixa de elemento que um elemento gera
altura Especifica a altura da caixa de conteúdo do elemento ou da caixa de borda
margem Propriedade abreviada para especificar o espaço de margem em torno de um elemento
margem superior Especifica o valor da margem para cada lado do elemento

margem direita
margem inferior
margem esquerda
altura máxima Especifica a altura máxima de um elemento

largura máxima
Especifica a largura máxima de um elemento
min-altura Especifica a altura mínima de um elemento

largura mínima
Especifica a largura mínima de um elemento
contorno
Propriedade abreviada para adicionar um contorno ao redor de um elemento
cor de contorno Define a cor do contorno
contorno-deslocamento
Define o espaço entre um contorno e a borda externa da borda
estilo de contorno Define o estilo do contorno

largura do contorno Define a largura do contorno
transbordar
Especifica como lidar com o conteúdo que não cabe na área de conteúdo
preenchimento Propriedade abreviada para especificar o espaço entre a área de conteúdo e a borda
acolchoamento Especifica a quantidade de preenchimento para cada lado do elemento

padding-right
fundo de preenchimento
padding-esquerda
largura
Especifica a largura da caixa de conteúdo ou da caixa de borda de um elemento

CAPÍTULO
FLUTUANTE E 15
POSICIONAMENTO
Neste ponto, você aprendeu dezenas de propriedades CSS que permitem alterar a aparência de NESTE CAPÍTULO
elementos de texto e as caixas que eles geram. Mas até agora, estamos apenas formatando os
elementos conforme eles aparecem no fluxo do documento. Elementos flutuantes à esquerda
e à direita
Neste capítulo, veremos flutuação e posicionamento, os métodos CSS para sair do fluxo normal e
organizar elementos na página. Limpando elementos flutuantes
A flutuação de um elemento o move para a esquerda ou para a direita e permite que o texto a seguir
Contendo elementos flutuantes
o envolva. O posicionamento é uma maneira de especificar a localização de um elemento em
qualquer lugar da página com precisão de pixel. Criando formas de quebra de texto
Antes de começarmos a mover os elementos, vamos ter certeza de que estamos bem familiarizados Posicionamento relativo
com como eles se comportam no fluxo normal.
Posicionamento absoluto e blocos
de contenção
FLUXO NORMAL Posicionamento fixo
Cobrimos o fluxo normal nos capítulos anteriores, mas vale a pena relembrar.
No modelo de layout CSS, os elementos de texto são dispostos de cima para baixo na ordem em
que aparecem na fonte e da esquerda para a direita nas linguagens de leitura da esquerda para a
direita (consulte Nota). Os elementos de bloco se empilham uns sobre os outros e preenchem a NOTA
largura disponível da janela do navegador ou outro elemento que o contenha. Elementos embutidos
Para idiomas de leitura da direita para a esquerda,
e caracteres de texto se alinham um ao lado do outro para preencher os elementos do bloco.
como árabe e hebraico, o fluxo normal é de cima
para baixo e da direita para a esquerda.
Quando a janela ou o elemento que o contém é redimensionado, os elementos do bloco se

expandem ou se contraem para a nova largura e o conteúdo em linha reflui para se ajustar conforme
Objetos no fluxo normal afetam o layout dos objetos ao seu redor. Esse é o comportamento que
você espera em páginas da web - os elementos não se sobrepõem ou se agrupam. Eles abrem
espaço um para o outro.
387
Flutuando
O conteúdo embutido reflui para se ajustar à largura do bloco.
Os blocos são dispostos na

ordem em que aparecem na aBCDeFGHIJKLMNopqRSTUVWxyZ abcdefghijkl
fonte.
<p>
mnopqrstuv
wxyz
Cada bloco começa em uma <p>
nova linha. <h1>
<h1>
<p>
<p> <p>
<p>
Os blocos preenchem a largura disponível.
FIGURA 15-1. Mais um exemplo do comportamento do fluxo normal.
Já vimos tudo isso antes, mas neste capítulo estaremos prestando atenção se os
elementos estão no fluxo ou são removidos do fluxo. A flutuação e o posicionamento
alteram a relação dos elementos com o fluxo normal de diferentes maneiras. Vamos
primeiro olhar para o comportamento especial de elementos flutuantes (ou “floats” para
abreviar).
FLUTUANDO
Simplificando, a propriedade float move um elemento o mais longe possível para a

esquerda ou para a direita, permitindo que o conteúdo a seguir o envolva. É um recurso
exclusivo incorporado ao CSS com alguns comportamentos interessantes.
flutuador
A flutuação de um Valores: esquerda | direito | Nenhum
elemento o move para a Predefinição: Nenhum
esquerda ou para a Aplica-se a: todos os elementos
direita e permite que o

Herda: não
texto a seguir o envolva.
A melhor maneira de explicar a flutuação é demonstrá-la. Neste exemplo, a propriedade
float é aplicada a um elemento img para fazê-lo flutuar para a direita. A FIGURA 15-2
mostra como o parágrafo e a imagem contida são renderizados por padrão (superior) e
como fica quando a propriedade float é aplicada (inferior).
A MARCAÇÃO
<p><img src="icecreambowl.png" alt=""> Depois que o creme estiver congelado, bem

firme,…
OS ESTILOS
img
{ float: certo; }

Flutuando
Imagem em linha no fluxo normal O espaço ao lado da imagem é mantido limpo
A imagem se move e o texto a envolve

A imagem em linha flutuou para a direita
FIGURA 15-2. O layout de uma imagem no fluxo normal (topo) e com o float
propriedade aplicada (abaixo).
Esse é um bom efeito. Nós nos livramos de muito espaço desperdiçado na página, mas agora o
texto está colidindo com a imagem. Como você acha que adicionaria algum espaço entre o elemento
de imagem e o texto ao redor?
Se você adivinhou “adicionar uma margem”, você está absolutamente certo. Vou adicionar 1em de
espaço em todos os lados da imagem com a propriedade margin (FIGURA 15-3). Você pode
começar a ver como as propriedades da caixa funcionam juntas para melhorar o layout da página.
img
{ float: certo;
margem: 1em;
}
Indica a borda da margem externa
(a linha pontilhada não aparece no navegador)
FIGURA 15-3. Adicionando uma margem de 1em ao redor da imagem flutuante.
15. Flutuação e Posicionamento 389

Flutuando
As duas figuras anteriores demonstram alguns comportamentos-chave de elementos flutuantes:
Um elemento flutuante é como uma ilha em um riacho.
Em primeiro lugar, você pode ver que a imagem é removida de sua posição no fluxo normal, mas
continua a influenciar o conteúdo ao redor. O texto do parágrafo subsequente reflui para dar espaço
para o elemento img flutuante . Uma analogia popular compara os flutuadores a ilhas em um riacho
– eles não estão no fluxo, mas o córrego precisa fluir ao redor deles.
Esse comportamento é exclusivo para elementos flutuantes.
Os flutuadores permanecem na área de conteúdo do elemento que os contém.
Também é importante observar que a imagem flutuante é colocada dentro da área de conteúdo (as
bordas internas) do parágrafo que a contém. Ele não se estende para a área de preenchimento do
parágrafo.
As margens são mantidas.
Além disso, as margens são mantidas em todos os lados da imagem flutuante, conforme indicado
na FIGURA 15-3 pela linha pontilhada. Em outras palavras, toda a caixa do elemento, da borda
externa à borda externa, é flutuada.
Elementos Flutuantes Inline e Block

Esses são os princípios básicos, então agora vamos ver mais exemplos e explorar comportamentos
flutuantes adicionais. É possível flutuar qualquer elemento HTML, tanto inline quanto em nível de bloco,
como veremos nos exemplos a seguir.
Flutuando um elemento de texto embutido
No exemplo anterior, flutuamos um elemento de imagem embutido. Desta vez, vamos ver o que acontece
quando você flutua um elemento de texto embutido (não substituído)—
neste caso, uma extensão de texto (FIGURA 15-4).
A MARCAÇÃO
<p><span class="tip">DICA: certifique-se de que o recipiente ou balde da

embalagem tenha um orifício abaixo do topo do molde para que a água
escorra.Depois que o creme estiver congelado, prepare uma banheira ou
balde de…</p>
OS ESTILOS
span.tip
{ float: direito;
margem: 1em;
largura: 200px;
cor: #ff; cor
de fundo: verde mar claro;

Flutuando
FIGURA 15-4. Flutuando um elemento de texto embutido (não substituído).
À primeira vista, está se comportando da mesma forma que a imagem flutuante, que é o que
esperávamos. Mas há algumas coisas sutis em ação aqui que merecem destaque:
Sempre forneça uma largura para elementos de texto flutuante.
Primeiro, você notará que a regra de estilo que flutua a extensão inclui a propriedade largura . É
necessário especificar uma largura para um elemento de texto flutuante porque sem uma, sua caixa É necessário especificar a
é dimensionada com largura suficiente para caber em seu conteúdo (auto).
largura para elementos de texto
Para frases curtas que são mais estreitas que o contêiner, isso pode não ser um problema. No flutuante.
entanto, para textos mais longos e agrupados, a caixa se expande para a largura do contêiner,
tornando-a tão larga que não haveria espaço para envolver nada ao redor. As imagens têm uma
largura inerente, portanto, não precisamos especificar uma largura no exemplo anterior (embora
certamente pudéssemos ter).
Elementos inline flutuantes se comportam como elementos de bloco.
Observe que a margem é mantida em todos os quatro lados do texto de extensão flutuante ,
embora as margens superior e inferior geralmente não sejam renderizadas em elementos embutidos
(consulte a FIGURA 14-20 no capítulo anterior). Isso ocorre porque todos os elementos flutuantes
se comportam como elementos de bloco. Depois de flutuar um elemento embutido, ele segue as
regras de exibição para elementos em nível de bloco e as margens são renderizadas em todos os
quatro lados.
As margens em elementos flutuantes não são recolhidas.
No fluxo normal, as margens superior e inferior adjacentes colapsam (sobreposição), mas as

margens para elementos flutuantes são mantidas em todos os lados conforme especificado.
Elementos de bloco flutuante

Vejamos o que acontece quando você flutua um bloco dentro do fluxo normal.
Neste exemplo, todo o segundo elemento de parágrafo flutua para a esquerda (FIGURA 15-5).
A MARCAÇÃO
<p>Se você deseja embalar sorvete...</p>

<p id="float">Depois que o sorvete estiver bem duro,...</p>
<p>Certifique-se de que sua embalagem ou balde...</p>
<p>Como a água fria é mais quente que o normal...</p>

Flutuando
OS ESTILOS
p
{ borda: sólido vermelho de
2px; }
#float
{ float: esquerda;
largura: 300px;
margem: 1em;
fundo: branco;
}
FIGURA 15-5. Flutuando um elemento de nível de bloco.
Eu adicionei uma borda vermelha ao redor de todos os elementos p para revelar seus limites.
Além disso, fiz o fundo do parágrafo flutuante branco para que ele se destaque e adicionei
uma margem de 1em em todos os lados (indicado com uma linha pontilhada azul). A vista
inferior na FIGURA 15-5 mostra como fica com todas as coisas extras desligadas, pois é
mais provável que apareça em uma página real.
Assim como vimos com a imagem, o parágrafo se move para o lado (desta vez para a
esquerda) e o conteúdo a seguir o envolve, mesmo que os blocos normalmente se empilhem
uns sobre os outros. Há algumas coisas que quero destacar neste exemplo:

Flutuando
Você deve fornecer uma largura para elementos de bloco flutuante.
Se você não fornecer um valor de largura , a largura do bloco flutuante será definida como
auto, que preenche a largura disponível da janela do navegador ou outro elemento contido.
Não faz muito sentido ter uma caixa flutuante de largura total, porque a ideia é envolver o
texto ao lado do flutuador, não começar abaixo dele.
Os elementos não flutuam mais alto que sua referência na fonte.
Um bloco flutuante flutuará para a esquerda ou direita em relação ao local em que ocorre na
origem, permitindo que os seguintes elementos no fluxo o envolvam. Ele fica abaixo de
quaisquer elementos de bloco que o precedem no fluxo (na verdade, é “bloqueado” por
eles). Isso significa que você não pode flutuar um elemento até o canto superior de uma
página, mesmo que seu ancestral mais próximo seja o elemento body . Se você deseja que
um elemento flutuante comece na parte superior da página, ele deve aparecer primeiro na
fonte do documento (consulte Nota). NOTA
Elementos não flutuantes mantêm o fluxo normal. Posicionamento absoluto é o método CSS
As bordas vermelhas na imagem superior revelam que as caixas de elementos para os para colocar elementos em uma página,
independentemente de como eles aparecem na fonte.
parágrafos ao redor ainda se estendem por toda a largura do fluxo normal.
Chegaremos ao posicionamento absoluto mais
Apenas o conteúdo desses elementos envolve o float. Este é um bom modelo a ter em conta.
adiante neste capítulo. Você também pode
alterar a ordem na qual os elementos são
Por exemplo, adicionar uma margem esquerda aos parágrafos ao redor adicionaria espaço exibidos usando Flexbox e Grid conforme
na borda esquerda da página, não entre o texto e o elemento flutuante. Se você deseja discutido no Capítulo 16, Layout CSS com
espaço entre o float e o texto quebrado, você precisa aplicar a margem ao próprio float. Flexbox e Grid.
Limpando elementos flutuantes

Se você estiver flutuando elementos, é importante saber como desativar a quebra de texto e
voltar ao fluxo normal como de costume. Você faz isso limpando o elemento que deseja iniciar
abaixo do float. Aplicar a propriedade clear a um elemento impede que ele apareça próximo a
um elemento flutuante e o força a iniciar no próximo espaço “limpo” disponível abaixo do float.
Claro
Valores: esquerda | direito | ambos | Nenhum
Nenhum
Predefinição:
Aplica-se a: apenas elementos de nível de bloco
Herda: não
Lembre-se de que você aplica a propriedade clear ao elemento que deseja iniciar abaixo do
elemento flutuante, não ao próprio elemento flutuante. A esquerda
value inicia o elemento abaixo de qualquer elemento que tenha flutuado para a esquerda. Da
mesma forma, o valor right faz com que o elemento limpe todos os floats na borda direita do
bloco que o contém. Se houver vários elementos flutuantes e você

Flutuando
quiser ter certeza de que um elemento começa abaixo de todos eles, use o valor Both para limpar os
floats em ambos os lados.
Neste exemplo, a propriedade clear foi usada para fazer com que os elementos h2 comecem abaixo
Layouts baseados em flutuação
dos elementos flutuantes à esquerda. A FIGURA 15-6 mostra como o rumo h2 começa na próxima
Curiosamente, não havia ferramentas para borda livre disponível abaixo do flutuador.
layout de página real em CSS1 ou CSS2.
img {
Alguns designers inteligentes perceberam que
flutuar: esquerda;
poderíamos usar o comportamento CSS float
margem direita: .5em;
para alinhar elementos horizontalmente, e }
floats começaram a ser usados para transformar h2
listas em barras de navegação e até mesmo { claro: esquerda;
transformar seções inteiras de um documento em margem superior: 2em;
layouts em colunas. }
Layouts baseados em float ainda prevalecem na

web enquanto escrevo isso, mas agora que
melhores ferramentas de layout CSS como Flexbox
e Grid estão ganhando suporte ao navegador,
estamos reconhecendo nossos layouts baseados
em float pelos hacks que são.
Os layouts baseados em float acabarão
desaparecendo como os layouts baseados em
tabelas dos anos 90.
Dito isto, estamos em um momento de

transição. Nem todos os navegadores em uso
hoje suportam padrões mais recentes, como

Flexbox e Grid, portanto, dependendo dos
navegadores aos quais você precisa oferecer
FIGURA 15-6. Limpando um elemento flutuante à esquerda.
suporte, talvez ainda seja necessário fornecer um
design de fallback com suporte universal.
Os flutuadores farão o trabalho. Observe na FIGURA 15-6 que, embora haja uma margem superior de 2em aplicada ao elemento h2 ,
Se você precisa suportar navegadores mais antigos

ela não é renderizada entre o cabeçalho e a imagem flutuante.
que não suportam Flexbox e Grid, você pode baixar Esse é o resultado do colapso das margens verticais no fluxo. Se você quiser garantir que haja espaço
meu artigo “Page Layout with Floats and entre um ponto flutuante e o texto a seguir, aplique uma margem inferior ao próprio elemento flutuante.
Positioning” (PDF), que está disponível em
learningwebdesign.
A essa altura você já tem conhecimento suficiente de float para experimentá-lo no EXERCÍCIO 15-1.
com/artigos/. Ele contém lições sobre como criar
barras de navegação com flutuadores e vários

modelos para criar layouts de várias colunas com Elementos múltiplos flutuantes
flutuadores e posicionamento. Você pode nunca
precisar conhecer essas técnicas, mas a informação Não há problema em flutuar vários elementos em uma página ou até mesmo em um único elemento.
está lá se você fizer isso. Na verdade, há anos, os floats têm sido o principal método para alinhar elementos como menus de
navegação e até mesmo para criar layouts de página inteira (por favor, reserve um tempo para ler a
barra lateral “Layouts baseados em flutuação”).
Quando você flutua vários elementos, há um sistema complexo de regras de renderização nos
bastidores que garante que os elementos flutuantes não se sobreponham. Você pode consultar a
especificação CSS para obter detalhes, mas o resultado disso é que os elementos flutuantes serão
colocados à esquerda ou à direita (conforme especificado) e tão alto quanto o espaço permitir.

Flutuando
EXERCÍCIO 15-1. Imagens flutuantes
Nos exercícios deste capítulo, faremos mais melhorias na home page da Black p.mais {
…
Goose Bakery em que trabalhamos no Capítulo 14, Pensando dentro da
caixa. Se você não acompanhou o último capítulo, ou se deseja apenas um claro: esquerda;
}
novo começo, há uma cópia do documento em seu estado mais recente
(bakery_ch15.html) nos materiais do Capítulo 15 (learningwebdesign.com/5e/ 3. Por fim, ajustaremos o espaçamento entre as imagens flutuantes. Dê a
materiais). ambas as imagens uma margem de 1em nos lados direito e inferior
1. Abra o arquivo CSS em um editor de texto e o documento HTML em usando a propriedade margin abreviada :
o navegador. Começaremos removendo o espaço vertical desperdiçado
main img
ao lado das imagens prontas, flutuando essas imagens para a esquerda. { float: esquerda;
Criaremos uma nova regra de estilo com um seletor contextual para margem: 0 1em 1em 0; }
segmentar apenas as imagens na seção principal : main img {
Eu sinto que a imagem do muffin poderia usar espaço extra no lado

flutuar: esquerda; esquerdo para se alinhar melhor com o pão. Use este seletor de atributo
}
bacana para pegar qualquer imagem cujo atributo src contenha a palavra
Salve o arquivo CSS e atualize a página no navegador, e você verá que muffin (há apenas um):
temos alguns ajustes pós-float para fazer.
img[src*="muffin"] { margem
2. Quero que os links "Saiba mais" apareçam sempre abaixo do esquerda: 50px; }
imagens para que fiquem claramente visíveis e consistentes no lado
esquerdo da página. Felizmente, os parágrafos com esses links estão
marcados com a classe “mais” e já existe uma regra de estilo para eles A FIGURA 15-7 mostra a nova e melhorada seção “Fresh from the Oven”.
usando um seletor de classe. Faça esses parágrafos limparem quaisquer

flutuadores na borda esquerda.
FIGURA 15-7. A seção do produto com imagens flutuantes e texto embrulhado tem menos
espaço desperdiçado.

Flutuando
A FIGURA 15-8 mostra o que acontece quando uma série de parágrafos sequenciais flutua para o
mesmo lado. Os três primeiros flutuadores começam a se empilhar a partir da borda esquerda, mas
quando não há espaço suficiente para o quarto, ele se move para baixo e para a esquerda até
esbarrar em algo - neste caso, a borda da janela do navegador. No entanto, se um dos flutuadores,
como o P2, fosse muito longo, teria batido na borda do flutuador longo. Observe que o próximo
parágrafo no fluxo normal (P6) começa a enrolar no ponto mais alto que puder encontrar, logo abaixo
de P1.
Elementos otados para o mesmo
lado se alinham.
Se não houver espaço

suficiente, os elementos
subsequentes se moverão para
baixo e para a esquerda o máximo possível.
FIGURA 15-8. Vários elementos flutuantes se alinham e não se sobrepõem.
A MARCAÇÃO
<p>[PARÁGRAFO 1] Era uma vez…</p>

<p class="float">[P2]…</p>
<p>[P6]…</p>
<p>[P7]…</p>
<p>[P8]…</p>
<p>[P9]…</p>
<p>[P10]…</p>
OS ESTILOS
p.float {
flutuar: esquerda;
largura: 200px;
margem: 0px;
fundo: #F2F5d5;
cor: #DAEAB1;
}

Flutuando
Contendo flutuadores
Este é um bom momento para abordar um comportamento peculiar de flutuação: contenção de
flutuação. Por padrão, os floats são projetados para sair do elemento em que estão contidos.
Isso é bom para permitir que o texto flua em torno de uma imagem flutuante, mas às vezes pode
causar alguns comportamentos indesejados.
Dê uma olhada no exemplo na FIGURA 15-9. Seria melhor se a borda se expandisse ao redor de
todo o conteúdo, mas a imagem flutuante ficasse na parte inferior.
FIGURA 15-9. O elemento que o contém não se expande para acomodar a imagem flutuante
conforme indicado por sua borda azul.
Se você flutuar todos os elementos em um elemento de contêiner, não No fluxo normal, o contêiner div inclui os parágrafos.
haverá elementos restantes no fluxo para manter o elemento de contenção
aberto. Este fenômeno é ilustrado na FIGURA 15-10. A div #container
contém dois parágrafos. A visualização do fluxo normal (topo) mostra que o
#container tem uma cor de fundo e uma borda que envolve o conteúdo.
<div id="container">
<p>…</p>
<p>…</p>
</div>
#container { Quando ambos os parágrafos são flutuantes, o

fundo: #f2f5d5; contêiner não se estende ao redor deles.
borda: 2px verde pontilhado;
}
No entanto, quando ambos os parágrafos (ou seja, todo o conteúdo dentro

do div) são flutuantes, como mostrado na figura na parte inferior), a caixa do
elemento para o #container fecha até uma altura de zero, deixando os
flutuantes pendurados abaixo (você ainda pode ver a borda vazia no topo).
Não há conteúdo no fluxo normal para fornecer o div que o contém
altura. Este claramente não é o efeito que estamos procurando.
p{
flutuar: esquerda; FIGURA 15-10. A caixa do recipiente desaparece completamente
largura: 44%; quando todo o seu conteúdo flutua.
preenchimento: 2%;
}

Flutuando
Felizmente, existem algumas correções para esse problema, e elas são bastante diretas. A
solução mais popular e infalível é a técnica “clearfix”.
Ele usa o pseudoelemento :after para inserir um espaço de caractere após o contêiner, definir
O futuro da Clearfix sua exibição como “bloquear” e limpá-lo em ambos os lados. Para obter mais informações
sobre esta versão do clearfix, consulte o artigo de Thierry Koblentz “The very last clearfix
Um novo valor de exibição, flow-root, pode
tornar o hack do clearfix obsoleto de uma vez reloaded” (cssmojo.com/the-very-latest-clearfix-reloaded). Aqui é aplicado à div #container na
por todas. Configurando a exibição de um FIGURA 15-10:
elemento de contêiner como raiz de fluxo
#container:depois de {
faz com que o elemento se expanda contente: " ";
automaticamente para conter seus floats. No
exibição: bloco;
momento da redação deste artigo, ainda limpar ambos;
está em fase experimental, mas vale a pena cor de fundo: #f2f5d5; /*luz verde*/
ficar de olho. Uma desvantagem potencial é borda: 2px verde pontilhado;
que ele desabilita a redução das margens preenchimento: 1em;
entre o elemento e seu primeiro/último filho, }
o que pode produzir resultados imprevisíveis.
Você pode ler mais sobre o método flow- Outra opção é flutuar o elemento que o contém e dar a ele uma largura de 100%:
root no post de Rachel Andrew “O fim do
hack do clearfix?” (rachelandrew.co.uk/ #container {
flutuar: esquerda;
archives/2017/01/24/the-end-of-the clearfix- largura: 100%;
…
hack).
}
A FIGURA 15-11 mostra o resultado da aplicação de uma técnica de contenção aos exemplos
anteriores. Qualquer um fará o truque.
FIGURA 15-11. Nossos flutuadores suspensos agora estão contidos.
Isso cobre os fundamentos da flutuação. Se você está pensando que os contornos de texto
retangulares são um pouco sem graça, você pode adicionar um toque especial (ou apenas
eliminar espaços em branco extras) usando formas CSS.

Quebra de texto extravagante com formas CSS
ENVOLVIMENTO DE TEXTO FANTÁSTICO COM FORMAS CSS

Observe os exemplos de float anteriores e você verá que o texto sempre se envolve em uma forma
retangular em torno de uma imagem flutuante ou caixa de elemento. No momento da redação deste artigo em 2018,
No entanto, você pode alterar a forma do texto quebrado para um círculo, elipse, polígono ou as formas de quebra de texto são suportadas
qualquer forma de imagem usando a propriedade shape-outside . Este é um recurso CSS promissor, apenas pelo Chrome 37+, Opera 24+, Safari
portanto, verifique a Nota de suporte do navegador. 7.1+ (com pré-correção; sem iniciar em 10.1),
A seguir está uma rápida introdução ao CSS Shapes, que deve inspirá-lo e prepará-lo para mais iOS Safari 8+ (com prefixo; sem em 10.3+), e
Android 56+. O recurso está sendo considerado
exploração por conta própria.
no Microsoft Edge e em desenvolvimento no
Firefox, portanto, a situação do suporte pode
forma-fora
estar melhor no momento em que você estiver
Valores: nenhum | círculo() | elipse() | polígono() | url() | [margem- lendo isso. Verifique CanIUse.com para o
caixa | caixa de enchimento | caixa de conteúdo ]
estado atual do suporte.
Por enquanto, sinta-se à vontade para usá-lo
Aplica-se a: flutua como um aprimoramento progressivo para
Herda: não designs nos quais um contorno de texto

retangular seria perfeitamente aceitável. Outra
A FIGURA 15-12 mostra a quebra de texto padrão em torno de uma imagem flutuante (esquerda) e alternativa é usar uma consulta de recurso
a mesma quebra com forma externa aplicada (direita). Este é o tipo de coisa que você esperaria (@supports) para servir um conjunto de estilos
ver em uma revista impressa, mas agora podemos fazer isso na web! de fallback para navegadores não compatíveis.
As consultas de recursos são apresentadas no
Vale a pena notar que você pode alterar a forma de quebra de texto em torno de qualquer elemento
Capítulo 19, Mais técnicas de CSS.
flutuante (consulte Nota), mas vou me concentrar nas imagens nesta discussão, pois os elementos
de texto geralmente são caixas que se encaixam perfeitamente no contorno retangular padrão.
Existem duas abordagens para fazer com que o texto seja moldado em torno de uma forma. Uma
maneira é fornecer as coordenadas do caminho da forma de contorno com circle(), ellipse() ou NOTA
polygon(). Outra maneira é usar url() para especificar uma imagem que tenha áreas pais
shape-outside funciona apenas em elementos
transparentes (como GIF ou PNG). Com o método de imagem, o texto flui para as áreas transparentes
flutuantes por enquanto, mas acredita-se que
da imagem e para nas áreas opacas. Este é o método de forma mostrado na FIGURA 15-12 e o
isso mudará no futuro.
método que apresentarei primeiro.
Quebra de texto padrão Quebra de texto com forma externa usando as áreas
transparentes da imagem como guia
FIGURA 15-12. Exemplo de quebra de texto em torno de uma imagem com forma externa.

Usando uma imagem transparente
AVISO No exemplo da FIGURA 15-12, coloquei a imagem sundae.png no documento HTML

para exibir na página e especifiquei a mesma imagem na regra de estilo usando url()
Há uma configuração de segurança no Chrome e
para que suas áreas transparentes definam o wrap forma (ver Aviso importante). Faz
no Opera que torna o texto baseado em imagem
sentido usar a mesma imagem no documento e para a forma CSS, mas não é
um pouco complicado de usar. Sem entrar em
obrigatório. Você pode aplicar uma forma de contorno derivada de uma imagem a
muitos detalhes do administrador do sistema, o
navegador restringe o uso da imagem usada para
outra imagem na página.
criar a forma CSS se ela não estiver no mesmo A MARCAÇÃO
domínio que o arquivo que a solicita.

<p><img src="sundae.png" class="wrap" alt=""> Em alguns lugares…</p>
Isso não é um bug; eles estão seguindo as regras
OS ESTILOS
estabelecidas na especificação.
img.wrap
A regra também significa que os navegadores
{ float: esquerda;
compatíveis não permitirão que imagens sejam
largura: 300px;
usadas para formas quando os arquivos forem altura: 300px;
veiculados localmente (ou seja, em seu -webkit-shape-outside: url(sundae.png); /* prefixo obrigatório em 2018 */
computador). Eles precisam ser carregados em forma-fora: url(sundae.png);
um servidor para funcionar, o que torna o processo
Observe que o texto quebrado agora está batendo direto na imagem. Que tal darmos
de design um pouco mais complicado, especialmente para iniciantes.
um pouco de espaço extra com margem de forma?
Se você usa quebra de texto baseado em imagem,
sabe que seu CSS está escrito corretamente, mas forma-margem
não está vendo quebra no navegador, essa Valores: comprimento | percentagem
configuração de segurança (relacionada ao
Predefinição: 0
Compartilhamento de Recursos de Origem
Cruzada ou CORS, se estiver curioso) é provavelmente o Aplica-se
culpado. a: flutua
Herda: não
A propriedade shape-margin especifica uma quantidade de espaço a ser mantida

entre a forma e o texto quebrado. Na FIGURA 15-13, você pode ver o efeito de
adicionar 1em de espaço entre as áreas opacas da imagem e as linhas de texto
quebradas. Dá-lhe um pouco de espaço para respirar como qualquer boa margem deveria.
-webkit-forma-margem: 1em;
Limite de opacidade margem de forma: 1em;
Se você tiver uma imagem de origem com

vários níveis de transparência, como a sombra de
gradiente, a propriedade de limite de imagem da

forma permite que o texto se infiltre na imagem,
mas pare quando encontrar um nível de
transparência específico. O valor desta propriedade
é um número entre 0 e 1, representando uma
porcentagem de transparência. Por exemplo, se
você definir o limite para .2, o texto será quebrado
em áreas que são até 20% transparentes, mas
parará quando atingir níveis mais opacos.
FIGURA 15-13. Adicionando uma margem entre a forma e o texto quebrado.

Usando um caminho
O outro método para criar uma forma de quebra de texto é defini-la usando uma
das palavras-chave de caminho: circle(), ellipse() e polygon().
A notação circle() cria uma forma de círculo para o texto envolver. O valor fornecido entre
parênteses representa o comprimento do raio do círculo:
círculo (raio)
Neste exemplo, o raio é 150px, metade da largura da imagem de 300 pixels. Por padrão, o
círculo é centralizado vertical e horizontalmente no flutuador:
img.round
{ float:
esquerda; -webkit-shape-outside:
circle(150px); forma-fora: círculo(150px); }
A FIGURA 15-14 mostra esta regra de estilo aplicada a diferentes imagens. Observe que a
transparência da imagem não está em jogo aqui. É apenas um caminho sobreposto na
imagem que define os limites para quebra de texto. Qualquer caminho pode ser aplicado a
qualquer imagem ou outro elemento flutuante.
FIGURA 15-14. A mesma forma circle() aplicada a diferentes imagens na fonte.
Este é um bom ponto para demonstrar um comportamento crítico de formas de envoltório.

Eles permitem que o texto flua para a imagem ou elemento flutuante, mas não podem manter
espaço livre além dele.
No exemplo da FIGURA 15-15, aumentei o diâmetro do caminho do círculo de 150px para

200px. Observe que o texto se alinha ao longo da borda direita da imagem, mesmo que o
círculo esteja definido 50 pixels além da borda. O caminho não empurra o texto para fora do
float. Se você precisar manter o texto quebrado longe da borda externa da imagem ou
elemento flutuante, aplique uma margem ao próprio elemento (será a forma retangular
padrão, é claro).

img.round
{ float:
esquerda; -webkit-shape-outside:
circle(200px); forma-fora: círculo(200px); }
Uma forma CSS permite

que o texto se transforme
em elementos flutuantes,
raio de 200px
mas não afasta o texto deles.
FIGURA 15-15. As formas CSS permitem que o texto seja encapsulado no elemento flutuante, mas
não retém espaço além dele.
Formas elípticas são criadas com a notação ellipse() , que fornece os

comprimentos de raio horizontal e vertical seguidos pela palavra at e então
as coordenadas x,y para o centro da forma. Aqui está a sintaxe:
elipse(rx ry em x y);
As coordenadas de posição podem ser listadas como uma medida específica ou uma porcentagem. Aqui
eu criei uma elipse com um raio horizontal de 100 pixels e um raio vertical de 150 pixels, centralizado no
elemento flutuante ao qual ela é aplicada (FIGURA 15-16):
img.round
{ float:
esquerda; -webkit-shape-outside: elipse(200px 100px a
50% 50%); forma externa: elipse(200px 100px a 50%
50%); }
As bordas da imagem (azul) e o

caminho da elipse (laranja pontilhado) revelaram
FIGURA 15-16. Uma quebra de texto elíptica criada com elipse().

Finalmente, chegamos a polygon(), que permite criar um caminho personalizado usando uma
série de coordenadas x,y separadas por vírgula ao longo do caminho. Esta regra de estilo cria
o efeito wrap mostrado na FIGURA 15-17:
img.wrap
{ float: esquerda;
largura: 300px;
altura: 300px;
forma externa: polígono (0px 0px, 186px 0px, 225px 34px, 300px 34px, 300px
66px, 255px 88px, 267px 127px, 246px 178px, 192px 211px, 226px 236px, 206px
273px, 209px 30px); }
As bordas da imagem (azul) e o

caminho do polígono (laranja pontilhado) revelaram
FIGURA 15-17. Um caminho personalizado criado com polygon().
Santas coordenadas! São muitos números, e meu caminho foi bastante simples. Eu gostaria NOTA
de poder indicar a você uma ótima ferramenta para desenhar e exportar caminhos de
Um Editor de Formas CSS será incluído em
polígonos, mas infelizmente, até o momento em que escrevo, não tenho nenhuma para uma versão futura do Firefox que provavelmente
recomendar (consulte a Nota). Consegui as coordenadas dos meus exemplos de polígonos estará disponível quando você estiver lendo
abrindo a imagem no Photoshop e reunindo-as manualmente, o que, embora possível, não é o ideal.isto (developer.mozilla.org/en-US/
docs/Tools/Page_Inspector/How_to/
Edit_CSS_shapes).
Recursos de formas CSS
Existem alguns pontos mais delicados sobre CSS Shapes que devo deixar para você
pesquisar mais. Aqui estão alguns recursos para você começar:
• Módulo CSS Shapes, Nível 1 (www.w3.org/TR/css-shapes-1/)

DICA DE PESQUISA NA WEB
• “Introdução às formas CSS” de Razvan Caliman (www.html5rocks.

Se você pesquisar por “CSS Shapes”
com/pt/tutorials/shapes/getting-started)
certamente encontrará esse termo usado
• Formas CSS no Laboratório de Layout Experimental de Jen Simmons (labs.jensim para uma técnica que utiliza CSS para
desenhar formas geométricas como
mons.com/#shapes)
triângulos, setas, círculos e assim por diante.
• “Um Redesign com CSS Shapes” por Eric Meyer (alistapart.com/article/ É um pouco confuso, embora essas
redesign-with-css-shapes) outras “formas CSS” sejam bem bacanas

e algo que você pode querer mexer. Eu
Por que não fazemos o texto em volta das imagens na página da Black Goose Bakery de uma os apresento brevemente no Capítulo 23,
maneira mais interessante para usuários com navegadores que o suportam (EXERCÍCIO Noções básicas de imagens da Web.
15-2)?

EXERCÍCIO 15-2. Adicionando formas em torno de flutuadores
As imagens de pão e muffin na página Black Goose Bakery oferecem após as declarações do círculo, e a quebra da elipse substituirá os estilos
uma boa oportunidade para experimentar formas CSS. Você precisará anteriores (ou excluir e substituir):
usar um navegador compatível, como uma versão recente do Chrome,
img[src*="bread"] { -
Safari ou Opera para ver o efeito de encapsulamento.
webkit-shape-outside: ellipse(130px 95px a 50%
Abra a versão mais recente da folha de estilos de padaria e procure a seção 50%); forma externa: elipse(130px 95px a 50% 50%); }
rotulada /* estilos de "produtos" principais */. Vamos colocar os estilos de
quebra de imagem lá para manter nossa folha de estilo organizada.
Direcione cada imagem individualmente usando um seletor de atributos (já Se você estiver se sentindo ambicioso, pode adicionar uma forma de
existe um configurado para “muffin”). Comece de forma simples e faça o texto contorno de polígono ao redor da imagem do muffin em vez do círculo. Você
envolver um círculo. Defina o raio do círculo para 125px para a imagem do pão precisará copiar essas coordenadas ou apenas copiar e colar do exercício
e 110px para o muffin. finalizado fornecido nos materiais deste capítulo. Ou apenas fique com o
círculo, e ninguém vai julgá-lo.
img[src*="bread"] { -
webkit-shape-outside: circle(125px); img[src*="muffin"] {
forma-fora: círculo(125px); } …
img[src*="muffin"] { margem esquerda: forma externa: polígono (0px 0px, 197px 0px, 241px
50px; -webkit-shape-outside: circle(110px); 31px, 241px 68px, 226px 82px, 219px 131px, 250px
forma-fora: círculo(110px); 142px, 250px 158px, 0px 158px);
}
} O resultado final é mostrado na FIGURA 15-18. É mais aparente quando

a janela do navegador é suficientemente estreita para que linhas suficientes
Salve os estilos e dê uma olhada na página em um navegador
sejam quebradas para revelar a forma. Para navegadores que não suportam
compatível. Os círculos parecem muito bons, mas acho que poderia
formas, o espaço em branco retangular é bom.
melhorar o envoltório ao redor do pão, tornando-o uma elipse. Adicione estes
FIGURA 15-18. A página de padaria com texto envolvendo imagens em uma elipse (pão) e
polígono (muffin) usando CSS Shapes.

Noções básicas de posicionamento
Bem, isso abrange flutuar! Você aprendeu como flutuar elementos para a esquerda e para a direita,
limpar os elementos a seguir para que eles comecem abaixo dos flutuadores e até mesmo criar
formas de quebra de texto sofisticadas. Agora vamos passar para a outra abordagem para mover
elementos na página – posicionamento.
FUNDAMENTOS DE POSICIONAMENTO
CSS fornece vários métodos para posicionar elementos na página. Eles podem ser posicionados em
TERMINOLOGIA
relação ao local em que normalmente apareceriam no fluxo ou removidos completamente do fluxo e
colocados em um ponto específico da página. Janela de exibição
Você também pode posicionar um elemento em relação à janela de visualização e ele permanecerá
Vou ficar com o termo mais formal
no lugar enquanto o restante da página rola. viewport durante as discussões de
posicionamento, mas lembre-se de que
pode ser uma janela do navegador
Tipos de Posicionamento em um computador desktop, a tela
inteira de um dispositivo móvel ou o
quadro de um elemento iframe da
posição
perspectiva da página da Web carregada
Valores: estático | parente | absoluto | fixo
nesse quadro. É qualquer espaço que
Predefinição: estático exibe visualmente uma página da web.
Herda: não
A propriedade position indica que um elemento deve ser posicionado e especifica qual método de
posicionamento deve ser usado. Apresentarei brevemente cada valor de palavra-chave aqui e, em
seguida, daremos uma olhada mais detalhada em cada método no restante deste capítulo.
estático
Este é o esquema de posicionamento normal no qual os elementos são posicionados à medida

que ocorrem no fluxo normal de documentos.
relativo
O posicionamento relativo move a caixa do elemento em relação à sua posição original no

fluxo. O comportamento distintivo do posicionamento relativo é que o espaço que o elemento
teria ocupado no fluxo normal é preservado como
espaço vazio.
absoluto
Elementos absolutamente posicionados são removidos inteiramente do fluxo de documentos e

posicionados em relação à janela de visualização ou a um elemento que o contém (falaremos
mais sobre isso posteriormente). Ao contrário de elementos relativamente posicionados, o
espaço que eles ocupariam é fechado. Na verdade, eles não têm nenhuma influência no layout
dos elementos circundantes.

Noções básicas de posicionamento
fixo
A característica distintiva do posicionamento fixo é que o elemento permanece em uma
posição na janela de visualização mesmo quando o documento rola.
Os elementos fixos são removidos do fluxo do documento e posicionados em relação
à viewport em vez de outro elemento no documento.
pegajoso
O posicionamento fixo é uma combinação de relativo e fixo, pois se comporta como se

estivesse relativamente posicionado, até ser rolado para uma posição especificada em
relação à janela de visualização, ponto em que permanece fixo.
O site do MDN Web Docs tem esta descrição para um possível caso de uso:
O posicionamento fixo é comumente usado para os títulos em uma lista em ordem

alfabética. O título B aparecerá logo abaixo dos itens que começam com A até que
eles sejam rolados para fora da tela. Em vez de deslizar para fora da tela com o
resto do conteúdo, o título B permanecerá fixo na parte superior da janela de
visualização até que todos os itens B tenham rolado para fora da tela, ponto em
que será coberto pelo título C.
O valor da posição de aderência é suportado pelas versões atuais do Chrome, Firefox,

Opera, MS Edge, Android, bem como Safari e iOS Safari com o prefixo -webkit- .
Nenhuma versão do IE o suporta. Felizmente, o posicionamento fixo se degrada
graciosamente, pois o elemento simplesmente permanece alinhado e rola com o
documento se não for suportado.
Cada método de posicionamento tem sua finalidade, mas o posicionamento absoluto é o

mais versátil. Com o posicionamento absoluto, você pode colocar um objeto em qualquer
lugar da viewport ou dentro de outro elemento. O posicionamento absoluto tem sido usado
para criar layouts de várias colunas, mas é mais comumente usado para pequenas tarefas,
como posicionar uma caixa de pesquisa no canto superior de um cabeçalho. É uma
ferramenta útil quando usada com cuidado e moderação.
Especificando a posição
Depois de estabelecer o método de posicionamento, a posição real é especificada com

uma combinação de até quatro propriedades de deslocamento .
superior, direita, inferior, esquerda

Aplica-se a: elementos posicionados (onde o valor da posição é relativo, absoluto ou fixo)
Herda: não
O valor fornecido para cada propriedade de deslocamento define a distância que o elemento
deve ser afastado dessa respectiva aresta. Por exemplo, o valor de top define a distância
que a borda externa superior do elemento posicionado deve ser deslocada da borda
superior do navegador ou outro elemento contido. UMA

Posicionamento Relativo
valor positivo para resultados superiores na caixa do elemento se movendo para baixo por
esse valor (consulte a Nota). Da mesma forma, um valor positivo para left moveria o elemento
posicionado para a direita (em direção ao centro do bloco que o contém) por essa quantidade. NOTA
Mais explicações e exemplos das propriedades de deslocamento serão fornecidos nas Valores negativos são aceitáveis e movem
discussões de cada método de posicionamento. Começaremos nossa exploração do o elemento na direção oposta dos valores
posicionamento com o método relativo bastante direto. positivos. Por exemplo, um valor negativo
para top teria o efeito de mover o elemento
para cima.
POSICIONAMENTO RELATIVA
Conforme mencionado anteriormente, o posicionamento relativo move um elemento em
relação ao seu ponto original no fluxo. O espaço que teria ocupado é preservado e continua
a influenciar o layout do conteúdo circundante. Isso é mais fácil de entender com um exemplo
simples.
Aqui eu posicionei um elemento inline em . Uma cor de fundo brilhante no em e uma borda
no parágrafo que o contém tornam seus limites aparentes. Primeiro, usei a propriedade Quando um elemento é
position para definir o método como relativo e, em seguida, usei a propriedade top offset relativamente posicionado,
para mover o elemento 2em para baixo de sua posição inicial e a propriedade left para movê- o espaço que ocupava é
lo 3em para a direita. Lembre-se, os valores da propriedade de deslocamento afastam o preservado.
elemento da borda especificada, portanto, se você quiser que algo se mova para a direita,
como fiz aqui, use a propriedade de deslocamento à esquerda . Os resultados são mostrados
na FIGURA 15-19.
em {
posição: relativa;
topo: 2em; /* move o elemento para baixo */
esquerda: 3em; /* move o elemento para a direita */
cor de fundo: fúcsia;
}
2em
3em
FIGURA 15-19. Quando um elemento é posicionado com o método relativo, o espaço que ele
ocuparia é preservado.

Posicionamento Absoluto
Eu quero apontar algumas coisas que estão acontecendo aqui:
O espaço original no fluxo de documentos é preservado.
Você pode ver que há um espaço em branco onde o texto enfatizado estaria se o elemento
não tivesse sido posicionado. O conteúdo circundante é disposto como se o elemento ainda
estivesse lá e, portanto, dizemos que o elemento ainda “influencia” o conteúdo circundante.
Colunas com A sobreposição acontece.
Posicionamento Absoluto Por ser um elemento posicionado, ele pode se sobrepor a outros elementos, como acontece
na FIGURA 15-19.
Assim como os floats, o posicionamento
absoluto pode ser usado para criar layouts em colunas. O espaço vazio deixado para trás por objetos relativamente posicionados pode ser um pouco
Atualmente, layouts em colunas devem ser criados
estranho, então esse método não é usado com tanta frequência quanto o posicionamento absoluto.
com CSS Grid, mas você pode usar colunas
No entanto, o posicionamento relativo é comumente usado para criar um “contexto de
posicionadas como alternativa se precisar oferecer
suporte a navegadores antigos que não suportam posicionamento” para um elemento absolutamente posicionado. Lembre -se do contexto de
Grid. posicionamento de termos — explicarei na próxima seção.
Se você quiser aprender como o
posicionamento absoluto pode ser usado para
layout de página inteira, incluí instruções e
POSICIONAMENTO ABSOLUTO
modelos no artigo suplementar “Layout de
página com flutuadores e posicionamento” (PDF),
O posicionamento absoluto funciona de maneira um pouco diferente e é um método mais flexível
disponível em learningwebdesign.com/
para posicionar itens com precisão na página do que o posicionamento relativo.
artigos/.
Agora que você viu como funciona o posicionamento relativo, vamos pegar o mesmo exemplo
mostrado na FIGURA 15-19, só que desta vez vamos alterar o valor da propriedade position para
absoluto (FIGURA 15-20):
em {
posição: absoluta;
topo: 2em;
esquerda: 3em;
}
2em
3em
FIGURA 15-20. Quando um elemento é posicionado absolutamente, ele é removido

do fluxo e o espaço é fechado.

Como você pode ver na FIGURA 15-20, o espaço antes ocupado pelo elemento em está
agora fechado, como é o caso de todos os elementos absolutamente posicionados. Em
sua nova posição, a caixa do elemento se sobrepõe ao conteúdo ao redor. No final, os
elementos absolutamente posicionados não têm qualquer influência na disposição dos
elementos circundantes.
A diferença mais significativa aqui, no entanto, é a localização do elemento posicionado.

Quando um elemento é
Desta vez, os valores de deslocamento posicionam o elemento em 2em para baixo e
absolutamente posicionado,
3em à direita do canto superior esquerdo da janela de visualização (janela do navegador).
o espaço que antes ocupava
Mas espere - antes de começar a pensar que elementos absolutamente posicionados é fechado.
são sempre colocados em relação à janela de visualização, temo que haja mais do que isso.
O que realmente acontece no posicionamento absoluto é que o elemento é posicionado

em relação ao bloco que o contém mais próximo. Acontece que o bloco de conteúdo
mais próximo na FIGURA 15-20 é o elemento raiz (html) , também conhecido como bloco
de conteúdo inicial, de modo que os valores de deslocamento posicionam o elemento em
em relação a todo o documento.
Entender o conceito de bloco de contenção é o primeiro passo para lidar com o

posicionamento absoluto.
Contendo Blocos
O CSS Positioned Layout Module, Nível 3, afirma: “A posição e o tamanho da(s) caixa(s)
de um elemento às vezes são calculados em relação a um determinado retângulo,
chamado de bloco de contenção do elemento”. É fundamental estar ciente do bloco que
contém o elemento que você deseja posicionar. Às vezes nos referimos a isso como o
contexto de posicionamento.
A especificação estabelece uma série de regras intrincadas para determinar o bloco que
contém um elemento, mas basicamente se resume a isso:
• Se o elemento posicionado não estiver contido em outro elemento posicionado, ele

será colocado em relação ao bloco contendo inicial (criado pelo elemento html ).
• Mas se o elemento tiver um ancestral (ou seja, estiver contido em um elemento) que
tenha sua posição definida como relativa, absoluta ou fixa, o elemento será
posicionado em relação às bordas desse elemento.
A FIGURA 15-20 é um exemplo do primeiro caso: o elemento p que contém o elemento

absolutamente posicionado em não está posicionado e não há outros elementos
posicionados mais acima na hierarquia. Portanto, o elemento em é posicionado em
relação ao bloco contendo inicial, que é equivalente à área da viewport.
Vamos deliberadamente transformar o elemento p em um bloco de contenção e ver o

que acontece. Tudo o que precisamos fazer é aplicar a propriedade position a ele; nós
não temos que realmente movê-lo. A maneira mais comum de transformar um elemento
em um bloco que o contém é definir sua posição como relativa, mas não movê-lo com nenhum

valores de compensação. É disso que eu estava falando anteriormente quando disse que o
posicionamento relativo é usado para criar um contexto de posicionamento para um elemento
absolutamente posicionado.
Neste exemplo, manteremos a mesma regra de estilo para o elemento em , mas adicionaremos uma
propriedade position ao elemento p , tornando-o o bloco de contenção do elemento em posicionado .
A FIGURA 15-21 mostra os resultados.
p
{ posição: relativa;
cor de fundo: #F2F5D5;
borda: roxo sólido de 2px;
}
2em
3em
FIGURA 15-21. O elemento p relativamente posicionado atua como um bloco de contenção para o
elemento em .
Você pode ver que o elemento em agora está posicionado 2em para baixo e 3em do canto superior
esquerdo da caixa de parágrafo, não da janela do navegador. Observe também que ele está
posicionado em relação à borda de preenchimento do parágrafo (apenas dentro da borda), não à
borda da área de conteúdo. Este é o comportamento normal quando os elementos do bloco são
NOTA usados como blocos contendo (veja a Nota).
Quando elementos embutidos são usados Vou bisbilhotar isso um pouco mais para revelar aspectos adicionais de objetos absolutamente
como blocos de contenção (e podem ser), o posicionados. Desta vez, adicionei laços de largura e margem ao elemento posicionado em (FIGURA
elemento posicionado é colocado em relação à 15-22):
borda da área de conteúdo, não à borda de
em {
preenchimento.
largura: 200px;
margem: 25px;
topo: 2em;
esquerda: 3em;
}

2em
25px
3em
FIGURA 15-22. Adicionando uma largura e margens ao elemento posicionado.
Aqui podemos ver que:
• Os valores de deslocamento se aplicam às bordas externas da caixa do elemento (a borda da

margem externa) para elementos posicionados absolutamente (consulte a Nota). NOTA
• Elementos absolutamente posicionados sempre se comportam como elementos de nível de bloco. Para elementos relativamente posicionados, o
Por exemplo, as margens de todos os lados são mantidas, mesmo que este seja um elemento deslocamento é medido na própria caixa (não
embutido. Também permite que uma largura seja definida para o elemento. na borda da margem externa).
É importante ter em mente que, uma vez posicionado um elemento, ele se torna o novo bloco de
contenção para todos os elementos que ele contém. Digamos que você posicione um div estreito no
canto superior esquerdo de uma página, criando uma coluna. Se você posicionar absolutamente uma
imagem dentro desse div com valores de deslocamento que a coloquem no canto superior direito,
ela aparecerá no canto superior direito desse div, não na página inteira. Uma vez que o elemento pai
é posicionado, ele atua como o bloco que contém a img e quaisquer outros elementos contidos.
Especificando a posição
Agora que você tem uma noção melhor do conceito de bloco de contenção, vamos dedicar algum
tempo para nos familiarizarmos melhor com as propriedades de deslocamento. Até agora, vimos
apenas um elemento movido alguns ems para baixo e para a direita, mas isso não é tudo o que você
pode fazer, é claro.
Medidas de pixel
Conforme mencionado anteriormente, os valores de deslocamento positivos empurram a caixa do

elemento posicionado para longe da borda especificada e em direção ao centro do bloco que o
contém. Se não houver valor fornecido para um lado, ele será definido como automático e o
navegador adicionará espaço suficiente para fazer o layout funcionar. Neste exemplo, div#B está
contido em div#A, que recebeu as dimensões de 600 pixels de largura por 300 pixels de altura. Eu
usei comprimentos de pixel para todas as quatro propriedades de deslocamento para colocar

o elemento posicionado (#B) em um ponto específico no elemento que o contém (#A)

(FIGURA 15-23).
A MARCAÇÃO
<div id="A">
<div id="B"> </div>
</div>
OS ESTILOS
div#A {
posição: relativa; /* cria o bloco que o contém */
largura: 600px;
altura: 300px;
cor de fundo: #C6DE89; /* verde */
}
div#B {
topo: 25px;
direita: 50px;
inferior: 75px;
esquerda: 100px;
cor de fundo: aço azul;
}
div#A (600px de largura x 300px de altura)
topo: 25px
div#B
(calculado em 450 de largura x 200 px de altura) certo:
esquerda: 100px
50px
inferior: 75px
FIGURA 15-23. Definir valores de deslocamento para todos os quatro lados de um elemento posicionado.
Observe que, definindo deslocamentos em todos os quatro lados, defini indiretamente as

dimensões do div#B posicionado. Ele preenche o espaço de 450 × 200 pixels que sobra
dentro do bloco que o contém após a aplicação dos valores de deslocamento. Se eu
também tivesse especificado uma largura e outras propriedades de caixa para div#B, existe
a possibilidade de conflitos se o total dos valores para a caixa posicionada e seus
deslocamentos não corresponderem ao espaço disponível dentro do bloco que a contém.

A especificação CSS fornece um conjunto assustador de regras para lidar com conflitos, mas
o resultado é que você deve ter cuidado para não especificar demais propriedades e
AVISO
deslocamentos de caixa. Em geral, uma largura (fatorando em margens, bem como
preenchimento e borda se você estiver usando o modelo de dimensionamento de caixa de Tenha cuidado ao posicionar elementos na
caixa de conteúdo ) e uma ou duas propriedades de deslocamento são tudo o que é parte inferior do bloco contendo inicial (o
elemento html ). Embora você possa esperar
necessário para obter o layout que você está procurando. Deixe o navegador cuidar dos cálculos restantes.
que ele seja posicionado na parte inferior de
toda a página, os navegadores na verdade
Valores percentuais
colocam o elemento na parte inferior da janela
Você também pode especificar posições com valores percentuais. No primeiro exemplo da do navegador. Os resultados podem ser
FIGURA 15-24, a imagem é posicionada na metade (50%) da borda esquerda do bloco de imprevisíveis. Se você quiser algo posicionado
na parte inferior da sua página, coloque-o em
contenção. No segundo exemplo à direita, o elemento img é posicionado de forma que sempre
um elemento de bloco de conteúdo no final da
apareça no canto inferior direito do bloco que o contém.
fonte do documento e vá a partir daí.
img#A {
topo: 50%;
esquerda:
0%; }
img#B { NOTA
inferior: 0%; O símbolo % pode ser omitido para um valor 0,
direita: 0%; } que essencialmente o transforma em um
comprimento 0, mas obtém um resultado equivalente.
Embora os exemplos aqui especifiquem um deslocamento vertical e horizontal, é comum

fornecer apenas um deslocamento para um elemento posicionado - por exemplo, para movê-
lo para a esquerda ou para a direita em uma margem usando as propriedades esquerda ou direita .
No EXERCÍCIO 15-3, faremos mais alterações na página inicial da Black Goose Bakery, desta
vez usando posicionamento absoluto.
topo: 50%
esquerda: 0% inferior: 0%; direito: 0%
FIGURA 15-24. Usando valores percentuais para posicionar um elemento em um bloco que o contém.

EXERCÍCIO 15-3. Posicionamento absoluto
Neste exercício, usaremos o posicionamento absoluto para adicionar um Salve o documento e dê uma olhada (FIGURA 15-25). Redimensione a
gráfico de prêmio à página inicial. Abra a versão do site que você salvou no janela do navegador bem estreita e você verá que a imagem do prêmio
EXERCÍCIO 15-2. posicionada se sobrepõe ao conteúdo do cabeçalho. Observe também
1. Boas notícias! Black Goose Bakery ganhou o mercado dos agricultores que quando você rola o documento, a imagem rola com o restante da
Prêmio, e temos o privilégio de exibir uma medalha de prêmio na página página. Tente brincar com outras propriedades de deslocamento para ter
inicial. Como esse é um conteúdo novo, precisaremos adicioná-lo à marcação uma ideia do posicionamento na janela de visualização (ou o “bloco
em bakery.html. Por se tratar de informação não essencial, adicione a contendo inicial” para ser mais preciso).
imagem em uma nova div no rodapé do documento: PS Eu sei que a lista de navegação ainda parece ruim, mas vamos corrigi-
la no Capítulo 16.
<footer>
<p>Todos os direitos autorais de conteúdo ©
2017, Black Goose Bistro.</p> <div id="award"><img
src="images/award.png" alt="Farmers' Market
Award"></div> </footer>
2. Só porque o prêmio está no final do documento de origem não significa

que ele precisa ser exibido lá. Podemos usar o posicionamento absoluto
para colocar o prêmio no canto superior esquerdo da viewport adicionando
uma nova regra à folha de estilo que posiciona o div, assim (coloquei o meu
na seção /* misc styles */ ):
#prêmio
{ posição: absoluta;
topo: 30px; esquerda:
50px;
} FIGURA 15-25. Um gráfico de prêmio absolutamente posicionado.
Ordem de empilhamento
Antes de encerrarmos o livro sobre posicionamento absoluto, há um último conceito

relacionado que quero apresentar. Como vimos, elementos absolutamente
posicionados se sobrepõem a outros elementos, portanto, vários elementos
posicionados têm o potencial de se empilhar uns sobre os outros.
Por padrão, os elementos são empilhados na ordem em que aparecem no

documento, mas você pode alterar a ordem de empilhamento com a propriedade z-
index (consulte Nota). Imagine o eixo z como uma linha perpendicular à página,
como se fosse da ponta do nariz, passando por esta página e saindo pelo outro lado.
NOTA
A propriedade z-index também é útil para itens em uma grade, que também têm o potencial de se
sobrepor, conforme discutido no Capítulo 16.

índice z
Valores: número | auto
Aplica-se a: elementos posicionados
Herda: não
O valor da propriedade z-index é um número (positivo ou negativo). Quanto maior o

número, mais alto o elemento aparecerá na pilha (ou seja, mais próximo do seu nariz).
Números mais baixos e valores negativos movem o elemento para baixo na pilha. Vejamos
um exemplo para deixar isso claro (FIGURA 15-26).
Aqui estão três elementos de parágrafo, cada um contendo uma imagem de letra (A, B e
C, respectivamente) que foram posicionados absolutamente de forma que se sobreponham
na página. Por padrão, o parágrafo C apareceria no topo porque aparece por último na
fonte. No entanto, ao atribuir valores de índice z mais altos aos parágrafos A e B,
podemos forçá-los a empilhar em nossa ordem preferida.
Observe que os valores de z-index não precisam ser sequenciais e não estão relacionados
a nada em particular. Tudo o que importa é que valores numéricos mais altos posicionem
o elemento mais alto na pilha.
A MARCAÇÃO
<p id="A"><img src="A.gif" alt="A"></p>

<p id="B"><img src="B.gif" alt="B"></p>
<p id="C"><img src="C.gif" alt="C"></p>
OS ESTILOS
#A índice z: 100
{ z-index: 100;
topo: 175px;
esquerda: 200px;
}
#B
{ z-index: 5;
topo: 275px;
esquerda: 100px; índice z: 5
}
índice z: 1
#C
Por padrão, os elementos posteriores na Você pode alterar a ordem de empilhamento com a
{ z-index: 1;
ordem de origem do documento são empilhados propriedade z-index. Os valores mais altos são
sobre os elementos anteriores. empilhados sobre os valores mais baixos.
topo: 325px;
esquerda: 250px;
} FIGURA 15-26. Alterando a ordem de empilhamento com a propriedade z-index .
Para ser honesto, a propriedade z-index geralmente não é necessária para a maioria
dos layouts de página, mas você deve saber que está lá se precisar. Se você quiser
garantir que um elemento posicionado sempre termine no topo, atribua a ele um índice z muito alto
valor, como 100 ou 1000. Se você quiser ter certeza de que está na parte inferior, dê um
valor negativo. O número em si realmente não importa.

Posicionamento Fixo
POSICIONAMENTO FIXO
Cobrimos o posicionamento relativo e absoluto, então agora é hora de assumir o

posicionamento fixo.
Na maioria das vezes, o posicionamento fixo funciona como o posicionamento absoluto. A

diferença significativa é que os valores de deslocamento para elementos fixos são sempre
em relação à janela de visualização, o que significa que o elemento posicionado permanece
parado mesmo quando o resto da página rola. Por outro lado, você deve se lembrar que,
quando você rolava a página Black Goose Bakery no EXERCÍCIO 15-3, o gráfico do
prêmio rolava junto com o documento — mesmo que estivesse posicionado em relação ao
bloco de conteúdo inicial (equivalente à janela de visualização). Não é assim com o
posicionamento fixo, onde a posição é, bem, fixa.
Elementos fixos são frequentemente usados para menus que ficam no mesmo lugar na
parte superior, inferior ou lateral de uma tela para que estejam sempre disponíveis, mesmo
AVISO quando o conteúdo rola (consulte Aviso). Lembre-se de que, se você fixar um elemento
na parte inferior da janela de visualização, precisará deixar espaço suficiente no final do
A propriedade position: fixed causa alguns
documento para que o conteúdo não fique oculto atrás do elemento fixo. Elementos fixos
comportamentos de bugs em versões antigas
do Safari móvel (5, 6 e 7) e Android (<4.4).
também são problemáticos quando o documento é impresso porque eles serão impressos
Felizmente, esses navegadores móveis estão em todas as páginas sem reservar espaço para si mesmos. É melhor desativar os
quase obsoletos no momento da redação deste elementos fixos ao imprimir o documento. (A segmentação de impressão com @media é
artigo, mas é um lembrete para fazer testes abordada no Capítulo 17, Responsive Web Design.)
completos em uma variedade de dispositivos
móveis se você tiver elementos fixos.
Vamos mudar o gráfico do prêmio na página Black Goose Bakery para uma posição fixa
no EXERCÍCIO 15-4 para ver a diferença.
EXERCÍCIO 15-4. Posicionamento fixo
Isso deve ser simples. Abra a folha de estilo da padaria como você
a deixou no EXERCÍCIO 15-3 e edite a regra de estilo para a div
#award para torná-la fixa em vez de absoluta:
#prêmio {
posição: fixa;
topo: 30px;
esquerda: 50px;
}
Salve os estilos e abra a página em um navegador. Ao rolar a página,
você verá que o prêmio agora fica onde o posicionamos na janela do
navegador (FIGURA 15-27). Você pode ver que os elementos
posicionados fixos têm o potencial de ocultar o conteúdo à medida
que a página rola. Teste bem para ver as armadilhas potenciais e
avalie-as em relação aos benefícios. FIGURA 15-27. O prêmio permanece no mesmo lugar no
canto superior esquerdo do navegador quando o documento rola.

Teste-se
Isso serve para flutuação e posicionamento. No próximo capítulo, você aprenderá sobre caixas
flexíveis e layout de grade, que são ferramentas poderosas para projetar a estrutura geral de uma
página e recursos específicos da página. Mas primeiro, tente fazer algumas perguntas sobre
flutuação e posicionamento.
TESTE-SE
Antes de prosseguirmos, reserve um momento para ver como você absorveu os princípios deste
capítulo. Você encontrará as respostas no Apêndice A.
1. Qual das seguintes opções não é verdadeira para elementos flutuantes?
uma. Todos os elementos flutuantes se comportam como elementos de bloco.
b. Os flutuadores são posicionados contra a borda de preenchimento do recipiente

elemento.
c. O conteúdo dos elementos embutidos flui em torno de um flutuador, mas a caixa do elemento
permanece inalterada.
d. Você deve fornecer uma propriedade de largura para elementos de bloco flutuantes.
2. Qual destas regras de estilo está incorreta? Por quê?
uma. img { float: esquerda; margem: 20px;}
b. img { float: certo; largura: 120px; altura: 80px; }
c. img { float: certo; direita: 30px; }
d. img { float: esquerda; margem inferior: 2em; }
3. Como você garante que um elemento de rodapé sempre comece abaixo de qualquer barra lateral
flutuante na página?
4. Escreva o nome do método ou métodos de posicionamento (estático, relativo, absoluto ou fixo)

que melhor corresponda a cada uma das descrições a seguir.
uma. Posiciona o elemento em relação a um bloco que o contém.
b. Remove o elemento do fluxo normal.
c. Sempre posiciona o elemento em relação à viewport.
d. O elemento posicionado pode sobrepor outro conteúdo.

Contínuo...

Revisão de CSS: propriedades flutuantes e de posicionamento
e. Posiciona o elemento no fluxo normal.
f. O espaço que o elemento teria ocupado no fluxo normal é

preservado.
g. O espaço que o elemento teria ocupado no fluxo normal é

fechado.
h. Você pode alterar a ordem de empilhamento com z-index.
eu. Posiciona o elemento em relação à sua posição original na posição normal

fluxo.
REVISÃO CSS: FLUTUANTE E

PROPRIEDADES DE POSICIONAMENTO
Aqui está um resumo das propriedades cobertas neste capítulo.
Claro Impede que um elemento seja disposto ao lado de um flutuador
flutuador Move o elemento para a direita ou para a esquerda e permite que o

seguinte texto flua em torno dele
posição Especifica o método de posicionamento a ser aplicado
superior, inferior, Especifica a quantidade de deslocamento de cada aresta respectiva

direita, esquerda
forma-fora Faz com que o conteúdo envolva uma forma em vez da caixa
delimitadora do float.
forma-margem Adiciona uma margem à forma externa
shape-image-threshold Define o limite do canal alfa usado para criar o

forma de embrulho
índice z Especifica a ordem de aparência em uma pilha de elementos

posicionados sobrepostos

CAPÍTULO
LAYOUT CSS COM 16

CAIXA FLEXÍVEL E
REDE
Prepare-se… este é um capítulo incrível ! Nele, você conhecerá duas importantes ferramentas NESTE CAPÍTULO
de layout de página CSS:

Recipientes e itens flexíveis
• Flexbox para maior controle sobre a organização de itens ao longo de um eixo
Direção de fluxo e envolvimento
• Grade para layouts baseados em grade, como aqueles que designers de impressão usam
há décadas Alinhamento de itens flexíveis
Cada ferramenta tem seu propósito especial, mas você pode usá-las juntas para obter layouts Item de controle “flex”
com os quais apenas sonhamos até agora. Por exemplo, você pode criar a estrutura geral
Recipientes e itens de grade
da página com uma grade e usar um flexbox para domar o cabeçalho e os elementos de
navegação. Use cada técnica para o que for mais adequado – você não precisa escolher Configurando um modelo de grade
apenas uma.
Colocando itens na grade
Agora que os navegadores começaram a oferecer suporte a essas técnicas, designers e
desenvolvedores têm opções reais para obter layouts sofisticados com a flexibilidade Recursos de grade implícitos
necessária para lidar com uma ampla variedade de tamanhos de tela. Uma vez que os
Alinhamento de itens de grade
navegadores antigos desaparecem do uso, podemos dar adeus aos nossos antigos hacks
de layout float (enquanto isso, eles fazem fallbacks decentes).
Você pode notar que este capítulo é grande. Realmente grande. Isso porque as especificações
estão transbordando de opções e novos conceitos que exigem explicação e exemplos. É
muito para empacotar em sua mente de uma só vez, então eu recomendo tratá-lo como dois
mini-capítulos e passar algum tempo se atualizando com cada técnica individualmente.
CAIXAS FLEXÍVEIS COM CSS FLEXBOX
O CSS Flexible Box Layout Module (também conhecido simplesmente como Flexbox) oferece
aos designers e desenvolvedores uma ferramenta útil para criar componentes de páginas da
Web, como barras de menu, listagens de produtos, galerias e muito mais.
419
Caixas flexíveis com CSS Flexbox
De acordo com a especificação,
O aspecto definidor do layout flexível é a capacidade de tornar os itens flexíveis “flexíveis”,

alterando sua largura/ altura para preencher o espaço disponível na dimensão principal.
Isso significa que permite que os itens se estiquem ou encolham dentro de seus contêineres, evitando
desperdício de espaço e transbordamento – uma vantagem real para fazer com que os layouts se ajustem
a uma variedade de tamanhos de janela de visualização. Outras vantagens incluem o seguinte:
• A capacidade de fazer com que todos os itens vizinhos tenham a mesma altura
• Centralização horizontal e vertical fácil (curiosamente indescritível com CSS antigo

métodos)
• A capacidade de alterar a ordem em que os itens são exibidos, independentemente de

a fonte
O modelo de layout Flexbox é incrivelmente robusto, mas como foi projetado para máxima
flexibilidade, leva um pouco de tempo para entender isso (pelo menos para mim). Veja como isso me
ajudou a pensar sobre isso: quando você diz a um elemento para se tornar um flexbox, todos os seus
elementos filhos se alinham em um eixo, como contas em uma corda. O barbante pode ser horizontal,
pode ficar pendurado verticalmente ou pode até enrolar em várias linhas, mas as contas estão
sempre em um barbante (ou para usar o termo apropriado, um eixo). Se você deseja alinhar as
coisas horizontal e verticalmente, esse é o trabalho do CSS Grid, que apresentarei na próxima seção
deste capítulo.
Antes de nos aprofundarmos, tenho um aviso rápido sobre o suporte ao navegador. Todas as versões
atuais do navegador suportam as mais recentes especificações do Módulo de Layout de Caixa
Flexível W3C; no entanto, os navegadores mais antigos exigem prefixos e até mesmo propriedades
e valores diferentes e desatualizados. Vou ficar com as propriedades padrão atuais para manter tudo
simples enquanto você aprende isso pela primeira vez, mas saiba
Layout de várias colunas

Uma terceira ferramenta de layout CSS3 que
você pode experimentar é o layout multicoluna.
O Módulo de Layout de várias colunas (w3.org/
TR/css-multicol-1) fornece ferramentas para
despejar conteúdo de texto em várias colunas,
como você pode ver em um jornal (FIGURA 16-1).
Ele foi projetado para ser flexível, permitindo que as
larguras e o número de colunas se ajustem
automaticamente ao espaço disponível.
Este capítulo já é grande o suficiente, então

coloquei esta lição em um artigo, “Multicolumn
Layout” (PDF), disponível em
learningwebdesign.com/
artigos/. FIGURA 16-1. Um exemplo de texto formatado com as propriedades de várias colunas.

que as folhas de estilo prontas para produção podem exigir mais código. Vou lhe dar
os detalhes sobre o suporte ao navegador no final desta seção.
Configurando um contêiner Flexbox

Você já aprendeu sobre o modo de layout de bloco para empilhar elementos no fluxo
normal e o modo em linha para exibir o conteúdo horizontalmente. Flexbox é outro
modo de layout com seus próprios comportamentos. Para ativar o modo flexbox para
um elemento, defina sua propriedade display como flex ou inline flex (consulte a
Nota). Agora é um contêiner flexível, e todos os seus elementos filhos diretos (sejam
eles divs, itens de lista, parágrafos, etc.) automaticamente se tornam itens flexíveis NOTA
nesse contêiner. Os itens flexíveis (as contas) são dispostos e alinhados ao longo
O valor inline-flex gera uma caixa de
das linhas flexíveis (a corda). contêiner flexível de nível inline. Vamos
A FIGURA 16-2 mostra o efeito de simplesmente adicionar display: flex a uma div, nos concentrar no valor flex mais
ativando assim o switch Flexbox. Eu adicionei uma borda azul ao contêiner para comumente usado neste capítulo.
deixar seus limites claros. Para economizar espaço, não estou mostrando estilos
puramente cosméticos, como cores e fontes.
A MARCAÇÃO
<div class="box box1">1</div>
</div>
OS ESTILOS
#container
{ display: flex;
}
Recursos do Flexbox
Você aprenderá todos os detalhes do Flexbox neste capítulo, mas é sempre O que o Flexbox?! (flexbox.io/)
bom ter algumas perspectivas e tutoriais práticos online. Se você fizer uma Wes Bos faz um ótimo trabalho orientando você pelas propriedades
pesquisa na web, certifique-se de limitar suas descobertas a postagens de 2015 do Flexbox, bem como alguns projetos de código nesta série de vídeos
e posteriores, ou você pode encontrar conselhos desatualizados com base em gratuita de 20 partes.
versões de especificações anteriores. A seguir estão alguns dos sites que achei
mais úteis ou mais divertidos: Flexbox Playground (codepen.io/enxaneta/full/adLPwv/)
Como o nome diz, esta página da Gabi permite que você brinque com todas
Um guia completo para
as propriedades e valores do Flexbox e veja os resultados instantaneamente.
Flexbox (css-tricks.com/snippets/css/a-guide-to-flexbox/)
É uma boa maneira de se familiarizar com o que o Flexbox pode fazer.
Este resumo dos recursos do Flexbox por Chris Coyier é uma das referências
mais populares do Flexbox por aí. Muitos desenvolvedores apenas o mantêm
aberto em um navegador quando fazem o trabalho do Flexbox. Flexy Boxes (the-echoplex.net/flexyboxes/)
Este é outro playground Flexbox e gerador de código.
Flexbox Froggy (flexboxfroggy.com/)
Não perca este jogo online para aprender Flexbox ajudando sapos coloridos
a voltar para seus lírios.
16. Layout CSS com Flexbox e Grid 421

Por padrão, os divs são exibidos como elementos de bloco, empilhados

verticalmente. Ativar o modo flexbox faz com que eles se alinhem em fila.
modo de layout de bloco

exibição: flexível;
modo de layout flexbox
recipiente flexível
flexionar flexionar flexionar flexionar flexionar
item item item item item
FIGURA 16-2. A aplicação do modo de exibição flexível transforma os elementos filho em

itens flexíveis que se alinham ao longo de um eixo. Você não precisa fazer nada com os próprios
elementos filho.
Você pode ver que os itens foram alinhados em uma linha da esquerda para a direita, que é
CURIOSIDADES DO FLEXBOX o comportamento padrão do Flexbox se sua página estiver em inglês ou outro idioma escrito
em linhas da esquerda para a direita. Isso ocorre porque a direção padrão do flexbox
Aqui estão algumas coisas para saber sobre
Flexbox e comportamento do item flexível:
corresponde à direção do idioma em que a página está escrita. Ela iria da direita para a
esquerda por padrão em hebraico ou árabe ou em colunas se a página estiver definida com
• layout float, clear, multicoluna e
uma direção de escrita vertical. Por não estar vinculado a uma direção padrão, a terminologia
alinhamento vertical não funcionam
com elementos no modo flexbox. para especificar direções tende a ser um pouco abstrata.
• As margens não são recolhidas no modo

Você verá o que quero dizer quando falamos sobre “fluxo” na seção a seguir.
flexbox. As bordas das margens dos itens são
Vale a pena notar que você pode transformar qualquer item flex em um contêiner flex
colocadas no início ou no final da linha flexível
configurando sua exibição para flex, resultando em um flexbox aninhado. Na verdade, você
e não se sobrepõem ao preenchimento do
contêiner. As margens dos itens vizinhos se tentará isso em um próximo exercício. Algumas soluções Flexbox usam flexboxes aninhadas
somam. em várias camadas de profundidade.
• A especificação recomenda evitar valores

percentuais para margem e preenchimento Controlando o “fluxo” dentro do contêiner
em itens flexíveis devido a resultados
imprevisíveis.
Depois de transformar um elemento em um contêiner flexível, existem algumas propriedades
que você pode definir nesse contêiner para controlar como os itens fluem dentro dele. O
fluxo refere-se à direção na qual os itens flexíveis são dispostos, bem como se eles podem
ser agrupados em linhas adicionais.

Especificando a direção do fluxo
Você pode ficar satisfeito com os itens alinhados em uma linha, conforme mostrado na FIGURA 16-2, mas
existem algumas outras opções que são controladas com o comando flex-direction
propriedade.
direção flexível
Valores:
linha | coluna | linha inversa | coluna inversa
Predefinição: fileira
Aplica-se a: contêineres flexíveis
Herda: não
O valor padrão é row, como vimos no exemplo anterior (veja a barra lateral “Row and Column Direction” ).
Você também pode especificar que os itens sejam alinhados verticalmente em uma coluna. As outras
opções, inversão de linha e inversão de coluna, organizam os itens na direção que você esperaria, mas
começam no final e são preenchidos na direção oposta. A FIGURA 16-3 mostra os efeitos de cada palavra-
chave aplicada ao nosso exemplo simples.
direção flexível: linha; (predefinição) direção flexível: reverso de linha;
Linha e Coluna
direção flexível: coluna; flex-direction: coluna-reverso;
Direção
Em sistemas de escrita com linhas

horizontais de texto, a palavra-chave
linha apresenta os itens horizontalmente,
como nós, ocidentais, normalmente
pensamos em uma “linha”. Tenha em mente
que em linguagens orientadas verticalmente,
a linha alinha os itens verticalmente, de
acordo com a direção padrão do sistema de
escrita. Da mesma forma, a coluna resulta
em itens alinhados horizontalmente em
idiomas verticais.
FIGURA 16-3. Exemplos de valores de direção flexível linha, reverso de linha, coluna e reverso de coluna. Este é um comportamento que vale a
pena conhecer; no entanto, como estamos
criando sites em inglês neste livro, manterei
Agora que você viu o Flexbox em ação, é um bom momento para se familiarizar com a terminologia formal as suposições de que linha = horizontal e
coluna = vertical ao longo deste capítulo para
do Flexbox. Como o sistema é independente de direção, não há referências a “esquerda”, “direita”, “superior”
simplificar.
ou “inferior” nos valores de propriedade. Em vez disso, falamos sobre o eixo principal e o eixo transversal. O
eixo principal é a direção do fluxo que você especificou para o contêiner flexível. Para idiomas principalmente
horizontais, quando definido como linha, o eixo principal é horizontal; para coluna, o eixo principal é vertical
(novamente, linhas e colunas são dependentes do idioma, conforme explicado anteriormente na barra lateral
"Direção de linha e coluna" ).

O eixo transversal é qualquer direção perpendicular ao eixo principal (vertical para

linha, horizontal para coluna). As partes de um contêiner flexível são ilustradas na
FIGURA 16-4.
O eixo principal é a direção
do fluxo que você especificou Além dos eixos, entender as outras partes do sistema Flexbox facilita o aprendizado
para o contêiner flexível. das propriedades. Tanto o eixo principal quanto o transversal têm um início e um fim,
com base na direção em que os itens fluem. O tamanho principal é a largura (ou
O eixo transversal é
altura se for uma coluna) do contêiner ao longo do eixo principal e o tamanho cruzado
perpendicular ao eixo principal.
é a altura (ou largura se for uma coluna) ao longo do eixo cruzado.
Quebrando em várias linhas

Se você tiver um número grande ou desconhecido de itens flexíveis em um contêiner
e não quiser que eles sejam esmagados no espaço disponível, você pode permitir
que eles quebrem linhas adicionais com a propriedade flex-wrap .
PARA IDIOMAS QUE LÊEM HORIZONTALMENTE DA ESQUERDA PARA A DIREITA:
Quando a direção flexível é definida como linha, o eixo principal é horizontal e o eixo
transversal é vertical.
a Principal a Principal
direção flexível: linha;
começar fim
NÃO SE PREOCUPE
tamanho principal
Cruz
Manter os eixos principais e começar
item flexível item flexível
cruzados retos enquanto você alterna eixo principal
entre linhas e colunas pode parecer
Cruz
uma ginástica mental e é uma das Tamanho
coisas mais complicadas de usar o

Flexbox. Com a prática, você se acostuma. Cruz
fim
Quando a direção flexível é definida como coluna, o eixo principal é vertical

e o eixo transversal é horizontal.
Cruz direção flexível: coluna; Cruz

começar fim
tamanho cruzado
a Principal
começar
item flexível
eixo cruzado
a Principal
Tamanho
a Principal
fim item flexível
FIGURA 16-4. As partes de um contêiner flexível.

envoltório flexível
Valores: agorarap | embrulhar | wrap-reverse
Predefinição: agora rap
Herda: não
Por padrão, os itens fazem a coisa squish e não quebram em linhas adicionais
(nowrap). A palavra-chave wrap ativa a capacidade de quebrar em várias linhas
na direção do início cruzado ao final cruzado. Por exemplo, se a direção for linha,
as linhas serão posicionadas de cima para baixo.
wrap-reverse quebra os elementos em várias linhas, mas os flui na direção oposta,

da extremidade cruzada para o início cruzado (de baixo para cima, neste caso).
Parece um pouco esotérico para mim, mas você nunca sabe quando pode surgir
uma ocasião para colocá-lo em uso.
Adicionei mais divs ao nosso exemplo de caixa flexível numerada e dei aos itens
flexíveis uma largura de 25% para que apenas quatro caibam na largura do
contêiner. A FIGURA 16-5 mostra uma comparação das várias opções de wrap
quando a flex-direction é a linha padrão .
A MARCAÇÃO OS ESTILOS
<div id="container"> #container

<div class="box box1">1</div>  <div class="box direção flexível: linha;
box10">10</div> </div> flex-wrap: embrulhar;
} .caixa {
largura: 25%;
}
flex-wrap: embrulhar; flex-wrap: wrap-reverse;
flex-wrap: nowrap; (predefinição)
Quando o encapsulamento está desabilitado, os itens flexíveis

são esmagados se não houver espaço suficiente e, se não
puderem ser compactados mais, podem ser cortados se não houver
espaço suficiente na janela de visualização.
FIGURA 16-5. Comparando os efeitos das palavras-chave nowrap, wrap e wrap-reverse para flex-wrap.

Por padrão, quando a direção flexível é definida como coluna, o contêiner se

expande para conter a altura dos itens. Para ver o embrulho começar, você
precisa definir uma altura no contêiner, como eu fiz aqui. A FIGURA 16-6 mostra
como o encapsulamento funciona para cada uma das palavras-chave flex-wrap .
Observe que os itens ainda têm 25% da largura do contêiner pai, portanto, sobra
espaço entre as colunas.
#container
{ display: flex;
altura: 350px;
direção flexível: coluna;
flex-wrap: embrulhar;
} .caixa {
largura: 25%;
}
flex-wrap: nowrap; (predefinição) flex-wrap: embrulhar;
flex-wrap: wrap-reverse;
FIGURA 16-6. Comparando nowrap, wrap e wrap-reverse quando os itens estão em uma coluna.
Colocando-o junto com o flex-flow

A propriedade abreviada flex-flow torna a especificação de flex-direction e flex-
wrap curta e agradável. A omissão de um valor resulta no valor padrão para sua
respectiva propriedade, o que significa que você pode usar flex-flow para uma
ou ambas as direções e wrap.

fluxo flexível
Valores: flex-direction flex-wrap
Predefinição: linha agora rap
Herda: não
Usando o flex-flow, eu poderia encurtar o exemplo anterior (FIGURA 16-6) assim:

#container {
exibição: flexível;
altura: 350px;
fluxo flexível: quebra de coluna;
}
Você apenas arranhou a superfície do Flexbox, mas tem o que é preciso para colocar
aquele menu de navegação feio na página da padaria em forma no EXERCÍCIO 16-1.
EXERCÍCIO 16-1. Fazendo uma barra de navegação com Flexbox
Abra a versão mais recente da folha de estilo da página inicial da padaria em um nav ul li a { display:
editor de texto. Se você precisar de um novo começo, encontrará uma cópia atualizada
block; borda: 1px
sólido; raio da borda:
de bakery-styles.css nos materiais do Capítulo 16.
.5em; preenchimento: .5em
Nota: Certifique-se de usar um dos navegadores compatíveis com Flexbox listados 1em; margem: .5em; }
no final desta seção.
1. Abra bakery-styles.css em um editor de texto e comece tornando o elemento

ul no elemento nav o mais neutro possível:
3. Queremos que o menu de navegação seja centralizado na largura da seção de
nav ul navegação . Estou adiantando um pouco aqui porque ainda não vimos as
{ margem: 0; propriedades de alinhamento, mas esta é bastante intuitiva.
preenchimento: Considere isso uma prévia do que está por vir na próxima seção.
0; tipo de estilo de lista: Adicione a seguinte declaração para o elemento nav ul :
nenhum; }
navegue {
Transforme esse elemento ul em um flexbox definindo sua exibição como …
flex. Como resultado, todos os elementos li se tornam itens flexíveis. exibição: flexível;
Como queremos linhas e sem quebra, os valores padrão para flex-direction e justificar-conteúdo: centro;
flex-wrap são bons, então as propriedades podem ser omitidas: }
A FIGURA 16-7 mostra a aparência do seu menu de navegação quando você

navegue { terminar.
…
IMPORTANTE: Usaremos esta versão do site da padaria como ponto de partida
exibição: flexível; }
para o EXERCÍCIO 16-6, então salve-a e guarde-a para mais tarde.
Salve o documento e veja-o em um navegador. Você deve

ver que os links estão bem alinhados, o que é uma melhoria, mas temos
mais trabalho a fazer.
2. Agora podemos trabalhar na aparência dos links. Começar por

fazendo com que os elementos a nos itens da lista de navegação sejam
exibidos como elementos de bloco em vez de embutidos. Dê a eles 1px de
bordas arredondadas, preenchimento dentro das bordas (.5em superior e
inferior, 1em esquerda e direita) e .5em margens para dar-lhes espaço e para
FIGURA 16-7. A lista de links agora tem o estilo de uma barra de menu horizontal.
abrir a barra de navegação marrom.

Controlando o alinhamento de itens flexíveis no contêiner

Até agora vimos como ativar o modo flexbox, transformando um elemento em um
contêiner flex e seus filhos em itens flex. Também aprendemos a
alterar a direção na qual os itens fluem e permitir que eles se enrolem em várias
linhas. O conjunto restante de propriedades do contêiner afeta o alinhamento dos
itens ao longo do eixo principal (justify-content) e do eixo cruzado (align-items e
align-content).
Alinhamento no eixo principal

Por padrão, os itens flexíveis têm a largura necessária para conter o conteúdo do
elemento, o que significa que o contêiner pode ter espaço de sobra na linha
flexível. Vimos isso na FIGURA 16-2. Também por padrão, os itens fluem um ao
lado do outro a partir do “início principal” (com base na direção do idioma e na
direção da linha flexível).
A propriedade justify-content define como o espaço extra deve ser distribuído ao

redor ou entre itens inflexíveis ou que atingiram seu máximo
NOTA tamanho (ver Nota).
Você também pode distribuir espaço extra ao longo

justificar-conteúdo
do eixo principal tornando os próprios itens flexíveis
Valores: início flexível | extremidade flexível | centro | espaço entre | espaço ao redor
mais largos para preencher o espaço disponível.
Esse é o trabalho das propriedades flexíveis , que Predefinição: início flexível

veremos em um momento.
Herda: não
Aplique justify-content ao elemento flex container porque ele controla o

espaçamento dentro do próprio container:
#container
{ display: flex;
justificar-conteúdo: flex-start;
}
A FIGURA 16-8 mostra como os itens se alinham usando cada um dos valores de
palavra-chave para justificar-conteúdo. Como seria de esperar, flex-start e flex-
end posicionam a linha de itens em direção ao início e fim do eixo principal,
respectivamente, e centraliza -os.
NOTA espaço-entre e espaço-ao redor justificam um pouco mais de explicação. Quando

justificar-conteúdo é definido como espaço entre, o primeiro item é posicionado
À medida que novas palavras-chave de alinhamento
são adicionadas à especificação Grid Layout, elas
no ponto inicial, o último item vai no ponto final e o espaço restante é distribuído
também estão disponíveis para Flexbox; no entanto, uniformemente entre os itens restantes. A propriedade space-around adiciona
por serem mais recentes, terão menos suporte. uma quantidade igual de espaço no lado esquerdo e direito de cada item, resultando
Certifique-se de verificar as especificações do Flexbox na duplicação do espaço entre os itens vizinhos.
para atualizações.

justificar-conteúdo: flex-start; (predefinição)
NOTA
justificar-conteúdo: flex-end; justificar-conteúdo: centro; A configuração justificar conteúdo é aplicada

após as margens terem sido calculadas nos itens
e após a forma como os itens foram definidos
como “flexíveis” foram contabilizados.
Se o valor flex para itens permitir que eles
justificar-conteúdo: espaço-entre; justificar-conteúdo: espaço ao redor; cresçam para preencher a largura do contêiner,
justify-content não será aplicável.
FIGURA 16-8. Opções para alinhar itens ao longo do eixo principal com justificar-conteúdo.
Quando a direção é definida para uma coluna com um eixo principal vertical, as
palavras-chave funcionam da mesma maneira; no entanto, é necessário que haja uma
altura de contêiner explícita com espaço sobrando para que você veja o efeito. Mudei
o tamanho do texto e defini uma altura no elemento container na FIGURA 16-9 para
demonstrar as mesmas palavras-chave aplicadas a um eixo principal vertical.
justificar-conteúdo: flex-start; (predefinição) justificar-conteúdo: flex-end; justificar-conteúdo: centro;
justificar-conteúdo: espaço-entre; justificar-conteúdo: espaço ao redor;
FIGURA 16-9. Opções para alinhar itens ao longo de um eixo principal vertical (direção flexível
definido como coluna) com conteúdo justificado.

Alinhamento no eixo transversal
Isso cuida de organizar as coisas no eixo principal, mas você também pode querer
brincar com o alinhamento no eixo transversal (para cima e para baixo quando a
direção for linha, esquerda e direita se a direção for coluna). Alinhamento e
alongamento de eixo cruzado é o trabalho da propriedade align-items .
itens de alinhamento
Valores: início flexível | extremidade flexível | centro | linha de base | esticar
Predefinição: esticar
Herda: não
Demonstrei os vários valores de palavra-chave para align-items conforme se aplica a

linhas na FIGURA 16-10. Para ver o efeito, você deve especificar a altura do contêiner;
caso contrário, ele se expande apenas o suficiente para conter o conteúdo sem espaço
extra. Eu dei ao contêiner uma altura para mostrar como os itens são posicionados no
eixo cruzado.
Assim como o justify-content, a propriedade align-items se aplica ao contêiner flex

(isso pode ser um pouco confuso porque “items” está no nome).
#container
{ display: flex;
altura: 200px; align-
items: flex-start; }
Os valores flex-start, flex-end e center devem ser familiares, só que desta

vez eles se referem ao início, fim e centro do eixo transversal. A linha de base
value alinha as linhas de base das primeiras linhas do texto, independentemente de
seu tamanho. Pode ser uma boa opção para alinhar elementos com diferentes
tamanhos de texto, como títulos e parágrafos em vários itens. Por fim, esticar, que é
o padrão, faz com que os itens se estiquem até preencherem o eixo cruzado.
align-items: flex-start; align-items: flex-end; alinhar-itens: centro;
alinhar-itens: esticar; (predefinição) align-items: linha de base;
Os itens são alinhados para que as linhas de base das

primeiras linhas de texto se alinhem.
FIGURA 16-10. Alinhando ao longo do eixo cruzado com align-items.

Quando a direção do contêiner flexível é definida como coluna, align-items alinha os

itens à esquerda e à direita. Olhe para as FIGURAS 16-2 e 16-9 e você verá que quando
definimos os itens em uma coluna e não fornecemos nenhuma informação de
alinhamento, cada item é esticado até a largura total do eixo transversal porque esticar
é o valor padrão.
Se você quiser que um ou mais itens substituam a configuração de eixo cruzado, use a
propriedade align-self nos elementos de item individuais. Esta é a primeira propriedade
que vimos que se aplica a um item, não ao próprio contêiner. alinhar-se
usa os mesmos valores que align-items; ele só funciona em um item de cada vez.
alinhar-se
Valores: início flexível | extremidade flexível | centro | linha de base | esticar
Aplica-se a: itens flexíveis
Herda: não
No código a seguir e na FIGURA 16-11, a quarta caixa é definida para alinhar no final
do eixo cruzado, enquanto as outras têm o comportamento de alongamento padrão.
.box4
{ align-self: flex-end; }
align-self: flex-end;
FIGURA 16-11. Use align-self para fazer com que um item substitua o alinhamento de eixo cruzado de seu contêiner.
Alinhando várias linhas

A opção de alinhamento final, align-content, afeta como várias linhas flexíveis são
align-content aplica-se apenas
espalhadas pelo eixo cruzado. Esta propriedade se aplica somente quando flex-wrap
quando há várias linhas flexíveis
está configurado para wrap ou wrap-reverse e há várias linhas para alinhar. Se os
agrupadas.
itens estiverem em uma única linha, não fará nada.
alinhar-conteúdo
Valores: início flexível | extremidade flexível | centro | espaço ao redor | espaço entre | esticar
Aplica-se a: contêineres flexíveis de várias linhas
Herda: não

Todos os valores que você vê na listagem de propriedades devem parecer familiares e funcionam
da maneira que você esperaria. Desta vez, no entanto, eles se aplicam a como o espaço extra é
distribuído em torno de várias linhas no eixo transversal, conforme mostrado na FIGURA 16-12.
Novamente, a propriedade align-content se aplica ao elemento flex container. Uma altura também
é necessária para o contêiner, porque sem ela o contêiner seria alto o suficiente para acomodar o
conteúdo e não haveria espaço sobrando.
#container
{ display: flex;
flex-wrap: embrulhar;
altura: 350px; align-
items: flex-start; }
caixa {
largura: 25%;
}
align-content: flex-start; align-content: flex-end; alinhar-conteúdo: centro;
align-content: espaço entre; align-content: espaço ao redor; alinhar-conteúdo: esticar; (predefinição)
FIGURA 16-12. A propriedade align-content distribui espaço em torno de várias linhas flexíveis. Não
tem efeito quando os itens flexíveis estão em uma única linha.
Alinhando itens com margens

Já que estamos falando sobre alinhamento, há um bom truque que gostaria de mostrar que será
útil quando você começar a fazer o layout de componentes com o Flexbox.
As barras de menu são onipresentes na web e é comum que um elemento da barra, como um
logotipo ou um campo de pesquisa, seja destacado visualmente dos outros.
Você pode usar uma margem para colocar o espaço extra do contêiner em um lado especificado ou

lados de um item flexível, separando assim um item. Isso deve ficar mais claro com um
exemplo.
O menu da FIGURA 16-13 tem um logotipo e quatro opções de menu. Eu gostaria que o
logotipo ficasse no canto esquerdo, mas as opções ficassem à direita, independentemente
da largura da janela de visualização.
A MARCAÇÃO
<ul>
<li class="logo"><img src="logo.png" alt="LoGoCo"></li> Use margens para adicionar
<li>Sobre</li>
<li>Blog</li>
espaço nas laterais de itens
<li>Loja</li> flexíveis específicos.
<li>Contato</li>
</ul>
OS ESTILOS
ul
{ display: flex;
alinhar-itens: centro; cor
de fundo: #00af8f; estilo de lista:
nenhum; /* remove balas */
preenchimento:
.5em; margem:
0; } li { margem: 0
1em; } li.logo
{ margem direita:
auto; }
FIGURA 16-13. Usando uma margem para ajustar o espaço em torno de itens flexíveis. Neste exemplo, a margem direita do
item do logotipo empurra os itens restantes para a direita.
Transformei a lista não ordenada (ul) em um contêiner flexível, então seus itens de lista (li)
Quando você usa margin: auto em um
agora são itens flexíveis. Por padrão, os itens permaneceriam juntos no início do eixo
item flexível, a propriedade justify-
principal (à esquerda) com espaço extra à direita. Definir a margem direita no item do
content não tem mais um efeito visual
logotipo para auto move o espaço extra para a direita do logotipo, empurrando os itens
porque você atribuiu manualmente um
restantes totalmente para a direita (o “extremo principal”). local para o espaço extra no eixo principal.
Essa técnica se aplica a vários cenários. Se você quiser que apenas o último item apareça
à direita, defina sua margem esquerda como automática. Quer espaço igual ao redor do
item central em uma lista? Defina as margens esquerda e direita como automática. Quer
apertar um botão na parte inferior de uma coluna? Defina a margem superior do último item
para automático. O espaço extra no contêiner vai para a margem e afasta os itens vizinhos.
Nós cobrimos muito território, então é um bom momento para experimentar o Flexbox em
EXERCÍCIO 16-2.

EXERCÍCIO 16-2. Um menu online flexível
Agora é hora de você brincar com as propriedades do Flexbox usando properties, eles estão demonstrando o comportamento padrão do
conteúdo um pouco mais complexo do que links em uma barra de flexbox (FIGURA 16-14):
menus. Neste exercício, você formatará um menu online simples com • Cada item (definido por um elemento de seção ) é a altura total do
vários itens de menu. Como sempre, os materiais estão disponíveis em contêiner #menu , independentemente de seu conteúdo.
learningwebdesign.com/5e/materials.
• As seções têm suas larguras definidas para 240 pixels e essa medida
Abra flex-menu.html em um editor de texto, e você verá que ele tem todo o é preservada por padrão. Dependendo da largura da janela do
conteúdo pronto para uso, bem como uma folha de estilo interna com estilos navegador, você pode ver o conteúdo se estendendo além do
para os aspectos cosméticos do menu (cores, fontes, bordas, espaçamento , contêiner e sendo cortado, conforme mostrado na figura.
etc). Abra o arquivo em um navegador e os itens de menu devem aparecer em
uma coluna porque são elementos de bloco. Eu coloquei uma borda no div
2. Por padrão, os itens flexíveis aparecem na direção da escrita (uma linha,
wrapper #menu para que você possa visualizar seus limites.
da esquerda para a direita, em inglês). Adicione a propriedade flex-
direction à regra #menu existente para experimentar alguns dos outros
1. Primeiro, buscaremos o máximo impacto com o mínimo de esforço, valores (reverso de linha, coluna, reverso de coluna). Os itens são
tornando o div do wrapper #menu um contêiner flexível. Já existe uma regra numerados para tornar sua ordem mais aparente.
para #menu, então adicione esta declaração a ela:
direção flexível: reverso de linha;
#menu
{ borda: sólido de 3px #783F27; 3. Defina a direção flexível de volta para a linha e vamos brincar com o
exibição: flexível; alinhamento do eixo cruzado usando os itens de alinhamento
} propriedade. Comece configurando-o para flex-start (FIGURA 16-15).
Salve e recarregue e veja que todos os itens se alinham no início do eixo
Salve e recarregue a página no navegador, e BAM!… eles estão em
cruzado (o topo, neste caso). Tente alguns dos outros valores
fila agora! E porque não adicionamos nenhum outro flex
FIGURA 16-14. O menu bistro no modo flexbox padrão. Por padrão, os itens permanecem em uma
linha mesmo que não haja espaço suficiente para eles e o conteúdo seja cortado.
FIGURA 16-15. Usando a propriedade align-items para alinhar os itens no início do eixo cruzado (flex-
start).

para align-items (flex-end, center, baseline e stretch) para ter uma 7. Como ajuste final, vamos alinhar os botões de preço na parte inferior de cada
ideia de como cada um se comporta. item de menu, o que é possível se cada item também for um contêiner flexível.
Aqui, estou tornando cada item um contêiner flex aninhado definindo sua exibição
align-items: flex-start;
para flex e especificando a direção como coluna para que continuem a se
4. Quando terminar de experimentar, defina align-items de volta para esticar. empilhar verticalmente. Agora os elementos h2 e p se tornam itens flexíveis dentro
Em vez de ter todos os itens em uma linha e ser cortados pela borda do da seção
navegador, vamos fazer com que eles sejam agrupados em várias linhas recipiente flexível.
usando a propriedade flex-wrap no contêiner #menu :

seção {
…
flex-wrap: embrulhar; exibição: flexível;

direção flexível: coluna;
Salve o arquivo e veja-o no navegador (FIGURA 16-16).
}
Redimensione a janela do navegador e observe as linhas serem reorganizadas.
Quando você recarrega a página no navegador, a aparência é a mesma de
Observe que cada linha flexível é tão alta quanto o item mais alto dessa linha, mas
quando as seções eram compostas de elementos de bloco.
as linhas podem ter alturas diferentes com base no conteúdo do item.
A diferença sutil é que agora as margens vizinhas entre os elementos se
acumulam e não colapsam.
Agora empurre os parágrafos contendo os preços para baixo usando a margem:

truque automático . Adicione esta declaração à regra de estilo existente para
elementos com o nome de classe “preço”.
.preço {
…
margem superior: auto;

}
A FIGURA 16-17 mostra o estado final dos “Itens Bistro to Go”
menu com flexboxes aninhadas. Continuaremos trabalhando nesse arquivo depois

de conhecermos as propriedades específicas do item, portanto, salve-o para mais tarde.
FIGURA 16-16. O menu com embrulho ativado.
5. Se desejar, você pode substituir flex-direction e flex

wrap declarações com uma única declaração flex-flow assim:
flex-flow: quebra de linha;
6. Por padrão, os itens em cada linha flexível são empilhados em

direção ao início do eixo principal (à esquerda). Tente alterar o
alinhamento do eixo principal dos itens com a propriedade justify-
content (novamente, aplicada à regra de contêiner flexível #menu ).
Eu gosto de como eles parecem centralizados no contêiner, mas
confira o efeito dos outros valores (flex-start, flex-end, space-
between, space around) também.
FIGURA 16-17. O menu até agora com itens flexíveis e preços
justificar-conteúdo: centro; alinhados.

Determinando como os itens “flexionam” no contêiner

Uma das grandes maravilhas do modelo flexbox é que os itens são redimensionados, ou
flexíveis para usar o termo formal, para caber no espaço disponível. É essa flexibilidade que
torna o Flexbox uma ferramenta tão poderosa para projetar para a ampla variedade de tamanhos
de tela e janela do navegador que encontramos como web designers. A beleza é que o
navegador descobre os tamanhos na hora, e isso significa menos matemática para nós! Nesta
seção, conheceremos as propriedades do flex.
Anteriormente, você aprendeu sobre a propriedade justify-content , que distribui espaço extra
no contêiner entre e ao redor dos itens ao longo do eixo principal.
O conceito de flex está preocupado com a forma como o espaço é distribuído dentro dos itens,
aumentando ou diminuindo os itens conforme necessário para ajustá-los.
Flex é controlado com a propriedade flex , que especifica quanto um item pode crescer e
diminuir e identifica seu tamanho inicial. A história completa é que flex é uma propriedade
abreviada para flex-grow, flex-shrink e flex-basis, mas a especificação recomenda fortemente
que os autores usem a abreviação flex em vez de propriedades individuais para evitar valores
padrão conflitantes e garantir que autores consideram todos os três aspectos do flex para cada
instância.
flexionar
Valores: nenhum | 'flex-grow flex-shrink flex-base'
As propriedades flex se Predefinição: 0 1 automático
aplicam a itens flexíveis, não itens flexíveis

Aplica-se a:
ao contêiner.
Herda: não
O valor da propriedade flex normalmente é três propriedades flex listadas nesta ordem:
flex: flex-grow flex-shrink flex-base;
Para as propriedades flex-grow e flex-shrink , os valores 1 e 0 funcionam como chaves liga/

desliga, onde 1 “liga” ou permite que um item cresça ou diminua, e 0 o impede. A propriedade
flex-basis define as dimensões iniciais, seja para um tamanho específico ou um tamanho
baseado no conteúdo.
Neste exemplo rápido, um item de lista começa com 200 pixels de largura, pode expandir para
preencher o espaço extra (1), mas não pode encolher (0) mais estreito do que os 200 pixels
originais.
li {
flexível: 1 0 200px;
}
Isso deve lhe dar a idéia geral. Nesta seção, examinaremos mais de perto o crescimento, a
redução e o tamanho base, nessa ordem.
Mas primeiro, é importante notar que flex e suas propriedades de componentes se aplicam a
itens flex, não ao container. Manter o controle de quais propriedades vão no container e quais
vão nos itens é um dos truques de usar o Flexbox. Consulte a barra lateral “Propriedades Flex”
para obter uma lista útil de como as propriedades são divididas.

Expansão de itens (flex-grow)
O primeiro valor na propriedade flex especifica se (e em que proporção) um item pode ser
ampliado – em outras palavras, seu valor flex-grow (veja Nota). Por padrão, é definido como 0,
o que significa que um item não pode crescer mais do que o tamanho de seu conteúdo ou a NOTA
largura especificada. Como os itens não se expandem por padrão, as propriedades de
flex-grow é a propriedade individual que especifica
alinhamento têm a oportunidade de entrar em vigor. Se o espaço extra fosse ocupado dentro
como um item pode se expandir.
dos itens, o alinhamento não funcionaria. Os autores são incentivados a usar a propriedade
flex de mão abreviada .
flex-grow
Valores: número
Predefinição: 0
Herda: não
Se você definir o valor flex-grow para todos os itens em um contêiner como 1, o navegador
usará qualquer espaço extra disponível ao longo do eixo principal e o aplicará igualmente a
cada item, permitindo que todos estiquem a mesma quantidade.
Vamos pegar o exemplo de caixa simples do início do capítulo e ver como ele se comporta com
NUM RELANCE
várias configurações flexíveis aplicadas. A FIGURA 16-18 mostra o que acontece quando flex-
grow é definido como 1 para todos os itens de caixa (flex-shrink e flex-basis são deixados em Propriedades Flexíveis
seus valores padrão). Compare isso com o mesmo exemplo com flex-grow Agora que você foi apresentado a todas as
definido para o padrão 0 (este é o mesmo comportamento que observamos na FIGURA 16-2). propriedades da caixa flexível
Módulo, pode ser útil ver rapidamente quais
A MARCAÇÃO OS ESTILOS propriedades se aplicam a contêineres e
quais são definidas em flex
<div id="container"> .caixa { Itens.
<div class="box box1">1</div> <div …
class="box box2">2</div> <div flexível: 1 1 automático; Propriedades do contêiner

class="box box3">3</div> <div }
Aplique estas propriedades ao contêiner
class="box box4" >4</div>
flex:
</div> exibição
fluxo flexível
direção flexível
flexível: 0 1 automático; (impede a expansão)
envoltório flexível
alinhar-conteúdo
Propriedades do item flexível
flexível: 1 1 automático; (permite expansão) Aplique estas propriedades a itens flexíveis:
alinhar-se
flexionar
flex-grow
flex-shrink
base flexível
FIGURA 16-18. Quando flex-grow é definido como 1, o espaço extra na linha é distribuído nos itens em partes iguais ordem
e eles se expandem para preencher o espaço na mesma taxa.

Se você especificar um número inteiro de crescimento flexível mais alto para um item, ele
atuará como uma proporção que aplica mais espaço nesse item. Por exemplo, dar a “box4” o
valor flex-grow: 3 significa que ele recebe três vezes mais espaço do que os itens restantes
definidos como flex-grow: 1. A FIGURA 16-19 mostra o resultado.
.box4 {
flexível: 3 1 automático;
1 1 1 11 1 3 3 1 1
FIGURA 16-19. Atribuir uma quantidade diferente de flex-grow a um item individual. Aqui “box4” foi definido para
expandir em três vezes a taxa dos outros itens.
Observe que o item resultante não é três vezes maior que os outros; ele só tem três vezes a
quantidade de espaço adicionado a ele.
Se não houver muito espaço sobrando na linha, há uma chance de que cada porção de espaço
seja pequena o suficiente para não somar muita diferença. Você pode precisar apenas brincar
com os valores de flex-grow e ajustar a largura do navegador até obter o efeito desejado.
Agora que você tem esse conceito, o encolhimento deve ser direto porque se baseia no mesmo
princípio.
Esmagando itens (flex-shrink)

O segundo valor da propriedade flex, flex -shrink, entra em ação quando o contêiner não é
largo o suficiente para conter os itens, resultando em um déficit de espaço. Essencialmente, tira
algum espaço de dentro dos itens, encolhendo-os para caber, de acordo com uma proporção
especificada.
flex-shrink
NOTA Valores: número
Predefinição: 1
flex-shrink é a propriedade individual que especifica
como um item pode se contrair. Aplica-se a: itens flexíveis
Os autores são incentivados a usar a propriedade
Herda: não
flex de mão abreviada .
Por padrão, o valor flex-shrink é definido como 1, o que significa que, se você não fizer nada,
os itens serão reduzidos para caber na mesma taxa. Quando flex-shrink é 0, os itens não
podem ser reduzidos e podem ficar fora de seu contêiner e fora da vista da janela de visualização.
Finalmente, como no flex-grow, um número inteiro mais alto funciona como uma proporção. Um
item com um flex-shrink de 2 encolherá duas vezes mais rápido do que se fosse definido como 1. Você

geralmente não precisará especificar um valor de taxa de contração. Apenas ligar o encolhimento
(1) ou desligar (0) deve ser suficiente.
Os itens flexíveis param de encolher quando atingem seu tamanho mínimo (definido por min-
width/min-height). Por padrão (quando min-width/min-height é automático), esse mínimo é
baseado em seu tamanho mínimo de conteúdo . Mas pode ser facilmente definido como zero, Por padrão, os itens podem
ou 12em, ou qualquer outro comprimento que pareça útil. Observe esse efeito quando itens encolher quando o contêiner
profundamente aninhados forçam um item flexível a ser mais largo do que o esperado.
não é suficientemente
Você verá a propriedade flex-shrink em ação na FIGURA 16-20 na próxima seção. largo (flex-shrink: 1).
Fornecendo um tamanho inicial (base flexível)
O terceiro valor flex define o tamanho inicial do item antes que qualquer wrap ping, crescimento
ou redução ocorra (flex-basis). Pode ser usado em vez da propriedade largura (ou propriedade
altura para colunas) para itens flexíveis.
base flexível
Valores: comprimento | porcentagem | conteúdo | auto NOTA
Predefinição: auto flex-basis é a propriedade individual que define o

tamanho inicial do item.
Os autores são incentivados a usar a propriedade
Herda: não flex de mão abreviada .
Neste exemplo, a base flexível das caixas é definida como 100 pixels (FIGURA 16-20). Os itens
podem diminuir para caber no espaço disponível (flex-shrink: 1), mas não podem crescer mais
(flex-grow: 0) do que 100 pixels, deixando espaço extra no contêiner.
caixa {
}
As configurações flexíveis
substituem as larguras/alturas
especificadas para itens flexíveis.
Quando o contêiner for largo, os itens não crescerão mais do que sua
base flexível de 100 pixels porque flex-grow está definido como 0.
Quando o recipiente é estreito, os itens podem encolher para caber (flex-

shrink: 1).
FIGURA 16-20. Usando flex-basis para definir a largura inicial dos itens.

Por padrão, flex-basis é definido como automático, que usa a largura/altura especificada
valores de propriedade para o tamanho do item. Se a propriedade de tamanho principal do item
(largura ou altura) não estiver definida ou for automática (seu padrão), flex-basis usará a largura do conteúdo.
Você também pode definir explicitamente flex-base para ser a largura do conteúdo com a palavra-
chave content ; no entanto, esse valor é mal suportado no momento da redação deste artigo.
Neste exemplo, a base flexível para as caixas é definida como 100 pixels porque o valor automático
usa o valor definido por largura. Os itens podem crescer, ocupando espaço extra no contêiner, mas
não podem encolher.
caixa {
largura: 100px;
}
Quando o navegador faz o dimensionamento de um item flex, ele consulta o flex-basis

valor, compara-o com o espaço disponível ao longo do eixo e, em seguida, adiciona ou remove espaço
dos itens de acordo com suas configurações de aumento e redução. É importante observar que, se
você permitir que um item cresça ou diminua, ele poderá ficar mais estreito ou mais largo do que o
comprimento fornecido pela base flexível ou pela largura.
Valores flexíveis de atalhos úteis
A vantagem de usar a propriedade flex é que existem alguns valores de atalho úteis que cobrem
cenários típicos do Flexbox. Curiosamente, alguns dos valores de atalho substituem os padrões das
propriedades individuais, o que foi confuso para mim no início, mas no final resulta em comportamentos
mais previsíveis. Ao criar um componente flexbox, veja se uma dessas configurações fáceis fará o
truque:
Ao criar um componente flexível: inicial;
flexbox, veja se você pode Isso é o mesmo que flex: 0 1 auto. Impede que o item flexível cresça mesmo quando há espaço
tirar vantagem de um dos extra, mas permite que ele encolha para caber no contêiner. O tamanho é baseado nas
atalhos flex úteis. propriedades de largura/altura especificadas , padronizando para o tamanho do conteúdo. Com
o valor inicial , você pode usar justificar-conteúdo para alinhamento horizontal.
flexível:
automático; Isso é o mesmo que flex: 1 1 auto. Ele permite que os itens sejam totalmente flexíveis,
crescendo ou diminuindo conforme necessário. O tamanho é baseado na largura especificada/
propriedades de altura .
flexível: nenhum;
Isso é equivalente a flex: 0 0 auto. Ele cria um item flexível completamente inflexível enquanto o
dimensiona para as propriedades de largura e altura . Você também pode usar justificar-
conteúdo para alinhamento quando flex estiver definido como nenhum.

flex: inteiro;
Isso é o mesmo que flex: integer 1 0px. O resultado é um item flexível com uma
NOTA
base flexível de 0, o que significa que possui flexibilidade absoluta (veja a barra
lateral “Absolute Versus Relative Flex”) e o espaço livre é alocado de acordo Eu uso o Flexbox para formatar um formulário
com o número flexível aplicado aos itens. responsivo na seção “Formulários de estilo” do
Capítulo 19, Mais técnicas de CSS.
Como você está? Você está aguentando com todas essas coisas do Flexbox? Eu sei que é As propriedades Flex permitem que os campos do
muito para absorver de uma só vez. Temos apenas mais uma propriedade de item Flexbox formulário se adaptem à largura disponível,
para cobrir antes que você tenha outra chance de experimentá-lo você mesmo. enquanto os rótulos são definidos para
permanecerem sempre do mesmo tamanho. A
quebra permite que os campos de formulário se
movam abaixo de seus rótulos em telas menores.

Flexibilidade absoluta versus relativa Você provavelmente tem o Flexbox na cabeça
Na FIGURA 16-19, vimos como o espaço extra é atribuído aos itens com base em suas taxas de agora, então pode valer a pena dar uma olhada no futuro.
flexibilidade. Isso é chamado de flex relativo, e é como o espaço extra é tratado sempre que o flex-
basis é definido para qualquer tamanho diferente de zero (0), como uma largura/altura específica
valor ou automático.
No entanto, se você reduzir o valor de flex-basis para 0, algo interessante acontece.

Com base 0, os itens são dimensionados proporcionalmente de acordo com as taxas de flex, o que
é conhecido como flex absoluto. Assim, com flex-basis: 0, um item com um valor de flex-grow de 2
seria duas vezes maior que os itens definidos como 1. Novamente, isso entra em ação apenas
quando o flex-basis é 0.
Na prática, é recomendável incluir sempre uma unidade após o 0, como 0px

ou o 0% preferido .
Neste exemplo de flex absoluto, a primeira caixa recebe um valor de flex-grow de 2, e a quarta
caixa tem um valor de flex-grow de 3 por meio do atalho mencionado anteriormente flex:
integer. Na FIGURA 16-21, você pode ver que o tamanho geral resultante das caixas é proporcional
aos valores de flex-grow porque o flex-basis está definido como 0.
.box { /
* aplicado a todas as caixas */
flexível: 1 0 0%; }
.caixa1 {
flexível: 2; /* valor do atalho para flex: 2 1 0px */
}
.box4 {
flexível: 3; /* valor do atalho para flex: 3 1 0px */
}
flex-crescimento: 2; flex-crescimento: 1; flex-crescimento: 3; flex-crescimento: 1;
2x 1x 1x 3x 1x
(120px) (60px) (60px) (180px) (60px)
FIGURA 16-21. No flex absoluto, as caixas são dimensionadas de acordo com as relações de valor do flex.

Alterando a Ordem dos Itens Flexíveis

Um dos recursos matadores do Flexbox é a capacidade de exibir itens em uma ordem diferente
da ordem na fonte (consulte a barra lateral “Quando reordenar (e quando não)” ). Isso significa
Quando
que você pode alterar a ordem do layout dos elementos usando apenas CSS. Esta é uma
reordenar (e quando não) ferramenta poderosa para design responsivo, permitindo que o conteúdo posterior em um
Lembre-se de que, embora documento seja movido para telas menores.
conveniente, reordenar é apenas um
truque de exibição visual e deve ser Para alterar a ordem dos itens, aplique a propriedade order aos itens específicos que deseja
usado com discrição. mover.
Alguns pontos a serem lembrados:
• Embora os elementos sejam exibidos em um ordem

ordem diferente para navegadores Valores: inteiro
visuais, dispositivos alternativos como tela
os leitores ainda leem o conteúdo em Predefinição: 0
a ordem em que aparece na fonte
Aplica-se a: itens flexíveis e filhos absolutamente posicionados de contêineres flexíveis
(embora não seja 100% confiável no
mundo real). Herda: não
• Reordene a fonte se houver um

O valor da propriedade order é um número positivo ou negativo que afeta o posicionamento do
razão lógica (em vez de visual) para a
item ao longo da linha flexível. É semelhante à propriedade z-index , pois o valor numérico
reordenação.
específico não importa, apenas como ele se relaciona com outros valores.
• Não use ordem porque é mais
conveniente.
• Use ordem se a ordem lógica e visual Por padrão, todos os itens têm um valor de pedido igual a zero (0). Quando os itens têm o mesmo
pretender ser desarticulada. valor de pedido , eles são dispostos na ordem em que aparecem na fonte HTML. Se eles tiverem
valores de pedido diferentes , eles serão organizados do valor de pedido mais baixo para o mais
alto.
Voltando ao nosso exemplo de caixa numerada colorida, dei um pedido ao box3

valor de 1. Com um valor de ordem maior, ele aparece após todos os itens definidos como 0 (o
padrão), conforme mostrado na FIGURA 16-22.
.box3 {
ordem: 1;
}
ordem: 0 ordem: 0 ordem: 0 ordem: 0 ordem: 1

(predefinição) (predefinição) (predefinição) (predefinição)
FIGURA 16-22. Alterando a ordem dos itens com a propriedade order . Configurando box3 para pedir:
1 faz com que seja exibido após o resto.
Quando vários itens compartilham o mesmo valor de pedido , esse grupo de itens de
compartilhamento de valor (chamado de grupo ordinal) fica unido e é exibido na ordem de origem.
O que acontece se eu der à box2 um valor de pedido de 1 também? Agora, tanto a caixa2
quanto a caixa3 têm um valor de ordem de 1 (tornando-os um grupo ordinal) e obtêm

exibido na ordem de origem após todos os itens com o valor de ordem inferior de 0
(FIGURA 16-23).
.caixa2, .caixa3 {
ordem: 1
}
ordem: 0 ordem: 0 ordem: 0 ordem: 1 ordem: 1
grupo ordinal grupo ordinal
FIGURA 16-23. Definir box2 para order: 1 também faz com que seja exibido após os
itens com a ordem padrão de 0.
Você também pode usar valores negativos para ordem. Para continuar com nosso
exemplo, dei à box5 um valor de pedido de –1. Observe na FIGURA 16-24 que ele não
retrocede apenas um espaço; ele se move antes de todos os itens que ainda têm a
ordem definida como 0, que é um valor maior que –1.
.box5 {
ordem: -1
}
ordem: -1 ordem: 0 ordem: 0 ordem: 1 ordem: 1
grupo ordinal grupo ordinal grupo ordinal
FIGURA 16-24. Os valores negativos são exibidos antes dos itens com a ordem padrão de 0.
Usei valores simples de 1 e –1 em meus exemplos, mas poderia ter usado 10008 ou –
649, e o resultado seria o mesmo; a ordem vai do menor valor ao maior valor. Os valores
numéricos não precisam estar em ordem sequencial.
Agora vamos dar uma olhada em como podemos usar a ordem para algo mais útil do
que mover pequenas caixas em uma linha. Aqui está um documento simples com um
cabeçalho, uma seção principal composta por um artigo e dois elementos laterais e um
rodapé:
<header>…</header>
<principal>
<article><h2>Onde está</h2></article>
<aside id="news"><h2>Notícias></h2></aside>
<aside id="contact"><h2>Contato</h2><aside>
</main>
<rodapé>…<rodapé>

No CSS a seguir, transformei o elemento principal em um contêiner flexbox para que o

artigo e os elementos laterais se alinhem em uma linha, criando três colunas (FIGURA
16-25). Eu defino o fator flexível para cada item, permitindo que eles cresçam e diminuam,
e defino suas larguras com base flexível. Por fim, usei a propriedade order para
especificar a ordem em que gostaria que eles aparecessem. Observe que a seção Contato
agora é a primeira na linha, embora apareça por último na ordem de origem.
NOTA
E, como um bônus adicional, todas as colunas preenchem a altura do contêiner principal,
Embora você possa criar um layout de página apesar da quantidade de conteúdo nelas.
inteira com o Flexbox, a tarefa é tratada de main
forma mais adequada com o Layout de Grade, { display: flex; }
que abordaremos a seguir. No entanto, como artigo { flex: 1 1
o Flexbox tem melhor suporte ao navegador
50%; ordem: 2;
do que o Grid Layout, pode ser um substituto
adequado. O Flexbox é mais adequado para
componentes individuais na página, como } #news

navegação, série de “cartões” de produtos ou { flex: 1 1 25%;
qualquer coisa que você queira colocar em uma linha.
ordem: 3;
} #contato
{ flex: 1 1 25%;
ordem: 1; }
FIGURA 16-25. Um layout em colunas usando Flexbox.
Isso conclui nosso tour pelas propriedades do Flexbox! No EXERCÍCIO 16-3, você pode
colocar algumas das propriedades de nível de item para usar no menu bistro. Quando
terminar, volte para obter algumas dicas sobre como lidar com diferentes suportes a
navegadores na próxima seção.
Suporte do navegador para Flexbox
O atual Módulo de Layout de Caixa Flexível tornou-se uma Recomendação de Candidato

estável em 2012 (www.w3.org/TR/css-flexbox-1/). A boa notícia é que todos os principais
navegadores para desktop e dispositivos móveis suportam o padrão

EXERCÍCIO 16-3. Ajustando flex e ordem
O menu online parece muito bom, mas vamos dar alguns toques finais nele. O Capítulo 7, Adicionando Imagens, pode ser útil aqui. Não é a página da
Abra o arquivo flex-menu.html como você o deixou no final do EXERCÍCIO 16-2. web mais bonita do mundo, mas você teve a chance de experimentar muitas
das propriedades do Flexbox ao longo do caminho.
1. Em vez de ter muito espaço vazio dentro do contêiner do menu, faremos com
que os itens preencham o espaço disponível. Como queremos que os itens
sejam totalmente flexíveis, podemos usar o valor auto para flex
(o mesmo que flex: 1 1 auto;). Adicione esta declaração à regra de
seção para ativar o comportamento de alongamento:
seção {
…
flexível: automático; }
2. OK, um último ajuste: vamos fazer as fotos aparecerem no topo de cada

item do menu. Como cada seção é um contêiner flexível, podemos usar
a propriedade order para mover seus itens. Neste caso, selecione os
parágrafos com o nome da classe “foto” e dê um valor menor que o
padrão 0. Isso fará com que a foto apareça primeiro na linha (FIGURA
16-26):
.foto
{ ordem: -1;
}
Se você quiser ser sofisticado, você pode definir a largura dos elementos img
para 100% para que eles sempre preencham a largura do contêiner. A pequena
imagem que forneci fica bastante desfocada quando se expande, para que FIGURA 16-26. O menu final do bistrô com itens flexionados para
você possa ver como as técnicas de imagem responsiva que abordamos preencher o espaço extra e as fotos movidas para o topo de cada listagem.
desde 2015 e alguns desde 2013. Isso abrange cerca de 80-90% dos usuários
até o momento, de acordo com CanIUse.com.
A especificação Flexbox passou por muitas grandes mudanças em seu caminho para a
estabilização e, ao longo do caminho, alguns navegadores mais antigos implementaram essas
especificações antigas. As três principais versões são as seguintes:
Versão atual (2012)

Exemplo de sintaxe: display: flex;
Compatível com: IE11+, Edge 12+, Chrome 21-28 (-webkit-), Chrome 29+,
Firefox 22–27 (-moz-, sem encapsulamento), Firefox 28+, Safari 6–8 (-
webkit-), Safari 9+, Opera 17+, Android 4.4+, iOS 7–8.4 (-webkit-), iOS 9.2+
Versão “Tweener” (2011)

Exemplo de sintaxe: display: flexbox;
Suportado por: IE10

Versão antiga (2009)
Exemplo de sintaxe: display: box;
Compatível com: Chrome <21, Safari 3.1–6, Firefox 2–21, iOS 3.2–6.1, Android 2.1–4.3
O que você não encontrará nessas listas é o Internet Explorer 9 e versões anteriores, que não
possuem suporte ao Flexbox.
Garantir que o Flexbox funcione no número máximo de navegadores requer uma pilha enorme
de prefixos e propriedades alternativas, cujos detalhes são muito complicados para se aprofundar
aqui. Também não é algo que você gostaria de escrever à mão de qualquer maneira, mas
felizmente existem opções.
AVISO Você pode usar o Autoprefixer para gerar magicamente essa pilha retorcida para você
automaticamente. Conforme você aprende e pratica suas habilidades de CSS, você pode
Esteja ciente de que, embora o Autoprefixer
converter seus estilos online em autoprefixer.github.io. Basta colar seus estilos e ele exibe o
facilite a adição de prefixos, ele não garante
código (FIGURA 16-27) que você pode adicionar à sua folha de estilos.
que seus flexboxes funcionem perfeitamente
em todos os navegadores. Existem diferenças
de comportamento que podem ser imprevisíveis,
portanto, certifique-se de testar em todos os
navegadores de destino.
FIGURA 16-27. O site Autoprefixer converte estilos Flexbox padrão em todos os estilos
necessários para suporte total ao navegador.
Quando você estiver pronto para levar seu fluxo de trabalho a um nível profissional, poderá incluir
o Autoprefixer como parte de uma “etapa de construção” que automatiza muito do trabalho
pesado de desenvolvimento. Se você estiver usando um pré-processador de CSS como o SASS,
também poderá usar “mixins” para gerenciar prefixos tediosos. Veremos ferramentas de
construção e pré-processadores no Capítulo 20, Ferramentas modernas de desenvolvimento da Web.
Você ainda pode querer fornecer estilos de fallback para navegadores não compatíveis (floats,
blocos inline e valores de exibição de tabela são todas opções). Se for esse o caso, você pode
usar uma técnica de detecção de recursos para determinar se o navegador oferece suporte ao
Flexbox. Se o navegador falhar no teste, ele recebe um conjunto de fallback de

Layout de grade CSS
RECURSO ONLINE
Flexbugs
Existem algumas implementações com bugs do Flexbox por aí. Para nossa sorte,
Philip Walton tem reunido todos esses bugs em um repositório GitHub chamado Flexbugs.
Para ver os bugs e soluções alternativas para eles, visite github.com/philipwalton/flexbugs.
estilos, enquanto os navegadores de suporte obtêm o tratamento completo do Flexbox.

Veremos a detecção de recursos no Capítulo 19.
Uma grande técnica de layout para baixo, uma grande técnica de layout para ir! Você ainda
está comigo? Cobrimos muitos detalhes minuciosos e, se você for como eu, sua cabeça
pode estar girando. É por isso que incluí a FIGURA 16-28. Não tem nada a ver com layout
CSS, mas achei que poderíamos usar um respiro. Na verdade, por que você não larga este
livro e dá uma voltinha antes de pegar as grades?
FIGURA 16-28. Este adorável panda vermelho não tem nada a ver com layout CSS, mas
achei que poderíamos usar um respiro antes de passar para o Grid Layout (foto de Teri Finn).
LAYOUT DE GRADE CSS
Finalmente, nós, web designers e desenvolvedores, temos um módulo CSS para usar uma
grade subjacente para obter um layout de página verdadeiro - e só tivemos que esperar 25
anos para obtê-lo! O CSS Grid Layout Module fornece um sistema para disposição de
elementos em linhas e colunas (lembre-se de que o Flexbox organiza elementos em apenas
um eixo) de uma forma que pode permanecer completamente flexível para caber em uma
variedade de tamanhos de tela ou imitar um layout de página de impressão. Você pode
usar grades para criar o tipo de layout de página da Web que é familiar hoje ou ficar mais sofisticado

Layout de grade CSS
Recriação de pôster de jazz Recriação de Die Neue Experiência de sobreposição

impresso usando grade Convite para palestra de tipografia com fotos de Dorthea Lange
(1927) usando grade
FIGURA 16-29. Exemplos de designs baseados em grade da página “Experimental Layout Lab”
de Jen Simmons (labs.jensimmons.com).
com tipografia e espaços em branco como Jen Simmons fez em suas demonstrações de laboratório
(FIGURA 16-29). Você também pode usar uma grade para formatar apenas uma parte de uma
NOTA página, como uma galeria de imagens ou produtos.
CSS: The Definitive Guide, 4ª edição
Nesta seção, darei a você uma boa vantagem inicial sobre o uso do Grid Layout; no entanto,
(O'Reilly), de Eric A. Meyer e Estelle Weyl, é
devo observar que haverá algumas pedras sobre pedra que você pode explorar por conta própria.
um megavolume de tudo o que você poderia
querer saber sobre CSS. Ele contém todo o
Layout de Grade em CSS O Grid Layout Module é uma das especificações mais complexas em CSS, cujos pontos mais
livro como um capítulo. delicados poderiam encher um livro. Na verdade, Eric Meyer escreveu esse livro: Grid Layout in
CSS (O'Reilly) (veja Nota). Descobri que Eric me ajudou a entender na prática a linguagem densa
da própria especificação (que você também desejará consultar em www.w3.org/TR/css-grid-1/).
Eu também recomendo o livro da especialista em grade Rachel Andrew, The New CSS Layout (A
Book Apart) para uma visão completa de como chegamos aos layouts de grade e como usá-los.
Internet Explorer versões 10 e 11 e

Você também encontrará muitos recursos excelentes da Grade on-line, que vou reunir no final
O MS Edge até o 15 implementou um
desta seção.
rascunho inicial do Grid Layout Module,
muito do qual já foi feito
obsoleto. Eles devem ser tratados como
A conversa obrigatória sobre o suporte ao navegador
navegadores sem suporte quando se trata
dos estilos de grade padrão descritos neste Há ótimas e não tão boas notícias sobre o suporte do navegador para Grid Layout.
capítulo. No entanto, se esses navegadores A boa notícia é que Chrome 57+, Opera, Firefox 52+, Safari 10+ e iOS Safari 10+ começaram a
da Microsoft são usados por uma parcela oferecer suporte ao padrão Grid livre e sem prefixos de navegador em março de 2017. O Microsoft
significativa de seu público-alvo, provavelmente
Edge adicionou suporte na versão 16 em 2017.
vale a pena segmentá-los com uma versão
alternativa do seu layout escrito na sintaxe A notícia não tão boa é que, além das versões mais antigas desses navegadores, nenhuma versão
de grade mais antiga que eles entendem. do Internet Explorer oferece suporte ao padrão Grid atual (consulte a Nota de suporte do
navegador).

Layout de grade CSS
Portanto, por enquanto, você precisa fornecer um layout alternativo para navegadores não
compatíveis usando Flexbox ou floats antiquados (ou a especificação Grid mais antiga para IE e
Edge <15), dependendo dos navegadores que você precisa segmentar. Uma boa maneira de obter
seus layouts baseados em grade para os navegadores que podem lidar com eles é usar uma
consulta de recurso CSS que verifica o suporte a grade e fornece o conjunto apropriado de estilos.
As consultas de recursos são discutidas em detalhes no Capítulo 19.
Certifique-se de verificar CanIUse.com para obter informações atualizadas de suporte ao navegador.

Outro bom recurso é a página de suporte do navegador no site “Grid by Example”, criado por Rachel
Andrew (gridbyexample.com/browsers), onde ela publica notícias de suporte ao navegador, bem
como bugs conhecidos.
Como o layout de grade funciona
O processo para usar o CSS Grid Layout Module é fundamentalmente simples:
1. Use a propriedade display para transformar um elemento em um contêiner de grade. o

os filhos do elemento tornam-se automaticamente itens de grade.
2. Configure as colunas e linhas para a grade. Você pode configurá-los explicitamente e/ou
fornecer instruções sobre como as linhas e colunas devem ser criadas em tempo real.
3. Atribua cada item da grade a uma área na grade. Se você não atribuí-los explicitamente, eles
fluem para as células sequencialmente.
O que torna o Grid Layout complicado é que a especificação fornece tantas opções para especificar
cada pequena coisa. Todas essas opções são ótimas para personalizar o trabalho de produção, mas
podem parecer complicadas quando você está aprendendo Grids pela primeira vez. Neste capítulo,
configurarei uma caixa de ferramentas de Grade sólida para começar, que você pode expandir por
conta própria, conforme necessário.
Terminologia de grade
Antes de mergulharmos em propriedades específicas, você precisará estar familiarizado com as

partes básicas e o vocabulário do sistema Grid.
Começando com a marcação, o elemento que tem a propriedade display: grid aplicada a ele se
torna o container grid e define o contexto para grid para matting. Todos os seus elementos filhos
diretos se tornam automaticamente itens de grade que acabam posicionados na grade. Se você
acabou de ler a seção Flexbox deste capítulo, este esquema de crianças se tornam itens deve soar
familiar.
As palavras-chave nesse parágrafo anterior são “filho direto”, pois apenas esses elementos se
tornam itens de grade. Os elementos contidos nesses elementos não, portanto, você não pode
colocá-los na grade. Você pode, no entanto, aninhar uma grade dentro de outra grade se precisar
aplicar uma grade em um nível mais profundo.

Layout de grade CSS
A grade em si tem vários componentes, conforme indicado na FIGURA 16-30.
célula
área
linhas de grade célula de grade e área de grade
eixo em linha
trilha de grade (coluna) trilha de grade (linha)
FIGURA 16-30. As partes de uma grade CSS.
Linha de grade
As linhas divisórias horizontais e verticais da grade são chamadas de linhas de grade.
Célula de grade
A menor unidade de uma grade é uma célula de grade, que é delimitada por quatro linhas de grade adjacentes sem
linhas de grade passando por ela.
Área de grade
Uma área de grade é uma área retangular composta de uma ou mais células de grade adjacentes.
Trilha de grade
O espaço entre duas linhas de grade adjacentes é uma trilha de grade, que é um nome genérico para uma coluna de
grade ou uma linha de grade. Diz-se que as colunas da grade vão ao longo do eixo do bloco, que é vertical (à medida
que os elementos do bloco são empilhados) para idiomas escritos horizontalmente. As linhas da grade seguem o eixo
embutido (horizontal) .
Vale ressaltar que a estrutura estabelecida para o grid é independente do número de itens do grid no container. Você pode
colocar 4 itens de grade em uma grade com 12 células, deixando 8 das células como “espaço em branco”. Essa é a beleza
das grades. Você também pode configurar uma grade com menos células do que itens de grade,

Layout de grade CSS
e o navegador adiciona células à grade para acomodá-las. É um sistema totalmente flexível maravilhoso.
Sem mais delongas, é hora de entrar em algum código.
Declarando exibição de grade
Para transformar um elemento em um contêiner de grade, defina sua propriedade de exibição como grade
ou grade em linha (consulte Nota). NOTA
Neste exemplo simples, a div #layout se torna um contêiner de grade e cada um As grades em linha funcionam da mesma forma que
as grades de nível de bloco, mas podem ser usadas

de seus filhos (#um, #dois, # três, #quatro e #cinco ), portanto, é um item de grade.
no fluxo de conteúdo. Nesta seção, concentro-me
A MARCAÇÃO
apenas em grades em nível de bloco.
<div id="layout">
No momento da redação deste artigo, o trabalho
<div id="one">Um</div>
<div id="two">Dois</div> começou em um rascunho de trabalho do módulo de
<div id="three">Três</div> layout de grade CSS nível 2, que inclui um modo de

<div id="four">Quatro</div> “subgrade” que permite que uma grade aninhada
<div id="five">Cinco</div> herde sua estrutura de grade de seu pai.
</div>
OS ESTILOS
#layout {
exibição: grade;
}
Isso define o cenário (ou para usar o termo mais preciso, o contexto) para a grade. Agora podemos
especificar quantas linhas e colunas queremos e qual a largura que elas devem ter.
Configurando a grade Como não
quero ter que descobrir células e extensões na minha cabeça, fiz um esboço rápido de como gostaria que
minha grade final ficasse (FIGURA 16-31). Um esboço é um bom primeiro passo para trabalhar com grades.
A partir do esboço, posso ver que meu layout requer três faixas de linha e três faixas de coluna, embora
algumas das áreas de conteúdo se estendam por mais de uma célula. Este é um arranjo bastante padrão
para uma página da web e, embora eu esteja me apegando ao conteúdo de uma palavra para que possamos
nos concentrar na estrutura, você pode imaginar um conteúdo de texto mais longo preenchendo cada área.
NOTA
Você provavelmente notou que este layout de página com seu cabeçalho, rodapé e três colunas se parece com o que
fizemos usando o Flexbox na FIGURA 16-25. E você está certo! Isso só mostra que pode haver várias soluções para
chegar a um resultado pretendido. Uma vez que o Grid Layout se torne solidamente suportado, será o vencedor claro
para a criação de layouts de página inteira flexíveis como este.

Layout de grade CSS
FIGURA 16-31. Um esboço para meu layout de página baseado em grade. As linhas
pontilhadas na imagem inferior mostram quantas linhas e colunas a grade requer para criar o layout
estrutura.
Definindo faixas de grade
Para configurar uma grade em CSS, especifique a altura de cada linha e a largura de cada coluna
NOTA (veja a Nota) com as propriedades do template, grid-template-rows e grid-template-columns,
que são aplicadas ao elemento container.
Assim como o Módulo Flexbox, o Módulo de Layout de
Grade depende da direção do idioma em que a página

grid-template-rows
é escrita. Neste livro, vou basear a terminologia da
grid-template-colunas
grade na direção da escrita da esquerda para a direita,
de cima para baixo. Valores: nenhum | lista de tamanhos de trilha e nomes de linha opcionais
Aplica-se a: contêineres de grade
Herda: não
O valor da propriedade grid-template-rows é uma lista das alturas para cada faixa de linha na
grade. O valor de grid-template-columns é uma lista das larguras para cada trilha de coluna. O
número de tamanhos de trilha determina o número de linhas ou colunas. Por exemplo, se você
fornecer quatro comprimentos para colunas de modelo de grade, obterá uma grade que é
inicialmente dividida em quatro colunas.
Você também pode incluir nomes para as linhas de grade entre as faixas, que chegaremos em
um momento, mas por enquanto, vamos começar da maneira mais simples possível.

Layout de grade CSS
Tamanhos de trilha de grade
No exemplo a seguir, adicionei propriedades de modelo para dividir o #layout

recipiente em três colunas e três linhas com os tamanhos que designei no meu esboço original
(FIGURA 16-31): #layout {
exibição: grade;
grid-template-rows: 100px 400px 100px;
grid-template-columns: 200px 500px 200px;
}
Vamos ver o que acontece se eu fizer uma verificação rápida da grade até agora no navegador.
A FIGURA 16-32 mostra que, por padrão, os itens da grade fluem em ordem para as células da
grade disponíveis. Adicionei cores de fundo aos itens para que seus limites fiquem claros e usei o
Firefox CSS Grid Inspector (à direita) para revelar toda a estrutura da grade.
Como há apenas cinco elementos filhos na div #layout, apenas as primeiras cinco células são
preenchidas. Esse comportamento de fluxo automático não é o que procuro para essa grade, mas
é útil para instâncias em que não há problema em que o conteúdo seja colocado em uma grade
sequencialmente, como uma galeria de imagens. Em breve, colocaremos cada um de nossos itens
nessa grade deliberadamente, mas primeiro, vamos examinar os valores das propriedades do
modelo com mais profundidade.
Visualização do navegador Estrutura de grade revelada com o Firefox Grid Inspector
100px
400px
100px
200px 500px 200px
FIGURA 16-32. Por padrão, os itens da grade fluem para as células da grade por linhas.
Números e nomes das linhas de grade
Quando o navegador cria uma grade, ele também atribui automaticamente a cada linha de grade
um número que você pode referenciar ao posicionar itens. A linha de grade no início da trilha de
grade é 1 e as linhas são numeradas sequencialmente a partir daí.
A FIGURA 16-33 mostra como as linhas de grade são numeradas para nossa grade de amostra.

Layout de grade CSS
1 -4
1 2 3 4
2 -3
DICA DA FERRAMENTA LEGAL
Inspetor de grade CSS do

Firefox e painel de layout
O Firefox 52+ inclui uma ótima ferramenta de
desenvolvedor chamada CSS Grid Inspector que
sobrepõe uma representação da estrutura de grade
para elementos com sua exibição definida como
grade. É o que usei para a captura de tela correta na 3 -2

FIGURA 16-32. Para acessá-lo, abra o Inspetor
(Ferramentas ÿ Desenvolvedor Web ÿ Inspetor). 4 -1

Encontre um elemento que seja uma grade e clique -4 -3 -2 -1
no ícone #, e você verá a grade sobreposta na página.
FIGURA 16-33. As linhas de grade são números atribuídos automaticamente.
Você também pode clicar na guia Layout para
acessar o Painel Layout, que lista todos os As linhas também são numeradas a partir do final das faixas, começando com –1, e os
contêineres de grade na página e fornece números são contados a partir daí (–2, –3, etc.), conforme mostrado pelos números
ferramentas para analisar linhas e áreas de grade.
cinza na FIGURA 16-33. Ser capaz de direcionar o final de uma linha ou coluna sem
Também tem uma caixa
contar linhas (ou mesmo saber quantas linhas ou colunas existem) é um recurso útil.
componente de propriedades do modelo para
que você possa ver facilmente as dimensões, Você vai amar isso -1.
preenchimento, borda e margens para cada
Mas se você não gosta de acompanhar os números, também pode atribuir nomes às
elemento relacionado à grade e muito mais.
Essas ferramentas visuais facilitam a linhas que podem ser mais intuitivos. No exemplo a seguir, atribuí nomes que
ajustar seus projetos. correspondem a como usarei a grade na página final. Os nomes das linhas são
À medida que este livro vai para a
adicionados entre colchetes na posição em que aparecem em relação às faixas.
impressão, a notícia é que ferramentas de
desenvolvimento de layout de grade semelhantes

#layout {
estão chegando ao Chrome e ao Safari. O futuro
exibição: grade;
parece brilhante para os designers de grade! grid-template-rows: [header-start] 100px [content-start] 400px
[início do rodapé] 100px;
grid-template-columns: [anúncios] 200px [principal] 500px [links] 200px;
}
Com base neste exemplo, a linha de grade na parte superior da grade agora pode ser
chamada de “header-start”, “1” ou “–4”. Eu também poderia nomear a linha que vem
após a faixa da primeira linha como “header-end”, embora já a tenha chamado de “início
do conteúdo”. Para dar mais de um nome a uma linha, basta incluir todos os nomes
entre colchetes, separados por espaços:
grid-template-rows: [header-start] 100px [header-end content-start]
400px [início do rodapé] 100px;
É comum que cada linha de grade acabe com vários nomes e números, e você pode
escolher o que for mais fácil de usar. Nós estaremos usando esses números e nomes
para colocar itens na grade em um momento.

Layout de grade CSS
Especificando valores de tamanho de faixa
Forneci todos os tamanhos de trilha no meu exemplo em comprimentos de pixel

específicos para facilitar a visualização, mas os tamanhos fixos são uma das muitas NUM RELANCE
opções. Eles também não oferecem o tipo de flexibilidade necessário em nosso mundo
Valores do tamanho da trilha
de vários dispositivos. O Grid Layout Module oferece várias maneiras de especificar
tamanhos de trilhas, incluindo esperas antigas como comprimentos (por exemplo, pixels A especificação Grid fornece os
ou ems) e valores percentuais, mas também alguns valores mais recentes e específicos seguintes valores para as
propriedades grid-template-* :
da grade. Vou dar-lhe introduções rápidas a alguns valores úteis específicos de Grid: a unidade fr , o minmax()
function, auto e os valores baseados em conteúdo min-content/max-content. Também • Comprimentos (como px ou em)
veremos funções que permitem configurar um padrão de repetição de larguras de trilha: • Valores percentuais (%)
a função repeat() com valores opcionais de preenchimento automático e ajuste automático . • Unidades fracionárias (fr)
• automático
Unidades fracionárias (fator flexível)

• conteúdo mínimo, conteúdo máximo
A unidade fracionária específica da grade (fr) permite que os desenvolvedores criem • minmax()
larguras de trilha que se expandem e contraem dependendo do espaço disponível. Para • fit-conteúdo()
voltar ao exemplo, se eu alterar a coluna do meio de 500px para 1fr, o navegador atribui
todo o espaço restante (após as faixas de coluna de 200 pixels serem acomodadas) a
essa faixa de coluna (FIGURA 16-34).
#layout {
exibição: grade;
grid-template-rows: 100px 400px 100px;
grid-template-columns: 200px 1fr 200px;
}
200px 1fr 200px
200px 1fr 200px
FIGURA 16-34. Quando a coluna do meio tem um tamanho de faixa de 1fr, ela ocupa o espaço
restante na janela do navegador e flexiona para se adaptar à largura do navegador.

Layout de grade CSS
A unidade fr é ótima para combinar larguras de trilha fixas e flexíveis, mas eu também
poderia usar todas as unidades fr para fornecer larguras proporcionais a todas as
NOTA
colunas. Neste exemplo, todas as larguras das colunas são flexíveis de acordo com a
Tecnicamente, o navegador adiciona o fr largura do navegador disponível, mas a coluna do meio sempre terá o dobro da largura
unidades (4 em nosso exemplo), divide o espaço das colunas laterais (consulte Nota).
restante em muitas partes e, em seguida, atribui as
colunas de modelo de grade: 1fr 2fr 1fr;
partes com base no número de unidades
especificadas.
Faixa de tamanho mínimo e máximo
Você pode restringir o intervalo de tamanho de uma faixa definindo suas larguras mínima
e máxima usando a função minmax() no lugar de um tamanho de faixa específico.
grid-template-columns: 200px minmax(15em, 45em) 200px;
AVISO Esta regra define a coluna do meio com uma largura de pelo menos 15em, mas nunca
unidades fr não são permitidas como o valor maior que 45em. Este método permite flexibilidade, mas permite que o autor estabeleça
mínimo em uma instrução minmax() . limites.
Dimensionamento baseado em conteúdo
Os valores min-content, max-content e auto dimensionam a faixa com base no tamanho

do conteúdo dentro dela (FIGURA 16-35).
Conteúdo de texto na célula Largura da coluna definida como
conteúdo mínimo
Procure o bem nos
outros e eles verão o
bem em você. Procure o bem em
outros
e eles
Largura da coluna definida como
conteúdo máximo
vão
ver
o
Procure o bem nos outros e eles verão o bem em você.
bem
em
vocês.
FIGURA 16-35. Os valores de dimensionamento da faixa de conteúdo mínimo e conteúdo máximo .
O valor de conteúdo mínimo é o menor que a faixa pode obter sem estourar (por padrão,
a menos que substituído por uma largura mínima explícita). É equivalente ao “maior
pedaço inquebrável de conteúdo” – em outras palavras, a largura da palavra mais longa
ou da imagem mais larga. Pode não ser útil para itens que contêm parágrafos normais,
mas pode ser útil em alguns casos quando você não deseja que a faixa seja maior do
que o necessário. Este exemplo estabelece três colunas, com a coluna direita
dimensionada apenas o suficiente para conter a palavra ou imagem mais longa:
grid-template-columns: 50px 1fr conteúdo mínimo;
A propriedade max-content aloca a quantidade máxima de espaço necessária para o

conteúdo, mesmo que isso signifique estender a faixa além dos limites do contêiner da
grade. Quando usado como largura de coluna, a trilha da coluna será

Layout de grade CSS
tão largo quanto o conteúdo mais largo nessa faixa sem quebra de linha. Isso significa que se
você tiver um parágrafo, a faixa será larga o suficiente para conter o texto definido em uma linha.
Isso torna o conteúdo máximo mais apropriado para frases curtas ou itens de navegação
quando você não deseja que o texto seja agrupado (automático pode funcionar melhor porque
permite agrupar se não houver espaço suficiente).
Usar a palavra-chave auto para um tamanho de faixa é basicamente como entregar as chaves
ao navegador. Em geral, faz com que a faixa seja dimensionada o suficiente para acomodar seu
conteúdo, enquanto leva em consideração quais outras restrições estão em vigor.
Na função minmax() , a palavra-chave auto se comporta de maneira muito semelhante a min-

content ou max-content, dependendo de você colocá-la no slot mínimo ou máximo. Como uma
palavra-chave por conta própria, ela funciona de maneira semelhante a minmax(min-content,
max-content), permitindo que a faixa seja o mais estreita possível sem que nada transborde,
mas cresça para caber seu conteúdo sem envolver se houver espaço suficiente.
Ao contrário de conteúdo máximo, um máximo automático permite alinhar conteúdo e

justificar conteúdo para estender a faixa além do tamanho do conteúdo. No mínimo, ele tem
um pouco mais de inteligência do que conteúdo mínimo - por exemplo, usando uma largura
ou altura mínima especificada em um item (se houver) em vez de seu tamanho de conteúdo Se você deseja dimensionar
mínimo e ignorando o conteúdo de qualquer grade itens com barras de rolagem. uma faixa com base em seu
Se você deseja dimensionar uma faixa com base em seu conteúdo, mas não tem certeza de
conteúdo, mas não tem certeza
qual palavra-chave usar, comece com auto. de qual palavra-chave usar, comece com
auto.
Repetir tamanhos de faixa
Digamos que você tenha uma grade com 10 colunas com larguras de coluna alternadas, assim:
grid-template-columns: 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px
1fr;
É meio chato ter que digitar (eu sei, acabei de fazer isso), então o pessoal do W3C forneceu um
bom atalho na forma de repeat()
função. No exemplo anterior, o padrão “20px 1fr” se repete cinco vezes, o que pode ser escrito
da seguinte forma:
grid-template-columns: repeat(5, 20px 1fr);
Muito melhor, não é? O primeiro número indica o número de repetições e os tamanhos das
faixas após a vírgula fornecem o padrão. Você pode usar a notação repeat() em uma sequência
mais longa de tamanhos de trilha – por exemplo, se essas 10 colunas estiverem intercaladas
entre duas colunas de 200 pixels de largura no início e no final:
grid-template-columns: 200px repeat(5, 20px 1fr) 200px;
Você também pode fornecer nomes de linhas de grade antes e/ou depois de cada tamanho de
faixa, e esses nomes serão repetidos no padrão:
grid-template-rows: repeat(4, [data] 5em [evento] 1fr);

Layout de grade CSS
preenchimento automático e ajuste automático
Nos exemplos de repeat() anteriores , informamos ao navegador quantas vezes repetir o padrão
fornecido. Você também pode deixar o navegador descobrir sozinho com base no espaço
disponível usando os valores de preenchimento automático e ajuste automático em vez de um
número inteiro em repeat().
AVISO
Por exemplo, se eu especificar
Você só pode usar uma repetição automática para uma grid-template-rows: repeat(auto-fill, 10em);
determinada declaração e não pode usá-la com unidades
e o contêiner de grade tem 35 em de altura, então o navegador cria uma linha a cada 10 ems até
fr . Você também não pode colocar palavras-chave de
tamanho baseado em conteúdo dentro de uma notação

ficar sem espaço, resultando em três linhas. Mesmo que haja apenas conteúdo suficiente para
de preenchimento automático ou de repetição automática .

preencher a primeira linha, todas as três linhas são criadas e o espaço é mantido no layout.
Observe que você pode usar a notação minmax()
dentro de uma repetição automática e pode usá-la com

O valor de ajuste automático funciona de maneira semelhante, exceto que todas as faixas que
frs ou palavras-chave baseadas em conteúdo (auto, min-
não possuem conteúdo são removidas do layout. Se houver espaço restante, ele será distribuído
content, max content) se estiverem na posição máxima
de acordo com os valores de alinhamento vertical (alinhar conteúdo) e horizontal (justificar
com um comprimento mínimo .
conteúdo) fornecidos (discutiremos o alinhamento posteriormente nesta seção).
Definindo áreas de grade
Até agora, exploramos como dividir um contêiner de grade em faixas de linha e coluna usando
grid-template-columns e grid-template-rows
propriedades e analisamos muitos dos valores possíveis para as dimensões da trilha.
Nomes de Linha de Grade de Bônus Aprendemos que você pode atribuir nomes a linhas de grade individuais para facilitar a consulta
ao colocar itens na grade.
Quando você dá um nome a uma área com
áreas de modelo de grade, como um bônus Você também pode atribuir nomes a áreas da grade, o que para alguns desenvolvedores é um
adicional, você obtém um conjunto de nomes de
método ainda mais intuitivo do que chamar linhas específicas. Lembre-se de que uma área de
linhas de grade gerados automaticamente para
grade é composta de uma ou mais células em um retângulo (sem formas de L ou outras coleções
acompanhá-la. Por exemplo, quando você nomeia
uma área como "principal", as linhas de grade de células não retangulares). Nomear áreas de grade é um pouco estranho de implementar, mas
esquerda e superior dessa área são fornece bons atalhos quando você precisa deles.
automaticamente denominadas "início principal" e
as linhas de grade direita e inferior são
Para atribuir nomes a áreas de grade, use a propriedade grid-template-areas .
denominadas "final principal". Você pode usar esses nomes de linha
ao posicionar os itens. grid-template-áreas

O inverso também é verdadeiro. Se você Valores: nenhum | série de nomes de área
atribuir explicitamente nomes de linha “portal
start” e “portal-end” em torno de uma área, você
pode usar o nome de área “portal” para atribuir Aplica-se a: contêineres de grade
conteúdo a essa área posteriormente, mesmo
Herda: não
que você não tenha definido com grid-template-
áreas. O valor da propriedade é uma lista de nomes fornecidos para cada célula na grade, listados linha
Você pode manter esse atalho em mente ao
por linha, com cada linha entre aspas. Quando células vizinhas compartilham um nome, elas
nomear linhas de grade, mas não é obrigatório.
formam uma área de grade com esse nome (veja a barra lateral Bonus Grid Line Names ).
Este é um excelente exemplo da

flexibilidade e complexidade do Grid Layout
No exemplo a seguir, dei nomes às áreas na grade de exemplo em que trabalhamos até agora
Module.
(FIGURA 16-36). Observe que há um nome de célula para cada uma das nove células conforme
elas aparecem em cada linha. As listas de células de linha não precisam

para ser empilhado como eu fiz aqui, mas muitos desenvolvedores acham útil alinhar a célula
por nomes usando espaços de caracteres para visualizar melhor a estrutura da grade.
#layout {
exibição: grade; Certifique-se de colocar os nomes das células de
grid-template-rows: [header-start] 100px [content-start] 400px forma a formar retângulos quando eles se combinam
[início do rodapé] para identificar uma área nomeada. Sem formas de
100px; grid-template-columns: [anúncios] 200px [principal] 1fr [links] 200px;
L ou fragmentos.
grid-template-areas:
"header header header"
"links de anúncios"main
"rodapé rodapé rodapé";

}
"cabeçalho cabeçalho cabeçalho" cabeçalho
"Publicidades a Principal linksÿ Publicidades a Principal links
"rodapé rodapé rodapé" rodapé
FIGURA 16-36. Quando células vizinhas têm o mesmo nome, elas formam uma área nomeada que pode ser
referenciada posteriormente.
Se houver três colunas na grade, deve haver três nomes fornecidos para cada linha. Se você
quiser deixar uma célula sem nome, digite um ou mais pontos (.) em seu lugar como um espaço
reservado para que cada célula ainda seja contabilizada. Novamente, um esboço de sua grade
com as áreas identificadas facilitará o planejamento do valor das áreas do modelo de grade .
Esteja ciente de que os tamanhos das faixas ainda estão vindo das colunas do modelo de grade
e propriedades grid-template-rows . A propriedade grid-template-areas simplesmente atribui
nomes às áreas, tornando mais fácil colocar itens nelas posteriormente.
A propriedade abreviada da grade

Use a propriedade abreviada de grade para definir valores para linhas de modelo de grade,
colunas de modelo de grade e áreas de modelo de grade com uma regra de estilo. Tenha em
mente que todas as propriedades que você não usar serão redefinidas para seus padrões, como
é o caso de todas as taquigrafias.
rede
Valores: nenhum | informações de linha / informações de coluna
Aplica-se a: recipientes de grade
Herda: não

Layout de grade CSS
Na grade, os valores de linha e valores de coluna são separados por uma barra, com os valores de
linha aparecendo primeiro:
grade: linhas / colunas
É mais fácil de entender sem a confusão de nomes de linha e área, então aqui está a declaração
abreviada para nossa grade de exemplo com apenas as informações de faixa de linha e coluna:
#layout {
exibição: grade;
grade: 100px 400px 100px / 200px 1fr 200px;
}
Para incluir nomes de linha personalizados, adicione os nomes entre colchetes em torno de suas
respectivas faixas, como vimos no exemplo anterior de linha nomeada.
Incluir nomes de área parece um pouco complicado no início, mas se você se lembrar de listar nomes
de células linha por linha, faz sentido que eles apareçam com as outras informações de linha, antes da
barra. A ordem completa é a seguinte:
[nome da linha inicial] "nomes de área" <tamanho da faixa> [nome da linha final]
Os nomes de linha e nomes de área são opcionais. Repita isso para cada linha na grade, simplesmente
listando-as uma após a outra sem nenhum caractere especial separando as linhas. Você pode achar útil
empilhá-los como fiz no exemplo a seguir para ajudar a manter cada linha distinta. Quando as linhas
estiverem concluídas, adicione uma barra e liste as informações da faixa de coluna depois dela. Aqui
está um exemplo completo de nossa grade escrita com a abreviação de grade :
#layout {
exibição: grade;
grid:
[header-start] "header header header" 100px [content-start]
"ads links" 400px [footer-start] "footer footer footer"
a Principal 100px /
[ads] 200px
[main] 1fr [links] 200px; }
Isso se expande para o seguinte:
#layout {
exibição: grade;
grid-template-rows: [header-start] 100px [content-start] 400px
[início do rodapé] 100px;
grid-template-columns: [anúncios] 200px [principal] 1fr [links] 200px;
grid-template-areas:
"header header header"
"links de anúncios"main
NOTA "rodapé rodapé rodapé" }
Os especialistas em grade com quem conversei Há também uma propriedade grid-template que funciona exatamente como grid, mas pode ser usada
não costumam usar grade ou modelo de apenas com grades explicitamente definidas (em oposição a grades implícitas, que abordarei
grade, exceto para as estruturas de grade mais posteriormente). A especificação Grid Layout recomenda fortemente que você use a abreviação de grid
simples. O código se torna excessivamente em vez de grid -template (veja a Nota) , a menos que você queira especificamente o comportamento
complexo e um pequeno deslize pode fazer
em cascata do grid-template.
toda a grade desmoronar. Para estruturas de
grade complicadas, atenha-se a propriedades Estou pensando que é um bom momento para você colocar todos esses estilos de configuração de
separadas para definir linhas, colunas e áreas. grade para usar no EXERCÍCIO 16-4.

Layout de grade CSS
EXERCÍCIO 16-4. Configurando uma grade
Neste exercício, vamos configurar o modelo de grade para a página mostrada na FIGURA 16-37. Vamos
colocar os itens da grade na grade no EXERCÍCIO 16-5, então, por enquanto, apenas preste atenção na NOTA
configuração das linhas e colunas.
Você precisará usar um navegador que
Esta página é semelhante à página de padaria em que estamos trabalhando, mas tem mais alguns
elementos e espaços em branco para tornar as coisas interessantes. O documento inicial, grid.html, é suporte grades para este exercício. Estou
fornecido com os materiais do exercício em learningwebdesign.com/5e/materials. Abra-o em um editor de usando o Firefox para aproveitar a ferramenta
texto e você verá que todos os estilos que afetam a aparência de cada elemento são fornecidos. Grid Inspector. Os navegadores de suporte
estão listados anteriormente nesta seção.
Consulte a barra lateral “Firefox Grid
Inspector and Layout Panel” para obter
3em
20px instruções sobre como abrir a ferramenta.
150px
300px
5em
1fr 150px 150px 150px
20px 20px 20px
FIGURA 16-37. A página Pães do Mundo que criaremos usando o Layout de Grade.
1. Comece transformando o elemento que o contém, o #layout div, em um contêiner de grade

configurando seu modo de exibição para “grade”:
#layout {
…
exibição: grade;
}
2. A FIGURA 16-37 mostra as trilhas de linha e coluna necessárias para acomodar o
conteúdo no layout desejado. Comece definindo as linhas conforme especificado no esboço, usando a
propriedade grid-template-rows . Deve haver seis valores, representando cada uma das seis linhas.
(Alerta de spoiler: estaremos ajustando esses valores quando chegarmos ao próximo exercício. Este é
apenas um ponto de partida.)
#layout {
…
exibição: grade;
grid-template-rows: 3em 20px 150px 300px 5em;
}
3. Faça o mesmo para as sete colunas. Como quero que a coluna de texto cresça e diminua com o espaço
disponível, especifiquei sua largura em unidades fracionárias (1fr). As colunas restantes criam células
de 150px de largura para três imagens e 20px de espaço antes delas.

Layout de grade CSS
Você pode escrevê-los todos assim:
grid-template-columns: 1fr 20px 150px 20px 150px 20px 150px;

No entanto, como as últimas seis colunas são um padrão de repetição, seria mais fácil usar a função
repeat() para repetir os espaços e as colunas de figura três vezes:
grid-template-columns: 1fr repeat(3, 20px 150px);

4. Por fim, vamos atribuir nomes às linhas de grade que delimitam a área da grade onde o principal
elemento de conteúdo deve aparecer. Os nomes nos dão algumas opções intuitivas para colocar
esse item mais tarde. A área principal começa na pista da terceira linha, portanto, atribua o nome
"início principal" à linha de grade entre as medições da pista da segunda e da terceira linha:
grid-template-rows: 3em 20px [início principal] 150px 300px 5em;

A área principal se estende até a última faixa de linha, portanto, atribua o nome “main-end” à última
linha de grade na grade (após a última faixa de linha):
grid-template-rows: 3em 20px [main-start] 150px 300px 5em [main-end];

5. Agora faça o mesmo para as linhas de grade que marcam os limites da trilha da coluna onde
o conteúdo principal vai:
grid-template-columns: [main-start] 1fr [main-end] repeat(3, 20px 150px);
Salvei meu trabalho e o examinei no Firefox com o Grid Inspector ativado (FIGURA 16-38).
Como não especifiquei para onde os itens da grade vão, eles fluíram para as células sequencialmente,
fazendo a bagunça que você vê na figura. No entanto, a sobreposição de grade revela que a estrutura
da grade parece sólida. Salve o arquivo e segure-o até o próximo exercício.
FIGURA 16-38. Os itens da grade ainda não estão posicionados corretamente, mas o Firefox Grid
Inspector mostra que a grade está configurada corretamente.

Layout de grade CSS
Colocando itens de grade
Agora que cobrimos todos os prós e contras da configuração de uma grade, incluindo nomes
práticos de linhas e áreas, podemos passar a atribuir itens a áreas na grade.
Como vimos nas FIGURAS 16-32 e 16-38, sem nenhuma instrução de posicionamento explícita,
os itens da grade fluem sequencialmente para as células da grade disponíveis. Isso é bom para
alguns casos de uso, mas vamos dizer aos nossos itens de grade para onde ir!
Posicionamento usando linhas
Um método para descrever a localização de um item de grade na grade é especificar as quatro

linhas que delimitam a área de grade de destino com quatro propriedades que especificam as
linhas de linha inicial e final e as linhas de coluna inicial e final. Aplique essas propriedades ao
elemento de item de grade individual que você está posicionando.
grid-row-start
grid-row-end
grid-coluna-início
final da coluna da grade
Valores: automóvel | linha de grade | número do intervalo | intervalo 'nome da linha' | número 'nome da linha'
Aplica-se a: itens de grade
Herda: não
Esse conjunto de propriedades fornece uma maneira direta de descrever a posição de um

elemento na grade, identificando o nome ou o número da linha de grade em cada borda. Como
alternativa, você pode fornecer apenas um identificador de linha e dizer ao item para “espalhar”
um certo número de células. Por padrão, um item ocupa uma largura de faixa, que é o que você
obtém com a palavra-chave auto .
Voltando ao nosso exemplo de cinco itens, gostaria que o primeiro item fosse para a linha
superior e abrangesse todas as três colunas (FIGURA 16-39).
Uma maneira de fazer isso é usar as propriedades de início/fim de quatro linhas e identificar as
linhas por seus números assim:
#1 {
grid-row-start: 1;
final da linha da grade: 2;
grid-coluna-início: 1;
extremidade da coluna da grade: 4;
}
Reserve um momento para comparar isso com a posição do #one div na FIGURA 16-36. Para
grid-row-start, o valor 1 refere-se à primeira linha (superior) do contêiner de grade. Para grid-
column-start, 1 refere-se à primeira linha na borda esquerda do contêiner, e o valor 4 para grid-
column-end identifica a quarta e última linha na borda direita do contêiner.

Layout de grade CSS
1, início de cabeçalho
-4
1 2 3 4
-3
2, fim do cabeçalho,
início de conteúdo
3 -2
4 -1
-4 -3 -2 -1
FIGURA 16-39. Posicionando um item de grade na trilha da linha superior em nossa grade de amostra.
Aqui está mais um para uma boa medida. Esta declaração de estilo posiciona o #quatro
elemento de item na coluna do lado direito, conforme mostrado na FIGURA 16-36:
NOTA #quatro {
grid-row-start: 2;
Se você omitir uma linha inicial ou final, a área final da linha da grade: 3;
terá uma faixa de largura (o padrão, auto). grid-coluna-início: 3;
extremidade da coluna da grade: 4;
Lembre-se de como as linhas de grade também são numeradas na direção oposta

começando em -1? Podemos usar isso aqui. Eu poderia especificar o grid-column-end para #one
como –1, e seria o mesmo que 4. Na verdade, este método tem a vantagem de garantir a
extensão até o final da pista e evitar erros de contagem.
Eu também poderia usar as linhas nomeadas que configurei aqui. Esses valores de linha
são intercambiáveis com o exemplo anterior:
DICA QUENTE
#1 {
grid-row-start: início do cabeçalho;
Se você precisar estender até a última
grid-row-end: fim do cabeçalho;
linha de grade em uma linha ou coluna, use …
o valor –1 e economize algumas contagens. }

Além disso, mesmo que o número de
linhas ou colunas mude na linha, –1 Se eu omitir a declaração da linha final, a linha teria uma faixa de altura (o padrão). Isso é
sempre selecionará a última linha, para que o que eu quero aqui, então omitir completamente a declaração final é mais uma maneira
você não precise renumerar.
de alcançar o efeito que eu quero.
Pronto para mais uma opção? Posso dizer ao item em qual linha começar, mas em vez de
fornecer uma linha final, posso usar a palavra-chave span para especificar quantas faixas
percorrer. Neste exemplo, o item começa na borda esquerda da trilha (linha 1) e se
estende por três colunas, terminando efetivamente na linha 4.

Layout de grade CSS
#1 {
…
grid-coluna-início: 1;
grid-column-end: span 3;
}
Os spans também podem funcionar em sentido inverso. Se você fornecer apenas uma
linha final, o intervalo pesquisará em direção ao início da trilha. Os estilos a seguir têm
o mesmo efeito que nossos exemplos anteriores porque definem a área de destino por
sua linha final na extremidade direita da grade e retrocedem três colunas até o início:
#1 {
…
grid-column-start: span 3;
final da coluna da grade: -1;
}
Se quatro declarações parecerem demais, use as propriedades abreviadas grid-row

e grid column .
linha de grade
coluna de grade
Valores: linha inicial / linha final
Predefinição: ver propriedades individuais
Herda: não
Essas propriedades combinam as propriedades *-start e *-end em uma única

declaração. Os valores de linha inicial e final são separados por uma barra (/). Com a
abreviação, posso encurtar meu exemplo para as duas declarações a seguir. Qualquer
um dos métodos para se referir a linhas funciona nos valores abreviados.
#1 {
linha de grade: 1 / 2;
coluna-grade: 1 / span 3;
}
Posicionando por área
A outra maneira de posicionar um item em uma grade é dizer a ele para entrar em uma
das áreas nomeadas usando a propriedade grid-area .
área de grade
Valores: nome da área | identificadores de 1 a 4 linhas
Predefinição: ver propriedades individuais
Herda: não
A propriedade grid-area aponta para uma das áreas nomeadas com grid-temp plate-
áreas. Ele também pode apontar para um nome de área que é criado implicitamente
quando você nomeia linhas que delimitam uma área com os sufixos “-start” e “-end”. Com

Layout de grade CSS
Com esse método, posso soltar todos os itens da grade nas áreas que configurei com meu
modelo anteriormente (FIGURA 16-40):
#one { grid-area: header; }

#two { grid-area: ads; }
#three { grid-area: main }
#four { grid-area: links; }
#five { grid-area: footer; }
1
cabeçalho
dois três quatro
Publicidades a Principal links
cinco
rodapé
FIGURA 16-40. Atribuindo itens de grade por nomes de área.
Quão fácil foi isso?! Um benefício de usar áreas é que você pode alterar a grade e, desde
que forneça áreas de grade nomeadas de forma consistente, os itens acabarão no lugar
certo. Não há necessidade de renumerar linhas na folha de estilo.
Você também pode usar grid-area para fornecer uma lista de quatro linhas de grade que
definem uma área, separadas por barras. A ordem em que eles aparecem é “row-start”,
“column-start”, “row-end”, “column-end” (sentido anti-horário a partir do topo).
Existem muitas regras para o que acontece quando você omite valores, mas não vou entrar
em todos esses detalhes aqui. A declaração da área da grade para o primeiro item da grade
pode ser escrita assim para obter o mesmo resultado dos exemplos anteriores:
#1 {
área da grade: 1 / 1 / 2 / span 3;
/* início de linha / início de coluna / fim de linha / fim de coluna */
}
Como você pode ver, o Módulo de Layout de Grade oferece várias maneiras de configurar
uma grade e várias maneiras de colocar itens nela. Na verdade, a especificação inclui mais
alguns usos de span que você pode explorar. Escolha os métodos que funcionam melhor
para a grade que você está projetando ou que funcionam melhor para o seu cérebro.
Agora vamos terminar a grade em que trabalhamos no EXERCÍCIO 16-5.

Layout de grade CSS
EXERCÍCIO 16-5. Colocando itens em uma grade
Agora que temos a grade configurada para a página Pães do Mundo, podemos #figA {
colocar os itens nas áreas corretas da grade usando números de linha e nomes. área da grade: 3/3/4/4;
}
#figB{
Vou examiná-los rapidamente, mas sinta-se à vontade para salvar o arquivo e
área da grade: 3/5/4/6;
examinar a página em um navegador com suporte a grade em qualquer etapa do }
caminho. Consulte o layout finalizado na FIGURA 16-41 para as posições finais dos
itens e dicas de número de linha. 3. Demos as linhas de grade ao redor dos nomes das áreas principais, então vamos usar
para colocar o item da grade principal :
1. Abra grid.html em seu editor de texto se ainda não estiver aberto. Começaremos
colocando o elemento nav na primeira linha da grade, usando as quatro a Principal {
propriedades da linha de grade: nav { linha de grade: início principal / fim principal;
coluna da grade: início/fim principal;
}
grid-row-start: 1;
final da linha da grade: 2; Você se lembra que quando você nomeia linhas em torno de uma área *-start e
grid-coluna-início: 1; *-end, cria uma área nomeada implicitamente *?

extremidade da coluna da grade: 8; /* você também pode usar -1 */ Como nomeamos as linhas de acordo com essa sintaxe, também podemos colocar
} o elemento principal com área de grade assim:
2. Agora coloque as figuras em suas posições na grade. Comece colocando a a Principal {
terceira figura (#figC) em seu lugar na coluna da extrema direita usando a área de grade: principal;
abreviação grid-row e grid-column }
propriedades. Ele vai entre as linhas de grade da 3ª e 4ª linha e se estende das
4. Finalmente, podemos colocar o rodapé em seu lugar. Ele começa no último
linhas da 7ª à 8ª coluna. Para colunas, em vez de 7 e 8, use o valor negativo para a
linha de grade de linha e se estende para trás uma faixa. Para colunas, começa na
última linha e espalhe um espaço à esquerda para chegar ao ponto inicial:
terceira linha e vai até a última. Aqui está uma maneira de escrever essas instruções.
Você pode inventar outros que alcancem o mesmo resultado?
#figC{
linha de grade: 3 / 4;
rodapé
coluna-grade: span 1 / -1;
} { linha de grade: 5 / 6;
coluna-grade: 3 / -1;
Agora posicione os elementos #figA e #figB usando a propriedade grid-area }
com valores de linha. Lembre-se que os valores vão na ordem superior, esquerda,
Salve seu arquivo e veja-o no navegador. Você pode identificar um problema,
inferior, direita (sentido anti-horário ao redor da área).
dependendo da largura da janela do seu navegador. Quando
ÿ
1 2
partida principal extremidade principal 3 4 5 67 8
1
2
3
partida principal
6
extremidade principal
FIGURA 16-41. O layout final da grade Pães do Mundo.

Layout de grade CSS
EXERCÍCIO 16-5. Contínuo Agora você conhece o básico sobre como criar uma grade explícita e colocar itens nela. Há
mais alguns tópicos relacionados à grade com os quais é importante se familiarizar: grades
implícitas, espaços de medianiz e alinhamento de grade. Tenho espaço para apenas uma
o navegador é largo, o layout funciona bem,
mas quando fica mais estreito, o texto no
introdução básica a cada tópico, mas quando você começa a implementar layouts de grade
elemento principal transborda sua célula. Isso por conta própria, pode fazer o mergulho profundo necessário para atender às suas necessidades.
ocorre porque a altura de 300 pixels que demos
a essa linha não é suficiente para conter o texto
quando ele é dividido em linhas adicionais ou é Comportamento de grade implícito
redimensionado.
Até agora, nos concentramos em maneiras de definir uma grade explícita e colocar itens nela
5. Podemos corrigir isso alterando o
medição da pista da quinta linha para deliberadamente. Mas ao longo do caminho, encontramos alguns dos comportamentos
automático. Dessa forma, a altura dessa automáticos ou implícitos do sistema Grid . Por exemplo, sem instruções de posicionamento
linha sempre será pelo menos grande o explícitas, os itens da grade fluem para a grade sequencialmente, como vimos na FIGURA
suficiente para conter o conteúdo. O valor 16-32. Também apontei como a criação de uma área nomeada gera implicitamente linhas de
min-content também funcionaria, mas
grade com os sufixos “-start” e “-end” e vice-versa.
auto é sempre o primeiro valor a ser tentado:
Outro comportamento implícito da grade é a criação de faixas de linha e coluna em tempo

#layout { real para acomodar itens que não se encaixam na grade definida. Por exemplo, se você
exibição: grade; colocar um item fora de uma grade definida, o navegador gerará automaticamente faixas na
grid-template-rows: 3em 20px
grade para acomodá-lo. Da mesma forma, se você simplesmente tiver mais itens do que
[main-start] 150px auto 5em
[main-end]; células ou áreas, o navegador gerará mais trilhas até que todos os itens sejam colocados.
…
}
Por padrão, qualquer linha ou coluna adicionada automaticamente a uma grade terá o
Se você recarregar a página no navegador,
tamanho automático, dimensionado apenas o suficiente para acomodar a altura ou a largura
o texto estará sempre contido em sua área
de grade, independentemente da largura da do conteúdo. Se você quiser dar dimensões específicas às linhas e colunas implícitas, como
janela. Tudo deve se encaixar perfeitamente, para corresponder a um ritmo estabelecido em outro lugar na grade, use as propriedades
conforme mostrado na FIGURA 16-41. grid auto-* .
Agora você tem seu primeiro layout de
grade em seu currículo. Este exercício fornece grid-auto-rows
apenas uma amostra do que o Grid Layout pode colunas-auto-grade
fazer, mas abordamos os fundamentos da
lista de tamanhos de faixa
Valores:
configuração de uma grade e da colocação de itens nela.
Você começou muito bem! Predefinição: auto
Herda: não
As propriedades grid-auto-row e grid-auto-columns fornecem um ou mais tamanhos de

trilha para trilhas geradas automaticamente e se aplicam ao contêiner de grade. Se você
fornecer mais de um valor, ele atuará como um padrão de repetição. Como acabamos de
mencionar, o valor padrão é auto, que dimensiona a linha ou coluna para acomodar o
conteúdo.
Neste exemplo, criei explicitamente uma grade com duas colunas de largura e duas colunas
de altura. Coloquei um dos itens da grade em uma posição equivalente à quinta coluna e
terceira linha. Minha grade explícita não é grande o suficiente para acomodá-la, então as
faixas são adicionadas de acordo com os tamanhos que eu forneci nas propriedades grid
auto-* (FIGURA 16-42).

Layout de grade CSS
A MARCAÇÃO
<div id="littlegrid">
<div id="A">A</div>
<div id="B">B</div>
O embaralhamento de itens da grade
</div>
OS ESTILOS Até agora, você viu itens de grade fluindo em
uma grade sequencialmente e colocados em
#littlegrid { suas próprias pequenas áreas em uma grade
exibição: grade;
explicitamente. Existem algumas propriedades
grid-template-columns: 200px 200px;
que podem ser úteis para ajustar a posição
grid-template-rows: 200px 200px; grid-
dos itens da grade.
auto-columns: 100px;
grid-auto-rows: 100px;
} Mudando a Ordem
#A Como no Flexbox, você pode aplicar a
{ grade-linha: 1 / 2; propriedade order a um elemento de
coluna-grade: 2 / 3; item de grade para alterar a ordem em
}
que aparece quando é renderizado.
#B
Lembre-se que a ordem
{ linha de grade: 3/4;
A propriedade não altera a ordem em que é
coluna-grade: 5 / 6;
} lida por um dispositivo de assistência.
Consulte a seção “Alterando a Ordem dos
Itens Flex” anteriormente em
este capítulo para obter mais informações

A grade tem duas linhas e colunas explicitamente definidas com 200 pixels de largura cada.
sobre como usar a ordem.
200px 200px
Ordem de empilhamento
É possível posicionar itens em uma grade

de forma que eles se sobreponham.
Quando mais de um item é atribuído a uma
200px
área de grade, os itens que aparecem
posteriormente na origem são renderizados
sobre os itens anteriores na origem, mas
você pode alterar a ordem de empilhamento
usando o z-index
propriedade. Atribuindo um índice z mais alto
200px valor para elementos de item anteriores torna
eles renderizam itens acima que aparecem

mais tarde. Consulte a seção “Ordem de
empilhamento” no Capítulo 15, Flutuante e
Posicionamento, para obter detalhes sobre o
100px uso do z-index.
100px 100px 100px
Faixas de linhas e colunas são adicionadas automaticamente conforme necessário. Eles são
dimensionados conforme especificado por grid-auto-rows e grid-auto-columns (100 pixels).
FIGURA 16-42. Os navegadores geram linhas e colunas automaticamente para colocar itens de
grade que não se encaixam na grade definida.
Espero que esse exemplo tenha ajudado você a formar um modelo mental para linhas e
colunas geradas automaticamente. Um uso mais comum de faixas geradas automaticamente
é agrupar imagens, listagens de produtos e similares em colunas, permitindo que as linhas sejam

Layout de grade CSS
criado conforme necessário. Esses estilos configuram uma grade com colunas explícitas (quantas
couberem na largura da janela de visualização, não mais estreita que 200px) e quantas linhas de
200px de altura forem necessárias:
grid-template-columns: repeat(auto-preenchimento, minmax(200px, 1fr));

grid-auto-rows: 200px;
Você também pode controlar a maneira como os itens fluem automaticamente para a grade com
a propriedade grid-auto-flow .
Direção e densidade do fluxo
grid-auto-flow
Valores: linha ou coluna | denso (opcional)
Predefinição: fileira
Herda: não
Use grid-auto-flow para especificar se deseja que os itens fluam por linha ou coluna. O fluxo
padrão segue a direção de escrita do documento (da esquerda para a direita e de cima para baixo
para inglês e outros idiomas da esquerda para a direita).
Neste exemplo, especifiquei que gostaria que os itens de grade fluíssem por colunas em vez das
linhas padrão:
#listagens {
exibição: grade;
grid-auto-flow: coluna;
}
Por padrão, os itens são colocados na primeira área em que se encaixam. As células que são
muito pequenas para acomodar o conteúdo serão ignoradas até que uma célula grande o
suficiente seja encontrada para colocação. Se você incluir a palavra-chave densa opcional para
a propriedade grid-auto-flow , ela instruirá o navegador a preencher a grade o mais densamente
possível, permitindo que os itens apareçam fora de sequência para preencher o espaço disponível:
#listings {
exibição: grade;
grid-auto-flow: linhas densas;
}
O exemplo à esquerda da FIGURA 16-43 mostra o método de fluxo padrão.

Olhe atentamente e você verá que os itens da grade estão em ordem. Quando não há espaço
suficiente para todo o item, ele se move para baixo e para a esquerda até caber (semelhante a
flutuadores). Este método pode deixar células vazias conforme mostrado na figura.
Em comparação, o exemplo de fluxo denso à direita está todo preenchido e, se você observar a
numeração, verá que colocar os itens onde eles se encaixam faz com que eles fiquem fora de
ordem. Observe que o fluxo denso nem sempre resulta em uma grade completamente preenchida
como a figura, mas é provável que tenha menos furos e seja mais compacto do que o modo
padrão.

Layout de grade CSS
Padrão de fluxo Padrão de fluxo denso
FIGURA 16-43. Comparação dos modos de fluxo automático padrão e denso.
A propriedade abreviada da grade revisitada

Anteriormente, vimos a propriedade abreviada de grade usada para fornecer tamanhos de trilhas, bem
como nomes de áreas. Nessa seção, estávamos lidando com grades explícitas, mas grades
também pode ser usado com propriedades de grade implícitas.
A adição da palavra-chave auto-flow às informações de linha ou faixa indica que as faixas nesse eixo
devem ser geradas automaticamente na dimensão fornecida.
Digamos que queremos estabelecer colunas explicitamente, mas deixar que as linhas sejam geradas
automaticamente conforme necessário. A abreviação da grade para este cenário comum é mostrada aqui:
grade: fluxo automático 12em/repetir(5, 1fr);
Lembre-se de que a sintaxe abreviada da grade lista as informações da linha primeiro, depois uma barra
e, em seguida, as informações da coluna. Aqui, a regra diz para criar linhas automaticamente com 12
ems de altura e criar 5 colunas a 1fr cada. Quando o fluxo automático é aplicado a linhas, o fluxo
automático de grade é definido como linha.
Neste exemplo, a grade resultante terá duas linhas de 300px, mas colunas de 100px de largura serão
geradas instantaneamente à medida que os itens da grade forem adicionados:
grade: 300px 300px / fluxo automático 100px;
Com o fluxo automático aplicado às colunas, o fluxo automático da grade é definido como coluna.
É importante ter em mente que, como grid é uma propriedade abreviada, qualquer valor omitido será
redefinido para seu padrão. Portanto, se você também usou a grade para configurar linhas e colunas
explícitas, elas serão essencialmente perdidas se uma abreviação de grade com instruções de grade
implícitas aparecer posteriormente na folha de estilo.

Layout de grade CSS
Espaçamento e Alinhamento
As propriedades restantes definidas no Grid Layout Module estão relacionadas ao espaçamento
e alinhamento. Você pode adicionar espaço entre as trilhas e ajustar o alinhamento da grade e
seus itens usando muitos dos mesmos métodos que aprendeu para o Flexbox.
Espaçamento entre faixas (calhas)
NOTA grid-row-gap
grade-coluna-gap
Esses nomes de propriedade serão alterados
Valores: comprimento (não deve ser negativo)
para intervalo de linha, intervalo de coluna e intervalo.
Até que os navegadores comecem a oferecer Predefinição: 0

suporte à nova sintaxe, você ainda poderá usar as
versões pré-fixadas grid-* , que continuarão sendo
Herda: não
suportadas para compatibilidade com versões anteriores.
lacuna na grade
Valores: grade-linha-gap grade-coluna-gap
Predefinição: 00
Herda: não
Definir um valor de comprimento para grid-row-gap adiciona espaço entre as faixas de linha da
grade e grid-column-gap adiciona espaço entre (você adivinhou) as faixas de coluna. O efeito
é como se as linhas de grade tivessem uma largura; no entanto, a largura do intervalo é aplicada
apenas às linhas entre as faixas, não fora da primeira e da última linha na grade. (O espaçamento
nas bordas externas pode ser controlado com preenchimento.) Você pode usar a abreviação de
intervalo de grade para especificar larguras de intervalo para linhas e colunas de uma só vez,
com as linhas primeiro, como de costume.
Neste exemplo, adicionei 20px de espaço entre as linhas e 50px de espaço entre as colunas
usando a abreviação de grid-gap (FIGURA 16-44).
div#container
{ borda: cinza sólido de 2px;
Alinhamento da Caixa exibição: grade;
grade: repeat(4, 150px) / repeat(4, 1fr);
Não é coincidência que Flexbox e Grid lacuna de grade: 20px 50px;
compartilhem propriedades e valores de }
alinhamento. Eles são todos padronizados
em sua própria especificação chamada CSS Alinhamento de grade e item
Box Alignment Module, Nível 3, que serve
como referência para vários módulos CSS. Você pode alinhar itens de grade em suas células com o mesmo vocabulário de alinhamento
Você pode conferir em www.w3.org/TR/css-
usado para itens do Flexbox (veja a barra lateral “Box Alignment” ). Eu vou tocar nestes
align/.
rapidamente, mas você pode brincar com eles por conta própria.

Layout de grade CSS
50px 50px 50px
20px
20px
20px
grade-linha-gap: 20px;
grade-coluna-gap: 50px;
FIGURA 16-44. As lacunas de grade adicionam espaços de calha entre as trilhas.
Alinhando itens individuais
justificar-se NOTA
Valores: iniciar | fim | centro | esquerda | direito | auto-inicialização | auto-fim | esticar Os valores de início e fim automáticos
| normais | auto
observam a direção de escrita do conteúdo
Predefinição: auto (examina o valor para justificar-itens, cujo padrão é normal) do item e usam sua borda inicial ou final
para alinhamento. Por exemplo, se um item
estiver em árabe, sua inicialização automática
Herda: não
a borda está à direita e seria alinhada à
direita. O início e o fim
alinhar-se valores consideram a direção de escrita do
Valores: iniciar | fim | centro | esquerda | direito | auto-inicialização | auto-fim | esticar contêiner de grade. A esquerda e a direita
| normais | auto as palavras-chave são absolutas e não
Predefinição: mudam com o sistema de escrita, mas
auto (examina o valor para align-items)
correspondem ao início e ao fim em idiomas
da esquerda para a direita.
Herda: não
Quando um item de grade não preenche toda a sua área de grade, você pode especificar como
deseja que ele seja alinhado nesse espaço. Especifique o alinhamento horizontal (inline) com a
propriedade justificar-se . align-self especifica o alinhamento no eixo vertical (bloco). Essas
propriedades se aplicam ao elemento de item de grade, o que faz sentido porque você deseja que
o item se alinhe.
A FIGURA 16-45 mostra os efeitos de cada valor de palavra-chave. Para itens com seu tamanho
definido como automático (ou em outras palavras, não definido explicitamente com largura e altura
propriedades), o padrão é esticar. Isto é o que vimos em todos os anteriores

Layout de grade CSS
justificar-se
GORJETA
Se você quiser que um item de

grade permaneça centralizado em sua
área de grade, defina align-self e justify-
self para o centro.
alinhar-se
FIGURA 16-45. Valores para justify-self e align-self para alinhar um item de grade dentro de sua respectiva
área de grade. Esses valores têm o mesmo uso nos itens justificados
e propriedades align-items que são usadas para alinhar todos os itens na grade.
exemplos de grade. Se o item da grade tiver uma largura e uma altura especificadas, essas
dimensões serão preservadas e o padrão será start.
Falando em
espaçamento, e as margens?
Depois de ler sobre o Flexbox, você deve achar isso familiar – por exemplo, o uso de “start”
e “end” para manter a linguagem do sistema independente de direção.
Você pode adicionar margens a um item
de grade, assim como para qualquer outro
Alinhando todos os itens em uma grade
elemento. É útil saber que a caixa de margem
do item será ancorada na célula ou área da
justificar-itens
grade e o espaço da margem será preservado.
Valores: iniciar | fim | centro | esquerda | direito | auto-inicialização | auto-fim | esticar |
normal
Você pode usar margens para mover o
item na área da grade. Por exemplo, Predefinição: normal (estiramento para elementos não substituídos; início para elementos
definir a margem esquerda para “auto” substituídos)
empurra o item para a direita, como vimos em
exemplos anteriores do Flexbox. Aplica-se a: recipientes de grade
Definir as margens esquerda e direita como Herda: não

“automático” (desde que o item tenha uma
largura especificada) centraliza-o
horizontalmente. Em Grid, você também pode
Valores: iniciar | fim | centro | esquerda | direito | auto-inicialização | auto-fim | esticar |
definir as margens superior e inferior para
normal
“auto” e, desde que haja uma altura
especificada, centraliza verticalmente. Claro, Predefinição: normal (estiramento para elementos não substituídos; início para elementos
você tem as propriedades de alinhamento do substituídos)
item de grade para obter esses efeitos também.
Herda: não
Para alinhar todos os itens em uma grade de uma só vez, use os itens justificados
propriedade para alinhamento de eixo horizontal/inline e align-items para vertical/
eixo do bloco. Aplique essas propriedades ao elemento do contêiner da grade para que
afete todos os itens da grade. As palavras-chave fazem as mesmas coisas mostradas em

Layout de grade CSS
FIGURA 16-43; apenas imagine isso acontecendo de forma consistente em toda a grade.
Lembre-se de que essas configurações serão substituídas pelas propriedades *-self .
Alinhando faixas no contêiner de grade
Pode haver casos em que as faixas de sua grade não preencham toda a área de seu
contêiner de grade — por exemplo, se você especificou larguras e alturas de faixas As propriedades de
em medidas de pixel específicas. Você pode decidir como o navegador deve lidar alinhamento se aplicam ao
com o espaço restante dentro do contêiner usando o justify-content contêiner de grade.
(eixo horizontal/inline) e align-content (eixo vertical/bloco).
Valores: iniciar | fim | esquerda | direito | centro | esticar | espaço ao redor | espaço entre | espaçar NOTA
uniformemente
A palavra-chave esticar funciona apenas quando a
largura ou altura da faixa está definida como automática.
Herda: não
alinhar-conteúdo
Valores: iniciar | fim | esquerda | direito | centro | esticar | espaço ao redor | espaço entre | espaçar
uniformemente
Herda: não
Na FIGURA 16-46, o recipiente de grade é indicado com um contorno cinza. As AVISO

linhas e colunas da grade desenhada não preenchem todo o contêiner, então algo
Quando você distribui espaço ao redor e entre as
precisa acontecer com esse espaço extra. As palavras-chave start, end e center
faixas, ele adiciona a qualquer lacuna
movem toda a grade dentro do contêiner, colocando o espaço extra depois, antes ou configurações que você pode ter.
igualmente em ambos os lados, respectivamente. O espaço ao redor e o espaço
entre as palavras- chave distribuem o espaço ao redor das faixas conforme discutido
na seção Flexbox. A palavra-chave space-evenly adiciona uma quantidade igual de
espaço no início e no final de cada faixa e entre os itens.
justificar-conteúdo:
começar fim Centro espaço ao redor espaço entre espaçar uniformemente
alinhar-conteúdo:
começar fim Centro espaço ao redor espaço entre espaçar uniformemente
FIGURA 16-46. As propriedades justify-content e align-content distribuem espaço extra no contêiner.

Layout de grade CSS
Antes de encerrarmos esta discussão sobre Layout de Grade, vamos dar à página Black
Goose Bakery um bom layout de duas colunas no EXERCÍCIO 16-6.
EXERCÍCIO 16-6. Um layout de grade para a página de padaria
A página da Black Goose Bakery percorreu um longo caminho. Você adicionou preenchimento, bordas e
margens. Você flutuou imagens, posicionou um gráfico de prêmio e criou uma barra de navegação usando o
Flexbox. Agora você pode usar suas novas habilidades de grade para dar a ele um layout de duas colunas que
seria apropriado para tablets e telas maiores (FIGURA 16-47).
150px
5em
mínimo 25em, máximo 1fr 16em
FIGURA 16-47. A página Black Goose Bakery com um layout de grade de duas colunas.
Comece abrindo o arquivo de padaria como você o deixou no EXERCÍCIO 16-1.
1. Precisamos adicionar um pouco de marcação que inclua tudo no corpo do documento em um elemento que
servirá como contêiner de grade. Abra o documento HTML bakery.html, adicione um div ao redor de todos os
elementos de conteúdo (do cabeçalho ao rodapé) e dê a ele o id “container”. Salve o arquivo HTML.

Layout de grade CSS
<corpo> 5. Com tudo configurado, será muito fácil colocar os itens de conteúdo em seus
<div id="container"> devidos lugares. Crie uma regra de estilo para cada item da grade e diga para
<header>…</header> onde ir com a área da grade:
<main>…</main>
<à parte>…</à parte> cabeçalho
<rodapé>…</rodapé> { área da grade:
</div> banner; } main { área da
</body> grade: main; } à parte
{ área da grade: horas; }
Na folha de estilo (bakery-styles.css), adicione um novo estilo para fazer a rodapé { área da grade:
nova div ser exibida como uma grade: rodapé; }
#container {
exibição: grade;
}
2. Primeiro vamos trabalhar nas linhas. A FIGURA 16-47 mostra que
precisamos de três linhas para criar o layout. Defina a altura da trilha da

Bem fácil, certo? Agora seria um bom momento para salvar o arquivo e dar uma
primeira linha como automática para que ela observe as configurações de
olhada nele no navegador (se você ainda não o fez). As margens de 2,5% que
altura nos elementos dentro dela e acomode automaticamente o conteúdo.
estabelecemos no elemento principal anteriormente dão a ele um bom espaço
A segunda linha tem muito texto, portanto, use o valor de rastreamento
para respirar em sua área, então vamos deixar isso em paz. No entanto, gostaria
automático novamente para garantir que a faixa se expanda pelo menos o
de remover a margem direita e o raio da borda que havíamos definido ao lado
necessário para ajustar o texto. Para a terceira linha, uma altura de 5em
para preencher a coluna direita. Vou apenas comentá-los para que as informações
deve ser suficiente para ajustar as poucas linhas de texto com uma quantidade
ainda estejam disponíveis se eu precisar usá-las mais tarde:
confortável de espaço:
a parte, de lado {
#container …
{ display: grid; grid- /* border-top-right-radius: 25px; */

template-rows: auto auto 5em; } /* margem: 1em 2,5% 0 10%; */
}
3. Agora podemos configurar as trilhas das colunas. Parece que precisaremos Isso faz isso! Abra a página bakery.html em um navegador que suporte
de apenas dois: um para o conteúdo principal e outro para a barra lateral grades CSS e deve se parecer com a captura de tela em
Horas. Eu usei o valor minmax() para garantir que a coluna de texto nunca FIGURA 16-47.
fique mais estreita que 25em, mas ela pode se expandir para preencher o
Agora a página da padaria tem um layout de duas colunas usando uma grade
espaço disponível no navegador (1fr). A coluna Horas parece certa para mim às
simples. No mundo real, esse seria apenas um layout em um conjunto que
16h. Sinta-se à vontade para experimentar outros valores.
abordaria diferentes tamanhos de tela como parte de uma estratégia de design
#container responsivo. Falaremos sobre design responsivo no próximo capítulo. E como as
{ display: grid; grid- grades não são suportadas pelo Internet Explorer, Edge e navegadores mais
template-rows: auto auto 5em; grid-template- antigos, você também criaria layouts de fallback usando Flexbox ou floats,
columns: minmax(25em, 1fr) 16em; } dependendo de quão universalmente você precisa que o layout funcione. Não quero
acabar com seu burburinho, mas quero que você esteja ciente de que, embora este
4. Em seguida, nomeie as áreas na grade para que possamos colocar os itens exercício permita que você aprimore suas habilidades, é parte de um quadro de
nela de maneira fácil e eficiente. Use a propriedade grid-template-areas para produção muito mais amplo.
nomear as células na grade: Observação: para técnicas de layout baseadas em posição e flutuação que
podem ser usadas como alternativas, obtenha o artigo “Layout de página com
#container
{ display: grid; grid- flutuações e posicionamento” (PDF) em learningwebdesign.com/articles/.
template-rows: auto auto 5em; grid-template-

columns: minmax(25em, 1fr) 16em; grid-template-áreas:
"bandeira"
"horário principal"
"rodapé de rodapé";
}

Teste-se
Recursos de grade on-line
À medida que você continua sua aventura de Grid Layout, tenho certeza de que encontrará muitos
NUM RELANCE recursos excelentes on-line, pois mais estão surgindo o tempo todo. Gostaria de indicar alguns dos
recursos mais completos e confiáveis que considerei úteis ao aprender sobre grades.
Resumo da propriedade da grade
Aqui está uma lista útil e agradável
das propriedades Grid, organizadas se Site “Grid By Example” de Rachel Andrew (gridbyexample.com)
elas se aplicam ao contêiner ou a itens de
Rachel Andrew, uma das primeiras campeãs do Grid Layout, reuniu uma incrível coleção de
grade individuais.
artigos, tutoriais em vídeo gratuitos, informações de suporte ao navegador e muito mais. Você
Propriedades do Contêiner de Grade também pode tentar pesquisar na web por suas excelentes conferências sobre o assunto.
exibição: grade | grade em linha
rede
“Experimental Layout Lab” de Jen Simmons (labs.jensimmons.com)
modelo de grade
Jen Simmons, que trabalha para a Mozilla Foundation, mostra o que o Grid Layout pode fazer
grid-template-rows
em seu Laboratório de Layout Experimental. Definitivamente vale a pena uma visita para os
grid-template-colunas
exemplos interessantes de Grid e outras tecnologias CSS emergentes, bem como exercícios
grid-template-áreas
que permitem codificar junto.
grid-auto-rows
colunas-auto-grade Você pode encontrar muitos artigos de Jen sobre CSS Grid em jensimmons.com/writing.
grid-auto-flow Eu também recomendo seu resumo de recursos para aprender Grid Layout em jensimmons.com/
lacuna na grade post/feb-27-2017/learn-css-grid. Veja também a série de vídeos de Jen no YouTube chamada
grid-row-gap “Layout Land” (youtube.com, procure por “Layout Land Jen Simmons”).
grade-coluna-gap
justificar-itens
Grid Garden por Thomas Park (cssgridgarden.com)
justificar-conteúdo Se você gostou do jogo Flexbox Froggy criado por Thomas Park, você vai se divertir jogando
alinhar-conteúdo seu jogo Grid Garden para se familiarizar com CSS Grid Layout.
Propriedades do item de grade
coluna de grade
grid-coluna-início TESTE-SE
final da coluna da grade
linha de grade Cobrimos muito terreno neste capítulo. Veja como você se sai neste quiz de alguns dos destaques.
grid-row-start Como sempre, o Apêndice A tem as respostas.
grid-row-end
área da Flexbox
grade justificar-se
1. Como você transforma um elemento em um item flexível?
alinhar-se
pedido (não faz parte do Módulo Grid)
z-index (não faz parte do Módulo Grid)

2. Combine as propriedades com suas funções.
uma. justificar-conteúdo 1. Distribua o espaço ao redor e entre as linhas flexíveis no

eixo transversal.
b. alinhar-se 2. Distribua o espaço ao redor e entre os itens no eixo principal.

Teste-se
c. alinhar-conteúdo 3. Posicione os itens no eixo cruzado.
d. itens de alinhamento 4. Posicione um item específico no eixo cruzado.
3. Como align-items é diferente de align-content?

O que eles têm em comum?
4. Combine as propriedades e valores com os efeitos resultantes.
uma. flexível: 0 1 automático; 1. Os itens são completamente inflexíveis, nem encolhendo

nem crescendo.
b. flexível: nenhum; 2. O item terá o dobro da largura dos outros com

flex: 1 e também pode encolher.
c. flexível: 1 1 automático; 3. Os itens são totalmente flexíveis.
d. flexível: 2 1 0px; 4. Os itens podem encolher, mas não crescer.
5. Combine as seguintes declarações de flex-flow com as flexboxes resultantes (FIGURA

16-48).
uma. flex-flow: quebra de linha;
b. flex-flow: coluna nowrap;
c. flex-flow: linha wrap-reverse;
d. flex-flow: coluna wrap-reverse;
e. flex-flow: row nowrap;
1 2 3
4 5
FIGURA 16-48. Várias configurações de fluxo flexível .

Teste-se
6. Escreva regras de estilo para exibir os itens do flexbox na ordem mostrada em

FIGURA 16-49.
HTML de origem Depois de reordenar
</div>
FIGURA 16-49. Escreva estilos para colocar os itens na ordem mostrada.
Layout de grade
7. Qual é a principal diferença entre Grid Layout e Flexbox? Cite pelo menos uma semelhança
(há várias respostas).
8. Crie o modelo de grade para o layout mostrado na FIGURA 16-50 usando

grid-template-rows e grid-template-columns.
Escreva novamente, desta vez usando a propriedade abreviada de grade .
Sempre duas vezes a

300px largura da coluna direita flexível
12em
Pelo
menos a
altura
do conteúdo
100px
FIGURA 16-50. Crie o modelo de grade para esta estrutura de grade.

Teste-se
9. Combine as seguintes declarações de estilo com os itens de grade com letras na FIGURA
16-51. Além da numeração automática, algumas das linhas de grade foram nomeadas,
conforme rotuladas.
uma. _________
grid-row-start: 1; final
da linha da grade: 3;
grid-coluna-início: 3; final
da coluna da grade: 7;
b. _________
área da grade: 2 / 2 / span 4 / 3;
c. _________
área de grade: bowie;
d. _________
linha de grade: -2 / -1;
coluna-grade: -2 / -1;
e. _________
grid-row-start: george;
grid-row-end: ringo;
grid-column-start: paul;
grid-column-end: john;
Paulo João Bowie-start ponta-de-lança
Jorge
anel
Bowie-start
ponta-de-lança
FIGURA 16-51. Combine os exemplos de estilo com os itens nesta grade.

Revisão de CSS: Propriedades de layout
10. Escreva uma regra de estilo que adicione 1em de espaço entre as colunas em um contêiner
de grade chamado #gallery.
11. Combine as tarefas com as declarações.
uma. justificar-se: fim;
b. align-items: fim;
c. alinhar-conteúdo: centro;
d. alinhar-se: esticar;
e. justificar-itens: centro;
_____ Faça um determinado item esticar para encher seu recipiente.

_____ Posicione uma imagem na borda direita de sua área de grade (em um idioma de
leitura da esquerda para a direita).
_____ Centralize toda a grade verticalmente em seu recipiente.
_____ Empurre todas as imagens em uma grade para a parte inferior de suas respectivas
células.
_____ Centralize todos os itens em suas áreas horizontalmente.
REVISÃO CSS: PROPRIEDADES DE LAYOUT
Aqui estão as propriedades abordadas neste capítulo, classificadas nas seções Flexbox e Grid e
se elas se aplicam ao contêiner ou item.
Propriedades do Flexbox
Propriedades do contêiner flexível
exibição: flexível Ativa o modo flexbox e torna o elemento um contêiner flexível
direção flexível
Indica a direção em que os itens são colocados no contêiner
flexível
envoltório flexível Especifica se os itens flexíveis são forçados em uma única

linha ou agrupados em várias linhas
fluxo flexível
Propriedade abreviada para flex-direction e flex-wrap
justificar-conteúdo Especifica como o espaço é distribuído entre e ao redor dos

itens no eixo principal
alinhar-conteúdo Alinha linhas flexíveis dentro do contêiner flexível quando há

espaço extra no eixo cruzado
itens de alinhamento Especifica como o espaço é distribuído em torno dos itens no

eixo cruzado

Propriedades do item flexível
alinhar-se Especifica como um item é alinhado no eixo cruzado (substitui itens

de alinhamento)
flexionar
Propriedade abreviada para flex-grow, flex-shrink e flex-basis;
especifica como os itens alteram suas dimensões para caber no espaço
disponível
base flexível Indica o tamanho principal inicial de um item flexível
flex-grow Especifica quanto um item flexível pode crescer quando há espaço

extra no contêiner
flex-shrink Especifica quanto um item flexível pode encolher quando não

há espaço suficiente no contêiner
ordem Indica a ordem usada para colocar os itens em seu contêiner
Propriedades da grade
Propriedades do contêiner de grade
exibição: Define o modo de exibição de um elemento para uma grade

grade | grade em linha contexto
modelo de grade Propriedade abreviada para especificar

áreas de grid-template, grid-template-rows e grid-
template-columns
grid-template-áreas Atribui nomes a áreas na grade
grid-template-colunas Especifica os tamanhos de trilha para as colunas em grades explícitas
grid-template-rows Especifica os tamanhos de trilha para as linhas em grades explícitas
colunas-auto-grade Especifica tamanhos de trilha para colunas geradas

automaticamente
grid-auto-flow Indica a direção e a densidade em que os itens fluem

automaticamente em uma grade
grid-auto-rows Especifica tamanhos de trilha para linhas geradas automaticamente
rede Propriedade abreviada para especificar

grid-template-rows, grid-template-columns e grid-
template-áreas; ou grid-auto-flow,
grid-auto-rows e grid-auto-columns
lacuna na grade Propriedade abreviada para grid-row-gap e grid-column-

gap
grade-coluna-gap Especifica a largura da calha entre as colunas
grid-row-gap Especifica a largura da medianiz entre as linhas
justificar-itens Indica o alinhamento de todos os itens da grade ao longo do eixo

embutido em suas respectivas áreas
justificar-conteúdo Indica o alinhamento das trilhas de grade ao longo do eixo

embutido em seu contêiner

itens de alinhamento Indica o alinhamento de todos os itens em uma grade ao longo

do eixo do bloco dentro de suas respectivas áreas de grade
alinhar-conteúdo Indica o alinhamento das trilhas de grade ao longo do eixo

do bloco no contêiner
Propriedades do item de grade
coluna de grade Propriedade abreviada para especificar

grid-column-start e grid-column-end
final da coluna da grade Indica a linha final da coluna na qual um item deve ser colocado
grid-coluna-início Indica a linha inicial da coluna na qual um item deve ser

colocado
linha de grade Propriedade abreviada para especificar grid-row-start

e grid-row-end
grid-row-end Indica a linha final da linha na qual um item é

ser colocado
grid-row-start Indica a linha inicial da linha na qual um item é

ser colocado
área de grade Atribui um item de grade a uma área nomeada ou a uma

área descrita por suas quatro linhas de grade de limite
alinhar-se Indica o alinhamento de um único item ao longo do eixo do bloco

dentro de sua área de grade
justificar-se Indica o alinhamento de um único item de grade ao longo do

eixo embutido dentro de sua área
ordem Especifica a ordem na qual exibir o item em relação a outros itens

na fonte
índice z Especifica a ordem de empilhamento de um item em relação

a outros itens quando há sobreposição

CAPÍTULO
WEB RESPONSIVA 17
PROJETO
Apresentei o conceito de Web Design responsivo pela primeira vez no Capítulo 3, Alguns NESTE CAPÍTULO
grandes conceitos que você precisa conhecer, e abordamos maneiras de manter todos
O que é RWD e por que é
os tamanhos de tela em mente ao longo deste livro. Neste capítulo, vamos mergulhar mais
importante
fundo nas estratégias e técnicas responsivas.
Apenas para recapitular, o Responsive Web Design (ou RWD) é uma abordagem de design e Layouts fluidos
produção que permite que um site seja visualizado e usado confortavelmente em todos os
Consultas de mídia
tipos de dispositivos. O princípio central é que todos os dispositivos obtêm a mesma fonte
HTML, localizada na mesma URL, mas diferentes estilos são aplicados com base no tamanho Estratégias e padrões de design
da janela de visualização para reorganizar os componentes e otimizar a usabilidade. FIGURA 17-1
Opções de teste
mostra exemplos de sites responsivos como eles podem aparecer em um smartphone, tablet
e desktop, mas é importante ter em mente que esses sites são projetados para funcionar bem
no continuum de cada largura de tela intermediária.
POR QUE RWD?
Desde que o iPhone abalou as coisas em 2007, as pessoas agora visualizam a web em
telefones de todos os tamanhos, tablets, "phablets", laptops com toque, wearables, televisores,
consoles de videogame, geladeiras e quem sabe o que mais pode estar por vir abaixo da
linha.
Em 2016, o uso de internet móvel ultrapassou o uso de desktop – um marco importante. A

porcentagem de tráfego da Web que vem de dispositivos que não sejam navegadores de
desktop está aumentando constantemente. Para cerca de 10% dos americanos, um
smartphone ou tablet é o único acesso à internet devido à falta de acesso a um computador
ou Wi-Fi de alta velocidade no trabalho ou em casa.* Os usuários mais jovens podem optar
apenas por dispositivos móveis. Além disso, a grande maioria de nós acessa o
*
Pew Research Center, “Uso de smartphones em 2015”, www.pewinternet.org/2015/04/01/us-smart phone-use-
in-2015/.
485
A receita responsiva
Um evento à parte O Globo de Boston Biblioteca Pública de Warwick

aneventapart.com bostonglobe. com warwicklibrary.org
NOTA FIGURA 17-1. Exemplos de sites responsivos que se adaptam a telas pequenas, médias e grandes
e todos os tamanhos intermediários.
Cada site na FIGURA 17-1 tem um design de
transformação, não três layouts distintos.

Alguns sites têm um número limitado de layouts web de várias plataformas (telefone, tablet, computador) ao longo do dia. E adivinhe,
voltados para dispositivos específicos, que é esperamos ter uma experiência semelhante usando seu conteúdo ou serviço,
uma abordagem conhecida como Adaptive independentemente de como acessamos seu site.
Design.
É aí que o RWD se encaixa. Com uma fonte, você garante que os visitantes móveis
recebam o mesmo conteúdo que outros visitantes (embora possa ser organizado de forma
diferente). Os usuários não são penalizados com conteúdo ou recursos reduzidos apenas
porque estão usando um smartphone. E para os visitantes que podem começar a usar seu
site em um dispositivo e terminá-lo em outro, você pode garantir uma experiência
consistente.
O design responsivo
está se tornando a maneira Na verdade, para muitos web designers, “design responsivo” agora é apenas “web design”.
padrão de criar um site que Em vez de uma abordagem de nicho, está se tornando a maneira padrão de criar um site
que atenda às demandas do nosso ambiente atual de vários dispositivos.
atenda às demandas do nosso
ambiente multidispositivo
atual.
A RECEITA RESPONSIVA
O dilúvio de dispositivos móveis habilitados para web inicialmente causou ondas de choque
na comunidade de web design. Acostumados a projetar exclusivamente para grandes telas
de desktop, não tínhamos certeza de como poderíamos acomodar telas que cabem na
palma da sua mão.

Uma solução foi contar com a funcionalidade de exibição da Web integrada do telefone.
Por padrão, os dispositivos móveis exibem uma página da Web inteira reduzida para caber em
qualquer espaço de tela disponível. Os usuários podem beliscar para ampliar os detalhes e rolar
para várias partes da página. Embora isso funcione tecnicamente, está longe de ser uma
experiência ideal. Outra abordagem foi criar um site móvel separado apenas para telas pequenas
e pessoas “em movimento”. Ainda existem muitas empresas e serviços que usam sites móveis
dedicados (“m-dot”) – Twitter e Facebook vêm à mente – mas, em geral, os sites m-dot estão
desaparecendo em favor do RWD. O Google está ajudando no processo ao favorecer sites
responsivos com URLs únicos em vez de m. ou móvel. versões.
NOTA
Em 2010, Ethan Marcotte deu nome a outra solução mais flexível em seu artigo “Responsive Sites móveis foram discutidos ao lado
Web Design” (alistapart.com/article/responsive-web design), que desde então se tornou uma bar “M-dot Sites” no Capítulo 3.
pedra angular do web design moderno. Neste capítulo, seguirei os “ingredientes” para RWD que
Ethan descreve em seu livro Responsive Web Design (A Book Apart).
A técnica tem três componentes principais:
Uma grade flexível
Em vez de permanecer em uma largura estática, os sites responsivos usam métodos que
permitem que eles se comprimam e fluam para o espaço disponível do navegador.
Imagens flexíveis
Imagens e outras mídias incorporadas precisam ser dimensionadas para caber em seus
elementos contidos.
consultas de mídia CSS
As consultas de mídia nos permitem fornecer conjuntos de regras apenas para dispositivos
que atendem a determinados critérios, como largura e orientação.
A essa lista de ingredientes, eu adicionaria o elemento meta viewport , que faz com que a largura
da página da web corresponda à largura da tela. É aí que começaremos nosso tour pela
mecânica do RWD.
Configurando a janela de visualização
Para ajustar sites padrão em telas pequenas, os navegadores móveis renderizam a página em
uma tela chamada viewport e, em seguida, reduzem essa viewport para caber na largura da tela
(largura do dispositivo). Por exemplo, em iPhones, o Safari móvel define a largura da janela de
visualização para 980 pontos (consulte a Nota), de modo que uma página da Web é renderizada NOTA
como se estivesse em uma janela de navegador de desktop definida para 980 pixels de largura.
Os layouts do iOS são medidos em pontos,
Essa renderização é reduzida para a largura da tela (variando de 320 a 414 pontos, dependendo uma unidade de medida independente do
do modelo do iPhone), acumulando muitas informações em um espaço minúsculo. número de pixels que compõem a tela
física. Pontos e pixels de dispositivo são
discutidos com mais detalhes no Capítulo
O Mobile Safari introduziu o meta elemento da janela de visualização, que nos permite definir o
23, Noções básicas de imagens da Web.
tamanho dessa janela de visualização inicial. Logo, os outros navegadores móveis seguiram o
exemplo. O seguinte elemento meta , que vai na cabeça do HTML
17. Web Design Responsivo 487

document, diz ao navegador para definir a largura da janela de visualização igual à largura da tela
do dispositivo (width=device-width), seja o que for (FIGURA 17-2). O valor de escala inicial
define o nível de zoom para 1 (100%).
FATO ENGRAÇADO
<meta name="viewport" content="width=device-width, initial-scale=1">
As consultas de mídia estão sempre em
funcionamento, mesmo após o carregamento
Com o elemento meta da janela de visualização no lugar, se a tela do dispositivo tiver 320 pixels
inicial da página. Se a janela de visualização de largura, a janela de visualização de renderização nesse dispositivo também terá 320 pixels de
mudar, por exemplo, se um usuário mudar a largura (não 980) e aparecerá na tela em tamanho real. Essa é a largura que testamos com
orientação de um telefone de retrato para paisagem
consultas de mídia, portanto, definir a janela de visualização é um primeiro passo crucial.
ou redimensionar uma janela do navegador da área de trabalho,
a consulta é executada novamente e aplica os
Por padrão, a janela de visualização Com a meta tag viewport, a viewport é criada no
estilos apropriados para a nova largura.
diminui para o tamanho da tela. mesmo tamanho da tela.
<meta name="viewport"
content="width=device-width, initial-
scale=1">
AVISO
janela de visualização = 980pt janela de visualização = 320pt
O elemento meta viewport também permite o
atributo maximum-scale . Defini-lo como 1 (escala
máxima=1) evita que os usuários ampliem a
página, mas é altamente recomendável que você
evite fazer isso porque o redimensionamento é
importante para acessibilidade e usabilidade.
tela = 320pt tela = 320pt
FIGURA 17-2. O elemento meta da janela de visualização corresponde à resolução da janela de

visualização do navegador do dispositivo com a resolução de sua tela.
Grades Flexíveis (Layouts Fluidos)

Nas discussões sobre Flexbox e Grid no capítulo anterior, vimos exemplos de itens expandindo e
contraindo para preencher o espaço disponível de seus contêineres. Essa fluidez é exatamente o
tipo de comportamento que você precisa para fazer o conteúdo se encaixar perfeitamente em
uma ampla variedade de tamanhos de janela de visualização. Layouts fluidos (ou “grades
flexíveis”, como Ethan Marcotte os chama em seu artigo e livro) são a base do design responsivo.

Em um layout fluido, a área da página e sua grade são redimensionadas proporcionalmente para
preencher a largura disponível da tela ou janela (FIGURA 17-3, superior). Isso é facilmente realizado Convertendo Pixels para
com unidades fr e minmax() em layouts CSS Grid e com flex Porcentagens
configurações de propriedade no Flexbox. Se você também precisar segmentar navegadores mais
Para converter medidas em seu layout de
antigos que não suportam padrões de layout CSS, você pode usar valores percentuais para medidas
pixels para porcentagens, use a seguinte
horizontais para que os elementos permaneçam proporcionais em tamanhos variados (consulte a fórmula:
barra lateral “Convertendo Pixels em Porcentagens”).
destino ÷ contexto = resultado
No passado, quando sabíamos que todos estavam olhando nossos sites em monitores de desktop, O destino é o tamanho do elemento que você
os layouts de largura fixa eram a norma. ( Ahh, aqueles dias simples pré-móvel em que só está redimensionando. O contexto é o
tamanho do elemento que o contém. O
precisávamos lidar com suporte de navegador radicalmente incompatível ! ) pixels sendo bastante
resultado é uma porcentagem que você pode
elegantes (veja Nota). Especificar todas as medidas em valores de pixel deu aos designers o controle
usar em suas regras de estilo. Não se
sobre o layout que eles podem ter na impressão e garantiu que os usuários em todas as plataformas
preocupe em arredondar longas strings decimais para baixo.
e navegadores tivessem uma renderização semelhante, se não a mesma, da página. Os navegadores sabem o que fazer com eles,
e a precisão extra não faz mal.
Os layouts fluidos preenchem a viewport proporcionalmente.
NOTA
Os designers chegaram a 960 pixels de largura

como largura de página padrão porque
preenchiam a largura padrão da área de trabalho
na época (1.028 pixels) e eram facilmente
divididos em colunas iguais. Sistemas de layout
w3c.org de página baseados em grades de 12 colunas

dentro da página de 960 pixels também eram populares.
Os layouts fixos permanecem do mesmo tamanho e podem ser cortados ou deixar espaço extra.
P ERSON AL A NECDOT E
Quando comecei no web design em 1993,

o tamanho de monitor de PC mais comum
kexp.org
era de míseros 640 × 480 pixels, a menos
que você fosse um designer de calças
FIGURA 17-3. Exemplos de layout fluido e fixo. extravagantes com uma tela de 800 × 600.
Meus primeiros designs tinham uma largura
Não demorou muito para perceber, no entanto, que seria impossível criar designs separados de fixa de adoráveis 515 pixels.
largura fixa adaptados a cada tamanho de dispositivo. Claramente, a fluidez tem a vantagem. É
baseado na natureza intrínseca do fluxo normal, então estamos trabalhando com o meio aqui e não
contra ele. Quando o layout refluir para preencher a largura disponível, você não precisa se preocupar
com barras de rolagem horizontais ou espaço vazio estranho no navegador.
No lado negativo, os layouts fluidos podem permitir que os comprimentos das linhas de texto se
tornem desconfortavelmente longos, de modo que é algo a ser observado. Entraremos em mais
detalhes sobre layouts mais adiante neste capítulo.

Como tornar as imagens flexíveis
De vez em quando uma solução é simples. Veja, por exemplo, a regra de estilo necessária para
fazer com que as imagens sejam reduzidas para caber no tamanho de seu contêiner:
img {
largura máxima: 100%;
}
É isso! Quando o layout fica menor, as imagens nele são reduzidas para caber na largura de
seus respectivos contêineres. Se o contêiner for maior que a imagem — por exemplo, nos
layouts de tablet ou desktop — a imagem não será maior; ele pára em 100% de seu tamanho
original (FIGURA 17-4). Ao aplicar a propriedade max-width , você pode omitir os atributos
largura e altura nos elementos img no documento HTML. Se você definir o atributo de largura ,
certifique-se de que o atributo de altura esteja definido como automático; caso contrário, a
imagem não será dimensionada proporcionalmente.
img { largura máxima: 100%, }
FIGURA 17-4. Definir a largura máxima das imagens em linha permite que elas encolham para caber no
espaço disponível, mas não aumentem mais do que o tamanho real.
Imagens responsivas
Mas espere, as coisas nunca são tão simples, certo? Se você se lembrar de nossa discussão
sobre imagens responsivas no Capítulo 7, Adicionando imagens, você se lembrará de que é
necessário um pouco de esforço para evitar fornecer imagens desnecessariamente grandes
para dispositivos pequenos, bem como garantir que monitores grandes e de alta densidade
recebam imagens de alta resolução que brilham. Escolher o melhor tamanho de imagem para
desempenho faz parte do processo de design responsivo, mas não vamos nos concentrar nisso
neste capítulo. Temos peixes maiores para fritar!
Outras mídias incorporadas
Vídeos e outras mídias incorporadas (usando objetos ou elementos incorporados ) também

precisam ser reduzidos em um ambiente responsivo. Infelizmente, os vídeos não mantêm suas
proporções intrínsecas quando a largura é reduzida.

mais alguns aros para saltar para obter bons resultados. Thierry Koblentz
documenta bem uma estratégia em seu artigo “Creating Intrinsic Ratios for Video”
em www.alistapart.com/articles/creating-intrinsic-ratios-for-video. Há também um
plug-in JavaScript chamado FitVids.js (criado por Chris Coyier e o pessoal da
Paravel) que automatiza a técnica de Koblentz para vídeos de largura fluida. Está
disponível em fitvidsjs.com.
Magia de consulta de mídia
Agora chegamos à verdadeira carne do design responsivo – consultas de mídia!

As consultas de mídia aplicam estilos diferentes com base nas características do
navegador: largura, orientação vertical ou horizontal, resolução e muito mais. Eles
são o que tornam possível enviar um layout de uma coluna para telas pequenas e
um layout de várias colunas para telas maiores em tempo real.
A consulta em si inclui um tipo de mídia seguido por um recurso específico e um

valor para testar. Os critérios são seguidos por um conjunto de chaves que contêm
estilos a serem aplicados se o teste for aprovado. A estrutura de uma consulta de
mídia usada em uma folha de estilo é assim:
@media tipo e (recurso: valor) {
/* estilos para navegadores que atendem a este critério */
}
Vamos esclarecer isso com um exemplo. As consultas de mídia a seguir verificam

se a janela de visualização está em uma tela e na orientação paisagem (horizontal)
ou retrato (vertical). Quando a consulta detecta que a viewport está no modo
paisagem, a cor de fundo da página é “skyblue”; quando está na orientação retrato,
o fundo é “coral” (FIGURA 17-5). Se isso fosse exibido em um smartphone que
inclinasse da vertical para a horizontal e vice-versa, as cores mudariam à medida
que ele se inclinasse. Essa não é uma opção de design muito prática, mas fornece
uma ilustração muito simples das consultas de mídia em funcionamento.
@media tela e (orientação: paisagem) {
corpo {
fundo: céu azul;
}
}
@media tela e (orientação: retrato) {
corpo {
fundo: coral;
}
}
ATENÇÃO
Ter chaves de declaração de estilo aninhadas dentro de chaves de consulta Quando a viewport está no Quando a janela de
modo retrato, a cor de visualização está no modo
de mídia pode ser um pouco confuso. Certifique-se de ter o número certo de
fundo é “coral”. paisagem, a cor de fundo é “azul celeste”.
chaves e aninhe-os corretamente.
O recuo cuidadoso é útil. Muitos programas de edição de código também FIGURA 17-5. Alterando a cor do plano de fundo com base na
usam codificação de cores para ajudá-lo a mantê-los corretos. orientação da viewport com consultas de mídia.

Tipos de mídia
Os tipos de mídia, conforme incluídos na primeira parte de uma consulta, foram introduzidos
no CSS2 como uma forma de direcionar estilos para uma mídia específica. Por exemplo, esta
regra @media fornece um conjunto de estilos apenas quando o documento é impresso (não
testa nenhum recurso ou valor específico):
@media impressão {
/* estilos específicos de impressão aqui */
}
Os tipos de mídia definidos mais atuais são todos, impressão, tela e fala
(ver Nota). Se você estiver projetando para tela, o tipo de mídia é opcional, então você pode
omiti-lo conforme mostrado no exemplo de sintaxe mostrado aqui, mas incluí-lo não faz mal.
Incluirei o tipo de mídia de tela para maior clareza em meus exemplos.
@media (recurso: valor) {

}
NOTA
CSS2 também definiu aural, handheld, braille, embossed, projeção, tty e tv, mas eles foram preteridos
nas últimas especificações do Media Queries Level 4 (atualmente um Working Draft) e são desencorajados
de uso.
Consultas de recursos de mídia
As consultas de mídia CSS3 levam o direcionamento um passo adiante, permitindo que

testemos um recurso específico de uma janela de visualização ou dispositivo. Vimos um
exemplo de teste da orientação de um dispositivo na FIGURA 17-5. O recurso mais comum
para testar é a largura da janela de visualização. Você também pode testar uma largura mínima
(largura mínima) e largura máxima (largura máxima).
Aqui está um exemplo simples que exibe fontes de título em uma fonte cursiva sofisticada
apenas quando a janela de visualização é 40em ou mais larga - ou seja, quando há espaço
suficiente para a fonte ser legível. As viewports que não correspondem à consulta (porque são
mais estreitas que 40em) usam uma face serif simples.
DICA AUT HO RING
h1 {
As consultas de largura mínima são sua família de fontes: Georgia, serifa;
escolha para criar um design responsivo }
para dispositivos móveis.
@media screen e (min-width: 40em) {
h1 {
font-family: 'Lobster', cursiva;
}
}
A lista completa de recursos do dispositivo que você pode detectar com consultas de mídia
aparece na TABELA 17-1.

TABELA 17-1. Recursos de mídia que você pode avaliar com consultas de mídia
Característica Descrição
largura A largura da área de exibição (viewport). Também largura mínima e largura máxima .
altura A altura da área de exibição (viewport). Também min-height e max-height.
orientação Se o dispositivo está na orientação retrato ou paisagem .
proporção da tela Proporção da largura da janela de visualização dividida pela altura (largura/altura).
Exemplo: proporção de aspecto: 16/9.
cor A profundidade de bits da exibição; por exemplo, color: 8 testa se o dispositivo tem pelo menos
8 bits de cor.
índice de cores O número de cores na tabela de pesquisa de cores.
monocromático O número de bits por pixel em um dispositivo monocromático.
resolução A densidade de pixels no dispositivo. Isso é cada vez mais relevante para a detecção de telas de alta resolução.
Varredura
Se um tipo de mídia de TV usa varredura progressiva ou entrelaçada.
(Não aceita prefixos min-/max- .)
rede Se o dispositivo usa uma exibição baseada em grade, como uma janela de terminal.
(Não aceita prefixos min-/max- .)
Recursos obsoletos Os
recursos a seguir foram obsoletos no Rascunho de trabalho do nível 4 do Media Queries e são desencorajados de uso.
largura do dispositivo A largura da superfície de renderização do dispositivo (a tela inteira).

(Preterido em favor da largura.)
altura do dispositivo A altura da superfície de renderização do dispositivo (a tela inteira).

(Preterido em favor da altura.)
device-aspect-ratio Relação entre a largura e a altura da tela inteira (superfície de renderização).

(Desaprovado em favor da proporção de aspecto.)
Novo no nível 4 do Media Queries
Esses recursos foram adicionados no rascunho de trabalho do MQ4. Alguns podem ganhar suporte ao navegador e alguns podem ser retirados de
rascunhos futuros. Eu os incluo aqui para mostrar a você onde o W3C vê as consultas de mídia. Para obter detalhes, consulte drafts.csswg.org/
mediaqueries-4.
frequência de atualização Com que rapidez (se for o caso) o dispositivo de saída modifica a aparência do conteúdo.
bloco de estouro Como o dispositivo lida com o conteúdo que transborda da viewport ao longo do eixo do bloco.
estouro em linha Se o conteúdo que transborda da janela de visualização ao longo do eixo embutido pode ser rolado.
ponteiro de O intervalo aproximado de cores suportado pelo agente do usuário e pelo dispositivo de saída.
gama de cores Se o mecanismo de entrada principal é um dispositivo apontador e quão preciso ele é.
flutuar Se o mecanismo de entrada permite que o usuário passe o mouse sobre os elementos.
qualquer ponteiro Se algum mecanismo de entrada disponível é um dispositivo apontador e quão preciso ele é.
qualquer pairar Se algum mecanismo de entrada disponível permite pairar.

Como usar consultas de mídia

Você pode usar consultas de mídia em uma folha de estilo ou carregar condicionalmente folhas
de estilo externas. As consultas de mídia não podem ser usadas com estilos embutidos.
Dentro de uma folha de estilo
A maneira mais comum de utilizar consultas de mídia é usar uma regra @media (“at media”)
diretamente na folha de estilo. Os exemplos neste capítulo até agora são todas as regras @media .
Quando você usa consultas de mídia em uma folha de estilo, a ordem das regras é muito importante.
Como as regras posteriores na folha de estilo substituem as regras que vêm antes delas, sua
consulta de mídia precisa vir depois de quaisquer regras com a mesma declaração.
A estratégia é especificar os estilos de linha de base que servem como padrão e, em seguida,
substituir regras específicas conforme necessário para otimizar para ambientes de visualização
alternativos. No RWD, a prática recomendada é configurar estilos para telas pequenas e
navegadores que não oferecem suporte a consultas de mídia e, em seguida, introduzir estilos para
telas cada vez maiores posteriormente na folha de estilos.
Foi exatamente o que fiz no exemplo de troca de fonte do título anterior. O h1 define uma
experiência básica com uma fonte serif local e, em seguida, é aprimorado para telas maiores com
uma consulta de mídia.
Com folhas de estilo externas
Para sites grandes ou complicados, os desenvolvedores podem optar por colocar estilos para
dispositivos diferentes em folhas de estilo separadas e chamar todo o arquivo .css quando certas
condições forem atendidas. Um método é usar o atributo media no elemento link para carregar
condicionalmente arquivos .css separados . Neste exemplo, os estilos básicos de um site são
solicitados primeiro, seguidos por uma folha de estilos que será usada apenas se o dispositivo tiver
mais de 1.024 pixels de largura (e se o navegador suportar consultas de mídia):
<cabeça>
<link rel="stylesheet" href="styles.css">

<link rel="stylesheet" href="2column-styles.css" media="screen and (min-
width:1024px)">
</head>
Alguns desenvolvedores acham esse método útil para gerenciar folhas de estilo modulares, mas
ele vem com a desvantagem de exigir solicitações HTTP extras para cada arquivo .css adicional.
Certifique-se de fornecer apenas quantos links forem necessários (talvez um para cada ponto de
interrupção principal) e confie nas regras @media nas folhas de estilo para fazer pequenos ajustes
nos tamanhos intermediários.
Da mesma forma, você pode realizar consultas de mídia com regras @import que extraem folhas
de estilo externas de dentro de uma folha de estilo. Observe que a palavra “mídia” não aparece
nessa sintaxe, apenas o tipo e a consulta.

Escolhendo pontos de interrupção
<estilo>
@import url("/default-styles.css");
@import url("/wide-styles.css") tela e (min-width: 1024px);
/* outros estilos */
</style>
Não podemos encerrar uma discussão sobre consultas de mídia sem uma referência ao suporte
do navegador. A boa notícia é que as consultas de mídia são suportadas por praticamente todos
os navegadores de desktop e móveis em uso atualmente. As grandes exceções são as versões
8 e anteriores do Internet Explorer, que não têm suporte. Devido ao poder de permanência do
sistema operacional Windows XP, o IE8 continua aparecendo nas estatísticas de uso do
navegador (em 1–2% enquanto escrevo, à frente do IE 9 e 10). Se o seu site tem centenas de
milhares de usuários, esse 1% acaba sendo um número significativo de experiências quebradas.
Se você espera receber visitantes usando versões antigas do IE, você tem algumas opções.
Primeiro, você pode usar o polyfill Respond.js, que adiciona suporte para largura mínima e
largura máxima para navegadores não compatíveis. Foi criado por Scott Jehl e está disponível
em github.com/scottjehl/Respond.
A outra opção é criar uma folha de estilo separada com um layout de área de trabalho sem
frescuras e entregá-la apenas aos usuários com IE8 ou anterior usando um comentário
condicional. Outros navegadores ignoram o conteúdo deste comentário específico do IE:

Dependendo das estatísticas do seu site e quando você estiver lendo isso, talvez você não
precise se preocupar com o suporte a consultas de mídia. Sortudo!
ESCOLHENDO PONTOS DE INTERRUPÇÃO
Um ponto de interrupção é o ponto em que usamos uma consulta de mídia para introduzir uma
mudança de estilo. Quando você especifica min-width: 800px em uma media query, você está Um ponto de interrupção é
dizendo que 800 pixels é o “ponto de interrupção” no qual esses estilos específicos devem ser uma largura na qual você
usados. A FIGURA 17-6 mostra alguns dos pontos de interrupção nos quais o Etsy.com faz introduz uma alteração de estilo.
grandes mudanças de layout e ajustes sutis de design em sua página inicial.
Escolher pontos de interrupção pode ser um desafio, mas há algumas práticas recomendadas
a serem lembradas.
Quando o RWD foi introduzido pela primeira vez, havia apenas um punhado de dispositivos
para se preocupar, então tendíamos a basear nossos pontos de interrupção nos tamanhos
comuns de dispositivos (320 pixels para smartphones, 768 pixels para iPads e assim por diante),
e criamos um projeto separado para cada ponto de interrupção. Não demorou muito até termos
que lidar com larguras de dispositivos em quase todos os pontos, de 240 a 3.000 pixels. Essa
abordagem baseada em dispositivo definitivamente não escalou.

No ponto de Em 501 pixels, “Vender” Em 640 pixels, as imagens e

interrupção de 480 se torna “Vender no mensagens “Como funciona o Etsy” se
pixels, a navegação Etsy” (um ajuste muito movem acima das categorias. Em
da categoria muda de sutil). Você também pode visualizações menores, eles eram
uma lista para fotos. ver mais links na barra de acessíveis por meio do link “Saiba
navegação no campo de como o Etsy funciona” em uma barra
"Registrar" é pesquisa. amarela.
adicionado à barra de
navegação superior.
Em 901 pixels, o formulário de entrada de Em 981 pixels, a palavra “Cart” aparece sob o ícone do carrinho de
pesquisa se move para o cabeçalho superior. compras. Agora vemos a lista completa de opções de navegação
no cabeçalho (sem link “Mais”).
Nesse ponto, o layout se expande para preencher janelas
maiores até atingir sua largura máxima de 1400 pixels. Em
seguida, as margens adicionam espaço igualmente no arquivo e

na direita para manter o layout centralizado.
FIGURA 17-6. Uma série de pontos de interrupção usados pelo site responsivo do Etsy (2017).

Pontos de interrupção baseados em módulo
Uma abordagem melhor é criar pontos de interrupção para as partes individuais de uma página, em
É comum criar
vez de alternar a página inteira de uma só vez (embora para algumas páginas isso possa funcionar
bem). Uma prática comum é criar primeiro o design para telas estreitas e, em seguida, redimensionar pontos de interrupção para
o navegador mais amplo e prestar atenção ao ponto em que cada parte da página começa a se cada componente da página em
tornar inaceitável. A navegação pode se tornar muito complicada e precisar de um ponto de vez de alterar a página inteira de
interrupção com 400 pixels de largura, mas o layout de uma coluna pode ser bom até atingir 800 uma só vez.
pixels, ponto em que um design de duas colunas pode ser introduzido.
Em seu livro Responsive Design: Patterns & Principles (A Book Apart), Ethan
Marcotte chama esse design de “saída de conteúdo” e o coloca assim:
Para mim, esse processo de “saída de conteúdo” começa olhando para a menor versão
de um conteúdo, então expandindo esse elemento até que suas costuras comecem a
aparecer e ele comece a perder sua forma. Quando isso acontecer, é uma oportunidade
de fazer uma mudança — introduzir um ponto de interrupção que reformule o elemento
e preserve sua integridade.
Se você achar que tem muitos pontos de interrupção dentro de alguns pixels ou ems um do outro,
agrupá-los pode agilizar sua folha de estilo e processo. E não faz mal manter os tamanhos de tela
dos dispositivos mais populares em mente, caso reduzir um pouco seu ponto de interrupção ajude a
melhorar a experiência de toda uma classe de usuários. O site Screen Sizes (screensiz.es) lista as
dimensões de uma ampla gama de dispositivos populares. Uma pesquisa na web mostrará recursos
semelhantes.
Pontos de interrupção baseados em Em
Os exemplos nesta seção foram baseados em pontos de interrupção com medições de pixel. Um
método alternativo, e muitos diriam melhor, é usar ems em vez de pixels na consulta de mídia. As consultas de mídia baseadas
Lembre-se que um em é igual ao tamanho da fonte atual de um elemento. Quando usado em uma em Em mantêm o layout
consulta de mídia, um em é baseado no tamanho da fonte base do documento (16 pixels por padrão, proporcional ao tamanho da fonte.
embora isso possa ser alterado pelo usuário ou pelo autor da página).
As consultas de mídia baseadas em pixels não se adaptam se o usuário alterar as configurações

de tamanho da fonte, o que as pessoas fazem para poder ler a página com mais facilidade. Mas as
consultas de mídia baseadas em em respondem ao tamanho do texto, mantendo o layout da página
em proporção.
Por exemplo, digamos que você tenha um layout que mude para duas colunas quando a página
atingir 800 pixels. Você a projetou para que a coluna principal tenha um comprimento de linha de
texto ideal quando o tamanho da fonte base for o padrão de 16 pixels. Se o usuário alterar o tamanho
da fonte base para 32 pixels, esse texto de tamanho duplo será despejado em um espaço destinado
ao texto com metade do tamanho. Comprimentos de linha seriam estranhos.
Usando consultas baseadas em em, se a consulta for direcionada a navegadores com mais de
50em, quando o tamanho da fonte base for 16 pixels, a troca ocorrerá em 800 pixels (conforme projetado).

No entanto, se o tamanho da fonte base mudar para 32 pixels, o layout de duas colunas
começará a 1.600 pixels (50em × 32px = 1.600px), quando houver bastante espaço
para o texto preencher a coluna principal com a mesma linha comprimentos como o
projeto original.
Este exemplo usou uma opção de layout de página inteira, mas consultas de mídia em
componentes individuais (como discutido anteriormente) também podem usar ems. Na
próxima seção, apresentarei alguns dos aspectos das páginas da Web que requerem
atenção ao escolher pontos de interrupção.
Qual é a largura da viewport?

Eu sugeri tornar seu navegador mais largo até você ver que um ponto de interrupção é necessário, mas como você sabe a largura da
janela? Existem várias ferramentas que fornecem medições de janela.
Firefox, Chrome e Safari têm ferramentas que podem mostrar como uma página é exibida em dimensões específicas da janela
de visualização. No modo responsivo (ou exibição), você obtém uma janela em uma janela redimensionável que pode ser definida
para tamanhos de dispositivo padrão ou redimensionada manualmente.
As dimensões em pixels são exibidas à medida que a janela de visualização é redimensionada.
No Firefox, acesse o Modo de Design Responsivo (FIGURA 17-7) através das Ferramentas do Desenvolvedor Web (Ferramentas
ÿ Desenvolvedor Web ÿ Modo de Design Responsivo). O modo de design responsivo do Safari pode ser acessado via Desenvolver
ÿ Entrar no modo de design responsivo. O Chrome oferece uma barra de ferramentas do dispositivo (Exibir ÿ Desenvolvedor ÿ
Ferramentas do desenvolvedor e, em seguida, procure o ícone Alternar barra de ferramentas do dispositivo à esquerda da barra de
menus). Todos eles funcionam da mesma forma, mas você pode achar que prefere a interface de usuário de um navegador em
detrimento de outro.
Para descobrir como a janela do seu navegador ou dispositivo responde às consultas de mídia, acesse MQTest.io (mqtest.io) de
Viljami Salminen. Além da largura e altura da janela de visualização, ele relata outros recursos do dispositivo, como proporção de pixel
do dispositivo, proporção de aspecto e muito mais.
O modo de design responsivo no Firefox MQTest.io é uma página da web que

mostra as dimensões exatas em pixels de sua janela informa como seu navegador responde
de visualização. Possui atalhos para redimensioná- a consultas de mídia, incluindo largura.
lo para dimensões comuns do dispositivo. O Chrome
e o Safari têm visualizações responsivas semelhantes.
FIGURA 17-7. Verificando o tamanho da janela de visualização no modo de design responsivo do Firefox e
no MQTest.io.

Projetando com Responsividade
PROJETO RESPONSIVO
Cobrimos os detalhes básicos do RWD – agora vamos falar sobre algumas das decisões que os
designers tomam ao criar sites responsivos. Eu só serei capaz de arranhar a superfície aqui, mas você
encontrará explorações muito mais profundas sobre esses temas nos livros e artigos listados ao longo
do caminho. Por enquanto, só quero aumentar sua conscientização sobre estratégias responsivas. No
final da seção, você usará algumas dessas estratégias para tornar a página da Black Goose Bakery
responsiva.
Vimos alguns exemplos em nossos exercícios de conteúdo que parece instável quando o navegador
fica muito estreito ou muito largo. Um layout de três colunas simplesmente não cabe, e o texto em uma
imagem pode ficar ilegível quando é reduzido para caber em uma tela de 320 pixels. Na outra
extremidade do espectro, o comprimento da linha em layouts de coluna única se torna muito longo para
ler confortavelmente quando a janela de visualização preenche um monitor de desktop de alta
resolução. Para muitos aspectos de uma página da Web, um tamanho não serve para todos. Como
designers, precisamos prestar atenção em onde as coisas desmoronam e definir pontos de interrupção
para “preservar a integridade” dos elementos (como Ethan Marcotte coloca tão bem).
No mais amplo dos traços, os bits complicados para manter otimizados em uma ampla variedade de
tamanhos de janela de visualização incluem o seguinte:
• Hierarquia de conteúdo
• Disposição
• Tipografia
• Navegação
• Imagens
• Conteúdo especial, como tabelas, formulários e recursos interativos
Hierarquia de conteúdo
O conteúdo é rei na web, por isso é fundamental que o conteúdo seja cuidadosamente considerado e
organizado antes que qualquer código seja escrito. Essas são tarefas para arquitetos de informação e
estrategistas de conteúdo que abordam os desafios de organizar, rotular, planejar e gerenciar conteúdo
da web.
A organização e a hierarquia em várias visualizações do site são uma preocupação principal, com foco
particular na experiência de tela pequena. É melhor começar com um inventário de conteúdo potencial
e reduzi-lo ao que é mais útil e importante para todas as experiências de navegação. Depois de saber
quais são os módulos de conteúdo, você pode começar a decidir em que ordem eles aparecem em
vários tamanhos de tela.
Lembre-se de que você deve buscar a paridade de conteúdo, ou seja, a noção de que o mesmo
conteúdo é acessível independentemente do dispositivo usado para acessar o

local. Pode ser que os visitantes precisem seguir um caminho de navegação ligeiramente diferente
para essas informações, mas soltar partes do seu site em telas pequenas porque você acha que
os usuários de dispositivos móveis não precisarão disso é um pensamento falso. As pessoas
Carregamento condicional alternam entre dispositivos no meio da tarefa e você quer ter certeza de que elas têm tudo o que
precisam.
A paridade de conteúdo não significa que
todo o conteúdo que cabe em uma tela
Esta é uma introdução lamentavelmente breve para o que talvez seja o primeiro passo mais
grande deve ser colocado no layout de tela
importante da criação de um site, mas está fora do foco deste livro. Para se familiarizar
pequena. Toda essa rolagem e dados extras
para download não são adequadamente com a estratégia de conteúdo, principalmente no que se aplica ao RWD, recomendo
fazendo favores aos usuários móveis. os seguintes livros:
Uma abordagem melhor é usar

• Estratégia de Conteúdo para a Web, 2ª Edição, por Kristina Halvorson e
o carregamento condicional, no qual os
Melissa Rich (Novos Cavaleiros)
usuários de tela pequena obtêm o conteúdo
mais importante com links para acesso
• Estratégia de conteúdo para celular por Karen McGrane (A Book Apart)
conteúdo suplementar (comentários,
detalhes do produto, anúncios, listas de links,
etc.) quando eles quiserem. A informação está
Esquema
disponível para eles, mas não de uma só vez.
Enquanto isso, em telas maiores, esses Reorganizar o conteúdo em diferentes layouts pode ser a primeira coisa que você pensa quando
conteúdos suplementares são exibidos nas
imagina um design responsivo, e com razão. O layout ajuda a formar nossa primeira impressão do
barras laterais automaticamente.
conteúdo e usabilidade de um site.
O carregamento condicional requer
JavaScript para ser implementado, então Como mencionado anteriormente, o design responsivo é baseado em layouts fluidos que se
não darei instruções específicas aqui, mas expandem e se contraem para preencher o espaço disponível na janela de visualização. Um layout
é bom saber que existem alternativas para
fluido geralmente não é suficiente, no entanto, para atender a todos os tamanhos de tela. Mais
colocar tudo em todos os dispositivos.
frequentemente, dois ou três layouts são produzidos para atender aos requisitos entre os
dispositivos, com pequenos ajustes entre as mudanças de layout.
Os designers geralmente começam com um layout de uma coluna que se encaixa bem em
pequenos dispositivos portáteis e reorganiza os elementos em colunas à medida que mais espaço
está disponível. Eles também podem ter o design para as telas mais amplas elaborado desde o
início, para que haja um ponto final em mente. O processo de design pode envolver uma certa
quantidade de alternância entre visualizações e tomada de decisões sobre o que acontece ao longo
do caminho.
Layout e comprimento da linha
Um bom gatilho para decidir quando ajustar o layout é observar os comprimentos das linhas de
texto. Linhas de texto muito curtas ou muito longas são difíceis de ler, então você deve procurar
comprimentos de linha ideais de 45 a 75 caracteres, incluindo espaços. Se suas linhas de texto
forem significativamente mais longas, é hora de fazer alterações no layout, como aumentar as
margens ou introduzir uma coluna adicional. Você também pode aumentar o tamanho da fonte do
texto para manter a contagem de caracteres no intervalo desejado.
Clarissa Peterson apresenta um truque legal para testar comprimentos de linha em seu livro
Learning Responsive Web Design (O'Reilly). Coloque um intervalo em torno do 45º ao 75º
caracteres no texto e dê a ele uma cor de fundo (FIGURA 17-8). Dessa forma, você pode verificar
facilmente se as quebras de linha estão acontecendo na zona segura

Num relance. Obviamente, essa dica de comprimento de linha seria removida antes que o site se tornasse
público.
FIGURA 17-8. Destaque o 45º ao 75º caracteres para testar rapidamente os comprimentos de
linha ideais.
Padrões de layout responsivos

A maneira pela qual um site transita de um layout de tela pequena para um layout de tela ampla deve fazer
sentido para esse site em particular, mas existem alguns padrões (abordagens comuns e repetidas) que surgiram
ao longo dos anos. Podemos agradecer a Luke Wroblewski (conhecido por sua abordagem “Mobile First” para
web design, que se tornou o padrão) por fazer uma pesquisa de como sites responsivos lidam com layout. O
artigo detalhando suas descobertas, “Multi-Device Layout Patterns” (www.lukew.com/ff/entry.asp?1514), está
envelhecendo, mas os padrões persistem até hoje. A seguir estão os principais padrões que Luke nomeou em
seu artigo (FIGURA 17-9):
Principalmente fluido
Esse padrão usa um layout de coluna única para telas pequenas e outro layout fluido que cobre telas
médias e grandes, com uma largura máxima definida para evitar que fique muito larga. Geralmente requer
menos trabalho do que outras soluções.
Queda de coluna
Essa solução alterna entre layouts de uma, duas e três colunas com base no espaço disponível. Quando
não há espaço para colunas extras, as colunas da barra lateral caem abaixo das outras colunas até que
tudo seja empilhado verticalmente na visualização de uma coluna.
Deslocador de layout
Se você quiser ficar realmente chique, poderá reinventar completamente o layout para uma variedade de
tamanhos de tela. Embora expressivo e potencialmente legal, não é necessário. Em geral, você pode
resolver o problema de ajustar seu conteúdo a vários ambientes sem exagerar.
Pequenos ajustes
Alguns sites usam um layout de coluna única e fazem ajustes no tipo, espaçamento e imagens para que
funcionem em vários tamanhos de dispositivos.

Principalmente fluido Queda de coluna
Layout shi er Pequenos ajustes
O canvas
FIGURA 17-9. Exemplos dos padrões de layout responsivos identificados por Luke
Wroblewski.
Fora da tela
Como alternativa ao empilhamento de conteúdo verticalmente em telas pequenas, você pode

optar por usar uma solução “fora da tela”. Nesse padrão, um componente de página está localizado
fora da vista à esquerda ou à direita da tela e aparece quando solicitado. Um pouco da tela de
conteúdo principal permanece visível na borda para orientar os usuários quanto ao relacionamento
das partes móveis. Isso foi popularizado pelo Facebook, em que Favoritos e Configurações foram
colocados em um painel que deslizava da esquerda quando os usuários clicavam em um ícone de
menu.
Você pode ver exemplos de trabalho desses e de padrões de layout adicionais na página “Padrões
Responsivos” montada por Brad Frost (bradfrost.github.io/this is-responsive/patterns.html).
Tipografia
A tipografia requer um ajuste fino ao longo do espectro, de telas pequenas a telas amplas, a
fim de mantê-las legíveis e agradáveis de ler. Aqui estão algumas dicas relacionadas à
tipografia (FIGURA 17-10):
Tipo de letra
Tenha cuidado ao usar fontes sofisticadas em telas pequenas e certifique-se de testar a

legibilidade. Em tamanhos pequenos, algumas fontes tornam-se difíceis de ler porque

Fontes variáveis
No final de 2016, a OpenType lançou
uma nova tecnologia de fonte chamada
OpenType Font Variations, conhecida menos
formalmente como “fontes variáveis”. Você
pode alterar o peso, largura, estilo (itálico),
inclinação e tamanho óptico de uma fonte
Telas estreitas: Telas largas: variável usando as propriedades de estilo font-
• Fontes legíveis • Fontes estilizadas OK * . A maravilha desta tecnologia é que você
• Tipo de tamanho menor • Tamanho do tipo maior
pode entregar um arquivo de fonte (que é
• Altura da linha mais apertada • Altura da linha aberta
apenas uma chamada para o servidor) e
• Margens estreitas • Margens mais amplas
esticá-lo e manipulá-lo para atender a muitos
propósitos, como torná-lo mais estreito para
FIGURA 17-10. Diretrizes gerais de tipografia para telas pequenas e grandes. preservar a altura e o comprimento da
linha em telas pequenas. O suporte do
navegador para fontes variáveis deve
traços de linha tornam-se muito leves ou floreios extras tornam-se pequenos blobs. começar em 2018. Para obter mais
informações, consulte o artigo “Introdução à variável
Considere também que telas pequenas podem estar se conectando via celular, portanto, aproveitar
Fonts” de Richard Rutter em medium.
as fontes disponíveis localmente pode ser melhor para o desempenho do que exigir o download de
com/@clagnut/get-started-with
uma fonte da Web. Se uma identidade de marca estrita exigir consistência de fonte em todos os
variable-fonts-c055fd73ecd7.
dispositivos, certifique-se de escolher um tipo de fonte que funcione bem em todos os tamanhos. Se
O site axis-praxis.org permite que você
isso não for uma preocupação, considere usar uma fonte da Web apenas em telas maiores. Nós nos
brinque com fontes variáveis usando
esforçamos para servir o mesmo design para todos os dispositivos, mas como em tudo em web design, controles deslizantes para ajustar o peso e
a flexibilidade é importante. outras qualidades. Observe que você precisa
de um navegador que suporte fontes variáveis
Tamanho da fonte
para que funcione.
Variar a largura da janela de visualização pode causar estragos no comprimento da linha. Você pode
achar que precisa aumentar o tamanho da fonte dos elementos de texto para janelas de visualização
mais amplas para manter um comprimento de linha entre 45 e 75 caracteres. Também facilita a leitura
à distância que os usuários normalmente sentam em suas telas grandes.
Por outro lado, você pode usar consultas de mídia baseadas em em para que o layout permaneça
proporcional ao tamanho da fonte. Com consultas baseadas em em, os comprimentos de linha
permanecem consistentes.
Altura da linha
A altura da linha é outra medida que você pode querer ajustar à medida que as telas ficam maiores.
Em média, a altura da linha deve ser cerca de 1,5 (usando um valor numérico para a propriedade line-
height ); no entanto, um espaçamento de linha ligeiramente mais apertado (1,2 a 1,5) é mais fácil de
ler com comprimentos de linha mais curtos em telas pequenas. Telas grandes, onde o tipo
provavelmente também é maior, podem lidar com alturas de linha mais abertas (1,4 a 1,6).
Margens
Em telas pequenas, aproveite ao máximo o espaço disponível mantendo as margens esquerda e

direita na coluna principal no mínimo (2–4%). À medida que as telas ficam maiores, você provavelmente
precisará aumentar as margens laterais para manter a linha

comprimentos sob controle e apenas para adicionar alguns espaços em branco de boas-vindas ao layout.
Lembre-se de especificar as margens acima e abaixo dos elementos de texto em unidades em para que
fiquem proporcionais ao tipo.
Tipografia Fluida com

Unidades da janela de visualização
Navegação
Para tornar o tamanho do texto proporcional
ao tamanho da janela de visualização, use os A navegação parece um pouco com o Santo Graal do Web Design Responsivo. É fundamental acertar. Como a
comprimentos percentuais da janela de navegação em larguras de área de trabalho praticamente foi conquistada, os verdadeiros desafios vêm em
visualização, vw e vh, para tamanho da
recriar nossas opções de navegação em telas pequenas. Vários padrões bem-sucedidos surgiram para telas
fonte. Uma unidade vw (largura da janela de
pequenas, que resumirei brevemente aqui (FIGURA 17-11):
visualização) é igual a 1% da largura da janela
de visualização (ou o “bloco contendo inicial”,
como é chamado na especificação). Um vh é
Navegação superior
1% da altura da janela de visualização. A
especificação também define uma unidade Se o seu site tiver apenas alguns links de navegação, eles podem se encaixar perfeitamente em uma ou
vmin (o menor de vw ou vh) e vmax (o maior duas linhas na parte superior da tela.
de vw ou vh), mas eles não são tão bem
suportados. Prioridade +
O suporte do navegador é muito bom, com Nesse padrão, os links de navegação mais importantes aparecem em uma linha na parte superior da tela
exceção do IE9 e anteriores e suporte para ao lado de um link Mais que expõe opções adicionais. As vantagens são que os links primários estão à
vmin e vmax. Existem alguns bugs conhecidos,
vista e o número de links mostrados pode aumentar à medida que a largura do dispositivo aumenta. Os
então certifique-se de verificar a guia Problemas
contras incluem a dificuldade de determinar quais links são dignos do principal espaço de tela pequena.
conhecidos no
página CanIUse.com para esses valores.
Para uma exploração do uso de unidades de

viewport para texto, leia “Responsive Font Selecione o menu
Size and Fluid Typography with vh and vw”
de Michael Riethmuller na Smashing Magazine Para uma lista média de links, alguns sites usam um elemento de formulário de entrada de seleção .
(www. Tocar no menu abre a lista de opções usando a interface do usuário do menu de seleção do sistema
smashingmagazine.com/2016/05/ operacional, como uma lista de rolagem de links na parte inferior da tela ou em uma sobreposição. A
tipografia fluida). vantagem é que é compacto, mas no lado negativo, os formulários normalmente não são usados para
navegação e o menu pode ser esquecido.
Link para o menu de rodapé
Uma abordagem direta coloca um link de menu na parte superior da página que direciona para a navegação
completa localizada na parte inferior da página. O risco desse padrão é que pode ser desorientador para os
usuários que de repente se encontram na parte inferior do pergaminho.
Sub-navegação de acordeão
Quando há muitas opções de navegação com menus de subnavegação, a solução de tela pequena se
torna mais desafiadora, principalmente quando você não pode passar o mouse para obter mais opções do
que com um mouse. Acordeões que se expandem quando você toca em um pequeno ícone de seta são
comumente usados para revelar e ocultar a sub-navegação. Eles podem até estar aninhados em vários
níveis de profundidade. Para evitar aninhar a navegação em submenus de acordeão, alguns sites
simplesmente vinculam a páginas de destino separadas que contêm uma lista da subnavegação para essa
seção.

Navegação superior Prioridade +
Blog Shop Sobre Contato Loja Contato Sobre MAIS Loja Contato Sobre MAIS
Blogue
LoGo uma boa empresa LoGo uma boa empresa LoGo uma boa empresa
Empregos
CHAVE
Loja Contato Sobre Blog FAQ Empregos
= toque
LoGo uma boa empresa
Selecione o menu Link para o menu de rodapé Sub-navegação de acordeão

CARDÁPIO CARDÁPIO
Comprar
LoGo uma boa empresa LoGo uma boa companhia •
Cozinha
• Quarto
• O gelo
Comprar
Contato
Contato
Sobre
Sobre
Blogue
Blogue
Empregos
Alternância de sobreposição (cobre a parte superior da tela) O -canvas/fly-in
Comprar
CARDÁPIO
CARDÁPIO
Contato
Comprar LoGo uma boa empresa

LoGo uma boa empresa Sobre
Contato
Blogue
Sobre
Perguntas frequentes Comprar
Blogue CARDÁPIO
Empregos Contato
Sobre
Push toggle (empurra o conteúdo para baixo)

Blogue
CARDÁPIO
Empregos
Comprar
Contato
Sobre
Blogue
FIGURA 17-11. Padrões de navegação responsivos.

Alternar push e overlay
Na navegação alternada, a navegação fica oculta, mas se expande para baixo quando o link do
menu é tocado. Ele pode empurrar o conteúdo principal para baixo (alternar) ou deslizar para baixo
Projetando para os dedos na frente do conteúdo (alternar sobreposição).
Lembre-se de que as pessoas usam os dedos

Fora da tela/ fly-in
para se locomover em dispositivos de toque,
que atualmente incluem smartphones, tablets e Esse padrão popular coloca a navegação em um painel fora da tela à esquerda ou à direita do
até telas do tamanho de desktops, como o conteúdo principal que aparece quando você toca no ícone do menu.
Microsoft Surface e o iPad Pro.
Para um mergulho mais profundo nos prós e contras dos padrões de navegação, leia o artigo de Brad
Os links na navegação devem ser grandes o
suficiente para segmentar facilmente com os Frost “Padrões de navegação responsivos” (bradfrost.com/blog/web/
polegares e as pontas dos dedos. A Apple requer padrões de navegação responsivos). Brad também inclui exemplos desses padrões e
44 pixels para seus aplicativos, e isso é uma boa muito mais em sua página Responsive Patterns (bradfrost.github.io/this-is-responsive/
estimativa para se ter em mente também para
padrões.html).
links em páginas da web.
Outra consideração para o toque Para exemplos de trabalho desses padrões com o código usado para criá-los, consulte a página
dispositivos é que não há estado de foco. “Adventures in Responsive Navigation” montada por Eric Arbé emresponsivnavigation.net .
Passar o mouse se tornou a convenção para abrir
a sub-navegação em páginas da Web na área de
trabalho, mas sem mouse, essa experiência é
muito diferente com o toque. A maioria dos
dispositivos abre o submenu com um segundo
Imagens
clique. Se você usar o foco em sua navegação e Imagens requerem atenção especial em designs responsivos. Aqui está um resumo rápido de alguns
em outros lugares do site, precisará fazer um teste
dos principais problemas, a maioria dos quais deve parecer familiar:
completo do dispositivo. Algum dia, poderemos
escrever uma consulta de mídia para testar o foco, • Use técnicas de marcação de imagem responsiva (abordadas no Capítulo 7) para fornecer várias
mas enquanto isso, evite-a ou teste as alternativas. versões de imagens-chave para vários tamanhos e resoluções.
• Servir a versão menor como padrão para evitar dados desnecessários

Transferências.
Um livro realmente ótimo sobre todas essas

• Certifique-se de que detalhes importantes da imagem não sejam perdidos em tamanhos menores.
coisas é Designing for Touch (A Book Apart),
de Josh Clark. Considere substituir uma versão recortada da imagem por telas pequenas.
• Evite colocar texto em gráficos, mas se for necessário, forneça versões alternativas
ções com texto maior para telas pequenas.
Conteúdo especial
Sem o luxo de janelas de visualização de desktop totalmente abertas, alguns de nossos elementos de
página comuns apresentam desafios quando se trata de caber em telas menores:
Formulários
Os formulários geralmente exigem um pouco de manipulação para se ajustarem adequadamente ao espaço disponível.
O Flexbox é uma ótima ferramenta para adicionar flexibilidade e encapsulamento condicional para
campos de formulário e seus rótulos. Uma pesquisa na web irá revelar alguns bons tutoriais.
Certifique-se também de que seu formulário seja o mais eficiente possível, sem campos
desnecessários, o que é um bom conselho para qualquer tamanho de tela. Por fim, considere que

as entradas de formulário serão usadas com as pontas dos dedos, não com os ponteiros do mouse,
portanto, aumente o tamanho do destino adicionando amplo preenchimento ou margens e tornando os
rótulos tocáveis para selecionar uma entrada.
Tabelas
Um dos maiores desafios no design de tela pequena é como lidar com grandes tabelas de dados. Não
surpreendentemente, porque existem muitos tipos de tabelas, também existem muitas soluções. Consulte
a barra lateral “O problema com as tabelas” para obter mais informações e recursos.
Elementos interativos
Um grande mapa incorporado pode ser ótimo em uma visualização de desktop de um site, mas é menos
útil quando é do tamanho de um selo postal. Considere se alguns recursos interativos devem ser
substituídos por outros métodos para realizar a mesma tarefa. No caso do mapa, adicionar um link a um
mapa pode acionar o aplicativo de mapeamento nativo do dispositivo para abrir, projetado para fornecer
uma melhor experiência em tela pequena. Outros componentes interativos, como carrosséis, podem ser
adaptados para viewports menores.
O problema das tabelas

Tabelas grandes, como as mostradas na FIGURA 8-1, podem ser Você também pode optar por ocultar determinadas colunas de
difíceis de usar em dispositivos de tela pequena. Por padrão, eles são informações quando a página for carregada pela primeira vez em
reduzidos para caber na largura da tela, tornando o texto nas células muito dispositivos pequenos e dar ao usuário a opção de clicar para ver a tabela
pequeno para ser lido. Os usuários podem ampliar para ler as células, mas inteira ou ativar e desativar colunas específicas. Isso é um pouco mais
apenas algumas células podem ser visíveis por vez e é difícil analisar a arriscado do ponto de vista do design de interação. Essas colunas podem não ser vistas.
organização de títulos e colunas. Tabelas CSS e Flexbox são outras opções para tornar o material tabular
Designers e desenvolvedores criaram várias abordagens para tornar as responsivo. A melhor abordagem depende inteiramente do tipo de dados
tabelas responsivas. Para ser honesto, usar mesas em dispositivos pequenos que você está publicando e de como a tabela deve ser usada. Se você
ainda é relativamente novo, então agora o que estamos vendo é muita estiver interessado em aprender mais, recomendo os seguintes recursos:
experimentação e soluções contra a parede para ver o que funciona. A
maioria das soluções envolve algum mojo avançado de desenvolvimento • “Tabelas Acessíveis, Simples e Responsivas” de Davide Rizzo sobre
web (mais do que podemos assumir com apenas alguns capítulos), mas CSS-Tricks (css-tricks.com/accessible-simple-responsive tables/): Um
quero que você esteja familiarizado com tabelas responsivas. Existem três resumo de soluções usando tabelas CSS.
abordagens gerais: rolagem, empilhamento e ocultação.
• “Tabelas responsivas somente CSS” de David Bushell (dbushell.
com/2016/03/04/css-only-responsive-tables/): Uma abordagem de
Para soluções de rolagem, a tabela permanece tão grande quanto precisa rolagem somente CSS usando sombras CSS para melhor usabilidade.
e os usuários podem rolar para a direita para ver as colunas que não
• “Escolhendo uma solução de tabelas responsivas” por Jason Grigsby
cabem. Isso pode ser feito apenas com JavaScript ou CSS. Você pode até
na Cloud Four (cloudfour.com/thinks/picking-responsive tables-
mesmo ancorar a coluna da esquerda na janela para que ela permaneça
solution/).
no lugar quando o resto da tabela rolar.
• Mesas Responsivas da ZURB Studios (zurb.com/playground/
Outra abordagem é empilhar as entradas em um pergaminho longo e
tabelas responsivas): Uma solução de rolagem de coluna esquerda
estreito. Cada entrada repete os cabeçalhos, para que os dados sejam
fixa usando JavaScript e CSS.
sempre apresentados com o contexto adequado. Novamente, você pode
fazer isso apenas com JavaScript ou CSS. A desvantagem é que a lista • Serra de Mesa da Filament Group (github.com/filamentgroup/
pode ficar muito longa e dificulta a comparação de entradas, mas pelo tablesaw): Um grupo de plug-ins JQuery (JavaScript) para criar
menos todas as informações são visíveis sem rolagem horizontal. uma variedade de efeitos de tabela responsivos.

Isso deve lhe dar uma ideia de alguns dos aspectos de um site que precisam de
atenção especial em um design responsivo. Cobrimos hierarquia de conteúdo, vários
padrões de layout, ajustes de tipografia, padrões de navegação responsivos e
estratégias de imagem e abordamos tabelas, formulários e recursos interativos. Eu
diria que chega de palestras. Agora você terá algum tempo prático no EXERCÍCIO 17-1.
EXERCÍCIO 17-1. Tornando a página inicial da padaria responsiva
Fizemos muito trabalho no site Black Goose Bakery nos últimos capítulos, mas o • Tipografia: Em telas pequenas, decidi usar uma fonte legível sem serifa para o
site resultante funciona melhor em telas grandes. texto e não empregar minha fonte da web porque é provável que seja difícil de
Neste exercício, vamos fazer backup de algumas etapas e construí-lo ler em tamanhos pequenos.
novamente usando uma estratégia de tela pequena, fazendo alterações no layout,
• Imagens: configuro os elementos img para as imagens do pão e do muffin para
navegação, tipografia e muito mais em pontos de interrupção estratégicos.
exibir: bloco para que tenham toda a largura da janela de visualização para si
Eu fiz o trabalho pesado de escrever os estilos necessários para cada ponto de mesmas, sem nenhum texto se esgueirando ao lado delas. Definir as margens
interrupção, mas vou falar sobre cada etapa e compartilhar o raciocínio para as laterais como automáticas as mantém centralizadas horizontalmente.
mudanças. A folha de estilo inicial (bakery-rwd. • Diversos:
css) , bem como a folha de estilo finalizada (bakery-rwd-finished.css) e os
— O prêmio aparece na parte inferior da página porque não há espaço
outros arquivos do site são fornecidos com os materiais deste capítulo. O arquivo
suficiente para ser posicionado na parte superior.
HTML, bakery.html, não mudou desde que adicionamos o elemento container a
ele no Capítulo 16, Layout CSS com Flexbox e Grid, e não precisaremos editá- — Destaquei um intervalo do 45º ao 75º caracteres para revelar quando os
lo novamente. comprimentos das linhas ficam muito longos.
Começando
Abra o arquivo HTML (bakery.html) em um navegador com uma visualização
responsiva (consulte a barra lateral anterior, “Qual é a largura da janela de
visualização?”) para que você possa expandir a janela da janela de visualização
e observar as mudanças nas dimensões dos pixels. A FIGURA 17-12 mostra a
página com 320 pixels de largura com os estilos padrão de tela estreita que serão o
ponto de partida para este design.
O conteúdo da página é o mesmo dos capítulos anteriores, mas se você trabalhou

nos exercícios do Capítulo 16, notará que alterei alguns estilos para tornar o layout
inicial adequado para telas pequenas. Permitam-me apontar as características
deste projeto de linha de base:
• Layout: A página tem um layout de uma coluna para telas pequenas.

Não há bordas ao redor da área de texto principal e a seção Horas tem uma
borda recortada na parte superior em vez da lateral. Isso mantém a aparência,
mas é mais apropriado quando as seções são empilhadas.
• Navegação: O menu de navegação, que foi criado com

Flexbox, não podia ser flexível o suficiente para caber em uma tela pequena.
Para ajustá-lo, ativei o wrap (flex-wrap: wrap;) e configurei a largura de cada
li para 50% para que houvesse dois em cada linha. Eu também fiz isso para
que eles possam crescer e encolher conforme necessário (flex: 1 1 50%).
• Texto de cabeçalho condicional: O slogan estava ocupando muito

espaço vertical e decidi que não era crítico. Ocultei o parágrafo (exibir:
nenhum;) e tornarei visível novamente quando houver mais espaço.
FIGURA 17-12. O design de tela pequena é nosso ponto de partida.

Corrigindo a navegação a disposição centralizada funcionará até mesmo para as telas mais amplas, portanto, a
navegação está pronta. Se você tiver navegação com elementos adicionais, como um
Agora podemos começar a personalizar o design para outros tamanhos de tela. Usando
logotipo embutido e uma caixa de pesquisa, talvez seja melhor criar alguns arranjos
uma ferramenta Responsive View, posso redimensionar a viewport e obter uma leitura
diferentes em vários pontos de interrupção.
instantânea das dimensões da janela. Experimente no seu navegador. Continue ampliando
e você verá que algumas coisas parecem boas e outras começam a parecer estranhas
Imagens flutuantes
rapidamente.
À medida que continuo a aumentar gradualmente a janela de visualização, noto que as
Uma coisa que me parece estranha imediatamente é a navegação empilhada no
imagens principais começam a parecer muito solitárias em uma linha sozinha e que há
topo. Eu gostaria que ele mudasse para uma linha centralizada assim que houvesse
espaço para começar a envolver o texto em torno delas novamente com cerca de 480 pixels
espaço, o que a meu ver acontece quando a janela de visualização tem 400 pixels
de largura. Vamos cuidar desse estranho espaço em branco flutuando as imagens para a
de largura (FIGURA 17-13).
esquerda quando a tela atingir 480 pixels (FIGURA 17-14):
Você está pronto para escrever sua primeira consulta de mídia? Abra a folha de estilo
(bakery-rwd.css) em um editor de texto. Lembre-se de que as consultas de mídia precisam
vir depois de outras regras para a mesma declaração, então para manter este exercício
@media screen and (min-width: 480px)
{ main img { float: left; margem: 0 1em
simples, vamos adicioná-las no final da folha de estilo, antes de </style>. Adicione esta
1em 0;
consulta como você a vê aqui. Lembre-se de verificar se você tem o número certo de chaves
de aninhamento:
}
@media tela e (largura mínima: 400px) { }
nav ul li NOTA: Se desejar, você pode incluir as formas CSS do Capítulo 15,
{ flex: nenhum;
Flutuante e Posicionamento, para uma quebra de texto mais interessante. Eu os
omiti aqui por brevidade e devido ao suporte limitado do navegador.
} nav ul {
justificar-conteúdo: centro;
}
} Texto e tipografia
Quando a tela chega a ter cerca de 600 pixels de largura, sinto que há espaço suficiente
Isso informa ao navegador que, quando a página estiver em uma tela e a janela de
para introduzir alguns enfeites. Há espaço para o slogan no cabeçalho, então vou configurá-
visualização tiver 400 pixels ou mais, defina o “flex” dos itens da lista de menu como
lo para exibir novamente.
“nenhum”. A palavra-chave none é equivalente a flex: 0 0 auto;, portanto, os itens não
podem aumentar ou diminuir e serão dimensionados com base em seu conteúdo. Eu Agora alguma atenção à tipografia. Eu gosto da fonte web Stint Ultra Expanded, mas ela
não é fundamental para a marca da empresa, então eu a omiti no layout estreito devido a
centralizei o contêiner flexbox definindo justify-content: center.
problemas de comprimento de linha. Nesse ponto de interrupção, posso começar a usá-lo
porque sei que será mais legível e resultará em comprimentos de linha confortáveis. Eu
Salve a folha de estilo e recarregue a página no navegador. Tente redimensionar
também afrouxei um pouco a altura da linha. Vou aproveitar o espaço extra para adicionar
a janela de visualização para ver como ela funciona em tamanhos maiores. eu acho que isto
um
ÿ
Antes da alteração do ponto de interrupção
Um ponto de interrupção é necessário Com 480 pixels de largura, a imagem

para preencher o espaço estranho ao flutua para o arquivo.
redor da imagem.
A er
FIGURA 17-13. A navegação começou a parecer estranha, então adiciono FIGURA 17-14. As imagens flutuam para a esquerda quando há largura
um ponto de interrupção em 400 pixels para mudar para uma linha. suficiente para acomodar o texto de quebra.

borda arredondada ao redor da área de texto principal para aproximá-la da identidade original da marca do site.
O resultado é um layout aprimorado de uma coluna que é adequado para dispositivos do tamanho de tablets
(FIGURA 17-15).
Aqui está a consulta de mídia para o ponto de interrupção de 600 pixels. Adicione isso na parte inferior da
folha de estilo após as outras duas consultas:
@media tela e (largura mínima: 600px) {

cabeçalho p
{ display: bloco;
margem superior: -1.5em;
família de fontes: Georgia, serifa;
estilo de fonte: itálico; tamanho da
fonte: 1.2em;
} main, h2, h3 { font-

family: 'Stint Ultra Expanded', Georgia, serif;
} h2, h3 {
intensidade da fonte: Negrito;
} main
{ altura da linha: 1.8em;
preenchimento: 1em;
borda: double 4px #EADDC4;
raio da borda: 25px;
margem: 2,5%;
}
}
Layout de várias colunas

FIGURA 17-15. Este tamanho médio À medida que continuo a ampliar a janela de visualização e presto atenção ao intervalo de caracteres destacado
layout é adequado para dispositivos do tamanho em amarelo, vejo que a linha de texto está crescendo em mais de 75 caracteres. Eu poderia aumentar o tamanho
de tablets. da fonte ou as margens, mas acho que esse é um bom ponto para introduzir uma segunda coluna no layout. Se
você não estiver segmentando um dispositivo específico, o ponto de interrupção exato será subjetivo.
Eu escolhi 940 pixels como o ponto acima do qual a página recebe um layout em colunas.
Eu simplesmente peguei os estilos de layout de grade do capítulo anterior e os apliquei novamente aqui.
No elemento lateral, movi o gráfico de fundo recortado para a borda esquerda.
Além disso, defino uma largura máxima de 1200px no contêiner e defino suas margens laterais como
automáticas, portanto, se a janela do navegador for maior que 1.200 pixels, o layout permanecerá com uma
largura fixa e centralizado na janela de visualização. Finalmente, posicionei absolutamente o gráfico do prêmio
no topo da página, agora que há espaço suficiente (FIGURA 17-16).
Adicione esta consulta de mídia final no final da folha de estilo. Você pode copiá-los e colá-los do exercício
final do Capítulo 16 (foi o que eu fiz) e fazer alguns ajustes nas regras #container e #aside conforme
mostrado:
@media screen and (min-width: 940px) { #container

{ display: grid; grid-template-rows: auto min-height
5em; grid-template-columns: minmax(25em,
1fr) 16em; grid-template-áreas: "banner banner"
"horário principal"
"rodapé de rodapé";
largura máxima: 1200px;

margem: 0 automático;
}
cabeçalho { área da
grade: banner; } main
{ área da grade: main; } à
parte { área da grade:
horas; background:
url(images/scallop.png)
repeat-y superior
esquerdo; cor de fundo: #F6F3ED; preenchimento: 1em; padding-
esquerdo: 45px;
} rodapé
{ área da grade:
rodapé; } #prêmio
{ posição: absoluta; topo:
30px; esquerda: 50px;
}
}
E terminamos! Este é o site responsivo mais sofisticado de todos os tempos? Não. Podemos fazer
ainda mais para melhorar o design em vários tamanhos de tela? Certamente! Mas agora você
deve ter uma ideia de como é começar com um design de tela pequena e fazer alterações que
otimizam para tamanhos cada vez maiores. Considere isso um modesto primeiro passo para futuras
aventuras em RWD.
NOTA
O plano de fundo destacado no intervalo de

comprimento deve ser desativado antes da
publicação, mas deixei-o visível nas figuras
para que você possa ver como o comprimento
da linha está se saindo nos layouts.
FIGURA 17-16. O layout de grade de duas colunas é apropriado para viewports acima de 940
pixels. Em telas muito largas, como mostrado aqui, o contêiner para de expandir em 1.200
pixels de largura e é centralizado horizontalmente.

Algumas palavras sobre testes
ALGUMAS PALAVRAS SOBRE TESTES

No exercício anterior, contamos com a exibição responsiva em um navegador moderno para
tomar decisões sobre mudanças de estilo em vários tamanhos, mas embora seja uma ferramenta
útil para criar um design inicial, são necessários muito mais testes antes que o design possa ser
considerado pronto para uso. lançamento definitivo. Isso é ainda mais crítico para sites que
incluem recursos que dependem de JavaScript ou funcionalidade do lado do servidor.
Existem três opções gerais para testar sites: dispositivos reais, emuladores e serviços de terceiros.
Veremos cada uma nesta seção.
Dispositivos reais
Realmente não há substituto para testar um site em uma variedade de dispositivos e sistemas
operacionais reais. Além de apenas ver a aparência do site, os testes em dispositivos reais
Criando um laboratório de dispositivos
mostram o desempenho do seu site . Quão rápido ele carrega? Os links são fáceis de acessar?
Se você deseja configurar seu próprio laboratório Todos os recursos interativos funcionam sem problemas? Eles funcionam mesmo?
de dispositivos, recomendo a leitura da cartilha
Construindo um Laboratório de Dispositivos de
Destiny Montague e Lara Hogan (Publicação As empresas de desenvolvimento web podem ter um laboratório de dispositivos composto por
em Cinco Passos Simples). O livro é um resumo iPhones e iPads de vários tamanhos, smartphones e tablets Android de vários tamanhos e Macs
de tudo o que os autores aprenderam ao criar
e PCs com sistemas operacionais recentes (Windows e Linux) que podem ser usados por
um laboratório de dispositivos matador para o
designers e desenvolvedores para sites de teste (FIGURA 17-17). O tamanho do laboratório de
Etsy. Está disponível gratuitamente em
buildingadevicelab.com. dispositivos depende do tamanho do orçamento, é claro (dispositivos eletrônicos não são baratos!).
FIGURA 17-17. O laboratório de dispositivos do Filament Group em Boston, Massachusetts.
Se você não tem o luxo de trabalhar em uma grande empresa com um grande laboratório, existem
alternativas:
• Se você mora em uma cidade grande, pode estar perto de um laboratório de dispositivos aberto
para uso público. Verifique o site opendevicelab.com para ver se há um perto de você.

Algumas palavras sobre testes
• Você pode construir seu próprio laboratório com uma coleção de dispositivos usados. No
mínimo, você deve ter acesso a um iPhone, telefone Android, iPad, tablet de 7" (como o iPad
Mini) e computadores com macOS e Microsoft Windows.
A boa notícia é que você geralmente não precisa de um plano de dados para todos os
dispositivos porque pode testar por WiFi.
• Se a compra de dispositivos não for viável, você pode pedir a amigos e colegas de trabalho que
peguem emprestados seus telefones e tablets brevemente. Pedir permissão em uma loja de
varejo móvel para carregar páginas da web em seus dispositivos não é inédito.
Se você tiver vários dispositivos reais para teste, o uso de uma ferramenta de sincronização torna o
processo muito mais suave. Softwares como BrowserSync (browser sync.io) e Ghostlab
(www.vanamco.com/ghostlab/) são executados em seu computador e transmitem o que estiver na
tela para todos os seus dispositivos simultaneamente, para que você não precise carregar a página
em cada um deles individualmente. É como mágica!
Emuladores
Se um determinado dispositivo estiver fora de seu alcance, você pode usar um emulador, um
aplicativo de desktop que emula o hardware do dispositivo móvel e os sistemas operacionais.
O emulador apresenta uma janela que mostra exatamente como seu site se comportaria naquele
dispositivo específico (FIGURA 17-18). Os emuladores exigem muito espaço no seu computador e
podem apresentar bugs, mas certamente é melhor do que não testar nesse dispositivo.
Um bom ponto de partida para explorar emuladores é o “Mobile Emulators & Simulators: The
Ultimate Guide” de Maximiliano Firtman (www.mobilexweb.
com/emuladores).
FIGURA 17-18. Exemplos do

Android Emulator (baixe em
developer.android.com/studio/index.
html).
O Android Emulator permite configurar uma O emulador A página Bakery

grande variedade de telefones, televisores, Nexus 5X exibe uma visualizada no emulador
wearables e tablets para teste. imagem do dispositivo em Nexus 5X.
Eu escolhi um Nexus 5X. tamanho real. Todos os
botões funcionam como no
telefone.

Mais recursos RWD
Serviços terceirizados
Outra opção para testar seu site em mais de 1.000 dispositivos é assinar um serviço
como BrowserStack (browserstack.com) ou CrossBrowserTesting
(crossbrowsertesting.com). Por uma taxa mensal, você tem acesso a uma enorme
variedade de simuladores de dispositivos (FIGURA 17-19). Existem muitos desses
serviços disponíveis, alguns dos quais são gratuitos ou oferecem testes gratuitos.
Eles não fornecem as mesmas informações que os testes em dispositivos reais, mas
é outra alternativa melhor do que nada.
BrowserStack.com CrossBrowserTesting.com
FIGURA 17-19. Capturas de tela geradas pelo BrowserStack e CrossBrowserTesting (usando

ferramentas de avaliação gratuitas). Observe a variação em como a página da padaria é exibida. É por
isso que testamos!
MAIS RECURSOS RWD

Cobrimos a mecânica do uso de layouts fluidos, imagens flexíveis e consultas de
mídia para criar uma página que pode ser usada em uma ampla variedade de
tamanhos de tela. Analisamos as preocupações de design e alguns padrões
responsivos comuns para layout, navegação, tipografia e imagens. Você ainda teve
a chance de experimentar a criação de uma página responsiva por conta própria.
Mas esta é realmente apenas a ponta do iceberg, e eu encorajo você a continuar
aprendendo sobre RWD, especialmente se você estiver considerando web design ou
desenvolvimento como carreira. A seguir está uma lista de recursos de RWD que
considerei úteis e devem apontar na direção certa.
Livros
Responsive Web Design, 2e, por Ethan Marcotte (A Book Apart)
Este livro é leitura obrigatória. Ethan entra em muito mais detalhes do que eu
consegui aqui sobre como calcular grades flexíveis e como usar consultas de
mídia. Além disso, é simplesmente divertido de ler.

Mais recursos RWD
Aprendendo Web Design Responsivo: Um Guia para Iniciantes por Clarissa

Peterson (O'Reilly)
Clarissa fornece uma visão abrangente de todos os aspectos do design responsivo, NOTA
desde exemplos de código detalhados até estratégias amplas sobre fluxo de trabalho
A maioria desses títulos foi escrita antes que o
e design mobile-first.
CSS Grid Layout se tornasse uma opção viável.
Smashing Book #5: Web Design Responsivo da Vida Real, vários autores (Smashing Tenha em mente que você tem ferramentas
Magazine) avançadas para layouts flexíveis não

mencionados nestes livros.
Uma coleção de técnicas e estratégias práticas de web designers proeminentes.
Atomic Design por Brad Frost (auto-publicado)

Brad descreve sua abordagem modular ao RWD, que se tornou bastante popular
para o desenvolvimento de grandes sites.
Fluxo de trabalho de design responsivo por Stephen Hay (New Riders)

Stephen Hay apresenta seu método de “design no navegador” para criar sites
responsivos. Este livro está repleto de sugestões sobre como abordar o design e o
desenvolvimento da web.
Implementando Design Responsivo por Tim Kadlec (New Riders)

Tim Kadlec é um líder na comunidade de web design móvel, e seu livro é um guia
completo para projetar e construir um site responsivo.
Recursos online
Web Design Responsivo é… (responsivedesign.is)
Uma coleção de artigos e podcasts sobre web design. Você também pode se
inscrever no boletim informativo “RWD Weekly” e manter o dedo no pulso do RWD.
O site é um projeto paralelo de Justin Avery e Simple Things.
Recursos responsivos (bradfrost.github.io/this-is-responsive/resources.html)

Para comprar tudo o que você poderia querer saber sobre RWD, não procure mais,
recursos responsivos de Brad Frost. Ele reuniu centenas de links para recursos
relacionados a estratégia, ferramentas de design, layout, consultas de mídia,
tipografia, imagens, componentes, desenvolvimento, testes, sistemas de
gerenciamento de conteúdo, e-mail, tutoriais e muito mais.
Sério, há o suficiente aqui para mantê-lo ocupado por meses.
Consultas de mídia (mediaqueri.es)
Uma galeria de exemplos excepcionais de sites responsivos com curadoria de Eivind

Uggedal.

Teste-se
TESTE-SE
Aqui estamos no final de mais um capítulo, então você sabe o que isso significa… hora
do quiz! Obtenha as respostas no Apêndice A se você estiver perplexo.
1. O que diferencia um site responsivo de um site móvel (m-dot)?
2. O que isso faz?
<meta name="viewport" content="width=device-width, initial-scale=1">
3. Como você garante que uma imagem fica menor quando seu contêiner fica menor no
layout?
4. O que isso faz?
@media screen e (min-width: 60em) { body

{
margem: 0 10%;
}
}
5. Quais são algumas estratégias para criar um layout que se ajuste à largura disponível
da janela de visualização?
6. Qual é a vantagem de usar ems como medida em media queries?
7. Liste três maneiras pelas quais uma consulta de mídia pode ser usada.
8. Cite três ajustes que você pode fazer na tipografia para que funcione bem em telas
pequenas.
9. Como você pode lidar com a navegação com muitos submenus em um pequeno
tela?
10. Liste três opções para testar sites em vários dispositivos.

CAPÍTULO
TRANSIÇÕES, 18
TRANSFORMA, E
ANIMAÇÃO
Vimos CSS usado para efeitos visuais como cantos arredondados, gradientes de cores e NESTE CAPÍTULO
sombras projetadas que anteriormente precisavam ser criadas com gráficos. Neste
Criando transições suaves
capítulo, veremos algumas propriedades CSS3 para produzir efeitos interativos animados
que antes eram possíveis apenas com JavaScript ou Flash. Movendo, girando e dimensionando
elementos
Começaremos com as Transições CSS, uma maneira bacana de fazer as mudanças de
estilo desaparecerem suavemente de uma para outra. Em seguida, discutiremos as Combinando transições e
Transformações CSS para reposicionar, dimensionar, girar e inclinar elementos e ver como transformações
você pode animá-los com transições. Vou encerrar o capítulo com breves introduções
Algumas palavras sobre
sobre Transformações 3-D e Animação CSS, que são importantes de se conhecer, mas
transformações 3-D
são um tópico muito vasto para ser abordado aqui, então vou dar apenas uma amostra.
O problema com este capítulo é que a animação e os efeitos baseados em tempo não Animações de quadro-chave
funcionam no papel, então não posso mostrá-los aqui. No entanto, fiz a próxima melhor
coisa e disponibilizei o código-fonte para as figuras nos materiais deste capítulo
(learningwebdesign.com/5e/materials) em uma pasta chamada figures.
Basta abrir o arquivo em seu navegador.
EASE-Y FAZ ISSO (TRANSIÇÕES CSS)
Imagine, se quiser, um link em um menu de navegação que muda de azul para vermelho
quando o mouse passa sobre ele. O fundo é azul…mouse passa sobre ele…BAM!
Vermelho! Ele vai de estado para estado instantaneamente, sem estados intermediários.
Agora imagine colocar o mouse sobre o link e ter o fundo mudando gradualmente de azul
para vermelho, passando por vários tons de roxo no caminho. É suuuper. E quando você
remove o mouse, ele volta a ficar azul novamente.
517
Ease-y faz isso (transições CSS)
É isso que as transições CSS fazem. Eles suavizam mudanças abruptas nos valores de propriedade
entre dois estados ao longo do tempo, preenchendo os quadros entre eles. Os animadores chamam
isso de interpolação. Quando usado com reserva, o CSS Transitions pode adicionar sofisticação e
DICA DE APOIO
polimento às suas interfaces e até mesmo melhorar a usabilidade.
Suporte de transição CSS
A boa notícia é que todos os navegadores As transições CSS foram originalmente desenvolvidas pela equipe do WebKit para o navegador
modernos lançados desde 2013 suportam
Safari e são um rascunho de trabalho no W3C (consulte Nota). O suporte do navegador para
propriedades de transição CSS sem a necessidade
Transitions é excelente (consulte a barra lateral “CSS Transition Support” ), portanto, não há
de prefixos. Existem alguns buracos no suporte
motivo para não usá-los em seus projetos, principalmente se você os tratar como um aprimoramento.
que você deve conhecer:
Por exemplo, no raro navegador sem suporte (estou olhando para você, velho IE), nosso link
• Mais notavelmente, as versões 9 e anteriores passando diretamente de azul para vermelho não é grande coisa.
do Internet Explorer não
suporta transições e ignora totalmente as

propriedades de transição.
• Versões do Chrome e Safari NOTA

lançado entre 2010 e 2013
Você pode ler o CSS Transitions Module em www.w3.org/TR/css-transitions-1/.
suporta transições com o prefixo
-webkit- . Versões posteriores não requerem
prefixo.
Noções básicas de transição
• Em dispositivos móveis, versões iOS 3.1–6.0
(2010–2013) e as versões Android 2.1–4.3
As transições são muito divertidas, então vamos dar uma olhada nelas. Ao aplicar uma transição,
(2009–2013) requerem o prefixo -webkit- .
você precisa tomar algumas decisões, cada uma delas definida com uma propriedade CSS:
Versões posteriores não requerem prefixos. •
As versões do Firefox lançadas entre 2011 e
2012 requerem o prefixo -moz , mas estão quase

• Qual propriedade CSS alterar (propriedade de transição) (obrigatório)
extintas enquanto escrevo isso.
• Quanto tempo deve demorar (duração da transição) (obrigatório)
• A maneira pela qual a transição acelera (tempo de transição

Como sempre, verifique as estatísticas do seu
função)
próprio servidor (certifique-se de prestar atenção
ao uso móvel) para ver quais navegadores você • Se deve haver uma pausa antes de começar (atraso de transição)
precisa suportar e verifique CanIUse.com para
obter suporte e detalhes de bugs. As transições requerem um estado inicial e um estado final. O elemento como aparece quando é
carregado pela primeira vez é o estado inicial. O estado final precisa ser acionado por uma mudança
Nos exemplos ao longo deste capítulo, uso de estado como :hover, :focus ou :active, que é o que usaremos para os exemplos deste capítulo.
apenas as propriedades padrão (não Você pode usar JavaScript para alterar o elemento (como adicionar um atributo de classe ) e usá-lo
prefixadas). Se você precisar oferecer
também como um gatilho de transição.
suporte a navegadores que exigem prefixos,
sugiro usar o Autoprefixer, que é discutido
no Capítulo 19, Mais técnicas de CSS.
Vamos juntar tudo isso com um exemplo simples. Aqui está aquele link azul-vermelho que você
imaginou anteriormente (FIGURA 18-1). Não há nada de especial sobre a marcação.
E lembre-se, ao usar propriedades prefixadas,
sempre inclua a última versão sem prefixo para Eu adicionei uma classe para que eu pudesse ser específico sobre quais links recebem transições.
compatibilidade futura com os navegadores de
As propriedades de transição são aplicadas ao objeto que será transicionado—
suporte.
neste caso, o elemento a em seu estado normal. Você os verá no conjunto de outras declarações
para .smooth, como padding e background-color. Mudei a cor de fundo do link para vermelho
declarando a cor de fundo para o estado :hover (e :focus também, caso alguém esteja navegando
pelos links com um teclado).

A MARCAÇÃO
<a href="…" class="smooth">molho incrível</a>
OS ESTILOS
.smooth
{ display: bloco;
preenchimento: 1em
2em; largura: 10em;
0,3 segundos
raio da borda: 1,5em;
cor: #ff; cor de
fundo: azul médio; propriedade de
transição: cor de fundo; duração da transição: 0,3s;
}
.smooth:hover, .smooth:focus { background-
color: red; }
Especificando a propriedade FIGURA 18-1. A cor de fundo deste link

gradualmente desaparece de azul para
propriedade de transição vermelho em 0,3 segundos quando uma
Valores: transição é aplicada.
nome da propriedade | tudo | Nenhum
Predefinição: tudo
Aplica-se a: todos os elementos, :before e :after pseudo-elementos

Herda: não
transition-property identifica a propriedade CSS que está mudando e que você Adicione a transição
deseja fazer a transição sem problemas. Em nosso exemplo, é a cor de fundo. propriedades para o objeto que
Você também pode alterar a cor do primeiro plano, as bordas, as dimensões, os atributos será transicionado.
relacionados à fonte e ao texto e muito mais. A TABELA 18-1 lista as propriedades CSS
animáveis no momento da redação deste artigo. A regra geral é que, se seu valor for uma cor,
comprimento ou número, essa propriedade pode ser uma propriedade de transição.
Quanto deve demorar?

duração da transição
Valores: Tempo
Predefinição: 0s

Herda: não
A duração da transição define a quantidade de tempo que a animação leva para ser
concluída em segundos (s) ou milissegundos (ms). Escolhi 0,3 segundos, o que é
apenas o suficiente para notar que algo aconteceu, mas não tanto que a transição
pareça lenta ou deixe o usuário mais lento. Não há duração correta, é claro, mas
descobri que .2s parece ser um tempo de transição popular para elementos de interface do usuário.
Experimente para encontrar a duração que faz sentido para seu aplicativo.
18. Transições, Transformações e Animação 519

TABELA 18-1. Funções de tempo

Propriedades CSS animáveis
Planos de fundo função de tempo de transição

Valores: facilidade | linear | facilidade | facilidade | facilidade de entrada | passo a passo | degrau
cor de fundo
| passos | cúbico-bezier(#,#,#,#)
posição de fundo
Predefinição: facilidade
Fronteiras e contornos
borda-fundo-cor Herda: não
largura-fundo-borda
borda-cor-esquerda A propriedade e a duração são necessárias e formam a base de uma transição, mas você
largura da borda esquerda

pode refiná-la ainda mais. Há várias maneiras pelas quais uma transição pode ser
implementada ao longo do tempo. Por exemplo, ele pode começar rápido e depois
borda-direita-cor
desacelerar, começar devagar e acelerar ou permanecer na mesma velocidade o tempo
largura da borda direita
todo, apenas para citar algumas possibilidades. Eu penso nisso como o “estilo” de
borda-top-color
transição, mas na especificação, é conhecido como função de temporização ou função de atenuação.
largura da borda
A função de tempo que você escolher pode ter um grande impacto na sensação e na
espaçamento entre bordas
capacidade de acreditar da animação, portanto, se você planeja usar transições e
cor de contorno
animações CSS, é uma boa ideia se familiarizar com as opções.
largura do contorno
Se eu definir a função de tempo de transição para easy-in-out, a transição começará
Cor e opacidade
devagar, depois acelerará e diminuirá novamente quando chegar ao fim
cor Estado.
opacidade .suave {
…
visibilidade
propriedade de transição: cor de fundo; duração da
Fonte e texto transição: 0,3s; função de temporização de transição:
facilidade de entrada;
tamanho da fonte }
espessura da fonte
A propriedade da função de tempo de transição aceita um dos seguintes valores de
espaçamento entre letras palavras-chave:
altura da linha
facilidade
recuo de texto
sombra de texto Começa devagar, acelera rapidamente e depois desacelera no final. Este é o valor
padrão e funciona bem para a maioria das transições curtas.
espaçamento entre palavras
linear
alinhamento vertical
Medidas da caixa de elementos Permanece consistente do início ao fim da transição. Por ser tão consistente, alguns
dizem que tem uma sensação mecânica.
altura
facilidade
largura
altura máxima Começa devagar, depois acelera.

largura máxima facilidade
min-altura Começa rápido, depois desacelera.
largura mínima
facilidade de entrada
margem inferior
Começa devagar, acelera e depois desacelera novamente no final. É semelhante à
Continuou...
facilidade, mas com aceleração menos pronunciada no meio.

cúbico-bezier(x1,y1,x2,y2) TABELA 18-1. Contínuo.

A aceleração de uma transição pode ser plotada com uma curva chamada curva de
margem esquerda
Bezier. As partes íngremes da curva indicam uma taxa de mudança rápida e as
margem superior
partes planas indicam uma taxa de mudança lenta. A FIGURA 18-2 mostra as curvas
fundo de preenchimento
de Bezier que representam as palavras-chave da função, bem como uma curva
personalizada que criei. Você pode ver que a curva de facilidade é um pouco plana padding-esquerda
no início, fica muito íngreme (rápida), depois termina plana (lenta). A palavra-chave padding-right
linear , por outro lado, se move a uma taxa consistente durante toda a transição. acolchoamento
Você pode obter a sensação de sua animação criando uma curva personalizada. O Posição
site Cubic-Bezier.com é uma ótima ferramenta para brincar com o tempo de transição
topo
e gerar o código resultante. Os quatro números no valor representam as posições
certo
xey das alças da curva Bezier inicial e final (os pontos rosa e azul na FIGURA 18-2).
fundo
deixei
índice z
caminho de clipe
Transformações
(não nas especificações até o momento,
mas com suporte)
transformar
origem de transformação
FIGURA 18-2. Exemplos de curvas de Bezier de Cubic-Bezier.com. À esquerda está minha curva
personalizada que começa rápido, desacelera e termina rápido.
passos(#, início|fim)
Divide as transições em várias etapas, conforme definido por uma função de

degrau. O primeiro valor é o número de etapas, e o início e o fim
palavras-chave definem se a mudança de estado ocorre no início (início) ou no
final de cada etapa. A animação em etapas é especialmente útil para animação de
quadro-chave com imagens de sprite. Para uma melhor explicação e exemplos,
recomendo o artigo “Using Multi-Step Animations and Transitions”, de Geoff Graham
em CSS-Tricks (css-tricks.com/using-multi step-animations-transitions/).
passo a passo
Altera estados em um passo, no início do tempo de duração (o mesmo que

passos(1,início)). O resultado é uma mudança repentina de estado, como se
nenhuma transição tivesse sido aplicada.
degrau
Muda os estados em um passo, ao final do tempo de duração (o mesmo que
passos(1,fim)).

É difícil mostrar as várias opções em uma página estática, mas montei uma
pequena demonstração, ilustrada na FIGURA 18-3 e disponível nas figuras
NOTA
pasta com os materiais para este capítulo. A largura de cada elemento rotulado
O W3C dividiu as funções de temporização em (branco com uma borda azul) muda ao longo de 4 segundos quando você passa o
suas próprias especificações para que sejam mouse sobre a caixa verde. Todos eles chegam em sua largura total exatamente
mais fáceis de compartilhar entre os módulos. ao mesmo tempo, mas chegam lá de maneiras diferentes. A imagem mostrada na
Está disponível em www.w3.org/TR/css-timing-1/. FIGURA 18-3 foi tirada na marca de 2 segundos, na metade da duração da
transição.
100% 100% 100%
50% 50% 50%

100%
50%
progressão
0% 50% 100% 0% 50% 100% 0% 50% 100% 0% 50% 100%

conclusão
facilidade linear facilidade facilidade
100%
50% 100%
50% 100%
50% 100%
50%
0% 50% 100% 0% 50% 100% 0% 50% 100% 0% 50% 100%
facilidade de entrada passo(4, fim) passo a passo degrau
A largura das caixas brancas é definida para fazer a transição de 0 a 100% de largura em 4 segundos.
Esta captura de tela mostra o progresso após 2 segundos (50%) para cada função de temporização.
FIGURA 18-3. Nesta demonstração da função de tempo de transição , os elementos atingem a largura
total ao mesmo tempo, mas variam na maneira como chegam lá. Se você quiser vê-lo em ação, o arquivo
ch18_figures.html está disponível com os materiais deste capítulo.

Definir um atraso
atraso de transição
Valores: Tempo
Predefinição: 0s

Herda: não
A propriedade de atraso de transição , como você pode imaginar, atrasa o início da

animação por um período de tempo especificado. No exemplo a seguir, a transição de
cor de fundo começa 0,2 segundos depois que o ponteiro se move sobre o link.
.suave {
…
propriedade de transição: cor de fundo; duração

da transição: 0,3s; função de temporização de
transição: facilidade de entrada;
atraso de transição: 0,2s;
}
A propriedade de transição abreviada

Felizmente, os autores da especificação CSS3 tiveram o bom senso de nos dar a
propriedade de transição abreviada para combinar todas essas propriedades em uma
declaração. Você já viu esse tipo de coisa com a propriedade de borda abreviada .
Aqui está a sintaxe:
transição: propriedade duração temporização-função atraso;
Os valores para cada uma das propriedades de transição-* são listados, separados
por espaços de caracteres. A ordem não é importante desde que a duração (obrigatória)
apareça antes do atraso (o que é opcional). Se você fornecer apenas um valor de
tempo, será considerado a duração.
Usando o exemplo do link azul para vermelho, podemos combinar as quatro

propriedades de transição que aplicamos até agora nesta linha:
.suave {
…
transição: cor de fundo 0,3s facilidade de entrada e saída 0,2s;

}
Definitivamente uma melhoria.
Aplicando várias transições

Até agora, alteramos apenas uma propriedade por vez, mas é possível fazer a
transição de várias propriedades de uma só vez. Vamos voltar ao exemplo do link
“awesomesauce”. Desta vez, além de mudar de azul para vermelho, gostaria que o
espaçamento entre letras aumentasse um pouco. Eu também quero que a cor do texto mude para preto,

mas mais lentamente do que as outras animações. A FIGURA 18-4 tenta mostrar essas
transições nesta página estática.
espaçamento entre
letras da cor de fundo
0,3 segundos
cor
2 segundos
FIGURA 18-4. A cor, a cor de fundo e o espaçamento entre letras mudam em ritmos diferentes.
Uma maneira de fazer isso é listar todos os valores de cada propriedade separados por vírgulas,
conforme mostrado neste exemplo:
.suave {
…
propriedade de transição: cor de fundo, cor, espaçamento entre letras; duração da

transição: 0,3s, 2s, 0,3s; função de temporização de transição: facilidade de saída,
facilidade de entrada, facilidade de saída;
}
.smooth:hover, .smooth:focus {
cor de fundo: vermelho;
espaçamento entre letras: 3px;
cor preta;
}
Os valores são comparados de acordo com suas posições na lista. Por exemplo, a transição na
propriedade de cor (segunda na lista) tem uma duração de 2s e usa a função de temporização
fácil . Se uma lista tiver menos valores que as outras, o navegador repetirá os valores da lista,
recomeçando do início. No exemplo anterior, se eu tivesse omitido o terceiro valor (.3s) para
duração da transição, o navegador retornaria ao início da lista e usaria o primeiro valor (.3s)
para espaçamento entre letras. Neste caso, o efeito seria o mesmo.
Você também pode alinhar valores para a propriedade de transição abreviada . O mesmo
conjunto de estilos que acabamos de ver também pode ser escrito da seguinte forma:

.suave {
…
transição: cor de fundo 0,3 s facilidade de saída, cor 2 s

facilidade de entrada, espaçamento entre
letras 0,3 s facilidade de saída;
}
Uma transição para todas as ocasiões
Mas e se você quiser apenas adicionar um pouco de suavidade a todas as suas alterações
de estado, independentemente de qual propriedade possa ser alterada? Para casos em que
você deseja que a mesma duração, função de temporização e atraso se apliquem a todas as
transições que possam ocorrer em um elemento, use o valor all para a propriedade de transição.
No exemplo a seguir, especifiquei que qualquer propriedade que possa ser alterada para o
elemento .smooth deve durar 0,2 segundos e animar por meio da função de entrada fácil .
.suave {
…
transição: todos os 0,2s de fácil entrada e saída;

}
Para alterações na interface do usuário, uma transição curta e sutil geralmente é tudo o que
você precisa para todas as suas transições, portanto, o valor all será útil. Bem, isso encerra
nossa lição sobre transições CSS3. Agora tente no EXERCÍCIO 18-1.
EXERCÍCIO 18-1. Experimentando transições
Neste exercício, vamos criar o rollover e os estados ativos para um link de menu
(FIGURA 18-5) com transições animadas. Eu montei um documento inicial
(exercise_18-1.html) para você na pasta de materiais para este capítulo em learningwebdesign.
com/5e/materiais. Certifique-se de estar usando um navegador de desktop atualizado para visualizar seu
trabalho (consulte a Nota). NOTA
Estado normal. Se você estiver usando um dispositivo de toque para

este exercício, perderá esse efeito porque não há
estado de foco nas telas de toque. Você pode ver o
estado de foco com um único toque. As transições

acionadas por um clique/toque ou quando a página
:hover, :focus
As cores de fundo e de borda mudam. é carregada funcionarão em todos os dispositivos,
mas não são abordadas aqui.
:ativo
Link parece estar pressionado.
ÿ
FIGURA 18-5. Neste exercício, criaremos transições entre esses estados de link.

Primeiro, dê uma olhada nos estilos que já estão aplicados. A lista foi convertida os navegadores não precisam deles. Se você quisesse oferecer suporte a
em um menu horizontal com Flexbox. A _ navegadores móveis lançados em 2013 e anteriores, também poderia incluir
O elemento foi definido para ser exibido como um elemento de bloco, os a versão prefixada -webkit- , mas como esse não é um código de produção,
sublinhados são desativados, as dimensões e o preenchimento são aplicados e a cor, não temos problema sem ele.
a cor do plano de fundo e a borda são estabelecidas. Eu usei a propriedade box
uma {
shadow para fazer parecer que os links estão flutuando para fora da página.
transição: cor de fundo 0,2s, cor da
borda 0,2s;
1. Agora vamos definir os estilos para os estados de foco e foco. Quando o usuário }
colocar o ponteiro sobre o link ou guiar, faça a cor de fundo mudar para verde
6. Salve seu documento, abra-o no navegador e tente mover o mouse sobre os
(#c6de89) e a cor da borda mudar para um tom mais escuro de verde (#a3c058).
links. Você concorda que é mais gostoso? Agora eu gostaria que você tentasse
alguns outros valores de duração. Veja se você ainda consegue ver a diferença com
a:hover, a:focus uma duração de 0,1s. Agora tente um segundo completo (1s).
{ background-color: #c6de89; Acho que você descobrirá que 1 segundo é surpreendentemente lento. Tente
cor da borda: #a3c058; configurá-lo para vários segundos e experimentar várias funções de tempo
} valores (basta adicioná-los após os tempos de duração). Você pode dizer a
2. Enquanto o usuário clica no link (:active), faça-o descer 3 pixels como se estivesse diferença? Você tem preferência? Quando terminar de experimentar, defina a
sendo pressionado. Faça isso configurando a duração de volta para 0,2 segundos.
a posição do elemento para relative e sua posição superior para 0px e, em 7. Agora vamos ver o que acontece quando adicionamos uma transição ao
seguida, altere o valor da propriedade top para o estado ativo. movimento descendente do link quando ele é clicado ou tocado.
Isso move o link 3 pixels para longe da borda superior (em outras palavras, para Faça a transição das propriedades top e box-shadow porque elas devem se
baixo). mover em conjunto. Vamos começar com uma duração de 0,2s como as outras.
NOTA: Definir o topo para 0px no estado inicial é para contornar um bug que
surge ao fazer a transição das propriedades superior, inferior, esquerda e uma {
direita . transição:
cor de fundo 0,2s, cor da
uma {
…
borda 0,2s, top 0,2s,
sombra da caixa 0,2s;
topo: 0px; }
}
a:ativo { Salve o arquivo, abra-o no navegador e tente clicar nos links.
topo: 3px; Essa transição realmente muda a experiência de usar o menu, não é? Os
}
botões parecem mais difíceis de “pressionar”. Tente aumentar a duração. Eles se
3. Logicamente, se o botão fosse pressionado, haveria menos espaço para a sombra, sentem ainda mais difíceis? Acho interessante ver o efeito que o tempo tem na
então reduziremos a distância caixa-sombra também. experiência de uma interface de usuário. É importante acertar e não fazer as coisas
parecerem lentas. Eu diria que uma transição muito curta, como 0,1 segundo - ou
mesmo nenhuma transição - manteria esses botões parecendo rápidos.
a:ativo {
topo: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,.5);
} 8. Se você pensou em aumentar a duração fez o menu
desconfortável de usar, tente adicionar um pequeno atraso de 0,5 segundo às
4. Salve o arquivo e experimente no navegador. Os links devem ficar verdes e
propriedades top e box-shadow .
mover para baixo quando você clicar ou tocar neles. Eu diria que é muito bom
assim. Agora podemos aprimorar a experiência adicionando algumas transições uma {
transição:
suaves.
cor de fundo 0,2s, cor da
5. Facilite a transição de cores de fundo e borda em mais de 0,2 segundos e veja borda 0,2s, top 0,1s 0,5s,
como isso muda a experiência de usar o menu. Estou usando a propriedade de sombra da caixa 0,1s 0,5s;
transição abreviada para manter o código simples. Também estou usando a
função de temporização de facilidade padrão no início, para que possamos omitir }
esse valor.
Acho que você descobrirá que um pouco de tempo extra faz com que a coisa
Não estou usando nenhum prefixo de fornecedor aqui porque o moderno toda pareça quebrada. Tempo é tudo!

Transformações CSS
TRANSFORMAÇÕES CSS
transformar
Elementos transformáveis
Valores: girar() | girarX() | girarY() | girarZ() | girar3d() | traduzir()
| traduzirX() | traduzirY() | escala() | escalaX() | escalaY() | Você pode aplicar a transformação
enviesar() | envieX() | desvioY() | Nenhum propriedade para a maioria dos tipos de elementos:
Nenhum • Elementos HTML com substituição

Predefinição:
conteúdo, como img, canvas, entradas de
Aplica-se a: elementos transformáveis (veja a barra lateral) formulário e mídia incorporada
Herda: não • Elementos com sua exibição definida para

bloco, bloco em linha, tabela em linha
O CSS3 Transforms Module (www.w3.org/TR/css-transforms-1) oferece aos autores uma (ou qualquer uma das tabelas-*
maneira de girar, realocar, redimensionar e inclinar elementos HTML no espaço bidimensional tipos de exibição), grade e flex
e tridimensional. Vale a pena notar de antemão que as transformações mudam a forma como Pode ser mais fácil observar os tipos de
um elemento é exibido, mas não é baseado em movimento ou tempo. elementos que você não pode transformar,
que incluem:
No entanto, você pode animar de um estado de transformação para outro usando transições
ou animações de quadro-chave, portanto, é útil aprender sobre elas no contexto da animação. • Elementos inline não substituídos, como
em ou span
• Colunas de tabela e grupos de colunas (mas
Este capítulo se concentra nas formas trans bidimensionais mais diretas porque elas têm usos quem gostaria?)
mais práticos. As transformações são suportadas em praticamente todas as versões atuais do
navegador sem prefixos de fornecedor (consulte a barra lateral “Suporte a transformações
CSS” para exceções).
NOTA
Você pode aplicar uma transformação ao estado normal de um elemento e ele aparecerá em
Na verdade, existem cinco funções de
seu estado transformado quando a página for carregada. Apenas certifique-se de que a página
transformação 2-D na especificação CSS. O
ainda seja utilizável em navegadores que não suportam transformações. É comum introduzir
quinto, matrix(), permite que você crie sua própria
uma transformação somente quando os usuários interagem com o elemento via :hover ou um
transformação combinada usando seis valores e
evento JavaScript. De qualquer forma, as transformações são boas candidatas para
alguma trigonometria foda.
aprimoramento progressivo — se um usuário do IE8 vê um elemento reto em vez de em um Existem ferramentas que podem levar um número
ângulo elegante, provavelmente não é nada demais. de transformações e combiná-los em um
função de matriz, mas o resultado não é muito

A FIGURA 18-6 mostra uma representação de quatro funções de transformação bidimensionais:
amigável. Fascinante em teoria, mas mais do que
rotate(), translate(), scale() e skew() (veja a Nota). O contorno pontilhado mostra a posição
eu quero assumir pessoalmente.
original do elemento.
girar() traduzir() escala() enviesar()
FIGURA 18-6. Quatro tipos de transformações: rotate(), translate(), scale() e skew().

Quando um elemento se transforma, sua caixa de elemento mantém sua posição original e
influencia o layout ao seu redor, da mesma forma que o espaço é deixado para trás por um
elemento relativamente posicionado. É como se a transformação magicamente pegasse os
DICA DE APOIO
pixels do elemento renderizado, mexesse com eles e os colocasse de volta no topo da
Suporte a transformações CSS página. Portanto, se você mover um elemento com transform, estará movendo apenas
uma imagem dele. Essa imagem não tem efeito sobre o layout circundante. Vamos percorrer
Até o momento, as transformações CSS são
suportadas por todos os principais navegadores as funções de transformação uma a uma, começando com o método activate().
sem prefixos de fornecedores; no entanto,
esse suporte aconteceu mais recentemente do
que o Transitions, e há mais alguns buracos.
Aqui estão algumas dicas relacionadas ao
Transformando o ângulo (girar)
navegador:
• O Internet Explorer 8 e versões anteriores não

Se você quiser que um elemento apareça em um ângulo um pouco, use o método activate()
têm suporte para transformações. A Versão função de transformação. O valor da função activate() é um ângulo especificado em graus
9 suporta Transformações com o prefixo positivos (sentido horário) ou negativos (anti-horário). A imagem na FIGURA 18-7 foi girada
-ms- . • IE 10 e 11 e todas as versões do –10 graus (350 graus) com a seguinte regra de estilo. A imagem colorida mostra a posição
original do elemento para referência
Transformações de suporte de borda sem ência.
prefixos, mas não oferecem suporte a
transformações em elementos em SVGs. img {
largura: 400px;
• Use o prefixo -webkit- se precisar
altura: 300px;
oferecer suporte aos seguintes transform: girar(-10deg);
navegadores: }
— Android v2.1 a 4.4.4 (os prefixos
Observe que a imagem gira em torno de seu ponto central, que é o ponto padrão em torno
caíram em 2017)
do qual todas as transformações acontecem. Mas você pode mudar isso facilmente com a
— OS Safari v3.2 a 8.4 (os prefixos
caíram em 2015)
propriedade transform-origin .
— Safari 8 e anteriores (os prefixos

caíram em 2015)
— Versões do Opera até v.22 (os

prefixos foram retirados em 2014)
No momento da redação deste

artigo, ainda é recomendável incluir os
prefixos -ms- e -webkit- para
transformar, mas isso pode não ser mais o
caso no momento em que você estiver lendo
isso. Confira CanIUse.com
para informações atualizadas do navegador
e ShouldIPrefix.com para
recomendações. transform: girar(-10deg);
FIGURA 18-7. Girando um elemento img usando transform: girar().

origem de transformação
Valores: porcentagem | comprimento | esquerda | centro | direito | topo | fundo
Predefinição: 50% 50%
Aplica-se a: elementos transformáveis
Herda: não
O valor para transform-origin é duas palavras-chave, medidas de comprimento ou valores de

porcentagem. O primeiro valor é o deslocamento horizontal e o segundo é o deslocamento
origem de transformação: centro superior;
vertical. Se apenas um valor for fornecido, ele será usado para ambos. A sintaxe é a mesma
que você aprendeu para a posição de fundo no Capítulo 13, Cores e Fundos. Se quiséssemos
girar nossa imagem em torno de um ponto no centro de sua borda superior, poderíamos
escrevê-la de uma das seguintes maneiras:
origem de transformação: centro superior;
origem transformada: 50%, 0%;
origem de transformação: 200px, 0;
As imagens na FIGURA 18-8 foram todas giradas 25 graus, mas de diferentes pontos de
origem. É fácil demonstrar o ponto de origem com o método activate()
função, mas lembre-se de que você pode definir um ponto de origem para qualquer uma das origem transformada: 100% 100%;
funções de transformação.
Transformando a Posição (traduzir)

Outra coisa que você pode fazer com a propriedade transform é dar à renderização do
elemento um novo local na página usando uma das três funções translate() , conforme
mostrado nos exemplos da FIGURA 18-9. A função translateX() permite mover um elemento
em um eixo horizontal; translateY() é para mover ao longo do eixo vertical; e translate()
combina os valores x e y.
transform: traduzirX(50px);
origem de transformação: 400px 0;
transform: traduzirY(25px);
transform: traduzir(50px, 25px); /* (traduzirX, traduzirY) */

FIGURA 18-8. Alterando o ponto em torno do
qual a imagem gira usando transform-origin.
transform: traduzir(90px, 60px); transformar: traduzir(-5%, -25%);
FIGURA 18-9. Movendo um elemento com a função translate() .

Forneça valores de comprimento em qualquer uma das unidades CSS ou como um valor percentual.
As porcentagens são calculadas na largura da caixa delimitadora , ou seja, de borda a borda (que,
aliás, é como as porcentagens são calculadas em SVG, de onde as transformações foram
adaptadas). Você pode fornecer valores positivos ou negativos, conforme mostrado na FIGURA 18-9.
Se você fornecer apenas um valor para a função abreviada translate() , presumirá ser o valor
translateX e translateY será definido como zero.
Então, translate(20px) seria equivalente a aplicar tanto translateX(20px)
e traduzirY(0).
Como você gosta da propriedade de transformação até agora? Temos mais duas funções.
Transformando o tamanho (escala)

Faça um elemento parecer maior ou menor usando uma das três funções de escala: scaleX()
(horizontal), scaleY() (vertical) e a abreviação scale().
O valor é um número sem unidade que especifica uma proporção de tamanho. Este exemplo torna
uma imagem 150% de sua largura original:
uma imagem {
transformar: escalaX(1,5);
}
A abreviação scale() lista um valor para scaleX e um valor para scaleY. Este exemplo torna um
elemento duas vezes mais largo, mas metade da altura do original:
uma imagem {
transformar: escala(2, .5);

}
Ao contrário de translate(), no entanto, se você fornecer apenas um valor para scale(), ele será
usado como fator de escala em ambas as direções. Portanto, especificar scale(2) é o mesmo que
aplicar scaleX(2) e scaleY(2), que é intuitivamente do jeito que você gostaria que fosse.
A FIGURA 18-10 mostra os resultados de todos os nossos esforços de dimensionamento.
transformar: escala(1,25); transformar: escala(.75); transformar: escala(1.5, .5);
FIGURA 18-10. Alterando o tamanho de um elemento com a função scale() .

Tornando-o inclinado (inclinado)
A coleção peculiar de propriedades skew — skewX(), skewY() e a mão curta skew() —

altera o ângulo do eixo horizontal ou vertical (ou ambos os eixos) por um número
especificado de graus. Quanto a translate(), se você fornecer apenas um valor, ele será
usado para skewX() e skewY() será definido como zero.
A melhor maneira de ter uma ideia de como o skewing funciona é dar uma olhada em
alguns exemplos (FIGURA 18-11):
transformar: skewX(15deg);
uma imagem {
transformar: skewX(15deg);
}
uma imagem {
transformar: skewY(30deg);
}
uma imagem {
transform: skew(15deg, 30deg);

}
Aplicando várias transformações
É possível aplicar mais de uma transformação a um único elemento listando as funções e

transformar: skewY(30deg);
seus valores, separados por espaços, assim:
transform: função(valor) função(valor);
No exemplo da FIGURA 18-12, fiz a imagem da floresta ficar maior, inclinar um pouco e
mover para baixo e para a direita quando o mouse está sobre ela ou quando está em foco:
img:hover, img:foco {
transform: dimensionar (1,5) girar (-5 graus) traduzir (50px,30px);
}
:hover, :focus
Estado normal girar(), traduzir() e dimensionar() aplicados
transform: skew(15deg, 30deg);
FIGURA 18-11. Inclinando um

elemento usando o skew()
função.
FIGURA 18-12. Aplicando scale(), rotate() e translate() a um único elemento.

É importante observar que as transformações são aplicadas na ordem em que são

listadas. Por exemplo, se você aplicar um translate() e depois girar(), obterá um resultado
diferente do que com umturn() e depois um translate(). A ordem importa.
Outra coisa a observar é que, se você quiser aplicar uma transformação

adicional em um estado diferente (como :hover, :focus ou :active), precisará
repetir todas as transformações já aplicadas ao elemento. Por exemplo,
este elemento é girado 45 graus em seu estado normal. Se eu aplicar uma escala()
transform no estado hover , eu perderia a rotação, a menos que eu a declarasse
explicitamente novamente:
uma {
transformar: girar (45 graus);

}
a: pairar {
transformar: escala(1,25); /* girar em um elemento seria perdido */
}
Para obter a rotação e a escala, forneça os dois valores de transformação:

a: pairar {
transform: girar (45 graus) escala (1,25); /* gira e dimensiona */
}
Transformações Smoooooooth
As múltiplas transformações aplicadas à imagem da floresta de sequoias parecem

interessantes, mas pode ser melhor se chegarmos lá com uma animação suave em vez
de apenas BAM! Agora que você sabe sobre transições e transformações, vamos juntá-
las e fazer alguma mágica acontecer. E por “mágica”, é claro que quero dizer alguns
efeitos básicos de animação entre dois estados. Faremos isso juntos, passo a passo, no
EXERCÍCIO 18-2.
EXERCÍCIO 18-2. Transição de transformações
Neste exercício, faremos com que as fotos de viagem na galeria mostrada na FIGURA 18-13 cresçam
e girem em um ângulo quando o usuário passar o mouse sobre elas - e faremos uma transição suave.
Um documento inicial (exercise_18-2.html) e todas as imagens estão disponíveis na pasta de materiais
deste capítulo.
1. Abra o Exercise_18-2.html em um editor de texto, e você verá que já existem estilos que organizam
os itens da lista horizontalmente e aplicam um leve sombreamento. A primeira coisa que faremos é
adicionar a propriedade transform para cada imagem.
2. Queremos que as transformações tenham efeito somente quando o mouse estiver sobre a imagem
ou quando a imagem estiver em foco, portanto, a propriedade transform deve ser aplicada aos
estados :hover e :focus . Como quero que cada imagem incline um pouco diferente, precisaremos
escrever uma regra para cada uma, usando seu ID exclusivo como seletor. Você pode salvar e
verificar seu trabalho quando terminar.

FIGURA 18-13. As fotos ficam maiores e inclinadas em :hover e :focus para ajudar . Uma transição é usada
a suavizar a mudança entre os estados. Você pode ver como funciona quando terminar este exercício (ou
confira na página ch18_figures.html).
a:hover #img1, a:focus #img1 { 4. Enquanto estivermos dando a impressão de levantar as fotos
transform: girar(-3deg); fora da tela, vamos fazer a sombra projetada parecer um pouco mais distante
aumentando o deslocamento e o desfoque e clareando o tom de cinza. Todas
} a:hover #img2, a:focus #img2 { as imagens devem ter o mesmo efeito, então adicione uma regra usando a:hover
transform: girar(5deg); } img como seletor.
a:hover #img3, a:focus #img3
{ transform: girar(-7deg); } a:hover a:hover img
#img4, a:focus #img4 { transform: { box-shadow: 6px 6px 6px rgba(0,0,0,.3); }
girar(2deg); }
Salve seu arquivo e faça o check-out em um navegador. As imagens devem

inclinar e parecer maiores quando você passar o mouse sobre elas. Mas a ação
é meio chocante. Vamos corrigir isso com uma transição.
NOTA 5. Adicione a propriedade abreviada de transição ao img normal

estado (ou seja, não em :hover ou :focus). A propriedade que queremos
No momento da redação deste artigo, os prefixos ainda são recomendados para a transformação fazer a transição neste caso é transform. Defina a duração para 0,3
propriedade, portanto, para código de qualidade de produção, a regra completa segundos e use a função de tempo linear .
ficaria assim:
img {
a:hover #img1, a:focus #img1 { …
-webkit-transform: girar(-3deg); transição: transforme 0,3s linear;

-ms-transform: girar(-3deg); /* para IE9 */ }
transform: girar(-3deg);
}
NOTA
Como estamos verificando nosso trabalho em um navegador moderno, podemos
A propriedade de transformação prefixada também deve ser incluída no contexto
omitir os prefixos para este exercício.
de uma transição, conforme mostrado nesta declaração totalmente prefixada:
-transição do webkit: -transformação do webkit .3s linear;

3. Agora vamos aumentar um pouco as imagens também, para dar aos visitantes
uma visão melhor. Adicione scale(1.5) a cada um dos valores de transformação . O prefixo -ms- não é necessário porque as transições não são suportadas pelo
Aqui está o primeiro; você faz o resto: IE9. Esses usuários verão uma mudança imediata na imagem transformada sem
a transição suave, o que é bom.
a:hover #img1 {
transform: girar(-3 graus) escala(1,5);
}
E isso é tudo o que há para isso! Você pode tentar brincar com diferentes durações
Observe que meus arquivos de imagem são criados em tamanho maior e, em e funções de tempo, ou tentar alterar as transformações ou seus pontos de origem
seguida, reduzidos para a visualização em miniatura. Se começarmos com pequenos
para ver quais outros efeitos você pode criar.
imagens e ampliadas, elas ficariam ruins.

Transformações 3D
Além das funções de transformação bidimensionais que acabamos de ver, a especificação

CSS Transforms também descreve um sistema para criar uma sensação de espaço e
perspectiva tridimensionais. Combinado com transições, você pode usar transformações
3-D para criar interfaces interativas ricas, como carrosséis de imagens, cartões flippable
ou cubos giratórios! A FIGURA 18-14 mostra alguns exemplos de interfaces criadas com
transformações 3-D.
Vale a pena notar que este método não cria objetos 3-D com uma sensação de volume;
ele simplesmente inclina a caixa do elemento plano em três eixos (o especialista em
animação Val Head os chama de “cartões postais no espaço”). O exemplo de cubo rotativo
na figura apenas costura seis caixas de elementos em diferentes ângulos. Dito isso, as
transformações 3-D ainda adicionam uma profundidade interessante a uma página da Web
plana.
Capas de livros animados por Marco Barria Exemplo de ferramentas de transformação do Webflow
tympanus.net/Development/AnimatedBooks/ 3d-transforms.webflow.com
Animação do cartaz do filme por Marco Kuiper Cubo Rotativo CSS 3D por Paul Hayes
demo.marcofolio.net/3d_animation_css3/ paulrhayes.com/experiments/cube-3d/
FIGURA 18-14. Alguns exemplos de transformações 3-D. As capas de livros, pôsteres de filmes e
o cubo 3-D também contam com efeitos de animação bacanas, então vale a pena acessar os links
e conferir. O Webflow é uma ferramenta visual de web design que inclui a capacidade de criar
elementos transformados em 3D.
Transformações 3-D não são uma habilidade necessária para pessoas que estão
começando em web design, então não vou entrar em detalhes aqui, mas vou dar uma
amostra do que é preciso para adicionar um terceiro dimensão para um projeto. Se você
quiser saber mais, os tutoriais a seguir são bons lugares para começar (embora as
informações de suporte do navegador que eles contêm possam estar desatualizadas):

• “Aventuras na Terceira Dimensão: Transformações CSS 3D” por Peter Gasston

(coding.smashingmagazine.com/2012/01/06/adventures-in-the third-dimension-
css-3-d-transforms/)
• “Intro to CSS 3D Transforms” por David DeSandro (desandro.github.

com/3dtransforms/)
Para dar um exemplo bem básico, vou usar as imagens do EXERCÍCIO 18-2 e
organizá-las como se estivessem em uma galeria 3-D no estilo carrossel (FIGURA
18-15).
FIGURA 18-15. Nossas imagens de aquário dispostas no espaço…espaço…espaço…
A marcação é a mesma lista não ordenada usada no exercício anterior:

<ul>
<li><a href=""><img src="anchovies.jpg" id="img1" alt=""></a></li>
<li><a href=""><img src="jellyfish1.jpg" id="img2" alt=""></a></li>
<li><a href=""><img src="bluejellyfish.jpg" id="img3" alt=""></a>
</li>
<li><a href=""><img src="seadragon.jpg" id="img4" alt=""></a></li>
</ul>
O primeiro passo é adicionar alguma quantidade de “perspectiva” ao elemento

que o contém usando a propriedade perspective . Isso informa ao navegador que
os elementos filho devem se comportar como se estivessem no espaço 3D. O
valor da propriedade perspective é algum número inteiro maior que zero que
especifica uma distância da origem do elemento no eixo z. Quanto menor o valor,
mais extrema a perspectiva. Descobri que valores entre 300 e 1.500 são razoáveis,
mas isso é algo com o qual você precisa se preocupar até obter o efeito desejado.
NOTA
ul { Ao usar o prefixo -webkit- para

largura: 1000px;
transformar, inclua também a versão
altura: 100px;
tipo de estilo de lista: prefixada da perspectiva ( -webkit
nenhum; preenchimento: 0; -perspective).
margem: 0; perspectiva:
600; }

Animação de quadro-chave
A propriedade perspective-origin (não mostrada) descreve a posição de seus

olhos em relação aos itens transformados. Os valores são uma posição horizontal
(esquerda, centro, direita ou um comprimento ou porcentagem) e uma posição
vertical (superior, inferior, central ou um valor de comprimento ou porcentagem).
O padrão (FIGURA 18-15) é centralizado vertical e horizontalmente (origem em
perspectiva: 50% 50%). A propriedade final relacionada à transformação é
backface-visibility, que controla se o lado reverso do elemento é visível quando ele gira.
Com o espaço 3-D estabelecido, aplique uma das funções de transformação 3-D
a cada elemento filho - neste caso, o li dentro do ul. As funções 3-D incluem
traduzir3d, traduzirZ, escala3d, escalaZ, girar3d, girarX, girarY, girarZ e
matriz3d . Você deve reconhecer alguns termos lá.
As funções *Z definem a orientação do objeto em relação ao eixo z (imagine-o indo do
seu nariz até esta página, enquanto os eixos xey ficam planos na página).
Em nosso exemplo na FIGURA 18-15, cada li é girado 45 graus em torno de seu eixo
y (eixo vertical) usando a função girarY , que funciona como se as caixas de elementos
estivessem girando em torno de um pólo.
Compare o resultado com a FIGURA 18-16, na qual cada li é girado em seu eixo x
(eixo horizontal) usando girarX. É como se as caixas dos elementos estivessem
girando em torno de uma barra horizontal.
li {
flutuar:
esquerda; margem direita: 10px;
transform: girarX(45deg); }
FIGURA 18-16. A mesma lista de imagens giradas em seus eixos horizontais com rotateX().
Obviamente, estou apenas arranhando a superfície do que pode ser feito com
transformações 3-D, mas isso deve fornecer um modelo mental de como isso funciona.
A seguir, apresentarei uma maneira mais sofisticada de colocar suas páginas da web
em movimento.
ANIMAÇÃO DE QUADRO-CHAVE
O CSS Animations Module permite que os autores criem animações de quadros-chave

reais e honestas. A FIGURA 18-17 mostra apenas alguns exemplos que você pode ver
em ação online. Ao contrário das transições que vão de um estado inicial para

As transições CSS são

animações com dois
quadros-chave: um estado inicial

e um estado final. Mais
animações complexas
MADMANIMATION Como aprendi a andar
por Anthony Calzadilla e Andy Clarke stu por Andrew Wang-Hoyer exigem muitos quadros-chave
andnonsense.co.uk/content/demo/ andrew.wang-hoyer.com/experiments/ para controlar as alterações de
madmananimation/—dica: clique em ASSISTIR andando/
propriedade na sequência.
Adorável submarino animado Banner da Web Animado

por Alberto Jerez por Caleb Jacob
codepen.io/ajerez/pen/EaEEOW tympanus.net/codrops/2012/01/10/
animado-web-banners-com-css3/
FIGURA 18-17. Exemplos de animações usando apenas CSS.
um estado final, a animação de quadro-chave permite especificar explicitamente outros estados em NOTA
pontos ao longo do caminho, permitindo um controle mais granular da ação.
A animação de quadro-chave é conhecida como
Esses “pontos ao longo do caminho” são estabelecidos por quadros -chave que definem o início ou o
animação explícita porque você programa seu
fim de um segmento de animação. comportamento. Por outro lado, as transições
são um exemplo de animação implícita porque
Criar animações de quadro-chave é complexo e mais do que posso abordar aqui.
são acionadas somente quando uma propriedade
Mas gostaria que você tivesse uma ideia de como funciona, então vou esboçar os mínimos detalhes.
é alterada.
Os seguintes recursos são bons pontos de partida para aprender mais:
• CSS Animations Level 1 (um rascunho de trabalho no momento da redação deste artigo) em www.
w3.org/TR/css-animations-1/.
• Transições e Animações em CSS por Estelle Weyl (O'Reilly).
• “Recursos de Animação e UX” por Val Head (valhead.com/ui-animation/).

Val compilou uma mega lista de recursos sobre animação na web, incluindo links para tutoriais,
artigos, ferramentas, galerias e muito mais. Não se limita à animação de quadro-chave CSS, mas
contanto que você esteja se aprofundando na animação, você pode confiar em Val para apontar
coisas boas.

• Curso “CSS: Animação” por Val Head em Lynda.com (www.lynda.com/

Ferramentas de animação CSS-tutorials/CSS-Animation/439683-2.html). Você precisará de uma assinatura do
Lynda.com, mas se estiver no modo de aprendizado de web design, pode ser um bom
Se você quiser adicionar um efeito de
investimento.
animação simples a um elemento - um giro
rápido aqui ou um pouco de oscilação ali -
• “CSS Animation for Beginners” de Rachel Cope (robots.thoughtbot.com/
você pode encontrar um efeito pré-fabricado
css-animação-para-iniciantes). Este é um tutorial claramente escrito com muitos exemplos.
que pode aplicar ao seu design. Aqui estão
alguns sites que fornecem CSS pronto para
efeitos de animação comuns (alguns
• “O Guia para Animação CSS: Princípios e Exemplos” por Tom Waterhouse
também usam plug-ins JQuery, mas
(www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-
explicam como usá-los):
examples/). Este tutorial vai além do código CSS para incluir dicas para criar efeitos de
• Animate.css por Daniel Eden
animação natural.
(daneden.github.io/animate.css/)
• Folha de dicas de animação CSS por
Justin Aguilar (www.justinaguilar.
com/animations/index.html)
Estabelecendo os quadros-chave
• Kit de Animação CSS AngryTools O processo de animação tem duas partes:
(angrytools.com/css/animation/)
1. Estabeleça os quadros-chave com uma regra @keyframes .
2. Adicione as propriedades de animação aos elementos que serão animados.
Aqui está um conjunto muito simples de quadros-chave que altera a cor de fundo de um
elemento ao longo do tempo. Não é uma animação muito cheia de ação, mas deve fornecer
uma compreensão básica do que uma regra @keyframes faz.
0% vermelho
@keyframes cores {
0% { cor de fundo: vermelho; }
20% { cor de fundo: laranja; }
40% { cor de fundo: amarelo; }
60% { cor de fundo: verde; }
20% laranja
80% { cor de fundo: azul; }
100% { cor de fundo: roxo; }
}
O keyframes at-rule identifica o nome da animação, os estágios da animação representados

40% amarelo
por valores percentuais (%) e as propriedades CSS que são afetadas para cada estágio. Aqui
está a aparência de uma regra @keyframes abstraída em sua sintaxe:
anos 20
60% verde @keyframes nome da animação {

quadro- chave { propriedade:
valor; } / * quadros-chave adicionais */
}
80% azul A regra @keyframes de exemplo diz: crie uma sequência de animação chamada “cores”.
No início da animação, a cor de fundo do elemento deve ser vermelha; em 20% durante o
tempo de execução da animação, a cor de fundo deve ser laranja; e assim sucessivamente,
até chegar ao final da animação. O navegador preenche todos os tons de cor entre cada
100% roxo quadro-chave (ou interpola , para usar a linguagem). Isso é representado da melhor forma
que pude na FIGURA 18-18.
FIGURA 18-18. Animação através das cores Cada valor percentual e a declaração de propriedade/valor definem um quadro-chave na
do arco-íris usando quadros-chave.
sequência de animação.

Como alternativa às porcentagens, você pode usar a palavra-chave from para o início de
uma sequência de animação (equivalente a 0%) e a palavra-chave to para indicar o final
(100%). O exemplo a seguir faz um elemento deslizar da direita para a esquerda à medida
DICA DE SUPORTE
que a margem esquerda se reduz a 0:
@keyframe slide { Navegador de quadro-chave CSS

de { margem esquerda: 100% } Apoiar
para { margem esquerda: 0%; }
} Todas as versões atuais dos principais
navegadores para desktop e dispositivos móveis
suportam animação de quadro-chave CSS sem
prefixos de fornecedor. Aqui estão as exceções:
Adicionando Propriedades de Animação
• O Internet Explorer 9 e versões anteriores
Agora podemos aplicar essa sequência de animação a um elemento ou a vários elementos não oferecem suporte à animação de
no documento usando uma coleção de propriedades de animação que são muito quadro-chave. A animação aparecerá em seu
semelhantes ao conjunto de propriedades de transição que você já conhece. estado inicial, portanto, certifique-se de que o
primeiro quadro seja um substituto aceitável.
Vou aplicar a animação do arco-íris à div #magic no meu documento: • Você precisa usar o prefixo -webkit para
<div id="magic">Mágica!</div> oferecer suporte aos seguintes

navegadores: Safari e iOS Safari 8 e
Na regra CSS para #magic, tomo decisões sobre a animação que quero aplicar: anterior (2014), Chrome 41 e anterior (2015),
Opera 29 e anterior (2015) e Android 4.4.4 e
anterior ( 2014). Enquanto escrevo isso,
• Qual animação usar (nome da animação) (Obrigatório). esses navegadores representam tráfego
suficiente para que ainda seja recomendado
• Quanto tempo deve demorar (animação-duração) (Obrigatório).
incluir o prefixo -webkit , mas isso pode
• A maneira como deve acelerar (função de temporização de animação). mudar com base em quando você está
desenvolvendo e em quem é seu público-alvo.
Essa propriedade usa as mesmas palavras-chave de função de tempo que abordamos
para transições CSS.
• Se deve pausar antes de começar (atraso de animação).

Observe que você precisa do quadro-
Parece familiar, certo? Existem algumas outras propriedades específicas de animação chave prefixado at-rule, bem como das
para conhecer também: propriedades animation-* prefixadas . Como
sempre, as regras padrão, sem prefixo,
animação-iteração-contagem
seguem as versões com prefixo.
Quantas vezes a animação deve se repetir. Isso pode ser definido como um número
@-webkit-keyframes
inteiro ou infinito.
-webkit-animation-*
direção de animação
Se a animação é reproduzida para frente (normal), para trás (reverso) ou alternando

para frente e para trás começando no início (alternativo) ou alternando a partir do
final (alternativo-reverso).
modo de preenchimento de animação
O modo de preenchimento de animação determina o que acontece com a animação

antes de começar e depois de terminar. Por padrão (nenhum), a animação mostra
quaisquer valores de propriedade não especificados por meio de @keyframes. Se
você quiser que o último quadro-chave permaneça visível após a reprodução da
animação, use a palavra-chave for wards . Se houver um atraso definido na animação
e você quiser que o primeiro quadro-chave seja exibido durante esse atraso, use para
trás. Para manter os estados inicial e final, use ambos.

estado de reprodução de animação
Se a animação deve estar em execução ou pausada ao carregar. O estado de

reprodução pode ser ativado e desativado com base na entrada do usuário com
JavaScript ou ao passar o mouse.
A propriedade animation-name informa ao navegador qual sequência de quadro-chave

aplicar à #magic div. Também configurei a função de duração e tempo e usei a contagem
de iteração de animação para fazê-la repetir infinitamente. Eu poderia ter fornecido um valor
numérico específico, como 2 para jogar duas vezes, mas quão divertidos são apenas dois
arco-íris? E por diversão, configurei a direção da animação para alternar, o que faz com
que a animação seja reproduzida no sentido inverso depois de ser reproduzida para frente.
Aqui está a regra resultante para a div animada:
#Magia {
…
nome da animação: cores;

duração da animação: 5s;
função de temporização de animação: linear;
animação-iteração-contagem: infinito;
direção de animação: alternativa;
}
Isso fica um pouco verboso, especialmente quando você considera que cada propriedade
também pode seguir uma versão prefixada. Você também pode usar a propriedade abreviada
de animação para combinar os valores, assim como fizemos para a transição:
#Magia {
animação: cores alternadas infinitas lineares 5s;
}
Esses são os elementos básicos da criação de quadros-chave e da aplicação de animações

a um elemento na página. Para fazer os elementos se moverem (o que normalmente
chamamos de “animação”), use quadros-chave para alterar a posição de um elemento na
tela com traduzir (a melhor opção para desempenho) ou com as propriedades superior,
direita, inferior e esquerda . Quando os quadros-chave são interpolados, o objeto se move
suavemente de uma posição para outra. Você também pode animar as outras funções de
transformação, como escala e inclinação.
Quando usar a animação de quadro-chave

Para manter meu exemplo simples, optei por alterar apenas a cor de fundo de um elemento
de botão, mas é claro que animações de quadro-chave podem ser usadas para criar
animações reais, especialmente quando combinadas com as funções de transformação CSS
para girar e mover elementos na página . Se você só precisa mudar um elemento de um
estado para outro, uma transição é o caminho a percorrer. Mas se você tiver uma animação
linear, como mover um personagem, um objeto ou suas partes, a animação de quadro-chave
é a escolha mais apropriada.
Para animações de quadro-chave mais complexas, particularmente aquelas que mudam com
a interação do usuário ou exigem física complexa, usar JavaScript para animação pode ser
uma escolha melhor do que animação CSS. A animação JavaScript também tem

Inspetores de Animação
Tanto o Chrome quanto o Firefox oferecem ferramentas para inspecionar e modificar
animações da web (FIGURA 18-19). Ao inspecionar um elemento animado nas Ferramentas do
desenvolvedor, clique na guia Animações para ver uma linha do tempo de todas as animações
aplicadas a esse objeto. Você pode desacelerar a animação para revelar o que está acontecendo
em um nível detalhado. Você também pode modificar a animação fazendo alterações no tempo,
atraso, duração e quadros-chave. Para obter mais informações, consulte o seguinte:
• Firefox Animation Inspector (developer.mozilla.org/en-US/docs/Tools/Page_

Inspetor/How_to/Work_with_animations)
• Inspetor de animação do Chrome (developers.google.com/web/tools/chrome devtools/

inspect-styles/animations)
Inspetor de animação do Firefox
Inspetor de animação do Chrome
FIGURA 18-19. Os inspetores de animação fazem parte das ferramentas de desenvolvedor oferecidas
pelos navegadores Firefox e Chrome.
melhor suporte em navegadores mais antigos, tornando-se preferível se a animação for

crítica para a missão da página. A animação de quadro-chave CSS é uma boa solução
para animações simples usadas como aprimoramento de uma experiência básica.
Devo observar que, enquanto escrevo isso, há muita empolgação na comunidade da web
para animar gráficos SVG. Quando você coloca o código-fonte de um SVG diretamente
no documento HTML, os elementos nele estão disponíveis para serem animados. No
momento da redação deste artigo, ainda existem limitações e problemas de suporte ao
navegador em relação ao uso de CSS para animar SVGs, mas à medida que o suporte ao
navegador cresce, essa abordagem parece muito promissora. Enquanto isso, o JavaScript
tem melhor acesso às propriedades SVG, tem melhor suporte ao navegador e é a solução
mais comum para animação SVG.

Empacotando
EMPACOTANDO
Espero ter ajudado você a entender como o CSS pode ser usado para adicionar um pouco de
Precisa de um pouco de inspiração? movimento e suavidade às suas páginas. Para adicionar movimento a uma página da Web,
temos Transições CSS para suavizar as alterações de um estado para outro e Animação de
O blog Codrops (tympanus.net/
quadro-chave CSS para animar uma série de estados. Também analisamos CSS Transforms
codrops/), com curadoria de Manoela
para reposicionar, girar, redimensionar ou inclinar um elemento quando ele é renderizado na
Ilic e Pedro Botelho, é um tesouro
de exemplos de transições, tela.
transformações e animações CSS.
Usada com cuidado, a animação pode tornar suas interfaces mais intuitivas e aprimorar a
Confira o Playground para
experiências interessantes (como a personalidade da sua marca. São coisas poderosas, mas com grandes poderes vêm grandes
coleção de efeitos de foco na FIGURA responsabilidades. Para aprender a usar a animação da web para aprimorar a experiência do
18-20) e a seção Tutoriais para obter usuário de maneira significativa, recomendo o livro Designing Interface Animation: Meaningful
informações passo a passo com Motion for User Experience de Val Head (Rosenfeld Media).
exemplos de código.
Agora vamos ver se você estava prestando atenção com um quiz de 12 perguntas!
TESTE-SE
Você acha que conhece transições, transformações e animações de quadro-chave? Aqui estão
algumas perguntas para descobrir (respostas no Apêndice A):
1. O que é interpolação?
FIGURA 18-20. Um dos muitos

exemplos de transições, transformações
e animações CSS no blog Codrops. 2. Se uma transição tivesse quadros-chave, quantos ela teria?
3. Escreva a declaração de transição (propriedade e valor) que você usaria para realizar o
seguinte:
uma. Aguarde 0,5 segundos antes do início da transição.
b. Faça a transição acontecer a uma velocidade constante.
c. Faça a transição durar 0,5 segundos.
d. Faça as linhas de texto se afastarem lentamente.

Teste-se
4. Qual dos seguintes você não consegue animar?
uma. largura
b. preenchimento
c. transformação de texto
d. espaçamento entre palavras
5. Qual função de temporização será usada se você omitir o tempo de transição

propriedade da função ? Descreva sua ação.
6. Na transição a seguir, o que .2s descreve?
transição: cor .2s linear;
7. Qual transição terminará primeiro?
uma. transição: largura 300ms facilidade de entrada;
b. transição: largura 300ms facilidade de saída;
8. Escreva a declaração de transformação para realizar o seguinte:
uma. Incline o elemento 7 graus no sentido horário.
b. Reposicione o elemento 25 pixels para cima e 50 pixels para a esquerda.
c. Gire o elemento de seu canto inferior direito.
d. Faça uma exibição de imagem de 400 pixels de largura a 500 pixels de largura.
9. Na declaração de transformação a seguir, o que o valor 3 descreve?
transformar: escala (2, 3)

Teste-se
10. Qual transformação 3-D pareceria mais angulada e dramática?
uma. perspectiva: 250;
b. perspectiva: 1250;
11. O que acontece na metade desta animação?
@keyframes borda-protuberância {
from { largura da borda: 1px; } 25%
{ largura da borda: 10px; } 50%
{ largura da borda: 3px; } para
{ largura da borda: 5px; }
}
12. Escreva a declaração de animação que você usaria para realizar o

Segue:
uma. Faça a animação ser reproduzida ao contrário.
b. Faça toda a animação durar 5 segundos.
c. Aguarde 2 segundos antes de executar a animação.
d. Repita a animação três vezes e pare.
e. O estado final da animação permanece visível após a reprodução da animação.

Revisão CSS: transições, transformações e animação
REVISÃO CSS: TRANSIÇÕES,

TRANSFORMAÇÕES E ANIMAÇÃO
Aqui está um resumo das propriedades cobertas neste capítulo.
animação Uma propriedade abreviada que combina propriedades de animação
nome da animação Especifica a sequência de animação nomeada a ser aplicada
duração da animação Especifica a quantidade de tempo que a animação dura
função de temporização de animação Descreve a aceleração da animação
animação-iteração-contagem Indica o número de vezes que a animação se repete
direção de animação Especifica se a animação é reproduzida para frente, para trás ou alterna para
frente e para trás
animação-play-state animação- Especifica se a animação está em execução ou pausada
atraso Indica a quantidade de tempo antes que a animação comece a ser executada
modo de preenchimento de animação Substitui os limites de quando as propriedades de animação podem ser
aplicadas
backface-visibility Determina se o lado reverso de um elemento pode ser visível em

transformações 3-D
perspectiva Estabelece um elemento como um espaço 3D e especifica a profundidade

percebida
perspectiva-origem Especifica a posição do seu ponto de vista em um espaço 3D
transformar Especifica que a renderização de um elemento deve ser alterada por meio de
uma das funções de transformação 2-D ou 3-D
origem de transformação Indica o ponto em torno do qual um elemento é transformado
estilo de transformação Preserva um contexto 3-D quando os elementos transformados são

aninhado
transição Uma propriedade abreviada que combina propriedades de transição
propriedade de transição Define qual propriedade CSS será transferida
duração da transição Especifica a quantidade de tempo que a animação de transição dura
função de tempo de transição Descreve a maneira pela qual a transição acontece

(mudanças nas taxas de aceleração)
atraso de transição Especifica a quantidade de tempo antes do início da transição

CAPÍTULO
MAIS CSS 19
TÉCNICAS
Até agora você tem uma base sólida para escrever folhas de estilo. Você pode estilizar caixas NESTE CAPÍTULO
de texto e elementos, flutuar e posicionar objetos, criar layouts de página responsivos usando
Formas de estilo
Flexbox e Grid e até adicionar efeitos sutis de animação aos seus designs. Mas existem
algumas técnicas mais comuns que você deve conhecer. Propriedades de estilo para tabelas
Usando uma redefinição ou normalizador CSS

Se você olhar para a lista “Neste capítulo” , verá que este capítulo é uma espécie de saco
de compras. Ele começa com abordagens gerais para estilizar formulários e as propriedades Técnicas de substituição de imagem
especiais para formatação de tabelas. Abordaremos outros truques do comércio, incluindo

Sprites CSS
limpar estilos de navegador com uma redefinição de CSS, usar imagens no lugar de texto
(somente quando necessário!), reduzir o número de solicitações de servidor com sprites CSS Detecção de recursos CSS
e verificar se um navegador suporta um determinado Recurso CSS. Vamos cavar!
FORMAS DE ESTILO
Os formulários da Web podem parecer um pouco confusos imediatamente sem a aplicação
de estilos (FIGURA 19-1), então você certamente desejará dar a eles uma aparência mais
profissional usando CSS. Não apenas eles parecem melhores, mas estudos mostram que os
formulários são muito mais fáceis e rápidos de usar quando os rótulos e as entradas estão
bem alinhados. Nesta seção, veremos como vários elementos de formulário podem ser
estilizados.
Agora, não vou mentir: estilizar formulários é uma arte obscura por causa da variedade de
maneiras pelas quais os navegadores lidam com elementos de formulário. E para formulários
personalizados realmente sofisticados, você geralmente precisará recorrer ao JavaScript.
Mas os esforços valem a pena para melhorar a usabilidade.
Não há propriedades CSS especiais para estilizar formulários; basta usar as propriedades
padrão de cor, plano de fundo, fonte, borda, margem e preenchimento que
547
Formas de estilo
FIGURA 19-1. Os formulários tendem a ser feios e difíceis de usar apenas com HTML.
Não se preocupe – este é aprimorado na FIGURA 19-2.
você aprendeu nos capítulos anteriores. A seguir está um resumo rápido dos tipos de coisas que você
Fontes Coordenadas pode fazer para cada tipo de controle de formulário.
Por padrão, um navegador pode usar Entradas de texto (texto, senha, e-mail, pesquisa, tel, url)
fontes diferentes em tamanhos diferentes para
Altere a aparência da própria caixa com largura, altura, cor de fundo, imagem de fundo,
vários tipos de entrada. Por exemplo, ele pode
borda, raio da borda, margem, preenchimento e sombra da caixa. Você também pode
usar a fonte do sistema nos botões e uma fonte
de largura constante como Courier estilizar o texto dentro do campo de entrada com a cor
para entradas de área de texto . Se você propriedade e as várias propriedades de fonte.
quiser que todas as entradas usem a mesma
O elemento textarea
fonte que o texto ao redor da página, você
pode forçar os elementos do formulário a herdar
Isso pode ser estilizado da mesma forma que os campos de entrada de texto. elementos
configurações de fonte:
textarea usam uma fonte monoespaçada por padrão, então você pode querer mudar isso para
botão, entrada, seleção, combinar com seus outros campos de entrada de texto. Como existem várias linhas, você também
área de texto { pode especificar a altura da linha. Observe que alguns navegadores exibem uma alça no canto
família de fontes: herdar;
tamanho da fonte: 100% inferior direito da caixa de área de texto que a torna redimensionável, mas você pode desativá-la
} adicionando o estilo resize: none. As áreas de texto são exibidas como bloco embutido por
padrão, mas você pode alterá-las para bloquear
com a propriedade de exibição .
Entradas de botão (enviar, redefinir, botão)
Aplique qualquer uma das propriedades da caixa para enviar e redefinir botões (largura,
altura, borda, plano de fundo, margem, preenchimento e sombra da caixa). Vale a pena
notar que os botões são definidos para o modelo de dimensionamento de caixa de borda por padrão.
A maioria dos navegadores também adiciona um pouco de preenchimento por padrão, que pode
ser substituído pelo seu próprio valor de preenchimento. Você também pode estilizar o texto que
aparece nos botões.
Botões de rádio e caixa de seleção
A melhor prática para botões de rádio e caixa de seleção é deixá-los em paz. Se você for
persistente, poderá usar JavaScript para alterar os botões completamente.

Menus suspensos e de seleção (selecionar)
Você pode especificar a largura e a altura para um elemento de seleção , mas observe
que ele usa o modelo de dimensionamento de caixa de caixa de borda por padrão. Alguns
navegadores permitem que você aplique propriedades de cor, cor de fundo e fonte a Os seguintes elementos de formulário não
podem ser alterados apenas com CSS: entradas
elementos de opção , mas provavelmente é melhor deixá-los em paz para serem
para intervalo, cor, seletores de data, seletor de
renderizados pelo navegador e pelo sistema operacional.
arquivo, opção, grupo de opções, lista de
Fieldsets e legendas dados, progresso e medidor. É possível
personalizá-los usando JavaScript, o que está
Você pode tratar um fieldset como qualquer outra caixa de elemento, ajustando a borda,
além do escopo deste livro.
o plano de fundo, a margem e o preenchimento. Desativar totalmente a borda é uma
maneira de manter seu formulário organizado, preservando a semântica e a acessibilidade.
Por padrão, os elementos de legenda estão acima da borda superior do conjunto de
campos e, infelizmente, os navegadores os tornam muito difíceis de alterar. Alguns
desenvolvedores usam um elemento span ou b dentro da legenda e aplicam estilos ao
elemento contido para obter resultados mais previsíveis. Alguns optam por ocultá-lo de
forma que ainda seja lido pelos leitores de tela (legend {width: 1px; height: 1px; overflow:
hidden;}).
Agora sabemos o que podemos fazer para estilizar controles individuais, mas o objetivo maior
é tornar o formulário mais organizado e fácil de usar. A FIGURA 19-2 mostra as tomadas
“depois” da forma sem estilo da FIGURA 19-1. Há alterações de cor, fonte, borda e espaçamento,
e os rótulos e elementos de entrada também são bem alinhados. E não só isso, o formulário é
responsivo! Eu usei o Flexbox para
Janela de visualização ampla Janela de visualização estreita
FIGURA 19-2. Este formulário responsivo usa o Flexbox para permitir que as entradas de texto sejam
redimensionadas e mudem a posição dos rótulos em telas pequenas.
19. Mais técnicas de CSS 549

Formas de estilo
faça os rótulos empilharem em cima de suas respectivas entradas e conjuntos de campos em telas
estreitas para que não haja desperdício de espaço.
Se você quiser dar uma olhada na marcação e nos estilos reais, o documento sneakerform.html está
disponível com os materiais deste capítulo (learningweb design.com/5e/materials). Deixei comentários
cuidadosos e completos que explicam exatamente para que serve cada estilo. Minha abordagem para
estilizar o formulário de pedido de tênis personalizado pode ser resumida da seguinte forma:
• Defina o tamanho da caixa como caixa de borda para todo o documento. Isto faz
dimensionamento de elementos de formulário mais previsíveis.
• Dê ao formulário uma largura máxima (para que ele possa encolher para caber em viewports
menores) e um estilo decorativo opcional, como o fundo verde e a borda arredondada no exemplo.
• Livre-se dos marcadores e espaçamento nas listas não ordenadas que foram
usado para marcar o formulário semanticamente.
• Transforme itens de lista (cada um contendo um rótulo e algum tipo de entrada ou conjunto de
NOTA campos) em contêineres flexíveis configurando sua exibição como flexível (consulte a Nota).
Ative a quebra, que é o que permite que a entrada se desloque abaixo dos rótulos em telas
Se você não quiser usar o Flexbox, você pode
pequenas.
alinhar os rótulos usando floats. Defina os
rótulos para exibir: bloco, dê-lhes uma largura • Dê às etiquetas larguras fixas (flex: 0 0 8em;) para que tenham o mesmo tamanho,
e altura, e flutue-os para a esquerda. Você independentemente do tamanho da tela. Como os rótulos nas caixas de seleção e nos botões de
precisa limpar os elementos li (clear: Both)
opção funcionam de maneira diferente, configure-os para substituir a largura de 8em (flex: 1 1 auto;).
para que eles comecem abaixo do par flutuante
anterior. • Permitir que a entrada, a área de texto e os conjuntos de campos cresçam para preencher o
espaço restante (flex: 1 1 20em;). Quando a tela é muito estreita para caber ao lado dos rótulos,
eles se enrolam abaixo.
• Defina a família de fontes dos campos de entrada de texto para herdar para que eles usem a
mesma fonte do restante do documento em vez de qualquer fonte que o navegador use para
formulários. As entradas de texto também obtêm alturas, bordas e um pouco de preenchimento.
• Fieldsets e legendas são difíceis de estilizar. Desative a borda e o preenchimento no conjunto de

campos e, em seguida, oculte a legenda de forma que ela ainda seja lida em voz alta antes de
cada opção de caixa de seleção ou botão de opção. Como há um rótulo e uma legenda para cada
conjunto de campos, certifiquei-me de que eles não sejam exatamente os mesmos para que não
sejam redundantes quando lidos em voz alta por um leitor de tela. A legenda deve ser mais curta
porque é repetida para cada opção.
• O botão enviar tem uma borda arredondada, cor de fundo e estilo de fonte. Defina as margens
laterais como automáticas para que sempre sejam centralizadas na largura do formulário.
Este é um exemplo muito simples, mas deve dar uma ideia geral de como os formulários podem ser
estilizados. Você também pode adicionar estilos de realce para interatividade, como estilos :hover nos
botões e estilos :focus para entradas de texto quando eles são selecionados.

Tabelas de estilo
TABELAS DE ESTILO
Como qualquer outro conteúdo de texto em uma página da Web, o conteúdo das células da tabela
pode ser formatado com várias propriedades de fonte, texto e plano de fundo.
NOTA
Você provavelmente vai querer ajustar o espaçamento dentro e ao redor das mesas. Para ajustar
a quantidade de espaço dentro de uma célula (preenchimento de célula), aplique a propriedade No passado, o preenchimento e o
de preenchimento ao elemento td ou th . O espaçamento entre células (cell spacing) é um pouco espaçamento das células eram manipulados
mais complicado e está relacionado a como o CSS lida com as bordas das células. O CSS fornece pelos atributos cellpadding e cellpacing na tabela
dois métodos para exibir as bordas entre as células da tabela: separadas ou recolhidas. elemento, respectivamente, mas eles se
tornaram obsoletos no HTML5 por causa de
Essas opções são especificadas com a propriedade border-collapse específica da tabela com
sua natureza de apresentação.
valores separados e de recolhimento , respectivamente.
colapso da fronteira
Valores: separado | colapso
Predefinição:
separado
Aplica-se a: elementos de tabela e tabela em linha
Herda: sim
Bordas Separadas
Por padrão, as bordas são separadas e uma borda é desenhada nos quatro lados de cada célula.
A propriedade border-spacing permite especificar o espaço entre as bordas das células.
espaçamento entre bordas
Valores: comprimento horizontal comprimento vertical
Predefinição: 0
Aplica-se a: elementos de tabela e tabela em linha
Herda: sim
Os valores para espaçamento entre bordas são duas medidas de comprimento. O valor
horizontal vem primeiro e se aplica entre as colunas. A segunda medição é aplicada entre as
linhas. Se você fornecer um valor, ele será usado horizontalmente e verticalmente. A configuração
padrão é 0, fazendo com que as bordas dobrem na grade interna da tabela (consulte Nota).
A tabela na FIGURA 19-3 é configurada para separar com 15 pixels de espaço entre colunas e 5
pixels de espaço entre linhas. Uma borda roxa foi aplicada às células para deixar seus limites
claros.
NOTA
Embora o padrão de espaçamento de borda seja 0, os navegadores geralmente adicionam 2 pixels

de espaço para o atributo de espaçamento de células obsoleto por padrão. Se você quiser ver as
bordas dobradas, você precisa definir o atributo cellspacing como 0 no elemento table .

Tabelas de estilo
td {
}
tabela {
colapso da fronteira: separado;
espaçamento entre bordas: 15px 5px;
borda: nenhuma;
}
borda de 3px 15px 5px
FIGURA 19-3. O modelo de borda de tabela separada.
Para tabelas com bordas separadas, você pode indicar se deseja que as células vazias
exibam seus planos de fundo e bordas usando as células vazias
propriedade. Para que uma célula esteja “vazia”, ela não pode conter nenhum texto,
imagens ou espaços sem quebra. Pode conter retornos de carro e caracteres de espaço.
células vazias
Valores: mostrar | ocultar
Predefinição: mostrar
Aplica-se a: elementos da célula da tabela
Herda: sim
A FIGURA 19-4 mostra o exemplo de borda de tabela separada anterior com suas células
vazias (o que seria a célula 14 e a célula 15) configuradas para ocultar.
células vazias: ocultar;
FIGURA 19-4. Ocultar células vazias com a propriedade de células vazias .
Bordas recolhidas
No modelo de borda colapsada, as bordas das bordas adjacentes “colapsam” para que
apenas uma das bordas fique visível e o espaço seja removido (FIGURA 19-5).
No exemplo, embora cada célula da tabela tenha uma borda de 3 pixels, as bordas entre
as células medem um total de 3 pixels, não 6. Nos casos em que as células vizinhas têm
estilos de borda diferentes, uma ordem de hierarquia complicada é chamada para
determinar qual borda será exibida, que você pode ler na especificação.
A vantagem de usar o modelo de borda de tabela recolhido é que você pode

estilizar as bordas dos elementos tr, col, rowgroup e colgroup . Com o
modelo separado, não dá. O uso estratégico de bordas horizontais e verticais
melhora a legibilidade de tabelas complicadas, tornando o modelo recolhido
uma opção atraente.

Tabelas de estilo
td {
}
tabela {
colapso da fronteira: colapso;
borda: nenhuma;
} borda de 3px
FIGURA 19-5. O modelo de fronteira colapsado.
Layout da tabela
Escolher um lado
layout de mesa
Quando você usa o elemento de legenda
Valores: automóvel | fixo em uma tabela, ele aparecerá acima da
Predefinição: auto tabela por padrão. Se preferir que ela
fique abaixo da tabela, você pode usar a
Aplica-se a: elementos de tabela ou tabela em linha propriedade caption-side para posicioná-
la ali.
Herda: sim
A propriedade table-layout permite que os autores especifiquem um dos dois métodos

lado da legenda
de cálculo da largura de uma tabela. O valor fixo baseia a largura da tabela nos valores Valores: topo | fundo
de largura fornecidos para a tabela, colunas ou células. O valor auto baseia a largura Padrão: superior
da tabela na largura mínima do conteúdo da tabela. O layout automático pode ser
Aplica-se a: elemento de legenda da tabela
exibido nominalmente mais lentamente porque o navegador deve calcular a largura
padrão de cada célula antes de chegar à largura da tabela. Herda: sim
Isso abrange a formatação básica de formulários e tabelas. Eu sei que este é um livro
para iniciantes, mas na próxima seção, apresentarei algumas técnicas intermediárias
de CSS que podem tornar seu trabalho mais fácil e suas páginas mais rápidas.
Propriedades de exibição da tabela
O CSS 2.1 inclui vários valores para a propriedade display que permitem aos autores anexar
comportamentos de exibição de tabela aos elementos. Os valores de exibição relacionados à tabela
são table, inline-table, table-row-group, table-header-group, table-footer group, table-row, table-
column-group, table-column, table-cell e table -rubrica.
A intenção original desses valores era fornecer um mecanismo para aplicar comportamentos de
exibição de tabela a linguagens XML que podem não ter elementos como table, tr ou td
em seus vocabulários.
Nos últimos anos, os valores de exibição da tabela se tornaram outro método para obter efeitos de
layout de página, como centralização vertical e larguras de coluna flexíveis. O layout da tabela CSS
pode ser útil como um design de fallback para navegadores mais antigos que não suportam CSS Grid ou
Flexbox. Observe que isso não é o mesmo que usar o layout baseado em tabela com marcação HTML.
Com o layout da tabela CSS, a semântica do documento de origem permanece intacta. Se você quiser
saber mais, recomendo o artigo “Layout Secret #1: The CSS Table Property” de Massimo Cassandro
(www.sitepoint.com/solving-layout-problems-css table-property/).
Agora que o Flexbox e o Grid estão ganhando força, suspeito que os métodos de
layout de tabela acabarão ficando de lado.

Uma ardósia limpa (Redefinir e Normalize.css)
UM CLEAN SLATE
(RESET AND NORMALIZE.CSS)
Como você sabe, os navegadores têm suas próprias folhas de estilo internas (chamadas
folhas de estilo do agente do usuário ) para renderizar elementos HTML. Se você não fornecer
estilos para um h1, pode ter certeza de que ele será exibido como texto grande e em negrito
com espaço acima e abaixo. Mas quanto maior e quanto espaço pode variar de navegador
para navegador, dando resultados inconsistentes. Além disso, mesmo que você forneça sua
própria folha de estilo, os elementos em seu documento podem herdar secretamente certos
estilos das folhas de estilo do agente do usuário, causando resultados inesperados.
Existem dois métodos para obter um ponto de partida consistente para aplicar seus próprios
estilos: uma redefinição de CSS ou normalize.css. Eles adotam abordagens diferentes,
portanto, uma ou outra pode ser a melhor solução para o que você precisa alcançar.
Redefinição de CSS
A abordagem mais antiga é uma redefinição de CSS, uma coleção de regras de estilo que
substitui todos os estilos de agente do usuário e cria um ponto de partida o mais neutro possível.
Com esse método, você precisa especificar todas as propriedades de fonte e espaçamento
para cada elemento usado. É um ponto de partida verdadeiramente do zero.
O reset mais popular foi escrito por Eric Meyer (o autor de muitos livros CSS para listar). Ele
é apresentado aqui, e também incluí uma cópia dele na pasta de materiais deste capítulo
para seu prazer de copiar e colar (veja a Nota). Se você examinar o código, verá que as
NOTA margens, a borda e o preenchimento foram definidos como 0 para uma longa lista de
elementos de bloco. Há também estilos que levam a tipografia a um ponto de partida neutro,
Você pode obter a redefinição de CSS na web
em meyerweb.com/eric/tools/css/reset/. limpam estilos em listas e impedem que os navegadores adicionem aspas a aspas e aspas
em bloco.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126 Licença: nenhuma (domínio público)*/
html, body, div, span, applet, object, iframe, h1, h2,
h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrônimo,
address, big, cite, code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset, formulário,
rótulo, legenda, tabela, legenda, tbody, tfoot, thead,
tr, th, td, artigo, à parte, canvas, detalhes, incorporar,
figura, figcaption, rodapé, cabeçalho, hgroup, menu,
nav, saída, ruby, seção, resumo, tempo, marca, áudio, vídeo {
margem: 0;
preenchimento: 0;
borda: 0;
fonte: herdar;
alinhamento vertical: linha de base;
}

Uma ardósia limpa (Redefinir e Normalize.css)
/* Redefinição da função de exibição HTML5 para navegadores mais antigos */

artigo, à parte, detalhes, figcaption, figura, rodapé, cabeçalho, hgroup, menu, nav, seção {
exibição: bloco;
} corpo {
altura da linha: 1;
} ol, ul {
estilo de lista: nenhum;
} citação em bloco, q {
citações: nenhuma;
} blockquote:antes, blockquote:depois,
q:antes, q:depois {
contente: '';
conteúdo: nenhum;
}
tabela {
colapso da fronteira: colapso;
espaçamento entre bordas: 0;
}
Para usar a redefinição, coloque esses estilos no topo de sua própria folha de estilos para que seus
próprios estilos os substituam. Você pode usá-los exatamente como os vê aqui ou personalizá-los
conforme seu projeto exigir. Eu também recomendo ler as postagens de Eric sobre o pensamento que
entrou em suas configurações em meyerweb.com/eric/
tools/css/reset/ e meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/.
Uma pesquisa na web revelará outras opções de redefinição de CSS potencialmente menores.
Normalize.css
Uma abordagem mais sutil é usar o Normalize.css, criado por Nicolas Gallagher e Jonathan Neal. Eles
vasculharam meticulosamente os estilos de agente de usuário de cada navegador moderno (desktop e
móvel) e criaram uma folha de estilo que ajusta seus estilos para consistência, em vez de apenas desativá-
los. Normalize.css fornece um ponto de partida razoável: os parágrafos ainda têm algum espaço acima e
abaixo, os títulos estão em negrito em tamanhos decrescentes, as listas têm marcadores e recuos como
seria de esperar. Ele também inclui estilos que tornam os widgets de formulário consistentes, o que é um
bom serviço. FIGURA 19-6
mostra a diferença entre os pontos iniciais de reinicialização de CSS e Normalize.css.
Você pode baixar Normalize.css em necolas.github.io/normalize.css/ e incluí-lo antes de seus próprios

estilos. É muito longo para imprimir aqui, mas você verá que está bem organizado e inclui comentários
com explicações claras para cada seção. Para os pensamentos de Nicolas sobre o projeto, veja
nicolasgallagher.com/
about-normalize-css/.
O Normalize.css é considerado um sucessor superior para a redefinição de CSS mais grosseira, mas
acho importante estar ciente de ambas as opções. Ou, se pequenas diferenças de navegador para
navegador forem boas para você (como são para muitos desenvolvedores profissionais), você também
não precisa usar.

Técnicas de substituição de imagem
Redefinição de CSS Normalize.css
FIGURA 19-6. A diferença entre reset CSS (esquerda) e Normalize.css (direita).

(Crédito: captura de tela de um Codepen criado por Zach Wolf.)
TÉCNICAS DE SUBSTITUIÇÃO DE IMAGEM
Antes que as fontes da web fossem uma opção viável, precisávamos usar uma imagem sempre
que queríamos um texto em uma fonte mais sofisticada do que Times ou Helvetica. Felizmente,
esse não é mais o caso, mas de vez em quando ainda pode ser necessário substituir um
elemento de texto por uma imagem de uma maneira que ainda seja acessível aos leitores de tela.
Um cenário comum é usar um logotipo estilizado no lugar do nome de uma empresa em um
NOTA
título (consulte a Nota).
Antes de passar pelo esforço de uma técnica
Remover o texto completamente e substituí-lo por um elemento img é uma má ideia porque o
de substituição de imagem, considere se o
texto alternativo em um elemento img é tudo conteúdo do texto se foi para sempre. A solução é usar uma técnica de substituição de imagem
o que você precisa. No caso de um logotipo, o baseada em CSS que usa a imagem como plano de fundo no elemento e, em seguida, desloca
texto alternativo pode representar o nome da o texto do caminho para que não seja renderizado na página. Os navegadores visuais veem a
empresa caso a imagem do logotipo não seja imagem de fundo, enquanto o conteúdo do texto permanece no arquivo para benefício dos
vista. Francamente, o exemplo do logotipo mecanismos de pesquisa, leitores de tela e outros dispositivos de assistência. Todos ganham!
nesta seção provavelmente poderia ser tratado
dessa maneira. Dito isso, pode haver casos
em que você precise substituir uma string real Muitas técnicas de substituição de imagens foram desenvolvidas ao longo dos anos (ver Nota),
de texto por uma imagem; nesse caso, uma mas a mais popular é a técnica de Phark criada por Mike Rundle. Ele usa um grande recuo
técnica de substituição de imagem pode ser negativo para mover o texto para a esquerda da página visível.
uma boa coisa para ter em sua caixa de
No exemplo da FIGURA 19-7, uso a técnica Phark para exibir o logotipo do Jenware no lugar
ferramentas CSS.
do texto h1 “Jenware” na fonte HTML. A marcação é simples:
<h1 id="logo">Jenware</h1>

Sprites CSS
A regra de estilo é a seguinte:
#logo {
NOTA
largura: 450px;
altura: 80px; Você pode ver uma galeria de técnicas
background: url(jenware.png) sem repetição;
antigas no “The Image Replacement Museum”,
recuo de texto: -9999px;
} montado por Marie Mosley (css-tricks.
com/the-image-replacement-museum/).
O que os usuários veem:
O que realmente está acontecendo:
recuo de texto: -9999px;
Jenware
O conteúdo de texto h1 é empurrado para o arquivo

fora da janela
, do navegador. Janela do navegador
FIGURA 19-7. A técnica de substituição de imagem Phark oculta o texto HTML empurrando-o
para fora da caixa do elemento visível com um grande recuo de texto negativo para que apenas
a imagem de fundo seja exibida.
Há algumas coisas dignas de nota aqui. Primeiro, o elemento h1 é exibido como um bloco por
padrão, então podemos apenas especificar sua largura e altura para corresponder às
dimensões da imagem usada como plano de fundo. A propriedade text-indent empurra a
palavra Jenware para a esquerda em 9.999 pixels. Isso requer que o navegador renderize
uma caixa de elemento muito ampla, mas o impacto no desempenho é mínimo.
A desvantagem de qualquer abordagem de substituição de imagem é que isso significa uma

solicitação extra ao servidor para cada imagem usada. Também pode ser mais trabalhoso
criar gráficos toda vez que um título muda. Novamente, antes de procurar uma substituição
de imagem, considere se uma fonte da Web ou uma imagem em linha com texto alternativo
pode fazer o truque. Na próxima seção, veremos uma maneira de conter solicitações
desnecessárias do servidor.
SPRITES CSS
Quando falei sobre desempenho no Capítulo 3, Alguns grandes conceitos que você
precisa saber, observei que você pode melhorar o desempenho do site reduzindo o número
de solicitações que sua página faz ao servidor (também conhecido como solicitações HTTP).
Uma estratégia para reduzir o número de solicitações de imagens é combinar todas as suas
pequenas imagens em um arquivo de imagem grande para que apenas uma imagem seja
solicitada. A imagem grande que contém várias imagens é conhecida como sprite, um termo
cunhado pela indústria de computação gráfica e videogame. Essa imagem

Sprites CSS
é posicionado no elemento por meio da propriedade background-position de forma

que apenas a parte relevante dele seja visível. Um exemplo deve deixar isso claro.
Se eu quiser mostrar uma coleção de seis ícones de mídia social em minha página,
posso transformar esses seis gráficos em um sprite e reduzir o número de solicitações
HTTP de acordo (FIGURA 19-8). Você pode ver na figura que os ícones foram
empilhados em um gráfico alto (social.png). Este exemplo também usa uma técnica
de substituição de imagem para que o texto de cada link ainda esteja disponível para
leitores de tela.
Os ícones separados neste painel estão contidos em uma imagem

sprite (social.png) que é posicionada em cada elemento a .
social.png
posição de fundo: 0, -40px;
posição de fundo: 0, 0;
FIGURA 19-8. A substituição de arquivos gráficos separados por uma imagem sprite reduz o
número de solicitações HTTP para o servidor e melhora o desempenho do site.
A MARCAÇÃO
<ul>
<li><a href="" class="hide twitter">Twitter</a></li>
<li><a href="" class="hide fb">Facebook</a></li>
<li><a href="" class="hide gplus">Google+</a></li>
<li><a href="" class="hide linkedin">LinkedIn</a></li>
<li><a href="" class="hide dropbox">Dropbox</a></li>
<li><a href="" class="hide pinterest">Pinterest</a></li>
</ul>
OS ESTILOS
.hide {
recuo do texto: 100%;
espaço em branco: nowrap;
estouro: oculto; }

Detecção de recursos CSS
li a {
exibição: bloco;
largura: 40px;
altura: 40px;
imagem de fundo: url(social.png); }
li a.twitter { posição de fundo: 0 0; }
li a.fb { posição de fundo: 0 -40px; } li a.gplus

{ posição de fundo: 0 -80px; }
li a.linkedin { background-position: 0 -120px; }
li a.dropbox { posição de fundo: 0 -160px; }
li a.pinterest { posição de fundo: 0 -200px; }
Na marcação, cada item tem dois valores de classe . A classe hide é usada como seletor
para aplicar uma técnica de substituição de imagem. Este foi desenvolvido por
Scott Kellum e usa um recuo à esquerda de 100% para mover o texto para fora da vista. O
outro nome de classe é específico para cada link de rede social. A classe única
valores nos permitem posicionar o sprite apropriadamente para cada link. Geradores de Sprite
Existem muitas ferramentas online que
Na parte superior da folha de estilo, você verá os estilos de substituição de imagem. Observe
criam arquivos de imagem sprite e seus
na próxima regra que todos os elementos do link (a) usam social.png como sua imagem de
respectivos estilos automaticamente.
fundo. Basta carregar ou arrastar e soltar seus
gráficos individuais na página, e a
Finalmente, chegamos aos estilos que fazem o trabalho pesado. A posição de fundo é ferramenta faz o resto. Um que eu
definida de forma diferente para cada link na lista, e a caixa de elemento visível funciona achar fácil de usar é CSSsprites (css.
como uma pequena janela revelando uma parte da imagem de fundo. O primeiro item tem o spritegen. com). Se você precisa
valor 0,0; isso posiciona o canto superior esquerdo da imagem no canto superior esquerdo que seus sprites sejam responsivos,
da caixa do elemento. Para tornar o ícone do Facebook visível, precisamos mover a imagem use sua versão responsiva em react-css.
spritegen. com.
em 40 pixels, para que sua posição vertical seja definida como –40px (sua posição horizontal
de 0 é boa). A imagem é movida para cima em incrementos de 40 pixels para cada link,
revelando áreas de imagem cada vez mais para baixo na pilha de sprite.
Neste exemplo, todos os ícones têm as mesmas dimensões e se empilham bem, mas isso
não é um requisito. Você pode combinar imagens com uma variedade de dimensões em um
sprite. O processo de definir um tamanho para o elemento e então alinhar o sprite
perfeitamente com a propriedade background-position é o mesmo.
DETECÇÃO DE RECURSOS CSS
Um dos principais desafios enfrentados por web designers e desenvolvedores é lidar com
o suporte de navegador desigual. Novas propriedades CSS úteis surgem regularmente,
mas demora um pouco para elas encontrarem o caminho para os navegadores, e leva muito
mais tempo para os navegadores antigos sem suporte desaparecerem.
Felizmente, temos alguns métodos para verificar se um navegador oferece suporte a um

recurso específico, para que possamos tirar proveito do CSS de ponta e, ao mesmo tempo,
fornecer fallbacks ponderados para navegadores não compatíveis. Usar a detecção de
recursos com fallbacks com certeza supera as alternativas de a) não usar uma propriedade

até que seja universalmente suportado, ou b) usá-lo e permitir que usuários com
navegadores não compatíveis tenham uma experiência ruim.
Veremos duas maneiras de detectar se um recurso é compatível: consultas de recursos

com uma nova regra de CSS (@supports) e uma ferramenta baseada em JavaScript
chamada Modernizr.
Consultas de recursos CSS (@supports)

O Módulo de Regras Condicionais CSS3 Nível 3 (www.w3.org/TR/css3-conditional/)
introduz a regra @supports para verificar o suporte do navegador a uma propriedade
específica e declaração de valor. Comumente chamada de consulta de recurso, ela
funciona como uma consulta de mídia, pois executa um teste e, se o navegador passar
nesse teste, aplica os estilos contidos nos colchetes da regra. A sintaxe para @supports
é a seguinte:
@supports (propriedade: valor) {

/* Regras de estilo para suportar navegadores aqui */
}
Observe que a consulta é para uma declaração inteira, tanto a propriedade quanto um
valor. Ele foi projetado dessa maneira porque às vezes você pode testar uma nova
propriedade (como a letra inicial) e às vezes pode precisar testar um novo valor para uma
propriedade existente. Por exemplo, a propriedade display tem suporte universal, mas o
valor da palavra-chave grid mais recente não. Observe também que não há ponto e vírgula
no final.
Vejamos um exemplo mais específico. Eu acho que seria legal usar a nova propriedade
mix-blend-mode para fazer uma foto de melancias se misturar com o fundo (semelhante
a um Layer Blending Mode no Photoshop). Até o momento, ele é suportado apenas no
Firefox, Chrome e Safari. Como alternativa para navegadores não compatíveis, crio um
efeito combinado um pouco menos interessante usando a propriedade opacity (FIGURA
19-9).
Imagem original (sem efeito) Como visto em navegadores que suportam Fallback para navegadores não compatíveis
modo mix-blend: multiplicar; (opacidade: 0,5)
FIGURA 19-9. A imagem original (esquerda), o resultado usando o modo mix-blend

propriedade com palavra-chave multiplicar (centro) e o estilo de fallback usando opacidade (direita).

No momento em que este artigo foi escrito, a prática recomendada é especificar primeiro os estilos de
fallback e, em seguida, substituí-los por um conjunto de estilos direcionados aos navegadores que
AVISO
suportam o recurso. Observe que também preciso definir a opacidade de volta para 1 para substituir
meu estilo de fallback. O navegador deve informar por si mesmo
A MARCAÇÃO
se implementou o recurso.
Se o recurso for implementado com erros,
você ainda poderá encontrar problemas
<figure class="blend">
<img src="melancia.jpg" alt=""> mesmo ao usar consultas de recursos.
</figura>
</div>
OS ESTILOS
#container {
cor de fundo: #96D4E7;
preenchimento:
5em; } .blend img
{ opacidade: .5; }
@supports (mix-blend-mode: multiplicar) {

.blend img
{ mix-blend-mode: multiplica;
opacidade: 1;
}
}
Operadores
A regra @supports pode ser usada com três operadores para refinar o teste de
recurso: not, and, and or:
não
O operador not nos permite testar quando um par de propriedade/valor específico não é suportado.
@supports não (mix-blend-mode: hue) {

/* estilos para navegadores não compatíveis */
}
Algum dia, isso será útil para fornecer estilos de fallback, mas com o suporte atual do navegador, você
corre o risco de navegadores não compatíveis pularem tudo nas regras @supports , incluindo os
fallbacks. É por isso que usei o método override no exemplo anterior.
e
Aplica estilos somente quando todas as condições em uma série de dois ou mais
são atendidas.
@supports (border-radius: 10em) e (shape-outside: circle()) {

/* estilos que se aplicam apenas quando o navegador suporta
shape-outside AND border-radius */
}

ou
Use o operador ou para aplicar estilos quando qualquer uma de uma série de condições
for atendida. Este é particularmente útil para propriedades prefixadas pelo fornecedor.
@supports (-webkit-transform: girar(10deg)) ou

(-ms-transform: girar(10deg)) ou
(transformar: girar (10 graus))
/* transforma estilos */
}
As consultas de recursos começaram a funcionar no Chrome, Firefox e Opera em 2013 e são

DICA AUT HO RING suportadas por todas as versões do Microsoft Edge. O Safari adicionou suporte na versão 9 em
2015. Infelizmente, nenhuma versão do Internet Explorer suporta consultas de recursos, o que
Nem todo novo recurso precisa de
deixa um grande buraco no quadro de suporte até que os navegadores antigos desapareçam.
uma consulta de recurso. Alguns recursos,
como border-radius, simplesmente não são
renderizados em navegadores não
Os navegadores não compatíveis usam seu design de fallback, portanto, certifique-se de que
compatíveis, e tudo bem.
ele seja pelo menos utilizável. Cuidado, no entanto, com navegadores que não suportam
@supports, mas podem suportar recursos CSS mais recentes que você pode estar inclinado a
testar. Flexbox é um ótimo exemplo. O Safari 8 reconhece as propriedades do Flexbox, mas
não reconhece @supports, portanto, se todas as suas regras de layout do Flexbox estiverem
escondidas dentro de uma consulta de recursos, o Safari 8 não as verá. É por isso que as
consultas de recursos não são a melhor ferramenta para detectar o Flexbox ou qualquer
propriedade que tenha um suporte melhor do que o próprio @supports . O Grid Layout, por
outro lado, é um ótimo lugar para colocar as consultas de recursos para funcionar, porque todos
os navegadores que suportam exibem: grid também suporta @supports. Novamente,
CanIUse.com é um bom recurso para comparar o suporte.
Prós e contras
As consultas de recursos são uma nova ferramenta empolgante para o desenvolvimento da

Web. Eles nos permitem tirar vantagem das novas propriedades CSS mais cedo de uma forma
que não depende de JavaScript (vamos olhar para Modernizr, uma solução JavaScript, a seguir).
Baixar e executar um script (mesmo um pequeno) é mais lento do que usar CSS sozinho.
No lado negativo, o suporte limitado ao navegador (por enquanto) significa que o @supports
não é tão abrangente quanto o Modernizr. No entanto, se atingir seus objetivos, deve ser sua
primeira escolha. Felizmente, o ambiente do navegador continuará a melhorar, dando às
consultas de recursos CSS a vantagem sobre uma solução baseada em script a longo prazo.
Então, o que é esse “Modernizr” sobre o qual você está ouvindo tanto?
Modernizar
Modernizr é uma biblioteca JavaScript leve que roda nos bastidores e testa uma longa lista de
recursos HTML5 e CSS3 quando a página é carregada em

o navegador. Para cada recurso testado, ele armazena o resultado (suporta/não suporta) em
um objeto JavaScript que pode ser acessado com scripts e opcionalmente como um nome de
classe no elemento raiz html que pode ser usado em seletores CSS. Vou focar no último
método CSS.
Como funciona
Quando o Modernizr é executado, ele anexa o elemento html com um nome de classe para
cada recurso detectado. Por exemplo, se estiver configurado para testar o Flexbox, quando
for executado em um navegador que suporte o Flexbox , ele adicionará o .flexbox
nome da classe para o elemento html :
<html class="js flexbox"> Modernizr é uma biblioteca

JavaScript leve que testa uma
Se o recurso não for suportado, ele adiciona o nome do recurso com um prefixo .no- .
variedade de recursos HTML
Em um navegador não compatível, o teste Flexbox seria relatado assim:
e CSS.
<html class="js no-flexbox">
Com o nome da classe no elemento raiz, tudo na página se torna parte dessa classe.
Podemos usar o nome da classe como parte de um seletor para fornecer diferentes conjuntos
de estilos dependendo do suporte ao recurso:
.flexbox nav {
/* estilos flexbox para o elemento nav aqui */
}
.no-flexbox nav {
/* estilos de fallback para o elemento nav aqui */
}
Este exemplo é curto e agradável para fins de demonstração. Normalmente, você usará o
Modernizr para testar muitos recursos, e a tag html é preenchida com uma longa lista de
nomes de classes.
Como usá-lo
Primeiro, você precisa baixar o script Modernizr.js . Vá para Modernizr.com e encontre o link
Download. A partir daí, você pode personalizar o script para conter apenas os recursos HTML
e CSS que deseja testar, uma boa maneira de manter o tamanho do arquivo do script baixo.
Clique no botão Construir e você terá várias opções de como ele pode ser salvo. Um simples
clique em Download salva o script em um arquivo .js em seu computador.
Depois de ter seu script, coloque-o no diretório com o restante dos arquivos do seu projeto.
Adicione-o ao cabeçalho do seu documento HTML, antes de quaisquer folhas de estilo
vinculadas ou outros scripts que precisem usá-lo:
<cabeça>
<script src="modernizr-custom.js"></script>

</head>

Encerrando as folhas de estilo
Finalmente, abra seu documento HTML e atribua o nome da classe no-js ao elemento html .
<html class="no-js">
Modernizr irá alterá-lo para js assim que detectar que o navegador suporta JavaScript. Se o
JavaScript (e, portanto, o Modernizr) não for executado, você não saberá se os recursos são
suportados ou não.
Prós e contras
Modernizr é uma das ferramentas mais populares nos arsenais dos desenvolvedores web porque
nos permite projetar recursos específicos em vez de navegadores inteiros. É fácil de usar, e o
site Modernizr possui documentação completa e clara para ajudá-lo. Por ser JavaScript, funciona
na grande maioria dos navegadores. O outro lado disso, no entanto, é que, como ele depende de
JavaScript, você não pode ter 100% de certeza de que ele será executado, o que é sua principal
desvantagem. Também será um pouco mais lento do que usar CSS sozinho para detecção de
recursos.
FOLHAS DE ESTILO DE ENCERRAMENTO
Isso conclui nosso tour relâmpago de Cascading Style Sheets. Você percorreu um longo caminho
desde o estilo de um h1 e um p no Capítulo 11, Introdução às folhas de estilo em cascata.
Até agora, você deve estar confortável formatando o texto e até mesmo fazendo o layout básico
da página. Embora CSS seja fácil de aprender, leva muito tempo e prática para dominar. Se você
ficar preso, descobrirá que existem muitos recursos on-line para ajudá-lo a encontrar as respostas
de que precisa. O bom do CSS é que você pode começar apenas com o básico e, em seguida,
desenvolver esse conhecimento à medida que ganha proficiência em suas habilidades de
desenvolvimento web.
No próximo capítulo, apresentarei as ferramentas que os desenvolvedores da Web usam para

melhorar seu fluxo de trabalho, incluindo ferramentas para escrever CSS com mais eficiência e
otimizar os resultados. Mas se você está se sentindo sobrecarregado com as propriedades CSS,
pode dar um suspiro de alívio. Nós terminamos!
TESTE-SE
Veja como você aprendeu as técnicas de CSS neste capítulo com essas perguntas. Como você
deve ter adivinhado, as respostas estão disponíveis no Apêndice A.
1. Qual é o propósito de uma redefinição de CSS?
uma. Para substituir os padrões do navegador
b. Para tornar a apresentação mais previsível nos navegadores
c. Para evitar que elementos herdem estilos inesperados
d. Tudo o que precede

Teste-se
2. Qual é o propósito de um sprite CSS?
uma. Para melhorar o desempenho do site
b. Para usar imagens pequenas no lugar de grandes, reduzindo o tamanho do arquivo
c. Para reduzir o número de solicitações HTTP
d. a e c
e. Tudo o que precede
3. Qual é o objetivo de uma técnica de substituição de imagem?
uma. Para obter recuos de texto realmente grandes
b. Para usar um gráfico decorativo no lugar do texto
c. Para remover o texto do documento e substituí-lo por uma decoração

imagem ativa
d. Para manter o conteúdo semântico do documento
e. b e d
f. Tudo o que precede 1
4. Cite duas abordagens para alinhar controles de formulário e seus respectivos rótulos
sem tabelas. Uma descrição geral fará aqui.
5. Combine as regras de estilo com suas respectivas tabelas na FIGURA 19-10.

2
uma. tabela { border-collapse: recolher;} td
{ border: 2px preto sólido; }
b. tabela { border-collapse: separado; } td { borda: 3

sólido preto de 2px; }
c. tabela
{ border-collapse: separado;
espaçamento de borda: 2px
12px; } td { borda: sólido preto de 2px; }
4
d. tabela
espaçamento entre bordas:
5px; borda: sólido preto de 2px; }
td { cor de fundo: #99f; }
5
e. tabela
espaçamento entre bordas:
5px; } td { cor de fundo: #99f; FIGURA 19-10. Combine essas tabelas
borda: sólido preto de 2px; } com os exemplos de código na Pergunta 5.

Revisão CSS: Propriedades da Tabela
6. Usando o Modernizr para testar o raio da borda, diga se o div será exibido
com cantos arredondados com base nos seguintes resultados de classe gerados:
.border-radius div {
borda: 1px verde sólido;
raio da borda: .5em;
}
uma. <html class="js .no-border-radius">
b. <html class="js .border-radius">
c. <html class="no-js">
7. Até o momento, que vantagem o Modernizr tem sobre a detecção de recursos

CSS? Que vantagem a longo prazo a detecção de recursos CSS terá sobre o
Modernizr?
REVISÃO CSS: PROPRIEDADES DA TABELA
A seguir, um resumo das propriedades abordadas neste capítulo.
colapso da fronteira Especifica se as bordas entre as células são separadas ou recolhidas
espaçamento entre bordas Denota o espaço entre as células definido para renderizar como separado
lado da legenda Especifica a posição de uma legenda de tabela em relação à tabela (superior
ou inferior)
células vazias Especifica se bordas e planos de fundo devem ser renderizados para células
vazias
layout de mesa Especifica como as larguras da tabela são calculadas

CAPÍTULO
WEB MODERNA 20
DESENVOLVIMENTO
FERRAMENTAS
Nos exercícios deste livro, você escreveu páginas HTML estáticas com folhas de estilo incorporadas, NESTE CAPÍTULO
salvando-as e abrindo-as em seu navegador.

Introdução à linha de
Embora essa seja uma abordagem perfeitamente válida, provavelmente não é a maneira como você
comando
trabalharia se estivesse fazendo desenvolvimento web para ganhar a vida. Acho que se você está
aprendendo design e desenvolvimento web, deve estar familiarizado com como as coisas são feitas
Pré-processadores e pós-
em um ambiente profissional. processadores CSS
Este capítulo apresenta algumas das ferramentas usadas pelos desenvolvedores da Web para Construir ferramentas e executores de tarefas
tornar seu trabalho mais fácil e seu código mais robusto:
Controle de versão do Git
• Processadores CSS para escrever CSS com mais eficiência e otimizar o resultado
código para que funcione em todos os navegadores
• Crie ferramentas que automatizam os tipos de tarefas repetitivas que você encontra ao produzir
código
• Git, um programa de controle de versão que acompanha suas versões anteriores e facilita para
as equipes trabalharem juntas no mesmo código
O que essas ferramentas avançadas têm em comum é que geralmente são usadas com uma
interface de linha de comando (CLI). Então, antes de olharmos para ferramentas específicas, vamos
primeiro nos familiarizar com a linha de comando.
FICAR ACONCHEGANTE COM O

LINHA DE COMANDO
Você provavelmente usa um computador com uma interface gráfica de usuário (GUI), com ícones
que representam arquivos e pastas, menus suspensos cheios de opções e ações intuitivas, como
arrastar arquivos de uma pasta para outra ou para a lixeira.
Os usuários de computador nos anos 60 e 70 não tinham esse luxo. A única maneira de fazer um
computador executar uma tarefa era digitar um comando. Apesar de nossa
567
Aconchegando-se com a linha de comando
GUIs sofisticadas, digitar comandos em um terminal de linha de comando está longe de ser
obsoleto. Na verdade, quanto mais experiente você se torna no desenvolvimento web, mais
provável é que você mergulhe na linha de comando para certas tarefas. Se você já é um
programador, a linha de comando não será novidade.
A linha de comando ainda é popular por vários motivos. Primeiro, é útil para acessar computadores
remotos, e os desenvolvedores geralmente precisam acessar e gerenciar arquivos em servidores
web remotos. Além disso, é mais fácil escrever um programa para a linha de comando do que um
aplicativo autônomo com uma GUI, portanto, muitas das melhores ferramentas para otimizar nosso
fluxo de trabalho existem apenas como programas de linha de comando. Muitas dessas ferramentas
podem ser usadas juntas em um pipeline para realizar tarefas complexas.
Os benefícios de economia de tempo e sanidade são incentivos poderosos para assumir a linha
de comando. Confie em mim: se você pode aprender todos esses elementos e laços de
propriedades de estilo, você pode se acostumar a digitar alguns comandos.
O terminal de linha de comando

O programa que interpreta os comandos que você digita é chamado de shell (as interfaces visuais
também são tecnicamente um shell; elas são apenas mais sofisticadas). Cada máquina Mac e
Linux vem instalada com o Terminal, que usa um programa shell chamado bash. No macOS, você
encontrará o programa Terminal em Aplicativos ÿ Utilitários (FIGURA 20-1).
FIGURA 20-1. A janela Terminal no macOS.
Os usuários do Windows têm mais alguns aros para percorrer para configurar. A ferramenta de
linha de comando padrão no Windows é o Prompt de Comando (mais facilmente acessado com a
Pesquisa), que pode executar muitas das funções que você pode querer fazer como desenvolvedor;
no entanto, ele não usa o bash. Como muitas ferramentas usam o bash, é melhor instalar um
emulador de shell baseado em bash como

Cygwin (cygwin.com) ou cmder (cmder.net). Se você usa o Windows 10, é

recomendável instalar um ambiente Linux em sua máquina usando o Windows
Subsystem (msdn.microsoft.com/en-us/commandline/wsl/about) ou Ubuntu, disponível
na loja do Windows (www .microsoft.com/en-us/store/p/
Ubuntu/9nblggh4msv6).
Introdução aos comandos

Ao iniciar uma janela do Terminal, a primeira coisa que você vê é um prompt de
linha de comando, que é uma sequência de caracteres que indica que o computador
está pronto para receber seu comando:
$: _
O cifrão é comum, mas você pode ver outro símbolo em seu programa de terminal
(consulte Dica de terminal). O sublinhado neste exemplo representa a posição do PONTA DO TERMINAL
cursor, que pode aparecer como um pequeno retângulo ou uma linha piscando.
Você pode personalizar a aparência
O prompt completo que vejo no Terminal começa com o nome do meu computador do Terminal selecionando Preferências
ÿ Perfil e alterando as configurações.
(“JensAir”) e uma indicação do diretório de trabalho – ou seja, o diretório que o shell
Se você quiser se divertir, pode alterar
está visualizando no momento. Em termos de GUI, o diretório de trabalho é a pasta
o caractere de prompt de $ para o
em que você está “em”. Neste exemplo, o til (~) indica que estou olhando para meu caractere de sua escolha, incluindo um
diretório de usuário raiz. O “jen” antes do caractere de prompt é meu nome de usuário. emoji (osxdaily.
Em exemplos futuros, abreviarei o prompt para simplesmente $:. com/2013/04/08/add-emoji
command-line-bash-prompt/).
JensAir:~jen$: _
Quando vir o prompt, digite um comando e pressione Enter. O computador executa

o comando e fornece um novo prompt quando ele é concluído. É muito absurdo isso.
Para alguns comandos, pode haver feedback ou informações exibidas antes que o
próximo prompt apareça. Às vezes, tudo acontece nos bastidores, e tudo o que você
vê é um novo prompt.
Quando você está aprendendo sobre a linha de comando, é comum começar com
os comandos internos para navegar no sistema de arquivos, tarefas normalmente
tratadas pelo Finder no Mac e Meu Computador no Windows. Como eles são bastante
intuitivos, é aí que vou começar minha lição simples de linha de comando também.
Um bom utilitário para tentar como iniciante é o pwd (para “imprimir diretório de
trabalho”), que exibe o caminho completo do diretório de trabalho (atual). Para usá-
lo, basta digitar pwd após o prompt. É bom tentar primeiro porque você não pode
NOTA
quebrar nada com ele, mas para usuários experientes, é útil para descobrir
exatamente onde você pousou se estiver desorientado. A barra indica que esse Seu diretório de usuário é o diretório
caminho começa no diretório raiz de todo o computador. raiz padrão no Terminal e é
$: pwd representado por um til (~) no prompt,
/Usuários/jen como vimos no exemplo anterior.
Aqui está outro exemplo fácil (e de baixo risco!). Digitar o comando ls no prompt
retorna uma lista dos arquivos e diretórios no diretório de trabalho
20. Ferramentas modernas de desenvolvimento web 569

(/ Usuários/ jen). Você pode compará-lo com a visualização do Finder da mesma pasta
na FIGURA 20-2. São duas maneiras de ver a mesma coisa, assim como diretório e
pasta são dois termos para a mesma coisa, dependendo de sua visão.
JensAir:~ jen$ ls
Formulários Transferências Filmes Público
Área de Trabalho Dropbox Música Sites
Documentos Biblioteca Fotos
JensAir:~jen$
FIGURA 20-2. Vista do Finder da pasta inicial de jen.
Alguns utilitários, como pwd, exigem apenas o nome deles no prompt para serem
executados, mas é mais comum que você precise fornecer informações adicionais na
Dotfiles
forma de sinalizadores e argumentos. Um sinalizador altera o funcionamento do
Existem alguns arquivos em seu
utilitário, como uma opção ou preferência. Segue o nome do comando e é indicado por
computador que são mantidos ocultos
um traço simples ou duplo (-). Em muitos casos, os sinalizadores podem ser abreviados
na visualização do Finder. Esses arquivos,
conhecidos como dotfiles, começam com
apenas para a primeira letra porque são usados no contexto de um utilitário específico.
(você adivinhou) um ponto e tendem a Por exemplo, posso modificar o utilitário ls com o sinalizador –l , que instrui o
lidar com informações destinadas a computador a exibir o conteúdo do meu diretório em formato “longo”, incluindo
funcionar nos bastidores. Se você configurações de permissão e datas de criação:
digitar ls -a (-a é uma abreviação de
“todos”), você pode revelar os dotfiles JensAir:~ jen$ ls -l
total 0
escondidos em um diretório. No macOS, é
drwxr-xr-x 5 funcionários 170 08 de julho de 2016 Candidaturas
possível configurar o Finder para mostrar
drwx------ 57 jen staff 1938 Set 11 09:47 Desktop
também os dotfiles, mas para a maioria
drwx------ 26 jen staff 884 18 de maio 11:34 Documentos
dos usuários, ocultar é uma coisa boa.
drwx------+ 151 jen staff 5134 Set 3 15:47 Downloads
drwx------@ 48 jen staff 1632 16 de agosto 16:34 Dropbox
drwx------@ 72 jen staff 2448 15 de julho 11:21 Biblioteca
drwx------ 22 jen staff 748 6 de outubro de 2016 Filmes
drwx------ 12 jen staff 408 29 de setembro de 2016 Música
drwx------ 14 jen staff 476 13 de outubro de 2016 Fotos
drwxr-xr-x 6 jen staff 204 6 de maio de 2015 Público
drwxr-xr-x 11 jen staff 374 10 de julho de 2016 Sites
JensAir:~jen$

Um argumento fornece as informações específicas necessárias para uma função específica.

Por exemplo, se eu quiser mudar para outro diretório, digito cd (para “alterar diretório”),
bem como o nome do diretório para o qual quero ir (consulte a Dica do Terminal Mac).
DICA DO TERMINAL MAC
Para tornar meu diretório do Dropbox o novo diretório de trabalho, digito isto:
No Mac, o Terminal está bem
conectado ao Finder. Se você precisar
JensAir:~jen$: cd Dropbox
inserir um nome de caminho para um
Depois de pressionar Enter, meu prompt muda para JensAir:Dropbox jen$, indicando diretório ou arquivo, poderá arrastar o ícone
desse arquivo ou pasta do Finder para o
que agora estou no diretório do Dropbox. Se eu digitasse ls agora, obteria uma lista dos
Terminal e ele preencherá o nome do caminho para você.
arquivos e pastas contidos na pasta do Dropbox (definitivamente muito longo para mostrar
aqui).
Para subir um nível e voltar ao meu diretório de usuário inicial (~), posso usar a abreviação
do Unix para “subir um nível”: .. (lembra disso da sua lição de caminho de URL?). O prompt COMMA ND-LINE DICA
retornado mostra que estou de volta ao meu diretório raiz (~).
Digitar cd seguido por um espaço
JensAir:Dropbox jen$ cd .. sempre o leva de volta ao seu diretório
JensAir:~jen$ pessoal.
Alguns outros comandos úteis de manipulação de arquivos incluem mv (move arquivos e

pastas), cp (copia arquivos) e mkdir (cria um novo diretório vazio). A empresa
O comando remove um arquivo ou pasta no diretório de trabalho. Tenha cuidado com este
comando, no entanto, porque ele não apenas move os arquivos para a Lixeira; ele os
remove completamente do seu computador (veja a nota “A Word of Caution” ). UMA PALAVRA DE CAUTELA
Outro comando útil é man (abreviação de manual), que exibe a documentação de A linha de comando permite que você mexa em partes
qualquer comando que você passar para ele. Por exemplo, man ls mostra uma descrição críticas do seu computador que sua GUI protege
graciosamente de você. É melhor não digitar um

do comando ls (list) e todos os seus sinalizadores disponíveis. Algumas páginas de manual
comando se você não souber exatamente o que ele faz
são longas. Para descer na rolagem, pressionar a tecla Return move você para baixo uma
e como funciona. Faça um backup completo do seu
linha de cada vez. Para descer uma página de cada vez, pressione fn+seta para baixo no
computador antes de começar a brincar com a linha de
Mac ou Shift+Page Down no Linux. Para voltar uma página, use fn+seta para cima ou
comando para que você tenha a tranqüilidade de saber
Shift+Page Up, respectivamente. Finalmente, para sair da página man, digite q para
que seus arquivos ainda estarão disponíveis se algo der
retornar ao prompt. muito errado.
Aprendendo mais
Não surpreendentemente, esses comandos são apenas a ponta do iceberg quando se
trata de utilitários de linha de comando. Para obter uma lista completa de comandos que
podem ser usados com o bash, consulte “An A–Z Index of the Bash Command Line for
Linux” em ss64.com/bash/. Você vai buscá-los conforme necessário, então não fique
sobrecarregado. Além disso, à medida que você começar a instalar e usar novas
ferramentas como as listadas neste capítulo, você aprenderá gradualmente os comandos,
sinalizadores e argumentos para elas também. Tudo parte de um dia de trabalho!
Claramente, não tenho espaço (e se estou sendo honesto, experiência) para escrever um
tutorial abrangente na linha de comando neste capítulo, mas você encontrará livros e
muitos tutoriais online que podem ensiná-lo. Encontrei o tutorial de Michael Hartl “Aprenda
a linha de comando suficiente para ser perigoso”

CSS Power Tools (Processadores)
ser completo e acessível se você estiver começando do zero (www.

learnenough.com/command-line-tutorial#sec-basics). Recomendo também a
série de tutoriais do Envato Tuts+, “The Command Line for Web
Aqui está a coisa sobre Design” (webdesign.tutsplus.com/series/the-command-line-for-web-design--
Ferramentas de desenvolvimento
cms-777). Se você gosta de tutoriais em vídeo, experimente o curso “Linha de
comando para não-técnicos” da Remy Sharp (terminal.training).
Esteja ciente de que o cenário de ferramentas
de desenvolvimento está sempre mudando. As Agora que você tem uma familiaridade básica com a linha de comando, vamos ver as ferramentas
ferramentas vêm e vão rapidamente, com toda
para as quais você pode usá-la, começando com ferramentas para escrever e otimizar CSS.
a comunidade de desenvolvimento pulando em
um movimento de estrutura e depois passando
para a próxima novidade. É difícil escrever
sobre ferramentas específicas em um livro que FERRAMENTAS DE ENERGIA CSS (PROCESSADORES)
deve durar alguns anos. Fiz um esforço para
apresentar as ferramentas mais estabelecidas Eu sei que você está apenas se acostumando a escrever CSS, mas eu seria negligente se não
e estáveis no início de 2018, mas você deve
apresentasse algumas ferramentas avançadas de CSS que se tornaram centrais para o fluxo de
saber que existem muito mais ferramentas de
trabalho do desenvolvedor web profissional. Eles se enquadram em duas categorias gerais:
nicho por aí e, quando você ler isso, alguma
nova ferramenta pode estar na moda.
• Linguagens construídas sobre CSS que empregam características de sintaxe que economizam
Enquanto você lê este capítulo, concentre- tempo das linguagens de programação tradicionais. Estes são tradicionalmente conhecidos
se nas funções que as ferramentas executam, como pré- processadores. Os pré-processadores mais populares até o momento são Sass,
comece com as mencionadas aqui quando LESS e Stylus. Quando você escreve seus estilos em uma dessas linguagens, você precisa
você está pronto e mantenha seus ouvidos usar um programa ou script para converter o arquivo resultante em um documento CSS
atentos para novas opções. padrão que os navegadores possam entender.
• As ferramentas de otimização de CSS pegam seu CSS padrão e limpo e o tornam ainda melhor,
melhorando a consistência entre navegadores, reduzindo o tamanho do arquivo para um
melhor desempenho e aprimorando muitas outras tarefas. As ferramentas que otimizam o
CSS pronto para navegador são comumente conhecidas como pós-processadores.
Antes de ficar muito confortável com os termos pré-processador e pós-processador, você deve
NOTA saber que a distinção não é exatamente clara. Os pré-processadores sempre foram capazes de
realizar algumas das tarefas de otimização para as quais os pós-processadores são bons, e os
Dicas de chapéu para Stefan Baumgartner,
pós-processadores estão começando a permitir algumas funções normalmente encontradas em
cujo artigo “Desconfundindo Pré e Pós
pré-processadores. As linhas estão se confundindo, então algumas pessoas se referem a todas
Processamento” (medium.com/@ddprrt/
deconfusing-pre-and-post-processing essas ferramentas simplesmente como processadores CSS, incluindo taxas de syn especiais para
d68e3bd078a3) me ajudou a resolver todas autoria, bem como otimizadores de CSS. Muitas funções do processador CSS também são
essas coisas de processamento de CSS, e incorporadas a ferramentas de terceiros, como CodeKit (codekitapp.com, apenas Mac) para
David Clark por seu artigo esclarecedor “É compras em uma única parada. Acho que é benéfico para você estar familiarizado com os termos
hora de todos aprenderem sobre tradicionais, pois eles ainda estão em uso generalizado, e vou usá-los aqui para simplificar.
PostCSS” (davidtheclark.com/its-time-for-every
one-to-learn-about-postcss/).
Introdução aos pré-processadores (especialmente Sass)

Os pré-processadores consistem em uma sintaxe de autoria e um programa que traduz (ou
compila, para usar o termo apropriado) arquivos escritos nessa sintaxe para arquivos CSS antigos
que os navegadores podem usar (FIGURA 20-3). Por exemplo, em Sass, você escreve

na linguagem de sintaxe Sass e salve seus arquivos com o sufixo .scss , indicando que
está nessa linguagem e não em um arquivo CSS. O programa Sass, originalmente
escrito na linguagem Ruby (veja Nota Técnica), converte a sintaxe SCSS para a NOTA TÉCNICA
sintaxe CSS padrão e salva o arquivo resultante com o sufixo .css . LESS e Stylus
O projeto Sass escreveu uma versão
funcionam da mesma maneira, mas usam JavaScript para conversão. Todas essas mais recente em C++ que pode ser usada com
ferramentas são instaladas e executadas por meio da linha de comando.
outras línguas. A maioria dos
desenvolvedores agora compila
arquivos .scss com o Node Sass porque
ele se integra mais facilmente a um fluxo de
trabalho com outras ferramentas Node.js.
Estendido
COMPILADOR Padrão
(como script)
(conversor) CSS
Sintaxe CSS
.scss Gema Sass Ruby ou Node Sass (JS)

.menos less.js .css
.estilo caneta.js
FIGURA 20-3. Uma visão simplificada da função de um pré-processador.
De longe, o pré-processador mais popular é o Sass (“Folhas de estilo sintaticamente

impressionantes”), criado por Hampton Catlin e Nathan Weizenbaum, que estavam
cansados da repetitividade do CSS normal. Sua nova sintaxe permitiu que os autores
de CSS usassem o tipo de atalho típico em scripts. Originalmente, ele usava uma
sintaxe recuada e sem colchetes (que ainda é uma opção), mas uma versão posterior
conhecida como SCSS (de “Sassy CSS”) é baseada no formato CSS entre colchetes
({ }) que conhecemos e amamos. Na verdade, um documento CSS válido também
seria um documento SCSS válido. Isso torna muito mais fácil começar com Sass,
porque é familiar, e você pode usar apenas um pouco de Sass em folhas de estilo
escritas da maneira que você aprendeu neste livro.
Vou mostrar alguns exemplos de sintaxe Sass para dar uma ideia geral. Quando você
estiver pronto para aprender Sass, um ótimo primeiro passo é o livro de Dan Cederholm,
Sass for Web Designers (A Book Apart). Listei recursos adicionais no final da seção.
Enquanto isso, vamos dar uma olhada em três dos recursos Sass mais populares:
aninhamento, variáveis e mixins.
Aninhamento
Digamos que você tenha um documento HTML com um elemento nav que contém Sass permite que você aninhe
uma lista não ordenada para várias opções de menu. O Sass permite aninhar as regras estilos para combinar com a estrutura de
de estilo para os elementos nav, ul e li para refletir a estrutura da marcação HTML. a marcação.
Isso alivia a necessidade de digitar os seletores várias vezes - o compilador Sass faz
isso para você. O exemplo a seguir mostra estilos aninhados como eles podem ser
escritos na sintaxe Sass:

navegação {
margem: 1em 2em;
ul {
preenchimento: 0;
margem: 0;
li {
exibição: bloco;
largura: 6em;
altura: 2em;
}
}
}
Quando o Sass converte o arquivo SCSS para CSS padrão, ele compila para isso:
navegação {
margem: 1em 2em;

}
navegue {
preenchimento: 0;
margem: 0;
}
nav ul li {
exibição: bloco;
largura: 6em;
altura: 2em;
}
Variáveis
Uma variável é um valor que você pode definir uma vez e depois usar várias vezes na
Uma variável é um valor que folha de estilo. Por exemplo, a O'Reilly usa o mesmo tom de vermelho repetidamente em
você define uma vez e reutiliza seu site, para que seus desenvolvedores possam criar uma variável chamada “oreilly-red”
em toda a folha de estilo. e usar o nome da variável para valores de cor. Dessa forma, se eles precisarem ajustar a
sombra posteriormente, eles precisarão alterar o valor da variável (a cor RGB real) apenas
em um lugar. Aqui está como configurar e usar uma variável no Sass:
$oreilly-vermelho: #900;
a
{ cor da borda: $oreilly-vermelho; }
Quando compila para CSS padrão, o valor da variável é inserido no local onde é chamado:
uma {
cor da borda: #900;

}
A vantagem de usar uma variável é que você pode alterar o valor em um lugar em vez de
pesquisar e substituir em todo o documento. Quando as equipes usam nomes de variáveis,
isso também ajuda a manter os estilos consistentes em todo o site.

Mixins
Sass permite que você reutilize conjuntos inteiros de estilos usando uma convenção
chamada mixins. O exemplo a seguir salva uma combinação de estilos de plano de
fundo, cor e borda como um mixin chamado “especial”. Para aplicar essa combinação
de estilos, @include -a na declaração e chame-a pelo nome: Mixins são conjuntos de regras
que pode ser reutilizado.
@mixin especial
{ cor: #fff; cor
de fundo: #befc6d; borda:
1px pontilhado #59950c; }
a.nav { @include especial; }
a.nav: hover { @include especial;
borda: sólido amarelo de 1px; }
Quando compilado, o CSS final fica assim:

a.nav
{ color: #fff;
cor de fundo: #befc6d; borda:
1px pontilhado #59950c; }
a.nav: hover { color: #fff; cor de
fundo: #befc6d; borda: 1px
pontilhado #59950c; borda:
sólido amarelo de 1px; }
Observe que o estado de foco tem uma segunda declaração de borda que substitui
os valores no mixin, e tudo bem. Mixins são uma solução popular para lidar com
prefixos de fornecedores. Aqui está um mixin para border-radius que inclui um
argumento (um espaço reservado para um valor que você fornece indicado com um $):
@mixin arredondado($radius)
{ -webkit-border-radius: $radius;
-moz-border-radius: $radius;
raio da borda: $raio;
}
Ao incluir o mixin em uma regra de estilo, forneça o valor para $radius e ele será
conectado a cada instância nas declarações:
à parte
{ @include
arredondado(.5em);
fundo: #f2f5d5; }
Isso compila para o seguinte:

à parte
{ -webkit-border-radius: .5em;
-moz-border-radius: .5em;
raio da borda: .5em;
fundo: #f2f5d5; }

Construir um mixin em torno de argumentos de preenchimento de lacunas os torna

reutilizáveis e até compartilháveis. Muitos desenvolvedores criam suas próprias bibliotecas
de mixin para usar em vários projetos. Você também pode aproveitar as bibliotecas de mixin
MENOS e Stylus existentes em ferramentas como Compass (uma estrutura de autoria de CSS de código
Sass é o pré-processador mais aberto em compass style.org) ou Bourbon (bourbon.io). Quando você ler isso, pode haver
usado, mas não é o único jogo na cidade outros, então pesquise para ver o que está disponível.
para aninhamento, variáveis, mixins e muito
mais.
Recursos atrevidos
LESS (lesscss.org) é outra extensão CSS
com habilidades semelhantes a scripts. Aninhamento, variáveis e mixins são apenas uma pequena fração do que o Sass pode fazer.
É muito semelhante ao Sass, mas não Ele pode lidar com operações matemáticas, “escurecer” e “clarear” cores matematicamente
possui recursos avançados de lógica de
em tempo real e processar instruções if/else , apenas para citar alguns recursos.
programação (como instruções if/else ) e
possui pequenas diferenças na sintaxe. Depois de obter alguma prática e sentir que está pronto para levar suas folhas de estilo para
Por exemplo, variáveis em LESS são o próximo nível, explore alguns desses artigos e recursos Sass e LESS:
indicadas pelo símbolo @ em vez de $. A
outra grande diferença é que um arquivo
LESS é processado em CSS regular com • O site Sass (sass-lang.com)
JavaScript (less.js) em vez de Ruby. Observe
que compilar um arquivo LESS em CSS exige • “Introdução ao Sass”, de David Demaree (alistapart.com/articles/
muito do processador e sobrecarregaria o começando-com-sass)
navegador. Por isso, é melhor fazer a conversão
para CSS antes de enviar para o servidor. • “Uma introdução ao MENOS, e MENOS vs. Sass”, de Jeremy Hixon (www.
smashingmagazine.com/2011/09/an-introduction-to-less-and-comparison
LESS oferece uma comunidade de to-sass/)
desenvolvedores muito ativa e a biblioteca
mixin “LESShat”.
Stylus (stylus-lang.com) é o garoto Introdução aos pós-processadores (principalmente PostCSS)

relativamente novo no bloco de pré-
processador. Ele combina os recursos lógicos Como mencionei anteriormente, os pós-processadores são scripts que otimizam o código
do Sass com a conveniência de um compilador CSS padrão para torná-lo melhor (FIGURA 20-4). “Melhor” geralmente significa suporte de
baseado em JavaScript (stylus. navegador consistente e livre de bugs, mas existem centenas de scripts de pós-
js). Ele também oferece a sintaxe mais
processamento que fazem uma grande variedade de coisas legais. Veremos alguns exemplos em
flexível: você pode incluir o máximo de
um momento.
“pontuação” CSS (colchetes, dois pontos e
ponto e vírgula) que desejar, prefixar variáveis
com $ ou não e tratar nomes de mixin como
propriedades regulares.
Os desenvolvedores que usam o Stylus
gostam de como é fácil escrever e compilar.
Nib e Axis são duas bibliotecas de mixin Padrão Otimização Melhor
CSS Ferramentas CSS
disponível para Stylus.
Quando estiver pronto para levar sua

autoria de CSS para o próximo nível,
você pode experimentar cada uma delas.
O que você escolhe é uma questão de .css Pós CSS .css
preferência pessoal; no entanto, se você Retrabalho
estiver trabalhando em uma equipe de Por favor

desenvolvimento profissional, uma pode
ser escolhida para você.
FIGURA 20-4. Os pós-processadores otimizam os arquivos CSS padrão existentes.

O filho do pôster para pós-processamento é o Autoprefixer, que pega os estilos CSS que
você escreve, verifica neles as propriedades que exigem prefixos do fornecedor e, em
seguida, insere as propriedades prefixadas automaticamente. Que economia de tempo e dor
de cabeça!
De volta ao Capítulo 16, Layout CSS com Flexbox e Grid, usamos o Autoprefixer por meio
de uma interface de página da web (autoprefixer.github.io) para gerar as pré-correções
necessárias. Embora a página da Web seja útil (especialmente enquanto você está
aprendendo), é mais comum que os pós-processadores sejam implementados com um executor de tarefas
como Grunt ou Gulp. Vamos dar uma rápida olhada neles mais adiante neste capítulo.
No momento da redação deste artigo, a cena de pós-processamento é dominada pelo

PostCSS (post css.org). PostCSS é “uma ferramenta para transformar CSS com JavaScript”
criada por Andrey Sitnik, que também criou o Autoprefixer. PostCSS é tanto um programa
baseado em JavaScript (um módulo Node.js , para ser preciso) quanto um ecossistema de
plug-ins criados pela comunidade que resolvem todos os tipos de problemas de CSS.
O PostCSS analisa o CSS (ou uma sintaxe semelhante a CSS, como Sass ou LESS), analisa
sua estrutura e disponibiliza a “árvore” resultante para plug-ins manipularem o código (consulte
a Nota). NOTA
Essa API aberta torna fácil para qualquer pessoa criar um plug-in PostCSS e, como resultado, A “árvore” é formalmente conhecida como Abstract
Syntax Tree (AST) e é a API para plug-ins PostCSS.

existem literalmente centenas de plug-ins criados e compartilhados por desenvolvedores (veja-
os em www.postcss.parts). Eles variam do salva-vidas ao esotérico, mas por ser um sistema
modular, você pode escolher apenas as ferramentas que achar úteis ou até criar as suas
próprias. Aqui estão apenas alguns:
• Stylelint (stylelint.io) verifica se há erros de sintaxe em seu arquivo CSS (um processo
chamado linting) e redundâncias.
• CSSNext (cssnext.io) permite que você use recursos futuros do CSS Nível 4 hoje, gerando
fallbacks que funcionam em navegadores que ainda não implementaram esses recursos.
• PreCSS (github.com/jonathantneal/precss) é um pacote de plug-ins que permite escrever

sintaxe semelhante ao Sass (loops, condicionais, variáveis, mixins e assim por diante) e
a converte em CSS padrão. Este é um exemplo de um pós-processamento sendo usado
para auxiliar a autoria, que é onde a linha entre pré e pós-processamento fica borrada.
• Fixie (github.com/tivac/fixie) insere hacks que são necessários para fazer os efeitos
funcionarem em versões antigas do Internet Explorer (“Fix-IE”, entendeu?).
• Os conversores de formato de cor traduzem formatos de cor alternativos (como HWB, HCL
e hex + canal alfa) para RGB padrão ou hexadecimal.
• O plug-in Pixrem converte unidades rem em pixels para

navegadores.
• O plug-in List-selectors lista e categoriza os seletores que você usou em sua folha de estilo
para revisão de código. É um exemplo de plug-in que não altera seu arquivo, mas fornece
informações úteis sobre ele.

Ferramentas de construção (Grunt e Gulp)
A partir dessa pequena lista, você provavelmente pode ver por que os pós-processadores se
tornaram tão populares. Eles liberam você para escrever CSS com a sintaxe que desejar,
NOTA
aproveitando propriedades e valores de ponta, mas com a tranquilidade de que tudo funcionará bem
PostCSS não é o único pós-processador em todos os navegadores. Eles também eliminam a necessidade de conhecer todas as idiossincrasias
disponível. Outros frameworks incluem Rework do navegador, passadas e presentes, para fazer seu trabalho. Definitivamente vale a pena conhecer,
(github.com/reworkcss/rework) e Pleeease mesmo que você não esteja pronto para levá-lo imediatamente. Confira estes recursos para obter
(pleeease.io), mas eles não são tão completos. mais informações:
Quando você ler isso, pode haver muitos mais.
Assim vai o mundo das ferramentas de • Artigo de Drew Minns “PostCSS: Uma Introdução Abrangente” para a Smashing Magazine
desenvolvimento web.
(www.smashingmagazine.com/2015/12/introduction-to-postcss/)
• O tutorial Envato Tuts+ “PostCSS Deep Dive”

(webdesign.tutsplus.com/series/postcss-deep-dive--cms-889)
FERRAMENTAS DE CONSTRUÇÃO (GRUNT E GULP)
No mundo do software, é necessário um processo de compilação para testar o código-fonte e

compilá-lo em um software executável. À medida que os sites evoluíram de uma coleção de arquivos
HTML estáticos para aplicativos complexos dependentes de JavaScript, geralmente gerados a partir
de modelos, as ferramentas de construção também se tornaram parte integrante do fluxo de trabalho
de desenvolvimento da Web. Algumas ferramentas de construção da web, como Grunt e Gulp, são
comumente chamadas de executores de tarefas. Você os usa para definir e executar várias tarefas
(qualquer coisa que você possa fazer manualmente a partir da linha de comando) em seus arquivos
HTML, JavaScript, CSS e imagem de trabalho para prepará-los para publicação.
Automação
Você também pode automatizar suas tarefas, para que elas aconteçam em segundo plano sem a
necessidade de digitar comandos. Para fazer isso, você diz à ferramenta de compilação para
“observar” seus arquivos e pastas para alterações. Quando uma alteração é detectada, ela aciona
as tarefas relevantes para serem executadas automaticamente conforme você as configurou.
Depois de ter o executor de tarefas configurado e configurado para assistir seus arquivos, você pode
continuar escrevendo CSS, e todas essas coisas de linha de comando acontecem para você sem
nunca tocar em um aplicativo de terminal. Veja como isso pode parecer. Imagine fazer uma alteração
no seu arquivo Sass e salvá-lo. O Grunt vê instantaneamente que o arquivo .scss foi alterado,
NOTA converte-o automaticamente para .css (consulte a Nota) e, em seguida, recarrega o navegador para
refletir sua alteração.
Existe um plug-in Grunt para converter arquivos
SCSS, mas não é tão completo quanto o Ruby.
Algumas tarefas comuns
A seção anterior sobre processadores CSS deve ter dado uma ideia de algumas coisas que seria
bom automatizar. Permita-me listar vários outros para lhe dar uma visão sólida das maneiras pelas
quais os executores de tarefas facilitam seu trabalho.

• Concatenação. É comum que as equipes da Web dividam folhas de estilo e scripts em

partes pequenas e especializadas de .css e .js. Quando é hora de publicar, no entanto,
você quer o menor número possível de chamadas para o servidor para fins de
desempenho, para que esses pequenos pedaços sejam concatenados (reunidos) em
arquivos mestres.
• Compressão e “minificação”. Outra maneira de melhorar o desempenho é tornar seus

arquivos tão pequenos quanto possível, removendo espaços desnecessários e retornos
de linha. As ferramentas de compilação podem compactar seu CSS e reduzir o JavaScript.
• Verificação de erros em HTML, CSS e JavaScript (linting).
• Otimização de imagens com ferramentas que reduzem o tamanho do arquivo de todas as

imagens em um diretório.
• Ajuda a enviar ou enviar alterações para um repositório de controle de versão (Git).
• Atualizar seu navegador para refletir as alterações que você acabou de fazer em um
arquivo (plug-in LiveReload).
• Construindo arquivos HTML finais a partir de modelos e dados de conteúdo (veja a barra
lateral “Construindo Sites com Dados e Modelos”).
• Executando pré e pós-processadores CSS.
Grunhir e Gulp
A primeira e mais estabelecida ferramenta de construção da web é o Grunt (gruntjs.com),
presumivelmente nomeado para lidar com todo o “trabalho pesado” para você. É uma
ferramenta JavaScript construída na estrutura Node.js de código aberto e você a opera
usando a linha de comando. O interessante do Grunt é que a comunidade de desenvolvimento
criou literalmente milhares de plug-ins que executam praticamente qualquer tarefa que você
possa imaginar. Basta baixar um, configurá-lo e começar a usá-lo. Você não precisa ser um
mestre em JavaScript para começar.
Outra opção popular é o Gulp (gulpjs.com), que tem a vantagem de rodar um pouco mais
rápido, mas também requer mais conhecimento técnico do que o Grunt porque você o
configura com código JS real. Outros concorrentes no momento da redação deste artigo são
Webpack (bastante popular!), Brunch, Browserify e Broccoli.
Novas ferramentas com nomes divertidos aparecem regularmente. Alguns desenvolvedores
simplesmente usam scripts baseados em Node.js sem usar um programa de execução de
tarefas como intermediário. A questão é que há muitas opções.
Você encontrará muitos tutoriais on-line para aprender como baixar e configurar a ferramenta
de compilação de sua escolha quando estiver pronto para automatizar seu fluxo de trabalho.
Espero tê-lo informado sobre as possibilidades, e quando um entrevistador de emprego
mencionar Grunt e Gulp, você saberá que eles não estão apenas sofrendo de indigestão.

Construindo Sites com Dados e Modelos

Ao longo deste livro, escrevemos o HTML para nossas páginas passou a escrever vários livros sobre web design para a
manualmente, agrupando tags em torno de elementos de conteúdo em uma O'Reilly, incluindo <i>Web Design in a Nutshell
ordem lógica de origem. Todo o conteúdo da página está contido no </i>, <i>Aprender Web Design</i> e a <i>Referência de
documento .html . É claro que é completamente aceitável construir sites inteiros
bolso HTML5</i>. Mais recentemente, os dias de Jennifer
são preenchidos com a organização da Conferência
a partir de páginas estáticas como essas, mas no mundo real – onde os sites
ARTIFACT. …</p> palestrante--links:
podem ter milhares de páginas com conteúdo personalizado para usuários
individuais – é necessária uma solução mais robusta. - link--label: "Site"
link--target: "http://www.jenville.com" link--title:
Hoje em dia, é mais comum usar um sistema ou estrutura de modelos "jenville.com"
- link--label: "Twitter"
para gerar páginas da Web a partir de conteúdo armazenado como dados.
Os modelos usam marcação HTML normal, então tudo o que você aprendeu
link--target: "http://www.twitter.com/jenville" link--title:
"@jenville"
até agora servirá bem, mas em vez de conteúdo específico entre as tags,
marcadores de dados especiais são colocados para extrair conteúdo de um E aqui está a marcação do documento de modelo Handlebars,
banco de dados ou arquivo de dados. speaker.hbs. (Eu o editei um pouco para ser breve.) Se você observar o
código destacado, verá que, em vez do conteúdo real, há os mesmos rótulos de
Há um grande número de opções de ferramentas para geração de sites, todas
dados usados no arquivo YAML entre colchetes. (Se você virar um colchete de
muito além do escopo deste livro. No entanto, como sempre, gostaria de dar
lado, parece um bigode de guidão, daí o nome!). Observe também que o modelo
uma amostra de como pode ser o processo de modelagem.
tem marcação para um par rótulo/link, mas faz um loop e exibe todos os links
do alto-falante no arquivo de dados:
Certa vez, trabalhei em um site que usava uma ferramenta de modelo
chamada Handlebars (handlebarsjs.com) para extrair conteúdo de arquivos
de dados escritos na linguagem YAML (www.yaml.org/start.html) . <div class="layout--container">
Estas são apenas duas opções para fazer esse tipo de coisa. Vejamos um
<div class="falante--foto-container">
<img src="{{page-data.speaker--photo}}">
pequeno exemplo de como um modelo e dados foram usados para montar o
</div>
conteúdo da Web mostrado na FIGURA 20-5.
<article class="speaker--content"> <div
class="speaker--biography">
{{{page-data.speaker--biography}}}
</div>
<ul class="falante--links">
{{#each page-data.speaker--links}}
<li class="speaker--link-item">{{link--label}}: <a
href="http://{{link--target}}" class="speaker--
link">{{link--title}}</a></li> {{/each}}
</ul>
FIGURA 20-5. Uma pequena parte de uma página da Web de alto- </article>
falante que foi criada com Handlebars e YAML. </div
Este é apenas um exemplo de como os modelos reduzem a
Aqui está um pequeno snippet dos dados conforme aparecem no arquivo
redundância na marcação. O site Handlebars (handlebarsjs.com) tem uma boa
YAML (.yml) :
descrição de templates semânticos diretamente na página inicial se você quiser
orador--nome: "Jennifer Robbins" mais informações sobre como ele funciona.
orador--descrição: "Designer, Autor, ARTIFACT
Cofundador" É claro que os navegadores não têm ideia do que fazer com esses formatos
de arquivo, portanto, antes que o site possa ser publicado, ele precisa ser
orador--foto: "/img/speakers/jennifer-robbins.
jpg" construído ou montado, mesclando todos os dados nos módulos de modelo e
#HTML todos os módulos em páginas da web inteiras. Esse é o trabalho de scripts e
palestrante--biografia: | ferramentas de construção como as apresentadas nesta seção.
<p>Jennifer faz design para a web desde Espero que este breve exemplo lhe dê uma ideia de como os sites
1993, quando trabalhou no primeiro site comercial, GNN, gerados funcionam.
da O'Reilly Media. Desde então ela tem

Controle de versão com Git e GitHub
CONTROLE DE VERSÃO COM

GIT E GITHUB
Se você fez algum tipo de trabalho em um computador, provavelmente usou algum tipo de sistema para
acompanhar as versões do seu trabalho. Você pode ter criado um sistema de nomenclatura de rascunhos
até chegar à versão “final” (e a versão “final-final” e a versão “final-final-não-realmente” e assim por
diante). Você pode aproveitar o Time Machine do macOS para salvar versões para as quais pode voltar
em caso de emergência. Ou você pode ter usado um dos sistemas profissionais de controle de versão
que são empregados por equipes há décadas.
O rei dos sistemas de controle de versão (VCS) para desenvolvimento web é um programa robusto
FATO ENGRAÇADO
chamado Git (git-scm.com). Neste ponto, conhecer o Git é um requisito se você estiver trabalhando em
equipe e é uma boa habilidade para ter até mesmo para seus próprios projetos. O Git foi criado por Linus Torvalds, o
criador do sistema operacional Linux,
quando ele precisava de uma maneira de
Nesta seção, apresentarei a terminologia e os modelos mentais que facilitarão a introdução ao Git.
permitir que uma enorme comunidade
Ensinar todos os detalhes de como configurar e usar o Git a partir da linha de comando é um trabalho contribuísse para o projeto Linux.
para outro livro e tutoriais online (eu listo alguns no final da seção), mas gostaria que alguém tivesse
explicado a diferença entre um “ branch” e um “fork” para mim quando eu estava começando, então é
isso que eu vou fazer por você.
Começaremos com uma distinção básica: Git é o programa de controle de versão que você executa em
seu computador; O GitHub (github.com) é um serviço que hospeda projetos Git, gratuitamente ou
mediante taxa. Você interage com o GitHub usando o Git, a partir da linha de comando, com a interface
do usuário no site do GitHub ou usando um aplicativo independente que oferece uma interface GUI para
comandos do Git.
Isso não era óbvio para mim no início, e quero que fique claro para você desde o início.
O GitHub e serviços semelhantes (veja a Nota) são principalmente wrappers baseados na Web em torno NOTA
do Git, oferecendo recursos como rastreamento de problemas, uma ferramenta de revisão de código e
Beanstalk (beanstalkapp.com), GitLab (gitlab.com) e
uma interface do usuário da Web para navegar em arquivos e histórico. Eles são convenientes, mas
Bitbucket (bitbucket.
lembre-se de que você também pode configurar o Git em seu próprio servidor e compartilhá-lo com os org) são outros serviços de hospedagem Git voltados
membros de sua equipe sem nenhum serviço de terceiros como o GitHub envolvido. para projetos de escala empresarial. O GitLab tem uma
opção gratuita para projetos públicos, semelhante ao
GitHub, e por ser de código aberto, você mesmo pode

Por que usar o Git hospedá-lo.
Há várias vantagens em tornar o Git (e o GitHub) parte do seu fluxo de trabalho. Primeiro, você pode
reverter facilmente para uma versão anterior do seu projeto se os problemas aparecerem no futuro. Como
todas as alterações feitas são registradas e descritas, isso ajuda a determinar em que ponto as coisas
podem ter acontecido
errado.
O Git também facilita a colaboração em uma fonte de código compartilhada. Você pode colaborar
estreitamente com um ou mais desenvolvedores em um projeto privado, mesclando todos os

suas alterações em uma cópia primária. Como benefício adicional, o processo de

compartilhamento é uma forma de obter uma visão extra do seu trabalho antes de ser
incorporado. Você também pode encorajar a colaboração informal em um projeto público,
acolhendo contribuições de pessoas que você nem conhece de uma forma segura e
gerenciada. Git é uma ferramenta favorita para esse tipo de colaboração em todos os tipos
de projetos de código aberto.
Ficar atualizado com o GitHub em particular é importante porque é o que todos estão
Git é uma ferramenta favorita para
usando. Se o seu projeto for público (acessível a qualquer pessoa), a hospedagem é
colaboração em projetos de gratuita. Para projetos privados e comerciais, o GitHub cobra uma taxa de hospedagem.
código aberto. Além de hospedar projetos, eles fornecem ferramentas de colaboração, como rastreamento
de problemas. Você já deve ter percebido que alguns dos links para ferramentas que
mencionei neste livro vão para os repositórios do GitHub. Quero que saiba o que pode fazer
quando chegar lá.
Como funciona o Git
O Git mantém uma cópia de cada revisão de seus arquivos e pastas à medida que você
avança, com cada alteração (chamada de confirmação) conectada com um ID exclusivo
(gerado pelo Git), uma mensagem (escrita por você) descrevendo a alteração e outras
metadados. Todas essas versões e o log de confirmação são armazenados em um
repositório, geralmente chamado de “repo”.
Depois de instalar o Git em seu computador, toda vez que você cria um novo repositório ou
clona um existente, o Git adiciona um diretório e arquivos representando os metadados do
repositório junto com outros arquivos na pasta do projeto. Depois que o repositório Git for
inicializado, você poderá confirmar as alterações e aproveitar o recurso “máquina do tempo”
se precisar voltar para uma versão anterior. Dessa forma, o Git é uma boa ferramenta para
um fluxo de trabalho solo.
É mais provável que você trabalhe com uma equipe de outras pessoas em um projeto.
Nesse caso, é usado um modelo de hub no qual há um repositório oficial em um servidor
central do qual cada membro da equipe faz uma cópia local para trabalhar. Cada membro
da equipe trabalha em sua própria máquina, comprometendo-se com seu repositório local
e, em intervalos lógicos, carrega seu trabalho de volta para o repositório central.
É isso que torna o Git um sistema de controle de versão distribuído em comparação com
outros sistemas, como o SVN, que exigem que você confirme todas as alterações
diretamente no servidor. Com o Git, você pode trabalhar localmente e offline.
A primeira parte de dominar o Git é dominar seu vocabulário. Vamos analisar algumas das
terminologias que serão úteis quando você estiver aprendendo Git e o serviço GitHub. A
FIGURA 20-6 é um diagrama simplificado que deve ajudá-lo a visualizar como as peças se
encaixam.

adicionar comprometer-se Empurre
Área de trabalho Índice Local Controlo remoto

Visualização do Git
(diretório de
(área de preparação) repositório repositório
trabalho) Recursos
Precisa de mais ajuda para imaginar como

todas essas peças e comandos funcionam
juntos? Experimente estas visualizações
puxar
Recursos:
FIGURA 20-6. Visualização da estrutura do Git. • O Git Cheatsheet do NDP Software
fornece um mapeamento interativo

completo de como vários comandos do Git
Diretório de trabalho correspondem ao espaço de trabalho e aos
repositórios locais e remotos. Vale a pena
O diretório de trabalho é o diretório de arquivos em seu computador no qual você faz seu trabalho conferir em ndpsoftware.com/git
real. Sua cópia de trabalho de um arquivo é aquela na qual você pode fazer alterações ou, em cheatsheet.html#loc=workspace;.
outras palavras, é o arquivo que você pode abrir do disco rígido usando o Finder ou Meu
Computador. • Uma Referência Visual do Git (marklodato.
github.io/visual-git-guide/index en.html) é
uma coleção de diagramas que demonstram
Repositório
Comandos Git.
Seu repositório Git local fica ao lado dos arquivos em seu diretório de trabalho.
Ele contém cópias, ou instantâneos, de todos os arquivos em um único projeto em todas as etapas • “Entendendo o fluxo do
GitHub” (guides.github.com/introduction/
de seu desenvolvimento, embora sejam mantidos ocultos. Ele também contém os metadados
flow/) explica um fluxo de trabalho típico
armazenados com cada alteração. Também pode haver um repositório central para o projeto que no GitHub.
resida em um servidor remoto como o GitHub.
Comprometer-se
Um commit é a menor unidade de interação do Git e a maior parte do que você fará com o Git. O
Git usa “commit” como um verbo e um substantivo. Você pode “salvar” seu documento de trabalho
frequentemente enquanto trabalha, mas você confirma (v.) uma mudança quando deseja adicionar
deliberadamente essa versão ao repositório. Normalmente, você confirma em uma pausa lógica no
Hashes
fluxo de trabalho — por exemplo, quando você corrigiu um bug ou terminou de alterar um conjunto O ID exclusivo que o Git gera para cada
de estilos. commit é tecnicamente chamado de hash
SHA-1, mais carinhosamente conhecido
Quando você faz um commit, o Git registra o estado de todos os arquivos do projeto e atribui como simplesmente hash no mundo dos
metadados à mudança, incluindo o nome de usuário, email, data e hora, um número de ID desenvolvedores. É uma string de 40
multidígito exclusivo (veja a barra lateral “Hashes” ) e uma mensagem que descreve o mudança. caracteres escrita em hexadecimal (0–9 e A–
F são usados), então as chances de ter um
Esses registros armazenados são chamados de commits (n.). Um commit é como um instantâneo
hash duplicado são astronômicas. É comum
de todo o seu repositório—cada arquivo que ele contém—
usar
no momento em que você fez o commit.
hashes curtos em projetos em vez dos 40
caracteres completos. Por exemplo, no
Os commits são aditivos, então mesmo quando você exclui um arquivo, o Git adiciona um commit
GitHub, hashes curtos têm sete caracteres
à pilha. A lista de commits está disponível para sua leitura a qualquer momento. No GitHub, use o
e você os verá em locais como a página de
botão Histórico para ver a lista de commits de um arquivo ou pasta. commits de um projeto. Mesmo com apenas
sete caracteres, as chances de colisão são
O nível de granularidade nos commits permite que você visualize o repositório (projeto) em
pequenas.
qualquer estado em que ele já esteve, sempre. Você nunca perde o trabalho, mesmo enquanto prossegue

mais e mais. É uma grande rede de segurança. Indiretamente, isso também significa que não há nada que
você possa fazer com o Git que não possa desfazer - você nunca pode se colocar em uma situação
impossível.
Encenação
Antes que você possa confirmar uma alteração, primeiro você precisa deixar o Git ciente do arquivo (ou
rastreá -lo, para usar o termo apropriado). Isso é chamado de preparação do arquivo, realizado adicionando
-o ao Git. Na linha de comando, é git add filename, mas outras ferramentas podem fornecer um botão
Add para preparar arquivos. Isso cria um índice local
de arquivos que você pretende enviar para seu repositório local, mas ainda não foram confirmados. Vale
a pena notar que você precisa “adicionar” qualquer arquivo que você alterou, não apenas novos arquivos,
antes de enviá-los. Encenação como um conceito pode demorar um pouco para se acostumar no início,
porque não é especialmente intuitivo.
Ramo
Uma ramificação é uma série sequencial de confirmações, também chamada de pilha de confirmações. O
commit mais recente em qualquer branch é o head
NOTA (ver Nota). Você também pode pensar em uma ramificação como um segmento de desenvolvimento. Os
projetos geralmente têm uma ramificação primária ou padrão, normalmente (embora não necessariamente)
Existem exceções, pois é possível reordenar
chamado master, que é a versão oficial do projeto. Para trabalhar em um branch, você precisa fazer check-
commits; no entanto, é quase sempre verdade
out.
que o commit principal também é o mais
recente.
Ao trabalhar em uma ramificação, a qualquer momento você pode iniciar uma nova ramificação para fazer
um pouco de trabalho sem afetar a ramificação de origem. Você pode iniciar uma nova ramificação para
experimentar um novo recurso, fazer alguma depuração ou brincar com a apresentação. As ramificações
geralmente são usadas para tarefas pequenas e específicas como essa, mas você pode criar uma nova
ramificação para qualquer finalidade que desejar.
Por exemplo, se você estiver trabalhando em “mestre”, mas quiser corrigir um bug, você pode criar uma
nova ramificação fora do mestre e dar à ramificação um novo nome descritivo, como “correção de bug”.
Você pode pensar no branch bugfix como uma cópia do master no ponto em que o bugfix foi criado
(FIGURA 20-7), embora isso não seja exatamente o que está acontecendo nos bastidores.
Para trabalhar no branch bugfix, primeiro você precisa verificar (git checkout bugfix), e então você pode
fazer as alterações, salvá-las, adicioná-las ao Git e enviá-las. Eventualmente, a nova ramificação termina
com um histórico de confirmação diferente da ramificação de origem.
MESTRE comprometer1 compromisso2 comprometer3 comprometer5
novo ramo mesclar
CORREÇÃO DE BUG
comprometer3 comprometer4
FIGURA 20-7. Criando e mesclando um novo branch.

Quando terminar de trabalhar em sua nova ramificação, você poderá mesclar as

alterações feitas na ramificação de origem e excluir a ramificação. Se você não gosta
do que está acontecendo com a nova ramificação, exclua-a sem mesclar, e ninguém
saberá.
Mesclando
Mesclar é o recurso matador do Git para compartilhar código. Você pode mesclar
confirmações de uma ramificação em outra (como todas as confirmações de uma
ramificação de recurso no mestre) ou pode mesclar versões diferentes da mesma
ramificação que estão em computadores diferentes. De acordo com a documentação
do Git, a mesclagem “incorpora as alterações dos commits nomeados (desde o
momento em que seus históricos divergiram da ramificação atual) na ramificação
atual”. Dito de outra forma, o Git vê a mesclagem como “unir duas histórias”, então é
útil pensar em mesclar acontecendo no nível de confirmação.
O Git tenta mesclar cada commit, um por um, no branch de destino. Se apenas uma
ramificação foi alterada, a outra ramificação pode simplesmente avançar rapidamente
para acompanhar as alterações. Se ambas as ramificações tiverem commits que não
estão na outra ramificação - ou seja, se ambas as ramificações tiverem alterações - o
Git percorre cada uma dessas confirmações e, linha por linha, tenta mesclar as
diferenças. O Git realmente altera o código dentro dos arquivos para você
automaticamente, para que você não precise procurar o que mudou.
No entanto, se o Git encontrar conflitos, como duas alterações diferentes feitas na

mesma linha de código, ele fornecerá um relatório dos conflitos em vez de tentar
alterar o próprio código. Os conflitos são apontados nos arquivos de origem entre os
caracteres ======= e <<<<<<< (FIGURA 20-8). Quando surgem conflitos, uma
pessoa real precisa ler a lista e editar manualmente o arquivo, mantendo a alteração
pretendida e excluindo a outra. Uma vez que os conflitos são resolvidos, os arquivos
precisam ser adicionados e confirmados novamente.
FIGURA 20-8. Relatório de conflito do GitHub.

Remotos
Todos os recursos que vimos até agora (commits, branches, merges) podem ser feitos
em seu computador local, mas é muito mais comum usar o Git com um ou mais
repositórios remotos . O repositório remoto pode estar em outro computador em sua
organização, mas provavelmente será hospedado em um servidor remoto como o
GitHub. A coordenação com um repositório remoto abre alguns outros recursos
importantes do Git.
Clone
A clonagem é fazer uma réplica exata de um repositório e tudo o que ele contém.
É comum clonar um repositório de um servidor remoto para o seu próprio computador,
mas também é possível clonar localmente para outro diretório. Se você está começando
em um projeto existente, fazer um clone do repositório do projeto é um primeiro passo
lógico.
Empurrar puxar
Se você estiver trabalhando com um repositório remoto, sem dúvida precisará fazer
upload e download de suas alterações para o servidor. O processo de mover dados de
seu repositório local para um repositório remoto é conhecido como push. Quando você
envia commits para o remoto, eles são mesclados automaticamente com a versão
atual no servidor. Para atualizar sua versão local com a versão que está no servidor,
você a puxa , que recupera os metadados sobre as alterações e aplica as alterações
aos seus arquivos de trabalho. Você pode pensar em empurrar e puxar como a versão
remota da fusão.
É uma prática recomendada puxar o mestre remoto com frequência para manter sua
G IT DICA
própria cópia atualizada. Isso ajuda a eliminar conflitos, principalmente se houver
Sempre puxe antes de empurrar para muitas outras pessoas trabalhando no código. Muitas ferramentas GUI Git fornecem
evitar conflitos.
um botão Sync que puxa e empurra de uma só vez.
Garfo
Você pode ouvir falar em “bifurcar” um repositório no GitHub. A bifurcação faz uma
cópia de um repositório do GitHub para sua conta do GitHub para que você tenha sua
própria cópia para brincar. Ter o repositório em sua conta não é o mesmo que ter uma
cópia de trabalho em seu computador, portanto, depois de bifurcá-lo, você precisa
cloná-lo (copiar) para seu próprio computador (FIGURA 20-9).
NOTA As pessoas bifurcam projetos por vários motivos (veja a Nota). Você pode apenas
querer dar uma olhada sob o capô. Você pode querer iterar e transformá-lo em algo
A bifurcação é mais frequentemente usada para
contribuir com um projeto de código aberto. Para
novo. Você pode querer contribuir para esse projeto na forma de pull requests. Em
projetos comerciais ou pessoais, você geralmente qualquer cenário, a bifurcação é uma proteção para os proprietários de repositórios
se compromete diretamente com o repositório para que eles possam disponibilizar o projeto ao público enquanto também controlam
compartilhado por sua equipe. o que é mesclado de volta nele.

1. Garfo
Repositório de George Repositório de Jen
github.com/george/app-idea github.com/jen/app-idea
6. Solicitação de recebimento
5. Empurre 2. Clonar
Computador de Jen
3. Atualização
4. Compromisso
FIGURA 20-9. Depois de bifurcar um repositório no GitHub, você precisa cloná-lo para obter uma
cópia de trabalho local. (Baseado em um diagrama de Kevin Markham.)
Solicitação de recebimento
É importante ter em mente que sua cópia bifurcada não está mais diretamente conectada
ao repositório original de onde foi bifurcada. Você não será capaz de empurrar para o
original. Se você encontrar algo que considere valioso para o projeto original, poderá fazer
o que é chamado de pull request, ou seja, pedir ao proprietário para fazer pull de suas
alterações no mestre original.
Você também pode fazer um pull request para um repositório ao qual você tem acesso,
não apenas um que você bifurcou. Por exemplo, se você fez uma ramificação fora da
ramificação principal do projeto, você pode fazer uma solicitação pull para que sua equipe
revise o que você fez e dê feedback antes de mesclar suas alterações novamente. Na
verdade, as solicitações pull podem ser usado no início do processo para iniciar uma
discussão sobre um possível recurso.
Ferramentas e recursos Git

A maioria dos usuários do Git dirá que a melhor maneira de usar o Git é com a linha de
comando. Como David Demaree diz em seu livro Git for Humans, “a interface de linha de
comando do Git é sua língua nativa”. Ele recomenda digitar comandos e ver o que acontece
como a melhor maneira de aprender Git. A desvantagem da linha de comando, é claro, é
que você precisa aprender todos os comandos do Git e talvez também enfrentar o próprio
obstáculo da interface da linha de comando. Os recursos a seguir ajudarão você a se
atualizar:
• Git for Humans por David Demaree (A Book Apart) é um ótimo lugar para começar a
aprender Git através da linha de comando (ou como você pretende usá-lo!).
• Pro Git de Scott Chacon e Ben Straub (Apress) está disponível gratuitamente online
(git-scm.com/book/en/v2).

Conclusão
• “Git Cheat Sheet” do GitHub é uma lista dos comandos mais comuns (services.github.com/
on-demand/downloads/github-git-cheat-sheet.pdf).
• O Manual de Referência do Git no site oficial do Git fornece uma lista completa de
comandos e recursos (git-scm.com/docs).
Existem também vários aplicativos gráficos Git disponíveis para aqueles que preferem
ícones, botões e menus para interagir com seus repositórios, e não há vergonha nisso.
Conheço muitos desenvolvedores que usam um aplicativo gráfico e o Terminal lado a lado,
escolhendo a ferramenta que mais facilmente lhes permite realizar a tarefa que precisam.
Se você se sentir mais confortável para começar a usar uma ferramenta gráfica Git,
recomendo o seguinte:
• O GitHub Desktop (do GitHub) é gratuito e está disponível para Mac e Windows
(desktop.github.com).
• O Git Tower 2 (Mac e Windows) custa dinheiro, mas é mais poderoso e oferece uma
interface cuidadosamente projetada, incluindo visualizações de ramificações e fusões
(www.git-tower.com).
Muitos editores de código têm suporte integrado ao Git ou plug-ins Git/GitHub também.
Se você acessar o site GitHub.com, eles farão um bom trabalho ao guiá-lo pelo processo
de configuração com tutoriais fáceis de seguir. Você pode configurar uma conta e obter
algumas habilidades básicas do GitHub em questão de minutos. Sua documentação on-line
é excelente, e eles ainda têm um canal no YouTube com tutoriais em vídeo voltados para
iniciantes (www.youtube.com/githubguides).
E por falar em GitHub, para uma boa introdução aos meandros da interface do GitHub,
recomendo o livro Introducing GitHub: A Non Technical Guide de Brent Beer (O'Reilly).
Quando estiver pronto para começar a usar o Git para controle de versão, você encontrará
todo o suporte necessário.
CONCLUSÃO
Isso conclui o capítulo “ferramentas elétricas” do desenvolvedor web. Começamos com

uma introdução à linha de comando e analisamos alguns fortes incentivos para aprender a
usá-la. Você pode escrever CSS mais rápido e torná-lo mais compatível com vários
navegadores. Você pode tirar proveito dos executores de tarefas e criar ferramentas que
automatizam muito do trabalho repetitivo que você encontra como desenvolvedor.
Finalmente, embora a linha de comando não seja necessária para usar o Git, ela pode
tornar o aprendizado do Git mais fácil e lhe dará superpoderes de repositório quando você começar a domin
Já falamos bastante sobre JavaScript neste capítulo. Na Parte IV, entrego o teclado ao
mestre de JavaScript Mat Marquis, que irá apresentá-lo ao JavaScript e sua sintaxe
(também conseguindo, de alguma forma, torná-lo muito divertido). Voltarei na Parte V para
falar sobre imagens da web.

Teste-se
TESTE-SE
É hora de testar seu conhecimento sobre os tópicos apresentados neste capítulo. Veja o
Apêndice A para as respostas.
1. No mundo dos computadores, o que é um shell?
2. Por que você quer aprender a usar a linha de comando?
uma. É uma boa maneira de manipular arquivos e pastas em seu próprio computador.
b. É uma boa maneira de manipular arquivos e pastas em um servidor remoto.
c. É necessário para muitas ferramentas úteis de desenvolvimento web.
d. Tudo o que precede.
3. O que é um prompt?
4. O que você espera que aconteça se você digitar mkdir newsite após um
prompt de linha de comando?
5. Cite as duas funções principais dos processadores CSS.
6. Cite uma vantagem de aprender Sass.
7. Cite dois recursos para os quais você pode usar um pós-processador CSS.
8. O que é uma tarefa (em relação a uma ferramenta de construção/executor de tarefas)?

Teste-se
9. O que significa “Grunt está assistindo este arquivo”?
10. O que torna o Git um sistema de controle de versão distribuído ?
11. No Git, o que significa se um arquivo é testado?
12. Qual é a diferença entre uma ramificação e uma bifurcação?
13. Por que você deve puxar antes de empurrar?
14. O que é um pull request?

4
JAVASCRIPT PARA COMPORTAMENTO
CAPÍTULO
INTRODUÇÃO A 21
JAVASCRIPT
por Mat Marquês NESTE CAPÍTULO
Neste capítulo, vou apresentá-lo ao JavaScript. Agora, é possível que você tenha recuado O que JavaScript é e não é
um pouco, e eu entendo. Estamos em pleno território da “linguagem de programação” agora,
e isso pode ser um pouco intimidante. Eu prometo, não é tão ruim! Variáveis e arrays
instruções if/else e loops

Começaremos analisando o que JavaScript é — e o que não é — e discutiremos algumas
Funções nativas e personalizadas
das maneiras como ele é usado. A maior parte do capítulo é composta por uma introdução
à sintaxe JavaScript — variáveis, funções, operadores, loops, coisas assim. Você estará Objetos do navegador
codificando até o final do capítulo? Provavelmente não.
Manipuladores de eventos
Mas você terá uma boa vantagem para entender o que está acontecendo em um script
quando vir um. Terminarei com uma olhada em algumas das maneiras de manipular a
janela do navegador e vincular scripts a ações do usuário, como clicar ou enviar um
formulário.
O QUE É JAVASCRIPT?
Se você chegou até aqui no livro, sem dúvida já sabe que JavaScript é uma linguagem de
programação que adiciona interatividade e comportamentos personalizados aos nossos
sites. É uma linguagem de script do lado do cliente, o que significa que é executada na
máquina do usuário e não no servidor, como outras linguagens de programação da Web,
como PHP e Ruby. Isso significa que o JavaScript (e a maneira como o usamos) depende
dos recursos e configurações do navegador. Pode até nem estar disponível, seja porque o
usuário optou por desativá-lo ou porque o dispositivo não o suporta, o que os bons
desenvolvedores têm em mente e planejam.
JavaScript é também o que é conhecido como uma linguagem de programação dinâmica e
vagamente tipada . Não se preocupe muito com esta descrição; Vou explicar o que tudo
isso significa mais tarde.
593
O que é JavaScript?
Primeiro, quero estabelecer que JavaScript é meio mal compreendido.
O que não é
Logo de cara, o nome é bastante confuso. Apesar do nome, JavaScript não tem nada a
ver com Java. Foi criado por Brendan Eich na Netscape em 1995 e originalmente chamado
de “LiveScript”. Mas o Java estava na moda naquela época, então, por causa do marketing,
“LiveScript” se tornou “JavaScript”. Ou apenas “JS”, se você quiser soar o mais legal
possível enquanto fala sobre JavaScript.
JS também tem uma má reputação. Por um tempo, foi sinônimo de todos os tipos de
travessuras inescrupulosas da Internet – redirecionamentos indesejados, janelas pop-up
desagradáveis e uma série de “vulnerabilidades de segurança” nebulosas, só para citar
alguns. Houve um tempo em que o JavaScript permitia que desenvolvedores de tabelas
com menos reputação fizessem todas essas coisas (e pior), mas os navegadores modernos
pegaram em grande parte o lado mais sombrio do desenvolvimento de JavaScript e o
bloquearam. Não devemos culpar o próprio JavaScript por essa época, no entanto. Como
diz o clichê não tão antigo, “com grandes poderes vêm grandes responsabilidades”.
JavaScript sempre permitiu aos desenvolvedores um tremendo controle sobre como as
páginas são renderizadas e como nossos navegadores se comportam, e cabe a nós usar
esse controle de maneira responsável.
O que é isso
Agora sabemos o que JavaScript não é: não está relacionado a Java e não é um vilão
bigodudo à espreita em seu navegador, torcendo as mãos e esperando para alertá-lo sobre
“solteiros quentes em sua área”. Vamos falar mais sobre o que é JavaScript.
NOTA JavaScript é uma linguagem de script leve, mas incrivelmente poderosa. Nós o encontramos
com mais frequência por meio de nossos navegadores, mas o JavaScript se infiltrou em
O JavaScript foi padronizado em 1996 pela
European Computer Manufacturers Association
tudo, desde aplicativos nativos a PDFs e e-books. Até mesmo os próprios servidores web
(ECMA), e é por isso que às vezes você o ouve podem ser alimentados por JavaScript.
chamado de ECMAScript.
Como uma linguagem de programação dinâmica, o JavaScript não precisa ser executado
por meio de qualquer forma de compilador que interprete nosso código legível por humanos
em algo que o navegador possa entender. O navegador efetivamente lê o código da
mesma maneira que nós e o interpreta em tempo real.
JavaScript também é digitado livremente. Tudo isso significa que não precisamos
necessariamente dizer ao JavaScript o que é uma variável. Se estivermos definindo uma
variável com um valor de 5, não precisamos especificar essa variável programaticamente
como um número; ou seja, 5 é um número e o JavaScript o reconhece como tal.
Agora, você não precisa necessariamente memorizar esses termos para começar a
escrever JS, veja bem – para ser honesto, eu não precisei. Isto é apenas para apresentá-lo a um
594 Parte IV. JavaScript para comportamento

alguns dos termos que você ouvirá com frequência enquanto estiver aprendendo JavaScript,
e eles começarão a fazer cada vez mais sentido à medida que você avança. Isso também é
para fornecer material de conversação para o seu próximo coquetel! "Oh eu? Bem, eu tenho
gostado muito de linguagens de script dinâmicas vagamente tipadas ultimamente.” As
pessoas vão apenas acenar silenciosamente para você, o que eu acho que significa que
você está indo bem na conversa. Eu não vou a muitos coquetéis.
O que o JavaScript pode fazer

Mais comumente, encontraremos JavaScript como uma forma de adicionar interatividade a
uma página. Enquanto a camada “estrutural” de uma página é nossa marcação HTML, e a
camada “apresentativa” de uma página é composta por CSS, a terceira camada
“comportamental” é composta por nosso JavaScript. Todos os elementos, atributos e texto
em uma página da Web podem ser acessados por scripts usando o DOM (Document Object
Model), que veremos no Capítulo 22, Usando JavaScript. Também podemos escrever
scripts que reagem à entrada do usuário, alterando o conteúdo da página, os estilos CSS ou
o comportamento do navegador em tempo real.
Você provavelmente já viu isso em ação se já tentou se registrar em um site, digitou um

nome de usuário e recebeu imediatamente um feedback de que o nome de usuário digitado
já é usado por outra pessoa (FIGURA 21-1). A borda vermelha ao redor da entrada de texto
e a aparência da mensagem “desculpe, este nome de usuário já está em uso” são exemplos
de JavaScript alterando o conteúdo da página. Bloquear o envio do formulário é um exemplo
de JavaScript alterando o comportamento padrão do navegador. Em última análise, verificar
essas informações é um trabalho para o servidor, mas o JavaScript permite que o site faça
essa solicitação e ofereça feedback imediato sem a necessidade de recarregar a página.
FIGURA 21-1. JavaScript insere uma mensagem, altera estilos para tornar os erros aparentes
e bloqueia o envio do formulário. Ele também pode detectar se as entradas de e-mail
correspondem, mas o nome de usuário provavelmente seria detectado por um programa no servidor.
21. Introdução ao JavaScript 595

Em suma, o JavaScript permite criar interfaces altamente responsivas que melhoram a experiência
do usuário e fornecem funcionalidade dinâmica, sem esperar que o servidor carregue uma nova
página. Por exemplo, podemos usar JavaScript para fazer o seguinte:
• Sugira o termo completo que um usuário pode estar digitando em uma caixa de pesquisa enquanto
digita. Você pode ver isso em ação no Google.com (FIGURA 21-2).
FIGURA 21-2. O Google.com usa JavaScript para preencher automaticamente um termo de pesquisa
conforme ele é digitado.
• Solicitar conteúdo e informações do servidor e injetá-los no documento atual conforme necessário,

sem recarregar a página inteira – isso é comumente chamado de “Ajax”.
• Mostrar e ocultar conteúdo com base em um usuário clicando em um link ou título, para criar uma
área de conteúdo “recolhível” (FIGURA 21-3).
FIGURA 21-3. JavaScript pode ser usado para revelar e ocultar partes do conteúdo.
• Teste os recursos e capacidades individuais dos navegadores. Por exemplo, pode-se testar a
presença de “eventos de toque”, indicando que o usuário está interagindo com a página por
meio do navegador de um dispositivo móvel, e adicionar estilos e métodos de interação mais
amigáveis ao toque.
• Preencha as lacunas onde a funcionalidade integrada de um navegador é insuficiente ou adicione

alguns dos recursos encontrados em navegadores mais recentes a navegadores mais antigos.
Esses tipos de scripts geralmente são chamados de shims ou polyfills.
• Carregue uma imagem ou conteúdo em um “lightbox” com estilo personalizado—isolado na página

com CSS—após um usuário clicar em uma versão em miniatura da imagem (FIGURA 21-4).
Esta lista está longe de ser exaustiva!

Adicionando JavaScript a uma página
FIGURA 21-4. JavaScript pode ser usado para carregar imagens em uma galeria estilo lightbox.
ADICIONANDO JAVASCRIPT A UMA PÁGINA
Assim como no CSS, você pode incorporar um script diretamente em um documento ou mantê-
lo em um arquivo externo e vinculá-lo à página. Ambos os métodos usam o elemento script .
Script incorporado
Para incorporar um script em uma página, basta adicionar o código como conteúdo de um script NOTA
elemento:
Para documentos escritos no mais rigoroso
<script> XHTML, você deve identificar o conteúdo do
… O código JavaScript vai aqui elemento script como CDATA envolvendo o
</script> código no seguinte wrapper:
Scripts Externos <script type="text/javascript">

// <![CDATA[
O outro método usa o atributo src para apontar para um arquivo de script (com uma extensão .js …O código JavaScript vai aqui
sufixo) por seu URL. Nesse caso, o elemento script não tem conteúdo: // ]]>
</script>
<script src="my_script.js"></script>
A vantagem dos scripts externos é que você pode aplicar o mesmo script a várias páginas (o
mesmo benefício que as folhas de estilo externas oferecem). A desvantagem, é claro, é que
cada script externo requer uma solicitação HTTP adicional do servidor, o que diminui o
desempenho.

A anatomia de um roteiro
Colocação de script
O elemento script pode ir a qualquer lugar no documento, mas os lugares mais comuns
para scripts estão no cabeçalho do documento e no final do corpo. É recomendável que
você não os espalhe por todo o documento, pois seria difícil encontrá-los e mantê-los.
Para a maioria dos scripts, o final do documento, logo antes da tag </body> , é o
posicionamento preferencial porque o navegador terminará de analisar o documento e sua
estrutura DOM:
<!DOCTYPEhtml>
<html lang="pt">
<cabeça>
</head>
<corpo>
…conteúdo da página…
<script src="script.js"></script>
</body>
</html>
Consequentemente, essas informações estarão prontas e disponíveis no momento em que

chegarem aos scripts, e eles poderão ser executados mais rapidamente. Além disso, o
download e a execução do script bloqueiam a renderização da página, portanto, mover o
script para a parte inferior melhora o desempenho percebido.
alert("Olá");
No entanto, em alguns casos, você pode querer que seu script faça algo antes que o corpo
carregue completamente, então colocá-lo na cabeça resultará em melhor desempenho. Por
exemplo, Modernizr (a ferramenta de detecção de recursos discutida no Capítulo 19, Mais
técnicas de CSS) recomenda que seu script seja colocado na cabeça para que os testes de
detecção de recursos possam ser executados antecipadamente.
confirm("Vou fazer alguma coisa, ok?");

A ANATOMIA DE UM ROTEIRO
Há uma razão pela qual o livro JavaScript: The Definitive Guide de David Flanagan (O'Reilly)
tem 1.100 páginas. Há muito a dizer sobre JavaScript!
Nesta seção, temos apenas algumas páginas para familiarizá-lo com os blocos básicos de
construção do JavaScript para que você possa começar a entender os scripts quando os
prompt("O que devo fazer?");
encontrar. Muitos desenvolvedores aprenderam a programar encontrando scripts existentes
e adaptando-os para suas próprias necessidades. Depois de alguma prática, eles estão
prontos para começar a escrever do zero. Reconhecer as partes de um script é o primeiro
passo, então é por aí que vamos começar.
Originalmente, a funcionalidade do JavaScript era principalmente limitada a métodos brutos

de interação com o usuário. Poderíamos usar algumas das funções internas do JavaScript
FIGURA 21-5. Funções JavaScript (FIGURA 21-5) para fornecer feedback ao usuário, como alert() para enviar uma notificação
incorporadas: alert() (topo), confirm() a um usuário e confirm() para solicitar que um usuário aprove ou recuse uma ação . Para
(meio) e prompt() (inferior).
solicitar a entrada do usuário, estávamos mais ou menos limitados ao prompt integrado ()
função. Embora esses métodos ainda tenham seu tempo e lugar hoje, eles são

chocantes, intrusivos e - na opinião comum, pelo menos - bastante desagradáveis maneiras

de interagir com os usuários. À medida que o JavaScript evoluiu ao longo do tempo, recebemos
maneiras muito mais graciosas de adicionar comportamento às nossas páginas, criando uma
experiência mais perfeita para nossos usuários.
Para aproveitar esses métodos de interação, primeiro precisamos entender a lógica subjacente
que entra no script. Esses são padrões lógicos comuns a todos os tipos de linguagens de
programação, embora a sintaxe possa variar. Para traçar um paralelo entre linguagens de
programação e linguagens faladas: embora o vocabulário possa variar de uma linguagem para
outra, muitos padrões gramaticais são compartilhados pela maioria delas.
No final desta seção, você saberá sobre variáveis, arrays, operadores de comparação,
instruções if/else , loops, funções e muito mais. Preparar?
O básico
Existem algumas regras sintáticas comuns que seguem seu caminho através de todo o
JavaScript.
É importante saber que o JavaScript faz distinção entre maiúsculas e minúsculas. Uma variável
JavaScript faz distinção entre maiúsculas e minúsculas.
chamada myVariable, uma variável chamada myvariable e uma variável chamada MYVariable
serão tratados como três objetos diferentes.
Além disso, espaços em branco, como tabulações e espaços, são ignorados, a menos que
façam parte de uma sequência de texto e estejam entre aspas. Todos os espaços de caracteres
adicionados a scripts como os deste capítulo são para o benefício dos humanos – eles facilitam
a leitura do código. JavaScript não os vê.
Declarações
Um script é composto de uma série de declarações. Uma instrução é um comando que informa
ao navegador o que fazer. Aqui está uma declaração simples que faz o navegador exibir um
alerta com a frase “Obrigado”:
alert("Obrigado.");
O ponto e vírgula no final da instrução diz ao JavaScript que é o fim do comando, assim como
um ponto finaliza uma frase. De acordo com o padrão JavaScript, uma quebra de linha também
acionará o fim de um comando, mas é uma prática recomendada encerrar cada instrução com
um ponto e vírgula.
Comentários
JavaScript permite que você deixe comentários que serão ignorados no momento em que o
script for executado, para que você possa fornecer lembretes e explicações em todo o seu
código. Isso é especialmente útil se for provável que esse código seja editado por outro
desenvolvedor no futuro.

Existem dois métodos de usar comentários. Para comentários de linha única, use dois
caracteres de barra (//) no início da linha. Você pode colocar comentários de linha única na
mesma linha de uma instrução, desde que o comentário venha após a instrução. Ele não
precisa ser fechado, pois uma quebra de linha efetivamente o fecha.
// Este é um comentário de linha única.
Comentários de várias linhas usam a mesma sintaxe que você viu em CSS.
Tudo dentro dos caracteres /* */ é ignorado pelo navegador. Você pode usar essa sintaxe
para “comentar” notas e até mesmo partes do script ao solucionar problemas.
/* Este é um comentário de várias linhas.

Qualquer coisa entre esses conjuntos de caracteres será
completamente ignorada quando o script for executado.
Este formulário de comentário precisa ser fechado. */
Usarei a notação de comentário de linha única para adicionar explicações curtas ao código
de exemplo e usaremos a função alert() que vimos anteriormente (FIGURA 21-5) para que
possamos visualizar rapidamente os resultados de nosso trabalho .
Variáveis
Se você for como eu, o próprio termo “variáveis” desencadeia flashbacks de pesadelo na
Uma variável é como um
aula de matemática da oitava série. A premissa é praticamente a mesma, embora seu
contêiner de informações.
professor não tenha um mau penteado desta vez.
Uma variável é como um contêiner de informações. Você lhe dá um nome e então lhe atribui
um valor, que pode ser um número, uma string de texto, um elemento no DOM ou uma
função – qualquer coisa, na verdade. Isso nos dá uma maneira conveniente de referenciar
esse valor posteriormente pelo nome. O valor em si pode ser modificado e reatribuído da
maneira que a lógica de nossos scripts determinar.
A declaração a seguir cria uma variável com o nome foo e atribui a ela o valor 5:
var foo = 5;
Começamos declarando a variável usando a palavra-chave var . O único sinal de igual (=)
indica que estamos atribuindo um valor. Porque esse é o fim da nossa declaração,
terminamos a linha com um ponto e vírgula. As variáveis também podem ser declaradas
sem a palavra-chave var , o que afeta qual parte do seu script terá acesso às informações
que elas contêm. Discutiremos isso mais adiante na seção “Escopo da variável e a palavra-
chave var” mais adiante neste capítulo.
Você pode usar o que quiser como nome de variável, mas certifique-se de que seja um nome
que faça sentido para você mais tarde. Você não gostaria de nomear uma variável como
algo como dados; deve descrever a informação que contém. Em nosso exemplo muito
específico anterior, productName pode ser um nome mais útil do que foo.
Existem algumas regras para nomear uma variável:

• Deve começar com uma letra ou sublinhado.
• Pode conter letras, dígitos e sublinhados em qualquer combinação.
• Não pode conter espaços de caracteres. Como alternativa, use sublinhados no lugar de espaços
ou feche o espaço e use maiúsculas e minúsculas (por exemplo, my_variable ou myVariable).
• Não pode conter caracteres especiais (por exemplo, ! ., /\ + * =).
Você pode alterar o valor de uma variável a qualquer momento, declarando-a novamente em qualquer
lugar do seu script. Lembre-se: JavaScript diferencia maiúsculas de minúsculas, assim como esses
nomes de variáveis.
Tipos de dados
Os valores que atribuímos às variáveis se enquadram em alguns tipos de dados distintos:
Indefinido
O mais simples desses tipos de dados provavelmente é indefinido. Se declararmos uma

variável dando-lhe um nome, mas nenhum valor, essa variável conterá um valor indefinido.
var foo;
alerta(foo); // Isso abrirá uma caixa de diálogo contendo "indefinido".
As probabilidades são de que você não encontrará muito uso para isso imediatamente, mas
vale a pena saber para solucionar alguns dos erros que você provavelmente encontrará no
início de sua carreira em JavaScript. Se uma variável tiver um valor indefinido quando não
deveria, você pode querer verificar novamente se ela foi declarada corretamente ou se não há
um erro de digitação no nome da variável.
(Todos nós já estivemos lá.)
Nulo
Semelhante a undefined, atribuir uma variável nula (novamente, diferencia maiúsculas de

minúsculas) simplesmente diz: “Defina esta variável, mas não forneça nenhum valor inerente”.
var foo = null;

alerta(foo); // Isso abrirá uma caixa de diálogo contendo "null".
Números
Você pode atribuir valores numéricos a variáveis.
var foo = 5;
alerta(foo); // Isso abrirá uma caixa de diálogo contendo "5".
A palavra foo agora significa exatamente a mesma coisa que o número 5 no que diz respeito
ao JavaScript. Como o JavaScript é digitado livremente, não precisamos dizer ao nosso script
para tratar a variável foo como o número 5. A variável se comporta da mesma forma que o
próprio número, então você pode fazer coisas com ela que faria com qualquer outro número
usando a notação matemática clássica: +, -, * e / para mais, menos, multiplicar e dividir,
respectivamente. Neste exemplo, usamos o sinal de mais (+) para adicionar foo a si mesmo
(foo + foo).

var foo = 5;
alert(fo + fo); // Isso alertará "10".
Cordas
Outro tipo de dado que pode ser salvo em uma variável é uma string, que é basicamente
uma linha de texto. Colocar caracteres em um conjunto de aspas simples ou duplas
indica que é uma string, conforme mostrado aqui:
var foo = "cinco";

alerta(foo); // Isso alertará "cinco"
A variável foo agora é tratada exatamente da mesma forma que a palavra cinco. Isso
se aplica a qualquer combinação de caracteres: letras, números, espaços e assim por
diante. Se o valor estiver entre aspas, ele será tratado como uma string de texto. Se
colocássemos o número 5 entre aspas e o atribuíssemos a uma variável, essa variável
não se comportaria como um número; em vez disso, ele se comportaria como uma string
de texto contendo o caractere “5”.
Anteriormente, vimos o sinal de mais (+) usado para somar números. Quando o sinal de
mais é usado com strings, ele une as strings (chamada de concatenação) em uma string
longa, conforme mostrado neste exemplo.
var foo = "tchau"

alert(fo + fo); // Isso alertará "tchau"
Observe o que o alerta retorna no exemplo a seguir quando definimos o valor 5 entre
aspas, tratando-o como uma string em vez de um número:
var foo = "5";

alert(foo+foo); // Isso alertará "55"
Se concatenarmos uma string e um número, o JavaScript assumirá que o número

também deve ser tratado como uma string, já que a matemática seria impossível.
var foo = "cinco";

var barra = 5;
alert(foo+bar); // Isso alertará "five5"
Booleanos
Também podemos atribuir a uma variável um valor verdadeiro ou falso. Isso é chamado
de valor booleano e é o eixo central para todos os tipos de lógica avançada. Os valores
booleanos usam as palavras-chave true e false incorporadas ao JavaScript, portanto,
as aspas não são necessárias.
var foo = verdadeiro; // A variável "foo" agora é verdadeira

Assim como com os números, se tivéssemos que colocar o valor anterior entre aspas,
estaríamos salvando a palavra true em nossa variável em vez do valor inerente de true
(ou seja, “não falso”).
De certa forma, tudo em JavaScript tem um valor inerentemente verdadeiro ou falso.

Por exemplo, strings nulas, indefinidas, 0 e vazias (" ") são todas inerentemente falsas,
enquanto todos os outros valores são inerentemente verdadeiros. Esses valores, embora
não sejam idênticos aos booleanos true e false, são comumente chamados de
“verdadeiros” e “falsos”. Eu juro que não inventei isso.

Matrizes
Uma matriz é um grupo de vários valores (chamados de membros) que podem ser
atribuídos a uma única variável. Diz-se que os valores em uma matriz são indexados, o
que significa que você pode se referir a eles por número de acordo com a ordem em que
aparecem na lista. O primeiro membro recebe o número de índice 0, o segundo é 1 e
assim por diante, e é por isso que quase invariavelmente ouvimos nós, nerds, começarmos
a contar as coisas do zero – porque é assim que o JavaScript conta as coisas, e muitas
outras linguagens de programação fazem o mesmo. Podemos evitar muitas dores de
cabeça de codificação futuras, mantendo isso em mente.
Então, digamos que nosso script precise de todas as variáveis que definimos
anteriormente. Podemos defini-los três vezes e nomeá-los como foo1, foo2 e assim por
diante, ou podemos armazená-los em um array, indicado por colchetes ([ ]).
var foo = [5, "cinco", "5"];
Agora, sempre que você precisar acessar qualquer um desses valores, você pode pegá-
los no array foo único referenciando seu número de índice:
alert( foo[0] ); // Alerta "5"
alert( foo[1] ); // Alerta "cinco"
alert( foo[2] ); // Também alerta "5"
Operadores de comparação
Agora que sabemos como salvar valores em variáveis e arrays, o próximo passo lógico
é saber como comparar esses valores. Existe um conjunto de caracteres especiais
chamados operadores de comparação que avaliam e comparam valores de diferentes
maneiras:
== É igual a
!= Não é igual a
=== É idêntico a (igual e do mesmo tipo de dados)
!== Não é idêntico a
> É melhor que

>= É maior que ou igual a
< É menos do que
<= É menor ou igual a
Há uma razão para todas essas definições serem lidas como partes de uma declaração.
Ao comparar valores, estamos fazendo uma afirmação, e o objetivo é obter um resultado
que seja inerentemente verdadeiro ou inerentemente falso. Quando comparamos dois
valores, JavaScript avalia a declaração e nos devolve um valor booleano dependendo se
a declaração é verdadeira ou falsa.
alerta( 5 == 5 ); // Isso alertará "true"
alerta( 5 != 6 ); // Isso alertará "true"
alerta( 5 < 1 ); // Isso alertará "falso"

Igual versus idêntico

A parte complicada é entender a diferença entre “igual a” (==) e “idêntico a” (===). Já aprendemos
que todos esses valores se enquadram em um determinado tipo de dados. Por exemplo, uma
sequência de “5” e um número 5 são semelhantes, mas não são exatamente a mesma coisa.
Bem, isso é exatamente o que === deve verificar.
alert("5" == 5); // Isso alertará "true". Ambos são "5".
alert("5" === 5); /* Isso

alertará "falso". Ambos são "5", mas não são do mesmo tipo de dados. */
alert( "5" !== 5 ); /* Isso

alertará "true", já que eles não são do mesmo tipo de dados. */
Mesmo que você tenha que ler esta parte algumas vezes, entender a diferença entre “igual” e
“idêntico a” significa que você já começou a adotar o tipo especial de louco que um programador
precisa. Bem-vindo!
AVISO
Você está em boa companhia.
Tenha cuidado para não usar acidentalmente um
único sinal de igual, ou você estará reatribuindo o
valor da primeira variável ao valor da segunda
Operadores matemáticos
variável! O outro tipo de operador é um operador matemático, que executa funções matemáticas em
valores numéricos (e, é claro, variáveis que contêm valores numéricos). Tocamos brevemente
nos operadores matemáticos simples para adicionar (+), subtrair (-), multiplicar (*) e dividir (/).
Existem também alguns atalhos úteis que você deve conhecer:
+= Adiciona o valor a si mesmo
++ Aumenta o valor de um número (ou de uma variável contendo um número

valor) por 1
-- Diminui o valor de um número (ou uma variável contendo um número

valor) por 1
declarações if/else
As declarações if/else são como fazemos com que o JavaScript se faça uma pergunta de
verdadeiro/falso. Eles são mais ou menos a base para toda a lógica avançada que pode ser
escrita em JavaScript, e são tão simples quanto a programação. Na verdade, eles estão quase
escritos em inglês simples. A estrutura de uma instrução condicional é a seguinte:
se for verdade ) {
ÿÿ // Faça alguma coisa.
}
Ele informa ao navegador “se esta condição for atendida, execute os comandos listados entre
as chaves ({ })”. JavaScript não se importa com espaços em branco em

nosso código, lembre-se, então os espaços em ambos os lados do ( true ) são puramente para
um código mais legível.
Aqui está um exemplo simples usando o array que declaramos anteriormente:
var foo = [5, "cinco", "5"];

if( foo[1] === "cinco" ) {
alert("Esta é a palavra cinco, escrita em inglês simples."); JavaScript idiomático
}
Há um esforço na comunidade
Como estamos fazendo uma comparação, o JavaScript nos dará um valor true ou false. A linha JavaScript para criar um guia de estilo
de código destacada diz “verdadeiro ou falso: o valor da variável foo com um índice de 1 é idêntico para escrever código JavaScript. O
à palavra 'cinco'?” documento “Principles of Writing
Consistent, Idiotic JavaScript” afirma
Nesse caso, o alerta seria acionado porque a variável foo com um índice de 1 o seguinte: “Todo o código em qualquer
(o segundo da lista, se você se lembra) é idêntico a “cinco”. É verdade, e o alerta dispara. base de código deve parecer como uma
única pessoa digitou, não importa quantas
pessoas contribuíram”. Para atingir esse
Também podemos verificar explicitamente se algo é falso usando o operador de comparação != , objetivo, um grupo de desenvolvedores
que é lido como “diferente de”. escreveu um Manifesto de Estilo
Idiomático que descreve como espaços
if( 1 != 2 ) { em branco, quebras de linha, aspas,
alert("Se você não está vendo este alerta, temos problemas maiores que
funções, variáveis e muito mais devem
JavaScript."); ser escritos para obter um “código bonito”.
// 1 nunca é igual a 2, então devemos sempre ver este alerta.
} Saiba mais sobre isso em github.com/rwldrn/
idiomatic.js/.
Não sou muito bom em matemática, mas pelo que posso dizer, 1 nunca será igual a 2.
JavaScript diz: "A linha '1 não é igual a 2' é uma declaração verdadeira, então vou executar este
código."
Se a instrução não for avaliada como verdadeira, o código dentro das chaves será ignorado
completamente:
if(1 == 2){
alert("Se você está vendo este alerta, temos problemas maiores que
JavaScript.");
// 1 não é igual a 2, então este código nunca será executado.
}
Isso abrange “se”, mas e quanto a “senão”?

Por último – e prometo que estamos quase terminando aqui – e se quisermos fazer uma coisa se
algo for verdade e outra coisa se for falsa? Poderíamos escrever duas declarações if , mas isso é
um pouco desajeitado. Em vez disso, podemos apenas dizer: “outra coisa, faça outra coisa…
outra coisa”.
var teste = "teste";

if( teste == "testando" ) {
ÿ
alert("Você não mudou nada.");

} senão {
alert("Você mudou alguma coisa!");
}

EXERCÍCIO 21-1. Alterar o valor da variável de teste para outra coisa — qualquer coisa que não seja a palavra
Tradução de inglês teste — acionará o alerta "Você mudou alguma coisa!"
para JavaScript O EXERCÍCIO 21-1 lhe dá a chance de escrever um pouco de JavaScript.
Neste exercício rápido, você pode ter uma rotações

ideia de variáveis, arrays e if/
else traduzindo as instruções escritas em Há casos em que queremos passar por todos os itens de uma matriz e fazer algo com eles,
inglês em linhas de código JavaScript. Você pode mas não queremos escrever a lista inteira de itens e repetir uma dúzia ou mais de vezes.
encontrar as respostas no Apêndice A.
Vocês estão prestes a aprender uma técnica de poder devastador, leitores: loops.
1. Crie uma variável chamada amigos

e atribua a ele um array com quatro nomes Eu sei. Talvez eu tenha exagerado o quão emocionantes os loops podem ser, mas eles são
de seus amigos. incrivelmente úteis. Com o que já abordamos, estamos ficando bons em lidar com variáveis
únicas, mas isso pode nos levar apenas até certo ponto. Loops nos permitem lidar facilmente
com grandes conjuntos de dados.
2. Mostre ao usuário uma caixa de diálogo que exibe
Digamos que temos um formulário que não exige que nenhum dos campos seja deixado em
o terceiro nome em sua lista de amigos.
branco. Se usarmos o DOM para buscar cada entrada de texto na página, o DOM fornecerá
uma matriz de cada elemento de entrada de texto. (Falarei mais sobre como o DOM faz isso
no próximo capítulo.) Poderíamos verificar cada valor armazenado nesse array um item por
vez, claro, mas isso é muito código e um pesadelo de manutenção. Se usarmos um loop para
3. Crie uma variável chamada nome e
verificar cada valor, não precisaremos modificar nosso script, independentemente de quantos
atribua a ele um valor de string que seja seu
primeiro nome. campos forem adicionados ou removidos da página. Loops nos permitem agir em cada item
em um array, independentemente do tamanho desse array.
Existem várias maneiras de escrever um loop, mas o método for é um dos mais populares. A
4. Se o valor de name for idêntico a Jennifer, estrutura básica de um loop for é a seguinte :
mostre ao usuário uma caixa de diálogo que
diz: "Esse é meu nome também!"
for( inicializar a variável; testar a condição; alterar o valor; ) {
// faça alguma coisa
}
Aqui está um exemplo de um loop for em ação:

5. Crie uma variável chamada myVariable
e atribua a ele um valor numérico entre
for( var i = 0; i < 2; i++ ) {
alerta(i); // Este loop acionará três alertas, lendo "0", "1" e "2",
1 e 10. Se myVariable
respectivamente.
for maior que cinco, mostre ao usuário uma caixa
}
de diálogo que diz "superior". Caso contrário, mostre
ao usuário uma caixa de diálogo que diz “inferior”. Isso é um pouco denso, então vamos dividi-lo:
por()
Primeiro, estamos chamando a instrução for() , que é incorporada ao JavaScript. Ele diz:
“Para toda vez que isso for verdade, faça isso”. Em seguida, precisamos fornecer essa
declaração com algumas informações.
var i = 0;
Isso cria uma nova variável, i, com seu valor definido como zero. Você pode dizer que é
uma variável pelo único sinal de igual. Na maioria das vezes, você verá codificadores
usando a letra “i” (abreviação de “index”) como o nome da variável, mas mantenha em

lembre-se de que você pode usar qualquer nome de variável em seu lugar. É uma
convenção comum, não uma regra.
Definimos esse valor inicial como 0 porque queremos manter o hábito de contar de zero
para cima. É aí que o JavaScript começa a contar, afinal.
i <= 2;
Com i <= 2;, estamos dizendo: “enquanto i for menor ou igual a 2, continue repetindo”.
Como estamos contando de zero, isso significa que o loop será executado três vezes.
i++
Finalmente, i++ é uma abreviação de “toda vez que esse loop for executado, adicione um
ao valor de i” (++ é um dos operadores matemáticos de atalho que vimos anteriormente).
Sem essa etapa, eu sempre seria igual a zero e o loop seria executado para sempre!
Felizmente, os navegadores modernos são inteligentes o suficiente para não deixar isso
acontecer. Se uma dessas três peças estiver faltando, o loop simplesmente não será
executado.
{ roteiro }
Qualquer coisa dentro dessas chaves é executada uma vez para cada vez que o loop é
executado, que é três vezes neste caso. Essa variável i está disponível para uso no código
que o loop executa também, como veremos a seguir.
Vamos voltar ao exemplo “verificar cada item em um array”. Como escreveríamos um loop para
fazer isso por nós?
var itens = ["foo", "bar", "baz"]; // Primeiro criamos um array.

for( var i = 0; i < items.length; i++ ) {
alert( itens[i] ); // Isso alertará cada item no array.
}
Este exemplo difere do nosso primeiro loop de duas maneiras principais:
itens.comprimento
Em vez de usar um número para limitar o número de vezes que o loop é executado, estamos
usando uma propriedade incorporada ao JavaScript para determinar o “comprimento” do
nosso array, que é o número de itens que ele contém. .length é apenas uma das
propriedades e métodos padrão do objeto Array em JavaScript.
Em nosso exemplo, há três itens no array, então ele fará um loop três vezes.
itens[i]
Lembra como eu mencionei que podemos usar essa variável i dentro do loop? Bem,
podemos usá-lo para referenciar cada índice do array. Ainda bem que começamos a contar
do zero; se tivéssemos definido o valor inicial de i como 1, o primeiro item da matriz teria
sido ignorado. O resultado do nosso exemplo de loop for é que cada item no array (as
strings de texto foo, bar e baz) é retornado após cada loop e alimentado a um alerta.

Agora, não importa quão grande ou pequeno esse array deva se tornar, o loop será executado
apenas quantas vezes houver itens no array e sempre manterá uma referência conveniente para
cada item no array.
Existem literalmente dezenas de maneiras de escrever um loop em JavaScript, mas esse é um

dos padrões mais comuns que você encontrará por aí.
Os desenvolvedores usam loops para executar várias tarefas, como as seguintes:
• Percorrer uma lista de elementos na página e verificar o valor de cada um, aplicar um estilo a
cada um ou adicionar/remover/alterar um atributo em cada um. Por exemplo, poderíamos
percorrer cada elemento em um formulário e garantir que os usuários tenham inserido um
valor válido para cada um antes de prosseguir.
• Criando um novo array de itens em um array original que possui um determinado valor.
Verificamos o valor de cada item no array original dentro do loop e, se o valor corresponder
ao que estamos procurando, preenchemos um novo array apenas com esses itens. Isso
transforma o loop em uma espécie de filtro.
Funções
Já apresentei algumas funções de uma maneira sorrateira. Aqui está um exemplo de uma função
A estrutura de um
que você pode reconhecer: alert("Eu sempre fui uma função!");
função:
função(){
Uma função é um pedaço de código para executar uma tarefa que não é executada até que seja
}
referenciada ou chamada. alert() é uma função embutida em nosso navegador. É um bloco de
código que é executado apenas quando explicitamente o instruímos. De certa forma, podemos
pensar em uma função como uma variável que contém lógica, em que referenciar essa variável
irá rodar todo o código armazenado dentro dela. As funções permitem que o código seja
reutilizado sempre que for referenciado, para que você não precise escrevê-lo repetidamente.
Todas as funções compartilham um padrão comum (FIGURA 21-6). O nome da função é sempre
seguido imediatamente por um conjunto de parênteses (sem espaço) e, em seguida, por um par
de chaves que contém seu código associado. Os parênteses às vezes contêm informações
adicionais usadas pela função chamada argumentos. Argumentos são dados que podem
influenciar como a função se comporta. Por exemplo, a função alert() que conhecemos tão bem
aceita uma string de texto como argumento e usa essa informação para preencher a caixa de
diálogo resultante.
Vários argumentos são separados por vírgulas Nem todas as funções aceitam argumentos
Nome da função Argumentos
addNúmeros(a, b){ addNúmeros( ) {

Código
para executar
retornar a + b; retorna 2 + 2;
} }
FIGURA 21-6. A estrutura de uma função.

Existem dois tipos de funções: aquelas que vêm “fora da caixa” (funções JavaScript nativas) e
aquelas que você mesmo cria (funções personalizadas). Vejamos cada um.
Funções nativas
Centenas de funções predefinidas são incorporadas ao JavaScript, incluindo estas:
alert(), confirm() e prompt()

Essas funções acionam caixas de diálogo no nível do navegador.
Encontro()
Retorna a data e hora atuais.
parseInt("123")
Esta função irá, entre outras coisas, pegar um tipo de dado string contendo números e
transformá-lo em um tipo de dado numérico. A string é passada para a função como um
argumento.
setTimeout(functionName, 5000)
Executa uma função após um atraso. A função é especificada no primeiro argumento e o atraso
é especificado em milissegundos no segundo argumento (no exemplo, 5.000 milissegundos, o
que equivale a 5 segundos).
Há pontuações mais além disso também. Observe que os nomes das funções diferenciam
maiúsculas de minúsculas, portanto, certifique-se de escrever setTimeout em vez de SetTimeout.
Funções personalizadas
Para criar uma função personalizada, digitamos a palavra-chave function seguida de um nome
para a função, seguido de abrir e fechar parênteses, seguido de abrir e fechar colchetes:
nome da função() {
ÿÿ // Nosso código de função vai aqui.
}
Assim como com variáveis e arrays, o nome da função pode ser o que você quiser, mas as mesmas
regras de sintaxe de nomenclatura se aplicam.
Se fôssemos criar uma função que apenas alertasse algum texto (o que é um pouco redundante,
eu sei), ficaria assim:
função foo() {
alert("Nossa função acabou de ser
executada!"); // Este código não será executado até que chamemos a função 'foo()'
}
Podemos então chamar essa função e executar o código dentro dela em qualquer lugar em nosso
script escrevendo o seguinte:
foo(); // Alerta "Nossa função acabou de ser executada!"
Podemos chamar essa função várias vezes em todo o nosso código. Economiza muito tempo e
codificação redundante.

Argumentos
Ter uma função que executa exatamente o mesmo código em todo o seu script
provavelmente não será tão útil. Podemos “passar argumentos” (fornecer dados) para
funções nativas e personalizadas para aplicar a lógica de uma função a diferentes conjuntos
de dados em momentos diferentes. Para manter um lugar para os argumentos, crie um
nome de variável (ou uma série de nomes separados por vírgula) entre parênteses após o
nome da função no momento em que a função for definida.
Um argumento é um valor ou Por exemplo, digamos que queremos criar uma função muito simples que alerta o número
dados que uma função usa de itens contidos em um array. Já aprendemos que podemos usar .length para obter o
quando é executado. número de itens em um array, então só precisamos de uma maneira de passar o array a
ser medido em nossa função. Fazemos isso fornecendo o array a ser medido como um
argumento. No código, defini uma nova função chamada alertArraySize() e criei a variável
arr que contém um lugar para o argumento. Essa variável estará disponível dentro da
função e conterá qualquer argumento que passarmos quando chamarmos a função.
função alertArraySize(arr) {
ÿÿÿÿÿÿÿ alert(arr.comprimento);
}
Quando chamamos essa função, qualquer coisa que incluímos entre os parênteses após o
nome da função (neste caso, teste) será passado para o argumento com o espaço
reservado arr enquanto a função é executada. Aqui definimos o teste de variável como uma
matriz de cinco itens. Passamos essa variável para a função e agora esse array é conectado
e o comprimento é retornado.
var teste = [1,2,3,4,5];
alertArraySize(teste); // Alerta "5"
Retornando um valor
Esta parte é particularmente selvagem e incrivelmente útil.
É muito comum usar uma função para calcular algo e, em seguida, retornar um valor que
você pode usar em outro lugar em seu script. Poderíamos fazer isso usando o que sabemos
agora, por meio da aplicação inteligente de variáveis, mas há uma maneira muito mais fácil.
A palavra-chave return dentro de uma função efetivamente transforma essa função em

uma variável com um valor dinâmico! Este é um pouco mais fácil de mostrar do que dizer,
então tenha paciência comigo enquanto consideramos este exemplo:
function addNumeros(a,b){
ÿ retornar a + b;
}
Agora temos uma função que aceita dois argumentos e os soma.

Isso não seria muito útil se o resultado sempre morasse dentro dessa função, porque não
poderíamos usar o resultado em nenhum outro lugar do nosso script.
Aqui usamos a palavra-chave return para passar o resultado para fora da função. Agora

qualquer referência que você fizer a essa função lhe dará o resultado da função—
assim como uma variável faria:
alert( addNumeros(2,5) ); // Alerta "7"
De certa forma, a função addNumbers() agora é uma variável que contém um valor
dinâmico: o valor do nosso cálculo. Se não retornarmos um valor dentro de nossa função,
o script anterior alertaria undefined, assim como uma variável para a qual não demos um
valor.
A palavra-chave return tem uma captura. Assim que o JavaScript vê que é hora de retornar
um valor, a função termina. Considere o seguinte:
barra de função() {
retorno 3;
alert("Nunca veremos este alerta.");
}
Quando você chama essa função usando bar(), o alerta na segunda linha nunca é
executado. A função termina assim que vê que é hora de retornar um valor.
Escopo da variável e a palavra-chave var

Há momentos em que você deseja que uma variável que você definiu em uma função
esteja disponível em qualquer lugar em seu script. Outras vezes, você pode querer restringi-
lo e disponibilizá-lo apenas para a função em que está inserido.
Essa noção da disponibilidade da variável é conhecida como seu escopo. Uma variável
que pode ser usada por qualquer um dos scripts em sua página tem escopo global e uma
variável que está disponível apenas em sua função pai tem escopo local.
As variáveis JavaScript usam funções para gerenciar seu escopo. Se uma variável for
definida fora de uma função, ela terá escopo global e estará disponível para todos os
scripts. Quando você define uma variável dentro de uma função e deseja que ela seja
usada apenas por essa função, você pode sinalizar como escopo local precedendo o nome
da variável com a palavra-chave var :
var foo = "valor";
Para expor uma variável dentro de uma função ao escopo global, omitimos o var
palavra-chave e simplesmente defina a variável:
foo = "valor";
Você precisa ter cuidado sobre como definir variáveis dentro de funções, ou pode acabar
com resultados inesperados. Pegue o seguinte snip pet JavaScript, por exemplo:
função double(num){
total = num + num;
retorno total;
}
var total = 10;
var numero = double( 20 );
alerta( total ); // Alertas 40.

O objeto do navegador
FOLHA DE ESCOLHA T
Variável Localização Alcance
valor do identificador var Fora de uma função Global
valor do identificador var Dentro de uma função Local
valor do identificador Dentro de uma função Global
Você pode esperar que, como você atribuiu especificamente um valor de 10 à variável total, a função
alert(total) no final do script retornaria 10. Mas porque não delimitamos a variável total na função com
a palavra- chave var , ele sangra no escopo global. Portanto, embora o total da variável seja definido
como 10, a instrução a seguir executa a função e obtém o valor do total definido lá. Sem o var, a
variável “vazou”.
Como você pode ver, o problema com variáveis globais é que elas serão compartilhadas em todos os
scripts de uma página. Quanto mais variáveis sangrarem no escopo global, maiores serão as chances
Mantendo as variáveis de você se deparar com uma “colisão” na qual uma variável nomeada em outro lugar (em outro script,
fora do escopo global até mesmo) corresponde a uma das suas. Isso pode fazer com que as variáveis sejam redefinidas
Se você quiser ter certeza de que todas inadvertidamente com valores inesperados, o que pode levar a erros em seu script.
as suas variáveis ficarão fora do escopo
global, você pode colocar todo o seu
JavaScript no seguinte wrapper: Lembre-se de que nem sempre podemos controlar todo o código em jogo em nossa página. É muito
comum que as páginas incluam código escrito por terceiros, por exemplo:
<script>
(função(){ • Scripts para renderizar anúncios
//Todo seu código aqui! • Scripts de análise e rastreamento de usuários
}()); • Botões de "compartilhar" de mídia social
<script>
É melhor não se arriscar em colisões de variáveis, então quando você começar a escrever scripts por
Essa pequena solução de
conta própria, faça o escopo local de suas variáveis sempre que puder (veja a barra lateral “Mantendo
quarentena é chamada de IIFE
variáveis fora do escopo global”).
(Immediately Invoked Functional
Expression), e devemos esse método
Isso conclui nosso pequeno (OK, não tão pequeno) tour introdutório da sintaxe JavaScript. Há muito
e o termo cativante associado a Ben
mais do que isso, mas isso deve fornecer uma base decente para aprender mais por conta própria e
Alman (benalman.com/news/2010/11/
ser capaz de interpretar scripts quando os vir. Temos apenas mais alguns recursos relacionados ao
expressão de função imediatamente
invocada/). JavaScript para abordar antes de vermos alguns exemplos.
O OBJETO DO NAVEGADOR
Além de poder controlar elementos em uma página da Web, o JavaScript também oferece acesso e a
capacidade de manipular as partes do navegador

Eventos
própria janela. Por exemplo, você pode querer obter ou substituir o URL que está na barra de
endereços do navegador ou abrir ou fechar uma janela do navegador.
Em JavaScript, o navegador é conhecido como objeto de janela . O objeto window tem várias
propriedades e métodos que podemos usar para interagir com ele.
Na verdade, nosso velho amigo alert() é na verdade um dos métodos padrão do objeto do
navegador. A TABELA 21-1 lista apenas algumas das propriedades e métodos que podem ser
usados com window para dar uma ideia do que é possível. Para obter uma lista completa, consulte
a referência da API do Windows em MDN Web Docs (developer.mozilla.org/
en-US/docs/Web/API/Window).
TABELA 21-1. Propriedades e métodos do navegador.
Descrição da propriedade/método
evento Representa o estado de um evento
história Contém os URLs que o usuário visitou em uma janela do navegador
localização Dá acesso de leitura/gravação ao URI na barra de endereço
status Define ou retorna o texto na barra de status da janela
alerta() Exibe uma caixa de alerta com uma mensagem especificada e um

botão OK
fechar() Fecha a janela atual
confirmar() Exibe uma caixa de diálogo com uma mensagem especificada e um botão
OK e Cancelar
foco() Define o foco na janela atual
EVENTOS
O JavaScript pode acessar objetos na página e na janela do navegador, mas você sabia que
também está “escutando” certos eventos? Um evento é uma ação que pode ser detectada com
JavaScript, como quando o documento é carregado ou quando o usuário clica em um elemento ou
apenas move o mouse sobre ele. O HTML 4.0 possibilitou que um script fosse vinculado a eventos
Manipuladores de eventos “escutam”
na página, iniciados pelo usuário, pelo próprio navegador ou por outros scripts. Isso é conhecido
para determinadas ações de
como vinculação de eventos.
documento, navegador ou usuário
e vincular scripts a essas ações.

Em scripts, um evento é identificado por um manipulador de eventos. Por exemplo, o carregamento
manipulador de eventos aciona um script quando o documento é carregado, e os manipuladores
onclick e onmouseover acionam um script quando o usuário clica ou passa o mouse sobre um
elemento, respectivamente. A TABELA 21-2 lista alguns dos manipuladores de eventos mais
comuns. Lembre-se de que também diferenciam maiúsculas de minúsculas.

Eventos
TABELA 21-2. Eventos comuns.
Manipulador de eventos Descrição do Evento
embaçar Um elemento perde o foco.
em mudança O conteúdo de um campo de formulário é alterado.
ao clicar O mouse clica em um objeto.
erro Ocorre um erro quando o documento ou uma imagem é carregada.
No foco Um elemento recebe o foco.
onkeydown Uma tecla do teclado é pressionada.
pressionar tecla Uma tecla do teclado é pressionada ou mantida pressionada.
onkeyup Uma tecla do teclado é liberada.
carregando Uma página ou uma imagem terminou de carregar.
abaixar o mouse Um botão do mouse é pressionado.
emmousemouse O mouse é movido.
fora do mouse O mouse é movido para fora de um elemento.
passar o mouse O mouse é movido sobre um elemento.
de rato Um botão do mouse é liberado.
ao enviar O botão enviar é clicado em um formulário.
Existem três métodos comuns para aplicar manipuladores de eventos a itens dentro
nossas páginas:
• Como um atributo HTML
• Como um método anexado ao elemento
• Usando addEventListener()
Nos próximos exemplos das duas últimas abordagens, usaremos a janela

objeto. Quaisquer eventos que anexamos à janela se aplicam a todo o documento.
Usaremos o evento onclick em todos eles também.
Como um atributo HTML

Você pode especificar a função a ser executada em um atributo na marcação, conforme
mostrado no exemplo a seguir:
<body onclick="myFunction();"> /* myFunction agora será executado quando o usuário clicar em qualquer
coisa dentro de 'body' */
Embora ainda funcional, esta é uma maneira antiquada de anexar eventos a elementos
dentro da página. Deve ser evitado pelo mesmo motivo que evitamos usar atributos de
estilo em nossa marcação para aplicar estilos a elementos individuais.
Nesse caso, ele borra a linha entre a camada semântica e as camadas comportamentais
de nossas páginas e pode levar rapidamente a um pesadelo de manutenção.

Eventos
Como um método
Essa é outra abordagem um tanto datada para anexar eventos, embora mantenha as coisas
estritamente dentro de nossos scripts. Podemos anexar funções usando ajudantes já
embutidos em JavaScript:
window.onclick = minhaFunção; /* myFunction será executado quando o usuário

clicar em qualquer coisa dentro da janela do navegador */
Também podemos usar uma função anônima em vez de uma predefinida:
janela.onclick = function() {
/* Qualquer código colocado aqui será executado quando o usuário clicar em qualquer coisa
dentro da janela do navegador */
};
Essa abordagem tem o benefício de simplicidade e facilidade de manutenção, mas tem uma
desvantagem bastante importante: podemos vincular apenas um evento por vez com esse
método.
window.onclick = minhaFunção;
window.onclick = myOtherFunction;
No exemplo que acabamos de mostrar, a segunda ligação substitui a primeira, portanto,

quando o usuário clicar dentro da janela do navegador, somente myOtherFunction será executado.
A referência a myFunction é descartada.
addEventListener
Embora um pouco mais complexa à primeira vista, essa abordagem nos permite manter
nossa lógica dentro de nossos scripts e nos permite realizar várias ligações em um único
objeto. A sintaxe é um pouco mais detalhada. Começamos chamando o método
addEventListener() do objeto alvo, e então especificamos o evento em questão e a função a
ser executada como dois argumentos:
window.addEventListener("clique", minhaFunção);
Observe que omitimos o “on” anterior do manipulador de eventos com esta sintaxe.
Como o método anterior, addEventListener() também pode ser usado com uma função
anônima:
window.addEventListener("clique", function(e) {
});
Esta foi apenas uma breve introdução, então eu recomendo obter mais informações sobre
addEventListener() na página “eventTarget.addEventListener” no MDN Web Docs
(developer.mozilla.org/en/DOM/element.addEventListener).

Juntando tudo

Agora você foi apresentado a muitos dos blocos de construção importantes do
JavaScript. Você viu variáveis, tipos de dados e matrizes. Você conheceu se/outro
instruções, loops e funções. Você conhece seus objetos do navegador a partir de seus
manipuladores de eventos. Isso é um monte de pedaços. Vamos examinar alguns
exemplos de script simples para ver como eles são montados.
Exemplo 1: Um Conto de Dois Argumentos

Aqui está uma função simples que aceita dois argumentos e retorna o maior dos dois
valores:
greatestOfTwo( primeiro, segundo ) {

if(primeiro > segundo){
volte primeiro;
} senão {
retorno em segundo;
}
}
Começamos nomeando nossa função como greatestOfTwo. Nós o configuramos

para aceitar dois argumentos, que chamaremos apenas de “primeiro” e “segundo” por
falta de palavras mais descritivas. A função contém uma instrução if/else que retorna
primeiro se o primeiro argumento for maior que o segundo e retorna segundo se não for.
Exemplo 2: A palavra mais longa

Aqui está uma função que aceita um array de strings como um único argumento e
retorna a string mais longa do array. Retorna a primeira ocorrência de uma das strings
mais longas (caso elas tenham o mesmo comprimento).
palavra mais longa( strings ) {
var mais longa = strings[0];
for( i = 1; i < strings.length; i++ ) {

if ( strings[i].comprimento > comprimento.comprimento ) {
mais longo = strings[i];
}
}
retorno mais longo;
}
Primeiro, nomeamos a função e permitimos que ela aceite um único argumento. Em

seguida, definimos a variável mais longa para um valor inicial do primeiro item na
matriz: strings[0]. Iniciamos nosso loop em 1 em vez de 0, pois já temos o primeiro
valor capturado no array. Cada vez que iteramos no loop, comparamos o comprimento
do item atual na matriz com o comprimento do valor salvo na variável mais longa . Se
o item atual na matriz contiver mais caracteres do que o valor atual da variável mais
longa , alteramos o valor de mais longa para esse item. Se não, não fazemos nada.
Após a conclusão do loop, retornamos o valor de mais longo, que agora contém a
string mais longa do array.

Aprendendo mais sobre JavaScript
SAIBA MAIS SOBRE JAVASCRIPT

Agora que você viu os blocos básicos de construção e alguns exemplos simples, isso abre seu
apetite por mais? Aqui estão alguns recursos para levá-lo ao próximo passo:
Recursos JavaScript no MDN Web Docs

(developer.mozilla.org/en-US/docs/Web/JavaScript)
O pessoal do MDN Web Docs reuniu excelentes tutoriais, bem como documentação completa
sobre todos os componentes do JavaScript. É um ótimo site para visitar quando você está
apenas começando, e é provável que seja uma referência mesmo depois de você ter anos
de experiência.
JavaScript para Web Designers por Mat Marquis (A Book Apart)
Posso dizer muito mais em um livro do que em um capítulo, então se você está procurando
um pouco mais de profundidade em um manual de nível iniciante, escrevi este livro para você.
Aprendendo JavaScript por Ethan Brown (O'Reilly)
Para um mergulho mais profundo no JavaScript, este livro o levará ao próximo nível.
Por que não ver como você está se saindo com JavaScript até agora com o EXERCÍCIO 21-2 e
um teste rápido? No próximo capítulo, você verá como usamos essas ferramentas no contexto do
web design.
EXERCÍCIO 21-2. Tente você
Neste exercício, você escreverá um script que atualiza o título da página 3. Se vamos mudar o título da página, devemos salvar
na janela do navegador com uma contagem de “novas mensagens”. Você o original primeiro. Crie uma variável chamada originalTitle. Por seu valor,
pode ter encontrado esse tipo de script de tempos em tempos. Vamos supor faremos com que o navegador obtenha o título do documento usando o
para o exercício que isso se tornará parte de um aplicativo da Web maior método DOM document.title. Agora temos uma referência salva ao título
algum dia, e temos a tarefa apenas de atualizar o título da página com a da página no momento em que a página é carregada.
contagem atual de “mensagens não lidas”. Esta variável deve ser global, então vamos declará-la fora de qualquer
função.
Já criei um documento para você (title.html), que está disponível na var originalTitle = document.title;
pasta de materiais deste capítulo em learningwebdesign.com. O script
resultante está no Apêndice A. 4. Em seguida, definiremos uma função para que possamos reutilizar o script
sempre que necessário. Vamos chamar a função de algo fácil de lembrar, para
1. Comece abrindo title.html em um navegador. Você verá uma página em
que saibamos rapidamente o que ela faz quando a encontramos em nosso
branco, com o elemento de título já preenchido. Se você olhar para o topo da
código mais tarde. showUnreadCount() funciona para mim, mas você pode
janela do seu navegador, você notará que lê “Million Dollar WebApp”.
nomeá-lo como quiser.
2. Agora abra o documento em um editor de texto. Você encontrará um script var originalTitle = document.title;
elemento contendo um comentário antes da tag de fechamento </ function showUnreadCount() {
body> . Sinta-se à vontade para excluir o comentário. } ÿ

Aprendendo mais sobre JavaScript
5. Precisamos pensar sobre o que a função precisa para torná-la útil. Esta função faz
algo com a contagem de mensagens não lidas, portanto, seu argumento é um único número referido como
não lido neste exemplo.
var originalTitle = document.title;

function showUnreadCount( não lido ) {
}
6. Agora vamos adicionar o código que é executado para esta função. Queremos que o título do documento
da página exiba o título do documento mais a contagem de mensagens não lidas. Parece um trabalho
para concatenação (+)! Aqui definimos document.title para ser (=) qualquer string salva para originalTitle
mais o número em showUnreadCount. Como aprendemos anteriormente, JavaScript combina uma string
e um número como se ambos fossem strings.

function showUnreadCount(não lido) {
document.title = originalTitle + não lido; }
7. Vamos testar nosso script antes de irmos muito além. Abaixo de onde você definiu o
function e a variável originalTitle , digite showUnreadCount( 3 );. Agora salve a página e recarregue-a em
seu navegador (FIGURA 21-7).

document.title = originalTitle + não lido; }
showUnreadCount(3);
FIGURA 21-7. Nossa tag de título mudou! Ainda não está certo, no entanto.
8. Nosso script está funcionando, mas não é muito fácil de ler. Felizmente, não há limite para o
número de strings que podemos combinar de uma só vez. Aqui estamos adicionando novas strings que
envolvem o valor de contagem e as palavras “novas mensagens” entre parênteses (FIGURA 21-8).

function showUnreadCount(não lido) { "
document.title = originalTitle + "(" + unread + } novas mensagens!)";
showUnreadCount(3);
FIGURA 21-8. Muito melhor!

Teste-se
TESTE-SE
Cobrimos muito material novo neste capítulo. Aqui está uma chance de testar o que
afundou. Você encontrará as respostas no Apêndice A.
1. Cite uma coisa boa e outra ruim sobre vincular a arquivos .js externos .
2. Dada a seguinte matriz

var meuArray = [1, "dois", 3, "4"]
escreva o que a mensagem de alerta dirá para cada um destes exemplos:
uma. alert( meuArray[0]);
b. alert( meuArray[0] + meuArray[1]);
c. alert( meuArray[2] + meuArray[3]);
d. alert( meuArray[2] – meuArray[0]);
3. O que cada uma dessas mensagens de alerta dirá?
uma. var foo = 5;

fo += 5;
alerta(foo);
b. i = 5;
i++;
alerta(i);
c. var foo = 2; ""
alerta (foo + + "restante");
d. var foo = "Mate";

var bar = "Jennifer";
if( foo.comprimento >" bar.comprimento ) {
alert( foo + } É mais longo." );
else { "
alerta(barra + É mais longo." );
}
e. alerta(10 === "10");
4. Descreva o que isso faz:
for( var i = 0; i < items.length; i++ ) { }
5. Qual é o problema potencial com variáveis de escopo global?

Teste-se
6. Combine cada manipulador de eventos com seu gatilho.
uma. carregando 1. O usuário finaliza um formulário e clica no botão enviar.
b. em mudança 2. A página termina de carregar.
c. No foco 3. O ponteiro passa sobre um link.
d. onmouseover 4. Um campo de entrada de texto está selecionado e pronto para digitação.
e. ao enviar 5. Um usuário altera seu nome em um campo de formulário.

CAPÍTULO
USANDO JAVASCRIPT 22
E O MODELO DE OBJETO DO DOCUMENTO
por Mat Marquês
Agora que você tem uma noção da linguagem do JavaScript, vamos ver algumas das NESTE CAPÍTULO
maneiras de usá-lo no design moderno da web. Primeiro, exploraremos o script DOM, que
nos permite manipular os elementos, atributos e texto em uma página. Vou apresentá-lo Usando o DOM para acessar e
a alguns recursos de script JavaScript e DOM prontos, para que você não precise fazer alterar elementos, atributos e
conteúdos
isso sozinho. Você aprenderá sobre polyfills, que fornecem recursos modernos a
navegadores mais antigos e normalizam a funcionalidade. Também apresentarei Usando polyfills para fazer com que as versões do
bibliotecas JavaScript que facilitam a vida dos desenvolvedores com coleções de polyfills navegador funcionem de forma consistente
e atalhos para tarefas comuns.
Usando bibliotecas JavaScript
Uma breve introdução ao Ajax

CONHEÇA O DOM
Você já viu referências ao Document Object Model (DOM para abreviar) várias vezes ao
longo deste livro, mas agora é a hora de dar a atenção que merece. O DOM nos dá uma
maneira de acessar e manipular o conteúdo de um documento. Costumamos usá-lo para
HTML, mas o DOM também pode ser usado com qualquer linguagem XML. E embora
estejamos focando em seu relacionamento com JavaScript, vale a pena notar que o DOM
também pode ser acessado por outras linguagens, como PHP, Ruby, C++ e muito mais.
Embora o DOM Level 1 tenha sido lançado pelo W3C em 1998, foi quase cinco anos
depois que o script DOM começou a ganhar força.
O DOM nos dá uma maneira de
acessar e manipular o conteúdo de
O DOM é uma interface de programação (uma API) para páginas HTML e XML. um documento.
Ele fornece um mapa estruturado do documento, bem como um conjunto de métodos de
interface com os elementos nele contidos. Efetivamente, ele traduz nossa marcação em
um formato que JavaScript (e outras linguagens) pode entender.
Parece bem seco, eu sei, mas a essência básica é que o DOM serve como um mapa para
todos os elementos em uma página e nos permite fazer coisas com eles. Podemos usá-lo
para encontrar elementos por seus nomes ou atributos e, em seguida, adicionar, modificar
ou excluir elementos e seu conteúdo.
621
Conheça o DOM
Sem o DOM, o JavaScript não teria nenhuma noção do conteúdo de um documento — e

com isso quero dizer a totalidade do conteúdo do documento.
Tudo, desde o doctype da página até cada letra individual no texto, pode ser acessado
via DOM e manipulado com JavaScript.
A árvore do nó
Uma maneira simples de pensar no DOM é em termos da árvore de documentos,
conforme diagramado na FIGURA 22-1. Você viu documentos diagramados dessa
maneira quando estava aprendendo sobre seletores CSS.
<!DOCTYPEhtml>
<html>
<cabeça>
<title>Título do documento</title>
</head>
<corpo>
<div>
<h1>Título</h1>
<p>Texto de parágrafo com um <a href="foo.html">link</a> aqui.</p>
</div>
<div>
<p>Mais texto aqui.</p>
</div>
</body>
</html>
html
cabeça corpo
título meta div div
h1 p p
uma
FIGURA 22-1. Um documento simples.
Cada elemento dentro da página é referido como um nó. Se você pensar no DOM como
uma árvore, cada nó é uma ramificação individual que pode conter outras ramificações.
Mas o DOM permite um acesso mais profundo ao conteúdo do que o CSS porque
também trata o conteúdo real como um nó. A FIGURA 22-2 mostra a estrutura do primeiro
elemento p . O elemento, seus atributos e seu conteúdo são todos nós na árvore de nós
do DOM.

Conheça o DOM
<p>Texto de parágrafo com um <a href="foo.html">link</a> aqui.</p>
NUM RELANCE
p O DOM é uma coleção de nós:
• Nós de elemento
• Nós de atributo
• Nós de texto
Texto do parágrafo com uma aqui.
href="foo.html" link
FIGURA 22-2. Os nós dentro do primeiro elemento p em nosso documento de amostra.
O DOM também fornece um conjunto padronizado de métodos e funções através dos quais o
JavaScript pode interagir com os elementos em nossa página. A maioria dos scripts DOM
envolve ler e gravar no documento.
Existem várias maneiras de usar o DOM para encontrar o que você deseja em um documento.
Vamos examinar alguns dos métodos específicos que podemos usar para acessar objetos
definidos pelo DOM (nós JS chamamos isso de “rastrear o DOM” ou “percorrer o DOM”), bem
como alguns dos métodos para manipular esses elementos.
Acessando nós DOM

O objeto de documento no DOM identifica a própria página e, na maioria das vezes, servirá
como ponto de partida para o rastreamento do DOM. O objeto de documento vem com várias
propriedades e métodos padrão para acessar coleções de elementos. Isso é uma reminiscência
da propriedade length que aprendemos no Capítulo 21, Introdução ao JavaScript. Assim
como o comprimento é uma propriedade padrão de todos os arrays, o objeto de documento
vem com várias propriedades internas contendo informações sobre o documento. Em seguida,
seguimos nosso caminho para o elemento que procuramos encadeando essas propriedades
e métodos, separados por pontos, para formar uma espécie de rota pelo documento.
Para dar uma ideia geral do que quero dizer, a declaração neste exemplo diz para
procurar na página (documento), encontrar o elemento que tem o valor de id
“iniciante”, encontrar o conteúdo HTML dentro desse elemento (innerHTML), e
salve esse conteúdo em uma variável (foo):
var foo = document.getElementById("iniciante").innerHTML;
Como as cadeias tendem a ficar longas, também é comum ver cada propriedade ou método
dividido em sua própria linha para facilitar a leitura rápida.
22. Usando JavaScript 623

Conheça o DOM
Lembre-se, o espaço em branco no JavaScript é ignorado, portanto, isso não afeta como a
instrução é analisada.
var foo = documento
.getElementById("iniciante")
.innerHTML;
Existem vários métodos para acessar nós no documento.
Por nome do elemento
getElementsByTagName()
Podemos acessar elementos individuais pelas próprias tags, usando document.
getElementsByTagName(). Este método recupera qualquer elemento ou elementos que você
especificar como um argumento.
NOTA Por exemplo, document.getElementsByTagName("p") retorna todos os parágrafos da

página, agrupados em algo chamado coleção ou nodeList, na ordem em que aparecem no
nodeLists são coleções vivas. Se você manipular o
documento de cima para baixo. nodeLists se comportam como arrays. Para acessar parágrafos
documento em um loop nodeList - por exemplo,
específicos na nodeList, nós os referenciamos por seu índice, assim como um array.
percorrendo todos os parágrafos e acrescentando
novos ao longo do caminho - você pode acabar em
um loop infinito. Bons tempos!
var parágrafos = document.getElementsByTagName("p");
Com base nessa instrução de variável, os parágrafos[0] são uma referência ao primeiro
parágrafo do documento, os parágrafos[1] referem-se ao segundo e assim por diante. Se
tivéssemos que acessar cada elemento no nodeList separadamente, um de cada vez... bem, é
uma coisa boa que aprendemos sobre o loop através de arrays anteriormente. Os loops
funcionam exatamente da mesma maneira com um nodeList.
var parágrafos = document.getElementsByTagName("p");

for( var i = 0; i <paragrafos.comprimento; i++) {
// faça alguma coisa
}
Agora podemos acessar cada parágrafo na página individualmente referenciando os

parágrafos[i] dentro do loop, assim como em um array, mas com elementos na página em vez
de valores.
Por valor do atributo id
getElementById()
Esse método retorna um único elemento com base no ID desse elemento (o valor de seu
atributo id ), que fornecemos ao método como argumento. Por exemplo, para acessar esta
imagem específica
<img src="photo.jpg" alt="" id="lead-photo">
incluímos o valor id como um argumento para o método getElementById() :
var foto = document.getElementById("foto-lead");

Conheça o DOM
Por valor de atributo de classe
getElementsByClassName()
Assim como diz na lata, isso permite acessar nós no documento com base no valor de um AVISO
atributo de classe . Essa instrução atribui qualquer elemento com um valor de classe “column-
Este é um método relativamente novo para
a” à variável firstColumn para que possa ser acessado facilmente de dentro de um script:
acessar nós DOM. Embora getElements
ByClassName() esteja disponível nas
var firstColumn = document.getElementsByClassName("column-a"); versões atuais dos navegadores modernos,
ele não funcionará no IE8 ou abaixo.
Como getElementsByTagName(), isso retorna uma nodeList que podemos referenciar por
índice ou fazer um loop por vez.
Por seletor
querySelectorAll()
querySelectorAll() permite acessar nós do DOM com base em um seletor de estilo CSS. A AVISO
sintaxe dos argumentos nos exemplos a seguir deve parecer familiar para você. Pode ser tão
querySelectorAll() não tem suporte no IE7
simples quanto acessar os elementos filho de um elemento específico: ou abaixo.
var sidebarPara = document.querySelectorAll(".sidebar p");
ou tão complexo quanto selecionar um elemento baseado em um atributo:
var textInput = document.querySelectorAll("input[type='text']");
querySelectorAll() retorna uma nodeList, como getElementsByTagName() e

getElementsByClassName(), mesmo que o seletor corresponda apenas a um único elemento.
Acessando um valor de atributo
getAtributo()
Como mencionei anteriormente, os elementos não são a única coisa que você pode acessar
com o DOM. Para obter o valor de um atributo anexado a um nó de elemento, chamamos
getAttribute() com um único argumento: o nome do atributo. Vamos supor que temos uma
imagem, stratocaster.jpg, marcada assim:
<img src="stratocaster.jpg" alt="guitarra elétrica" id="lead-image">
No exemplo a seguir, acessamos essa imagem específica (getElementbyId()) e salvamos

uma referência a ela em uma variável (“bigImage”). Nesse ponto, poderíamos acessar
qualquer um dos atributos do elemento (alt, src ou id) especificando-o como um argumento
no método getAttribute() . No exemplo, obtemos o valor do atributo src e o usamos como
conteúdo em uma mensagem de alerta. (Não sei por que faríamos isso, mas demonstra o
método.)
var bigImage = document.getElementById("lead-image");

alert( bigImage.getAttribute("src") ); // Alerta "stratocaster.jpg".

Conheça o DOM
Manipulando nós
Uma vez que acessamos um nó usando um dos métodos discutidos anteriormente, o DOM nos
fornece vários métodos internos para manipular esses elementos, seus atributos e seu conteúdo.
setAtributo()
Para continuar com o exemplo anterior, vimos como obtemos o valor do atributo, mas e se
quiséssemos definir o valor desse atributo src para um novo nome de caminho? Use setAttribute()!
Esse método requer dois argumentos: o atributo a ser alterado e o novo valor para esse atributo.
Neste exemplo, usamos um pouco de JavaScript para trocar a imagem alterando o valor do
atributo src :
var bigImage = document.getElementById("lead-image");
bigImage.setAttribute("src", "lespaul.jpg");
Basta pensar em todas as coisas que você poderia fazer com um documento alterando os valores
dos atributos. Aqui trocamos uma imagem, mas poderíamos usar esse mesmo método para fazer
várias alterações em todo o nosso documento:
• Atualize os atributos marcados de caixas de seleção e botões de opção com base em

interação do usuário em outro lugar na página.
• Encontre o elemento link para nosso arquivo .css e aponte o valor href para uma folha de
estilo diferente, alterando todos os estilos da página.
• Atualizar um atributo de título com informações sobre o estado de um elemento ("este

elemento está selecionado no momento”, por exemplo).
innerHTML
innerHTML nos dá um método simples para acessar e alterar o texto e a marcação dentro
de um elemento. Ele se comporta de maneira diferente dos métodos que abordamos até
agora. Digamos que precisamos de uma maneira rápida de adicionar um parágrafo de texto
ao primeiro elemento em nossa página com uma classe de introdução:
var introDiv = document.getElementsByClassName("intro");
introDiv[0].innerHTML = "<p>Este é o nosso texto de introdução</p>";
A segunda instrução aqui adiciona o conteúdo da string a introDiv (um elemento com o valor de
classe “intro”) como um elemento real ao vivo porque innerHTML
diz ao JavaScript para analisar as strings “<p>” e “</p>” como marcação.
estilo
O DOM também permite adicionar, modificar ou remover um estilo CSS de um elemento usando
a propriedade style . Funciona de maneira semelhante à aplicação de um estilo com o atributo de
estilo embutido. As propriedades CSS individuais estão disponíveis como propriedades da
propriedade style . Aposto que você pode descobrir o que essas declarações estão fazendo
usando seu novo conhecimento de CSS e DOM:

Conheça o DOM
document.getElementById("intro").style.color = "#fff";
document.getElementById("intro").style.backgroundColor = "#f58220";
//laranja
Em JavaScript e DOM, nomes de propriedades que são hifenizados em CSS (como

background-color e border-top-width) tornam-se camel case (back groundColor e
borderTopWidth, respectivamente) para que o caractere “–” não seja confundido com
um operador.
Nos exemplos que você acabou de ver, a propriedade style é usada para definir os
estilos do nó. Também pode ser usado para obter um valor de estilo para uso em outro
lugar no script. Essa instrução obtém a cor de fundo do elemento #intro e a atribui à
variável brandColor :
var brandColor = document.getElementById("intro").style.backgroundColor;
Adicionando e removendo elementos

Até agora, vimos exemplos de obtenção e configuração de nós no documento
existente. O DOM também permite que os desenvolvedores alterem a própria estrutura
do documento adicionando e removendo nós rapidamente. Começaremos criando
novos nós, o que é bastante simples, e então veremos como adicionamos os nós que
criamos à página. Os métodos mostrados aqui são mais cirúrgicos e precisos do que
adicionar conteúdo com innerHTML. Enquanto estamos nisso, também removeremos
nós.
criarElemento()
Para criar um novo elemento, use o método createElement() apropriadamente
chamado . Esta função aceita um único argumento: o elemento a ser criado. Usar esse
método é um pouco contra-intuitivo no início porque o novo elemento não aparece na
página imediatamente. Uma vez que criamos um elemento dessa maneira, esse novo
elemento permanece flutuando no éter JavaScript até que o adicionemos ao documento.
Pense nisso como a criação de uma referência a um novo elemento que vive puramente
na memória - algo que podemos manipular em JavaScript como acharmos adequado
e, em seguida, adicionar à página quando estivermos prontos:
var newDiv = document.createElement("div");
createTextNode()
Se quisermos inserir texto em um elemento que criamos ou em um elemento existente
na página, podemos chamar o método createTextNode() . Para usá-lo, forneça uma
string de texto como argumento e o método cria uma versão amigável para DOM desse
texto, pronta para inclusão na página. Como createElement(), isso cria uma referência
ao novo nó de texto que podemos armazenar em uma variável e adicionar à página
quando chegar a hora:
var ourText = document.createTextNode("Este é o nosso texto.");

Conheça o DOM
appendChild()
Então criamos um novo elemento e uma nova string de texto, mas como podemos
torná-los parte do documento? Insira o método appendChild() . Esse método
recebe um único argumento: o nó que você deseja adicionar ao DOM. Você o
chama no elemento existente que será seu pai na estrutura do documento. Hora
de um exemplo.
Aqui temos um div simples na página com o id “our-div”:

<div id="our-div"></div>
Digamos que queremos adicionar um parágrafo a #our-div que contenha o texto

“Hello, world!” Começamos criando o elemento p (document.createElement()) ,
bem como um nó de texto para o conteúdo que irá dentro dele (createTextNode()):
var ourDiv = document.getElementById("our-div");

var newParagraph = document.createElement("p");
var copy = document.createTextNode("Olá, mundo!");
Agora temos nosso elemento e algum texto, e podemos usar appendChild() para
juntar as peças:
newParagraph.appendChild( copy );
ourDiv.appendChild( newParagraph );
A primeira instrução anexa copy (esse é nosso nó de texto “Hello, world!”) ao novo
parágrafo que criamos (newParagraph), então agora esse elemento tem algum
conteúdo. A segunda linha anexa o newParagraph ao div original
(nosso Div). Agora ourDiv não está vazio no DOM e será exibido na página com
o conteúdo “Hello, world!”
Você deve ter uma ideia de como funciona. Que tal mais um par?
inserirAntes()
O método insertBefore() , como você pode imaginar, insere um elemento antes de

outro elemento. Leva dois argumentos: o primeiro é o nó que é inserido ed, e o
segundo é o elemento que é inserido na frente. Você também precisa saber o pai
ao qual o elemento será adicionado.
Assim, por exemplo, para inserir um novo título antes do parágrafo nesta marcação
<div id="our-div">
<p id="our-paragraph">Nosso texto de parágrafo</p>
</div>
começamos atribuindo nomes de variáveis ao div e ao p que ele contém e, em

seguida, criamos o elemento h1 e seu nó de texto e os colocamos juntos, como
vimos no último exemplo:

var para = document.getElementById("nosso-parágrafo");
var newHeading = document.createElement("h1"); var

títuloTexto = document.createTextNode("Um novo título");
newHeading.appendChild( headerText ); // Adiciona nosso novo nó de
texto ao novo título

Conheça o DOM
Finalmente, na última instrução mostrada aqui, o método insertBefore() coloca o

elemento newHeading h1 antes do elemento para dentro de ourDiv.
ourDiv.insertBefore( newHeading, para );
substituirFilho()
O método replaceChild() substitui um nó por outro e recebe dois argumentos. O
primeiro argumento é o novo filho (ou seja, o nó com o qual você deseja terminar).
O segundo é o nó que é substituído pelo primeiro. Assim como insertBefore(),
você também precisa identificar o elemento pai no qual a troca ocorre. Para
simplificar, digamos que começamos com a seguinte marcação:
<div id="our-div">
<div id="swap-me"></div>
</div>
E queremos substituir o div pelo id “swap-me” por uma imagem. Começamos

criando um novo elemento img e definindo o atributo src para o nome do caminho
para o arquivo de imagem. Na declaração final, usamos replaceChild() para
colocar newImg no lugar de swapMe.

var swapMe = document.getElementById("swap-me");
var newImg = document.createElement("img"); //
Cria um novo elemento de imagem
newImg.setAttribute( "src", "caminho/para/imagem.jpg" ); //

Dê à nova imagem um atributo "src"
ourDiv.replaceChild( newImg, swapMe );
removeFilho()
Parafraseando minha mãe: “Trouxemos esses elementos para este mundo e

podemos tirá-los novamente”. Você remove um nó ou uma ramificação inteira da
árvore do documento com o método removeChild() . O método recebe um
argumento, que é o nó que você deseja remover. Lembre-se que o DOM pensa
em termos de nós, não apenas elementos, então o filho de um elemento pode ser
o texto (nó) que ele contém, não apenas outros elementos.
Como appendChild(), o método removeChild() é sempre chamado no elemento

pai do elemento a ser removido (portanto, “remover filho”). Isso significa que
precisaremos de uma referência ao nó pai e ao nó que desejamos remover.
Vamos supor o seguinte padrão de marcação:
<div id="pai">
<div id="remove-me">
<p>Pssh, eu nunca gostei daqui mesmo.</p>
</div>
</div>
Nosso script ficaria mais ou menos assim:
var parentDiv = document.getElementById("pai");

var removeMe = document.getElementById("remove-me");

Polyfills
parentDiv.removeChild( removeMe ); //
Remove a div com o id "remove-me" da página.
A guerra dos navegadores
O JavaScript surgiu durante uma

época sombria e sem lei, antes do Para leitura adicional
movimento dos padrões da web,
quando todos os principais players do Isso deve lhe dar uma boa ideia do que é script DOM. Claro, eu mal arranhei a superfície
mundo dos navegadores estavam – por do que pode ser feito com o DOM, mas se você quiser aprender mais, definitivamente
falta de um termo melhor – improvisando. confira o livro DOM Scripting: Web Design with JavaScript and the Document Object
Provavelmente não será uma grande Model, Second Edition , por Jeremy Keith e Jeffrey Sambells (Amigos de Ed).
surpresa para ninguém que a Netscape e a
Microsoft tenham implementado versões
radicalmente diferentes do DOM, com o
sentimento predominante de “que vença o melhor navegador”.
POLIENCHIMENTOS
Vou poupá-lo dos detalhes sangrentos
do Battle for JavaScript Hill, mas as duas
implementações concorrentes eram tão Você se familiarizou com muitas novas tecnologias neste livro até agora: novos elementos
diferentes que eram em grande parte HTML5, novas maneiras de fazer coisas com CSS3, usar JavaScript para manipular o
inúteis, a menos que você quisesse manter
DOM e muito mais. Em um mundo perfeito, todos os navegadores estariam em sintonia,
duas bases de código separadas ou
adicionar um "melhor visualizado na Internet acompanhando as tecnologias de ponta e obtendo as estabelecidas ao longo do caminho
Explorer/Netscape” em seus sites. (veja a barra lateral “The Browser Wars”).
Nesse mundo perfeito, navegadores que não conseguissem acompanhar (estou olhando para você, IE8)
Entre no movimento dos padrões da web! simplesmente desapareceriam completamente. Infelizmente, esse não é o mundo em que vivemos, e as
Durante esse período implacável, o W3C inadequações do navegador continuam sendo o espinho no lado de todos os desenvolvedores.
estava montando as bases para a
padronização moderna Serei o primeiro a admitir que gosto de uma boa reinvenção da roda. É uma ótima
DOM que todos conhecemos maneira de aprender, por um lado. Por outro lado, é a razão pela qual nossos carros não
e amor. Felizmente para nós, a Netscape e estão rolando em rochas arredondadas e pedaços de tronco de árvore. Mas quando se
a Microsoft aderiram ao movimento dos
trata de lidar com todas as peculiaridades estranhas do navegador, não precisamos
padrões. o
começar do zero. Toneladas de pessoas mais inteligentes do que eu já se depararam
O DOM padronizado é suportado desde
o Internet Explorer 5 e Netscape com esses problemas antes e já encontraram maneiras inteligentes de contorná-los e
Navigator 6. corrigir as partes do JavaScript e do DOM onde alguns navegadores podem ficar aquém.
Infelizmente, os avanços do Internet Podemos usar JavaScript para corrigir JavaScript.
Explorer nesta área estagnaram por algum
tempo após o IE6. Como resultado, as Polyfill é um termo cunhado por Remy Sharp para descrever um “shim” JavaScript que
versões mais antigas do IE têm algumas normaliza diferentes comportamentos de navegador para navegador (remysharp.
diferenças significativas em relação ao com/2010/10/08/what-is-a-polyfill). Ou, como disse Paul Irish, um polyfill é
DOM moderno. Felizmente, com o Internet
Um shim que imita uma API futura que fornece funcionalidade de fallback para navegadores
Explorer 9 e posterior, eles estão se
mais antigos.
recuperando rapidamente.
O problema é que seu projeto provavelmente Há muitas viagens no tempo acontecendo nessa citação, mas basicamente o que ele
ainda precisa oferecer suporte a esses usuários
está dizendo é que estamos fazendo algo novo funcionar em navegadores que não o
com versões mais antigas do IE. É uma dor,
suportam nativamente - seja uma tecnologia totalmente nova, como detectar a localização
mas estamos prontos para isso. Temos um
conjunto incrível de ferramentas à nossa física de um usuário ou consertando algo que um dos navegadores simplesmente conseguiu
disposição, como polyfills e bibliotecas errado.
JavaScript cheias de funções auxiliares, que
normalizam as pequenas peculiaridades que
Existem toneladas de polyfills por aí direcionados para tarefas específicas, como fazer
podemos encontrar de navegador para navegador. com que navegadores antigos reconheçam novos elementos HTML5 ou seletores CSS3,
e novos estão surgindo o tempo todo à medida que novos problemas surgem. Vou falar
sobre os polyfills mais usados na caixa de ferramentas do desenvolvedor moderno como

Polyfills
do lançamento deste livro. Você pode achar que novos são necessários no momento em que
atingir as trincheiras do web design. Você também pode descobrir que algumas dessas técnicas
não são necessárias para os navegadores aos quais você precisa dar suporte.
Calço HTML5 (ou shiv)

Você pode se lembrar de ter visto isso no Capítulo 5, Marcando texto, mas vamos dar um NOTA
pouco mais de atenção agora que você já tem um pouco de JavaScript.
Se você não precisa suportar IE8 e anteriores,
você não precisa de um shim HTML5.
Um shim/shiv HTML5 é usado para permitir que o Internet Explorer 8 e versões anteriores
reconheçam e estilizem elementos HTML5 mais recentes, como artigo, seção e navegação.
Existem várias variações no HTML5 shim/shiv, mas todas funcionam da mesma maneira:
rastreie o DOM procurando por elementos que o IE não reconhece e, em seguida, substitua-os
imediatamente pelo mesmo elemento para que fiquem visíveis para o IE em o DOM. Agora,
todos os estilos que escrevermos nesses elementos funcionarão conforme o esperado. Sjoerd
Visscher descobriu originalmente essa técnica, e muitas, muitas variações desses scripts
existem agora. A versão de Remy Sharp é a mais usada atualmente.
O calço deve ser referenciado no cabeçalho do documento, a fim de “dizer”

Internet Explorer sobre esses novos elementos antes de concluir a renderização da página. O
script é referenciado dentro de um comentário condicional específico do IE e é executado
apenas se o navegador for menor que (lt) IE9 — em outras palavras, versões 8 e anteriores:

A principal ressalva aqui é que as versões mais antigas do Internet Explorer com JavaScript
desabilitado ou indisponível receberão elementos sem estilo. Para saber mais sobre o shim/
shiv HTML5, experimente estes recursos:
• A entrada da Wikipedia para HTML Shiv (en.wikipedia.org/wiki/HTML5_Shiv)
• Post original de Remy Sharp

(remysharp.com/2009/01/07/html5-enabling-script)
Selectivizr
O Selectivizr (criado por Keith Clark) permite que o Internet Explorer 6–8 entenda seletores NOTA
CSS3 complexos, como :nth-child e ::first-letter. Ele usa JavaScript para buscar e analisar o
Se você não precisa dar suporte ao IE8 e
conteúdo de sua folha de estilo e corrigir falhas onde o analisador CSS nativo do navegador
anteriores, você não precisa do Selectivizr.
fica aquém.
Selectivizr deve ser usado com uma biblioteca JavaScript (falo sobre eles na próxima seção).
O link para o script vai em um comentário condicional do IE após o link para o arquivo .js da
biblioteca , assim:

Bibliotecas JavaScript
<script type="text/javascript" src="[ biblioteca JS]"></script>


Como estamos renunciando ao analisador CSS nativo aqui, podemos ver um pequeno impacto
no desempenho nos navegadores aplicáveis. Consulte o site Selectivizr (selectivizr.com) para
obter mais informações.
Picturefill (um polyfill de imagem responsivo)

O Picturefill permite suporte para o elemento de imagem , atributos srcset e tamanhos e
recursos relacionados à entrega de imagens com base no tamanho e na resolução da janela de
visualização (também conhecidas como imagens responsivas, conforme discutido no Capítulo
7, Adicionando imagens). Foi criado por Scott Jehl do Filament Group e é mantido pelo grupo
Picturefill.
Para usar o Picturefill, baixe o script e adicione-o ao cabeçalho do documento.

O primeiro script cria um elemento de imagem para navegadores que não o reconhecem.
O segundo script chama o próprio script Picturefill e o atributo async informa ao navegador que
ele pode carregar o Picturefill de forma assíncrona, ou seja, sem esperar que o script termine
antes de carregar o restante do documento.
<cabeça>
<script>
// Elemento de imagem HTML5 shiv
document.createElement( "imagem" );
</script>
<script src="picturefill.js" async></script>
</head>
No lado negativo, os navegadores sem JavaScript que também não suportam o elemento de
imagem verão apenas o texto alternativo da imagem. Baixe o Picturefill e obtenha informações
sobre seu uso em scottjehl.github.io/picturefill/.
BIBLIOTECAS JAVASCRIPT
Continuando com o tema “você não precisa escrever tudo do zero”, é hora de assumir as
bibliotecas JavaScript. Uma biblioteca JavaScript é uma coleção de funções e métodos pré-
escritos que você pode usar em seus scripts para realizar tarefas comuns ou simplificar tarefas
complexas.
Existem muitas bibliotecas JS por aí. Alguns são frameworks grandes que incluem todos os
polyfills, atalhos e widgets mais comuns que você precisaria para construir aplicativos web Ajax
completos (veja a barra lateral “O que é Ajax?”). Alguns são direcionados a tarefas específicas,
como manipulação de formulários, animação, gráficos ou funções matemáticas. Para
profissionais experientes em escrita de JavaScript, começar com uma biblioteca é uma ótima
economia de tempo. E para pessoas como você que estão apenas começando, uma biblioteca
pode lidar com tarefas que podem estar além do alcance de suas próprias habilidades.

O que é Ajax?
Ajax (às vezes escrito AJAX) significa Asynchronous JavaScript codificado na marcação da página; eles são carregados dinamicamente
And XML. A parte “XML” não é tão importante—você não precisa usar conforme necessário. A pesquisa de imagens do Google usa uma abordagem
XML para usar Ajax (mais sobre isso em breve). semelhante. Quando você chega ao final da página atual, é apresentado um
A parte “assíncrona” é o que importa. botão que permite carregar mais, mas você nunca sai da página atual.
Tradicionalmente, quando um usuário interagia com uma página da web

de uma forma que exigia que os dados fossem entregues do servidor, tudo O termo “Ajax” foi cunhado pela primeira vez por Jesse James
tinha que parar e esperar pelos dados, e toda a página precisava ser Garrett em um artigo “Ajax: A New Approach to Web Applications”. Ajax
recarregada quando estivesse disponível. Isso fez para uma experiência não é uma tecnologia única, mas sim uma combinação de HTML, CSS,
de usuário não especialmente suave. DOM e JavaScript, incluindo o objeto XMLHttpRequest , que permite
Mas com o Ajax, como a página pode obter dados do servidor em que os dados sejam transferidos de forma assíncrona. Ajax pode usar
segundo plano, você pode fazer atualizações na página com base na
XML para dados, mas tornou-se mais comum usar JSON
interação do usuário sem problemas e em tempo real, sem que a página (JavaScript Object Notation), um formato baseado em JavaScript e
precise ser recarregada. Isso faz com que os aplicativos da Web pareçam legível por humanos, para troca de dados.
mais aplicativos “reais”. Escrever aplicativos da web com Ajax não é o tipo de coisa que você
Você vê isso em vários sites modernos, embora às vezes seja sutil. faria logo de cara, mas muitas das bibliotecas JavaScript discutidas
No Twitter, por exemplo, rolar até o final de uma página carrega um neste capítulo têm ajudantes e métodos Ajax integrados que permitem que
conjunto de novos tweets. Esses não são você comece com muito menos esforço.
A desvantagem das bibliotecas é que, como elas geralmente contêm todas as suas
funcionalidades em um grande arquivo .js , você pode acabar forçando seus usuários
a baixar muito código que nunca é usado. Mas os autores das bibliotecas estão
cientes disso e tornaram muitas de suas bibliotecas modulares, e continuam a fazer
esforços para otimizar seu código. Em alguns casos, também é possível personalizar
o script e usar apenas as partes necessárias.
jQuery e outras bibliotecas

No momento da redação deste artigo, a biblioteca JavaScript predominantemente
dominante é jQuery (jquery.com). Provavelmente, se você usar uma biblioteca, será
aquela (ou pelo menos aquela primeira). Escrito em 2005 por John Resig, jQuery
chegou a mais de dois terços de todos os sites. Além disso, se um site usa uma
biblioteca, há 97% de chance de que seja jQuery.
É gratuito, é de código aberto e emprega uma sintaxe que facilita o uso se você já
tiver experiência com CSS, JavaScript e DOM. Você pode complementar o jQuery
com a biblioteca jQuery UI, que adiciona elementos de interface interessantes, como
widgets de calendário, funcionalidade de arrastar e soltar, expandir listas de acordeão
e efeitos de animação simples. jQuery Mobile é outra biblioteca baseada em jQuery
que fornece elementos de interface do usuário e polyfills projetados para dar conta da
variedade de navegadores móveis e suas notórias peculiaridades.
Claro, jQuery não é a única biblioteca da cidade. Outros incluem MooTools

(mootools.net), Dojo (dojotoolkit.org) e Prototype (prototypejs.org). Quanto às
bibliotecas JS menores que lidam com funções especializadas, pois estão sendo
criadas e se tornando obsoletas o tempo todo, recomendo fazer uma pesquisa na web por

“Bibliotecas JavaScript para _____________” e veja o que está disponível. Algumas categorias de
biblioteca incluem o seguinte:
• Formulários
• Animação
• Carrosséis de imagens
• Jogos
• Gráficos de informações
• Efeitos de imagem e 3D para o elemento canvas
• Funções de string e matemática
• Manipulação de banco de dados
• Gestos de toque
Como usar jQuery

É fácil implementar qualquer uma das bibliotecas que acabei de listar. Tudo o que você faz é baixar o
arquivo JavaScript (.js) , colocá-lo em seu servidor, apontar para ele em sua tag de script e pronto. É
o arquivo .js que faz todo o trabalho pesado, fornecendo funções pré-escritas e atalhos de sintaxe.
Depois de incluí-lo, você pode escrever seus próprios scripts que aproveitam os recursos integrados à
estrutura.
Claro, o que você realmente faz com isso é a parte interessante (e muito além do escopo deste
capítulo, infelizmente).
Como membro da equipe do jQuery Mobile, tenho um viés bastante óbvio aqui, então vamos ficar com
o jQuery nos próximos exemplos. Além de ser a biblioteca mais popular, eles disseram que me dariam
um dólar toda vez que eu dissesse “jQuery”.
Baixe o arquivo jQuery .js

Para começar com jQuery (cha-ching), vá para jQuery.com e aperte o grande botão Download para
obter sua própria cópia de jquery.js. Você pode escolher entre uma versão de produção que tem todos
os espaços em branco extras removidos para um tamanho de arquivo menor, ou uma versão de
desenvolvimento que é mais fácil de ler, mas quase oito vezes maior em tamanho de arquivo. A versão
de produção deve ficar bem se você não for editá-la por conta própria.
Copie o código, cole-o em um novo documento de texto simples e salve-o com o mesmo nome de
arquivo que você vê na barra de endereços na janela do navegador. No momento em que este artigo
foi escrito, a versão mais recente do jQuery é 3.2.1, e o nome do arquivo da versão de produção é
jquery-3.2.1.min.js (o min significa “minimizado”). Coloque o arquivo no diretório com os outros arquivos
do seu site. Alguns desenvolvedores mantêm seus scripts em um diretório js para fins de organização,
ou podem simplesmente

mantenha-os no diretório raiz do site. Onde quer que você decida colocá-lo, certifique-se de
anotar o nome do caminho para o arquivo porque você precisará dele na marcação.
Adicione-o ao seu documento
Inclua o script jQuery da mesma forma que você incluiria qualquer outro script no documento,
com um elemento script :
<script src="pathtoyourjs/jquery-3.2.1.min.js"></script>
E é quase isso. Há uma alternativa que vale a pena mencionar, no entanto.

Se você não quiser hospedar o arquivo sozinho, poderá apontar para uma das versões
hospedadas publicamente e usá-lo dessa maneira. Uma vantagem desse método é que ele é
armazenado em cache pelo navegador, portanto, há uma chance de que alguns dos navegadores
de seus usuários já tenham uma cópia dele. A página de download do jQuery lista algumas
opções, incluindo o link a seguir para o código no servidor do Google. Simplesmente copie este
código exatamente como você o vê aqui, cole-o no cabeçalho do documento ou antes da tag </
body> e você terá um pouco de jQuery!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/ ÿ
jquery.min.js"></script>
Prepare-se"
Você não quer disparar scripts antes que o documento e o DOM estejam prontos para eles, não
é? Bem, jQuery tem uma declaração conhecida como o evento pronto que verifica o documento
e espera até que esteja pronto para ser manipulado.
Nem todos os scripts exigem isso (por exemplo, se você estivesse apenas disparando um alerta
do navegador), mas se você estiver fazendo alguma coisa com o DOM, é uma boa ideia começar
definindo o cenário para seus scripts incluindo essa função em seu script ou arquivo .js :
<script src="pathtoyourjs/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
// Seu código aqui
});
</script>
Script com jQuery

Depois de configurado, você pode começar a escrever seus próprios scripts usando jQuery. Os
atalhos que o jQuery oferece se dividem em duas categorias gerais:
• Um conjunto gigante de scripts e polyfills integrados de detecção de recursos
• Uma sintaxe mais curta e intuitiva para elementos de segmentação

( motor seletor do jQuery)

Você deve ter uma noção decente do que os polyfills fazem depois de percorrer essa última
seção, então vamos dar uma olhada no que o mecanismo seletor faz por você.
Uma das coisas que o jQuery simplifica é mover-se pelo DOM porque você pode usar a
sintaxe do seletor que aprendeu para CSS. Aqui está um exemplo de como obter um
elemento por seu valor de id sem uma biblioteca:
var parágrafo = document.getElementById( "status" );

A instrução encontra o elemento com o ID “status” e salva uma referência ao elemento em
uma variável (parágrafo). São muitos caracteres para uma tarefa simples. Você
provavelmente pode imaginar como as coisas ficam um pouco detalhadas quando você está
acessando muitos elementos na página. Agora que temos jQuery em jogo, no entanto,
podemos usar esta abreviação:
var parágrafo = $("#status");
Isso mesmo — esse é o seletor de id que você conhece e adora ao escrever CSS. E não
para por aí. Qualquer seletor que você usaria em CSS funcionará dentro dessa função
auxiliar especial.
Você quer encontrar tudo com uma classe de cabeçalho? Use $(".header");.
Pelo nome do elemento? Claro: $("div");.
Cada subtítulo na sua barra lateral? Fácil: $("#sidebar .sub");.
Você pode até segmentar elementos com base no valor dos atributos: $("[href='http://
google.com']");.
Mas não para com seletores. Podemos usar um grande número de funções auxiliares
embutidas em jQuery e bibliotecas semelhantes para rastrear o DOM como tantos, uh,
Spider-men. Pessoas-aranha. Lançadores de teias.
jQuery também nos permite encadear objetos juntos de uma maneira que pode direcionar
coisas que mesmo o CSS não pode (o elemento pai de um elemento, por exemplo). Digamos
que temos um parágrafo e queremos adicionar uma classe ao elemento pai desse parágrafo.
Não sabemos necessariamente qual será esse elemento pai, portanto, não podemos
segmentar o elemento pai diretamente. Em jQuery podemos usar o objeto parent() para
chegar a ele:
$("p.error").parent().addClass("error-dialog");
Outro grande benefício é que isso é altamente legível à primeira vista: “encontre qualquer
parágrafo(s) com a classe 'error' e adicione a classe 'error-dialog' ao(s) pai(s)”.
Mas e se eu não souber escrever scripts?

Leva tempo para aprender JavaScript e pode demorar um pouco até que você possa
escrever scripts por conta própria. Mas não se preocupe. Se você fizer uma pesquisa na
web para o que precisa (por exemplo, “carrossel de imagens jQuery” ou “lista de acordeões jQuery”),

Teste-se
há uma boa chance de você encontrar muitos scripts que as pessoas criaram e
compartilharam, completos com documentação sobre como usá-los. Como o jQuery usa
uma sintaxe de seletor muito semelhante ao CSS, fica mais fácil personalizar os scripts do
jQuery para uso com sua própria marcação.
GRANDE ACABAMENTO
Em todos os dois capítulos, passamos de aprender o básico de variáveis para manipular o

DOM para alavancar uma biblioteca JavaScript. Mesmo com tudo que cobrimos aqui, mal
começamos a cobrir todas as coisas que o JavaScript pode fazer.
Da próxima vez que você estiver olhando para um site e ele fizer algo legal, veja a fonte em
seu navegador e dê uma olhada no JavaScript. Você pode aprender muito lendo e até
mesmo desmontando o código de outra pessoa. E lembre-se, não há nada que você possa
quebrar com o JavaScript que não possa ser desfeito com alguns toques da tecla Delete.
Melhor ainda, JavaScript vem com uma comunidade inteira de desenvolvedores

apaixonados que estão ansiosos para aprender e igualmente ansiosos para ensinar. Procure
desenvolvedores que pensam como você e compartilhe as coisas que você aprendeu ao
longo do caminho. Se você está preso em um problema complicado, não hesite em procurar
ajuda e fazer perguntas. É raro encontrar um problema que ninguém mais tenha, e a
comunidade de desenvolvedores de código aberto está sempre animada para compartilhar o que aprendeu.
É por isso que você teve que me aturar por dois capítulos, na verdade.
TESTE-SE
Apenas algumas perguntas para aqueles de vocês que jogam em casa. Se precisar de ajuda, dê
uma olhada no Apêndice A para obter as respostas.
1. Ajax é uma combinação de quais tecnologias?
2. O que isso faz?
document.getElementById("principal")
3. O que isso faz?
document.getElementById("principal").getElementsByTagName("seção");

Teste-se
4. O que isso faz?
document.body.style.backgroundColor = "papayawhip"
5. O que isso faz? (Este é um pouco complicado porque aninha funções,

mas você deve ser capaz de juntar as peças.)
document .getElementById("main") .appendChild( document.createElement("p") .appendCh

)
);
6. Qual é o benefício de usar uma biblioteca JavaScript como jQuery?
uma. Acesso a uma coleção empacotada de polyfills
b. Sintaxe possivelmente mais curta
c. Suporte Ajax simplificado

V
IMAGENS DA WEB
CAPÍTULO
FUNDAMENTOS DA IMAGEM DA WEB 23
A menos que você planeje publicar sites somente de texto, é provável que você precise de NESTE CAPÍTULO
imagens. Para muitos de vocês, isso pode significar colocar as mãos em um programa de
edição de imagens pela primeira vez e adquirir algumas habilidades básicas de produção gráfica. Onde obter imagens
Se você é um designer experiente, pode precisar adaptar seu estilo e processo para criar
PNG, JPEG, GIF e WebP
gráficos apropriados para entrega na web.
Resolução de imagem e tela
No Capítulo 7, Adicionando imagens, abordamos os fundamentos da incorporação de
imagens no documento HTML, incluindo a diferença entre os formatos gráficos de bitmap e Estratégia de produção de imagem para web
o SVG baseado em vetor. Este capítulo aborda os fundamentos das próprias imagens.
Começaremos analisando as fontes de imagens. A partir daí, conheceremos os formatos de
Como fazer favicons
arquivo disponíveis para gráficos da web para ajudá-lo a decidir qual usar. Veremos a
resolução da imagem e como ela se relaciona com a resolução das telas em que aparecem,
incluindo telas de alta densidade. Também vou orientá-lo em uma série de perguntas que o
ajudarão a formar uma estratégia para criar imagens para seu site. Finalmente, o capítulo
termina com um rápido tutorial sobre Favicon.
FONTES DE IMAGEM
Você precisa ter uma imagem para salvar uma imagem, então, antes de entrarmos no âmago
da questão dos formatos de arquivo, vamos ver algumas maneiras de obter imagens em
primeiro lugar. Há muitas opções: desde escanear, fotografar ou ilustrá-las você mesmo, até
usar fotos e clip-arts disponíveis, ou simplesmente contratar alguém para criar imagens para
você.
Crie suas próprias imagens

Na maioria dos casos, a maneira mais econômica de gerar imagens para o seu site é criar
as suas próprias imagens do zero. O bônus adicional é que você sabe que tem
641
Fontes de imagem
direitos totais de uso das imagens (vamos abordar os direitos autorais em breve). Os designers podem
gerar imagens com scanners, câmeras ou um programa de desenho:
DICAS DE VERIFICAÇÃO Fotografias
Você pode capturar o mundo ao seu redor e canalizá-lo diretamente para um programa de edição
Ao digitalizar fontes para uso na Web, estas
dicas ajudarão você a criar imagens com melhor
de imagens. Dependendo do tipo de imagem que você procura, você pode obter qualidade suficiente
qualidade: com a câmera do seu telefone. Lembre-se de que é sempre uma boa ideia criar versões de alta
• Porque é mais fácil manter resolução de suas imagens e salvar cópias menores conforme necessário.
qualidade de imagem ao
redimensionar menor do que
Ilustração eletrônica
redimensionar maior, digitalize a imagem
maior do que você realmente precisa. Se você tiver habilidades de ilustração, poderá criar sua própria imagem em um aplicativo de
Isso lhe dá mais flexibilidade para criar
desenho ou edição de fotos. Cada designer tem suas próprias ferramentas e técnicas favoritas.
outros tamanhos posteriormente. Questões
Para logotipos e desenhos de linha, recomendo começar com um programa de desenho vetorial
de tamanho de imagem são discutidas com mais detalhes no
“Tamanho e resolução da imagem”

como Adobe Illustrator, Corel Draw ou Sketch e, em seguida, salvar em uma cópia apropriada para
seção mais adiante neste capítulo. a Web, conforme necessário.
• Digitalize imagens em preto e branco

Digitalização
no modo de escala de cinza (8 bits), não
no modo preto e branco (1 bit ou bitmap). A digitalização é uma ótima maneira de coletar material de origem. Você pode digitalizar quase
Isso permite que você faça ajustes nas tudo, desde arte plana até pequenos objetos 3D. Cuidado, no entanto, com a tentação de escanear
áreas cinzas de meio-tom depois de e usar as imagens encontradas. Lembre-se de que a maioria das imagens que você encontra
dimensionar a imagem para suas dimensões
provavelmente está protegida por direitos autorais e não pode ser usada sem permissão, mesmo
e resolução finais. Se você realmente deseja
que você as modifique consideravelmente. Consulte as “Dicas de digitalização”
apenas pixels em preto e branco, converta
barra lateral para obter algumas informações sobre como fazer.
a imagem como último passo.
• Se estiver digitalizando uma imagem que já

foi impressa, será necessário eliminar o Banco de imagens e ilustrações
padrão de pontos resultante do processo
Se você não está confiante em suas habilidades de design, ou apenas quer começar com algumas
de impressão.
imagens novas, há muitas coleções de fotos, ilustrações, botões, animações e texturas prontas
A melhor maneira de fazer isso é
aplicar um leve desfoque à imagem (no
disponíveis para venda ou gratuitamente.
Photoshop, use o filtro Gaussian Blur), Fotos e ilustrações de banco de imagens geralmente se enquadram em duas grandes categorias:
redimensione a imagem um pouco menor direitos gerenciados e livres de royalties.
e aplique um filtro de nitidez. Isso eliminará
esses pontos irritantes. Certifique-se de ter os
direitos de usar a imagem impressa também,
Direitos gerenciados
é claro.
Direitos gerenciados significa que o detentor dos direitos autorais (ou uma empresa que os representa)
controla quem pode reproduzir a imagem. Para usar uma imagem com direitos gerenciados, você deve
obter uma licença para reproduzi-la para um uso específico e por um determinado período de tempo.
Uma das vantagens de licenciar imagens é que você pode obter direitos exclusivos sobre uma imagem
em um meio específico (como a web) ou em um setor de negócios específico (como o setor de saúde
ou bancário). Você também sabe que a fonte da imagem foi verificada (ou seja, não foi roubada).
No lado negativo, as imagens controladas por direitos ficam bastante caras. Dependendo da extensão e
duração da licença, o preço pode ser de muitos milhares de dólares para uma única imagem. Se você
não quer direitos exclusivos e quer
642 Parte V. Imagens da Web

Fontes de imagem
usar a imagem apenas na web, o custo é mais provável de algumas centenas de dólares, dependendo
da fonte.
A Getty Images (gettyimages.com) é o maior banco de imagens para imagens com direitos
gerenciados, tendo adquirido a maioria de seus concorrentes nos últimos anos. Ele também oferece
imagens isentas de royalties, que veremos a seguir.
Livre de royalties
Se você não tiver um orçamento de quatro dígitos ou mesmo três dígitos para imagens, considere
usar obras de arte isentas de royalties para as quais você não precisa pagar uma taxa de licenciamento.
A arte sem royalties está disponível por uma taxa única que oferece uso ilimitado da imagem, mas
você não tem controle sobre quem mais a está usando. Imagens isentas de royalties estão disponíveis
em bancos profissionais de alto nível, como Getty Images, por apenas 50 dólares para uma pequena
imagem apropriada para a web (como o canguru em êxtase na FIGURA 23-1), e em outros sites para
menos (ou até de graça).
Uma das minhas fontes favoritas é a iStockPhoto (istockphoto.com). Eles têm uma enorme coleção
de imagens a partir de US$ 10 por pop. Você pode comprar uma imagem por vez ou obter um plano
de assinatura.
FIGURA 23-1. Um canguru em

Creative Commons
êxtase, um exemplo de imagem isenta
de royalties que peguei no
Outra maneira de obter imagens gratuitas é encontrar fotos e desenhos divulgados pelos artistas sob
Gettyimages.com para sua diversão.
uma licença Creative Commons. Existem alguns tipos de licenças Creative Commons, portanto,
verifique os termos. Alguns artistas liberam seus trabalhos para usar como quiser; alguns artistas
pedem apenas que você dê crédito a eles (“attribution-only”); e alguns limitam o uso da imagem a
não comerciais
propósitos.
LEITURA ADICIONAL
Existem vários recursos para imagens lançadas em uma licença Creative Commons, mas estas são
Para mais informações sobre
três boas primeiras paradas:
Licenças Creative Commons,
Flickr Creative Commons (www.flickr.com/creativecommons) acesse creativecommons.org/licenses/.
O serviço de compartilhamento de fotos Flickr é minha primeira parada para encontrar fotos
liberadas em uma licença Creative Commons. A qualidade varia, mas geralmente consigo
encontrar o que preciso (como o panda vermelho na FIGURA 16-28) pelo custo de um crédito
de foto.
Unsplash (unsplash.com)
O Unsplash oferece imagens gratuitas de alta qualidade, “presenteadas pela comunidade de

fotógrafos mais generosa do mundo”. É a fonte de muitas das imagens de alimentos que uso
neste livro.
Wikimedia Commons (commons.wikimedia.org/wiki/Main_Page)
Um site irmão da Wikipedia, o Wikimedia Commons é um vasto recurso de milhões de Creative

Commons e imagens de domínio público e outros arquivos de mídia. Eles são contribuídos pela
comunidade e de uso gratuito.
23. Noções básicas de imagem da Web 643

Conheça os formatos
Clipart e ícones
Clip-art refere-se a coleções de ilustrações, animações, botões e outros enfeites isentos de royalties
que você pode copiar e colar para uma ampla variedade de usos.
Existem vários recursos on-line, e a boa notícia é que alguns desses sites fornecem gráficos
gratuitamente, embora você possa ter que sofrer com uma enxurrada de anúncios pop-up. Outros
cobram uma taxa de adesão, entre US$ 10 e US$ 200 por ano. A desvantagem é que muitos deles são
de má qualidade ou meio bobos (mas então, “hokey” está nos olhos de quem vê). A seguir estão dois
sites para você começar:
Clipart.com (www.clipart.com)
Este serviço cobra uma taxa de adesão, mas é bem organizado e tende a fornecer obras de arte
de maior qualidade do que os sites gratuitos.
#1 Clipart Gratuito (www.1clipart.com)
Outro site de clip-art gratuito e sem frescuras.
Também é fácil encontrar ícones para páginas da web e aplicativos gratuitamente ou por um preço
baixo (uma simples pesquisa por “ícones gratuitos” fará o truque). Aqui estão dois recursos para você
começar:
O Projeto Substantivo (thenounproject.com)
O Noun Project coleta e organiza ícones clássicos de uma cor de todo o mundo. Dezenas de
coleções estão disponíveis gratuitamente e uma taxa de assinatura anual dá acesso a tudo.
Localizador de ícones (www.iconfinder.com)
Este é um bom recurso para ícones coloridos de todos os estilos. Alguns são gratuitos, mas a
maioria está disponível por meio de um plano de assinatura mensal. Certifique-se de verificar os
termos da licença Creative Commons, que varia de acordo com o conjunto de ícones.
Contrate um desenhista
Encontrar e criar imagens personalizadas leva tempo e talentos específicos. Se você tiver mais dinheiro
do que qualquer uma dessas coisas, considere contratar um designer gráfico, fotógrafo ou ilustrador
para gerar as imagens do seu site para você. A vantagem de contratar um profissional é que você
obtém imagens personalizadas sob medida para sua mensagem ou marca, não apenas imagens
genéricas de banco de imagens. Se você começar com imagens originais de alta qualidade, poderá
usar as habilidades aprendidas neste livro para produzir versões da Web conforme necessário.
CONHEÇA OS FORMATOS
Depois de colocar as mãos em algumas imagens, você precisa colocá-las em um formato que funcione
em uma página da web. Existem dezenas de formatos de arquivos gráficos no mundo. Por exemplo, se
você usa o Windows, pode estar familiarizado

com gráficos BMP, ou se você for um designer de impressão, normalmente você pode
usar imagens em formato TIFF e EPS. Na web, imagens bitmap (baseadas em pixels)
podem ser salvas nos seguintes formatos (veja Nota): JPEG (“jay-peg”), PNG (“ping” ou NOTA
“Pee-en-gee”), GIF (pronunciado “giff” ou “jiff”) e WebP (eu já vi isso chamado de “weppy”, O formato WebP é tão novo neste momento
mas “web-p” soa bem para mim). que poucos navegadores e programas de
software de imagem o suportam. Ainda
Há também o formato vetorial SVG (Scalable Vector Graphics) que analisamos em termos
assim, incluo aqui porque é uma opção
de marcação no Capítulo 7. O SVG é um pouco estranho porque é gerado por um arquivo
promissora quando o suporte melhora.
de texto XML. É tão único, na verdade, que dei a ele seu próprio capítulo: Capítulo 25,
SVG. Este capítulo e o próximo se concentram principalmente nos formatos de bitmap.
Ao salvar um recurso de imagem para uma página da Web, é importante que ele tenha a Nomeie os arquivos corretamente
melhor qualidade de imagem no menor tamanho de arquivo. O primeiro passo para atingir Certifique-se de usar as extensões de arquivo
esses objetivos é garantir que você salve a imagem no formato mais apropriado com base adequadas para seus arquivos de imagem: •
no tipo de imagem. Esta seção aborda a terminologia e se aprofunda nos recursos e Arquivos GIF terminam com o sufixo .gif . • Os arquivos
funções de GIF, JPEG, PNG e WebP. Saber como eles funcionam ajudará você a tomar JPEG usam o sufixo .jpg (ou o menos comum .jpeg) . •
a melhor decisão de formato. Arquivos PNG terminam em .png. • Os arquivos WebP
terminam em .webp.
O JPEG Fotogênico
• Os arquivos SVG terminam em .svg.
Um dos formatos gráficos mais populares na web é o JPEG, que significa Joint
Photographic Experts Group, o órgão de padrões que o criou.
JPEG é o melhor formato a ser usado se sua imagem for uma fotografia ou contiver
transições de cores suaves e suaves (FIGURA 23-2). O esquema de compactação JPEG adora
gradiente e cores misturadas, mas não funciona especialmente bem em cores planas ou
bordas duras.
JPEG é o melhor formato a

ser usado se sua imagem
for uma fotografia ou
contiver transições de cores
suaves e suaves.
FIGURA 23-2. O formato JPEG é ideal para fotografias (coloridas ou em tons de cinza) ou qualquer
imagem com gradações de cores sutis.

Imagens Truecolor de 24 bits
Os JPEGs são capazes de exibir milhões de cores no espaço de cores RGB (também conhecido
NOTA como espaço Truecolor ; consulte Nota). Isso também é conhecido como cor de 24 bits porque cada
um dos três canais de cores (vermelho, verde e azul) é definido com 8 bits de informação.
A cor RGB é explicada no Capítulo 13, Cores e
Planos de Fundo.
A exibição de cores de 24 bits é um aspecto que torna os JPEGs ideais para gráficos fotográficos -
eles têm todas as cores de que você precisa. Em comparação, outros para tapetes como PNG-8 e
GIF usam uma paleta que limita o número de cores na imagem a 256 no total (falaremos sobre o
porquê em um momento).
Compressão com perda
AVISO O esquema de compactação JPEG tem perdas, o que significa que algumas das informações da
imagem são descartadas no processo de compactação (consulte Aviso).
Imagem cumulativa
Felizmente, essa perda não é discernível para a maioria das imagens na maioria dos níveis de
Perda de qualidade
compactação. Quando uma imagem é compactada com altos níveis de compactação JPEG, você
Esteja ciente de que, uma vez que a qualidade da começa a ver manchas e quadrados coloridos (referidos como artefatos) que resultam da forma
imagem é perdida na compactação JPEG, você nunca como o esquema de compactação amostra a imagem (FIGURA 23-3).
mais poderá recuperá-la. Por esse motivo, você deve
evitar salvar novamente um JPEG como JPEG. A
perda de imagem é cumulativa — em outras palavras,
você perde qualidade de imagem todas as vezes.
É melhor manter a imagem original e exportar cópias

JPEG conforme necessário. Dessa forma, se você
precisar fazer uma alteração, poderá voltar ao original
e fazer um novo salvamento ou exportação.
Original Compressão máxima
FIGURA 23-3. A compactação JPEG descarta os detalhes da imagem para obter tamanhos de arquivo menores.
Em altas taxas de compactação, a qualidade da imagem é prejudicada, conforme mostrado na imagem à direita.
Na maioria dos programas, você pode controlar a agressividade com que deseja que a imagem seja
compactada com uma configuração de Qualidade ao salvar ou exportar. Isso envolve uma troca
entre o tamanho do arquivo e a qualidade da imagem. Quanto mais você compacta a imagem (para
um tamanho de arquivo menor), mais a qualidade da imagem sofre. Por outro lado, quando você
maximiza a qualidade, também acaba com arquivos maiores. O melhor nível de compactação é
baseado na imagem específica e em seus objetivos para o site.
JPEGs progressivos
Os JPEGs progressivos são exibidos em uma série de passagens, começando com uma versão de
baixa resolução que fica mais clara a cada passagem, conforme mostrado na FIGURA 23-4. Em
alguns programas de edição de imagem, você pode especificar o número de passagens necessárias
para preencher a imagem final (3, 4 ou 5).

O vasto mundo do JPEG

O Joint Photographic Experts Group
tem estado ocupado desde o lançamento do
formato JPEG original que conhecemos e
amamos. Eles lançaram vários padrões JPEG
mais recentes (JPEG 2000, JPEG XR, JPEG-
LS, JPEG XS e outros) que visam acompanhar
FIGURA 23-4. Os JPEGs progressivos são renderizados em uma série de passagens.
as mudanças nos requisitos de imagem em
todas as áreas, de câmeras digitais a imagens
A vantagem de usar JPEGs progressivos é que os espectadores podem ter uma ideia da médicas. Os formatos mais recentes incluem
imagem antes de baixar completamente. Além disso, fazer um JPEG progressivo geralmente recursos como compactação sem perdas, a
capacidade de armazenar informações de 16
reduz um pouco o tamanho do arquivo. A desvantagem é que os JPEGs progressivos
bits nos canais de cores RGB, o modelo de
consomem mais poder de processamento, o que pode torná-los problemáticos para dispositivos
cores CMYK e implementações leves que
móveis de baixo custo. Apesar desse pequeno problema, a melhor prática é tornar todos os
são mais fáceis de codificar e decodificar. Ler
JPEGs progressivos, não apenas pelo tamanho menor do arquivo, mas porque eles aparecem
na página mais rapidamente, melhorando o desempenho percebido.
mais sobre eles em JPEG.org.
O Poderoso PNG
O formato PNG (Portable Network Graphics) foi projetado para substituir o GIF para fins online
e o TIFF para armazenamento e impressão de imagens. Um PNG pode ser usado para salvar
muitos tipos de imagem: cores indexadas de 8 bits, cores RGB de 24 e 48 bits e tons de cinza
de 16 bits, mas para fins de produção na Web, você precisa escolher apenas entre 8 bits
( PNG-8) e 24 bits (PNG-24). PNGs em tons de cinza
O PNG oferece suporte a imagens
Apesar de ter um começo lento em termos de suporte ao navegador, os PNGs se tornaram a em tons de cinza de 16 bits, ou seja, até
primeira escolha dos desenvolvedores em formatos gráficos da web e por boas razões. 65.536 tons de cinza (216), permitindo
PNGs oferecem uma impressionante linha de recursos: que fotografias e ilustrações em preto e
branco sejam armazenadas com
• Compressão sem perdas enorme sutileza de detalhes, embora não
sejam apropriados para a web.
• Transparência de vários níveis (alfa) ou simples on/off (binário)
Além dos grandes tamanhos de arquivo
• Exibição progressiva em várias passagens necessários para armazenar tanta

informação de imagem, esse nível de
• Informações de ajuste de gama (brilho) incorporadas sutileza em cinzas seria perdido na maioria
dos monitores de computador.
• Texto incorporado para anexar informações sobre a imagem
PNG-8
O PNG-8 é bom para imagens com cores planas, como logotipos, arte de linha e ícones
(FIGURA 23-5). Você também pode salvar fotografias ou imagens texturizadas, mas elas não
serão salvas com a mesma eficiência, resultando em tamanhos de arquivo maiores. No entanto,
o PNG-8 funciona bem para imagens com uma combinação de pequenas quantidades de
imagens fotográficas e grandes áreas planas de cores. As duas principais características dos
PNG-8s são que eles usam um modelo de cores indexado e suportam transparência. Vale a
pena explorar um pouco mais esses conceitos.

NOTA
Por serem ilustrações simples, as imagens da FIGURA
23-5 também poderiam ter sido desenhadas com vetores

e salvas no formato SVG.
FIGURA 23-5. O formato PNG-8 é eficiente na compactação de imagens gráficas compostas principalmente por
cores planas e bordas rígidas.
cor indexada de 8 bits
Mencionei anteriormente que os arquivos PNG-8 contêm no máximo 256 cores. Vamos falar
NOTA
sobre o porquê.
Os GIFs também são imagens coloridas indexadas de 8
bits, portanto, essa discussão sobre profundidade de bits Os arquivos PNG-8 são imagens coloridas indexadas que contêm informações de cores de 8 bits
e paletas também se aplica aos GIFs. (eles também podem ser salvos em profundidades de bits mais baixas). Vamos decifrar essa
afirmação um termo de cada vez. Primeiro, 8 bits significa que os PNG-8s podem conter até 256
cores – o número máximo que 8 bits de informação podem definir (28 = 256). Profundidades de
bits mais baixas resultam em menos cores e também reduzem o tamanho do arquivo. Por
exemplo, imagens de 4 bits contêm apenas 16 cores (24 = 16).
Cor indexada significa que o conjunto de cores da imagem, sua paleta, é armazenado em uma
tabela de cores (também chamada de mapa de cores). Cada pixel na imagem contém uma
referência numérica (ou índice) para uma posição na tabela de cores. Vamos deixar isso claro
com uma demonstração simples. A FIGURA 23-6 mostra como uma imagem colorida indexada
de 2 bits (4 cores) referencia sua tabela de cores para exibição. Para imagens de 8 bits, há 256
slots na tabela de cores.
Os programas de edição de imagem geralmente permitem que você visualize a tabela de cores
de uma imagem. No Photoshop, você pode visualizar (e até editar) a tabela de cores selecionando
Imagem ÿ Modo ÿ Tabela de cores (FIGURA 23-7). No GIMP, vá para Windows ÿ Diálogos
acopláveis ÿ Mapa de cores (a imagem deve ser convertida primeiro para o modo de cores
indexadas).
A maioria das imagens de origem (digitalizações, ilustrações, fotos, etc.) começa em RGB para
mat, então elas precisam ser convertidas em cores indexadas para serem salvas como PNG-8 ou
GIF. Quando uma imagem passa do modo RGB para o modo indexado, as cores na imagem são
reduzidas a uma paleta de 256 cores ou menos, um processo conhecido como quantização. Para
a maioria dos programas, incluindo o Photoshop, a conversão ocorre quando você salva ou
exporta a imagem. Alguns programas de edição de imagem, como

111111111
113333311
133232331
133343331
132333231 1234
133222331 Tabela de cores
113333311
111111111
Os pixels em uma imagem A tabela de cores A imagem é exibida

colorida indexada contêm corresponde os números com as cores no
referências numéricas à tabela de aos valores de cores RGB. lugar.
cores da imagem. Este é o mapa para uma
imagem de 2 bits com 4 cores.
FIGURA 23-6. Uma imagem de 2 bits e sua tabela de cores.
Imagem reduzida para 64 cores indexadas
Photoshop CC (2018) GIMP
FIGURA 23-7. As tabelas de cores no Photoshop e no GIMP exibem as cores de 64 pixels usadas
na imagem.

GIMP, pode exigir que você converta a imagem em cores indexadas manualmente primeiro
e depois exporte o PNG-8 como uma segunda etapa.
Em ambos os casos, você pode ser solicitado a selecionar uma paleta para a imagem
colorida indexada. A barra lateral “Paletas de cores comuns” descreve as várias opções
de paletas disponíveis nas ferramentas de imagem mais populares. É recomendável que
você use Seletivo ou Perceptivo no Photoshop e Corte Mediano Otimizado no PaintShop
Pro para obter os melhores resultados para a maioria dos tipos de imagem. No GIMP,
“Gerar paleta ideal” deve funcionar, embora também forneça uma longa lista de paletas
personalizadas malucas que você pode usar (Coldfire, Plasma, Paintjet e Bears, para citar
apenas algumas).
Transparência
Você pode tornar partes de uma imagem PNG-8 totalmente transparentes para que a
imagem de fundo ou a cor apareçam. Embora todos os gráficos de bitmap sejam retangulares
por natureza, a transparência cria a ilusão de que a imagem tem uma forma mais
interessante (FIGURA 23-8). No tipo de transparência PNG-8 mais comumente suportado,
os pixels são totalmente transparentes ou totalmente opacos, também conhecidos como
transparência binária.
Os arquivos PNG-8 também são capazes de armazenar vários níveis de transparência em

seus mapas de cores indexados, permitindo que bordas e sombras suaves se misturem
com o plano de fundo. No passado, embora os navegadores suportassem PNG-8 com
FIGURA 23-8. A transparência níveis variáveis, era um desafio encontrar uma ferramenta de edição de imagens que
permite que o fundo listrado apareça
pudesse criá-los. Hoje, você pode criar PNG-8s transparentes diretamente do Photoshop
na imagem inferior.
CC, e há várias ferramentas para converter um PNG-24 em PNG-8, mantendo seus níveis
de transparência.
Paletas de cores comuns

Todas as imagens coloridas indexadas de 8 bits, como PNG-8 e GIF, usam Web Adaptável, Restritivo ou Web216. Cria uma paleta de cores
paletas para definir as cores na imagem e há várias paletas padrão para escolher. exclusivamente de uma paleta de 216 cores que não pontilham em
Alguns são métodos para produzir uma paleta personalizada com base nas monitores de 8 bits. Como os monitores de 8 bits são coisa do passado, essa
cores da imagem. Outros aplicam uma paleta preexistente à imagem. paleta (conhecida como “paleta da web”) não é mais relevante ou recomendada.
Exato. Cria uma paleta personalizada com as cores reais na imagem se a Personalizado. Permite carregar uma paleta que foi salva anteriormente e
imagem já contiver menos de 256 cores. aplicá-la à imagem atual. Caso contrário, ele preserva as cores atuais na paleta.
Adaptável. Cria uma paleta personalizada usando as cores de pixel usadas

com mais frequência na imagem. Permite a redução da profundidade de cor, Sistema (Windows ou Macintosh). Usa as cores na paleta padrão do
preservando o caráter original da imagem. sistema especificado.
Perceptivo (somente Photoshop). Cria uma tabela de cores personalizada Corte Mediano Otimizado (somente Paint Shop Pro Photo). Reduz a imagem
dando prioridade às cores para as quais o olho humano tem maior sensibilidade. para algumas cores usando algo semelhante a uma paleta adaptável.
Ao contrário do Adaptive, ele é baseado em algoritmos, não apenas em uma
contagem de pixels. Geralmente resulta em imagens com melhor integridade de Octree otimizado (somente Paint Shop Pro Photo). É
cor do que as imagens da paleta adaptável. recomendado se a imagem original tiver apenas algumas cores e você
Seletivo (somente Photoshop). Semelhante ao Perceptivo, mas dá preferência quiser manter essas cores exatas.
a áreas de cores amplas.

Veremos a transparência binária e variável como ela se aplica a arquivos PNG-8 na seção
“Trabalhando com transparência” no Capítulo 24, Produção de ativos de imagem.
PNG-24
Um PNG também pode ser salvo como uma imagem Truecolor, com cada canal (vermelho,
verde e azul) definido por informações de 8 ou 16 bits, resultando em imagens RGB de 24 ou As duas principais características
48 bits, respectivamente. Em muitos programas gráficos, PNGs RGB de 24 bits são dos PNG-24s são que eles são
identificados como PNG-24. Deve-se notar que as imagens de 48 bits, embora ótimas para “sem perdas” e podem conter
armazenamento de originais de alta qualidade, são inúteis para a web devido ao tamanho do vários níveis de transparência.
arquivo, e mesmo as imagens de 24 bits podem não ser a melhor escolha. Assim como o
JPEG, o PNG-24 é bom para imagens fotográficas em que você deseja a faixa máxima de cores.
As duas principais características dos PNG-24s são que eles são “sem perdas” e podem
conter vários níveis de transparência. Vamos cavar um pouco mais fundo.
Compressão sem perdas
Aprendemos que no algoritmo de compactação com perdas do JPEG, os dados da imagem

são descartados para reduzir o tamanho do arquivo. Os arquivos PNG-24 são sem perdas, o
que significa que nada é sacrificado. Por ser um formato sem perdas, um PNG de 24 bits é
quase sempre significativamente maior do que um JPEG com perdas da mesma imagem. Por
esse motivo, os JPEGs são a melhor escolha para fotos na web.
No entanto, o PNG-24 foi o primeiro formato a incluir um recurso matador que o tornou um
dos formatos mais populares da web, e isso é…
Transparência alfa
Os arquivos PNG-24 podem conter vários níveis de transparência, comumente chamados de

transparência alfa. Eles fazem isso armazenando informações de transparência de 8 bits (256
níveis) em um quarto canal, chamado de canal alfa.
NOTA
Às vezes, você vê PNG-24 com transparência alfa referido como PNG de 32 bits porque há 8
bits para cada um dos quatro canais: vermelho, verde, azul e alfa.
A FIGURA 23-9 mostra o mesmo PNG contra duas imagens de fundo diferentes.
O círculo laranja é totalmente opaco, mas a sombra projetada contém vários níveis de
transparência, variando de quase opaco a totalmente transparente.
Os vários níveis de transparência armazenados no PNG permitem que a sombra projetada se
misture perfeitamente com qualquer plano de fundo. Os prós e contras da transparência alfa
serão abordados na seção “Trabalhando com transparência” no Capítulo 24.
FIGURA 23-9. A transparência do

canal alfa permite vários níveis de
transparência, conforme mostrado na
sombra projetada ao redor do círculo laranja PNG.

Características adicionais
Existem alguns outros recursos que tornam o PNG um formato gráfico bastante bacana (veja o que eu fiz
lá?).
Correção de gama
Gama refere-se à configuração de brilho de um monitor. PNGs podem ser marcados com informações
sobre a configuração de gama do ambiente em que foram criados. Quando implementado na imagem
e no navegador, o PNG mantém o brilho e a intensidade de cor pretendidos.
Infelizmente, esse recurso não é suportado de forma consistente. Na verdade, as ferramentas de

otimização de imagem geralmente removem a parte do código que controla a gama.
De qualquer forma, com um suporte ruim do navegador para gama, nada é perdido, a não ser bytes
desnecessários.
Informações de perfil de cores incorporadas
NOTA O formato PNG também pode armazenar as informações do perfil de cores ICC do sistema em que foi
criado. Na verdade, se você achar que é difícil combinar um valor RGB em um PNG com o mesmo
O Safari agora suporta arquivos ICC color pro. Este
artigo sobre CSS Tricks de Chris Coyier fornece valor RGB em uma cor de fundo, o perfil de cores incorporado é o culpado. O bloco de código para
uma boa visão geral: css-tricks.com/color-rendering- armazenar perfis ICC geralmente também é descartado pelos otimizadores de imagem.
differ ence-firefox-vs-safari/.
Texto incorporado
PNGs também têm a capacidade de armazenar strings de texto. Isso é útil para anexar
permanentemente texto a uma imagem, como informações de direitos autorais ou uma descrição do
que está na imagem. Idealmente, as meta-informações no PNG seriam acessíveis clicando com o botão
direito do mouse no gráfico em um navegador, mas esse recurso nunca foi implementado.
Exibição progressiva (entrelaçamento)

PNGs animados
PNGs também podem ser codificados para exibição entrelaçada, revelando a imagem em uma série de
O formato APNG (PNG animado) é uma sete passagens, preenchendo a imagem horizontal e verticalmente.
extensão do PNG que adiciona a capacidade
O entrelaçamento aumenta o tamanho do arquivo e geralmente não é necessário, portanto, para manter
de animar quadros. Além de animações de 8
os arquivos tão pequenos quanto possível, desative a exibição do entrelaçamento. Estou descobrindo
bits, inclui suporte para imagens animadas de
24 bits com transparência alfa. O APNG é
que a maioria das ferramentas hoje em dia não oferece a opção de ativá-lo de qualquer maneira.
compatível com as versões atuais do Chrome e

as versões para desktop e dispositivos móveis Para concluir…
do Firefox, Safari e Opera. Nenhuma versão do
Internet Explorer ou MS Edge suporta APNG. Antes de prosseguirmos, aqui está o que você deve saber sobre PNGs:
• Se você tiver uma imagem bitmap com áreas de cores planas, com ou sem áreas transparentes, PNG-8
Uma vez que eles adicionam suporte e é o formato mais apropriado, pois provavelmente resultará no menor tamanho de arquivo.
as versões antigas caem em desuso, o APNG
certamente dará aos GIFs animados uma corrida
pelo seu dinheiro. • Se você precisar de níveis variáveis de transparência, independentemente do tipo de imagem, PNG-24
pode ser a única opção com base nas ferramentas com as quais você está trabalhando; no entanto, o
arquivo será menor como PNG-8.
• Se você tiver uma imagem fotográfica sem transparência, poderá usar PNG-24, mas JPEG quase sempre
resultará em um arquivo menor.

GIF do vovô
O arquivo GIF (Graphic Interchange Format) foi o primeiro formato de imagem suportado por navegadores
NOTA
da Web e, por um tempo, foi o único formato de arquivo que seria exibido em uma janela do navegador. (Eu
Você pode ver o GIF listado como “Compuserve GIF”
sei. Eu estava lá.) Embora não tenha sido projetado especificamente para a web, foi adotado por sua
porque a Compuserve inventou o formato. A patente
versatilidade, tamanho de arquivo pequeno e compatibilidade entre plataformas.
do GIF, de propriedade da Unisys, expirou em 2006.
Atualmente, GIF é sinônimo de “meme viral animado” e, como o único formato de imagem da Web bem
suportado capaz de animação, o formato GIF ainda tem um lugar na mesa (pelo menos até que o APNG e o
WebP animado tenham um suporte mais completo ). Para imagens estáticas, no entanto, o GIF perdeu
terreno para o formato PNG, que pode fazer tudo o que o GIF pode fazer e geralmente melhor. Além disso,
as ferramentas gráficas mais recentes estão simplesmente omitindo a opção de salvar arquivos em GIF para A compactação GIF armazena cores de pixel
repetitivas como uma única descrição.
mat. Nosso velho amigo GIF pode estar se aposentando. Tudo bem... nós apenas brigamos sobre como
pronunciá-lo de qualquer maneira.
“14 azul”
Dito isso, vamos ver rapidamente o que faz o GIF funcionar. Em uma imagem com gradações de cor, as
informações devem ser salvas para cada pixel da
linha. A descrição mais longa significa um tamanho
cor indexada de 8 bits de arquivo maior.
Assim como o PNG-8, o GIF é um formato de cor indexado de 8 bits. Você pode salvar um GIF em
profundidades de bits ainda menores, resultando em menos cores e tamanhos de arquivo menores. “1 azul, 1 aqua, 2 aqua claro...” (e assim por diante)
Compressão GIF FIGURA 23-10. Uma demonstração

simplificada do esquema de compressão LZW. O
A compactação GIF é sem perdas, embora algumas informações da imagem sejam perdidas quando a
que realmente acontece em termos técnicos é mais
imagem RGB é convertida em cores indexadas. Ele usa um esquema de compactação (chamado “LZW” para complicado, é claro, mas este exemplo fornece um
“Lempel-Ziv-Welch”) que aproveita a repetição nos dados. Quando encontra uma sequência de pixels de cor bom modelo mental.
idêntica, ele os compacta em uma descrição de dados (FIGURA 23-10). É por isso que imagens com grandes
áreas de cores planas condensam melhor do que imagens com texturas. O PNG usa um esquema de
compactação semelhante a cores.
Transparência
As imagens GIF usam transparência binária, na qual os pixels são totalmente opacos ou transparentes.
Entrelaçamento
O entrelaçamento faz uma exibição de GIF em uma série de passagens, como JPEGs progressivos.
Cada passagem é mais clara do que a passagem anterior, até que a imagem seja totalmente renderizada na
janela do navegador (FIGURA 23-11). Em uma conexão rápida, esses efeitos (entrelaçamento ou atrasos de
imagem) podem não ser perceptíveis. No entanto, em conexões lentas, o entrelaçamento de imagens
grandes pode ser uma maneira de fornecer uma dica da imagem que está por vir.
FIGURA 23-11. GIFs entrelaçados são

exibidos em uma série de passagens, cada
uma mais clara do que a passagem anterior.

Animação
Outro recurso embutido no formato de arquivo GIF é a capacidade de exibir animações simples (FIGURA
23-12). Muitos dos banners de anúncios giratórios, piscando, desbotados ou outros que você vê são
GIFs animados e certamente aparecem em seus feeds de mídia social.
FIGURA 23-12. Todos os quadros desta animação simples estão contidos em um arquivo GIF.
GIFs animados contêm vários quadros de animação , que são imagens separadas que, quando vistas
juntas rapidamente, dão a ilusão de movimento ou mudam ao longo do tempo, como um flipbook. Todos
os quadros são armazenados em um único arquivo GIF junto com as configurações que descrevem como
eles devem ser reproduzidos.
As configurações incluem se e quantas vezes a sequência se repete, quanto tempo cada quadro
permanece visível (atraso de quadro), a maneira como um quadro substitui outro (método de descarte),
se a imagem é transparente e se é entrelaçada.
Existem muitas ferramentas para criar GIFs animados (basta fazer uma busca rápida).
Muitos são aplicativos da web que você pode usar diretamente no navegador ou dispositivo móvel, e
muitos são gratuitos. Você também pode criar um GIF animado no Photoshop usando a janela Timeline
e clicando em Create Frame Animation.
O Desempenho WebP
Há um novo formato de imagem na cidade e está aqui para superar todos os outros formatos. O Google
FATO ENGRAÇADO chama seu formato WebP de código aberto de “o canivete suíço dos formatos de imagem”. Ele tem
praticamente todos os recursos que vimos em JPEG, PNG e GIF em tamanhos que normalmente são 25
WebP é um “projeto irmão” do formato de
vídeo WebM de código aberto. a 35% menores:
Compressão sem perdas ou com perdas
O WebP pode ser salvo em um formato com perdas (como JPEG) ou sem perdas (como PNG).
Seu esquema de compressão com perdas usa a mesma codificação usada no codec de vídeo VP8.
Transparência alfa
WebP tem um canal alfa para vários níveis de transparência, como PNG 24. A transparência alfa
pode ser usada com compressão de imagem sem perdas (tipo PNG) ou – e isso é especial –
compressão com perdas (tipo JPEG). É o único formato que pode combinar um canal RGB com
perdas com um

canal alfa sem perdas, resultando em um arquivo que é 60–70% menor que um PNG-24
da mesma imagem.
Animação
Também é possível animar imagens WebP. Desculpe GIF, lá se vai a sua vantagem.
Metadados
Assim como o PNG, o contêiner WebP pode armazenar metadados diretamente em seu código.
Perfil de cores
O contêiner WebP também pode incorporar informações de perfil de cores (ICC).
Apoiar
Aqui é onde chegamos à parte do “trombone triste” da história. Como o WebP é novo, ele
tem suporte a navegadores esparsos. Até o momento, ele é suportado apenas nos
navegadores Chrome, Android, Opera, Vivaldi e Samsung mais recentes. Mas isso não
significa que você não pode usá-lo! O desenvolvedor web moderno sabe que é uma boa
abordagem fornecer a melhor experiência (neste caso, a mais rápida) para navegadores
que podem lidar com isso e a próxima melhor coisa para o resto.
Você pode usar o Modernizr (abordado no Capítulo 19, Mais técnicas de CSS) para
detectar WebP em suas variedades com perdas, sem perdas, canal alfa e animadas. Você
também pode usar o elemento picture para entregar uma imagem .webp aos navegadores
que podem usá-la e um JPEG como substituto, como vimos no Capítulo 7:
<foto>
<source type="image/webp" srcset="pizza.webp">
<img src="pizza.jpg" alt="pizza">
</picture>
Também é comum que o servidor faça a chamada e entregue imagens WebP quando
detecta que o navegador as suporta (com base no “cabeçalho de codificação de aceitação”).
As soluções de back-end estão além do escopo desta discussão, mas é uma opção que
você deve conhecer.
Criando arquivos WebP

Assim como acontece com os navegadores, levará um tempo para que o WebP encontre
seu caminho nas ferramentas de criação de imagens. Você já pode criar arquivos WebP no
Sketch, Pixelmator e alguns outros programas gráficos. Você encontrará uma lista atual de
programas de suporte na página WebP Wikipedia (en.wikipedia.org/wiki/WebP). Há rumores
de que o suporte completo ao WebP será adicionado ao GIMP na versão 2.10, que ainda
não foi lançada até o momento.
Se você usa o Adobe Photoshop, há dois plug-ins que permitem salvar no formato WebP.
O primeiro, de Toby Thain, está em telegraphics.com.au/sw/product/
WebPFormat, e um mais recente de Brendan Bolles está disponível emgithub.com/
fnordware/AdobeWebM). Depois de instalar o plug-in, você verá WebP na lista de formatos
nos quais você pode salvar.

Finalmente, você também pode usar a ferramenta de linha de comando cwebp (veja, eles
não são apenas para codificadores!) para converter imagens PNG e JPEG para o formato
WebP. O comando dwebp correspondente converte WebP em PNG.
Onde aprender mais
WebP tem um site oficial em developers.google.com/speed/webp, onde você encontrará

documentação detalhada, uma explicação de seus esquemas de compressão, listas
atualizadas de ferramentas de suporte e navegadores (incluindo links para baixar os plug-ins
e comandos acima mencionados). ferramentas de linha) e uma galeria de amostras.
Definitivamente vale a pena ler se você gosta de descobrir formatos de imagem.
Vale a pena ficar de olho no WebP.
Escolhendo o melhor formato de bitmap

O primeiro passo para criar gráficos da Web de qualidade que mantenham a qualidade e
baixem rapidamente é escolher o formato certo. A TABELA 23-1 fornece um bom ponto de
partida. Devido ao fraco suporte para WebP no momento da redação deste artigo, vou ficar
com os formatos de bitmap suportados PNG, JPEG e GIF aqui.
Observe que o SVG deve ser sua primeira escolha para ilustrações e ícones com cores
planas. O SVG também pode resultar em arquivos menores para imagens com uma
combinação de cores planas e pequenas áreas de imagem de bitmap, gradientes ou efeitos
como sombras projetadas. Você aprenderá tudo sobre eles no Capítulo 25, mas, por
enquanto, a TABELA 23-1 deve ajudá-lo a classificar as opções de arquivo bitmap.
Isso conclui nossa exploração de formatos de imagem. Acho que fizemos o caminho mais
longo para dizer: “se for uma foto, use JPEG, e se for principalmente cores planas, use
PNG-8”, mas acho importante entender o porquê.
TABELA 23-1. Escolhendo o melhor formato de arquivo bitmap (raster)
Se a sua imagem... usar... Porque...
É gráfico, com cores planas PNG de 8 bits ou GIF PNG e GIF se destacam na compactação de cores planas.
É uma fotografia ou contém cor JPEG A compactação JPEG funciona melhor em imagens com cores misturadas. Por ter perdas,
graduada geralmente resulta em tamanhos de arquivo menores do que PNG de 24 bits.
É uma combinação de imagens PNG ou GIF de 8 bits Os formatos de cores indexados são os melhores para preservar e compactar áreas de
planas e fotográficas cores planas. A pixelização (dithering) que aparece nas áreas fotográficas como resultado
da redução a uma paleta geralmente não é problemática.
Requer transparência GIF ou PNG-8 Tanto o GIF quanto o PNG permitem ativar/desativar a transparência nas imagens.
Requer vários níveis de PNG-24 ou PNG-8 Somente PNG suporta vários níveis de transparência. PNG-24s com transparência alfa têm um
transparência tamanho de arquivo muito maior, mas é mais fácil encontrar ferramentas para criá-los. O
WebP também suporta transparência alfa e pode ser uma opção melhor, uma vez que é
melhor suportado.
Requer animação GIF GIF é o único formato suportado que pode conter quadros de animação.
APNG e WebP podem ser melhores opções no futuro.

Tamanho e resolução da imagem
TAMANHO E RESOLUÇÃO DA IMAGEM
Há um novo termo circulando para descrever as pessoas que projetam páginas da web e
aplicativos: designer de tela. Eu gosto disso. À medida que a web e os smartphones
evoluem, fica claro que os requisitos e as preocupações do design para telas são distintos
do design para impressão. Como web designer, você precisará ser bem versado em como
as imagens são exibidas nas telas, então vamos ampliar.
Uma coisa que as imagens GIF, JPEG, PNG e WebP têm em comum é que todas são
imagens bitmap (também chamadas de raster) . Ao aumentar o zoom em uma imagem
bitmap, você pode ver que ela é como um mosaico composto de muitos pixels (pequenos
quadrados de cor única). Eles são diferentes dos gráficos vetoriais que são compostos de
linhas suaves e áreas preenchidas, todos baseados em fórmulas matemáticas. A FIGURA
23-13 ilustra a diferença entre gráficos de bitmap e vetoriais.
DPI versus PPI

A resolução das imagens digitais é
medida em pixels por polegada (ppi).
Quando se trata de impressão, no
As imagens bitmap são compostas por uma Imagens vetoriais usam equações
entanto, as impressoras e as páginas
grade de pixels de várias cores, como um mosaico. matemáticas para definir formas.
impressas são medidas em pontos por
polegada (dpi), que descreve o número
FIGURA 23-13. Bitmap e gráficos vetoriais. de pontos impressos em cada

polegada da imagem. Quanto mais
pontos de tinta por polegada, mais nítida
será a imagem. O dpi da imagem impressa
Resolução de imagem pode ou não ser igual ao ppi da imagem digital.
Em suas viagens, você pode

Os programas de edição de imagem controlam quantos pixels uma imagem tem por
ouvir os termos “dpi” e “ppi” usados
polegada. Essa medida de pixel por polegada (ppi) é a resolução da imagem digital.
de forma intercambiável (embora
Quando uma imagem é impressa em papel, um ppi mais alto significa mais nitidez e incorretamente), mas agora você sabe a diferença.
qualidade porque há mais informações em cada polegada quadrada (consulte a barra
lateral “DPI versus PPI” ). No mundo da impressão, resoluções de imagem de 300ppi e
600ppi são comuns.
Na web, entretanto, a noção de “polegadas” é irrelevante porque o tamanho final de

exibição da imagem depende da resolução da tela na qual ela é exibida (FIGURA 23-14).
As imagens da
Web são medidas em número de
Se estamos jogando fora "polegadas", temos que jogar fora "pixels por polegada" também.
píxeis. A resolução (ppi)
A única coisa que sabemos com certeza é que o gráfico na FIGURA 23-14 tem 72 pixels
na qual eles são criados
de largura e terá o dobro da largura de um gráfico de 36 pixels.
não é importante.
Aqui está a conclusão: as imagens da web são medidas em número de pixels, e o ppi em
que são criadas é irrelevante.

72 ppp
72 pixels
A imagem aparece uma polegada

por uma polegada no monitor
de 72ppi.
1 polegada
100 ppp
A imagem aparece menor no

monitor de 100ppi.
FIGURA 23-14. Polegadas e, portanto, “pixels por polegada”, não são relevantes
para mídia digital, onde o tamanho de uma imagem depende da resolução da tela.
Dito isso, é a prática recomendada criar imagens em 72ppi se você estiver

projetando em um editor de imagens de bitmap como o Photoshop ou o GIMP. Este
é o padrão e mantém as imagens com aproximadamente o tamanho que aparecerão
em um monitor de desktop. Você pode criar suas imagens em um ppi diferente, mas
certifique-se de ser consistente para que as imagens não sejam redimensionadas
ao copiar e colar de um arquivo para outro.
Resolução da tela
As telas são compostas de pixels, então você também pode medir sua resolução
em pixels por polegada (ppi). Isso geralmente é chamado de densidade de pixels
NOTA da tela (consulte a Nota).
Você pode ver anúncios de telas com "uma Os primeiros computadores Macintosh tinham telas de 72ppi, o que é bastante
resolução de tela de 2560 × 1440", mas essa não é grosseiro para os padrões atuais. Os primeiros PCs usavam 96ppi. Atualmente, os
a "resolução", é a tela monitores de desktop e laptop padrão têm resoluções de cerca de 109 a 160ppi. Ao
dimensão. A resolução é uma medida de
longo dos anos, os fabricantes aumentaram a resolução dos monitores cada vez
densidade de pixels. mais, o que nos leva a...
Exibições de alta densidade
Da década de 1980 a 2010, podíamos contar com os pixels em nossas imagens

mapeando um a um com os pixels de hardware no monitor de desktop, conforme
mostrado na FIGURA 23-14. É claro que havia exceções – os navegadores podiam
ampliar ou diminuir as imagens sob comando, e as imagens eram reduzidas para
caber nas telas dos smartphones – mas essa era a regra geral.
Houve uma mudança sísmica em 2010, no entanto, quando a Apple lançou o iPhone
4 com sua tela Retina. A tela Retina comprimiu literalmente o dobro do número de
pixels no mesmo espaço físico da tela, resultando em imagens que

eram muito mais nítidas (lembre-se, quanto mais pixels por polegada, melhor a qualidade
da imagem). O outro lado disso, é claro, foi que as imagens bitmap que já estávamos
usando foram renderizadas com o dobro de pixels e acabaram ficando um pouco borradas
(FIGURA 23-15).
350 pixels
As imagens padrão da web parecem

confusas em monitores 2x. O PNG
tem 350 pixels de largura em um
elemento img definido como 350px de
largura.
largura: 350px;
700 pixels
As imagens ficam nítidas em telas

2x quando são criadas com o
dobro do tamanho final do layout.
Este PNG tem 700 pixels de largura

em uma img
elemento definido para 350px de largura.
largura: 350px;
FIGURA 23-15. Os gráficos típicos da web parecem um pouco pixel-y em uma tela 2x.
A tela Retina foi apenas o começo. Agora existem dispositivos Apple 2x e 3x (incluindo
tablets e laptops), e os dispositivos Android vêm com densidades de pixel padrão de 1,5x,
2x, 3x e até 4x. Como resultado, um pixel de dispositivo real é tão pequeno que imagens e
texto seriam ilegíveis se fossem mapeados um a um. O que fazer?!
Pixels de referência: PT e DP
Se você se lembrar de nossa discussão sobre imagens responsivas no Capítulo 7, você
se lembrará de que temos uma solução. Dispositivos de alta resolução usam uma medida
chamada pixel de referência que pode ser usada para fins de layout.
Os pixels de referência têm nomes diferentes e são calculados de forma ligeiramente
diferente dependendo do sistema operacional, mas eles nos permitem especificar tamanhos
de pixel sem nos prendermos às densidades de pixel.
A Apple chama seus pixels de referência de pontos (PT). Um ponto em uma tela 1x padrão
equivale a um pixel do dispositivo. Em uma tela 2x, um ponto é 2×2 pixels de dispositivo e
em telas 3x, um ponto é 3×3 pixels de dispositivo. Todos eles parecem do mesmo tamanho
porque os pixels de alta resolução são incrivelmente pequenos. O Android chama seus
pixels de referência de pixels independentes de dispositivo, ou DiP, ou simplesmente DP.
Eles são sempre iguais a um pixel a 160ppi, mas funcionam da mesma maneira.
Você provavelmente usaria mais os termos PT e DP ao projetar gráficos para serem usados
em aplicativos de smartphone nativos. Para a web, é suficiente fazer o

Estratégia de recursos de imagem
design de layout em pixels e unidades CSS relevantes. Por exemplo, você diria que a imagem
na FIGURA 23-15 tem uma largura de 350 pixels (referência) no layout, mesmo que o arquivo
de imagem em si tenha 700 pixels de largura para exibições 2x.
O Resultado
No final do dia, você pode continuar seu negócio criando imagens nas dimensões de pixel que
deseja para o layout. No entanto, para imagens importantes, você pode decidir que deseja que
elas pareçam o mais nítidas possível em telas de alta densidade. Nesse caso, você precisará
criar várias versões e entregá-las com marcação de imagem responsiva ou deixar o servidor
lidar com isso. Se você tiver uma foto de produto que aparece em 150×150 pixels em 1x,
precisará de pelo menos uma versão 2x (300×300) e talvez uma versão 3x (450×450), sabendo
que todas ocuparão 150 pixels de referência no layout.
LEITURA ADICIONAL
Para explicações muito mais detalhadas

No Capítulo 24, veremos ferramentas e técnicas para criar vários tamanhos de imagem
sobre resolução de imagem e tela,
recomendo estes artigos: destinados a telas de alta densidade. A marcação para entregar o tamanho de imagem certo
para o dispositivo certo é abordada no Capítulo 7.
• “Pixel Density, Desmistificado” por
Peter Nowell (medium.com/@
pnowelldesign/pixel-density
desmistificado-a4db63ba2922)
ESTRATÉGIA DE RECURSO DE IMAGEM
• “Guia do designer para DPI”, por
Sébastien Gabriel
Agora você sabe onde obter imagens, conhece as várias opções de formato da Web e tem uma
(sebastien-gabriel.com/designers guide-to-
noção da resolução da tela. Ao longo deste livro, você também conheceu os princípios
dpi/)
importantes de desempenho e Web Design responsivo. Vamos juntar todo esse know-how em
uma estratégia de abordagem da produção de imagem.
Como um web designer consciencioso preocupado em fornecer a melhor experiência em uma

ampla variedade de dispositivos, você deve ter estas prioridades em mente ao criar gráficos para
um site:
• Mantendo os tamanhos dos arquivos de imagens tão pequenos quanto possível
• Minimizando o número de solicitações HTTP para o servidor
• Não baixar mais dados de imagem do que o necessário para dispositivos com telas menores
• Entrega de imagens de alta qualidade para monitores de alta densidade
Pode ser útil abordar seus requisitos de imagem sistematicamente, descartando classes de
imagens e tarefas desnecessárias, para que você tenha um conjunto claro de opções de
produção. A FIGURA 23-16 diagrama uma série de perguntas que você pode usar para selecionar
suas opções de produção de imagem. Nesta seção, abordaremos cada etapa do processo em
um nível conceitual. No Capítulo 24, você experimentará técnicas específicas de produção de
imagens que atendem a esses objetivos.
Primeiro, vamos determinar se você precisa de uma imagem.

Eu preciso de uma imagem para

meu site
Crie-o com CSS e economize

PODE SER CRIADO
SIM a sobrecarga de um download de
SOMENTE COM CSS?
imagem.
Crie um SVG bem organizado e rotulado.

NÃO SIM Otimizar. Coloque inline (<svg>) ou com <object>.
O SVG SERÁ ESTILO

PODE SER UM SVG? Crie SVG. Otimizar. Coloque com <img>,
SIM OU SCRIPTED? NÃO
<object> ou inline (<svg>).
NÃO,
bitmap é melhor Considere um sistema de automação do lado do
OMG, SIM! servidor que cria e otimiza imagens em vários

tamanhos em tempo real.
VOCÊ PRECISA
VOCÊ TEM MUITAS
IMAGENS RESPONSIVAS? SIM
IMAGENS?
NÃO, não mais do Escolha o melhor formato de bitmap e aproveite

que posso as ferramentas para exportar vários tamanhos da
produzir mesma imagem de origem. Otimizar.
NÃO,
manualmente
tamanho único
Considere um sistema de
VOCÊ TEM MUITAS IMAGENS? SIM
automação de imagem do lado do servidor.
NÃO
Escolha o melhor formato de bitmap para

cada imagem. Otimizar.
FIGURA 23-16. Este fluxograma pode parecer um pouco maluco, mas destina-se a
ajudá-lo a restringir as opções de produção de ativos de imagem. É a base da discussão
nesta seção.

Pode ser feito com CSS?

Antes de lançar o Photoshop, considere se você pode alcançar o que deseja apenas
com CSS. Não apenas o efeito será uma fração do tamanho do arquivo, mas você
também evitará outra chamada para o servidor.
Efeitos como cantos arredondados e gradientes que antes exigiam imagens agora
podem ser obtidos com propriedades CSS (border-radius e radial-gradient/linear
gradient, respectivamente).
Também é possível fazer pequenos desenhos com CSS, que podem ser úteis no
lugar de ícones (FIGURA 23-17). Formas básicas como círculos, retângulos,
triângulos e muito mais podem ser criadas com elementos div vazios e alguns
truques com bordas e transformações. Algumas pessoas criaram ilustrações
incrivelmente complexas usando HTML e CSS, mas a técnica, que teve seu auge
por volta de 2010-11, é principalmente para fins de demonstração e não para
produção séria.
Não quero me afastar muito da produção de imagens neste capítulo, então deixarei
você com estes artigos, onde você pode aprender mais sobre formas e ilustrações
CSS:
• “The Shapes of CSS”, uma galeria de formas CSS de um elemento com o código
usado para criá-las, compilado por Chris Coyier: css-tricks.com/examples/
Formas de CSS/
• “Guia para iniciantes para imagens CSS puras”, um tutorial passo a passo de
Michael Mangialardi para criar o coala na FIGURA 23-17: medium.com/
coding-artist/a-beginners-guide-to-pure-css-images-ef9a5d069dd2
• Uma coleção de “desenhos não tão semânticos feitos com CSS”, no Codepen,
coletados por Hugo Giraudel: codepen.io/collection/kFeDz/3/
Se você precisa de algo mais complexo do que um efeito CSS, é hora de pensar
em formatos de imagem.
Formas por Chris Coyier Coala por Michael Mangialardi Cheesecake de Sasha Tran
css-tricks.com/examples/ShapesOfCSS/ codepen.io/mikemang/pen/oYMePj codepen.io/sashatran/pen/ggGeZr
FIGURA 23-17. Esses pequenos desenhos são criados apenas com marcação HTML e CSS.

Pode ser um SVG?

Se sua imagem for um logotipo, ícone ou outra ilustração, criá-la em uma ferramenta de
desenho vetorial e salvá-la como SVG oferece os benefícios de tamanho de arquivo pequeno
e independência de resolução. Agora que o suporte ao navegador é confiável, é uma boa
solução para lidar com a variedade de dispositivos e monitores para os quais precisamos projetar.
Se você colocar o código SVG embutido, com o elemento svg , você salvará outra solicitação
HTTP e ganhará a capacidade de estilizar e criar scripts nos elementos. Ou, se uma ilustração
estática for tudo o que você precisa, incorporar o SVG no documento com o elemento img é
uma opção perfeita.
No Capítulo 25, você fará uma longa jornada pelo formato SVG, então não direi muito mais
aqui além do fato de que o SVG deve ser sua primeira escolha se você puder criar a imagem
ou ilustração em formato vetorial.
Se o SVG não for apropriado para seu tipo de imagem ou se seu público-alvo for conhecido
por usar navegadores não compatíveis em números significativos, talvez seja necessário
usar um formato de bitmap. Ainda há algumas coisas a considerar.
Qual é o melhor formato de bitmap?

O formato da imagem tem um grande impacto no tamanho do arquivo, portanto, escolher o
formato mais apropriado para sua imagem é um passo importante para otimizar as imagens.
Como aprendemos, o PNG-8 é a melhor opção para imagens com áreas de cores planas e o
JPEG é o melhor formato para imagens fotográficas. No Capítulo 24, mostrarei como salvar
imagens em vários formatos e você verá como o formato afeta o tamanho do arquivo em
primeira mão.
Considere também salvar a imagem no formato WebP muito menor e usar o elemento picture
para entregá-la aos navegadores que podem renderizá-la (consulte a seção “Marcação de
imagem responsiva” no Capítulo 7, para obter detalhes). Ele ajuda a acelerar as coisas em
navegadores compatíveis e fornece um backup confiável de JPEG ou PNG para os outros.
Com o formato decidido, é hora de começar a pensar em quantas versões de cada imagem
você precisa criar.
Seu layout requer imagens responsivas?

A próxima coisa a considerar é se o seu layout requer imagens responsivas.
Não, tamanho único

Algumas páginas, como páginas com muito texto e ilustrações pequenas, podem funcionar
bem com apenas uma versão de cada imagem que atende a todos os tamanhos de tela. Se
for esse o caso, salve ou exporte sua imagem no formato de arquivo mais apropriado e está
quase pronto. O passo final é otimizar a imagem para torná-la tão pequena quanto possível.
As técnicas de otimização são discutidas em detalhes no Capítulo 24.

Sim, preciso que cada imagem seja salva em vários tamanhos
Seu layout responsivo pode exigir que você aproveite as técnicas de imagem responsiva que descrevemos no
Capítulo 7. Para recapitular, “imagens responsivas” se refere ao processo de fornecer imagens adaptadas ao
ambiente de visualização do usuário. Isso inclui impedir que navegadores em telas pequenas baixem mais dados
de imagem do que precisam, além de fornecer imagens grandes o suficiente para parecerem nítidas em telas de
alta densidade. Você também pode fornecer versões alternativas da imagem com base no conteúdo (chamado
cenário de “direção de arte”) ou para aproveitar os formatos mais recentes, como WebP.
Se você está seguindo o caminho das imagens responsivas, as coisas começam a ficar interessantes.
Seu site tem muitas imagens?
Sim, meu site tem muitas imagens (Dica: Automatize!)
Embora seja ótimo ter uma solução HTML para obter as imagens certas para os navegadores certos, o sistema
atual é um pouco complicado com pilhas de código e a necessidade de produzir várias imagens. Se você trabalha
em um site grande e com muitas imagens, ele pode se tornar incontrolável. O processamento de imagens é uma
tarefa que implora para ser automatizada. A solução: deixe o servidor fazer isso!
Felizmente, existem muitas ferramentas e serviços, tanto de código aberto quanto pagos, que permitem que o
servidor faça o trabalho de criar versões de imagem apropriadas em tempo real. Você carrega a imagem com a
mais alta qualidade e o maior tamanho necessário e deixa o servidor cuidar do resto — não há necessidade de
criar e armazenar várias versões de cada imagem. Alguns serviços vão além do simples redimensionamento,
incluindo a capacidade de cortar imagens de forma inteligente, adicionar efeitos especiais como tons de sépia ou
transformar imagens em tempo real.
Alguns sistemas de gerenciamento de conteúdo possuem recursos de redimensionamento de imagem integrados.
Outra opção é instalar um software ou um script de código aberto (como Glide, glide.thephpleague.com) em seu
próprio servidor. Tenha em mente, no entanto, que exigir que o JavaScript esteja em execução não é o ideal.
Também existem soluções de terceiros que fornecem serviços de redimensionamento de imagem (como
Cloudinary.com, Akamai.com ou Kraken.io ), mediante o pagamento de uma taxa. Para sites grandes e com
imagens pesadas, vale a pena dar uma olhada.
Para obter mais informações, leia “Serviços de redimensionamento de imagem” de Jason Grigsby da Cloud Four
(cloudfour.com/thinks/image-resizing-services/). Ele mantém uma lista de serviços de imagem atuais, que você
pode encontrar no link do artigo.
Não, posso lidar com imagens manualmente
Se o seu site tiver um número razoável de imagens atualizadas em um cronograma razoável, você poderá
produzi-las manualmente em seu computador e carregá-las no servidor. A boa notícia é que há uma enorme
quantidade de novas ferramentas projetadas especialmente para oferecer suporte ao recurso de imagem da Web

Favicons
processo de produção, incluindo maneiras de criar várias versões de uma só vez e otimizá-las em
lotes. Mesmo nosso antigo suporte, o Adobe Photoshop, está evoluindo para melhor atender às
necessidades dos produtores de imagens da web. Veremos essas ferramentas no capítulo seguinte.
FAVICONS
Já que estamos falando de imagens, há uma última imagem relacionada ao site para cobrir: o favicon.
Um favicon é o pequeno ícone que aparece à esquerda do título da página na guia do navegador e
nas listas de favoritos (FIGURA 23-18). Introduzido pela primeira vez como um recurso do Internet
Explorer 5 em 1999, os favicons foram rapidamente adotados por outros navegadores. Os favicons
não são obrigatórios, mas ajudam os usuários a identificar e encontrar seu site em uma longa lista de
guias ou favoritos. Eles são um pouco de atenção aos detalhes que podem fortalecer sua marca.
FIGURA 23-18. Favicons para Adobe.com, W3C.org e Firefox.com nas guias do navegador
(exibidas no Firefox).
Outros dispositivos habilitados para web usam ícones associados ao site que são semelhantes aos
favoritos. Por exemplo, Apple iPhone e iPad representam sites ou aplicativos da web com um ícone
(chamado de ícone de toque) quando você os salva na tela inicial. Os ícones do site também são
usados pelos blocos do Microsoft Metro, GoogleTV e outros sistemas.
Esta seção apresenta o que é necessário para criar um favicon básico da área de trabalho, bem
como um conjunto completo de ícones que cobre todas as bases. Também veremos uma ferramenta
que faz todo o trabalho repetitivo para você.
Favicons de navegadores à moda antiga
Para navegadores de desktop, o processo padrão de favicon é fácil:
1. Salve seu ícone no formato ICO e nomeie-o como favicon.ico.
2. Coloque esse arquivo no diretório raiz do site, onde os navegadores sabem procurar
por isso.
3. Não há terceiro passo. É isso!
Este é o método suportado pela maioria dos navegadores e o único método favi con suportado pelo
Internet Explorer 10 e versões anteriores.
Há algumas coisas importantes a saber sobre o próprio arquivo favicon.ico .

Os favicons devem ser criados em 16×16 pixels com uma versão adicional de 32×32 pixels para
exibição nítida em dispositivos de tela Retina. A boa notícia é que você

Favicons
precisa apenas de um arquivo favicon.ico porque o formato ICO é capaz de armazenar várias
imagens em um único arquivo. A má notícia é que a maioria das ferramentas gráficas, incluindo
o Adobe Photoshop, não pode salvar imagens no formato ICO, então você precisa usar uma
ferramenta de conversão que receba PNG ou JPEG e exiba ICO. Existem vários conversores de
ICO gratuitos de arrastar e soltar online, como icoconverter.com
e convertico. com. Se você estiver em um Mac e quiser uma ferramenta de conversão mais
completa, confira o Icon Slate da Kodlian (www.kodlian.com/apps/icon-slate) disponível na App
Store por US$ 5.
Como mencionado anteriormente, uma vez que você tenha seu arquivo favicon.ico , basta colocá-
lo no diretório raiz do site ao lado de index.html, e o navegador o encontrará automaticamente.
Não há necessidade de adicionar qualquer marcação nos arquivos.
Conjunto completo de favicon
Você pode decidir ir além e criar um conjunto de favicon completo para representar seu site em
Efeitos de ícone do iOS outros dispositivos. Você pode salvar esses ícones no bom e velho formato PNG e até incluir
áreas transparentes, então é um processo mais familiar.
Por padrão, o iOS adiciona efeitos visuais ao
seu arquivo de ícone para que ele corresponda Quando seus ícones estão no formato PNG, você deve vinculá-los aos seus arquivos com o
ao estilo de outros ícones na tela inicial:
elemento link na marcação, como neste exemplo que adiciona um ícone de toque para o iPhone
• Cantos arredondados
com tela Retina (veja a barra lateral “iOS Icon Effects”):
• Sombra projetada <link rel="apple-touch-icon-precomposed" tamanhos="120x120"
• Um efeito de reflexo “brilhante” href="apple-touch-icon-120x120.png">
Se você gosta do seu ícone do jeito que
A TABELA 23-2 lista a maioria dos tamanhos de ícone padrão no momento da redação deste artigo.
está e deseja desativar os efeitos especiais,
diga ao iOS que o ícone é “pré-composto”
definindo o valor de rel para apple touch-icon- TABELA 23-2. Tamanhos de favicon padrão mais populares
precomposed conforme mostrado em o
Tamanho (em pixels) Objetivo
exemplo. Se você quiser tirar proveito desses
efeitos, defina rel para simplesmente apple-
32×32 Padrão para a maioria dos navegadores de desktop
touch-icon.
57×57 Tela padrão do iOS (iPod Touch, iPhone de primeira geração)
76×76 ícone da tela inicial do iPad
96×96 ícone do GoogleTV
120×120 iPhone Retina
128×128 Loja online do Chrome
144×144 Bloco IE10 Metro para site fixado
152×152 ícone de toque do iPad; Ícone do Android (reduzido automaticamente conforme
necessário)
167×167 ícone de toque da retina do iPad
180×180 iPhone 6 mais
196×196 Tela inicial do Chrome para Android
228×228 Ícone da Costa da Ópera

Favicons
Criação de ícones
Para o controle final sobre a qualidade do ícone, é melhor criar seus ícones manualmente.
Todo mundo tem seu próprio processo, mas geralmente é recomendado começar com um original FERRAMENTA LEGAL
baseado em vetor e exportar para os tamanhos necessários. Se você começar com uma imagem
Se você quiser usar apenas a letra
mapeada por bits, reduza em incrementos e verifique a qualidade em cada etapa.
inicial do nome do seu site como favicon,
Favicon.io é uma ferramenta online legal
Para ícones muito pequenos (quadrado de 32 e especialmente de 16 pixels), você provavelmente
que gera ícones com base em suas seleções
precisará fazer alguns ajustes de pixel por pixel para obter o melhor resultado. Se o seu logotipo
de caracteres, fontes e cores.
for complicado, considere usar apenas um detalhe distinto, como faz a O'Reilly Media (FIGURA
23-19).
LEITURA ADICIONAL
Com um conversor PNG para ICO e
ferramenta geradora de favicon, agora você

tem um kit de ferramentas básico para criar
FIGURA 23-19. A O'Reilly Media usa um detalhe de seu logotipo em seu favicon.
conjuntos completos de favicon. No entanto,
você pode querer ler os detalhes mais sutis
Para obter excelentes conselhos sobre como criar ícones em geral, recomendo vivamente o The
que não consegui incluir aqui. o
Icon Handbook (Five Simple Steps), do especialista em ícones John Hicks.
a seguir estão alguns recursos que achei
John compartilha seus truques para um design de ícones eficaz e como manter a melhor úteis:
qualidade em tamanhos pequenos. • “O Guia de 2017 para FavIcons para
Quase todos e todos e todos os

Se criar manualmente todos os seus ícones parece um fardo, uma opção mais fácil é usar um
navegadores”, de Emerge
gerador de favicon que cria todos os ícones de um original e também gera todo o código Interativo
necessário. Existem alguns deles por aí, mas um que eu gosto é o Favic-o-matic (www.emergeinteractive.com/
(www.favicomatic.com) mostrado na FIGURA 23-20. insights/detalhes/Os-Essentials-of
Basta fazer o upload de um PNG maior que 300px quadrado e a ferramenta faz o resto. FavIcons-in-2017)
• “Como fazer um favicon” por Nick
Pettit na casa da árvore
(blog.teamtreehouse.com/how
to-make-a-favicon)
• A entrada Favicon na Wikipedia
(en.wikipedia.org/wiki/Favicon)
FIGURA 23-20. O favicon Favic-o-matic e gerador de código.

Resumindo Imagens
RESUMINDO IMAGENS
Nós cobrimos muito terreno neste capítulo. Se eu fiz meu trabalho, agora você deve ter
uma boa base em gráficos da web, incluindo onde encontrar uma imagem e em qual
formato de arquivo salvá-la. Você sabe sobre resolução de imagem e resolução de tela,
incluindo trabalhar com telas de alta densidade . Você também tem uma estratégia para
identificar seus requisitos de imagem para reduzir a ampla gama de opções. E, claro, você
sabe o que é preciso para adicionar um favicon ao seu site.
No próximo capítulo, você terá experiência prática na criação e otimização de imagens da

Web à medida que exploramos os detalhes do processo de produção. Mas primeiro, um
pequeno teste.
TESTE-SE
Responda às seguintes perguntas para ver se você tem uma visão geral dos gráficos da
web. As respostas aparecem no Apêndice A.
1. Qual é a principal vantagem de usar imagens com direitos gerenciados?
2. O que significa “ppi”?
3. O que é “cor indexada”? Quais formatos de arquivo usam?
4. Quantas cores existem na tabela de cores para uma imagem de 8 bits? Se você gosta
de matemática, descubra o número máximo de cores em uma imagem de 5 bits.
5. Cite duas coisas que você pode fazer com um GIF que não pode fazer com um JPEG.
6. Cite uma coisa que você pode fazer com um GIF que não pode fazer com um PNG.

Teste-se
7. Cite uma coisa que você pode fazer com um PNG que não pode fazer com um GIF.
8. A compactação com perdas do JPEG é cumulativa. O que isso significa? Por que é importante
saber?
9. Qual é a diferença entre transparência binária e alfa?
10. Escolha o melhor formato de arquivo bitmap para cada uma das imagens na FIGURA 23-21.
Você deve ser capaz de tomar a decisão apenas olhando as imagens impressas aqui e
explicando sua escolha. Algumas imagens podem ter mais de uma opção.
UMA
B E
FIGURA 23-21. Escolha o melhor formato de arquivo para cada imagem.

CAPÍTULO
24
No capítulo anterior, você aprendeu muito sobre imagens, mas agora vamos nos concentrar em NESTE CAPÍTULO
criá -las. Como as imagens geralmente representam 60 a 70% dos dados na Web, é fundamental
Selecionando formatos de arquivo
abordar a criação de imagens com cuidado, pensando em requisitos de design e desempenho
da web ao exportar
responsivos. Mais uma vez, trabalharemos com formatos de bitmap: JPEG, PNG e GIF. O SVG
tem um conjunto diferente de considerações e recebeu o próximo capítulo só para ele. Transparência binária e alfa
Este capítulo é sobre pixel-push! Produzindo imagens responsivas
Você terá a chance de salvar ou exportar imagens em vários formatos de bitmap e criar uma Ferramentas e técnicas de
imagem com áreas transparentes. Você aprenderá alguns atalhos para criar várias versões de otimização de imagem
uma imagem de uma só vez para layouts responsivos e telas de alta densidade. Por fim, você
aprenderá algumas ferramentas e técnicas de otimização para tornar seus arquivos de imagem
tão pequenos quanto possível.
Vamos começar com as tarefas mais básicas de produção de imagens, salvando uma imagem
em um formato apropriado para a web.
SALVAR IMAGENS EM FORMATO WEB

Vamos nos aprofundar no salvamento de imagens da Web no Photoshop CC e no GIMP. Você
pode estar pensando: “Por que apenas esses dois?” Eu escrevi uma pequena barra lateral, “Por
que apenas Photoshop e GIMP?” explicar. Se você usar uma das dezenas de outros editores
de imagem, o processo e a terminologia provavelmente serão semelhantes aos descritos aqui.
Na maioria dos programas, você pode contar com as opções de JPEG e PNG (se houver apenas
uma opção de PNG, é PNG-24) ao Salvar ou Exportar o gráfico final. GIF está disponível em
programas mais estabelecidos como Photoshop, GIMP e PaintShop Pro; e o WebP está
começando a aparecer.
671
Salvando Imagens em Formatos da Web
Esta seção aborda o processo de salvar ou exportar imagens passo a passo para aqueles que podem não
estar familiarizados com o uso de ferramentas gráficas. Se você já é bastante habilidoso com editores de
imagem, isso pode ser uma revisão, ou você pode pular direto para o EXERCÍCIO 24-1.
Por que apenas

Photoshop e GIMP?
Existem dezenas de programas para Adobe Photoshop CC

criar imagens. Neste capítulo, vou me
Existem várias maneiras de salvar gráficos em formatos apropriados para a Web em
ater ao Adobe Photoshop CC e ao GIMP
Photoshop:
nos exemplos porque sinto que eles
representam os extremos do espectro
Exportar como
de compromisso. Mais importante ainda,
ambos estão disponíveis para macOS e O método recomendado e mais simplificado é usar a função Exportar como, seja no menu Arquivo ÿ
Windows, e você pode obter cópias para
Exportar ÿ Exportar como , ou clicando com o botão direito (clique pressionando a tecla Control em um
trabalhar gratuitamente.
Mac) em uma camada para exportar seu conteúdo (FIGURA 24-1, A ). A partir daí, você obtém uma
caixa de diálogo com uma visualização de imagem e um menu pop-up Configurações de arquivo para
Em uma extremidade do espectro,
selecionar o formato JPEG, PNG, GIF ou SVG B. Ao usar Exportar como, o Photoshop usa opções de
o Photoshop é o programa de edição
de imagens mais popular para compactação agressivas para fornecer o menor arquivo Tamanho.
profissionais de design, mas é caro,

disponível por meio de uma taxa de
A caixa de diálogo Exportar como inclui opções específicas de formato com uma visualização da imagem
assinatura mensal como parte do conjunto
de produtos Adobe Creative Cloud. Você conforme ela aparece com as configurações aplicadas.
pode baixar uma versão de avaliação gratuita em www.
— Para JPEG C, você pode definir o nível de qualidade (qualidade mais alta é igual a maior
adobe.com/creativecloud/catalog/
arquivos).
desktop.html se quiser trabalhar junto
com os exercícios.
— Para PNG D, você pode optar por preservar áreas transparentes na imagem para que bordas e
Por outro lado, o GIMP (GNU Image
sombras suaves se misturem com o plano de fundo. Por padrão, o Photoshop exporta arquivos
Manipulation Program) é um editor de
PNG-24, mas você pode selecionar “Arquivo menor (8 bits)” para exportar como PNG-8,
imagens de código aberto com muitos dos
mesmos recursos do Photoshop e é preservando vários níveis de transparência.
totalmente gratuito! Tipo, para sempre – não

apenas um julgamento limitado. Faça o download em gimp.org.
— Para GIF E, você não tem opções. Acho que essa é a maneira da Adobe dizer que você está muito
melhor com PNG.
A caixa de diálogo Export As B também oferece a opção de redimensionar a imagem.

Isso é útil para manter um original em tamanho real ao exportar cópias dimensionadas para diferentes
Converter para sRGB? SIM! layouts.
Salvar como
Na caixa de diálogo Export As do
Photoshop, na parte inferior em Color
Você também pode usar Arquivo ÿ Salvar como para salvar o arquivo em que está trabalhando em um
Space, você encontrará a opção Convert to
novo formato (você verá os formatos amigáveis à web na longa lista de opções).
sRGB. Você definitivamente deseja
Você geralmente terá mais algumas opções com Salvar como, como a capacidade de ativar o
selecionar essa opção porque essa é a
codificação de cores que a web usa. A entrelaçamento e selecionar uma paleta para GIFs e fazer um JPEG progressivo, mas perderá a
Adobe tem seu próprio espaço de cores compactação extra. E é muita compressão. Dependendo da imagem e do tipo de arquivo, uma imagem
RGB expandido, portanto, você obterá Salva como pode ser 10 vezes maior do que sua contraparte exportada.
resultados imprevisíveis se não converter
para sRGB primeiro.

UMA B C
FIGURA 24-1. Selecionando um tipo de arquivo na caixa de diálogo Export As do Photoshop.
Salvar para a Web (legado)
A função Salvar para a Web do Photoshop fornece configurações para otimizar manualmente
o tamanho de um arquivo enquanto observa a imagem resultante em uma janela de
visualização e até compara até quatro configurações por vez. Para GIF e PNG-8, você pode
reduzir o número de cores (a profundidade de bits), reduzir o pontilhamento e ativar o
entrelaçamento, entre outras configurações. Para JPEG, você pode escolher a qualidade,
torná-la progressiva ou otimizada ou aplicar uma pequena quantidade de desfoque à imagem
para reduzir o tamanho do arquivo.
A Adobe marcou a função Salvar para a Web como “herdada” a partir de 2014, e ela
desaparecerá completamente em versões futuras sem substitutos para muitas das
configurações. Mas o fato é que existem ferramentas disponíveis agora que atingem a
mesma quantidade de compressão sem todo o trabalho manual. Se você tiver acesso a uma
versão mais antiga do Photoshop, experimente, mas não se apegue demais (como eu!).
GIMP
No GIMP, os arquivos de trabalho estão sempre no formato XCF nativo do GIMP. A partir daí,
você precisa escolher Arquivo ÿ Exportar como para selecionar o formato do arquivo. A maneira
mais rápida de obter o formato desejado é digitar .jpg, .png ou .gif no final do nome do arquivo
no campo Nome. Por exemplo, digitar “name.png” aciona o GIMP para exportar esse arquivo no
formato PNG. Alternativamente, você pode selecionar um tipo de arquivo da lista de opções no
menu Select File Type (mostrado na FIGURA 24-2, A).
Depois de pressionar o botão Exportar, você obtém uma caixa de diálogo com as configurações
apropriadas para o formato escolhido.
24. Produção de Ativos de Imagem 673

• Para PNG B, desmarque todas as opções, pois muitas delas armazenam metadados
desnecessários no arquivo e outras são de uso limitado ao exportar um arquivo em
camadas. Você pode optar por fazer a imagem entrelaçada.
• Para GIF C, você pode entrelaçar a imagem e incorporar um comentário.

Você também pode salvá-lo como uma animação se suas camadas estiverem configuradas dessa maneira.
• Para JPEG D, você pode jogar com a configuração de Qualidade, com a opção de
visualizar a qualidade resultante, bem como o tamanho do arquivo em uma janela de
imagem (recomendado). Em Opções avançadas, você pode otimizar o JPEG, torná-lo
progressivo e aplicar um leve desfoque (suavização) para reduzir o tamanho do arquivo.
Em Subsampling, o 4:4:4 (melhor qualidade) é uma boa escolha, especialmente se sua
imagem tiver áreas de cores planas, embora 4:2:2 produza arquivos menores.
Você pode ver os resultados dessas configurações na janela de imagem.
UMA B C
FIGURA 24-2. Selecionando seu formato de arquivo no GIMP.
Por que você não experimenta essa criação de imagens da web no EXERCÍCIO 24-1?
Você verá que o formato escolhido afeta muito o tamanho do arquivo. Se você tiver o
Photoshop ou o GIMP, poderá seguir as instruções listadas, mas se não tiver, há uma boa
chance de que qualquer ferramenta de criação de imagem que você tenha tenha opções
semelhantes de salvar ou exportar. Lembre-se de que você pode baixar uma avaliação
gratuita do Photoshop e o GIMP é sempre gratuito.
Isso cuida da saída básica da imagem da Web. Após o exercício, voltaremos nossa atenção
para um dos principais recursos das imagens da Web com os quais você certamente
desejará se tornar útil: transparência.

EXERCÍCIO 24-1. Formatos e tamanho do arquivo
Neste exercício, veremos o efeito que o formato da imagem tem no tamanho do arquivo exportando duas imagens
em vários formatos e comparando os tamanhos dos arquivos. Forneci dois arquivos de imagem com os materiais para
Trabalhar no modo RGB
este capítulo (FIGURA 24-3), mas você também pode experimentar
seu próprio. Independentemente do formato final do
seu arquivo, você deve sempre fazer seu
trabalho de edição de imagem no modo RGB
barcos.png asian.png
(escala de cinza é bom para imagens não
coloridas). Para verificar o modo de cor da
imagem no Photoshop ou GIMP, selecione
Imagem ÿ Modo e verifique se há uma marca
de seleção ao lado de RGB
Cor.
Os arquivos JPEG e PNG-24 comprimem a

imagem colorida RGB diretamente. Se você
estiver salvando o arquivo como GIF ou PNG-8,
a imagem RGB deverá ser convertida para o
modo de cores indexadas, manualmente ou
como parte do processo de exportação.
FIGURA 24-3. Exporte essas imagens em vários formatos para ver como cada uma afeta o tamanho Cor indexada
do arquivo. Se você precisar editar um GIF ou PNG-8
existente, converta a imagem em RGB como
1. Primeiro, abra boats.png no programa de sua escolha e exporte-o em formato JPEG. Se o seu editor de imagens
a primeira etapa antes de editar. Isso permite
não tiver uma função de exportação, talvez seja necessário fazer um Salvar como. Certifique-se de sempre
que a ferramenta de edição use cores do
começar com a imagem original ao longo deste exercício.
espectro RGB completo ao ajustar a imagem.
Se você estiver usando o Photoshop ou o GIMP, deslize o controle deslizante Qualidade de 100% até 0% e Se você redimensionar a imagem colorida
preste atenção em como a qualidade da imagem muda na visualização ou na janela da imagem. Anote os indexada original, obterá resultados ruins porque
tamanhos dos arquivos com 100%, 60% e 10% de qualidade. Salve o JPEG final com 60% de qualidade. a nova imagem está limitada às cores da tabela
de cores existente.
Como alternativa, se você não tiver uma visualização em sua ferramenta, poderá exportar três JPEGs
separados com a qualidade definida para 100%, 60% e 10%. Abra as imagens em sua ferramenta de imagem ou
em uma janela do navegador para verificar a qualidade e use o Finder ou o Explorador de Arquivos para verificar CMYK
o tamanho do arquivo resultante. Se você tem experiência na criação de
gráficos para impressão, pode estar
2. Agora exporte a imagem colorida novamente como PNG-24 (no Photoshop, não selecione a imagem de 8 bits
opção). acostumado a trabalhar no modo CMYK
(as cores impressas são compostas de tinta
3. Finalmente, converta a imagem para cor indexada (Imagem ÿ Modo ÿ Indexado) e selecione 256 cores. Exporte
ciano, magenta, amarelo e preto). O modo
a imagem como PNG-8 (no Photoshop, selecione “Arquivo menor (8 bits)”; o GIMP salva automaticamente as
CMYK é irrelevante e inadequado para gráficos
imagens coloridas indexadas como PNG-8. Enquanto o original ainda está no modo de cores indexadas, exporte
da Web, portanto, converta para o modo RGB
novamente no formato GIF. Quando terminar, você pode reverter a imagem para a cor RGB ou fechá-la sem salvar. no
início da edição de imagem

4. Vamos ver o que temos! Aqui estão os tamanhos de arquivo resultantes para as imagens de barcos que obtive processo.
no Photoshop e no GIMP. Observe que os tamanhos dos arquivos diferem dependendo da ferramenta devido
aos algoritmos de compactação usados. O seu provavelmente será diferente desses, mas no estádio geral.
Ferramenta JPEG (100) JPEG (60) JPEG (10) PNG-24 PNG-8 GIF
PhotoshopCC 130,3 KB 33,1 KB 9,2 KB 221 KB 67,6 KB 74,1 KB
GIMP 179 KB 20,9 KB 7,4 KB 225 KB 73,7 KB 80,3 KB ÿ

Trabalhando com transparência
Conclusão: O melhor formato para a imagem dos barcos é o JPEG, e uma qualidade em torno de 60
oferece o melhor equilíbrio entre qualidade de imagem e tamanho de arquivo pequeno. As versões
PNG-8 e GIF são duas vezes maiores e parecem muito ruins. Claro, “qualidade” é subjetiva. Você pode
decidir que uma imagem é tão importante que a qualidade 100% original vale o tempo extra de download,
mas geralmente você pode eliminar muitos bytes de uma imagem mantendo a qualidade aceitável.
5. OK, agora vamos repetir todos os passos anteriores, desta vez usando o asian.png
imagem. Exporte a imagem original como JPEG em várias configurações (ou apenas faça anotações sobre
o tamanho do arquivo com base na visualização) e como PNG-24. Ao converter a imagem em cores
indexadas, brinque com o número de cores para ver quantas cores você consegue.
A imagem ainda lê bem com 128 cores? 64? 32?
Eu realmente fui em frente e reduzi a paleta para 32 cores e depois exportei como PNG-8 e GIF. Aqui
estão meus resultados:
PNG-8 GIF
Ferramenta JPEG (100) JPEG (60) JPEG (10) PNG-24 (32 cores) (32 cores)
PhotoshopCC 22,7 KB 8,7 KB 3,3 KB 14,8 KB 4,2 KB 4,3 KB
GIMP 27,3 KB 6,8 KB 3,3 KB 14,5 KB 3,3 KB 3,8 KB
Conclusão: Para a imagem asiática , o PNG-8 com paleta de cores reduzida é o vencedor.
Claro, o tamanho do arquivo JPEG de 10% é menor, mas a qualidade é desastrosa! O PNG-8 oferece o
menor tamanho de arquivo, mantendo as cores planas livres de artefatos.
TRABALHANDO COM TRANSPARÊNCIA
Os formatos GIF e PNG permitem que partes de uma imagem sejam transparentes,
para que a cor de fundo ou a imagem apareçam. Nesta seção, examinaremos mais
detalhadamente os gráficos transparentes, incluindo dicas sobre como fazê-los.
Lembre-se que existem dois tipos de transparência. Na transparência binária, os pixels

são totalmente transparentes ou totalmente opacos, como uma chave liga/desliga.
Os arquivos GIF e PNG-8 suportam transparência binária.
Na transparência alfa (ou canal alfa) , um pixel pode ser totalmente transparente,
totalmente opaco ou ter até 254 níveis de opacidade intermediários (um total de 256
níveis de opacidade). Apenas PNG, WebP e JPEG 2000 suportam transparência de
NOTA camada alfa real (consulte a Nota). A vantagem dos PNGs com transparência alfa é
que eles combinam perfeitamente com qualquer cor ou padrão de fundo, conforme
Por causa do suporte ruim da ferramenta e
mostrado na FIGURA 23-9. O PNG-8 também permite vários níveis de transparência,
do navegador para WebP e JPEG 2000,
vamos nos concentrar na transparência alfa
mas lida com isso de maneira um pouco diferente, como você aprenderá em breve.
em PNGs nesta seção.
Nesta seção, você se familiarizará com o funcionamento de cada tipo de transparência
e aprenderá a criar imagens transparentes usando o GIMP e o Photoshop.

Como funciona a transparência binária

Lembre-se de que as cores de pixel para PNG-8s e GIFs são armazenadas em uma tabela
de cores indexada. A transparência é simplesmente tratada como uma cor separada,
ocupando uma posição na tabela de cores. A FIGURA 24-4 mostra a tabela de cores no
Photoshop para um GIF transparente simples. A ranhura na tabela de cores definida como
transparente é indicada por um padrão de xadrez. Os pixels que correspondem a essa posição TERMINOLOGIA
no mapa de cores são completamente transparentes quando a imagem é exibida no
navegador. Observe que apenas um slot é transparente - todas as outras cores de pixel são Anti-aliasing
opaco. O anti-aliasing é um leve desfoque
aplicado às bordas arredondadas de
gráficos de bitmap para fazer transições
Os pixels transparentes obtêm um
slot na tabela de cores indexada. mais suaves entre as cores. Apelidado
bordas, por outro lado, têm bordas em
degraus. Texto e gráficos anti-aliasing
podem dar aos seus gráficos uma aparência
mais profissional.
FIGURA 24-4. A transparência é tratada como uma cor na tabela de cores indexada.
Evitando halos
Quando uma imagem tem vários níveis de transparência, ela combina perfeitamente com o
plano de fundo da página da web. Com a transparência binária, no entanto, existe o risco de
que as bordas suaves ao redor da imagem tenham uma franja de pixels que não corresponda
à cor por trás dela (FIGURA 24-5). Essa franja é comumente conhecida como halo e é um
risco potencial de transparência binária.
Prevenção é o nome do jogo quando se trata de transparência binária e halos. O truque é

misturar os pixels semitransparentes na imagem original (como as bordas com suavização de
serrilhado ao redor do texto ou uma forma com bordas enevoadas) com uma cor o mais
próxima possível da cor de fundo da página. Muitas ferramentas de edição de imagem que
oferecem suporte a formatos gráficos da Web fornecem uma maneira de escolher a cor de
FIGURA 24-5. Este GIF com transparência
mesclagem (também conhecida como cor fosca) ao salvar ou exportar.
binária tem uma auréola porque as
bordas semitransparentes da imagem
original foram mescladas com uma cor
Alguns programas usam qualquer cor selecionada como cor de fundo para preencher as
clara que não combina com o fundo azul-
bordas suaves. Outros podem permitir que você escolha sua cor de mesclagem manualmente. Por petróleo da página.

Por exemplo, no recurso Salvar para a Web herdado do Photoshop, você pode
NOTA selecionar uma cor fosca sempre que a transparência estiver ativada para a imagem
Curiosamente, a função Export As preferida do

(consulte Nota). A cor fosca também é usada para preencher qualquer área transparente
Photoshop preenche automaticamente as bordas da imagem ao converter uma imagem para JPEG. O GIMP, por outro lado, evita halos,
borradas com branco e não parece fornecer uma evitando qualquer tipo de mistura. Você tem a opção de bordas rígidas em degraus ou
maneira de selecionar uma cor fosca para GIFs e um padrão de pontilhamento feito de cores e pixels transparentes destinados a simular
JPEGs. No entanto, com a capacidade de exportar a borda desfocada. Nenhuma das opções parece boa, mas ei, sem halos.
PNG-8s com transparência alfa, talvez você nunca
Obviamente, evitar halos com esses métodos requer que você conheça os valores
precise selecionar uma cor fosca no Photoshop
novamente.
RGB da cor de fundo da página com antecedência para que possa corresponder a cor
fosca a ela. Se a cor da página mudar, você precisa voltar e exportar os gráficos
novamente com a nova cor. É aí que a transparência alfa tem uma vantagem real -
você pode alterar o plano de fundo e tudo ainda se misturará perfeitamente.
Como funciona a transparência alfa

Imagens RGB, como JPEGs e PNG-24s, armazenam cores em canais separados: um
para vermelho, um para verde e um para azul. Arquivos PNG-24 adicionam outro
canal, chamado de canal alfa, para armazenar informações de transparência. Nesse
canal, cada pixel pode exibir um dos 256 valores, que correspondem a 256 níveis de
transparência quando a imagem é exibida. As áreas pretas da máscara do canal alfa
são transparentes, as áreas brancas são opacas e os cinzas estão em uma escala
intermediária. Eu penso nisso como um cobertor colocado sobre a imagem que diz a
cada pixel abaixo dela quão transparente ela é (FIGURA 24-6).
Azul
Verde
Vermelho
Alfa
Imagem transparente original
As áreas pretas no canal alfa

correspondem às áreas transparentes da
imagem; as áreas brancas são opacas; e
cinzas são níveis variáveis de transparência entre eles.
FIGURA 24-6. As informações de transparência são armazenadas como um canal separado (alfa) em PNGs de
24 bits.

PNG-8 Alpha Transparência

Níveis variáveis de transparência não se limitam a PNGs de 24 bits - arquivos PNG-8
também podem fazer isso! Embora sejam referidos como PNG8+alfa ou PNGs de paleta
alfa, eles não armazenam informações de transparência em uma sobreposição de canal
alfa separada, como vimos na FIGURA 24-6.
TRUQUE DE VÍRGULA ND-LINE
O especialista em PNG Greg Roelofs explica bem a transparência “alfa” do PNG-8 neste
trecho de seu livro de 1999 PNG: The Definitive Guide (O'Reilly): Como você pode saber se um PNG
é de 8 bits ou 24 bits? Você pode
Uma imagem de paleta alfa PNG é exatamente isso: uma imagem cuja paleta
perscrutar sua alma usando o arquivo
também tem informações alfa associadas a ela, não uma imagem de paleta com uma
comando. Basta usar o comando
máscara alfa completa. Em outras palavras, cada pixel corresponde a uma entrada
linha para navegar até o diretório que
na paleta com componentes vermelho, verde, azul e alfa. Portanto, se você deseja
contém o arquivo de imagem e digite file
ter pixels vermelhos brilhantes com quatro níveis diferentes de transparência, deve
filename. Ele retorna uma breve descrição
usar quatro entradas de paleta separadas para acomodá-los - todas as quatro
do arquivo, incluindo suas dimensões,
entradas terão componentes RGB idênticos, mas os valores alfa serão diferentes. Se
informações de cor e se ele está
você deseja que todas as suas cores tenham quatro níveis de transparência, você entrelaçado.
reduziu efetivamente o número total de cores disponíveis de 256 para 64.
Neste exemplo, inspecionei o arquivo
Nenhum programa de imagem (que eu conheça) exibe tabelas de cores PNG-8 com super8bit.png, que é um PNG de 8 bits
com transparência alfa exportado do
vários níveis de transparência, então simulei uma para você na FIGURA 24-7. Eu o
Photoshop CC. A palavra mapa de cores
baseei no círculo laranja com a sombra suave da FIGURA 23-9, com a paleta reduzida
indica que é uma imagem colorida indexada.
para apenas 16 cores. A imagem resultante tem um pouco de pontilhamento na sombra
projetada, mas não é tão perceptível quando aparece sobre um padrão de fundo. Com
$ arquivo super8bit.png
economia de tamanho de arquivo de 75%, vale a pena.
super8bit.png: dados de imagem
PNG, 500 x 92, mapa de cores
de 8 bits , não entrelaçado
Ao inspecionar um PNG de 24 bits com
transparência alfa, você verá RGBA na
descrição.
$ arquivo super24bitInt.png
super24bitInt.png: dados de imagem
PNG, 500 x 200, RGBA de 8 bits/
cor , entrelaçado
PNG-24 original com transparência Salvo como PNG-8 com 16 Quando usado sobre um padrão,
alfa (8,4 KB). cores e vários níveis de você não pode ver o pontilhamento.
transparência (1,6 KB).
Simulação da tabela de cores para o PNG-8 com

vários níveis de transparência para a sombra projetada.
FIGURA 24-7. Uma simulação de uma tabela de cores PNG-8 com vários níveis de
transparência. O PNG-8 é mais de 80% menor que o PNG-24 semelhante com qualidade muito
semelhante.

Dicas de produção de imagens responsivas
Fazendo PNGs e GIFs transparentes

A maneira mais fácil de tornar transparentes partes de uma imagem é projetá-las dessa maneira
desde o início e preservar as áreas transparentes ao exportar.
Embora seja possível corrigir uma imagem opaca achatada existente e tornar as áreas transparentes,
geralmente é difícil obter uma mistura perfeita com o plano de fundo, evitando bordas irregulares.
Em vez de apenas dizer, vou deixar você criar uma imagem em camadas e preservar as áreas
transparentes no EXERCÍCIO 24-2. Ao criar seu arquivo do Photoshop ou GIMP em camadas,
certifique-se de que a camada de fundo apareça como um padrão quadriculado cinza e não esteja
preenchida com uma cor. Se você acabar com uma cor no plano de fundo de qualquer maneira,
poderá selecionar tudo e excluí-lo.
Quando terminar de brincar com a transparência, você pode voltar para algumas dicas sobre
imagens responsivas.
DICAS DE PRODUÇÃO DE IMAGENS RESPONSIVAS
Se o seu site for responsivo, é provável que você precise de imagens responsivas para acompanhá-
lo. Quando se trata de imagens de bitmap, “responsivo” na verdade significa “várias versões” (veja
NOTA Nota).
SVGs responsivos são abordados no Na seção “Marcação de imagem responsiva” no Capítulo 7, Adicionando imagens, você
Capítulo 25, SVG. aprendeu sobre quatro cenários de imagem responsiva, mas vale a pena relembrar aqui ( afinal, isso
foi há centenas de páginas). Enquanto no passado uma imagem fazia o truque, em nosso ambiente
atual podemos optar por fazer o seguinte:
• Forneça um conjunto de imagens de várias dimensões para uso em layouts responsivos em

diferentes tamanhos de janela de visualização.
• Forneça versões da imagem com quantidades variadas de detalhes com base no tamanho e na
orientação do dispositivo (também conhecido como caso de uso da direção de arte ).
• Forneça imagens em grande escala que pareçam nítidas em telas de alta densidade.
• Forneça formatos de imagem alternativos que armazenam a mesma imagem em tamanhos de

arquivo muito menores.
LEITURA ADICIONAL
Esta seção apresenta ferramentas, dicas e estratégias gerais para produzir (ou automatizar!) as
Se você é um usuário do Adobe Photoshop
imagens necessárias para os três primeiros cenários. Formatos de imagem alternativos foram
(ou pretende se tornar um), encontrará
conselhos de especialistas sobre como
abordados no Capítulo 23, Noções básicas de imagens da Web.
trabalhar o Photoshop em seu fluxo de
trabalho do Responsive Web Design no livro
Responsive Web Design with Adobe Imagens para layouts responsivos
Photoshop (Adobe) de Dan Rose.
O primeiro cenário aborda o fornecimento de um intervalo de tamanhos de imagem que o navegador
seleciona com base no tamanho da janela de visualização. Em HTML, você os especificaria usando
srcset com um seletor w que fornece a largura exata em pixels da imagem e o atributo de tamanhos
que informa ao navegador o tamanho da imagem no layout.

EXERCÍCIO 24-2. Criando imagens transparentes
Neste exercício, vamos começar do zero, para que você tenha a experiência de criar uma 3. Agora você pode selecionar Arquivo ÿ Exportar como, selecione PNG de Arquivo
imagem em camadas com áreas transparentes. Vou simplificar, mas você pode aplicar essas Configurações e certifique-se de que a caixa Transparência esteja marcada B. Certifique-
técnicas a designs mais sofisticados, é claro. se também de que “Converter para sRGB” esteja marcado. Clique em Exportar tudo,
nomeie o arquivo circle24.png e clique em Exportar.
Como o Photoshop e o GIMP têm abordagens diferentes, vou percorrer os processos 4. Vamos salvá-lo como PNG-8 também: Exportar como, PNG, Transparência, mas desta
separadamente. Você pode usar outra ferramenta desde que use camadas em sua interface. vez selecione “Arquivo menor (8 bits)”. Nomeie o arquivo circle8.
png e clique em Exportar.
5. Apenas para comparação, Exporte como novamente, mas desta vez selecione GIF
Photoshop CC (2018) no menu Configurações de arquivo. Na visualização, você verá que as áreas que não são
1. Inicie um novo arquivo e torne-o de 250×250 pixels com resolução de 72 (FIGURA 24-8). 100% opacas são mescladas com C branco, o que não é o ideal, mas salve o arquivo
Na caixa de diálogo New Document A, procure por Background Contents e selecione mesmo assim como circle.gif. A função Exportar como não oferece uma maneira de alterar
Transparent no menu pop-up. Clique em Criar. Você deverá ver um quadrado preenchido a cor de preenchimento (fosco) para GIFs e JPEGs.
com um padrão quadriculado cinza indicando que o fundo é transparente.
Agora que você tem seus arquivos transparentes circle24.png, circle8.png e

2. Selecione a ferramenta Elipse Marquee e defina a configuração Feather para 10. circle.gif, você pode pular para a seção “Como eles se parecem?”
Desenhe um círculo no centro do documento e preencha-o com uma cor. Você deve
ter uma forma com bordas borradas onde o tabuleiro de xadrez aparece. Isso é tudo o
que precisamos para os propósitos deste exercício, mas você pode se sentir à vontade ÿ
para adicionar mais elementos.
UMA B C
Comece com um documento de Quando você seleciona PNG, 24 bits (padrão) ou 8 bits (menor), O GIF pode armazenar apenas transparência binária,
imagem em camadas transparente. vários níveis de transparência são preservados. portanto, os pixels semitransparentes são misturados
com branco sólido.
FIGURA 24-8. Exportando uma imagem com bordas transparentes suaves no Photoshop CC.

GIMP GIMP, esta é a melhor opção de transparência. Na caixa de diálogo Exportar

imagem como PNG C, desmarque todas as caixas.
1. Crie um novo arquivo (Arquivo ÿ Novo), defina as dimensões para 250
pixels de largura e altura, defina a resolução X e Y para 72.000 pixels/ 4. Para comparação, vamos ver como o GIMP lida com binários
Selecione Transparência no menu pop-up “Preencher com:”. Você pode transparência. Para exportar uma imagem de 8 bits no GIMP, primeiro
remover o comentário “Criado com o GIMP”. Clique OK. Você deve ter uma você precisa convertê-la em cor indexada (Imagem ÿ Modo de cor ÿ Cor
nova janela de imagem preenchida com um fundo cinza quadriculado. Salve indexada). Use a paleta ideal com 256 cores. Deixe a caixa “Ativar
a cópia de trabalho com o nome circle.xcf. pontilhamento de transparência” desmarcada por enquanto e clique em
Converter. Todas essas bordas suaves desapareceram e os pixels são opacos
2. Hora de desenhar uma forma. Selecione a ferramenta Ellipse Select na
ou transparentes. Eu recomendo aumentar o zoom para 200% (a configuração
caixa de ferramentas e em Tool Options, ative Feather Edges e defina o
de zoom está na parte inferior da janela) para ver as bordas em degraus D.
raio para 10. Agora desenhe um círculo na janela da imagem. Defina a cor do
primeiro plano para algo que você gosta e arraste a cor para o seu círculo para
preenchê-lo (FIGURA 24-9, A). Isso é tudo o que precisamos fazer para os 5. OK, reverta o arquivo para RGB (Arquivo ÿ Reverter) e converta-o para
propósitos deste exercício, mas você pode adicionar mais enfeites, se quiser. cor indexada novamente, só que desta vez, clique na caixa ao lado de Habilitar
pontilhamento. Se você aumentar o zoom, poderá ver que o GIMP cria um
padrão de pixels sólidos e transparentes que meio que simula as bordas
3. Agora vamos exportá-lo. Selecione Arquivo ÿ Exportar como e nomeie o
borradas do círculo D. Exporte este arquivo no formato PNG como circle8.png.
arquivo circle24.png B. O sufixo diz ao GIMP para salvar o arquivo no
Você também pode salvá-lo em formato GIF.
formato PNG, e como a imagem original é RGB com áreas transparentes, o
GIMP cria um PNG de 24 bits com transparência alfa. Dentro
UMA B
Nomeando o arquivo com o .png

su x é suficiente para o GIMP
saber salvá-lo como PNG. Se a
imagem for RGB com transparência,
ela produzirá um PNG-24 com
transparência alfa por padrão.
C
D
Convertidas em cores indexadas, as bordas suaves são convertidas

em transparência on/o com bordas duras (esquerda) ou bordas
pontilhadas (direita). Eu acho essas duas opções inaceitáveis, então no
GIMP, vá para a opção PNG-24.
FIGURA 24-9. Criando uma imagem transparente no GIMP.

Como eles se parecem? Empacotando

Agora que tenho alguns gráficos transparentes, vou testá-los em uma Em resumo, se você trabalha no Photoshop CC, exporte imagens
página web mínima com fundo branco. As imagens e o arquivo transparentes como PNGs de 8 bits. Em outras ferramentas, use
transparência.html são fornecidos com os materiais deste capítulo se você PNG-24 com transparência alfa, mas fique de olho no tamanho do
quiser trabalhar junto. Você também pode usar os gráficos que criou. arquivo. Se o arquivo for inaceitavelmente grande, você pode convertê-lo em
PNG-8 + alfa usando uma das ferramentas listadas na seção “Otimização
de imagem” . Sua outra opção é experimentá-lo com transparência binária e
<!DOCTYPEhtml>
<html> uma cor fosca que corresponda ao plano de fundo da página. Se sua
<cabeça> ferramenta não tiver um recurso Matte, consulte a barra lateral “Matte Alternative” .
<title>Teste de transparência</title>
<estilo>
corpo {cor de fundo: branco;} cor de fundo: branco;
p {text-align: center;}
img {margem: 2em;}
</style>
</head>
<corpo>
<p>
<img src="circle.gif" alt=""> 
<img src="circle24.png" alt=""> 
cor de fundo: cerceta;
<img src="circle8.png" alt=""> 
</p>
</body>
</html>
Quando abro o arquivo em um navegador, os gráficos parecem mais ou

menos os mesmos contra o fundo branco (FIGURA 24-10, superior).
Mas se eu mudar a cor de fundo da página da web para azul-petróleo
(cor de fundo: azul-petróleo;), a diferença entre a transparência alfa e
GIF (binário) PNG-8 (alfa) PNG-24 (alfa)
binária se torna muito óbvia (parte inferior). Você pode ver claramente o halo [Somente Photoshop CC]
no GIF à esquerda. As versões PNG-8 e PNG-24 exportadas no Photoshop
têm transparência alfa suave. FIGURA 24-10. A diferença entre transparência binária
e alfa fica muito clara quando a cor de fundo da página
muda.
Alternativa fosca
Se sua ferramenta gráfica não tiver o recurso Matte (GIMP e Photoshop Se selecionar uma cor transparente não for uma opção na ferramenta
CC 2018 vêm à mente), crie uma nova camada na parte inferior da que você usa, você pode copiar as partes importantes da imagem,
camada “pilha” e preencha-a com a cor de fundo da sua página. Quando incluindo as bordas mescladas, copiá-la e colá-la em um novo arquivo
a imagem é achatada como resultado de ter sido alterada para a cor de imagem transparente e exportá-la como GIF ou PNG. 8.
indexada, as bordas com suavização de serrilhado se misturam com a cor Isso é muito trabalho para cada imagem, e é por isso que usar a
de fundo adequada. Basta selecionar essa cor de fundo para ser transparência alfa é uma escolha superior.
transparente ao exportar para GIF ou PNG, e sua imagem deve ser livre
de halo.

Este exemplo deve parecer familiar:
<img src="morangos-640.jpg" alt="cestos de morangos maduros"

size="(max-width: 480px) 100vw,
(largura máxima: 960px) 70vw,
240px">
Para esse elemento img específico , fornecemos JPEGs da imagem do morango com 240, 480 e
672 pixels de largura. Outros layouts podem exigir menos ou mais pontos de interrupção para cada
imagem. A primeira pergunta que você pode fazer ao produzir imagens para layouts responsivos
é: “Quantas imagens preciso criar?” Essa é uma boa pergunta que não tem uma resposta fácil.
Comece determinando as dimensões menores e maiores nas quais você sabe que a imagem
provavelmente aparecerá. Em seguida, decida quantos tamanhos provisórios seriam úteis para
atingir a meta de reduzir downloads desnecessários. Se o intervalo não for tão grande, você pode
achar que fornecer versões pequenas, médias e grandes é bom e melhor do que nada. Se houver
uma grande diferença entre os extremos, mais pontos de interrupção podem ser necessários. Se
houver muito pouca diferença, um tamanho de imagem pode ser suficiente.
DICA DE REDIMENSIONAMENTO
Redimensione-os manualmente
Redimensionar uma imagem
Se você achar que precisa apenas de algumas versões, redimensionar imagens na exportação é
fotográfica extremamente grande para um
uma boa opção. A FIGURA 24-11 mostra as opções de redimensionamento na caixa de diálogo
tamanho pequeno apropriado para um layout
de página da Web pode desfocar a imagem se Export As do Photoshop CC, mas você encontrará configurações semelhantes em outros
você fizer isso em uma única etapa, como na programas. Como alternativa, você pode usar a ferramenta Tamanho da imagem para redimensionar
exportação. Acho que obtenho melhores a imagem manualmente antes de salvar ou exportar. Isso lhe dá a oportunidade de fazer ajustes
resultados se eu reduzir as dimensões um
na imagem (como aprimorá-la) antes de se comprometer com a exportação.
pouco de cada vez, tornando a imagem mais
nítida após cada passagem. Por exemplo, se Lembre-se de que você sempre deseja começar com a imagem em seu maior tamanho em seu
minha imagem de origem tiver 4.000 pixels de
editor de imagens e redimensioná-la menor para os tamanhos de imagem de destino. O
largura e eu precisar reduzi-la para 250 pixels,
redimensionamento maior (upscaling) resulta em imagens borradas.
começaria redimensionando-a manualmente em
50% e, em seguida, usaria a ferramenta Nitidez
para aprimorá-la novamente. Então eu repetiria as
etapas até obter a imagem no tamanho de destino.
É definitivamente mais trabalho, mas vale a pena
se eu estiver mais feliz com os resultados.
FIGURA 24-11. Redimensionar imagens manualmente (como mostrado aqui no Photoshop CC) é
uma opção se você tiver um número gerenciável de imagens para produzir.

Gerar imagens com base no tamanho do arquivo

LEITURA ADICIONAL
Se sua imagem for usada em uma ampla variedade de tamanhos, mais pontos de interrupção do
Recomendo dois artigos que discutem
que “pequeno, médio e grande” podem ser necessários. Nesse caso, fornecer uma variedade de
a abordagem do tamanho do arquivo para
seleções com base no tamanho do arquivo, não nas dimensões em pixels, é uma abordagem
pontos de interrupção responsivos que entram
mais apropriada (consulte Leitura adicional). Lembre-se de que o objetivo principal das imagens em mais detalhes do que posso aqui:
responsivas baseadas em viewport é limitar o desperdício de downloads de dados. Lembre-se
• “Gerador de pontos de interrupção de
também de que o navegador faz a seleção final do arquivo de imagem com base no ambiente de
imagem responsiva, uma nova ferramenta
visualização do usuário — apenas fornecemos opções com nossa marcação de imagem responsiva. de código aberto”, de Nadav Soferman na
Podemos confiar no navegador para fazer a seleção certa, aumentando ou diminuindo um pouco Smashing Magazine (www.
conforme necessário. smashingmagazine.com/2016/01/

geração de pontos de interrupção de
Na abordagem de tamanho de arquivo para pontos de interrupção, você cria um conjunto de imagem responsiva/). Este artigo apresenta
imagens com tamanhos de arquivo que aumentam em incrementos fixos, como 20 KB, 40 KB ou o gerador de imagens mencionado nesta
seção e
80 KB, para cobrir todas as possibilidades e ajustar a quantidade de dados que é baixado.
fornece muitas informações básicas
Claro, isso dá muito trabalho extra e pode não ser viável fazer manualmente para um site com
sobre a abordagem.
muitas imagens.
• “Imagens responsivas 101, Parte 9: Pontos
Felizmente, existe uma ferramenta que gera as imagens para você. O Responsive Image de interrupção da imagem”, de Jason
Breakpoints Generator da Cloudinary (responsivebreakpoints.com) permite que você carregue Grigsby no blog Cloud Four (cloudfour.com/
thinks/
uma imagem grande e defina as dimensões máximas/mínimas, a etapa de tamanho e o número
imagens-responsivas-101-parte-9-
máximo de imagens, e gera todas as imagens automaticamente. A FIGURA 24-12 mostra como
image-breakpoints/), introduz a ideia de
usei a ferramenta para criar imagens de morango em incrementos de 20 KB. No momento em basear os pontos de interrupção em um
que você estiver lendo isso, pode haver mais ferramentas como esta, então vale a pena uma “orçamento de desempenho”, entre outras
soluções.
rápida pesquisa na web para ver o que está disponível.
FIGURA 24-12. Responsive Image Breakpoints Generator da Cloudinary

(responsivebreakpoints.com) gera arquivos de imagem para você.

Imagens dirigidas por arte

Para algumas imagens, simplesmente redimensionar para caber em um layout não é suficiente.
Pode ser necessário cortar ou alterar a imagem para que ela funcione com sucesso no tamanho
do smartphone, bem como no tamanho do monitor da área de trabalho. Este é o caso conhecido
como “direção de arte” para imagens responsivas. O Capítulo 7 tem uma explicação completa
e exemplos de seleções baseadas em direção de arte, mas como um lembrete rápido, este é
um cenário para o elemento de imagem :
<foto>
<source media="(min-width: 1024px)" srcset="icecream-large.jpg">
<source media="(min-width: 760px)" srcset="icecream-medium.jpg">
<img src="icecream-small.jpg" alt="Aproveite o verão">
</picture>
Se você deseja controle total sobre o que aparece em uma imagem em cada tamanho, precisa
projetar e exportar cada imagem manualmente em seu editor de imagens favorito. Cada versão
dirigida por arte também pode precisar ser gerada em vários tamanhos, dependendo de seus
pontos de interrupção. Isso pode ser bom se você não tiver muitas imagens para lidar.
Mas segure seu chapéu! A Cloudinary também descobriu uma maneira de automatizar a
direção de arte. Você pode usar as ferramentas no canto inferior direito do Gerador de pontos
de interrupção de imagem responsiva para especificar proporções de imagem para desktops,
laptops, tablets e smartphones. A ferramenta da Cloudinary faz algumas análises de imagem
sofisticadas, incluindo detecção de borda, detecção de rosto e exclusividade visual para
determinar as partes mais importantes da imagem. A imagem final é cortada para incluir os
pontos visualmente “quentes”. Para mais informações sobre como isso é feito, leia o artigo
“Automating Art Direction with the Responsive Image Breakpoints Generator” de Eric Portis em
www.smashingmagazine.
com/2016/09/automating-art-direction-with-the-responsive-image-breakpoints
generator/.
Outros serviços de hospedagem e automação de imagens também oferecem detecção facial e
recursos que melhoram a qualidade das imagens geradas. Se você estiver comprando um
serviço desse tipo, verifique se o corte inteligente está disponível.
Imagens para monitores de alta densidade
NOTA Se você deseja que uma imagem pareça mais nítida em telas de alta densidade (@1,5x, @2x
e @3x), ela precisa ser criada grande o suficiente para cobrir os pixels do dispositivo nas
Para aprimorar os requisitos especiais de telas de
densidades mais altas. Por exemplo, se você quiser que uma imagem tenha 300 pixels de
alta densidade, consulte o Capítulo 7, onde
largura em seu layout, precisará de uma versão de 300 pixels de largura para telas padrão, uma
apresentei pela primeira vez as proporções de pixel
versão de 600 pixels de largura para telas de 2x e uma versão de 900 pixels versão ampla
de dispositivo, bem como a marcação para direcionar
imagens para densidades específicas. Veja também
destinada a monitores 3x.
a discussão sobre as resoluções de imagem e tela

Para revisar, este cenário de alta resolução usa o atributo srcset no img
no Capítulo 23.
elemento com um descritor x que especifica a densidade da tela de destino para cada imagem:

<img src="/images/apple-300px.jpg"
alt="apple" srcset="/images/apple-600px.jpg
2x, /images/apple-900px.jpg 3x" >
Felizmente, as pessoas que fazem nossos programas de criação de imagens entendem isso e começaram a
criar recursos em suas ferramentas que facilitam a saída de várias versões de alta densidade de uma só vez.
Exporte várias versões de alta densidade

Photoshop CC 2018, Sketch, Illustrator e Affinity Designer são quatro ferramentas destinadas a designers de
tela que facilitam a configuração de exportações simultâneas em várias escalas. É uma boa economia de
tempo (e matemática!). Se você usa outra ferramenta de design, verifique se é uma opção (geralmente está
localizada onde quer que sua ferramenta gerencie a exportação). Mais adiante nesta seção, apresentarei
algumas estratégias para garantir que a qualidade da imagem permaneça nítida mesmo em escalas maiores.
Adobe Photoshop CC 2018
O Photoshop permite adicionar escalas no canto superior esquerdo da caixa de diálogo Exportar como
(FIGURA 24-13). Para exportar uma prancheta inteira, escolha Exportar como (Arquivo ÿ Exportar ÿ
Exportar como). Você também pode exportar um elemento específico clicando com o botão direito do
mouse (clique pressionando a tecla Control no Mac) no nome da camada e selecionando Exportar como
no menu pop-up. Na seção Escalar tudo, clique no botão + para adicionar mais escalas para exportação.
As pequenas setas para baixo abrem um menu de escalas padrão (1x, .5x, 3x, etc.). Clique na lata de
lixo para remover uma escala.
Quando você clica em Exportar tudo, todas as imagens são criadas de uma vez, nomeadas com o sufixo
NOTA
-@nx (consulte Nota).
A convenção “@nx” (@1x, @2x, etc.) foi
Adobe Illustrator CC
estabelecida na Apple iOS Developer Library.
No Illustrator, para exportar toda a prancheta, escolha Arquivo ÿ Exportar ÿ Exportar para telas. Você Parece ter cruzado para o mundo da web também.
encontrará a opção Adicionar Escala na coluna da direita (FIGURA 24-13). Você também pode exportar
ativos individuais (como ícones e outros elementos) por meio do painel Exportação de ativos (Janela ÿ
Exportação de ativos), que possui suas próprias configurações de exportação. Basta arrastar os
elementos para o painel e eles estão prontos para serem usados. A caixa de diálogo Exportar como
também fornece acesso a ativos individuais por meio da guia Ativos, mas eles precisam ser adicionados
ao painel Exportação de ativos primeiro. Um clique em Exportar e voilà! Todos os seus ativos
dimensionados exportados de uma só vez!
Retrato falado
O Sketch (somente Mac) é uma ferramenta para projetar interfaces de sites e aplicativos que cresceu
rapidamente em popularidade. No Sketch, selecione uma prancheta ou um elemento de página e clique
no ícone + ao lado de Tornar exportável no canto inferior direito da janela Sketch. No painel Exportar
revelado (FIGURA 24-13), selecione um formato de arquivo e clique no ícone + para adicionar mais
escalas a serem criadas
na exportação.

Photoshop CC 2018
Clique com o botão direito do mouse
em uma camada para exportar um elemento

de camada por vez.
Selecione o formato de arquivo
em Configurações de arquivo (à direita).

Adicione escalas na seção
Escalar tudo (le ).
Ilustrador CC Exporte um
Escolha Exportar para telas no elemento por vez na
menu Arquivo para exportar a caixa de diálogo
prancheta inteira. Exportação de ativos.
Escolha o formato do arquivo e Adicione ativos
adicione escalas em Formatos. arrastando-os
para o painel.
Retrato falado Designer Ainity

Selecione o item a ser Entre no Export ícone Exportar Persona
exportado e clique em Tornar Persona clicando em seu

exportável no canto inferior ícone. Clique no ícone de
direito do aplicativo. Nas seta ao lado da fatia que
configurações de exportação, deseja exportar para revelar
selecione os formatos de arquivo e adicione escalas. as configurações de formato
e escala.
FIGURA 24-13. As ferramentas de design mais recentes permitem exportar vários tamanhos de alta densidade em
uma vez.

Designer de afinidade
O Affinity Designer tem um modo de exportação (chamado de “Persona”) no qual você acessa todas
as suas configurações de exportação. Crie fatias para os elementos que deseja exportar. Entre no
Export Persona (usando o menu Affinity Designer ÿ Export Persona ou clicando no ícone que se
parece com uma molécula).
Selecione a fatia ou fatias que deseja exportar no painel Fatias (FIGURA 24-13); em seguida, clique
na pequena seta à esquerda do nome da fatia para expor as configurações de exportação, incluindo
o formato do arquivo e a capacidade de adicionar escalas com o ícone +. Quando estiver pronto,
clique em Exportar Fatias.
O problema a ser observado com todas essas ferramentas é que, se você projetar na resolução padrão
(@1x), as versões exportadas @2x e @3x serão muito maiores do que no documento de trabalho. Isso
deve levantar uma bandeira vermelha em sua mente, porque dobrar ou triplicar as dimensões das imagens
normalmente as torna borradas. Existem maneiras de contornar isso, no entanto, que discutirei a seguir.
Trabalhe na escala @1x
Mesmo se você estiver criando versões de alta definição de suas imagens, ainda é recomendável que você
faça seu trabalho de design na escala @1x (consulte a Nota). Em outras palavras, as dimensões de pixel NOTA
em seu documento de trabalho (seja no Photoshop, Sketch ou alguma outra ferramenta) devem
Por outro lado, alguns designers preferem
corresponder aos pixels de layout do seu design. No Photoshop e em outras ferramentas de edição de
trabalhar em 2x e reduzir tudo pela metade para
imagem, a escala @1x equivale a 72ppi. As vantagens de trabalhar na escala @1x incluem o seguinte: telas padrão, principalmente se fizerem seu
trabalho de design em telas Retina. Dan Rodney
é um desses designers, e você pode ler seu
• É mais fácil especificar o tamanho da fonte e outras medidas de comprimento conforme aparecem em
argumento para o design @2x em www.dan
seus documentos de trabalho sem a necessidade de dividir tudo por dois. Se você trabalha em @2x
rodney.com/blog/designing-retina web-graphics-
e deseja um tipo de 16pt, precisa torná-lo 32pt em seu documento de imagem. Se você quiser 10
in-photoshop-should you-work-at-1x-or-2x /.
pixels de preenchimento no layout, precisará criá-lo em 20 pixels e assim por diante.
• Os recursos de encaixe de pixel funcionam de forma mais confiável em @1x. Ajustar a pixels uniformes
é uma maneira de manter as bordas nítidas em elementos detalhados, como ícones.
• Os tamanhos dos arquivos são muito menores para um design criado em @1x, portanto, é melhor para
o desempenho em seu computador. Arquivos complexos com muitas pranchetas e camadas em @2x
podem ficar lentos e retardar seu trabalho.
• Cria uma noção mais realista de quanto espaço você tem para trabalhar. Um espaço de design @2x
pode dar a impressão de que você tem mais espaço para encaixar os elementos, mas eles acabarão
muito pequenos e apertados quando reduzidos em 50% para telas @1x.
Comece com vetores quando possível
Uma maneira de manter a qualidade quando seu design é ampliado é usar imagens de origem vetorial
sempre que possível. Como você aprendeu, os vetores podem ser dimensionados sem perda de qualidade,
por isso são um ótimo ponto de partida para o design da Web e de aplicativos.

Muitas novas ferramentas de design de interface do usuário para telas e interfaces da Web,
como Sketch, Affinity Designer e Adobe XD, são baseadas em vetor por padrão, portanto,
você não terá problemas para gerar versões maiores de elementos criados lá (o mesmo
vale para vetores baseado em Adobe Illustrator). Se você preferir projetar no Photoshop,
certifique-se de usar suas ferramentas vetoriais, como formas, caminhos e objetos
inteligentes vetoriais importados para elementos comuns de páginas da Web, como botões,
ícones e ilustrações, sempre que possível.
Incorporar bitmaps de grande escala
Para preservar a qualidade da imagem de fotografias e outros elementos de página

necessariamente mapeados por bits em grandes escalas, comece com uma fonte de
imagem que seja pelo menos tão grande quanto sua maior escala. Por exemplo, se você
sabe que sua versão @3x tem 2.880 pixels de largura, sua imagem de origem deve ter essa largura ou mais
No Illustrator, Sketch e Affinity Designer, “colocar” a imagem de origem de alta resolução na

prancheta @1x e redimensioná-la para atender às necessidades do layout fornece ao
programa todas as informações de pixel necessárias para exportar alta qualidade e grande
escala ativos.
No Photoshop CC, para aproveitar a resolução total da imagem, o truque é adicionar a

imagem ao seu design como um objeto inteligente vinculado. O Objeto Inteligente é como
um espaço reservado para a imagem em seu design @1x, com o original de alta resolução
permanecendo separado. Quando chega a hora de exportar em várias escalas, o Photoshop
faz referência à versão de alta resolução e você acaba com exportações de resolução total
AVISO IMPORTANTE (consulte Aviso importante). Para colocar uma imagem como um Objeto Inteligente,
escolha Arquivo ÿ Colocar Vinculado e redimensione a imagem para caber em seu design.
No momento da redação deste artigo, há um bug no
Photoshop CC 2018 que impede que essa técnica
funcione com imagens JPEG. Quando você vincula
Viva a Automação!
um JPEG de grande escala, o Photoshop o ignora
e aumenta uma captura de tela da imagem no Mencionei isso na seção “Estratégia de Ativo de Imagem” no capítulo anterior, mas vale
arquivo atual. A solução é converter a imagem JPEG a pena repetir – se o seu site tiver muitas imagens, considere usar um software de servidor
de alta resolução em um arquivo PSD antes de
que automatize o processo de geração de imagem responsiva. Como Jason Grigsby diz em
adicioná-la como um Objeto Inteligente.
seu artigo: “Os humanos não deveriam estar fazendo isso”. Eu não poderia concordar mais
(a menos que você tenha uma propensão para tarefas repetitivas).
A Adobe sabe sobre esse bug, então esperamos
corrigi-lo em uma próxima versão. Você pode optar por instalar o software em seu próprio servidor ou, por conveniência, usar
um fornecedor terceirizado que forneça serviços de gerenciamento de imagens hospedadas.
Novamente, alguns serviços populares atualmente são Cloudinary (cloudinary.com), Akamai
(akamai.com) e Kraken.io (kraken.io).
RECURSO
Espero que você tenha conseguido algumas estratégias para melhorar o fluxo de trabalho
Jason Grigsby mantém uma para criar várias versões de imagens para layouts responsivos. Ou talvez você tenha
planilha de serviços de decidido deixar o servidor lidar com isso! Vamos passar para o tópico final em nosso
redimensionamento de imagem, disponível em tinyurl.com/
aprofundamento na produção de ativos de imagem: otimização.
pmpbyzj. Veja também seu artigo
associado “Serviços de redimensionamento
de imagem” (cloudfour.com/thinks/image
resizing-services/).

Otimização de imagem
OTIMIZAÇÃO DE IMAGEM
Como uma página da Web é publicada em uma rede, ela precisa percorrer as linhas como pequenos
pacotes de dados para chegar ao usuário final. É bastante intuitivo, então, que quantidades maiores
de dados exigirão mais tempo para chegar. E adivinhe qual parte de uma página da Web padrão
contém muitos bytes — isso mesmo, as imagens.
Assim nasce a relação conflituosa com as imagens na web. Por um lado, as imagens tornam uma
Todos os web designers
página da web mais interessante do que apenas o texto, e a capacidade de exibir imagens é um dos
devem ter vários truques de
fatores que contribuem para o sucesso da web.
Por outro lado, as imagens também testam a paciência dos usuários com conexões lentas de internet
otimização de imagem na
manga.
e engolem os planos de dados dos dispositivos móveis.
Se você estudar o fluxograma de volta na FIGURA 23-16, verá que todos os caminhos terminam
com “Otimizar”. Tornar seus arquivos de imagem tão pequenos quanto possível é fundamental para
sites de carregamento rápido, portanto, todos os web designers e desenvolvedores devem ter vários
truques de otimização de imagem na manga.
Como você viu em primeira mão no EXERCÍCIO 24-1, escolher o formato de arquivo apropriado é
sua primeira linha de defesa contra tamanhos de arquivo inchados, mas não para por aí.
É possível extrair muito mais dados das imagens que seu editor de imagens exporta.
As abordagens de otimização se dividem em duas grandes categorias:
• Esforços que você faz manualmente e deliberadamente durante o design e a exportação

processo
• Ferramentas de compactação pós-exportação que enraízam o código e os trituram ainda mais,

geralmente descartando dados não utilizados
Esta seção começa com diretrizes gerais para limitar o tamanho do arquivo. Em seguida, como cada
formato de imagem é um pouco diferente nos bastidores, examinaremos as estratégias de otimização
para arquivos JPEG, PNG-24, PNG-8 e GIF (consulte Nota). Por fim, reuniremos algumas ferramentas NOTA
de otimização que funcionam em vários formatos e são uma boa última etapa em qualquer processo
Claro que também é importante otimizar SVGs,
de produção de imagens. mas guardei essa discussão para o capítulo SVG
(Capítulo 25).
Diretrizes Gerais de Otimização

Independentemente da imagem ou do tipo de arquivo, existem algumas estratégias básicas a serem
lembradas para limitar o tamanho do arquivo. Em termos mais amplos, eles são os seguintes:
Comece com um original de alta qualidade
Comece com a imagem de origem de melhor qualidade que você conseguir. A partir daí, você
pode fazer cópias em vários tamanhos e configurações de compactação, mas convém manter
esse original seguro.

Limitar dimensões
Embora bastante óbvio, a maneira mais fácil de manter o tamanho do arquivo baixo é limitar as
dimensões da própria imagem. Não existem números mágicos; apenas não torne as imagens
maiores do que elas precisam ser. Simplesmente eliminando espaço extra no gráfico na FIGURA
24-14, consegui reduzir o tamanho do arquivo em 3 KB (23%).
600 x 200 pixels (13 KB)
500 x 136 pixels (10 KB)
FIGURA 24-14. Você pode reduzir o tamanho de seus arquivos cortando espaço extra.
Reutilize e recicle
Se você usar a mesma imagem repetidamente em um site, é melhor criar apenas um arquivo de
imagem e apontar para ele repetidamente onde for necessário. Isso permite que o navegador
aproveite a imagem em cache e evite downloads adicionais.
Use ferramentas apropriadas
Se você sabe que fará muito trabalho de produção de imagens na web, vale a pena investir em um
software profissional de edição de imagens com recursos específicos da web. A escolha do
Photoshop, Sketch, PaintShop Pro ou algum outro programa mencionado neste livro depende de
sua preferência pessoal e limitações de orçamento.
Execute a imagem através de um otimizador
Você deve ter várias ferramentas de otimização de imagem à sua disposição.

Vou listar vários ao longo desta seção, muitos dos quais são de uso gratuito.

Otimizando JPEGs
Aqui estão as estratégias gerais para reduzir o tamanho do arquivo de JPEGs:
• Seja agressivo com compressão.
• Escolha Otimizado, se disponível.
• Suavize a imagem (Desfoque/Suavização).
• Evite bordas duras e detalhes nítidos.
Seja agressivo com compressão

26 KB
Sua ferramenta número um para otimizar JPEGs é a configuração de qualidade que você
Qualidade: 60%, sem desfoque
encontrará em praticamente todas as ferramentas gráficas. A configuração Qualidade permite
definir a taxa de compactação; qualidade inferior significa maior compactação e arquivos
menores. Se o seu editor de imagens tiver uma visualização, você poderá ficar de olho na
qualidade da imagem enquanto altera o nível de compactação. Imagens diferentes podem
suportar diferentes quantidades de compactação, mas, em geral, as imagens resistem
razoavelmente bem em configurações de qualidade moderadas (50–70) e até mesmo baixas
(30–40). A qualidade em configurações específicas varia de programa para programa, portanto,
use qualquer configuração que resulte no melhor equilíbrio entre qualidade e tamanho de arquivo para sua imagem específica.
Escolha Otimizado, se disponível
JPEGs otimizados têm tamanhos de arquivo um pouco menores e melhor fidelidade de cores
do que JPEGs padrão (embora eu nunca tenha conseguido ver a diferença). Por esse motivo, 20 KB
você deve selecionar a opção Otimizado se o software de imagem a oferecer. Qualidade: 60%, desfoque gaussiano
aplicado a áreas exceto o rosto
Desfocar a imagem
FIGURA 24-15. A aplicação de desfoque a
Como as imagens suaves são compactadas menores do que as nítidas, você pode tentar partes menos importantes de uma imagem pode
aplicar um leve desfoque gaussiano à imagem para dar à compactação JPEG algo para ajudar a reduzir o tamanho do JPEG exportado.
mastigar. Mesmo um desfoque imperceptível em toda a imagem pode reduzir o tamanho do

arquivo. Na caixa de diálogo Exportar como JPEG do GIMP, há uma configuração de Suavização
que faz exatamente isso. O recurso legado Salvar para a Web do Photoshop também inclui
uma opção para aplicar quantidades variadas de desfoque em toda a imagem.
Você também pode optar por aplicar um desfoque mais agressivo a áreas menos importantes
da imagem, preservando as áreas de interesse. Na FIGURA 24-15, apliquei um desfoque em
todas as áreas da imagem, exceto a face, que permanece com a qualidade original, e reduzi o
tamanho do arquivo em 6 KB, ou 23%. Para esta imagem, eu diria que a economia vale a perda
de detalhes nas bordas, mas é claro que você deve decidir se o desfoque é apropriado com
base no conteúdo e na finalidade de suas imagens.
Evite bordas duras e detalhes
Os JPEGs compactam áreas de cores suaves e mescladas com mais eficiência do que áreas
com alto contraste, bordas duras e detalhes nítidos. Para demonstrar a diferença,

gradient.jpg (12 KB) A FIGURA 24-16 mostra dois gráficos semelhantes com cores misturadas. A imagem com mais
contraste e detalhes é mais de quatro vezes maior com a mesma configuração de qualidade. Você
pode manter esse princípio em mente ao criar suas imagens. Se uma fotografia tiver muitas bordas
duras, considere se elas podem ser suavizadas ou editadas. Veja também se um PNG-8 pode
oferecer qualidade de imagem semelhante em um tamanho menor.
“Otimizando” PNG-24
detalhe.jpg (49 KB)
Como o PNG-24 é um formato sem perdas, não há muito o que fazer com essas imagens
em termos de otimização. Suas melhores apostas são fazer o seguinte:
• Evite-os para fotografias em favor de JPEGs.
• Execute-os por meio de um utilitário de otimização.
• Converta-os para PNG-8 com vários níveis de transparência.
A compactação sem perdas do PNG torna o PNG-24 um formato maravilhoso para

preservar a qualidade das imagens, mas a mesma imagem sempre será menor salva
FIGURA 24-16. A compactação JPEG
como um JPEG com perdas. Portanto, sua primeira estratégia “enxuta e média” para
funciona melhor em cores suaves e
mescladas do que bordas e detalhes rígidos. fotografias é evitar o PNG-24 e usar o JPEG.
Você pode estar usando PNG-24 porque precisa de vários níveis de transparência (uma
razão válida). Se for esse o caso, você tem duas opções. Executar a imagem por meio
Alternativas ao PNG-24 de um dos otimizadores de imagem listados posteriormente nesta seção é uma boa
maneira de eliminar metadados inúteis, mas preservar a imagem. A outra opção é
As imagens PNG-24 têm tamanhos de
convertê-lo em PNG-8, mantendo a transparência alfa.
arquivo grandes, então os desenvolvedores
procuram maneiras de evitá-las completamente.
Aqui estão algumas opções para obter vários Convertendo para PNG-8
níveis de transparência sem usar PNG-24:
Até recentemente, não tínhamos ferramentas para fazer PNG-8 com transparência alfa
• Converta-os para PNG-8, conforme
discutido nesta seção. (veja Nota). Agora, o Photoshop CC oferece a opção de criar PNG-8 com transparência
alfa e um tamanho de arquivo menor na caixa de diálogo Exportar como.
• Coloque uma versão JPEG da imagem
dentro de um SVG; em seguida, use os
recursos de recorte ou mascaramento SVG
NOTA
(abordados no Capítulo 25) para criar
áreas transparentes. O Adobe Fireworks tinha a capacidade pouco conhecida de criar PNG-8 + alfa, mas foi descontinuado em 2013.
• Aplique áreas transparentes usando
Máscaras CSS (www.w3.org/TR/
css-masking-1/), que não são abordados Você também pode usar um utilitário autônomo para converter um PNG-24 em PNG-8
neste livro, mas valem
com transparência alfa. Algumas opções são as seguintes:
olhando dentro.
• ImageAlpha (pngmini.com) é um programa exclusivo para Mac criado por Kornel
• Use um novo formato de imagem, como
WebP e JPEG 2000, que suporte Lesiÿski para converter PNG-24 para PNG-8 (FIGURA 24-17). Para a imagem do
transparência alfa. círculo laranja, consegui reduzir o tamanho de 8,4 KB para 2,6 KB, uma economia de
Essas serão boas alternativas ao PNG-24 69%. Como o círculo tinha cores planas, consegui reduzir a paleta de cores para 64
quando o suporte melhorar nas ferramentas
cores sem nenhuma alteração significativa na aparência.
de criação de imagens e nos navegadores.

• TinyPNG (tinypng.com) permite que você arraste PNGs diretamente para sua página da web
para conversão. Eles também oferecem uma versão Pro paga e APIs de desenvolvedor que
permitem usar a ferramenta “tinify” com a maioria das plataformas de back-end.
• PunyPNG Pro (punypng.com) é outro compressor com uma interface web que oferece
conversão “com perdas” de PNG-24 para PNG-8, embora você obtenha esse recurso apenas
com a conta Pro paga.
FATO ENGRAÇADO
Todas essas ferramentas usam o pngquant

biblioteca de compressão, criada por
Kornel Lesiÿski (pngquant.org), que
reduz o número de cores
de 24 bits para 8 bits enquanto atribui

níveis de transparência aos slots no mapa
de cores indexado.
FIGURA 24-17. A ferramenta de compactação ImageAlpha (somente Mac) transforma PNG-24s com
transparência alfa em PNG-8s, mantendo vários níveis de transparência.
Otimizando PNG-8 e GIF

Siga estas estratégias de otimização no processo de criação e exportação de PNG-8 e GIF:
• Reduza o número de cores (profundidade de bits).
• Evite ou reduza o pontilhamento.
• Design com cores planas.
Reduza o número de cores (profundidade de bits)
A maneira mais eficaz de reduzir o tamanho de uma imagem colorida indexada e, portanto, a
primeira parada em sua jornada de otimização, é reduzir o número de cores na imagem.
Embora PNG-8s e GIFs possam conter até 256 cores, não há regra que diga que eles precisam.
Na verdade, ao reduzir o número de cores (profundidade de bits), você reduz significativamente
o tamanho do arquivo da imagem. Uma razão para isso é que os arquivos com profundidades de
bits menores contêm menos dados. Outro subproduto da cor

redução é que você cria mais áreas de cores planas combinando cores de pixel adjacentes
semelhantes. Áreas de cores mais planas significam compactação mais eficiente.
O Photoshop e o GIMP oferecem a oportunidade de reduzir o número de cores ao converter

Profundidade de bits
a imagem de RGB para cor indexada. No Photoshop, selecione Imagem ÿ Modo ÿ Cor
A profundidade de bits é uma maneira Indexada e insira o número de cores a serem usadas no mapa de cores na caixa Cores. Se
de se referir ao número máximo de cores que você tiver acesso ao recurso legado Salvar para a Web do Photoshop, há uma configuração
um gráfico pode conter. Este gráfico mostra a
de profundidade de bits com a qual você pode brincar enquanto observa a imagem resultante
número de cores que cada profundidade de
bits representa:
na visualização antes de salvar a imagem.
1 bit 2 cores No GIMP, vá para Imagem ÿ Modo ÿ Indexado e digite o “Número máximo de cores” que
você gostaria de usar.
2 bits 4 cores
3 bits 8 cores Se você reduzir muito o número de cores, é claro que a imagem começa a desmoronar ou
4 bits 16 cores pode deixar de se comunicar efetivamente. Por exemplo, na FIGURA 24-18, uma vez que
5 bits 32 cores reduzi o número de cores no PNG para oito, perdi o arco-íris, que era todo o ponto da
6 bits 64 cores imagem. Este ponto de “fusão” é diferente de imagem para imagem. (Com certeza, esta
7 bits 128 cores imagem de celeiro e céu deve ser um JPEG, mas demonstra os efeitos da otimização
dramaticamente, então obrigado por ter paciência comigo.)
8 bits 256 cores
Você ficará surpreso ao descobrir quantas imagens parecem perfeitamente bem com
apenas 32 cores de pixels (5 bits), como a imagem Asian Cuisine no EXERCÍCIO 24-1.
Esse é geralmente o meu ponto de partida para a redução de cor, e vou mais alto apenas
Você ficaria surpreso
se necessário. Alguns tipos de imagem se saem melhor do que outros com paletas de cores
com quantas imagens
reduzidas, mas, como regra geral, quanto menos cores, menor o arquivo.
parecem perfeitamente bem
com apenas 32 cores de pixels. A economia de tamanho real ocorre quando há grandes áreas de cores planas. Lembre-se
de que, mesmo que sua imagem tenha cores de 8 pixels, se ela tiver muitas misturas,
gradientes e detalhes, você não verá o tipo de economia de tamanho de arquivo que poderia
esperar com uma redução de cor tão severa.
256 cores (21 KB) 64 cores (13 KB) 8 cores (6 KB)
FIGURA 24-18. Reduzir o número de cores em uma imagem reduz o tamanho do arquivo.

Reduzir o pontilhamento
Quando as cores em uma imagem RGB são reduzidas a uma paleta específica, as cores que
não estão nessa paleta são aproximadas por pontilhamento. O pontilhamento é um padrão de
manchas que resulta quando as cores da paleta são misturadas para simular uma cor indisponível.
Ao converter para cores indexadas, o Photoshop e o GIMP (e a maioria dos outros editores de
imagem) permitem que você especifique se e como a imagem será pontilhada.
Em imagens fotográficas, o dithering não é um problema e pode até ser benéfico; no entanto, o
pontilhamento em áreas de cores planas geralmente é uma distração e indesejável. Em termos
NOTA
de otimização, o pontilhamento é indesejável porque as manchas interrompem áreas de cores
suaves. Essas manchas perdidas atrapalham a compactação e resultam em arquivos maiores. Nem todas as ferramentas de edição de imagem oferecem
controle sobre a quantidade de pontilhamento.
Uma maneira de cortar bytes de um PNG ou GIF é desativar totalmente o pontilhamento. Para
algumas imagens, isso pode resultar em um efeito de banda, conforme mostrado na FIGURA 24-19.
Se isso for inaceitável, você poderá reativar o pontilhamento ou tentar um número maior de cores
se a profundidade de bits estiver definida para menos de 8 bits.
Dithering: 9,6 KB Sem pontilhamento: 7,8 KB
FIGURA 24-19. Desligar ou reduzir a quantidade de pontilhamento reduz o tamanho do arquivo.

Ambas as imagens têm cores de 32 pixels e usam uma paleta adaptável.
Design com cores planas
Ao projetar suas imagens, lembre-se do fato de que PNGs e GIFs são bons para compactar áreas
de cores planas.
Escolher cores planas em vez de gradientes e padrões faz uma grande diferença no tamanho do
arquivo, conforme mostrado na FIGURA 24-20. Reduzir as cores de 256 para 8 ajuda bastante a
reduzir o tamanho do arquivo, mas as cores na mistura são aproximadamente

combinado com um padrão de pontilhamento, que acabamos de aprender é contraproducente para a compactação
de GIF e PNG. No entanto, se você criar a imagem com cores planas em primeiro lugar, o tamanho do arquivo
será metade do tamanho da versão pontilhada, mesmo que ambas as imagens tenham sido reduzidas para 8
cores.
Sinto-me obrigado a dizer que imagens como esta devem ser desenhadas com vetores e salvas em formato SVG,
que será menor e mais versátil que as versões bitmap. No entanto, se você tiver um motivo para salvar PNGs,
projete-os de uma maneira que complemente a compactação. Da mesma forma, se você estiver começando com
uma imagem de origem bitmap, poderá editá-la de forma a eliminar misturas e padrões de cores desnecessários.
13,5 KB 6,8 KB 3,7 KB

PNG com misturas de gradiente e PNG com padrão de PNG projetado com cores planas
256 cores. pontilhamento e apenas 8 cores. (paleta de 8 cores).
FIGURA 24-20. Para PNG-8 e GIF, você pode manter os tamanhos dos arquivos pequenos
substituindo gradientes e padrões por cores planas.
Ferramentas de otimização
Mesmo se você projetar imagens para tirar proveito do esquema de compactação final e aproveitar ao máximo
todas as otimizações em sua ferramenta de edição de imagens, há uma boa chance de reduzir ainda mais o
tamanho do arquivo de suas imagens usando uma ferramenta de otimização. Essas ferramentas geralmente não
Sempre execute suas
têm perdas, o que significa que não alteram a aparência da sua imagem. Eles encontram a economia de arquivos
imagens por meio de uma descartando pedaços de código dedicados a metadados, perfis de cores e outros códigos redundantes.
ferramenta de otimização
como a última etapa na produção de imagens
processo.
É recomendável que você sempre execute suas imagens por meio de uma ferramenta de otimização como última
etapa do processo de produção de imagens. A boa notícia é que existem muitas maneiras de fazer isso, então
você certamente encontrará uma que se encaixe no seu fluxo de trabalho. Vejamos algumas opções.
Otimizadores de imagem online
Uma solução fácil é usar um dos otimizadores online disponíveis gratuitamente. Basta arrastar suas imagens para
a interface da página da web e baixar os arquivos compactados resultantes. Eles são uma boa opção se você não
tiver muitas imagens para processar e têm a vantagem de serem multiplataforma. Além de ferramentas gratuitas
baseadas na web, a maioria dessas empresas também oferece pacotes Pro que permitem o upload de mais dados
e oferecem opções adicionais de compactação.
Alguns também oferecem soluções do lado do servidor:

• Optimizilla (optimizilla.com) pode otimizar JPEGs e PNGs e permite compactar até 20

imagens de uma vez. É de uso gratuito.
• Kraken.io (kraken.io/web-interface) oferece uma interface web gratuita além de seus

serviços comerciais do lado do servidor. Eles oferecem a opção de configurações
“especialistas” manuais com perdas, sem perdas e a capacidade de redimensionar a
imagem também.
• TinyPNG (tinypng.com) foi mencionado anteriormente como uma forma de converter

PNG-24 para PNG-8, mas você pode usá-lo para compactar qualquer PNG ou JPEG.
• PunyPng (punypng.com) se orgulha de produzir os menores tamanhos de arquivo para

JPEGs, PNGs e GIFs. Eles também oferecem um pacote Pro que oferece mais opções de
compactação, como a conversão de PNG-24 para PNG-8 mencionada anteriormente.
Aplicativos de otimização independentes
Você pode preferir ter um programa de otimização em execução em seu próprio computador.
Se for esse o caso, consulte estas ferramentas populares para download:
• ImageOptim (imageoptim.com) é uma ferramenta somente para Mac com uma interface
fácil de arrastar e soltar para otimizar PNGs, JPEGs, GIF (incluindo GIF animado) e até
SVG. Foi criado por Kornel Lesiÿski, que também trouxe o ImageAlpha.
• PNGGauntlet (pnggauntlet.com) é uma ferramenta somente do Windows para otimização

de PNG. Ele também pode converter arquivos JPEG, GIF, TIFF e BMP para o formato PNG.
• JPEGmini (www.jpegmini.com) é um programa para Mac e Windows que compacta JPEGs.

A avaliação gratuita é válida para 200 imagens; depois disso, você precisa pagar pela
versão Pro. Eles oferecem uma interface web gratuita, bem como uma opção do lado do
servidor.
• Trimage (trimage.org) é uma ferramenta de otimização semelhante ao ImageOptim que

funciona na plataforma Linux.
Plug-ins Grunt e Gulp

Se o seu fluxo de trabalho é baseado em um executor de tarefas como Grunt ou Gulp, você
pode tornar a otimização de PNGs e JPEGs uma tarefa automatizada com o plug-in “imagemin”.
imagemin é mantido em github.com/gruntjs/grunt contrib-imagemin, onde você pode obter
instruções e links para download.
Agora você deve ter algumas estratégias para tornar suas imagens o mais simples e simples
possível, incluindo técnicas para cada formato de arquivo durante o processo de criação, bem
como ferramentas para reduzi-las ainda mais depois de feitas. Vamos testá-los no EXERCÍCIO
24-3.

EXERCÍCIO 24-3. Otimize algumas imagens
Neste exercício, pegaremos as melhores imagens que exportamos no Você pode ver que a execução de imagens exportadas por meio de um otimizador
EXERCÍCIO 24-1 e veremos se podemos torná-las ainda menores usando uma vale o esforço. Você provavelmente também pode ver que fazer cada um
ferramenta de otimização online. Incluí imagens iniciais boats-60. individualmente pode ser um pouco complicado, portanto, se você tiver muitas
jpg e asian-32.png na pasta de materiais se você quiser usar as mesmas imagens imagens para produzir, considere usar uma ferramenta que permita o processamento
mostradas aqui. em lote ou automatize o processo com um executor de tarefas ou um gerenciamento
Vou usar o Kraken.io porque me dá mais algumas opções, como a escolha entre de imagens do lado do servidor ferramenta ou serviço.
compressão com e sem perdas. Clique no botão Try Free Web Interface em sua
página inicial para acessar a ferramenta online (FIGURA 24-21).
1. Vamos começar com o arquivo asian-32.png , que se você se lembra, foi

reduzido para 32 cores de pixels e salvo como PNG-8. Usando a melhor
ferramenta de compactação do Photoshop (a função Export As), obtemos um
tamanho de arquivo para esta imagem de 3,35 KB, o que não é ruim, mas vamos
ver se podemos torná-la ainda menor. Arraste-o para o otimizador Kraken.io,
selecionando o modo “lossless”, o que significa que ele não tocará nos dados da
imagem, mas encontrará outros dados na imagem que podem ser removidos.
O tamanho do arquivo “Kraked” (otimizado) é de 2,96 KB, uma economia de

arquivo de 11,8% sem que a imagem seja alterada. Por que vale a pena, tentei
compactar essa mesma imagem em TinyPNG.com e obtive uma redução de
arquivo de 15%, portanto, lembre-se de que as ferramentas oferecem resultados
variados com base em seus algoritmos de compactação.
2. Agora vamos ver o que podemos fazer com a imagem boats-60.jpg . Primeiro,
tente usar o modo de otimização “sem perdas”, mantendo a imagem exatamente
como está. O tamanho do arquivo passou de 34,74 KB para 31,56 KB, que é
pouco mais de 9% menor. Em seguida, arraste-o para o Kraken.io novamente
usando o modo “com perdas”, permitindo que a ferramenta jogue fora alguns
dados de imagem para comprimi-la ainda menor.
O tamanho do arquivo resultante é de apenas 24,9 KB, uma economia de 28%!
Baixei as versões com e sem perdas e as comparei em um editor de

imagens e, a meu ver, não houve diferença perceptível. Eu iria com a versão
com perdas muito menor para este. Em comparação, o TinyPNG só conseguiu
reduzir boats-60.jpg em 3%. FIGURA 24-21. Otimizando imagens com a ferramenta de imagem online Kraken.io.
E com isso, encerramos nosso tour pelas técnicas de produção de ativos de imagem. Você deve se sentir
confortável abrindo uma imagem em um aplicativo de edição de imagens e salvando ou exportando para os
vários formatos de imagem da web. Você conheceu as várias maneiras pelas quais os formatos de imagem
armazenam informações de transparência e como escolher o formato mais apropriado para imagens
transparentes. Você aprendeu alguns truques para gerar conjuntos de imagens para sites responsivos e,
finalmente, tem algumas opções para otimizar suas imagens como etapa final.
Como de costume, este capítulo termina com um teste para que você possa colocar seu novo conhecimento
em prática.

Teste-se
TESTE-SE
Você é um mestre de ativos de imagem? Responda a essas perguntas para descobrir. As respostas
estão no Apêndice A.
1. Quais são as opções de formato de arquivo se você quiser vários níveis de transparência
em uma imagem de bitmap?
2. Qual é a sua ferramenta número um para otimizar um JPEG?
3. Qual é a sua ferramenta número um para otimizar uma imagem em cores indexadas como
PNG-8 ou GIF?
4. Como o pontilhamento afeta o tamanho do arquivo de um PNG ou GIF colorido indexado?
5. Como adicionar um desfoque afeta o tamanho do arquivo de um JPEG?
6. sRGB: Sim ou não? Por quê?
7. Por que você precisa criar escalas @2x e @3x de uma imagem?
8. Por que você contrataria uma empresa como Cloudinary ou Akamai?

CAPÍTULO
SVG 25
(GRÁFICOS VETORIAIS ESCALÁVEIS)
SVGs (Scalable Vector Graphics) fizeram várias aparições neste livro, mas neste capítulo NESTE CAPÍTULO
eles finalmente são a estrela.

Formas em SVG
Quando renderizado em uma janela do navegador, um gráfico SVG pode parecer uma
Clipagem e mascaramento
imagem em qualquer outro formato, mas é o que está por baixo do capô que o torna
verdadeiramente único e versátil. Primeiro, como o nome diz, é um formato vetorial, o que Efeitos de filtro
significa que as formas dentro dos SVGs são definidas por coordenadas e linhas, não por
grades de pixels. É isso que os torna escaláveis - eles podem redimensionar infinitamente sem perda de qualidade. Estilizando SVGs
A FIGURA 25-1 mostra a mesma imagem de tigre salva como SVG e PNG. O SVG pode Interatividade e animação
escalar muito grande sem qualquer alteração na qualidade. As linhas e o texto permanecem
Ferramentas SVG
nítidos, independentemente de a imagem ser visualizada em 100 pixels ou 10.000 pixels —
tente fazer isso com uma imagem de bitmap! Agora que nossas páginas e interfaces da web Dicas de produção
devem funcionar em todos os dispositivos de todas as escalas, de smartphones a monitores
de alta densidade e televisores de tela grande, a capacidade de criar uma única imagem que SVGs responsivos
pareça ótima em todos os contextos é uma vitória épica.
A natureza vetorial do SVG o torna uma boa opção para ícones, logotipos, gráficos e outros
desenhos de linha (FIGURA 25-2). E como esses desenhos são compostos de formas e
caminhos, o tamanho do arquivo geralmente é significativamente menor do que a mesma
imagem composta por uma grade de pixels.
Os SVGs também podem conter conteúdo de imagem raster - na verdade, você pode fazer Escalabilidade e tamanhos de
alguns efeitos bem legais com eles, mas perde a economia de tamanho de arquivo. Os SVGs arquivo reduzidos tornam o SVG um
também são uma opção atraente para adicionar animação e interatividade a uma interface. ótimo formato para ícones e
Analisaremos todos esses recursos ao longo deste capítulo. ilustrações simples.
703
SVG
tigre.svg tigre.png
COISAS GRÁTIS
Você pode encontrar ilustrações vetoriais

disponíveis gratuitamente no formato SVG (ou
formatos facilmente convertidos para SVG) 10x 10x
nestes sites:
• A biblioteca Open Clip

Art (openclipart.org)
• Freepik (freepik.com)
• IcoMoon (icomoon.io)
FIGURA 25-1. Imagens SVG baseadas em vetor são dimensionadas sem perda de qualidade.
100%
75%
50%
O Projeto Substantivo
25%
1920 1930 1940 1950 1960
"bem" , Abrir ClipArt Ozer Kavak, Abrir ClipArt Tigre Ghostscript
FIGURA 25-2. O formato SVG é apropriado para ilustrações de estilo de linha.

Desenhando com XML
Histórico de SVG e suporte ao navegador

O SVG teve um longo crescimento ao longo de 20 anos. Foi são as dores de crescimento que todos os padrões web promissores passam.
introduzido pela primeira vez pelo Grupo de Trabalho SVG do W3C em Para obter uma visão geral do suporte a recursos, consulte a página
1998, e o SVG 1.0 finalmente alcançou o status de Recomendação em 2001. Comparison of Layout Engines (SVG) na Wikipedia em en.wikipedia.org/
O SVG 1.1 (uma versão mais modularizada) foi lançado em 2003, depois wiki/Comparison_of_layout_engines_(Scalable_Vector_
limpo e republicado novamente em 2011 (www.w3.org /TR/SVG11/). Gráficos).
O suporte do navegador para SVG 1.1 é excelente, mas não muito O W3C também lançou o SVG Tiny 1.2 (www.w3.org/TR/
onipresente. Os navegadores começaram a suportar SVG nativamente (sem SVGTiny12), um subconjunto do SVG 1.1 voltado para dispositivos
plug-ins) entre 2004 e 2006. A boa notícia é que todos os navegadores móveis pré-smartphone. Não é compatível com navegadores comuns
modernos agora suportam SVG colocado como uma imagem independente de desktop ou smartphone.
e como código embutido. As falhas notáveis no suporte são o Internet O SVG 2 (www.w3.org/TR/SVG2/) está em desenvolvimento com o objetivo
Explorer 8 e versões anteriores e o Android 2.x, que felizmente estão prestes de ser mais integrado com HTML5, CSS e WOFF (Web Open Font Format).
a se tornar obsoletos (mas verifique suas próprias estatísticas). Os navegadores já estão começando a oferecer suporte para módulos
Existem outras inconsistências no suporte do navegador quando você individuais da especificação SVG 2, que você pode começar a usar com
chega ao nível de propriedade e outras minúcias de sintaxe. Esses testes e fallbacks.
DESENHAR COM XML

Isso cuida dos aspectos “escaláveis” e “vetoriais” do SVG. O que realmente diferencia o SVG de outros
formatos, porém, é que ele é uma linguagem XML (veja a barra lateral “Uma rápida introdução ao
XML”) para descrever gráficos bidimensionais, incluindo formas, caminhos, texto e até efeitos de filtro
especiais . Gráficos de bitmap são armazenados como código em grande parte ininteligível (caso você
se importe em espiar dentro), mas as imagens SVG são geradas por arquivos de texto que são bastante
legíveis por humanos. Na verdade, é possível criar gráficos SVG digitando o código diretamente em um
editor de código em vez de usar um programa gráfico.
Elementos SVG
O SVG é uma linguagem de marcação, assim como o HTML, só que inclui elementos para gráficos
bidimensionais, como os seguintes:
• Elementos para desenhar linhas e formas: círculo, reto, elipse, caminho,

linha, polilinha e polígono
• Um elemento de texto para adicionar conteúdo de texto
• Elementos para organização, como g para agrupar formas e usar

e símbolo para reutilização de desenhos
• Elementos para recortar (clipPath) e mascarar (máscara) áreas de imagem em formas interessantes
• Elementos para efeitos raster como linearGradient e filtro para

Efeitos de filtro semelhantes ao Photoshop
25. SVG 705

Desenhando com XML
Uma rápida introdução ao XML

XML (que significa eXtensible Markup Language) não é uma linguagem específica em si, mas sim um
conjunto robusto de regras para criar outras linguagens de marcação. É uma metalinguagem.
Para usar um exemplo simplificado, se você estiver publicando receitas, poderá usar XML para criar
uma Recipe Markup Language (RML) personalizada que inclua os elementos <ingredient>,
<instructions> e <servings> para descrever com precisão os tipos de informações em seus documentos de
receita. Uma vez rotuladas corretamente, essas informações podem ser tratadas como dados. Na verdade, o
XML provou ser uma ferramenta poderosa para compartilhar dados entre aplicativos. Apesar do fato de que
XML foi desenvolvido com a web em mente, ele teve um impacto maior fora do ambiente web por causa de
seus recursos de manipulação de dados. Há arquivos XML trabalhando nos bastidores em um número crescente
de aplicativos de software, como Microsoft Office e Apple iTunes.
Algumas das linguagens XML que são usadas na web são as seguintes: • XHTML: HTML
reescrito de acordo com as regras mais rígidas de XML
• RSS (Really Simple Syndication, ou RDF Site Summary): permite que seu conteúdo seja
compartilhados como dados e lidos com leitores de feeds RSS
• MathML: Usado para descrever notação matemática
• SVG: A linguagem de descrição de imagem que você aprenderá neste capítulo
Requisitos de sintaxe XML

Como é possível que várias linguagens XML apareçam no mesmo documento, é importante que a sintaxe seja
muito rigorosa para manter as coisas em ordem. Atalhos que funcionam bem em HTML (como omitir tags finais)
não funcionarão em linguagens XML.
O SVG segue a sintaxe XML mais rígida, por isso é importante seguir estes requisitos de código
ao escrever SVG:
• Os nomes dos elementos e atributos devem estar em letras minúsculas.
• Todos os elementos devem ser fechados (terminados), o que significa que devem ter uma tag de
fechamento. Para fechar elementos sem conteúdo (também conhecidos como elementos vazios), você
adiciona uma barra antes do colchete de fechamento (por exemplo, <rect/>).
• Os valores dos atributos devem estar entre aspas. Aspas simples ou duplas
são aceitáveis desde que sejam usados de forma consistente. Além disso, não deve haver nenhum espaço em
branco extra (espaços de caracteres ou retornos de linha) antes ou depois do valor do atributo dentro das
aspas.
• Todos os atributos devem ter valores de atributo explícitos. XML não suporta a minimização de atributos, a
prática na qual certos atributos podem ser reduzidos apenas ao valor do atributo. Isso é melhor explicado
com um exemplo do XHTML, uma versão mais rígida do HTML reescrita em XML. Em HTML, você pode
escrever check para indicar que um botão de formulário deve ser verificado quando o formulário for carregado,
mas em XHTML você precisa escrever explicitamente check="checked". • O aninhamento adequado de
elementos é rigorosamente aplicado. • Os caracteres especiais devem sempre ser representados por entidades
de caracteres (por exemplo, &
para o símbolo &). Observe que a maioria das entidades nomeadas em HTML não funciona em XML. Em
vez disso, use a referência numérica do ponto de código Unicode.
• Os scripts devem estar contidos em uma seção CDATA para que sejam tratados como caracteres de texto
simples e não analisados como marcação XML. Há um exemplo na seção “Interatividade com
JavaScript” mais adiante neste capítulo.

Desenhando com XML
Claro, isso não é de forma alguma uma lista exaustiva (veja Nota), mas deve dar a você
NOTA
uma ideia geral do que é SVG. Um exemplo simples deve torná-lo ainda mais claro. A
Listas de todos os elementos e atributos SVG
FIGURA 25-3 mostra uma imagem SVG, simple.svg, que contém uma amostra de
podem ser encontradas em www.w3.org/TR/
elementos SVG simples. Não é uma obra-prima, eu sei, mas apresentará alguns
SVG11/.
elementos SVG comuns.
Aqui está o conteúdo do arquivo simple.svg que gera a imagem na FIGURA 25-3. Se
você ler atentamente, acho que achará bastante intuitivo, mas minhas anotações seguem.
<?xml version="1.0" encoding="utf-8"?> A

<svg version="1.1" B
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="150" height="200" viewBox="0 0 150 200"> C
<defs> D
<radialGradient id="fade"> E
<stop offset="0" stop-color="white"/>
<stop offset="1" stop-color="laranja"/>
</radialGradient>
</defs>
<g id="greenbox"> F
<rect x="25" y="25" width="100" height="100" fill="#c6de89" stroke- Um simples SVG
width="2" stroke="green"/> G
<circle cx="75" cy="75" r="40" fill="url(#fade)"/>
<caminho d="M 13 100 L 60 50 L 90 90 L 140 30" stroke="black"
stroke-width="2" fill="none"/> H
</g>
<text x="25" y="150" fill="#000000" font-family="Helvetica" font- FIGURA 25-3. Uma imagem SVG
size="16">Um SVG simples</text> I básica, simple.svg. A linha pontilhada
foi adicionada para indicar as bordas
</svg> da viewport, mas não faz parte do código SVG.
Vamos dar uma olhada nas várias partes do simple.svg:
R. Como este é um arquivo XML, ele começa com alguns negócios XML. A primeira linha
é uma declaração XML que identifica o arquivo como XML. Para SVGs da Web, essa
declaração não é necessária, a menos que você esteja usando uma codificação de
caracteres diferente do UTF-8 padrão, mas provavelmente a verá no código exportado
por programas gráficos.
B. Todo o documento está contido no elemento raiz svg . Os programas de desenho

geralmente incluem o número da versão (1.1), embora não seja necessário. Os dois
atributos xmlns declaram o namespace XML, que informa ao navegador para NOTA
interpretar este documento usando o vocabulário definido em SVG (consulte Nota). Os atributos xmlns e xmlns:xlink
O atributo xmlns:xlink permite colocar links e referências a arquivos externos no não são necessários quando o SVG é colocado
documento SVG. Os namespaces ajudam a manter os nomes dos elementos em linha em um documento HTML5.
corretos, especialmente quando há mais de uma linguagem XML usada em um
documento.
C. Os atributos width e height no elemento root svg estabelecem uma área de desenho
(viewport) com 150 pixels de largura por 200 pixels de altura. A janela de visualização
25. SVG 707

Desenhando com XML
é indicado na FIGURA 25-3 por uma linha pontilhada, mas isso é apenas para fins
de ilustração e não aparecerá no navegador. Pixels são a unidade de medida padrão
NOTA em SVG, então você não precisa do “px”. O atributo viewBox controla o tamanho
do desenho em si e permite que o gráfico seja dimensionado perfeitamente se você
A janela de visualização e a caixa de visualização
são discutidas com mais detalhes na seção “SVGs alterar a largura e a altura posteriormente. (Veja Nota.)
responsivos” mais adiante neste capítulo.
D. Em seguida, chegamos ao elemento defs , que define elementos e efeitos que serão
referenciados posteriormente no documento por seus valores de id . Os elementos
na seção defs são criados, mas não imediatamente renderizados. Aqui estamos
usando defs para armazenar um padrão de gradiente radial, mas também pode ser
Coordenadas SVG usado para formas (como círculo) ou símbolos que são renderizados no documento
As coordenadas em SVGs começam no por meio do elemento use . Definir uma forma, desenho ou efeito uma vez e reutilizá-
canto superior esquerdo e aumentam para lo é uma boa maneira de eliminar a redundância em seu código SVG.
baixo e para a direita (FIGURA 25-4).
E. Este elemento radialGradient é composto por dois elementos de parada de cor , um
O quadrado criado com o rect
para branco e outro para laranja. É dado um id de "fade".
O elemento no exemplo tem as
coordenadas x="25" y="25", o que
F. Finalmente, chegamos aos elementos que descrevem o desenho em si. O ângulo
significa que seu canto superior esquerdo
reto (retrato), o círculo (círculo) e o caminho (caminho) que compõem o desenho
está posicionado a 25 pixels da borda
esquerda da viewport/viewbox e 25 pixels são agrupados com o elemento g e recebem o nome de "caixa verde". Isso facilita
abaixo da borda superior. Alguns elementos, o acesso em CSS ou um script posteriormente.
como círculos e elipses, podem ser
G. O quadrado é criado usando o elemento rect (para “retângulo”) com sua largura e
posicionados com base em seus pontos
centrais (cx e cy). altura definidas para 100 pixels. Observe que este e outros elementos vazios são
fechados (terminados) com uma barra (/) antes do colchete de fechamento, como é
0 50 100 150
exigido em linguagens XML.
0
Os atributos xey o posicionam na grade de pixels dentro da janela de visualização

50 (veja a FIGURA 25-4 na barra lateral “SVG Coordinates” ). Você pode ver que os
atributos são usados para fornecer as dimensões, cor de preenchimento, largura do
100 traço e cor do traço (consulte Nota). O centro do elemento circle é posicionado com
os atributos cx e cy , e seu raio é definido com r. Este círculo é preenchido com o
150 Um simples SVG gradiente radial que definimos anteriormente, que é chamado por seu id
“fade” na notação url() .
200
NOTA
“Stroke” é o que o SVG chama de linha ou borda ao redor de uma forma.
FIGURA 25-4. Em SVG, as

coordenadas x começam à esquerda e H. A linha torta é definida por um elemento de caminho . O atributo d (dados) fornece
aumentam para a direita, e as uma série de coordenadas x, y que compõem os pontos ao longo do caminho.
coordenadas y começam no topo e aumentam para baixo.
Todos os caminhos começam com M (“moveto”), que define a posição inicial. Cada L
O ponto de origem 0,0 está no canto superior
esquerdo da viewport. desenha uma “linha para” o próximo conjunto de coordenadas. As coordenadas podem ser separadas
por um espaço de caracteres (como mostrado) ou uma vírgula.
I. Finalmente, temos um pouco de texto definido com o elemento text . Você pode ver
que ele é estilizado com atributos como font-size e font-family, que devem parecer
familiares agora que você aprendeu sobre CSS. Existem muitas semelhanças entre
atributos SVG e estilos CSS.

Desenhando com XML
Além das formas simples

Os SVGs têm alguns recursos interessantes de imagem, além de desenhar linhas e formas.
Imagens de bitmap incorporadas
SVGs não se limitam a desenhos vetoriais; você pode incorporar imagens de bitmap neles também.
AVISO
Você pode fazer isso para aplicar efeitos especiais ou adicionar algum tipo de comportamento ou
interatividade que um PNG ou JPEG não pode fazer sozinho. As imagens são incorporadas com Imagens externas não serão exibidas para .svg
o elemento de imagem . arquivos adicionados à página HTML com o

elemento img . Todos os arquivos externos estão
<image xlink:href="kangaroo.jpg" x="45" y="0" largura="100"
bloqueados para SVGs de elemento img por segurança
altura="150"/>
razões.
Observe que, como o SVG é um formato XML, ele requer que o atributo xlink:href aponte para o
arquivo de imagem externo.
Clipagem e mascaramento
O SVG permite mostrar seletivamente partes de uma imagem e ocultar outras por meio de recorte
e mascaramento.
No recorte, um caminho vetorial é usado para “cortar” uma seção de uma imagem. As partes da
imagem que ficam fora do traçado de recorte ficam completamente ocultas. A FIGURA 25-5 usa
um caminho em forma de estrela para recortar a imagem do céu estrelado. Os caminhos de recorte
são definidos com o elemento clipPath .
<defs>
<clipPath id="estrela">
<pontos de polígono="390,12 440.154 590.157 470.250 513.393 390.307
266.393 310.248 189.157 340.154 390,12" style="preencher: nenhum"/>
</clipPath>
</defs>
<image xlink:href="starrysky_600.jpg" width="600" height="400"

style="caminho do clipe: url(#star)"/>
O caminho em forma de estrela posicionado sobre a A imagem é cortada no caminho (a borda pontilhada
imagem. indica a janela de visualização do SVG, mas não
faz parte do SVG).
FIGURA 25-5. O caminho em forma de estrela é usado como um caminho de recorte que revela parte da
imagem subjacente.
25. SVG 709

Desenhando com XML
O mascaramento funciona de maneira semelhante, mas é um efeito baseado em pixels. Níveis

variados de escuridão na máscara resultam em quantidades variadas de transparência em cada
NOTA
ponto, semelhante a um canal alfa. Nas máscaras SVG, as áreas em branco puro correspondem
Se a máscara for uma imagem colorida, ela será a 100% de opacidade e o preto puro corresponde a 0% de opacidade (totalmente transparente).
convertida em escala de cinza com base em sua Níveis de cinza entre eles resultam em níveis de semitransparência.
luminância (brilho) usando uma fórmula que interpreta
Você pode brincar com a cor de preenchimento da máscara para revelar mais ou menos o objeto
amarelos e verdes como mais claros que vermelhos
e azuis. que está mascarando. O efeito é mais interessante quando a máscara contém gradientes em vez
de cores de preenchimento sólido. Você pode até usar uma imagem como máscara (veja Nota).
A FIGURA 25-6 mostra a mesma forma de estrela preenchida com um gradiente e usada como
máscara sobre a fotografia do céu estrelado. Observe que as áreas da imagem que ficam fora do
AVISO
objeto de máscara são completamente transparentes, assim como o caminho de recorte.
O mascaramento não é compatível com as versões
4.3 e anteriores do Android.
<defs>
<linearGradient id="blend">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#000000"/>
</linearGradiente>
<mask id="star" x="0" y="0" width="400" height="381">

<pontos poligonais="390,12 440.154 590.157 470.250 513.393 390.307
266.393 310.248 189.157 340.154 390,12" style="fill: url(#blend)"/>
TRUQUE LEGAL </mask>
</defs>
É possível simular transparência em um
JPEG incorporando-o em um SVG e usando <image xlink:href="starrysky_600.jpg" width="600" height="400" style="mask:
um caminho de recorte ou máscara para url(#star);"/>
fazer certas áreas dentro do
imagem transparente. Isso permite
que você aproveite o tamanho de arquivo
pequeno de JPEGs para imagens coloridas
enquanto obtém os efeitos de transparência
disponíveis apenas com PNG-24. No lado
negativo, há problemas de suporte ao
navegador que você não encontra com o
PNG-24.
O caminho em forma de estrela é preenchido com O gradiente funciona como uma máscara na qual as áreas
um gradiente. claras permitem que mais da imagem apareça. Quanto mais
escura a máscara, mais clara a imagem mascarada.
FIGURA 25-6. A forma de estrela tem um preenchimento de gradiente que afeta a transparência da imagem
mascarada.
Efeitos de filtro
Você pode se surpreender ao saber que um formato gráfico baseado em vetor inclui filtros
semelhantes ao Photoshop para manipular imagens. O SVG apresenta mais de uma dúzia de
efeitos de filtro que podem ser usados sozinhos ou em camadas e combinados para todos

Desenhando com XML
tipos de efeitos, como simples desfoques gaussianos, mudança de cor, padrões

semelhantes a mosaicos e boas e velhas sombras.
O bom dos filtros é que a imagem original permanece intocada; toda a confusão acontece
quando o navegador renderiza a imagem com os filtros aplicados. A FIGURA 25-7 mostra
apenas alguns filtros SVG para dar uma ideia do que pode ser feito.
Imagem original Desfoque gaussiano Matriz de cores: saturar
Morfologia Mapa de turbulência + deslocamento
FIGURA 25-7. Exemplos de filtros SVG.
Para dar uma breve amostra de como os filtros funcionam, aqui está um exemplo que
coloca um efeito de desfoque em um elemento de elipse. O filtro é definido com um
elemento de filtro , que contém uma ou mais primitivas de filtro (um efeito muito
específico que pode ser combinado com outros efeitos). O filtro recebe um id e então é
chamado como um estilo no elemento que o utiliza. A FIGURA 25-8 mostra a elipse sem
e com o filtro de desfoque.
NOTA
Este exemplo e o próximo usam o atributo style (o mesmo que usamos em HTML) para adicionar
estilos inline aos elementos. Falaremos sobre opções para estilizar SVGs na próxima seção.
<defs>
<filter id="embaçado">
<feGaussianBlur in="SourceGraphic" stdDeviation="4"/>
</filtro>
</defs>
<ellipse cx="200" cy="50" rx="150" ry="100" style="preencher: laranja;"/>

FIGURA 25-8. Um filtro de desfoque
<ellipse cx="200" cy="300" rx="150" ry="100" style="preencher: laranja;
filtro: url(#blurry);"/> gaussiano aplicado a um elemento de elipse .
25. SVG 711

Desenhando com XML
Para fazer uma sombra projetada, o filtro de desfoque é definido e então mesclado com um
deslocamento que o move para baixo e para a direita. A FIGURA 25-9 mostra o resultado.
<defs>
<filter id="sombra">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="7" dy="5" result="offsetBlur" />
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filtro>
</defs>
<polígono points="390,12 440,154 590,157 470,250 513,393 390,307 266,393
310,248 189,157 340,154 390,12" style="fill: pink; filter: url(#shadow)"/>
FIGURA 25-9. Uma sombra
projetada com filtros SVG.
Claro, há muito mais sobre filtros SVG do que posso cobrir aqui, mas espero ter fornecido uma
boa introdução.
FATO ENGRAÇADO
Reutilize e recicle
Um recurso poderoso do SVG é a capacidade de definir uma forma ou efeito uma vez e reutilizá-
Os recursos de mascaramento, filtro e
transformação em CSS são extensões do SVG. lo sempre que precisar, quantas vezes precisar. Isso mantém o arquivo pequeno removendo
Os órgãos de padrões têm como código redundante e é um bom exemplo de DRY
objetivo fazê-los trabalhar juntos da (Não se repita) codificação.
maneira mais perfeita possível e trazer
alguns dos melhores aspectos do SVG para O truque é definir o elemento que você deseja repetir, como um ícone, em um símbolo. O
CSS e comportamento padrão do navegador. elemento símbolo não é renderizado; ele apenas configura um desenho para uso futuro (veja
Nota).
<symbol id="iconA" viewBox="0 0 44 44">


</symbol>
Quando você quiser usar o símbolo na página, chame-o com o elemento use , que aciona a
NOTA
renderização do símbolo. O seguinte é um uso mínimo
Como os símbolos não serão renderizados, você exemplo de elemento. O símbolo reutilizado é dimensionado para quaisquer dimensões
não precisa colocá-los em uma seção defs , mas é
definidas em svg.icon na folha de estilo da página da web.
uma boa prática porque é um contêiner lógico para
<svg class="icon">
elementos que você está definindo para uso posterior.
<use xlink:href="#iconA" />
</svg>
Você pode incluir outros atributos com instruções como coordenadas x,y para posicionamento,
dimensões de largura e altura e estilos que substituem estilos herdados pela cópia do símbolo.
O elemento use não funciona apenas com símbolo. Você pode usá-lo para reutilizar qualquer
forma, imagem ou grupo SVG básico de maneira semelhante. A vantagem de tornar o SVG
inicial um símbolo é que você pode incluir o atributo viewBox para habilitar o dimensionamento
proporcional.
O símbolo e os elementos de uso são as ferramentas por trás dos sprites SVG. Sprites são
uma técnica na qual vários desenhos SVG (como um conjunto de ícones, para usar o exemplo
mais popular) são definidos em um SVG, seja no documento HTML

Recursos do SVG como XML
mento ou como um arquivo .svg externo . No documento HTML, o elemento use (dentro de
um svg embutido ) puxa um símbolo de ícone específico para a página. É uma ferramenta
poderosa para gerenciar ícones SVG. Você encontrará muitos tutoriais para sprites SVG
online, e Chris Coyier inclui um bom tutorial em seu livro Practical SVG (A Book Apart).
Até agora você viu o SVG usado para desenhar formas básicas, incorporar imagens, recortar
e mascarar áreas selecionadas e adicionar alguns efeitos especiais bem legais. Os recursos
de desenho SVG são essenciais para o formato SVG; no entanto, se nos concentrarmos
apenas no que é desenhado na janela do navegador, perderemos alguns dos melhores
recursos do SVG. Vamos olhar para eles agora.
CARACTERÍSTICAS DO SVG AS XML
Agora você sabe que por trás de cada SVG renderizado em uma tela há um documento de
texto estruturado. Nesse aspecto, é praticamente o mesmo que HTML.
Além disso, o SVG, como linguagem estruturada de documentos, possui um DOM que inclui
objetos, propriedades e métodos relacionados à manipulação de elementos gráficos. Isso
abre algumas possibilidades realmente interessantes que tornam o SVG mais flexível e útil
do que seus equivalentes de imagem estática.
Estilo
Você pode direcionar elementos em um SVG (ou o próprio elemento svg se estiver embutido)
para alterar sua apresentação com CSS, por exemplo, aplicando a mesma cor ou estilo de
borda a elementos HTML na página, bem como formas dentro do SVG.
Os estilos são adicionados ao SVG de quatro maneiras:
Atributos de apresentação
O exemplo anterior “SVG simples” na FIGURA 25-3 usa atributos de apresentação

definidos na linguagem SVG, como preenchimento e largura do traço, para controlar
como as formas devem aparecer. Os atributos de apresentação são sempre substituídos
por estilos aplicados com regras CSS. <rect x="25" y="25" width="100" height="100"
fill="#c6de89" stroke-width="2" stroke="green"/>
Estilos embutidos
Os elementos SVG podem usar o atributo de estilo embutido , que funciona da mesma
forma que nos elementos HTML. Muitos desenvolvedores preferem essa abordagem. O
mesmo elemento rect também pode ser escrito da seguinte forma:
<rect x="25" y="25" width="100" height="100" style="fill:#c6de89;

stroke-width:2; stroke:green;" />
Folha de estilo interna
Como em HTML, você pode incluir um elemento de estilo no topo do svg (ou na seção
defs se houver) que contém todos os estilos usados no
Documento SVG:
25. SVG 713

<svg> 

<estilo>
/* estilos aqui */
</style>

</svg>
Folha de estilo externa
Se o seu SVG estiver embutido ou colocado na página com os elementos object ou

iframe , você pode importar uma folha de estilo externa com a regra @import no
elemento style . Lembre-se de que arquivos externos não funcionarão para SVGs
autônomos incorporados ao elemento img . Isso inclui a própria folha de estilo, bem
como referências a recursos externos usando a notação url() dentro das regras de
estilo.
<svg>
<style type="text/css">
@import "svg-style.css";
/* mais estilos */
</style>

</svg>
Para SVGs embutidos, você também pode estilizar elementos com uma folha de estilos
vinculada ao documento HTML com o elemento link :
<cabeça>

<link href="svg-style.css" rel="stylesheet" type="text/css">
</head>
<corpo>
<svg>

</svg>
</body>
Adicionando SVG a uma página: uma atualização
O Capítulo 7, Adicionando imagens, entrou em detalhes sobre as maneiras de arquivos externos como imagens incorporadas, folhas de estilo ou scripts. se uma
adicionar um SVG a uma página, mas achei que seria bom relembrar um pouco imagem estática é tudo que você precisa, esta é uma opção confiável.
agora no contexto de nosso mergulho profundo em SVG. Consulte a discussão
original no Capítulo 7 para obter mais detalhes de marcação. SVGs podem ser Como um objeto incorporado
adicionados a um documento HTML das seguintes maneiras: Você pode usar o elemento object para incorporar um SVG em uma página.
A vantagem desse método é que ele permite que scripts sejam executados e
Como uma imagem arquivos externos sejam carregados. Você também pode fornecer uma imagem de
Você pode adicionar um arquivo .svg independente a uma página com o img fallback para navegadores não compatíveis (embora não haja muitos):
elemento como faria com qualquer outro gráfico:
<object data="star.svg" type="image/svg+xml">
<img src="estrela.svg" alt="ícone estrela"> <img src="fallback.png" alt="">
</object>
Um SVG também pode ser usado em qualquer propriedade CSS que
aceite imagens, como background-image. Como código SVG embutido
Quando SVGs independentes são adicionados a páginas como gráficos simples, eles
O arquivo SVG inteiro pode ser colado diretamente na fonte HTML como um
se comportam como gráficos simples. Você não pode mais estilizar ou criar scripts
elemento svg . Esta opção lhe dá acesso total ao DOM do SVG para estilo e script,
nos elementos no SVG, ele não será interativo (ou seja, não registrará eventos de
o que é uma grande vantagem. No lado negativo, o código para um SVG pode ficar
usuário como cliques ou foco) e não carregará nenhum
muito longo.

Interatividade com JavaScript

SVGs não são apenas imagens bonitas - SVGs são imagens que você pode programar! Você
pode adicionar interatividade aos elementos em um SVG com JavaScript porque todos os
SVG versus tela
seus nós de elemento e atributo são acessíveis no DOM. Vale a pena notar que os SVGs
também podem incluir links simples , são um tipo básico de interatividade. No Capítulo 10, Mídia incorporada,
examinamos a tela HTML5
Por exemplo, como um SVG pode ouvir mouseovers, você pode criar efeitos de foco divertidos elemento e API que cria um
que adicionam personalidade aos elementos da interface do usuário. Você também pode espaço para um desenho dinâmico
acionar alterações no SVG com um clique ou toque. O JavaScript pode fazer tudo, desde bidimensional em uma página da web.
A diferença é que uma imagem SVG é
adicionar um pequeno movimento a um ícone até criar interfaces de jogos inteiras do tipo
desenhada com uma linguagem de
Flash e apresentações multimídia, conforme mostrado na FIGURA 25-10.
marcação estrutural e uma tela é desenhada
com comandos JavaScript. Ambos podem
conter imagens, vídeos, animações e
atualizações dinâmicas em tempo real.
canvas é melhor para redesenhos rápidos

em tempo real (afinal, são apenas pixels),
tornando-o mais adequado para projetar
jogos, editar imagens e salvar imagens em
formatos de bitmap. O SVG oferece
vantagens na facilidade de criação de
scripts, animação e acessibilidade; no
entanto, documentos SVG complicados
exigem mais poder de processamento do
que a tela
elementos.
FIGURA 25-10. Um exemplo de uma interface de jogo SVG criada com a biblioteca JavaScript
Snap.svg. Quando você coloca o ponteiro sobre cada ponto, um pequeno verme engraçado aparece.
Veja mais demonstrações interativas de SVG em snapsvg.io/demos.
Se o seu SVG estiver embutido, os scripts no documento HTML podem acessar elementos
dentro do SVG. Para SVGs autônomos, você pode usar o elemento de script do SVG.
Por ser um documento XML, o código precisa ser encapsulado em um Bloco de Dados de
Caracteres XML (<![CDATA[ ]]>) para que os símbolos <, > e & sejam analisados corretamente,
conforme mostrado neste exemplo:
<script><![CDATA[
//script aqui
]]></script>
25. SVG 715

Animação
SVG é uma escolha popular para adicionar elementos animados a uma página da web. A
FIGURA 25-11 é minha tentativa de capturar uma animação encantadora em uma imagem
estática. Para mais inspiração, recomendo acessar codepen.io e pesquisar por “animação SVG”.
FIGURA 25-11. Um exemplo de um SVG animado por Chris Gannon. Você pode vê-lo em ação em codepen.io/
chrisgannon/pen/emVgMg.
Existem várias maneiras de animar um SVG: elementos de animação em SVG,

Animação CSS e JavaScript:
SVG/ SMIL
A especificação SVG inclui efeitos de animação baseados em SMIL

Nenhum navegador da Microsoft (Internet Explorer
(Synchronized Multimedia Integration Language), uma linguagem XML para criar áudio,
ou Edge) suporta animação SVG/SMIL.
O Chrome o desativou temporariamente, o que vídeo e elementos animados sincronizados. Cada efeito de animação é definido por um
enviou uma mensagem a outros fornecedores de elemento, com atributos para ajuste fino.
navegadores para interromper o desenvolvimento Embora os elementos de animação SVG/SMIL integrados forneçam boas ferramentas para
ativo do suporte SVG/SMIL. Com CSS e JavaScript todos os tipos de tarefas de animação, a falta de suporte ao navegador significa que não é
oferecendo melhores opções de animação, esta uma ótima opção se a animação for essencial para sua mensagem.
parte da especificação SVG pode definhar no vine.
Animação CSS
Os elementos SVG também podem ser animados com transições CSS e quadros-chave.
Deve-se notar que o CSS pode animar apenas propriedades CSS, não atribuir valores, o
que pode ser limitante para SVG, que usa atributos para a maior parte da geometria e
NOTA DE SUPORTE DO NAVEGADOR layout. Essa técnica também é prejudicada pelo suporte limitado ao navegador (consulte a
Nota), embora isso continue a melhorar.
A animação CSS não é suportada no Internet
A animação CSS é boa para efeitos de animação simples e não críticos.
Explorer 9 e versões anteriores (de forma alguma,
não apenas para SVGs), e não há suporte SVG (de JavaScript
forma alguma) no IE8 e versões anteriores. O IE 10
Com JavaScript, você pode criar animações complexas e interativas que competem com a
e 11 suportam animação de propriedades CSS, mas
funcionalidade que o Flash oferecia antes. Há um suporte de navegador muito melhor,
não propriedades específicas de SVG
embora sempre haja a possibilidade de alguns usuários não terem o JavaScript habilitado
(preenchimento, traçado, etc.). Nos navegadores
e perderem. Se você não quer reinventar a roda, você pode tirar proveito das muitas
MSEdge e Firefox lançados antes de 2017, a
animação CSS não funcionará se o SVG for bibliotecas JavaScript de animação SVG (veja a barra lateral “Bibliotecas JS de Animação
adicionado com o elemento img . Os navegadores SVG” ).

Chrome e Safari mais antigos exigem o prefixo -webkit- .
Se você quiser aprender mais sobre animação SVG, recomendo SVG Animations de Sarah
Drasner (O'Reilly) e Creation Web Animations de Kirupa Chinnathambi (O'Reilly).

Visualização de dados
Os SVGs tornaram-se uma ferramenta obrigatória no mundo da visualização de dados

(“dataviz”) porque podem ser gerados dinamicamente com dados reais. Por exemplo, você
Animação SVG
pode fazer o nível de temperatura em uma ilustração de termômetro SVG subir e descer
Bibliotecas JS
com dados meteorológicos reais coletados no local do usuário, ou você pode alterar as
barras de progresso ou gráficos de pizza conforme os dados são atualizados em tempo real. FIGURA 25-12
Estas são apenas algumas das bibliotecas
mostra exemplos de SVG usados para dataviz da Galeria D3.js. D3.js é uma biblioteca JavaScript disponíveis para ajudá-lo a adicionar
efeitos de animação aos seus SVGs com mais
JavaScript criada especificamente para “documentos orientados a dados”. Saiba mais em
eficiência:
d3js.org.
Snap.svg (snapsvg.io)
Esta é uma biblioteca de construção e

animação SVG multifuncional criada por Dmitry
Baranovskiy. É de código aberto e disponível
gratuitamente.
SVG.js (svgjs.com)
SVG.js é uma biblioteca extremamente leve

(apenas 11 KB!) para animação SVG básica.
Também é modular, para que você possa
usar exatamente o que precisa.
Velocidade (velocityjs.org)
Como o nome diz, o Velocity faz com que

as animações sejam renderizadas muito
rapidamente e possui uma sintaxe semelhante
ao jQuery que facilita o uso.
Bonsai (bonsaijs.org)
Bonsai é uma animação SVG robusta

biblioteca que inclui suporte para fontes,
áudio, vídeo e imagens.
Animadores de caminho
Você já viu um gráfico em uma página da

web que parece ter sido desenhado diante
de seus olhos? Provavelmente era um
FIGURA 25-12. Exemplos de SVGs gerados por dados no site D3js.org. Veja mais em SVG animado com um animador de caminho.
github.com/d3/d3/wiki/Gallery. Existem várias bibliotecas JS de um truque
que podem animar as linhas em seu SVG:

Os métodos para gerar SVGs com dados dependem do tipo de dados e da linguagem de Walkway (connoratherton.
programação utilizada. Uma opção é traduzir o documento XML que contém os dados para
com/walkway), LazyLinePainter
o SVG usando XSLT. XSLT
(lazylinepainter.info) e Vivus
(eXtensible Stylesheet Language Transformations) é uma linguagem XML que fornece
(maxwellito.github.io/vivus).
instruções estruturadas para traduzir uma linguagem XML para outra. Claramente, esse é
um mojo XML avançado que não vamos aprofundar aqui, mas achei que você deveria saber.
Outras opções incluem JavaScript e linguagens de modelo do lado do servidor (também
mais do que abordaremos aqui).
Se você está ansioso para saber mais sobre SVGs gerados por dados, o livro Interactive
Data Visualization for the Web de Scott Murray (O'Reilly) é um bom lugar para começar.
25. SVG 717

Ferramentas SVG
Acessibilidade
Ao contrário do texto em formatos de imagem bitmap, o texto em SVGs pode ser acessado
por mecanismos de pesquisa e lido por leitores de tela quando rotulados corretamente. Há
algumas coisas que você pode fazer para tornar seus SVGs mais acessíveis aos leitores de tela:
• Use o elemento de título SVG para fornecer um nome abreviado para o próprio elemento
svg ou qualquer contêiner (como g) ou elemento que ele contenha. O elemento title
deve ser o primeiro elemento filho de seu pai.
• Use o elemento SVG desc para fornecer descrições de texto longo para os elementos.
• Adicione funções ARIA ao elemento svg e seus componentes para garantir que os leitores
de tela os interpretem de maneira correta e eficiente. As recomendações incluem o
seguinte:
— Adicione role="img" ao elemento svg , mas somente se você quiser que ele seja
tratado como uma imagem única e não interativa. Os elementos filho não serão
acessíveis separadamente.
— Adicione aria-labelledby="title desc" ao elemento svg para

melhorar o suporte para title e desc.
— Se partes do SVG devem ser acessíveis (texto, links, elementos interativos, etc.),
não defina uma função em svg, mas adicione role="presentation" a formas (como
círculo) e caminhos para evitar leitores de tela de anunciar a ocorrência de cada
forma no gráfico.
FERRAMENTAS SVG
Tecnicamente, tudo o que você precisa para criar gráficos SVG é um editor de texto (e
habilidades geniais de visualização mais paciência heróica!), mas você ficará muito mais feliz
se um programa gráfico fizer o trabalho pesado para você. Também é comum os designers
criarem as ilustrações complexas em um programa gráfico e depois trazê-las para um editor
de texto para limpar o código e adicionar scripts e estilos manualmente. É uma questão de
preferência com base em suas habilidades e interesses.
Ferramentas de ilustração vetorial
A ferramenta mais adequada para criar SVGs é uma ferramenta de desenho vetorial como o
Adobe Illustrator, embora até editores de imagem como o Photoshop e o GIMP usem formas
que podem ser exportadas como SVG. Atualmente, existem muitas opções de software
vetorial, variando de caras a gratuitas, de recursos completos a básicos.
Adobe Illustrator
O Illustrator é o avô das ferramentas de ilustração vetorial e está disponível hoje como parte
do Creative Suite da Adobe por uma taxa mensal. Illustrator é uma ferramenta vetorial,

Ferramentas SVG
mas ele usa PostScript nativamente e precisa traduzir esses vetores para SVG.
Embora seja possível “Salvar” um desenho em formato SVG, a melhor opção é “Exportar
DICA DA FERRAMENTA
como” porque o SVG resultante será otimizado para web. Se você usa o Illustrator, vale a
pena pesquisar como criar SVGs otimizados no Illustrator, pois as pessoas publicaram todo Se você copiar uma forma no Illustrator, poderá
tipo de dicas que vão ajudar no seu processo de design e produção. colá-la como código em um editor de texto.
Este é um atalho legal se você estiver
fazendo a maior parte do seu trabalho SVG em código.
Inkscape
O Inkscape (inkscape.org) é um editor de imagens de código aberto feito especificamente
para SVG (SVG é seu formato nativo). Está disponível para Windows, Mac (consulte Nota) NOTA
e Linux. A interface do Inkscape evoluiu bastante nos últimos anos (FIGURA 25-13), mas
A versão macOS do Inkscape é executada no
se você está acostumado com as ferramentas da Adobe, pode demorar um pouco para se
XQuartz, portanto, os usuários de Mac precisam
acostumar. Você definitivamente não consegue superar o preço (grátis)! fazer o download e executá-la primeiro (disponível em www.
xquartz.org). XQuartz é uma versão do sistema de
janelas X11 Unix para Mac.
DICA DA FERRAMENTA
Ao salvar um SVG no Inkscape, escolha

Simples ou Otimizado. A opção Inkscape
SVG contém muito código proprietário que
aumenta desnecessariamente o tamanho do
arquivo. Esteja ciente de que a versão otimizada
pode remover mais do que você deseja,
dependendo do que você pretende fazer com o
gráfico.
FIGURA 25-13. O Inkscape foi criado para SVGs, portanto, seus recursos de interface são centrados
em SVG, incluindo itens de menu para Preenchimento e Traçado, Símbolos, Clipe e Máscara.
Ferramentas específicas para SVG
Há uma série de pequenas ferramentas de desenho específicas para SVG disponíveis para
pouco ou nenhum investimento. Como eles são projetados apenas para SVG, eles têm um
número gerenciável de ferramentas e configurações que mapeiam para recursos SVG (sem
passar por centenas de ferramentas desnecessárias). Alguns deles permitem que você
visualize e edite o código SVG subjacente também. Aqui estão alguns editores SVG dignos
de nota:
25. SVG 719

Ferramentas SVG
Boxy (boxy-svg.com)
Boxy é um programa gráfico completo disponível para Mac, Windows e Linux por
modestos US$ 10 (no momento da redação deste artigo). Possui uma interface fácil
de usar, bem como um inspetor de código (FIGURA 25-14).
SVG-Edit (github.com/SVG-Edit/svgedit)
SVG-Edit funciona diretamente no navegador (svg-edit.github.io/svgedit/releases/

svg-edit-2.8.1/svg-editor.html) ou como um programa baixado. Ele fornece todas as
ferramentas básicas de desenho, camadas e a capacidade de visualizar e editar a
fonte SVG (FIGURA 25-14). Você também pode exportar para PNG, JPEG, BMP e
WebP. E é grátis, então não há razão para não experimentá-lo.
Boxy Editar SVG
FIGURA 25-14. Ferramentas de criação de SVG Boxy e SVG-Edit.
Ferramentas de design de interface
Uma enorme quantidade de ferramentas surgiu recentemente para projetar interfaces de

aplicativos e páginas da Web, como Sketch, AdobeXD e Affinity Designer. Todos eles são
baseados em vetores e facilitam a exportação de componentes no formato SVG. Como
acontece com muitas ferramentas de design visual que exportam código, os resultados
nem sempre são tão bem construídos quanto você gostaria, principalmente se você
pretende usar o SVG programaticamente com JavaScript, CSS e animação.
Editores de código
Se você gosta de escrever SVG à mão, ou se precisa mexer em SVGs preexistentes,

deve verificar se o editor de código de sua escolha tem uma extensão de visualização SVG
que renderiza seu código enquanto você escreve. As visualizações SVG estão disponíveis
para estes editores:
• Atom Editor (livre do GitHub): Obtenha o pacote SVG Preview no atom.

io/packages/svg-preview.
• Suportes (gratuitos da Adobe): Obtenha a extensão SVG de Peter Flynn em github.com/

peterflynn/svg-preview.

Dicas de produção SVG
DICAS DE PRODUÇÃO SVG
Ao criar um desenho SVG em uma ferramenta gráfica, lembre-se de que o resultado final é um arquivo de
texto. Como acontece com qualquer arquivo que está sendo entregue em uma página da Web, você deseja
que esse arquivo seja o menor possível. Se você planeja estilizar o SVG com CSS ou manipulá-lo com
JavaScript, deseja que a marcação seja estruturada da melhor maneira possível.
A desvantagem de usar ferramentas gráficas é que você não tem muito controle sobre o código que elas
produzem. A maioria deles exporta código SVG que é ineficiente, redundante e cheio de sujeira proprietária.
Existem medidas que você pode tomar ao projetar e depois de exportar o SVG para garantir que ele seja o
mais enxuto e mesquinho possível. Muitas postagens de blog foram escritas sobre otimização de SVG, mas
as dicas a seguir, embora não sejam abrangentes, devem apontar na direção certa. No final, você precisará
se familiarizar com as peculiaridades da ferramenta escolhida para antecipar e corrigir suas deficiências.
Práticas recomendadas de pré-exportação
As decisões que você toma no espaço de design podem melhorar sua saída SVG em termos de organização
e tamanho do arquivo. Novamente, ter em mente que o produto final é um arquivo de texto é útil para
otimização. Aqui estão algumas dicas de produção que ajudarão você a criar SVGs com a melhor qualidade
nos menores tamanhos de arquivo:
Defina a prancheta ou o tamanho do desenho em pixels
As dimensões da prancheta correspondem à janela de visualização (largura e altura

atributos) do elemento svg .
Use camadas para agrupar elementos logicamente
Se você planeja animar ou criar scripts em seu SVG, manter seu documento de design bem organizado
enquanto trabalha ajudará a acessar as peças necessárias posteriormente. No Illustrator e na maioria
das outras ferramentas, as camadas são convertidas em elementos de grupo (g) e as camadas
aninhadas são armazenadas como grupos aninhados.
Dê nomes significativos a elementos e camadas
Os nomes que você fornece aos elementos e camadas são usados como valores de classe e id no
código SVG, portanto, certifique-se de que sejam descritivos. Os nomes devem ser todos em
minúsculas e sem espaços de caracteres para que sejam apropriados como valores de atributo.
Simplificar caminhos
Quanto mais pontos e alças forem usados para definir um caminho, mais coordenadas aparecerão na
fonte SVG. Mais coordenadas significam mais caracteres e um tamanho de arquivo maior. Aproveite
qualquer função de “simplificar caminho” que sua ferramenta oferece. Considere também usar métodos
que reduzam o número de elementos no arquivo, como mesclar objetos que sempre aparecem como
uma unidade e usar um traço largo em vez de dois traços e um preenchimento. Se possível, certifique-
se de que sua ferramenta use elementos de forma como círculo e retângulo em vez de multiponto
25. SVG 721

caminhos para formas simples. Se sua ferramenta não fornecer uma maneira de fazer isso, é
possível substituir manualmente o código do caminho pelo elemento de forma simples.
Fique atento às casas decimais
Tendo em mente que mais caracteres resultam em um tamanho de arquivo maior, você pode
reduzir bytes do arquivo limitando o número de caracteres após os pontos decimais em seus
designs. Por exemplo, uma coordenada x, y “100.3004598, 248.9998765” requer mais dados
do que simplesmente “100.3, 249”.
Muitas ferramentas permitem limitar o número de casas decimais na exportação.
Você também pode optar por “ajustar aos pixels” ao configurar o documento para que os
pontos sempre caiam em números inteiros pares. A regra geral é que quanto menor a imagem,
mais casas decimais são necessárias para definir com precisão os pontos nos objetos.
Imagens grandes podem tolerar menor precisão sem comprometer a qualidade. Você pode
precisar experimentar para encontrar o equilíbrio certo de casas decimais e qualidade para o
tipo de imagem.
Evite efeitos raster dentro do SVG
A eficiência do SVG está no fato de ser baseado em vetores. Quando você introduz material
de imagem raster (bitmap) no SVG, essa vantagem de tamanho de arquivo é perdida. Em
alguns casos, você pode adicionar uma imagem raster deliberadamente para manipulação no
SVG, o que é bom. Mas esteja ciente de que certos efeitos em programas de desenho - como
desfoque, sombras projetadas, brilhos e assim por diante -
geralmente geram uma área de imagem raster quando você não esperava, aumentando muito
o tamanho do arquivo. Alguns efeitos de filtro, como sombras projetadas, podem ser feitos no
código após a exportação com mais eficiência. Se você achar que seu .svg
arquivo é incomumente grande, material de imagem raster inesperado é um provável suspeito.
Preste atenção nas fontes
Como qualquer sugestão de estilo de fonte na web, não há garantia de que a fonte escolhida
estará disponível na máquina do usuário, portanto, a fonte que você usa em seu SVG pode
não ser exibida. Certifique-se de testar e fornecer substitutos. Se houver uma pequena
quantidade de texto e não precisar ser pesquisável ou lido em voz alta por um dispositivo de
assistência, considere se a conversão do texto em caminhos é uma opção melhor.
Use traços centralizados
Embora não esteja relacionado ao tamanho do arquivo, você obterá melhores resultados se
projetar com traçados definidos para serem centralizados sobre o caminho, porque é assim
que o SVG lida com traçados nativamente. Algumas ferramentas, como Sketch, fazem ajustes
para compensar um traço externo ou interno, mas apenas centralizar seus traços é um ponto
de partida melhor.
Claro, existem muitas dicas específicas de ferramentas que não posso abordar aqui.
A Adobe oferece dicas para otimizar SVGs no Illustrator em sua página “Sobre SVG” (helpx.adobe.com/
illustrator/using/svg.html). Se você usa o Sketch, talvez queira investir no curso em vídeo “SVG
Workflows in Sketch” de Peter Nowell em
Sketchmaster. com.

Otimização pós-exportação
Mesmo com um planejamento cuidadoso com antecedência, os SVGs exportados têm muito
código redundante, metadados desnecessários, elementos ocultos e outros detalhes que
podem ser removidos com segurança sem afetar a maneira como o SVG é renderizado. É
uma boa ideia executar seus SVGs por meio de um otimizador para remover tudo isso e
diminuir o tamanho do arquivo.
SVGO
O melhor otimizador de SVG na cidade até o momento é o SVGO (github.com/svg/
svgo). Ele usa plug-ins que afetam ajustes individuais - como remover atributos vazios, remover
o atributo xmlns (tudo bem se o SVG for usado inline), remover comentários e dezenas de
outros - para que você possa escolher como deseja compactar o arquivo dependendo de seu
uso final.
A melhor coisa sobre o SVGO é que existem muitas maneiras de usá-lo! Ele é baseado em
Node.js, então você pode usá-lo como um módulo Node.js ou incorporá-lo em uma tarefa
Grunt ou Gulp. Existem plug-ins SVGO para Illustrator (SVGNow), Inkscape (SVGO-Inkscape)
e Sketch (SVGO Compressor). Também está disponível como uma ação de pasta do macOS,
em que a otimização é realizada quando você arrasta arquivos para ela. A lista completa de
opções está listada no site SVGO.
A maneira mais fácil de ver o SVGO em ação é usar a ferramenta SVGOMG baseada na web,
criada por Jake Archibald, que fornece uma interface gráfica de usuário (GUI) para SVGO
(jakearchibald.github.io/svgomg/). O SVGOMG permite alternar os vários plug-ins de otimização
individualmente e visualizar os resultados na visualização ao vivo (FIGURA 25-15), que é um
recurso útil durante o desenvolvimento.
FIGURA 25-15. O SVGOMG fornece uma GUI para a ferramenta de otimização SVGO (jakearchibald.
github.io/svgomg). Você pode alternar os métodos de otimização para ver a qualidade da imagem resultante
e o tamanho do arquivo.
25. SVG 723

SVGs responsivos
Compressão de arquivo
Por serem arquivos de texto, os SVGs podem ser compactados com ferramentas como Gzip ou Brotli.
Gzip é um utilitário no servidor que compacta arquivos de texto com algoritmos sofisticados.
SVGs compactados com Gzip podem resultar em arquivos com apenas 16 a 25% de seu tamanho
original. Um arquivo SVG compactado com gzip usa o sufixo .svgz. Para usar o Gzip para SVG, você
deve configurá-lo no servidor, o que está além do escopo deste capítulo, mas você pode encontrar
muitos tutoriais online. A economia de arquivos vale o esforço.
Brotli é um algoritmo de compactação de código aberto lançado pelo Google em 2015 que está dando
ao Gzip uma corrida pelo seu dinheiro em termos de compactação e desempenho. Assim como o Gzip,
o Brotli deve ser configurado no servidor. Os navegadores começaram a oferecer suporte à codificação
de conteúdo Brotli em 2017. Há uma boa explicação sobre Brotli no site MaxCDN em www.maxcdn.com/
one/visual-glossary/brotli/.
A página oficial do Brotli GitHub está em github.com/google/brotli.
SVGS RESPONSIVOS
Eu falei muito sobre como a natureza escalável dos SVGs os torna ótimos para uso em layouts
responsivos, onde eles podem ser dimensionados para se ajustarem às larguras dos elementos em
mudança sem perda de qualidade. Embora isso seja absolutamente verdade, a realidade é que há
alguns obstáculos a serem percorridos para garantir que os SVGs sejam dimensionados de maneira
previsível em todos os navegadores.
No Web Design Responsivo, muitas vezes queremos que os gráficos se estiquem ou diminuam para
caber na largura de um contêiner de texto. Com imagens bitmap, isso é fácil. Basta definir a largura da
img para 100% e sua altura é definida como automática por padrão. O navegador calcula
automaticamente a altura automática com base na largura especificada e determina a proporção (a
proporção entre a largura e a altura) da imagem com base em suas dimensões em pixels. Isso permite
que a imagem seja dimensionada proporcionalmente, sem ser esticada ou distorcida.
Com SVG, é um pouco mais complicado. Primeiro, você deve dar ao seu gráfico uma proporção
explícita. Os SVGs podem ser desenhados em qualquer tamanho e não possuem proporções intrínsecas
por padrão. Em segundo lugar (em alguns casos), você precisa contornar os bugs do navegador que
envolvem cálculos automáticos de altura.
A janela de visualização e a caixa de visualização
NOTA Para entender como os SVGs são dimensionados, você precisa ter uma boa compreensão da janela de
visualização SVG e de sua caixa de visualização. A janela de visualização, definida pela largura e altura
Quando o SVG é incorporado com img, object ou
atributos no elemento svg (veja Nota), é como uma janela através da qual você pode ver a área de
iframe, os atributos de largura e altura desses
desenho. Você pode pensar na janela de visualização como uma pequena janela do navegador (à qual
elementos configuram o tamanho da janela de
também nos referimos como “porta de visualização” ao longo deste livro) ou um elemento iframe
visualização.
exibindo um documento HTML. Assim como lá

SVGs responsivos
não há garantia de que todo o documento HTML caberá dentro da janela do navegador
ou iframe, não há garantia de que todo o desenho SVG caberá perfeitamente em sua
janela de visualização. Pode ser menor; pode ser maior e ser cortado. As dimensões do
espaço de desenho (também chamado de espaço do usuário) e as dimensões da
viewport são independentes uma da outra.
Anteriormente neste capítulo, vimos que a viewport usa um conjunto de coordenadas (o

O atributo viewBox
sistema de coordenadas da viewport) que começa em 0 no canto superior esquerdo e
é a chave para tornar
aumenta para a direita e para baixo. O espaço de desenho tem seu próprio conjunto de
coordenadas, o sistema de coordenadas do usuário, que é estabelecido com o atributo
possível o
viewBox no elemento svg e funciona da mesma forma. Esse atributo viewBox é a dimensionamento responsivo,
chave para tornar possível o dimensionamento responsivo, preservando a proporção do preservando a proporção do
desenho. desenho.
A sintaxe para o atributo viewBox é a seguinte:
viewBox="x y largura altura"
Os valores xey determinam a posição do canto superior esquerdo da caixa de

visualização dentro da viewport. Os atributos de largura e altura fornecem dimensões
e estabelecem sua proporção. Os valores podem ser separados por caracteres de
espaço, conforme mostrado, ou por vírgulas. As coordenadas xey podem ter valores
negativos, mas largura e altura devem sempre ser números inteiros positivos.
O SVG neste exemplo tem sua viewport (largura e altura) e sua viewbox (viewBox)
configuradas para 400×500 pixels:
<svg width="400" height="500" viewBox="0 0 400 500">


</svg>
A viewbox corresponde à viewport neste exemplo (este é o comportamento padrão se

viewBox for omitido), mas vamos ver o que acontece quando alteramos as dimensões
da viewbox. Mantendo a viewport do mesmo tamanho, podemos reduzir o tamanho da
viewbox pela metade (viewBox="0 0 200 250"). O resultado é que o desenho aumenta
na janela de visualização duas vezes o seu tamanho (FIGURA 25-16). Os dois sistemas
de coordenadas (usuário e viewport), que são os mesmos por padrão, agora têm escalas
diferentes: uma unidade de usuário agora é igual a duas unidades de viewport. O
objetivo deste exemplo é meramente demonstrar que as dimensões e sistemas de
coordenadas da viewport e da viewbox funcionam independentemente uma da outra e
podem ser usadas para ajustar a escala.
Eu poderia preencher meio capítulo descrevendo todos os recursos e efeitos do atributo

viewBox . Eu quero que você saiba tudo sobre isso, mas por uma questão de espaço,
vou encaminhá-lo para este maravilhoso tutorial de Sara Soueidan: “Entendendo
Sistemas de Coordenadas SVG e Transformações (Parte 1)—
A viewport, viewBox e preserveAspectRatio” (www.sarasoueidan.com/
blog/svg-coordinate-systems/). Você também encontrará explicações detalhadas nos
livros SVG recomendados no final do capítulo.
25. SVG 725

SVGs responsivos
Largura do sistema de coordenadas da Largura do sistema de coordenadas da
janela de visualização =ÿ400ÿ altura=ÿ500ÿ janela de visualização =ÿ400ÿ altura=ÿ500ÿ
0 100 200 300 400 0 100 200 300 400

0 0
100 200 300 400
100 200 300 400
100 100 100
Sistema de coordenadas do usuário
viewBox=ÿ0 0 200 250ÿ

200 200 200 100
300 300 300
400 400 400 200
500 500 500
Sistema de coordenadas do usuário
viewBox=ÿ0 0 400 500ÿ 300
400
500
FIGURA 25-16. A viewport (largura e altura) e a viewbox (viewBox).
Para os propósitos desta discussão SVG responsiva, no entanto, apenas tenha em mente que
o atributo viewBox é a chave para estabelecer a largura e a altura e o sistema de coordenadas
do usuário resultante do próprio desenho SVG, independente da “janela” da janela de
visualização que será exibido em.
O atributo preserveAspectRatio
O atributo preserveAspectRatio no elemento svg é responsável por garantir que o desenho
mantenha sua proporção, por isso é importante para nosso objetivo de criar um SVG responsivo
proporcional. Convenientemente, ele é ativado por padrão, o que significa que você não precisa
incluí-lo se esse for o efeito desejado.
Defini-lo como nenhum significa que você pode esticar e comprimir o desenho como quiser,
assim como você pode fazer uma imagem de bitmap.
O atributo preserveAspectRatio também recebe valores de palavras-chave para como a

viewbox deve ser alinhada em sua viewport. Eles funcionam muito como valores percentuais
para a propriedade CSS background-image-position .
<svg viewBox="0 0 300 200" preserveAspectRatio="xMaxYMax meet">
Neste exemplo, xMaxYMax posiciona a caixa de visualização totalmente à direita e contra o

eixo inferior da janela de visualização (“Max” é equivalente a 100%). A palavra-chave meet diz
para dimensioná-la até atingir a altura ou a largura da janela de visualização (semelhante a
conter para imagens de plano de fundo). A alternativa é slice, que dimensiona o desenho para
cobrir toda a viewport, mesmo que parte do desenho seja cortada (como a capa para imagens
de fundo).

SVGs responsivos
Novamente, recomendo que você conheça os recursos do preserveAspectRatio

por conta própria, mas por enquanto, saiba que é o atributo que faz o trabalho de manter a
proporção intacta, mesmo que tiremos vantagem da configuração padrão e não a incluamos
explicitamente.
Agora que você tem alguma familiaridade com os mecanismos de dimensionamento de SVG
em funcionamento nos bastidores, vejamos as técnicas para fazer SVGs em páginas da Web
dimensionarem proporcionalmente dentro de um tamanho de contêiner variável.
SVGs responsivos incorporados com img e object

Se você incorporar seu SVG no documento de origem com os elementos img ou object , o
processo para torná-lo dimensionado automaticamente é bastante simples.
Primeiro, no próprio arquivo SVG, certifique-se de que o elemento svg inclua o viewBox
atributo para estabelecer as dimensões do desenho. Por padrão, a proporção será preservada
mesmo se você não incluir o preserveAspectRatio
atributo. Se você quiser que o gráfico preencha completamente a largura de seu contêiner,
omita os atributos de largura e altura para o elemento svg porque o padrão é 100%, que é o
comportamento que buscamos (consulte Nota). NOTA
Agora vamos ver o elemento img ou object que o incorpora. A largura e a altura aplicadas ao Os atributos de largura e altura devem ser
elemento de incorporação determinam o tamanho no qual o SVG aparece no layout. Como as incluídos quando você deseja definir um tamanho
inicial para o SVG, como para ícones que devem
propriedades de largura e altura são automáticas por padrão, se você omiti-las, as dimensões
permanecer no tamanho de ícone,
do SVG (100%) serão usadas. Se você especificar apenas a largura ou apenas a altura, o
independentemente do layout.
navegador usará a proporção da caixa de visualização para calcular a dimensão não especificada.
Confiar no dimensionamento padrão dos elementos img ou object funciona nos navegadores
atuais, mas você obterá melhores resultados em navegadores mais antigos (principalmente
Internet Explorer; consulte Aviso) se definir explicitamente a largura e a altura do elemento de AVISO
incorporação. Por exemplo:
Quando os valores de largura e altura para o
img { objeto de incorporação são omitidos, o Internet
largura: 100%; Explorer faz com que o SVG preencha a largura
altura: automático;
do contêiner, mas fornece uma altura de 150
}
pixels. A especificação HTML5 define o tamanho
Esta abordagem não deixa nada ao acaso. O resultado é um arquivo SVG com largura e altura padrão da mídia incorporada, como elementos
padrão de 100% preenchendo um elemento img definido para preencher a largura de seu img, object e iframe , com 300 pixels de largura
contêiner proporcionalmente. por 150 pixels de altura. Portanto, a altura de 150

pixels do IE em SVGs não é totalmente aleatória;
No exemplo a seguir, incorporei um SVG com um elemento img em uma div eles honraram o valor de altura da especificação
que é sempre definido como 50% da largura da janela do navegador, como pode ocorrer em um HTML5.
layout responsivo (FIGURA 25-17). Observe que não há largura e altura
atributos na fonte SVG e o viewBox define a proporção. À medida que a janela fica maior e
menor, o SVG é dimensionado com ela, mantendo a qualidade vetorial nítida em todas as
escalas. Um contorno no div revela seus limites, e eu configurei suas margens laterais para
auto para mantê-lo centralizado na janela do navegador:
25. SVG 727

SVGs responsivos
A MARCAÇÃO SVG (flowers.svg)
<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" viewBox="0 0 160 120">

</svg>
A MARCAÇÃO HTML
<div class="container">
<img src="flores.svg" alt="flores">
</div>
OS ESTILOS
.container
{ largura:
50%; contorno: cinza sólido de
1px; margem: 2em automático; }
/* Correção do IE */
img
{ largura: 100%;
altura: automático;
}
FIGURA 25-17. O SVG é dimensionado automaticamente e proporcionalmente ao tamanho de

seu contêiner.
SVGs em linha responsivos

Vou apenas informar de antemão que preservar a proporção de SVGs embutidos
colocados na fonte com o elemento svg não é tão simples quanto no exemplo
anterior. Você precisa empregar um hack interessante para fazer com que muitos
navegadores cumpram. Vou explicar a técnica aqui da forma mais eficiente possível.
Primeiro, como na mídia incorporada, inclua o atributo viewBox e omita os atributos

largura e altura no elemento svg se desejar que a largura seja 100% do contêiner
(aproveitando seus valores padrão).
Na ausência de uma regra de estilo substituindo especificamente os padrões svg , a

largura será de 100% e sua proporção será preservada. Navegador atual

SVGs responsivos
as versões suportam isso conforme o esperado - dimensionando o SVG em seu contêiner

proporcionalmente. No entanto, navegadores mais antigos (incluindo todas as versões do Internet
Explorer) não, portanto, precisamos empregar o “hack de preenchimento” para manter as proporções
do SVG embutido.
O truque de preenchimento é um pouco complicado, mas as etapas são as seguintes (FIGURA 24-18):
1. Coloque o svg em um container div.
2. Defina a altura desse div para 0 ou 1 pixel.
3. Aplique uma quantidade de preenchimento no topo da div que dê a mesma proporção do SVG (há
um pouco de matemática envolvida aqui).
4. Assim que a div for expandida para as proporções adequadas com preenchimento, posicione
absolutamente o elemento svg no canto superior esquerdo da div do contêiner.
Altura da div (0 pixels)
AVISO
Tanto o hack de preenchimento quanto o

preenchimento = 75% da largura da div dimensionamento de altura automática de proporção
de aspecto normal podem quebrar dentro dos layouts Grid e Flexbox
Desde o início de 2018, existem diferenças importantes

entre os navegadores, portanto, certifique-se de testar
seus designs completamente.
svg está absolutamente posicionado

no canto superior da div.
svg é empurrado para baixo.
O contêiner é definido para 100% de largura

e o svg é dimensionado com ele.
FIGURA 25-18. Como o hack de preenchimento funciona para fazer com que os SVGs embutidos mantenham
sua proporção em todos os navegadores que suportam SVG.
É um pouco complicado (eles não chamam isso de “hack” à toa!), mas funciona.
A base deste hack é o comportamento definido de preenchimento. O preenchimento, quando
especificado em valores percentuais, é sempre baseado na largura do elemento (mesmo valores
superiores e inferiores). Isso significa que, à medida que a largura do div do contêiner muda, também
muda a quantidade de preenchimento, sempre mantendo o mesmo relacionamento. Isso configura
uma proporção constante para o SVG preencher.
25. SVG 729

SVGs responsivos
Aqui está um exemplo que mostra como funciona o hack de preenchimento:
A MARCAÇÃO
<div class="container">
<svg version="1.1" viewBox="0 0 160 120">
/* desenhando conteúdo */
</svg>
</div>
OS ESTILOS
.container {
largura: 100%;
altura: 0;
acolchoamento superior: 75%; /* (120/160)*100% */
}
svg {
topo: 0;
esquerda: 0;
largura: 100%;
altura: 100%;
}
Na marcação, você vê o elemento svg em seu #container div e suas dimensões de caixa de
visualização definidas como 160×120 pixels. A largura do contêiner é definida como 100%
(também pode ser definida para uma porcentagem diferente) com altura 0. A declaração de
preenchimento superior expande o div para a proporção adequada, que é calculada dividindo
a altura do SVG por sua largura e multiplicando o resultado pela largura percentual do div:
(svg-height / svg-width) * div-width%
Em nosso exemplo, o preenchimento é definido como 75% [(120 / 160) × 100% = 75%], que
corresponde à proporção de 4:3 do SVG. Observe também que o contêiner está relativamente
posicionado para criar o contexto de posicionamento para o elemento filho svg (você se lembra
de transformar elementos em contextos de posicionamento com position: relative do Capítulo
15, Floating and Positioning?)
Recursos adicionais
Esta seção foi direto ao ponto e forneceu exatamente o que você precisa saber para fazer SVGs
dimensionarem em layouts responsivos. Claro, há muito mais na história, então eu recomendo
estes artigos para obter informações e técnicas adicionais:
• “Como dimensionar SVG” por Amelia Bellamy-Royds para CSS-Tricks (css-

tricks.com/scale-svg/)
• “Tornando SVGs Responsivos com CSS” por Sara Soueidan para Codrops (tympanus.net/
codrops/2014/08/19/making-svgs-responsive-with-css/)
Para fornecer uma experiência SVG ainda mais personalizada em sua interface de usuário, vá
além do simples dimensionamento e altere o design do ícone com um SVG adaptável (consulte
a barra lateral “Ícones adaptáveis”).

Teste-se
Ícones adaptáveis
O problema de simplesmente dimensionar SVGs (ou qualquer imagem, na consultas de mídia (tympanus.net/codrops/2014/08/19/making svgs-responsive-
verdade) menor é que os detalhes podem se perder em tamanhos pequenos. with-css/).
Uma abordagem para resolver esse problema é fornecer versões simplificadas • “Repensando o SVG responsivo” de Ilya Pukhalski descreve
de ícones ou logotipos quando a imagem for muito pequena. Ícones adaptáveis várias abordagens SVG adaptáveis (www.smashingmagazine.
(ou responsivos) usam consultas de mídia para testar o tamanho da janela de
com/2014/03/rethinking-responsive-svg/).
visualização e alguns estilos inteligentes no SVG para fornecer a quantidade
apropriada de detalhes em vários tamanhos. A FIGURA 25-19 mostra um
conjunto de ícones criados por Joe Harrison, com uma explicação

emresponsivicons.co.uk.
Existem vários métodos para alcançar o efeito. O ícone da casa de Joe foi feito
com um sprite SVG. Você também pode revelar e ocultar grupos de elementos
de desenho no SVG com base no tamanho da janela de visualização. Estes
artigos fornecem algumas instruções:
• “Tornando SVGs Responsivos com CSS” por Sara Soueidan

FIGURA 25-19. Um exemplo de ícones adaptativos de Joe
inclui uma seção no final sobre como fazer SVGs adaptáveis com Harrison.
MAIS EXPLORAÇÃO SVG
Obviamente, eu poderia apenas arranhar a superfície dos Scalable Vector Graphics neste capítulo.
Quando estiver pronto para usar o SVG em seu site, você terá mais retoques para fazer. Existem
muitos volumes e tutoriais online escritos sobre SVG, mas esses são os recursos que mais me
ajudaram em minha própria exploração. Eu os recomendo de coração.
• SVG Essentials, 2ª Edição por J. David Eisenberg e Amelia Bellamy Royds (O'Reilly)
• Usando SVG com CSS3 e HTML5 por Amelia Bellamy-Royds, Kurt Cagle,
e Dudley Storey (O'Reilly)
• SVG prático de Chris Coyier (A Book Apart)
• A desenvolvedora e especialista em SVG Sara Soueidan escreveu muitos artigos SVG úteis em
seu blog em www.sarasoueidan.com.
TESTE-SE
Acabei de jogar um monte de informações SVG em você. Tente fazer este teste para ver o que ficou.
As respostas aparecem no Apêndice A.
As primeiras quatro perguntas referem-se a este elemento SVG:
<rect x="0" y="0" largura="600" altura="400" />

1. O que é correto?
25. SVG 731

Teste-se
2. O que x e y fazem?
3. O que a largura e a altura fazem?
4. Explique o caractere / .
Agora, de volta às nossas perguntas regulares:
5. Qual é a principal diferença entre recorte e mascaramento de SVG?
6. Cite três maneiras de reduzir o tamanho do arquivo de um SVG.
7. Qual é a versão de SVG mais amplamente suportada?
uma. SVGTiny
b. SVG 1.1
c. SVG 2
d. SVG, Boogaloo Elétrico
8. Cite três das cinco maneiras de estilizar elementos em um SVG.
9. Qual dos seguintes pode ser usado para animar elementos em um SVG?
uma. Elementos SVG especiais para animação
b. JavaScript
c. Transições CSS e animação de quadro-chave

E... Terminamos!
E... TERMINAMOS!
Ei! Chegamos ao final do livro! Espero que você tenha gostado deste tour detalhado por
HTML, CSS, JavaScript e produção de imagens. Eu sei que o conteúdo aqui é bem denso,
mas lembre-se de que você não precisa aprender tudo de uma vez e não precisa manter tudo
na cabeça. Caramba, escrevi este livro e ainda volto a ele para pesquisar atributos,
propriedades e valores.
Com a prática, no entanto, muito disso se tornará uma segunda natureza para você.
Espero que você encontre muitas oportunidades para colocar seu novo conhecimento em
uso. Boa sorte em seus empreendimentos na web!
25. SVG 733

VI
APÊNDICES
APÊNDICE
RESPOSTAS UMA
Capítulo 1: Introdução ao Web Design

1. b, d, a, c
2. O W3C orienta o desenvolvimento de tecnologias relacionadas à web.
3. c, d, a, b
4. O desenvolvimento front-end está preocupado com os aspectos do site que aparecem ou

estão relacionados ao navegador. O desenvolvimento de back-end envolve os aplicativos
e bancos de dados necessários no servidor para a funcionalidade do site.
5. Uma ferramenta FTP é usada para transferir arquivos entre computadores pela Internet,
como entre sua máquina local e o servidor. Você pode usar uma ferramenta FTP
fornecida por sua empresa de hospedagem, incorporada a um editor de código ou como
um aplicativo independente.
Capítulo 2: Como a Web funciona
1. c; 2. j; 3.h; 4. g; 5. f; 6. eu; 7. b; 8. a; 9. d; 10. e
Capítulo 3: Alguns grandes conceitos que você precisa conhecer
1. Existem vários fatores desconhecidos quando você está desenvolvendo um site.

Alguns que foram abordados neste capítulo incluem:
— O tamanho da tela ou janela do navegador
— A velocidade de conexão com a internet do usuário
— Se o JavaScript está ativado
— Se o navegador suporta recursos específicos
— Se o usuário está em uma mesa ou em trânsito (contexto e atenção)
737
2. 1. c; 2. d; 3. e; 4. a; 5. b
3. As quatro categorias gerais de deficiência incluem:
— Deficiência visual: verifique se o conteúdo está em ordem semântica e lógica

para quando for lido por um leitor de tela.
— Deficiência auditiva: fornecer transcrições de conteúdo de áudio e vídeo.
— Deficiência de mobilidade: use medidas que ajudem os usuários sem mouse

ou teclado.
— Deficiência cognitiva: o conteúdo deve ser simples e claramente organizado.
4. Você usaria um gráfico em cascata para avaliar o desempenho do seu site no

processo de otimização.
Capítulo 4: Criando uma página simples

1. Uma tag faz parte da marcação (colchetes e nome do elemento) usada para delimitar
um elemento. Um elemento consiste no conteúdo e suas tags.
2. A marcação recomendada para um documento HTML5 mínimo é a seguinte:

<!DOCTYPE
html> <html>
<head> <meta
charset="utf8">
<title>Título</title> </
head> <body> </body> </
html>
3. a. Sunflower.html—Sim.
b. index.doc—Não, deve terminar em .html ou .htm.
c. cozinhar home page.html—Não, pode não haver espaços de caracteres.
d. Song_Lyrics.html—Sim.
e. games/ rubix.html—Não, pode não haver barras no nome.
f. %whatever.html—Não, pode não haver símbolos de porcentagem.
4. a. Está faltando o atributo src : <img src="birthday.jpg">
b. A barra na tag final está faltando: <em>Parabéns!</em>
c. Não deve haver nenhum atributo na tag final:

<a href="file.html">texto vinculado</a>
d. A barra deve ser uma barra:
<p>Este é um novo parágrafo</p>
5. Faça um comentário:

738 Parte VI. Apêndices

Capítulo 5: Marcando Texto

1. Aqui está a marcação para uma quebra temática entre estes parágrafos:
<p>As pessoas que me conhecem sabem que adoro cozinhar.</p>

<hr>
<p>Criei este site para compartilhar algumas das minhas receitas favoritas.</p>
2. Um blockquote é um elemento de nível de bloco usado para citações longas ou material citado
que pode consistir em outros elementos de bloco. O elemento q (quote) é para citações curtas
que vão no fluxo do texto e não causam quebras de linha.
3. O pré - elemento.
4. O elemento ul é um elemento de lista não ordenada. É usado para listas que não
precisam aparecer em uma seqüência específica. Eles são exibidos com marcadores por
padrão. O elemento ol é uma lista ordenada na qual a sequência é importante. O navegador
insere automaticamente números para listas ordenadas.
5. Use uma folha de estilo para remover marcadores de uma lista não ordenada.
6. <abbr title="World Wide Web Consortium">W3C</abbr>
7. dl é o elemento usado para identificar toda uma lista de descrição. O elemento dt é usado para
identificar apenas um termo dentro dessa lista.
8. O atributo id é usado para identificar um elemento único em um documento, e o nome em seu

valor pode aparecer apenas uma vez em um documento. A classe é usada para classificar
vários elementos em grupos conceituais.
9. Um elemento de artigo destina-se a um corpo de conteúdo independente que seria apropriado

para distribuição ou poderia aparecer em um contexto diferente. Um elemento de seção divide
o conteúdo em partes relacionadas tematicamente.
Capítulo 6: Adicionando Links
Exercício 6-7
1. <p><a href="tapenade.html">Vá para a receita de tapenade</a></p>
2. <p><a href="../salmon.html">Experimente com Salmão com Alho.</a></p>
3. <p><a href="pasta/linguine.html">Experimente o Linguine com Molho de Amêijoa</

a></p>
4. <p><a href="../../about.html">Sobre a cozinha de Jen</a></p>
5. <p><a href="http://www.allrecipes.com">Vá para Allrecipes.com</a></p>
A. Respostas 739
Teste-se
1. <a href="tutorial.html">...</a>
2. <a href="examples/instructions.html">...</a>
3. <a href="examples/people/family.html">...</a>
4. <a href="/examples/things/boot.html">...</a>
5. <a href="../index.html">...</a>
6. <a href="http://www.learningwebdesign.com">...</a>
7. <a href="../instructions.html">...</a>
8. <a href="../../index.html">...</a>
9. <img src="images/arrow.gif" alt="" />
10. <img src="../images/arrow.gif" alt="" />
11. <img src="../../images/bullet.gif" alt="" />
Capítulo 7: Adicionando Imagens
1. Os atributos src e alt são necessários para que o documento seja válido.
Se o atributo src for omitido, o navegador não saberá qual imagem usar. Você pode
deixar o valor do atributo alt vazio se o texto alternativo for sem sentido ou
desajeitado quando lido no contexto.
2. <img src="furry.jpg" alt="">
3. a) Porque os documentos HTML não são válidos se o atributo alt for omitido, eb) alt
melhora a acessibilidade fornecendo uma descrição da imagem se ela não estiver
disponível ou não visível.
4. As três causas prováveis para uma imagem ausente são: a) o URL está incorreto, então o
navegador está procurando no lugar errado ou pelo nome de arquivo errado (os nomes
diferenciam maiúsculas de minúsculas); b) o arquivo de imagem não está em um formato
aceitável; ec) o arquivo de imagem não é nomeado com o sufixo apropriado (.gif, .jpg
ou .png, conforme apropriado).
5. Descritores x especificam a resolução de tela usada para direcionar monitores de alta

resolução. O descritor w fornece o tamanho real do arquivo de imagem que o
navegador usa para fazer a melhor seleção com base na largura da janela de visualização.
6. Um pixel de dispositivo é o quadrado de luz colorida que compõe a tela. Os pixels

CSS (também chamados de “pixels de referência”) compõem a grade que os
dispositivos usam para definir o que aparece na tela. O pixel CSS pode ser composto
de vários pixels de dispositivo.
7. b, c, d, a, d, b
8. O elemento picture fornece um conjunto de imagens para o navegador escolher.

Quando a janela de visualização tiver 480 pixels ou mais, a imagem aparecerá em

80% da largura da janela de visualização. Para tamanhos de viewport menores, ele

preenche 100% da viewport. Existe um conjunto de imagens em formato WebP para
navegadores que as suportam; caso contrário, o navegador escolherá do conjunto de JPEGs.
9. O cache de disco é onde os navegadores armazenam temporariamente os arquivos

baixados pela rede para que possam ser reutilizados. Aproveitar os recursos em cache
elimina a necessidade de solicitações repetidas do servidor para o mesmo arquivo e pode
aumentar o desempenho.
10. As vantagens incluem marcação simples e familiar, excelente suporte ao navegador,

cache de imagens e fallbacks disponíveis. As desvantagens incluem a incapacidade de
manipular as partes do SVG com folhas de estilo ou JavaScript.
11. As vantagens dos SVGs inline incluem a capacidade de tirar proveito de todos os recursos
do SVG (animação, script e aplicação de regras de estilo CSS), bom suporte ao navegador
e menos solicitações do servidor. As desvantagens incluem quantidades de código
potencialmente pesadas no documento HTML, manutenção de imagem mais complicada
e falta de cache.
12. Quando é puramente de apresentação e não faz parte do conteúdo editorial do

a página.
13. image/svg+xml é o tipo MIME de um arquivo SVG. Você pode precisar incluí-lo como o
valor do atributo type no elemento picture ou usá-lo para configurar seu servidor para
reconhecer arquivos SVG como imagens.
14. http://www.w3.org/2000/svg é o ponteiro para o namespace SVG padronizado pelo

W3C. Ele aparece como o valor do atributo xmlns (espaço de nomes XML) em elementos
svg .
Capítulo 8: Marcação de Tabela

1. A própria tabela (tabela), linhas (tr), células de cabeçalho (th), células de dados (td) e um
legenda opcional (legenda).
2. O elemento table pode conter diretamente tr, caption, colgroup, thead,

elementos tbody e tfoot .
3. O elemento tr pode conter apenas alguns elementos th e td .
4. Use o elemento col se desejar incluir informações adicionais sobre a estrutura de uma
tabela, especificar larguras para acelerar a exibição ou adicionar certas propriedades de
estilo a uma coluna de células.
5. a) A legenda deve ser o primeiro elemento dentro do elemento tabela ;
b) Não pode haver texto diretamente no elemento tabela ; deve ir em um th ou td;
c) Os elementos th devem ficar dentro do elemento tr ;
d) O segundo elemento tr não possui uma tag de fechamento;
e) Não há elemento colspan ; deve ser um td com um atributo colspan .
A. Respostas 741
Capítulo 9: Formulários
1. a. POST (por causa de problemas de segurança)
b. POST (porque usa o tipo de entrada de seleção de arquivo)
c. GET (porque você pode querer marcar os resultados da pesquisa)
d. POST (porque é provável que tenha uma entrada de texto longa)
2. a. Menu suspenso: <selecionar>
b. Botões de opção: <input type="radio">
c. <textarea>
d. Oito caixas de seleção: <input type="checkbox">
e. Menu de rolagem: <select multiple="multiple">
3. a. O atributo type está ausente.
b. checkbox não é um nome de elemento; é um valor do atributo type no elemento input .
c. O elemento de opção não está vazio. Deve conter o valor de cada

opção (por exemplo, <option>Laranja</option>).
d. O atributo de nome necessário está ausente.
e. A largura e a altura de uma área de texto são especificadas com os atributos cols e rows ,
respectivamente.
Capítulo 10: Mídia Incorporada
1. Um contexto de navegação aninhado funciona como uma janela do navegador dentro de outra
janela do navegador. Você pode criar um com um elemento iframe ou um objeto
elemento (pontos de bônus se você tiver ambos).
2. O atributo sandbox permite que os desenvolvedores definam limitações sobre o que o

conteúdo aninhado pode fazer e é importante por motivos de segurança.
3. Para especificá-lo com o atributo type necessário em um elemento de origem e configurar o

servidor para reconhecer o tipo de mídia.
4. a. recipiente, B. codec de vídeo, c. codec de vídeo, d. codec de áudio, e. recipiente,

f. codec de vídeo, g. codec de áudio, h. recipiente
5. O atributo poster especifica uma imagem que aparece no player de vídeo

até que o vídeo seja reproduzido.
6. Um arquivo .vtt é um arquivo de texto no formato WebVTT que contém legendas, legendas,
descrições, títulos de capítulos ou metadados sincronizados com um arquivo de vídeo ou
áudio.

7. SVG é um formato vetorial e a tela é baseada em pixels (raster). Os SVGs podem ser
dimensionados sem perda de qualidade, mas a tela depende da resolução e não é bem
dimensionada. Você pode estilizar os elementos em um SVG com CSS e afetá-los com
JavaScript, mas a tela pode ser manipulada apenas com JavaScript.
8. strokeRect() e fill()
Capítulo 11: Apresentando Folhas de Estilo em Cascata

1. seletor: blockquote; propriedade: altura da linha; valor: 1,5; declaração:
altura da linha: 1,5;
2. O texto do parágrafo ficará cinza, pois quando houver regras conflitantes de peso idêntico,
será utilizada a última listada na folha de estilos.
3. a. Use uma regra com várias declarações aplicadas ao elemento p .
p{
família de fontes: sem serifa;
tamanho da fonte: 1em;
altura da linha: 1.2em;
}
b. Os pontos e vírgulas estão faltando.
blockquote
{ tamanho da fonte: 1em;
altura da linha: 150%;
cor: cinza;
}
c. Não deve haver colchetes em torno de cada declaração, apenas

em torno de todo o bloco de declaração.
corpo {cor de fundo: preto;

cor: #666;
margem esquerda: 12em;
margem direita: 12em;
}
d. Isso pode ser tratado com uma única regra com um tipo de elemento agrupado
seletor.
p, blockquote, li {
cor branca;
}
e. Este estilo embutido não tem o nome da propriedade.
<strong style="color: red">Aja agora!</strong>
A. Respostas 743
4. html
cabeça corpo
p ul h2 ph2p _ _
img forte li li li
NOTA: os estilos de cor aplicados ao elemento img são exibidos apenas na borda (se houver).
FIGURA A-1. Resposta ao Capítulo 11, pergunta 4.
Capítulo 12: Formatando Texto

1. a. 4; b. 1; c. 7; d. 3; e. 2; f. 9; g. 8; h. 5; eu. 6
2. a. corpo {cor: vermelho;}
b. h2 {cor: vermelho;}
c. h1, p {cor: vermelho;}
d. .special {cor: vermelho; }
e. #intro {cor: vermelho;}
f. #principal forte {cor: vermelho;}
g. h2 + p {cor: vermelho;}
Capítulo 13: Cores e Planos de Fundo

1. g. a, b e c
2. d. rgb(FF, FF, FF)
3. a. 5; b. 1; c. 4; d. 6; e. 2; f. 3
4. a. 1; b. 3; c. 2; d. 6; e. 5; f. 4

Capítulo 14: Pensando Dentro da Caixa

A. borda: meio preto duplo;
B. estofamento: 2em;
C. estofamento: 2em; borda: vermelho sólido de 4px;
D. borda: vermelho sólido de 4px; margem: 2em;
E. preenchimento: 1em 1em 1em 6em; borda: 4px preto pontilhado; margem: 1em 6em;
ou
preenchimento: 1em; padding-esquerda: 6em; borda: 4px tracejada; margem: 1em 6em;
F. preenchimento: 1em 50px; borda: preto sólido de 2px; margem: 0 automático;
Capítulo 15: Flutuação e Posicionamento

1. b não é verdade. Os flutuadores são posicionados na borda do conteúdo, não no pad
borda de ding.
2. c está incorreto. Floats não usam propriedades de deslocamento, então não há razão para
incluir right.
3. Limpe o rodapé para que ele comece abaixo de uma barra lateral flutuante em ambos os lados:
rodapé {limpar: ambos;}
4. a) absoluto; b) absoluto, fixo; c) fixo; d) relativa, absoluta, fixa; e) estático; f) parente; g)

absoluto, fixo; h) relativo, absoluto, fixo; e) parente
Capítulo 16: Layout CSS com Flexbox e Grid

1. Transforme seu elemento pai em um contêiner flex configurando display para flex.
O elemento filho se torna um item flexível automaticamente sem código extra.
2. a. 2; b. 4; c. 1; d. 3
3. A propriedade align-items posiciona os itens em relação à sua linha flexível, enquanto align-
content distribui espaço ao redor e dentro de várias linhas. Ambas as propriedades são
aplicadas ao contêiner e ambas estão relacionadas ao posicionamento ao longo do eixo
transversal.
4. a. 4; b. 1; c. 3; d. 2
5. a. 4; b. 3; c. 2; d. 5; e. 1
6. Regras de estilo para exibir os itens na ordem mostrada na FIGURA 16-49.
.box6 {pedido:
-1;} .box1, .box2, .box3 {pedido: 1;}
7. A principal diferença entre Grid Layout e Flexbox é que Grid cria layouts em duas dimensões—
linhas e colunas—mas o Flexbox organiza os elementos em um eixo. (Contínuo...)
A. Respostas 745
As semelhanças entre Grid e Flexbox incluem:
— Para Grid e Flexbox, tornando um elemento um container automatizado

cally transforma seus filhos diretos em itens.
— Ambos são baseados na direção do idioma do documento.
— Ambos podem criar layouts de página inteira (embora Grid seja mais adequado para
a tarefa).
— Você pode alterar a ordem dos itens com a propriedade order .
— Ambos usam o Módulo de Alinhamento de Caixa para alinhamento de item e conteúdo

mento.
8. Modelo de grade para o layout mostrado na FIGURA 16-50:
grid-template-rows: 12em min-conteúdo 100px;

grid-template-columns: 300px 2fr 1fr;
Usando a propriedade abreviada da grade :
grade: 12em conteúdo mínimo 100px / 300px 2fr 1fr;
(Nota: auto pode ser usado em vez de min-content em ambos os exemplos.)
9. a. E; b. D; c. C; d. UMA; e. B
10. #galeria:
intervalo de coluna: 1em;
}
11. d, a, c, b, e
Capítulo 17: Web Design Responsivo

1. Um site responsivo entrega a mesma fonte HTML no mesmo URL, independentemente do
dispositivo usado. Um site m-dot envia um documento em uma URL separada quando
recebe uma solicitação de um dispositivo móvel. Sites específicos para celular também
tendem a reduzir o número de opções e conteúdo na primeira tela.
2. Ele define o tamanho da janela de visualização que o navegador móvel usa para renderizar
a página no mesmo tamanho da tela.
3. img { largura máxima: 100%; }
4. Define a margem do lado esquerdo e direito da página para 10% se a porta de visualização
for 60em ou maior.
5. Se o layout for criado com CSS Grid Layout, use as unidades fr e minmax() para tornar as
colunas e linhas flexíveis ao definir os limites. Se você tiver elementos de página no
Flexbox, use as propriedades flex para deixá-los crescer e diminuir conforme necessário.
Caso contrário, use valores percentuais para elementos de página para que sejam
redimensionados proporcionalmente. Evite medições de pixels fixos.

6. Quando você usa ems para consultas de mídia, os elementos da página permanecem proporcionais
ao tamanho do tipo. Isso pode ajudar a manter os comprimentos de linha consistentes.
7. Em uma regra @media em uma folha de estilo, em regras @import que chamam folhas de
estilo externas e no elemento link para uma folha de estilo externa.
8. Use uma fonte legível, diminua um pouco o tamanho, use uma altura de linha mais apertada,
e use margens menores.
9. Você pode usar um acordeão para ocultar e revelar as opções do submenu, ou colocar o
submenu em uma página de destino separada e criar um link para ele na navegação
principal.
10. Teste em dispositivos reais, use um emulador ou use um serviço de teste de terceiros.
Capítulo 18: Transições, Transformações e Animação

1. Interpolação é o processo em animação no qual os quadros são gerados entre dois estados
de ponto final.
2. Uma transição teria dois quadros-chave, um para o estado inicial e outro para o final.
3. a. atraso de transição: 0,5s;
b. função de tempo de transição: linear;
c. duração da transição: 0,5s;
d. propriedade de transição: altura da linha;
4. c. text-transform não é uma propriedade animável.
5. facilidade é a função de temporização padrão. Começa devagar, acelera rapidamente,

e, em seguida, desacelera novamente no final.
6. .2s é o valor da duração da transição (quanto tempo dura a animação).
7. Pergunta capciosa! Eles chegarão ao mesmo tempo, 300ms após o início da transição. A
função de temporização não tem efeito sobre a quantidade total de tempo que leva.
8. a. transform: girar(7deg);
b. transform: traduzir(-50px, -25px);
c. origem de transformação: parte inferior direita;
d. transformar: escala(1,25);
9. O valor 3 indica que o elemento deve ser redimensionado três vezes maior que sua altura
original.
10. perspectiva: 250; porque valores numéricos mais baixos indicam distância mais próxima
e são mais dramáticos.
A. Respostas 747
11. A borda tem 3 pixels de largura em 50% através da animação.
12. a. direção de animação: reverso;
b. duração da animação: 5s;
c. atraso de animação: 2s;
d. contagem de iteração de animação: 3;
e. modo de preenchimento de animação: encaminha;
Capítulo 19: Mais técnicas de CSS
1. d. Tudo o que precede.
2. d. a e c
3. e. b e d
4. Use Flexbox ou flutuadores.
5. a. 2; b. 5; c. 1; d.4; e. 3
6. a. não; b. sim; c. não (se a classe .border for necessária para que os estilos apareçam)
7. Até o momento, o Modernizr tem melhor suporte ao navegador do que a detecção de recursos
CSS. Uma vez que todos os navegadores suportem a detecção de recursos CSS, o CSS
será mais rápido e confiável do que uma solução que requer JavaScript.
Capítulo 20: Ferramentas modernas de desenvolvimento da Web
1. É o programa que interpreta os comandos que você digita em um comando

ferramenta de linha.
3. Uma sequência de caracteres que indica que o computador está pronto para receber um
comando.
4. Você criaria um novo diretório (pasta) no diretório atual com o nome “newsite”.
5. Fornecer uma sintaxe mais eficiente para autoria (tradicionalmente conhecida como “pré-
processamento”) e otimização (conhecida como “pós-processamento”) de arquivos CSS
padrão.
6. Depois de aprender a sintaxe, Sass (ou LESS e Stylus) pode tornar os estilos de escrita
menos redundantes e mais fáceis de editar. Você também pode ser obrigado a conhecer
Sass para alguns trabalhos de desenvolvimento web.
7. As tarefas comuns do pós-processador CSS incluem verificação de erros, adição de prefixos

de fornecedores, inserção de hacks que corrigem bugs em versões antigas do IE, incluindo
fallbacks para recursos CSS mais recentes, conversão de rems para pixels, conversão de
formatos de cores para RGB e análise da estrutura do seu Código CSS. Esta não é de
forma alguma uma lista exaustiva, então você pode criar outros recursos.

8. É qualquer coisa que você possa fazer manualmente a partir da linha de comando.
9. Isso significa que o executor de tarefas, Grunt, foi configurado para “observar” o arquivo para
que, ao detectar qualquer alteração nesse arquivo, ele execute automaticamente uma série
de tarefas.
10. Cada usuário tem uma cópia local do repositório compartilhado em que pode trabalhar
mesmo off-line.
11. Quando um arquivo é testado, significa que ele foi adicionado ao índice do Git e o Git o está
rastreando, mas ainda não foi confirmado.
12. Um branch é uma série sequencial de commits e reflete um segmento de desenvolvimento.

Um fork é uma cópia do repositório de outra pessoa na qual você pode trabalhar e que não
está vinculado ao original.
13. Pulling refere-se a mesclar a cópia recente do repositório mestre remoto em sua versão local.
Você deve obter uma nova cópia para ter certeza de que tem a versão mais atualizada antes
de enviar suas alterações para o mestre.
Isso ajuda a evitar conflitos se outros usuários estiverem fazendo alterações nos mesmos
arquivos.
14. Uma solicitação pull é quando você pede ao proprietário de um repositório que você bifurcou para
mesclar suas alterações.
Capítulo 21: Introdução ao JavaScript
Exercício 21-1
1. var amigos = ["nome", "outro nome", "terceiro nome", "sobrenome"];
2. alerta( amigos[2] );
3. var nome = "seuNome";
4. if( name === Jennifer ) { alert("Esse é meu nome também!");}
5. var minhaVariável = #;|

if(minhaVariável > 5) {
alerta ("superior");
} senão {
alerta ("inferior");
}
Exercício 21-2
<script>
document.title = originalTitle + " (" + não lida + "nova
mensagem!");
}
showUnreadCount(3);
</script>
A. Respostas 749
Teste-se
1. Ao vincular a um arquivo .js externo , você pode reutilizar os mesmos scripts para vários
documentos. A desvantagem é que requer uma solicitação HTTP adicional.
2. a. 1; b. 1dois; c. 34; d. 2
3. a. 10; b. 6; c. “2 restantes”; d. “Jennifer é mais longa.”; e. falso
4. Ele percorre vários itens começando no primeiro da matriz

e terminando quando não houver mais sobrando.
5. Variáveis de escopo global podem “colidir” com variáveis com os mesmos nomes em outros
scripts. É melhor usar a palavra-chave var em funções para manter suas variáveis com
escopo local.
6. a. 2; b. 5; c. 4; d. 3; e. 1
Capítulo 22: Usando JavaScript
1. Ajax é uma combinação de HTML, CSS e JavaScript (com o método XMLHttpRequest

JavaScript usado para obter dados em segundo plano).
2. Acessa o elemento que tem o valor de id “main”.
3. Ele cria uma nodeList de todos os elementos de seção no elemento com o

id de “principal”.
4. Define a cor de fundo da página ( elemento do corpo) para “papayawhip”.
5. Ele cria um novo nó de texto que diz “Ei, estou andando aqui!”, insere-o em um elemento p
recém-criado e coloca o novo elemento p no elemento com o id “main”.
6. D. Tudo o que precede.
Capítulo 23: Noções básicas de imagem da Web
1. Você pode obter uma licença para ter direitos exclusivos sobre uma imagem para que seu
concorrente não use a mesma foto em seu site. Você também sabe que a fonte da imagem
foi verificada (ou seja, não foi roubada).
2. ppi significa “pixels por polegada” e é uma medida de resolução.
3. A cor indexada é um modo para armazenar informações de cor de pixel. GIF e

Os formatos PNG-8 são imagens coloridas indexadas.
4. Há 256 cores em um gráfico de 8 bits e 32 cores em um gráfico de 5 bits.
5. GIF pode conter animação e transparência. JPEG não pode.
6. GIF pode conter animação. PNGs normais não podem (embora APNG para
tapete pode).

7. PNGs podem ter vários níveis de transparência. GIF tem apenas transparência binária
(ligada/desligada).
8. A compactação com perdas cumulativas significa que você perde dados de imagem toda vez
que salva uma imagem como JPEG. Se você abrir um JPEG e salvá-lo como JPEG
novamente, ainda mais informações da imagem serão descartadas do que na primeira vez
que você o salvou. Certifique-se de manter seu original de qualidade total e salvar cópias
JPEG conforme necessário.
9. Na transparência binária, um pixel é totalmente transparente ou totalmente opaco. A

transparência alfa permite até 256 níveis de transparência.
10. Um GIF ou PNG-8 porque é texto, cores planas e bordas duras. B JPEG porque é uma
fotografia. C GIF ou PNG-8 porque embora tenha algumas áreas fotográficas, a maior parte
da imagem é de cores planas com bordas duras.
D GIF ou PNG-8 porque é uma imagem gráfica plana. E JPEG porque é uma fotografia.
Capítulo 24: Produção de Ativos de Imagem

1. PNG-24 ou PNG-8+alfa são os melhores suportados. Os formatos WebP e JPEG 2000 também
incluem transparência alfa, mas não possuem suporte a ferramentas e navegadores.
2. Ajustar a configuração de Qualidade é a ferramenta mais eficaz para otimizar um

JPEG.
3. A redução do número de cores na paleta de cores tem o maior efeito no tamanho das imagens
coloridas indexadas.
4. O padrão no pontilhamento divide as áreas sólidas de cor e resulta em arquivos maiores. O

pontilhamento deve ser desativado ou limitado.
5. Como a compactação JPEG funciona bem em transições de cores suaves e menos em bordas
duras, desfocar a imagem melhora um pouco a compactação e resulta em um arquivo menor.
6. sRGB: Sim, porque é a codificação RGB usada pela web.
7. Se a imagem precisar parecer nítida em telas de alta densidade.
8. Se o seu site tiver muitas imagens, empresas como Cloudinary e Akamai geram e hospedam
várias versões otimizadas de cada imagem automaticamente. Eles impedem que você faça
toda a criação de imagens manualmente.
Capítulo 25: SVG

1. rect é o elemento SVG que cria um retângulo.
2. As coordenadas xey posicionam o elemento retângulo no canto superior esquerdo da janela

de visualização SVG.
A. Respostas 751
3. Os atributos largura e altura estabelecem as dimensões da janela de visualização SVG, a área

na qual o desenho será renderizado.
4. Em XML, todos os elementos devem ser fechados. Quando o elemento é um elemento autônomo
(sem uma tag de abertura e fechamento), ele é fechado com um caractere de barra (/) antes do
colchete de fechamento.
5. O recorte usa uma forma vetorial para revelar ou ocultar partes de uma imagem.
O mascaramento é baseado em pixels, usando a claridade e a escuridão de uma imagem raster
para ocultar e revelar a imagem mascarada.
6. As formas de reduzir o tamanho de um SVG incluem:
— Simplificando caminhos.
— Reduzir o número de casas decimais.
— Usando formas em vez de caminhos complexos quando possível.
— Evitando imagens raster e efeitos no SVG.
— Executando-o através de um otimizador como o SVGO.
— Habilitando a compactação Gzip no servidor.
7. b. SVG 1.1 (e para constar, SVG Electric Boogaloo não é uma coisa).
8. Você pode estilizar SVGs das seguintes maneiras:
— Atributos de apresentação SVG
— O atributo de estilo embutido
— Uma folha de estilo no próprio SVG ( elemento de estilo)
— Uma folha de estilo externa chamada no SVG (para SVGs colocados com o
elemento img )
— Se o SVG estiver embutido, a folha de estilo no documento HTML no qual

parece

APÊNDICE
HTML5 GLOBAL B
ATRIBUTOS
Os seguintes atributos podem ser usados com qualquer elemento HTML.
Atributo Valores Descrição
chave de acesso caractere de texto único Atribui uma chave de acesso (comando de tecla de atalho) ao link. As chaves de
acesso também são usadas para campos de formulário. Os usuários podem acessar
o elemento pressionando Alt-<key> (PC) ou Ctrl-<key> (Mac). Exemplo: chave de
acesso="B"
classe seqüência de texto Atribui um ou mais nomes de classificação ao elemento. Vários valores são
separados por espaços.
conteúdo editável verdadeiro | falso Indica que o usuário pode editar o elemento. Se o valor for uma string vazia,
é o mesmo que “true”. Por padrão, o elemento herda a configuração de edição
de seu pai.
diretório ltr | rtl | auto Especifica a direção do texto embutido do elemento (“da esquerda para a direita”
ou “da direita para a esquerda”) e delimita a reordenação bidirecional, isolando
o texto de influenciar o conteúdo ao redor. Quando definido como automático,
ele usa a primeira letra para determinar a direção.
arrastável verdadeiro | falso Um valor true indica que o elemento pode ser arrastado na interface do usuário
(um evento configurado com JavaScript), o que significa que o usuário pode movê-
lo clicando e segurando-o e, em seguida, movendo-o para uma nova posição na
janela.
escondido Em HTML, apenas valor de lista: oculto Impede que o elemento e seus descendentes sejam renderizados no agente
Em XHTML, inclua o nome do do usuário (navegador). Quaisquer scripts ou controles de formulário em seções
atributo: hidden="hidden" ocultas ainda serão executados, mas não serão apresentados ao usuário.
Eu iria
string de texto (não pode conter Atribui um nome de identificação exclusivo ao elemento.
espaços)
lang Código de idioma ISO Especifica o idioma principal para o conteúdo de um elemento e seus valores
(ver www.loc.gov/standards/ de atributo. Quando lang é omitido, o idioma do elemento é o mesmo que o
iso639-2/php/code_list.php) idioma do elemento pai.
753
Atributo Valores Descrição
corretor ortográfico verdadeiro | falso Indica se o elemento deve ter sua ortografia e gramática verificadas. Quando a
verificação ortográfica é omitida, o elemento segue o comportamento padrão
para esse elemento, possivelmente herdando o estado da verificação ortográfica
do pai.
estilo Lista de regras de estilo separadas por ponto Associa informações de estilo a um elemento. Por exemplo:
e vírgula (propriedade: pares de valores) <h1 style="color: red; border: 1px solid">Título</h1>
tabindex número Indica que o elemento é focalizável e especifica sua posição na ordem de
tabulação do documento atual. O valor deve estar entre 0 e 32.767. Ele é usado
para guiar links em uma página ou campos em um formulário e é útil para
dispositivos de navegação assistida.
Um valor de –1 é permitido para remover elementos do fluxo de tabulação e
torná-los focalizáveis apenas por JavaScript.
título seqüência de texto Fornece um título ou informações consultivas sobre o elemento, normalmente
exibidas como uma dica de ferramenta. Se um título não for especificado, um
elemento herdará o título de seu elemento ancestral mais próximo com um título.
traduzir sim | não Especifica se os valores de atributo de um elemento e os valores de seus

filhos do nó Texto devem ser traduzidos quando a página for localizada ou se
devem ser deixados inalterados. Se não for especificado, o elemento herda o
estado de tradução de seu pai.

APÊNDICE
SELECTOR CSS, C
NÍVEIS 3 E 4
A tabela a seguir lista os seletores no rascunho do editor de nível 4 de seletores

(drafts.csswg.org/selectors-4/, dezembro de 2017).
Observe que os seletores marcados como “(Nível 4)” são novos e podem ainda não ser
implementados pelos navegadores. Verifique CanIUse.com e certifique-se de testar bem se
você usá-los. Todos os outros seletores fazem parte do CSS3 e geralmente são bem suportados.
Seletor Tipo de seletor Descrição
Seletores e combinadores simples

*
Seletor universal Corresponde a qualquer elemento.
UMA
Seletor de tipo Corresponde ao nome de um elemento.
A, B Seletor composto Corresponde aos elementos A e B.
AB Combinador descendente Corresponde ao elemento B apenas se for descendente do elemento A.
A>B Combinador filho Corresponde a qualquer elemento B que seja filho do elemento A.
A+B
Combinador do próximo irmão Corresponde a qualquer elemento B que segue imediatamente qualquer elemento
A, onde A e B compartilham o mesmo pai.
A~B
Combinador de irmãos subsequentes Corresponde a qualquer elemento B que é precedido por A, onde A e B compartilham
o mesmo pai.
Seletores de classe e ID
.nome da classe Seletor de classe Corresponde ao valor do atributo class em todos os elementos ou em um
A.classname
elemento especificado.
#idname Seletor de ID Corresponde ao valor do atributo id em um elemento.

A#idname
755
Seletores de atributos
A[att] Seletor de atributo simples Corresponde a qualquer elemento A que tenha o atributo especificado definido,
qualquer que seja seu valor.
A[att="val"] Seletor de valor de atributo exato Corresponde a qualquer elemento A que tenha o atributo especificado definido para o
valor especificado.
A[att="val" i] Seletor de valor de atributo que não diferencia maiúsculas Corresponde a qualquer elemento A que tenha o atributo especificado definido para o
(Nível 4) de minúsculas valor especificado, mesmo que não corresponda à capitalização (mesmo em linguagens
XML que podem diferenciar maiúsculas de minúsculas). Este exemplo corresponde a
imagens chamadas Icon.png, ICON.png, icon.png e assim por diante.
img[src="Icon.png" i] {borda: 1px amarelo sólido;}
A[att~="val"] Seletor de valor de atributo parcial Corresponde a qualquer elemento A que tenha o valor especificado como um dos valores
em uma lista fornecida ao atributo especificado.
tabela[class~="example"] {fundo: amarelo;}
A[att|="val"] Seletor de atributo de prefixo hifenizado Corresponde a qualquer elemento A que tenha o atributo especificado com um valor igual ou
que comece com o valor fornecido. É usado com mais frequência para selecionar idiomas,
conforme mostrado aqui.
a[lang|="en"] {imagem de fundo: url(en_icon.png);}
A[att^="val"] Seletor de atributo de substring inicial Corresponde a qualquer elemento A que tenha o atributo especificado e seu valor
começa com a string fornecida.
img[src^="/images/icons"] {borda: 3px sólido;}
A[att$="val"] Seletor de atributo de substring final Corresponde a qualquer elemento A que tenha o atributo especificado e seu valor
termina com a string fornecida.
img[src$=".svg"] {borda: 3px sólido;}
A[att*="val"] Seletor de atributo de substring arbitrário Corresponde a qualquer elemento A que tenha o atributo especificado e seu valor
contenha a string fornecida.
img[title*="July"] {borda: 3px sólido;}
Seletores de pseudo-classe
:qualquer link Seletor de pseudoclasse de link Especifica um estilo para um link independentemente de ter sido visitado.
(Nível 4)
:link Seletor de pseudoclasse de link Especifica um estilo para links que ainda não foram visitados.
:alvo Seletor de pseudoclasse de destino Seleciona um elemento que é usado como identificador de fragmento.
:alvo-dentro Seletor de pseudoclasse de destino Seleciona um elemento que é usado como identificador de fragmento ou contém um
(Nível 4) generalizado elemento que o faz.
:visitou Seletor de pseudoclasse de link Especifica um estilo para links que já foram visitados.
:ativo Seletor de pseudoclasse de ação do usuário Seleciona qualquer elemento que tenha sido ativado pelo usuário, como um
link conforme ele está sendo clicado.
:flutuar Seletor de pseudoclasse de ação do usuário Especifica um estilo para elementos (geralmente links) que aparecem quando o
mouse é colocado sobre eles.
:foco Seletor de pseudoclasse de ação do usuário Seleciona qualquer elemento que tenha atualmente o foco de entrada, como uma entrada de
formulário selecionada.
:foco-dentro Seletor de pseudoclasse de entrada Seleciona qualquer elemento que tenha foco de entrada do usuário ou contenha um
(Nível 4) generalizada elemento que tenha foco de entrada.

:foco visível Seletor de pseudoclasse de ação do usuário Seleciona qualquer elemento que tenha foco de entrada do usuário e o agente do
(Nível 4) usuário determinou que um anel de foco ou outro indicador deve ser desenhado
para esse elemento.
:drop(ativo) Seletor de pseudoclasse de arrastar Seleciona um elemento que é o destino de soltar atual para o item que está sendo
(Nível 4) e soltar arrastado.
:drop(válido) Seletor de pseudoclasse de arrastar Seleciona um elemento que pode receber o item que está sendo arrastado.
(Nível 4) e soltar
:drop(inválido) Seletor de pseudoclasse de arrastar Seleciona um elemento que não pode receber o item que está sendo arrastado,
(Nível 4) e soltar mas pode receber algum outro item.
:dir(ltr) Pseudoclasse de direcionalidade Seleciona um elemento com uma direção de escrita específica. Neste exemplo,
(Nível 4) a direção é da esquerda para a direita. O idioma do documento determina como
a direcionalidade é determinada.
:lang(xx) Seletor de pseudoclasse de idioma Seleciona um elemento que corresponde ao código de idioma de dois caracteres.
a:lang(de) {cor: verde;}
:nth-filho() Seletor de pseudoclasse estrutural Seleciona um elemento que é o enésimo filho de seu pai. A notação pode incluir um
número, uma notação ou as palavras-chave ímpar ou par.
:n-ésimo-último filho() Seletor de pseudoclasse estrutural Seleciona um elemento que é o enésimo filho de seu pai, contando a partir do último.
:nth-of-type() Seletor de pseudo-classe estrutural :nth- Seleciona o enésimo elemento de seu tipo.
last-of-type() Seletor de pseudo-classe estrutural Seleciona o enésimo elemento de seu tipo, contando a partir do último.
:primeiro filho Seletor de pseudoclasse estrutural Seleciona um elemento que é o primeiro filho de seu elemento pai.
:último filho Seletor de pseudoclasse estrutural Seleciona um elemento que é o último filho de seu elemento pai.
:filho único Seletor de pseudoclasse estrutural Seleciona um elemento que é o único filho de seu pai.
:primeiro do tipo Seletor de pseudoclasse estrutural Seleciona um elemento que é o primeiro irmão de seu tipo.
:último do tipo Seletor de pseudoclasse estrutural Seleciona um elemento que é o último irmão de seu tipo.
:somente do tipo Seletor de pseudoclasse estrutural Seleciona um elemento que é o único irmão de seu tipo.
:raiz Seletor de pseudoclasse estrutural Seleciona um elemento que é a raiz do documento. Em HTML, é o elemento html .
em árvore
:vazio Seletor de pseudoclasse estrutural Seleciona um elemento que não tem texto e nenhum elemento filho.
em árvore
:em branco Seletor de pseudoclasse estrutural Seleciona um elemento que não tem conteúdo, exceto talvez um espaço em branco.
em árvore
:ativado Seletor de pseudo-classe de UI Seleciona um elemento de interface do usuário se estiver ativado.
:Desativado Seletor de pseudo-classe de UI Seleciona um elemento de interface do usuário se estiver desabilitado.
:verificado Seletor de pseudo-classe de UI Seleciona um elemento de interface do usuário (botão de opção ou caixa de seleção) que está marcado.
:ler escrever Seletor de pseudo-classe de mutabilidade Seleciona um elemento de UI se for alterável pelo usuário.
(Nível 4)
:somente leitura Seletor de pseudoclasse de mutabilidade Seleciona um elemento de interface do usuário se não for alterável pelo usuário.
(Nível 4)
:placeholder-mostrado Seletor de pseudo-classe de mutabilidade Seleciona um controle de entrada que mostra o texto do espaço reservado.
(Nível 4)
C. Seletores CSS, Níveis 3 e 4 757

:predefinição Seletor de pseudo-classe de opção Seleciona um elemento de interface do usuário que é o item padrão em um grupo de opções
(Nível 4) padrão relacionadas.
:indeterminado Seletor de pseudoclasse de valor indeterminado Seleciona um elemento de interface do usuário que é um estado indeterminado (nem
(Nível 4) marcado nem desmarcado).
:válido Seletor de pseudoclasse de validade Seleciona um elemento de interface do usuário que atende à semântica de validade de dados.
(Nível 4)
:inválido Seletor de pseudoclasse de validade Seleciona um elemento de interface do usuário que não atende à semântica de validade de dados.
(Nível 4)
: dentro do intervalo Seletor de pseudoclasse de intervalo Seleciona um elemento de interface do usuário cujo valor está em um intervalo especificado.
(Nível 4)
:fora de alcance Seletor de pseudoclasse de intervalo Seleciona um elemento de interface do usuário cujo valor não está em um intervalo especificado.
(Nível 4)
:requeridos Seletor de pseudoclasse de opcionalidade Seleciona um elemento de interface do usuário que requer entrada.
(Nível 4)
:opcional Seletor de pseudoclasse de opcionalidade Seleciona um elemento de interface do usuário que não requer entrada.
(Nível 4)
:não(A) Seletor de pseudoclasse de negação Seleciona um elemento que não corresponde ao seletor simples A.
Também pode ser usado com seletores compostos, neste caso seleciona um elemento
que não corresponde a A ou B.
:não(A, B) { cor: #ccc; }
: corresponde (A, B) Seletor corresponde a qualquer pseudoclasse Seleciona um elemento que corresponde a A e/ou B.
(Nível 4) :matches(h2, h3) { color: #ccc;}
E: tem(rA, rB) Seletor de pseudoclasse relacional Seleciona um elemento E se um dos seletores relativos rA ou rB, quando avaliado com o
(Nível 4) elemento como os elementos :scope , corresponder a um elemento. O exemplo a seguir
corresponde apenas a elementos que contêm uma img:
a:has(> img) { margem: .5em 0; }
::primeira carta Seletor de pseudo-elemento Seleciona a primeira letra do elemento especificado.
::primeira linha Seletor de pseudo-elemento Seleciona a primeira letra do elemento especificado.
::antes da Seletor de pseudo-elemento Insere o texto gerado no início do elemento especificado e aplica um estilo a ele.
::depois Seletor de pseudo-elemento Insere o conteúdo gerado no final do elemento especificado e aplica um estilo a ele.
Seletores estruturais de grade
A || B Seletor de estrutura de grade Seleciona um elemento B que representa uma célula em uma grade/tabela pertencente a
(Nível 4) uma coluna representada por um elemento A.

APÊNDICE
DE HTML+ PARA D
HTML5
Não tenho certeza se alguma especificação HTML teve tanta fanfarra quanto HTML5. Ele
oferece tantas possibilidades promissoras, de fato, que se tornou uma espécie de palavra da
moda com conotações muito além da especificação em si. Quando profissionais de marketing e
jornalistas usam o termo “HTML5”, às vezes estão se referindo a qualquer nova tecnologia da
web que substitua o Flash. Ao longo deste livro, você se familiarizou com os elementos do
HTML5 e, neste apêndice, falarei um pouco mais sobre a especificação em si, para que você
possa se juntar àqueles que ficam irritados quando ouvimos "HTML5" usado incorretamente . O
importante, no entanto, é que o conhecimento geral dos padrões da web é certamente uma
vitória e facilita nosso trabalho quando estamos nos comunicando com os clientes.
Mas primeiro, acho importante saber como chegamos aqui e o que torna o HTML5 um avanço.
Vou começar com uma breve história do HTML e, em seguida, apontar algumas qualidades
únicas do HTML5, incluindo suas APIs.
UMA HISTÓRIA ABREVIADA DO HTML
Compreender onde estivemos fornece um contexto útil para onde estamos indo. Nossa jornada
para o HTML5 passa pela fronteira do início da web, os perigosos campos de batalha das LEITURA ADICIONAL
Guerras dos navegadores e um flerte com o XML.
Para uma história detalhada do HTML de
1989 a 1998, leia o relato de David
Raggett em seu livro Raggett on HTML4
(Addison-Wesley), disponível no site W3C
A Fronteira Selvagem (www.w3.org/People/
Raggett/book4/ch02.html).
A história do HTML, desde o rascunho inicial de Tim Berners-Lee em 1991 até o padrão HTML5
em desenvolvimento hoje, é fascinante e tumultuada.
As primeiras versões do HTML (HTML+ em 1994 e HTML 2.0 em 1995) foram construídas com
base no trabalho inicial de Tim com a intenção de torná-lo uma opção viável de publicação.
759
Uma História Abreviada do HTML
Mas quando a World Wide Web (como era adoravelmente chamada na época) tomou o
mundo de assalto, os criadores de navegadores, mais notavelmente o Mosaic Netscape
e mais tarde o Microsoft Internet Explorer, disseram: “Não estamos esperando por nada
padrões!" Eles deram às pessoas o que elas queriam criando uma série de elementos
específicos do navegador para melhorar a aparência das páginas em seus respectivos
navegadores. Essa divisão divisiva é o que veio a ser conhecido como a Guerra dos
Navegadores. Como resultado, tornou-se comum no final da década de 1990 a criação
de duas versões totalmente separadas de um site direcionado a cada um dos dois
grandes navegadores. Placas em sites que diziam “Melhor visualizado na Netscape”
eram a norma. Estremeço só de pensar nisso.
Um apelo à razão
Em 1996, o recém-formado W3C colocou uma aposta no terreno e lançou sua primeira
Os padrões da Web Recomendação: HTML 3.2. É um instantâneo de todos os elementos HTML em uso
comum na época e inclui muitas extensões de apresentação para HTML (como a fonte
Projeto
e os elementos centrais ) que foram o resultado da disputa Netscape/IE e a falta de uma
Em 1998, no auge da Guerra dos Navegadores,
alternativa de folha de estilo . HTML 4.0 (1998) e HTML 4.01 (a pequena revisão que o
uma coalizão popular chamada Web Standards
Project (WaSP
substituiu em 1999) visavam colocar o HTML de volta nos trilhos, enfatizando a separação
para abreviar) começou a pressionar os entre estrutura e apresentação e melhorando a acessibilidade. Todos os assuntos de
criadores de navegadores (principalmente apresentação foram entregues ao recém-criado padrão Cascading Style Sheets que
Netscape e Microsoft na época) para começar estava ganhando apoio.
a aderir aos padrões abertos conforme
documentado pelo W3C. Não parando por aí,
ele educou a comunidade de desenvolvedores HTML 4.01—junto com XHTML 1.0, seu irmão mais estrito baseado em XML (discutido
web sobre os muitos benefícios de desenvolver a seguir)—tornou-se a pedra angular do movimento de padrões da web (veja a barra
com padrões. Seus esforços revolucionaram
lateral “O Projeto de Padrões da Web”).
a forma como os sites são criados e

suportados. Agora os navegadores (até
Digite XML e XHTML
mesmo a Microsoft) se gabam do suporte a
padrões enquanto continuam inovando.
Na mesma época em que o HTML 4.01 estava em desenvolvimento, o pessoal do W3C
Em 2013, o WaSP declarou: “Nosso trabalho
percebeu que uma linguagem de marcação limitada não seria suficiente para descrever
aqui está feito” e se desfez. Você ainda
todos os tipos de informações (notação química, equações matemáticas, apresentações
pode ler sua declaração de missão, histórico
e materiais de referência no site do WaSP multimídia, informações financeiras, e assim por diante) que podem ser compartilhados
(webstandards.org). pela web. Sua solução: XML (eXtensible Markup Language), uma metalinguagem para
criar linguagens de marcação. XML era uma simplificação do SGML (Standardized
Generalized Markup Language), o grande kahuna de metalinguagens que Tim Berners-
Lee usou para criar seu aplicativo HTML original. Mas o próprio SGML provou ser mais
complexo do que a web exigia.
O W3C teve uma visão de uma web baseada em XML com muitas linguagens de
marcação especializadas trabalhando juntas – mesmo dentro de um único documento. É
claro que, para conseguir isso, todos teriam que marcar os documentos com muito
cuidado, obedecendo estritamente à sintaxe XML, para descartar possíveis confusões.

Uma História Abreviada do HTML
Seu primeiro passo foi reescrever o HTML de acordo com as regras do XML para que
ele pudesse funcionar bem com os outros. O resultado é XHTML (HTML eXtensible).
A primeira versão, XHTML 1.0, é quase idêntica ao HTML 4.01, compartilhando os
mesmos elementos e atributos, mas com requisitos de sintaxe mais rígidos (veja a barra
lateral “XHTML Markup Requirements” ).
Mas o W3C não parou por aí. Com a visão de uma web baseada em XML em mente,
eles começaram a trabalhar no XHTML 2.0, uma tentativa ainda mais ousada de fazer
as coisas funcionarem “certo” do que o HTML 4.01. O problema era que não era
compatível com os padrões antigos e o comportamento do navegador. O processo de
redação e aprovação se arrastou por anos sem implementação do navegador.
Sem a implementação do navegador, o XHTML 2.0 estava travado.
Requisitos de marcação XHTML

A sintaxe XHTML segue os rigorosos requisitos de marcação do XML, como segue:
• Os nomes dos elementos e atributos devem estar em letras minúsculas. Em HTML, elemento e atributo
nomes não diferenciam maiúsculas de minúsculas.
• Todos os elementos devem ser fechados (terminados). Você fecha elementos vazios adicionando uma barra antes
do colchete de fechamento (por exemplo, <br/>).
• Os valores dos atributos devem estar entre aspas. Aspas simples ou duplas
são aceitáveis desde que sejam usados de forma consistente. Além disso, não deve haver nenhum espaço em
branco extra (espaços de caracteres ou retornos de linha) antes ou depois do valor do atributo entre aspas.
• Todos os atributos devem ter valores de atributo explícitos. XML (e, portanto, XHTML) não suporta a minimização
de atributos, a prática SGML na qual certos atributos podem ser reduzidos apenas ao valor do atributo. Assim,
enquanto em HTML você pode escrever check para indicar que um botão de formulário deve ser verificado quando
o formulário é carregado, em XHTML você precisa escrever explicitamente check="checked".
• O aninhamento adequado de elementos é rigorosamente aplicado. Alguns elementos existentes receberam novas
restrições de aninhamento.
• Tags iniciais e finais são obrigatórias.
• Os caracteres especiais devem sempre ser representados por entidades de caracteres (por exemplo, &
para o símbolo &).
• Os scripts devem estar contidos em uma seção CDATA para que sejam tratados como caracteres de texto simples e
não analisados como marcação XML. Aqui está um exemplo da sintaxe:
<script type="type/javascript">
// <![CDATA[
... JavaScript vai aqui...
// ]]>
</script>
Enquanto os analisadores HTML perdoam a marcação incorreta, erros na sintaxe XHTML param o analisador em suas
trilhas. Executar seu código XHTML por meio de um validador é uma boa ideia para detectar erros de sintaxe antes que
as páginas sejam iniciadas.
D. De HTML+ a HTML5 761

HTML5: mais do que marcação
Olá HTML5!
Enquanto isso…
Em 2004, membros da Apple, Mozilla e Opera formaram o Web Hypertext Application

Technology Working Group (WHATWG, whatwg.org), separado do W3C. O objetivo do
WHATWG era promover o desenvolvimento do HTML para atender às novas demandas de uma
maneira consistente com as práticas de autoria do mundo real e o comportamento do navegador
(em contraste com o ideal de começar do zero que o XHTML 2.0 descreveu). Seus documentos
iniciais, Web Applications 1.0 e Web Forms 1.0, foram reunidos em HTML5. Hoje, o WHATWG
mantém um padrão HTML não numerado e “vivo”.
O W3C acabou estabelecendo seu próprio Grupo de Trabalho HTML5 com base no trabalho
realizado pelo WHATWG. O HTML5 alcançou o status de recomendação formal em outubro de
2014. No início de 2018, a versão mais recente é o HTML 5.2, que é uma “Recomendação
proposta”.
O trabalho na especificação HTML5 está acontecendo em ambas as organizações em conjunto,

às vezes com pequenas inconsistências. Na maioria das vezes, os fornecedores de navegadores
usam a cópia do WHATWG como referência de implementação.
E XHTML 2.0? No final de 2009, o W3C oficialmente o tirou de sua miséria, desligando o Grupo
de Trabalho e colocando seus recursos e esforços em HTML5.
Então foi assim que chegamos aqui. Agora vamos conhecer o HTML5 um pouco melhor.
HTML5: MAIS DO QUE MARCAÇÃO
Versões HTML anteriores se preocupavam principalmente com elementos para marcar o

LEITURA ADICIONAL conteúdo a ser visualizado nas páginas da web. HTML5 é um pacote de novos métodos para
realizar tarefas que anteriormente exigiam programação especial ou tecnologia de plug-in
Os livros a seguir ajudarão a preencher seu
conhecimento de HTML5:
proprietária, como Flash ou Silverlight. As soluções incluem componentes de marcação e script,
incluindo APIs para coisas como colocar áudio e vídeo na página, armazenar dados localmente,
• HTML5 para Web Designers, 2e por
Rachel Andrew e Jeremy Keith trabalhar offline, aproveitar as informações de localização e muito mais. Com o HTML5 para
(Um livro à parte) tarefas comuns, os desenvolvedores podem confiar nos recursos integrados do navegador e
• HTML5: instalado e funcionando por Mark não reinventar a roda para cada aplicativo.
Peregrino (O'Reilly e Google Press)
• Apresentando HTML5, 2e por Bruce

Muito do que há de novo em HTML5 requer habilidades avançadas de desenvolvimento web,
Lawson e Remy Sharp (Novo
Cavaleiros)
então é improvável que você use esses recursos imediatamente (se for o caso), mas, como
sempre, acho que é benéfico para todos ter uma familiaridade básica com o que pode ser feito.
E “familiaridade básica” é o que estou buscando aqui. Para discussões mais aprofundadas
sobre os recursos do HTML5, consulte a barra lateral “Leituras adicionais” .

Componente de marcação HTML5

Você aprendeu os elementos e atributos do HTML5 ao longo deste livro.
HTML5 em XML
O HTML5 é baseado no HTML 4.01 Strict, a versão do HTML que não incluiu nenhum O HTML5 também pode ser escrito de acordo com
elemento e atributo baseado em apresentação ou outros elementos obsoletos. a sintaxe mais rígida do XML (chamada de
Isso significa que a grande maioria do HTML5 é composta pelos mesmos elementos que serialização XML do HTML5).
Alguns desenvolvedores passaram a preferir a
foram usados por anos, e os navegadores sabem o que fazer com eles.
organização de XHTML bem formado (nomes de
O HTML5 introduziu vários novos elementos, tipos de entrada de formulário e atributos elementos em minúsculas, valores de atributos
globais. Ele também tornou muitos elementos e atributos obsoletos no HTML 4.01 entre aspas, fechamento de todos os elementos e
assim por diante), de modo que a forma de escrever
oficialmente obsoletos.
ainda é uma opção, embora não seja obrigatória.
Um desvio das versões anteriores do HTML é que o HTML5 é a primeira especificação Em casos extremos, pode ser necessário que
um documento HTML5 seja exibido como XML
que inclui instruções detalhadas sobre como os navegadores devem lidar com marcações
para trabalhar com outros XML
malformadas e herdadas. Ele baseia as instruções no comportamento do navegador
aplicativos, nesse caso ele pode usar a sintaxe
legado, mas, pela primeira vez, há um protocolo padrão para os fabricantes de navegadores XML e estar pronto para começar.
seguirem quando os navegadores encontrarem marcação incorreta ou fora do padrão.
UM DOCTYPE SEM DTD
Como vimos no Capítulo 4, Criando uma página simples, os documentos HTML devem
começar com uma declaração do tipo de documento (DOCTYPE) que identifica qual
versão do HTML o documento segue. A declaração HTML5 é curta
e doce:
<!DOCTYPEhtml>
Compare isso com uma declaração para um documento Strict HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/HTML4.01/strict.dtd">
Por que tão complicado? Para documentos escritos em HTML 4.01 e XHTML 1.0 e 1.1, a
declaração deve apontar para a DTD pública (Document Type Definition), um documento
que define todos os elementos em uma linguagem de marcação, bem como as regras
para usá-los. DTDs são um resquício do SGML e provaram ser menos úteis na web do
que se pensava originalmente, então os autores do HTML5 simplesmente não usaram um.
Como resultado, a declaração DOCTYPE é muito mais simples.
Validadores—software que verifica se todas as marcações em um documento estão NOTA

corretas (veja Nota)—usam a declaração DOCTYPE para certificar-se de que o documento
Para verificar se o seu documento HTML é
obedece às regras da especificação que afirma seguir. válido, use o validador online do W3C
(validator.w3.org). Um HTML5-
Tanto o HTML 4.01 quanto o XHTML 1.0 tinham três DTDs separados (para versões
validador específico também está disponível
Tradicional, Estrita e Conjunto de Quadros de cada especificação), então havia muitos
em html5.validator.nu.
pequenos detalhes para acompanhar. Para obter uma lista completa de declarações
DOCTYPE (incluindo referências DTD) para HTML 4.01, XHTML, SVG e outros tipos de
documentos, acesse www.w3.org/QA/2002/04/valid-dtd-list.html.

Conheça as APIs
As especificações HTML anteriores ao HTML5 incluíam apenas a documentação dos

elementos, atributos e valores permitidos na linguagem. Isso é bom para documentos de
texto simples, mas os criadores do HTML5 tinham em mente facilitar a criação de aplicativos
HTML5 visa tornar baseados na Web que exigem scripts e programação. Por esse motivo, o HTML5 também
HTML mais útil para define várias novas APIs para facilitar a comunicação com um aplicativo.
criação de aplicações web.

Uma API (interface de programação de aplicativos) é um conjunto documentado de
comandos, nomes de dados e assim por diante, que permite que um aplicativo de software
se comunique com outro. Por exemplo, os desenvolvedores do Twitter documentaram os
nomes de cada tipo de dados (usuários, tweets, timestamps, etc.) e os métodos para acessá-
los em um documento da API (dev.twitter.com/docs) que permite que outros desenvolvedores
incluam feeds do Twitter e elementos em seus programas. É por isso que existem tantos
programas e widgets do Twitter disponíveis. A Amazon.com também abre seus dados de
produtos por meio de uma API. Na verdade, editores de todos os tipos estão reconhecendo
o poder de ter seu conteúdo disponível por meio de uma API.
Mas vamos trazê-lo de volta ao HTML5, que inclui APIs para tarefas que tradicionalmente
exigiam plug-ins proprietários (como Flash) ou programação personalizada.
A ideia é que se os navegadores oferecerem esses recursos nativamente - com conjuntos
padronizados de ganchos para acessá-los - os desenvolvedores podem fazer todo tipo de
coisas bacanas e contar com eles funcionando em todos os navegadores, assim como
contamos com a capacidade de incorporar uma imagem em um página hoje. Claro, temos
um caminho a percorrer antes que haja suporte onipresente para esses recursos de ponta,
mas estamos chegando lá com firmeza. Algumas APIs têm um componente de marcação,
como a incorporação de multimídia com os novos elementos de vídeo e áudio HTML5 .
Outros acontecem inteiramente nos bastidores com JavaScript ou componentes do lado do
servidor, como a criação de aplicativos da Web que funcionam mesmo quando não há
conexão com a Internet (API de aplicativo da Web offline).
O W3C e o WHATWG estão trabalhando em muitas e muitas APIs para uso com aplicativos
NOTA da Web, todas em vários estágios de conclusão e implementação.
Para obter uma lista de todas as APIs, consulte a

A maioria tem suas próprias especificações, separadas da própria especificação HTML5,
“Visão geral do HTML5” de Erik Wilde (html5-overview.

mas geralmente são incluídas sob o amplo guarda-chuva HTML5 que abrange aplicativos
internet). O W3C lista todos os documentos que eles baseados na web. HTML5 inclui especificações para estas APIs:
mantêm, muitos dos quais são APIs, em www.w3.org/
API do reprodutor de mídia
TR/tr-title-all.
Para controlar players de áudio e vídeo incorporados em uma página da Web, usados
com os novos elementos de vídeo e áudio .
API de edição
Fornece um conjunto de comandos que podem ser usados para criar texto no navegador
editores, permitindo aos usuários inserir e excluir texto; formatar o texto como negrito,
itálico ou hipertexto; e mais. Além disso, há um novo atributo de conteúdo editável que
permite que qualquer elemento de conteúdo seja editado diretamente na página.

Para onde vamos daqui
API de histórico de sessão
Expõe o histórico do navegador para melhor controle sobre o botão Voltar.
API de arrastar e soltar
Adiciona a capacidade de arrastar uma seleção de texto ou arquivo para uma área de destino na
página ou em outra página da web. O atributo arrastável indica que o elemento pode ser
selecionado e arrastado.
A seguir estão apenas algumas das APIs em desenvolvimento no W3C com especificações próprias:
API de tela
O elemento canvas adiciona um espaço de desenho bidimensional dinâmico a uma página. O

elemento canvas é discutido no Capítulo 10, Mídia incorporada.
API de Service Workers
Esta especificação descreve um método que permite que aplicativos da Web funcionem offline.
API de armazenamento da Web
Permite que os dados sejam armazenados no cache do navegador para que um aplicativo possa
usá-los posteriormente. Tradicionalmente, isso era feito com “cookies”, mas a API Web Storage
permite que mais dados sejam armazenados. Também controla se os dados estão limitados a
uma sessão (sessionStorage: quando a janela é fechada, os dados são apagados) ou com base
no domínio (localStorage: todas as janelas abertas apontadas para esse domínio têm acesso
aos dados).
API de geolocalização
Permite que os usuários compartilhem sua localização geográfica (longitude e latitude) para que
seja acessível a scripts em um aplicativo da web. Isso permite que o aplicativo forneça recursos
com reconhecimento de localização, como sugerir um restaurante próximo ou encontrar outros
usuários em sua área.
API de soquetes da Web
Cria um soquete, que é uma conexão aberta entre o cliente do navegador e o servidor. Isso
permite que as informações fluam entre o cliente e o servidor em tempo real, sem atrasos nas
requisições HTTP tradicionais.

Você pode pensar em um soquete da web como uma chamada telefônica contínua entre o
navegador e o servidor, em comparação com o estilo walkie-talkie, um de cada vez, da
comunicação tradicional entre navegador/servidor. (Uma dica de chapéu para Jen Simmons por
essa analogia.) É útil para jogos multijogador, bate-papo ou fluxos de dados que são atualizados
constantemente, como esportes ou cotações de ações ou fluxos de mídia social.
DE ONDE VAMOS DAQUI
Com um sistema instalado que parece estar funcionando, tudo indica que o
A especificação HTML continuará passando por pequenas revisões para

Para onde vamos daqui
acompanhar as mudanças nas demandas de como usamos a Web e os dispositivos

em que a usamos. As revisões menores geralmente incluem a adição de atributos,
elementos e APIs e a suspensão de recursos que nunca foram implementados. Em
outras palavras, não ouvi falar de outra mudança sísmica, como a mudança de XHTML
para HTML5.
No W3C, o HTML 5.2 (a 5ª versão principal e a segunda revisão secundária do HTML)

tornou-se uma Recomendação em 14 de dezembro de 2017. No momento em que este
livro está sendo impresso, já existe um rascunho de trabalho do HTML 5.3. Enquanto
isso, o WHATWG mantém sua versão “viva” (não numerada) do HTML que é
continuamente atualizada e forma a base para a implementação da maioria dos
fornecedores de navegadores.
Portanto, saiba que o HTML está sempre mudando e, como web designer ou
desenvolvedor, você precisará ficar atento. Sempre há algo novo para aprender.

ÍNDICE
Símbolos % (sinal de porcentagem) atributo accept-charset, elemento de formulário

209
413 + (sinal de mais) 601–602,
"
$ (cifrão) 323, 569 £ (libra) 604 (aspas). Veja aspas ® (marca acessibilidade
108 ¥ (ienes) 108 € (euro) registrada) 108 ; (ponto e vírgula) cerca de 42
108 & (e comercial) 105–106 105–106, 243, 245, 599 / (barra). Ver barra texto alternativo 136–137
<> (colchetes angulares) 27, (/) ~ (til) 569 ™ (marca registrada) 108 _ tecnologia assistiva para 23
30, 56 ' (apóstrofo) 106 * (sublinhado) 54, 569, 601 páginas compatíveis com daltônicos
(asterisco) 187, 285, 601 \ (barra 314 considerações de formulário 181, 184,
invertida) 56, 116 : (dois pontos) 316, 187, 192, 203–205
320 (vírgula) 263 /* */ (comentários) requisitos governamentais 43
245 © (direitos autorais) 108 {} melhorando com ARIA 102–105
(colchetes) 243, 491, 573, 604, 608– Tabelas SVG e
UMA
, 609 :: (dois pontos) 320 ... 718 169–171
(reticências) 108 — (traço) 108 – Codec de áudio AAC 220–221 considerações de design da web 42–45
(traço) 108 = (sinal de igual) 64 == elemento a (âncora) sobre 89, Aplicativos avançados de Internet acessíveis
(igual a) operador 603–604 >= (maior que ou 113, 130 aplicando estilos ao (ARIA) 102–105, 205, 718
igual a) operador
atributo href 318–319 84, 114– accesskey global attribute 101, 753
128, 132 atributo de destino 127 acronym element 89, 92 action attribute,
abbr (abreviação) elemento 89, 92, form element 180–181,
112 atributo abbr, º elemento 176 flex absoluto
441 nomes de caminho absolutos 24–25, 114– 209 :seletor ativo 317–319, 518, 756
115, 135 posicionamento absoluto sobre 393, Active Server Pages (ASP) 180 ícones
405, 408–409 layouts em colunas 408 contendo adaptáveis 731 método
blocos 409–411 especificando a posição 411– addEventListener() 615 elemento de
603 endereço 82, 87, 112 Software Adobe
414 ordem de empilhamento 414–415 URLs
> (maior que o sinal) 106, 603 === Animate 228 editores de código 16, 50
absolutos 24–25, 114 –115, 135, 351 valores
(idêntico a) operador 603–604 <= (menor que Conjunto de ferramentas Creative
absolutos 253–254
ou igual a) operador 603 < (menor que o sinal) Cloud 17–18, 672 Dreamweaver 16,
106, 603 - (sinal de menos) 601 != (não igual a) 307 Flash Player 218 Illustrator 17, 142, 642,
operador 603 !== (não idêntico a) operador 603 687, 718 Photoshop. Consulte o espaço de
# (símbolo octotórpico) 124, 282–283, 325 () cores Photoshop RGB 672, 675 Typekit
(parênteses) 608–610 service 265, 280
Árvore de Sintaxe Abstrata (AST) 577
aceita atributo, tipos de elemento de entrada
198, 212–213
767
Affinity Designer 16, 687–690, 720 ::after propriedade de direção de animação 539–540, atributos
selector 321–322, 398, 758 Aguilar, Justin 538 545 sobre 63
AJAX (Asynchronous JavaScript and XML) 11– propriedade de duração de animação 539, 545 especificação ARIA 102–105 Boolean
12, 102, 632–633 Akamai.com service 664, 690 propriedade de modo de preenchimento de animação 539, 545 64 manipuladores de eventos como
alert ARIA role 102 função alert() 598, 608– Animation Inspector 541 animation- suporte de formulário 614 para 209–
609, 613 propriedade align-content 431–432, 437, iteration-count property 539, 213 HTML5 global 101–102, 753–754
475, 478, 482, 484 545 sintaxe para 63–64 valores em 64 requisitos
propriedade de nome de animação 539–540, 545 de marcação XHTML 56, 761 requisitos XML
propriedade de estado de reprodução de animação 706 seletores de atributo 323– 324, 755–756
540, 545 propriedade de animação 540, 545 Software de áudio Audacity 222 áudio. Veja mídia
align-items property 430–431, 437, 474– 475, 478, propriedade de função de temporização de animação 539, incorporada ferramenta Audio Converter 222 elemento
482, 484 alinhamento no FlexBox 428–433 na 545 de áudio
grade 472–475 texto horizontal 289–290 align-self função anônima 615 anti-aliasing
property 431, 437, 473–474, 478, 677 recurso de mídia de qualquer
ponteiro 493 : seletor de qualquer link
756 recurso de mídia de qualquer
ponteiro 493 cerca de 219, 225
483–484 Software de servidor Apache 22, 133, 141, 220 suporte ao navegador 219
A List Apart (revista online) 259 todos os tipos de API (interface de programação de aplicativos) 219, 577, Media Player API 764 atributo
mídia 492 621, 764–765 src 225, 234 formatos de áudio
Alman, Ben 612 canal Formato APNG (PNG animado) 652 apóstrofo (') 221 deficiência auditiva 42
alfa 651 transparência 106 método appendChild() 628 elemento de autoria (pré-processamento).
alfa 651, 676, 678-679, 694 atributo alt elemento img miniaplicativo 89 interface de programação de Consulte pré-processamento de folhas de estilo de
63-65, 134, 136, 149, 162, aplicativos (API) 219, 577, 621, 764–765 autor 249 elemento de formulário de atributo
de preenchimento automático 209 tipos de elementos
556 de entrada 212–213 elemento textarea 211
elemento de entrada, tipo de imagem 212 Arbé, Eric 506 seletor
texto alternativo 136–137 Amazon.com, de valor de atributo de substring arbitrário 324, 756
desempenho no site 44 e comercial (&) 105–106 função arc() 232 argumentos em comandos
elementos ancestrais 247 e operador 561 Andrew, 571, 575 em funções 608, 610–611 atributo de foco automático
Rachel 398, 448–449, 478, 762 colchetes angulares elemento de botão 209
(<>) 27, 30, 56 Site AngryTools.com 538 Formato elemento de entrada 210, 212–213
PNG animado (APNG) 652 Software Animate (Adobe) elemento de seleção 211 elemento
228 animação sobre 536–538 PNGs animados 652 ARIA (Internet Rica Acessível textarea 211 atributo de reprodução
ferramentas de animação 538, 541 suporte ao Aplicativos) 102–105, 205, 718 arrays 603, automática
navegador 539, 541 Propriedades CSS 539–540, 606 seleção baseada em direção de arte 153– elemento de áudio 234
545 método de descarte 654 estabelecendo quadros- 155, 686 elemento de artigo 82–87, 112 artefatos elemento de vídeo 223, 235
chave 538–539 frame delay em formato GIF 654 e (cor) 646 conjunto de caracteres ASCII 57 Pós-processador de prefixo automático 346, 446,
654 path animators 717 configurando delay 523 elemento de lado 82–84, 86–87, 112 ASP (Active 518, 577
imagens SVG e 140, 541, 716–717 funções de Server Pages) 180 recurso de mídia de proporção Avery, Justin 515
tempo 520–522 quando usar 540–542 propriedade 493 ASP.NET 180 AST (Abstract Syntax Tree) 577
de atraso de animação 539, 545 asterisco (*) 187, 285, 601 JavaScript e XML
assíncrono (AJAX) 11–12, 102, 632–633
B
carregamento assíncrono 632 Editor de código desenvolvimento de back-end 10
Atom 16, 720 at-rules 265, 560 minimização de
processamento de back-end 23, 32
atributo 761 nós de atributo 622–624 propriedade de visibilidade de backface 536, 545
propriedade de anexo de fundo 326, 335–336, 354
propriedade de clipe de fundo 314, 326, 333,
354
propriedade background-color sobre

312–313, 326, 354, 520 imagens de
fundo lado a lado 327 dicas de uso 338
768 Índice
Índice
background-image propriedade 143, 324– 327, imagens bitmap sobre bordas

338–341, 354 imagens de fundo adicionando 132–133, 147, 645, 657 área de cerca de 366
324–327 anexo de fundo 335 posição de fundo desenho da tela e 228 escolhendo o propriedades animáveis 520 cor da
331–333 posição de fundo origem 333–334 melhor formato de arquivo para 656, 663 :blank borda 369–370 estilos de borda
repetição de fundo 328–330 tamanho de fundo selector 757 Blink rendering engine 24 block axis 366–367, 371 largura da borda
336–337 posicionamento múltiplo 339–340 334 450–451 blockquote element 61, 72, 391–393 368, 371 recolhidos em tabelas
lado a lado 326–327 propriedade de origem de blockquote element 78 –79, 112 formato BMP 132, 552–553 combinando estilo, largura,
plano de fundo 333, 354 propriedade de posição 645, 699, 720 elemento de corpo cerca de 57–59, cor 371 cantos arredondados 371–374, 662
de plano de fundo 326, 331–334, 354, 520, 558– 70 propriedade de cor de fundo 327 na estrutura do separados em tabelas 551–552 borda
559 propriedade de plano de fundo 321, 326, documento 246–248 elemento de script e 598 propriedade -spacing 520, 551, 566
338–340, negrito. Veja propriedade font-weight Bolles, Brendan propriedade border-style 366–367, 386 propriedade
655 Biblioteca Bonsai 717 Atributos booleanos 64 border-top-color 369, 384, 520 propriedade border-
Tipo de dados booleanos 602, 605 propriedade top-left-radius 371, 386 propriedade border-top 371,
border-bottom-color 369, 384, 384 border-top- propriedade do raio direito 371, 386
354
propriedade de repetição de fundo 326, 328– 330, propriedade border-top-style 366–367, 386
354 fundos área de pintura de fundo 314 propriedade border-top-width 368, 386, 520 propriedade
recorte 314 considerações de cor 312–314, 491 border-width 368, 386
Bos, Wes 421
520 Botelho, Pedro 542
propriedade border-bottom-left-radius 371, propriedade inferior 406–407, 418, 521 caixa
Propriedades CSS 354, 520 386 delimitadora 530
jogando com opacidade 315 propriedade border-bottom 371, 384 border- Ferramenta Bourbon
especificando estilos em uma declaração 338– bottom-right-radius propriedade 371, 386 border- 576 modelo de caixa
340 bottom-style propriedade 366–367, 386 cerca de 251–252, 355
cores de borda transparente e 369 propriedade atribuindo tipos de exibição 380–382 bordas
de tamanho de fundo 326, 336–337, 356, 366–375 sombras de caixa 382–383
354 propriedade de largura de fundo de borda 368, 386, lista de propriedades de caixa 384–386
barra invertida (\) 56, 116 520 margens 356, 376–380 preenchimento 356,
Baranovskiy, Dmitry 717 basefont border-box model 358–360, 548 border- 361–365 partes de um caixa de elemento
element 89 baseline 287 bash collapse property 551, 566 border-color 355–356 especificando as dimensões da
(programa shell) 568–569 property 281, 312, 317, 369, caixa 356–361 propriedade box-shadow
384 382–383, 386 propriedade de dimensionamento
Baumgartner, Stefan 572 b borda (caixa de elemento) 356 de caixa 357, 386, 548
(negrito) elemento 89-91, 112, 204-205 bdi propriedade de início de imagem de borda
(isolamento bidirecional) elemento 89, 375 propriedade de imagem de borda 251, 340, 375, Editor de caixa 720
112 384 propriedade de repetição de imagem de borda Editor de colchetes 16, 720
bdo (substituição bidirecional) elemento 89, 375 propriedade de fatia de imagem de borda 375 pontos de interrupção (consultas de mídia) 495–498
112 propriedade de origem de imagem de borda 375 Brekardin, Nelly 320 br
Serviço de pé de feijão 581 imagem de borda- propriedade largura 375 propriedade (quebra de linha) elemento 62, 89, 96, 112
Beer, Brent border-left-color 369, 384, 520 propriedade border-left Algoritmo de Brotli 724–725
588 ::before seletor 321–322, 758 371, 384 propriedade border-left-style 366–367, 386 Brown, Ethan 617
seletor de valor de atributo de substring inicial propriedade border-left-width 368, 386, 520 propriedade Brown, navegadores
323, 756 função beginPath() 230–231 border 321, 326, 371 , 384 propriedade border-radius Tim 280 texto
372–375, 386, 562, 575, 662 propriedade border-right- alternativo 136–137
Bellamy-Royd, Amelia 144, 730 color 369, 384, 520 propriedade border-right 371, 384 Suporte a modelos de
Benyon, David 9 propriedade border-right-style 366–367, 386 cores do Browser Wars 630 309
Berners-Lee, Tim 11, 22, 93, 760 elemento border-right- propriedade de largura 368, 386, margens padrão 376 estilos
grande 89 transparência binária 676–678 padrão 61–62 exibindo texto
vinculado 113 limitações de
Serviço Bitbucket 581 bits suporte a elementos 81 mídia incorporada
de profundidade 696 520 e 218–232
Índice 769
Índice
favicons 665–666 Folhas de estilo em cascata. Consulte método close(), objeto de janela 613 função
detecção de recursos 559–562 CSS com distinção entre maiúsculas e closePath() 231 tags de fechamento (final)
Flexbox suporta controles de minúsculas Tags HTML 56 JavaScript 56, 72 Cloud Four blog 685 Serviço
formulário 444–447 e 185, 188–189 599, 601, 609, 613 Catlin, Hampton Cloudinary.com 159, 664, 685– 686, 690
Suporte de grade 448–449, 454 573 Seção CDATA (XML) 597, 706–707, Serviço de tipografia em nuvem 265 cm
histórico de 22 715, 761 comando cd 571 Cederholm, Dan (centímetros) unidade 253–254 CMSs
Suporte a HTML5 82 573 atributo cellpadding 169 atributo (sistemas de gerenciamento de conteúdo) 32,
Objeto de janela JavaScript 612–613 links cellpacing 169 elemento central 89 Chacon , 159, 664 modelos de cores CMYK 307, 647, 675
abrindo em novas janelas 126– Scott 587 codificação de caracteres 57–58, 69, Coady, Geri 314 Coda editor 16 codec (código/
127 349 referências de entidades de caracteres decodificação) 219–221 conjuntos de
dispositivos móveis e 23 105–108 escapes de caracteres 105–108 caracteres codificados 57 editores de código
documentos HTML de análise 30, 32, 105 atributo charset, meta elemento 57–58 regra cerca de 15–16 suporte Git integrado 588
mecanismos de renderização 24, 30–31 @charset 349 botões de caixa de seleção validadores integrados e 69 suporte a SVG 705,
conformidade com os padrões 38 sobre 192, 194, 210, 212 rótulos e 203 720–721 code element 89, 93, 112 CodeKit editor
Suporte SVG 140–144, 705 considerações de estilo 548 atributos 16, 572 codepen.io website 662, 716 code points
testando em 18 prefixos de verificados, tipos de elementos de entrada 193, 57, 108 Codrops blog 542 deficiência cognitiva
fornecedor 345–347, 382 ferramentas 212–213 :seletor verificado 320, 757 verificando 42 col element 173, 176 colgroup elemento
de exibição de viewport 498 arquivos (Git) 584 elementos filhos 247, 449 166, 173, 176 modelo de borda de tabela
Serviço de teste BrowserStack 514 seletores filhos 283, 316, 755 Chinnathambi, recolhida 552–553 margens recolhidas 378,
Software BrowserSynch 513 Kirupa 716 Chisholm, Wendy 43 canais (largura 422 coleções (nodeLists) 624 dois pontos (:)
Budd, Andy 378 zero) unidade 253 elemento de círculo (SVG) 316, 320 daltonismo 314 recurso de mídia de
processo de construção 578– 139, 141-142, 705, gama de cores 493 recurso de mídia de índice
579 balas 77, 187, 296–298 de cores 493 recurso de mídia colorida 493 cores
Bushell, David 507 botão modelos 307–311 nomes de cores 304–305
Função ARIA 102 botão paletas de cores 648–650 seletores de cores
(personalizado) controla 190, 209–210, 212, 548 201–202, 210, 213, 307–311 perfis de cores
elemento de botão 190, 209 ( ICC) 652, 655, 698 propriedade de cor sobre
301, 354, 520 alteração da cor do texto 280–281
nomes de cores e 304 cores de primeiro plano e
311 cores adição a documentos 325 plano de
C fundo 312–314 alteração da cor do texto 280–
armazenamento de arquivos 281 primeiro plano 311–312 gradientes 340 –348

708 HSL modelo de cores 307, 309–311, 317
de imagem em cache 136
Cagle, Kurt 731 Cailliau, circle() function 399, 401 cite indexado 648, 653
attribute blockquote element
Robert 22 Caliman, Razvan
403 maiúsculas em caixa de camelo 112 del element 112 ins
element 112 q element 112
627 Camen, Kroc 224 Site
cite (citation) element 89, 93,
CanIUse.com 156, 399, 449, 504 Canvas API 230–
232, 765 elemento canvas 112 Clark, David 572 Clark,
Josh 506 Clark, Keith 631 class global
cerca de 228–230 attribute 99–103 , 625, 753 seletor de
Canvas API e 230–232, 765 SVG classe 284, 316, 323, 755 técnica clearfix
versus 715 transformações e 527 398 clear property 393–394, 418, 422
maiúsculas camel-case 627 alterando processamento do lado do cliente 23, 593
para texto via CSS 291 em nomes de Serviço Clipart.com 644 elemento clipPath
fonte 263 em propriedades de variante (SVG) 705 recorte de fundos 314 recorte (SVG)
de fonte 275–276, 301 em HTML 56 709–711 propriedade de clipe 521 clonagem de
elemento de legenda 166, 170, 176 repositórios 586
retornos de carro. Veja as quebras de linha
Carter, Matthew 79, 92 cascata 249–251
770 Índice
Índice
herdar 281, 311-312 conteúdo para páginas da elemento de áudio de

Modelo de cores RGB 303, 306–309 web estrutura básica do documento 56–58 atributo de origem cruzada
especificando valores 303–311 nomes de dimensionamento baseado em conteúdo 456– 234 elemento de vídeo 235
cores padrão 281 457 conteúdo gerado 321–322 convenções Compartilhamento de recursos entre origens (CORS)
Especificação Truecolor 306, 646, 651 dicas de uso de nomenclatura para arquivos 54 em layouts 400
314 paradas de cor em gradientes 341 tabela de responsivos 499–500 salvamento de tamanho cruzado (contêineres flexíveis) 424
cores (mapa de cores) 648 documentos 53–54 marcação semântica 59– Galeria de Padrões CSS3 348
61 sistemas de gerenciamento de conteúdo CSS (Folhas de Estilo em Cascata)
Site Colorzilla 347–348 atributo cols, (CMSs) 32 , 159, 664 design de "saída de conteúdo" informações adicionais 258–259 benefícios
elemento textarea 186, 211 atributo colspan td 497 paridade de conteúdo 499–500 do modelo de caixa 239–240 355–386
elemento 168, 176º elemento 168, 176 propriedade de propriedade de conteúdo 322 ferramentas de desenvolvedor de navegador
intervalo de coluna 472 extensões de coluna para 256–258 conceitos 246–253 familiaridade do
(tabelas) 168 vírgula (,) 263 linha de comando designer com 10 consulta/detecção de recursos
Estrategista de Conteúdo 5 399, 449, 559–564 histórico de 252 como as folhas
Cabeçalho de tipo de conteúdo 32, 133 de estilo funcionam 240–246 herança 246–248
seletores contextuais 281, 283 atributos ferramentas modernas de desenvolvimento
de controles web 567–
sobre 567–568 elemento de áudio 234
cuidados ao usar 571 elemento de vídeo 223, 235

introdução aos comandos 569– controles, formulário. Veja controles de
571 formulário Cooper, Alan 8 Cope, Rachel 538 590
pré-processadores rodando por meio de copyright (©) 108 Corel Draw tool 17, 642 pós-processadores para 576–578 pré-
573 programas shell 568–569 CORS (Cross-Origin Resource Sharing) processadores para 572–576 redefine
Ferramenta terminal 19, 568 554–556 ordem de regra 250
comentários especificidade de regra 249
navegadores ignorando texto em 55 em 400 desempenho do site e 44 sprites 557–

HTML 61 JavaScript 599–600 em folhas @counter-style rule 296 Coyier, 559 prioridade de folha de estilo 249
de estilo 245 commits (Git) 582–585 Chris no elemento de botão 190 solução de problemas de estilos
operadores de comparação 603–604 no daltonismo 314 Blog CSS- conflitantes para a cascata 249–251
Compass tool 576 compiladores. Consulte Tricks 258 Plug-in FitVids.js 491 unidades de medida 253–256, 269– 272 Site CSS
o seletor de compostos de processamento no Flexbox recursos 421 nos Font Stack 267 CSS Gradient Generator 347
755 compressão Brotli 724–725 Gzip 724 gradientes 343 no HSLa Explorer CSSNext plug-in 577 Processadores CSS pós-
formatos de imagem 646–647, 651, 653, 693 310 nos perfis de cores ICC 652 processadores. Consulte pré-processadores
sem perdas 647, 651, 653 com perdas 646 na herança 360 em um -element de pós-processamento. Consulte a coleção de regras
LZW 653 SVG 724 concatenação 579, 602 shapes 662 em sprites 713 em de estilo de redefinição de CSS de pré-processamento
carregamento condicional 500 instruções SVGs 144, 731 cp command 571 554–556 Formas CSS 399–405 Site CSSsprites 559
condicionais 604–606 confirm() função rastreando o DOM 623 método Site CSS-Tricks cerca de 258 em imagens de borda
598, 609, 613 conflitos (Git) 585–586 formatos de createElement(), objeto de documento 375 em configurações de recursos de fonte 280 em
contêiner (mídia) 219–221, 224 contendo blocos 627 método createTextNode(), objeto cores HSL 310 em perfis de cores ICC 652 em
para posicionamento 409–411 área de conteúdo de documento 627 Conjunto de animações e transições de várias etapas 521 no
(caixa de elemento) 356 modelo de caixa de ferramentas Creative Cloud (Adobe) 17– dimensionamento de SVGs 730 em SVGs 731 em
conteúdo 357–358, 413 atributo global editável de 18, prefixos de fornecedores 346 CSS Zen Garden 240–
conteúdo 101 , 753, 241
672
Licença Creative Commons 643–644
Cronin, David 8
propriedade de colheita
521 eixo transversal 423-424, 430-431
Serviço de teste CrossBrowser 514
764
Índice 771
Índice
Site Cubic-Bezier.com 521 DiP (pixels independentes de dispositivo) 147, declarações de tipo de documento.
Cunningham, Katie 43 chaves {} 243, 659–660 dir (diretório) elemento 89 Veja as declarações DOCTYPE
491, 573, 604, 608–609 fontes cursivas 266– direction property 294 diretórios cerca de 116 Definição de Tipo de Documento (DTD) 763
267 funções personalizadas 609 mudando via linha de comando 571 link para Biblioteca Dojo 633
ferramenta de linha de comando cwebp 656 um arquivo em um diretório 118 link para um cifrão ($) 323, 569 nomes de
emulador Cygwin 19, 569 modelo de cores diretório superior 120–121 link para um domínio 23, 25, 33, 114
CYMK 307 diretório inferior 118–119 vinculação dentro Sistema de Nome de Domínio (DNS) 22–23
de um diretório 117 vinculação com nomes DOM (Document Object Model) sobre 11–
de caminho relativo da raiz do site 122 diretório 12, 59, 150, 595, 621–622 acessando nós
de usuário 569, 571 diretório de trabalho 569, 623–625 adicionando e removendo
583 gravação de nomes de caminho em elementos 627–
D imagens 123 nomes de diretório 25–26 atributo 630
global dir 97, 101, 753 atributo dirname, letras maiúsculas em 627
Biblioteca D3.js 717
atributo de dados, elemento de objeto 218, 234 elemento textarea 211 :dir() seletor 757 nós de manipulação 626–627 árvore
software de banco de dados 12 elemento de deficiências 42–43. Veja também o elemento de nós 622–623 polyfills e 630–632
dados 89, 95, 112 elemento de datalist 189, de botão de atributo desabilitado de
202, 209, 549 tipos de dados (JavaScript) 601– acessibilidade 209 elemento fieldset 209 Scripts DOM 10–12, 621, 623–630
602 visualização de dados 717–718 controles elemento de entrada 210 tipos de elemento de Não se repita (DRY) codificação 712 ponto-ponto-
de data e hora 198 –200, 210, 213 Função entrada 187, 212–213 elemento optgroup 210 barra convenção de nome de caminho 120–121
Date() 609 atributo datetime del elemento 112 ins elemento de opção 210 elemento de seleção 211 arquivos de ponto 570 pontos por polegada
elemento 112 time elemento 94–95, 112 dd elemento textarea 211 :disabled selector 320, 757 (dpi) 657 dois pontos (::) 320
(definição da descrição) elemento 77–78, 112 display property about 357, 380–382, 386 atribuindo
bloco de declaração 243 declarações 242–244 tipos de exibição 380–383 valor de bloco 550
deep linking 226 atributo padrão, track element valor flexível 482 valor de grade 449, 451, 478, DP (pixels independentes do dispositivo) 147,
226, 235 default (index) file 26–27 :default 483 valor de grade em linha 451, 478, 483 itens 659–660 dpi (pontos por polegada) 657
selector 758 defs element 708 del (delete text) de lista e 297 valores relacionados à tabela 553
element 89, 96, 112 Demaree, David 576, sistema de controle de versão distribuída 582 Arraste e solte o atributo
587 DeSandro, David 535 descendentes 247, 313 pontilhamento 697 elemento div cerca de 85 , global arrastável da API 765 101, 753, 765
descendentes selector 281– 282, 316, 755 listas 98–99, 112 widgets personalizados 205 tipos de Drasner, Sarah 716
elementos de entrada e 180 dl (lista de descrição) Dreamweaver (Adobe) 16, 307 menus
de descrição 74, 77–78 detalha o ambiente de
desenvolvimento do elemento 87. Veja design e elemento 77–78, 112 DNS (Domain Name System) suspensos 189, 195, 549 :drop() seletor
desenvolvimento na web recurso de mídia de 22–23 servidores DNS 23 declarações DOCTYPE 757
proporção de dispositivo 493 recurso de mídia de 57–59, 69, 763 objeto de documento 623– 625 DRY (não se repita) codificação 712
altura de dispositivo 493 pixels independentes de Modelo de Objeto de Documento. Consulte os DTD (Definição de Tipo de Documento) 763 dt
dispositivo (DiP) 147, 659–660 esboços do documento DOM 72–73, 87 (termo de descrição) elemento 77–78, 112
Dunham, Ethan 264–265
comando dwebp 656 linguagens
de programação dinâmica 593–594
sites dinâmicos 32
E
função de easing (timing) 520
idiomas do leste asiático 97, 279–283, 301
ECMAScript 594 Eden, Daniel 538 mecanismo
de renderização EdgeHTML 24 API de edição
pixels de dispositivo (físicos) 147–148 764–765 Eich, Brendan 594 Eisenberg, J. David
proporções de pixel de dispositivo 147–148 731 caixa de elemento sobre 355–356
recurso de mídia de largura de dispositivo 493 propriedades animáveis 520 -521
Devlin, Ian 224 dfn
(definindo termo) elemento 89, 93, 112 diálogo
ARIA papel 102 elemento de diálogo 87
772 Índice
Índice
atribuição de tipos de exibição 380–382 Formato Open Type (EOT) incorporado 264 aplicando como métodos 615
modelo de caixa de conteúdo 357–358, scripts incorporados 597 folhas de estilo aplicando com o método addEventListener()
413 manipulação de estouro 360–361 incorporadas 245, 251, 348 elemento incorporado 615 eventos comuns 613–614 ligação
especificação de dimensões 356–360 143, 218, 234 travessão (—) 108 em (ênfase) de evento 613, 615 seletor de valor de
colagens de elementos 9 nós de elementos elemento 88–89, 112, 311–312 atributo exato 323, 756 animação explícita
622–623 elementos cerca de 56 anatomia de 537. Veja associação explícita de animação
55–56 aplicação de estilos 245 bloco 61 (rótulos de formulário) 203 HTML eXtensible
definição em documentos 60 (XHTML) sobre 706 histórico de 760–761 requisitos
Unidade Emerge Interactive website 667 de marcação 56, 63, 761 elemento de script e 597
em (M-width) cerca de 253–255 pontos eXtensible Markup Language (XML) sobre 706
de interrupção e 497–498 tamanhos de CDATA seção 597, 706, 715, 761 DOM suporte
fonte e 269–272 alturas de linha e 288 621 histórico de 760–761 serialização de HTML5
Relacionado ao DOM 622– tamanhos de trilha e 455 763 requisitos de sintaxe 706 eXtensible
630 vazio 30, 56, 62–63, 134 Stylesheet Language
flutuante 387–405 genérico 98–
102 atributos globais 101–102, propriedade de células vazias 552, 566
753–754 elementos vazios 30, 56, 62–63, 134 :seletor
Estudo do Google sobre nomes 82 vazio 320, 757 strings vazias 602 em espaço
agrupamento de conteúdo 78–81 107 emuladores para teste 513 :seletor
HTML5 padrão 72 em habilitado 320, 757 caracteres de codificação
documentos HTML 27–30, 69 identificando 57–58, 69, 349 formulário dados 178 mídia
59–62 herança e 247, 285 inline 61, 72, 219, 222 sRGB 306 atributo enctype, Transformações (XSLT) 717–718 imagens
88–98 aninhamento 92, 179, 203, 706 não elemento de formulário 209 en dash(–) 108 externas 132–133 links externos 114–115 scripts
substituído 135, 357, 379, 390–391 tags de fim (fechamento) 56, 72 seletor de externos 597 folhas de estilo externas
posicionamento de atributos em 63 valor de atributo de substring final 323, 756 aproximadamente 348–349 adicionando estilos
posicionamento 405–416 substituíram 135– tag de fim. Veja a etiqueta de fechamento SVG 714 importando 350 elementos de link e 31,
136 atributos obrigatórios em 63–64 marcação Contrato de licença de usuário final (EULA) 245, 349–350 consultas de mídia e 494–495
semântica 59–61 264–265 Enkoder Form (Hivelogic) 127 en modulares 351

space 107 Envato Tuts+ website 229, 572, 578
EOT (Embedded Open Type) formato 264 EPS
formato 132, 645 sinal de igual (=) 64 igual para (==)
Sintaxe 705–708 baseada operador 603–604 equipamento,
em SVG para 55 desenvolvimento web 14–15 tratamento de erros. extranets 23
Requisitos de marcação XHTML 56, 63, Consulte as mensagens de erro de solução de ex (altura x) unidade 253
761 problemas 32 Site Etsy.com 495–496, 512
Requisitos XML 706 seletores EULA (Contrato de licença de usuário final) 264–265
de tipo de elemento 243, 249, 281, 284, euros (€) 108 propriedade de evento, eventos de
F
316 objeto de janela 613 e manipuladores de eventos fallbacks com ordem de regra 251
elemento elipse (SVG) 705, 711 função sobre 613–614 aplicados como atributos HTML 614 valor falso 602, 605 fontes de fantasia
elipse() 399, 401–402 reticências.(...) 108 266–267
cantos elípticos 372–373 controle de Gerador de favicon Favic-o-matic 667 favicons
entrada de endereço de e-mail 188, 213, 665–667 detecção de recurso (consulta) 399,
548 mídia incorporada cerca de 215 adicionando 449, 559–562
áudio às páginas 225 adicionando faixas de texto
para vídeo 225–227 adicionando vídeos às páginas
Ferramenta de vídeo FFmpeg
222–224 tela (área de desenho com script) 228–232 222 atributos de elemento
fieldset para acessibilidade
de formulário 209 e 180, 187, 192, 204–205
dicas e técnicas 549 figcaption

players de vídeo personalizados elemento 78, 80-81, 112 figura elemento
224 iframe (janela em uma janela) 215–218 formatos 78, 80-81, 112
de mídia 219–221, 224 embedders multiuso 218– Grupo de filamentos 507,
219 dimensionamento responsivo 490–491 comando de arquivo 512 679
Índice 773
Índice
gerenciamento de propriedades de flexbox :foco dentro do seletor 756 pastas.
arquivos armazenamento em 422 aninhadas listadas 437, 482 Consulte os diretórios Fong, Priscilla
cache arquivos de imagem 136 configurando 421–422 161 atributo de fonte (API de tela)
dotfiles 570 convenções de especificando a direção do fluxo 423–424 listas 230, 232 elemento de fonte 89 serviços de
nomenclatura de arquivos 54 não ordenadas como 433 agrupando itens em incorporação de fonte 265 Gerador @font-face
organização de arquivos 116 vinculação em várias linhas 424–426 propriedade de direção 265 regra @font-face 263–265 propriedade da
sites 116–126 arquivos de teste (Git) 584 flexível 423, 426–427, 437, 482 propriedade família de fontes 243, 263–268, 277,
ferramentas que suportam 18–19 nomes de fluxo flexível 426– 427, 482 propriedade flex-
de arquivos 54, 117 controle de seleção de grow 437–438, 441, 483 grades flexíveis
arquivos 197–198, 210, 212 File Transfer Protocol (layouts fluidos) 488–489 itens flexíveis cerca de 301
( FTP) 18–19 atributo de preenchimento 713–714 421 alinhando com margens 432–433 alterando a propriedade font-feature-settings 263, 279–
função fill() 232 atributo fillStyle (API Canvas) 230, ordem dos itens em contêineres 442–444 280, 301 regra @font-features-values
232 função fillText() 232 elemento de filtro (SVG) 279 propriedade font-kerning 263, 279, 301
705, 711–712 função de filtro 345 efeito de primitivos propriedade font-language-override 263, 280,
de filtro (SVG) 711 Finn , Teri 447 Firefogg Firefox 301 propriedade de fonte 263, 276–277, 301, 320–
extension 222 Firefox Grid Inspector tool 461–462 321 fontes animáveis propriedades 520
firewalls 23 :first-child selector 320, 757 ::first-letter cursivas 266–267 fantasia 266–267 fontes e
selector 321, 758 ::first-line selector 320–321, 758 :first- controlando o alinhamento dentro dos contêineres propriedades de texto 261–280, 294, 301–302
of-type seletor 320, 757 Firtman, Maximiliano 46, 513 428–435 monoespaçamento 79, 93, 266–267 sem serifa 266–
plug-in Fitvids.js 491 posicionamento fixo 406, 416 controlando o fluxo dentro dos contêineres 267 serifa 266–267 sistema 277 ponteiros de
layouts de largura fixa 489 plug-in Fixie 577 422-427 tipografia 502–503 variável 503 fontes da web 264–
sinalizadores, comando 570 Flanagan, David 598 determinando como os itens se flexionam nos 265, 268, 364, 503
Biblioteca JavaScript FlashCanvas 228 Flash Player contêineres 436–441 expandindo 437–438
(Adobe) 218 propriedade flex-basis 437, 439–441, propriedades listadas 437, 483 fornecendo tamanhos
483 Módulo Flexbox sobre suporte de navegador 419– iniciais para 439–440 encolhendo 438–439
421 rt para 444–447 formatação de formulários com especificando a direção do fluxo 423–424 envolvendo
549–550 dependência da direção do idioma 422 em várias linhas 424–426 linhas flexíveis 421
criação da barra de navegação com 427 propriedades propriedade flexível 436– 441, 483, 489 propriedade
listadas 482–483 configuração do contêiner Flexbox flex-shrink 437–439, 483 propriedade flex-wrap 425–
421–422 Site do Flexbox Playground 421 Página da 428, 437, 482
web Flexbugs 447 contêineres flexíveis sobre 421 Site Fonts.com 265 propriedade
alteração da ordem de itens flexíveis em 442– font-size-adjust 263, 279, 301 propriedade font-size
sobre 91, 263, 277, 301 como propriedade animável
Flickr Creative Commons 643 contenção 520 valores preferenciais 269 na propriedade de
flutuante 397 elementos flutuantes cerca fonte abreviada 276 dimensionamento com
de 387–390 adicionando formas ao redor valores relativos 270–272 especificando 269– 274
404 limpando elementos flutuantes trabalhando com palavras-chave 272, 277 Fonts
393–394 contendo flutuantes 397–399 Live service 265 Fontspring service 264 Font
Squirrel website 264–265 font stack 263–264,
267–268 font-stretch property 263, 276, 301 font-
CSS shapes 399–405 style property 263, 274–276, 301 font propriedade
layouts baseados em float 394 -synthesis 274, 301 font-variant-alternates property

elementos de bloco flutuantes 391–393 263, 279,
imagens flutuantes 395 elementos de texto
em linha flutuantes 390–391 elementos múltiplos
flutuantes 394–396 propriedades listadas 418
propriedade float 321, 388–389, 418, 422 método
flow-root 398 layouts de fluidos (grades flexíveis)
488–489 301
444 propriedade font-variant-caps 263, 278, 301 propriedade
controlando o fluxo dentro de 422–427 Flynn, método de foco font-variant-east-asian 263, 279, 301 propriedade font-
controlando o alinhamento de itens dentro de () de Peter 720, objeto de janela 613 : seletor de variant-ligatures 263, 278,
428–435 foco 317–319, 518, 756 : seletor de foco visível
determinando como os itens se flexionam em 436–441 757 301
774 Índice
Índice
propriedade font-variant-numeric 263, 278–279, botões de reinicialização 182, 190–192, 210, 212, Fulton, Jeff 232
301 propriedade font-variant-position 548 campos de entrada de texto especializados 187– Fulton, Steve 232
263, 278, 189, 210, 212–213 botões de envio 182, 190– notação funcional 324 funções
301 192, 210, 212, sobre 608–609 anônimos 615
propriedade font-variant 263, 275–276, 301 548 argumentos em 608, 610–611
propriedade font-weight 263, 273–276, 301, controles de entrada de texto 184–189, 210–212, personalizado 609 gerenciando
520 548 escopo de variável 611–612
elemento de rodapé 82–85, 112 elemento de retornando um valor 610–611
para elemento de rótulo de atributo formulário sobre
210 elemento de saída 210 179–180 atributos para 179–182,
primeiro plano 311–312, 314 281 209 aninhamento 179 elemento de
botão de atributo formenctype 209
tipos de elementos de entrada 212 G
bifurcação de repositórios 586–587 Gabriel, Sébastien 660
atributo de formação elemento de botão de atributo
Gallagher, Nicolas 555
elemento de botão 209 formmethod 209 tipos de
correção de gama 652
tipos de elemento de entrada elemento de entrada 212 Gannon, Chris 716
212 formatos, imagem. Veja formatos de elemento de botão de atributo
propriedade lacuna 472
formatos de imagem, vídeo e áudio 219–221, 224 formnovalidate 209 tipos de
Garrett, Jesse James 8, 633
formatação de texto tipografia avançada com CSS3 elementos de entrada 212 Gasston, Pedro 535
277–280 considerações de acessibilidade
Desfoque gaussiano 642, 693, 711-712
de formulários 181, 184, 187, 192, 203–205 Geary, David 232
alterando a capitalização 291 processamento nos bastidores 178–179 Mecanismo de renderização Gecko
alterando marcadores e números da lista 296– bloqueando o envio de 595–596 componentes de 24 conteúdo gerado 321–322 famílias
298 alterando a cor do texto 280–281 177–178 widgets personalizados 205 elementos e de fontes genéricas 266–267
fontes e propriedades do texto 261–280, 294, atributos listados 209–213 dados do formulário de Geolocation API 765
301–302 considerações de espaçamento 292 codificação 178 requisitos de acessibilidade do geolocalização, dispositivos móveis e 40, 41 método
considerações de tabela 166 ajustes de linha governo
getAttribute() 625 método getElementById(), objeto
de texto 287–290 sombra de texto 293–294 de documento 624 método getElementsByClassName(),
sublinhados e decorações 290–291 elemento de
objeto de documento 625 método
botão de atributo de formulário 209 elemento 43
getElementsByTagName(), objeto de documento
fieldset 209 tipos de elemento de entrada 210, 212– HTTPS (segurança) 25–26 tipos 624
213 elemento de objeto 235 elemento de saída 210 de elementos de entrada 183–202
elemento de seleção 211 elemento textarea 211 JavaScript e 31 layout
controles de formulário sobre 183–184 botões de e design 206–207 responsivo 506– Método GET 181–182
caixa de seleção 192, 194, 203, 210, 212, 548 507 estilo 207, 547–550 considerações Site Getty Images 643 g
seletor de cores 201–202, 210, 213 controles de de usabilidade 205–206 validando (agrupamento) elemento (SVG) 705
data e hora 198–200, 210, 190 variáveis e conteúdo 182–183 atributo Software Ghostlab 513
formtarget Formato GIF
sobre 132, 645, 653–654, 657
GIMP suporta 674
elemento de botão 209
proporções intrínsecas 336
tipos de elementos de entrada otimizando 695–698
212 instrução for() 606–607 Photoshop suporta transparência
identificador de fragmento 124–125 672 e 676, 680
fragmentos, link para o documento 124–126 GIMP
Ferramenta de vídeo Freemake
cerca de 17.672–674
213 222 fr unidades (fracionárias) 455–456, 458, 489 paletas de cores em 648–650
controle de seleção de arquivo 197–198, 210, 212 Friedman, desenvolvimento pontilhamento de imagens 697
controles ocultos 198, 210, 212 menus 189, 195– front-end Vitaly 285 10–12 reduzindo o número de cores 696 salvando
197 atributo de nome 182 considerações de processamento front-end 23 imagens em 671, 673–674 imagens
nomenclatura 183 botões de opção 192–193, 203, Frost, Brad 36, 506, 515 transparentes e 676, 678, 680 exibindo a tabela
210, 212, FTP (File Transfer Protocol) 18–19 de cores 648–649
desenvolvedores full-stack 12 Giraudel, Hugo 662
548
Índice 775
Índice
Ferramenta GitHub Desktop 588 configuração de propriedade de recursos online 478

Serviço GitHub 581–582, 588 exibição 451 configuração de 451– propriedades listadas 483–484
Serviço GitLab 581 462 espaçamento entre faixas 472–478 configurando a grade 451–462
Programa Git terminologia para 449–451 ferramentas terminologia para 449–451 linhas de
cerca de 581 que suportam 461–462 propriedade de grade cerca de 450 números e nomes
recursos adicionais 583, 587–588 como o Git área de grade 465–467, 478, 484 áreas de grade 453–454, 457–459, 462–464
funciona 582–587 razões para usar a cerca de 450 alinhando itens dentro de 473–474 posicionando itens usando 463–465 recurso de
terminologia 581–582 para 582–586 definindo 458–459 , 466 itens de posicionamento mídia de grade 493 propriedade de grade 459–
por 465–468 propriedade grid-auto-columns 460, 471, 478, 483 propriedade grid-row-end 463–
Glide script 664 468–469, 478, 483 grid-auto-flow propriedade 464, 478, 484
atributos globais (HTML5) 101–102, 753–754 470–471, 478,
variáveis de escopo global 611-612

GMT (horário médio de Greenwich) 94 propriedade grid-row-gap 472, 478, 483
Google 483 propriedade grid-row 465, 478, 484 linhas de
Algoritmo de Brotli 724–725 propriedade grid-auto-rows 468–470, 478, grade cerca de 450 comportamento implícito da
seletor de cores 307–308, 310, 325 483 grade 468–471 espaçamento entre faixas
estudo de nomes de elementos 82 células de 472 abrangendo 464 propriedade grid-row-

Torne a Web Mais Rápida Informações 46 grade cerca de 450– start 463–464, 478,
Ferramenta PageSpeedInsights 46 451 alinhando itens em 472–474
pesquisa de desempenho do site 44 itens fluindo em 453, 463, 470–471 itens
Serviço Web Fonts 265, 268, 364 abrangendo 463 margens e 474 propriedades 484
degradação graciosa 38 linha gradiente 341 de extremidade de coluna de grade 463–465, seletor de estrutura de grade 758
raio gradiente 343 gradientes sobre 311, 478, propriedade de áreas de modelo de grade 458–
340–341, 662 suporte a navegador 345–347 484 459, 465, 478, 483
projeto 347–348 linear 341–343 poder do propriedade grid-column-gap 472–473, 478, propriedade grid-template-columns 452– 460, 478,
processador 383 radial 340, 343–344 483 483 propriedade grid-template 460, 478,
repetindo 345 propriedade grid-column 465, 478, 484 colunas 483 propriedade grid-template-rows 452–455, 457–
de grade cerca de 450 comportamento implícito 461, 478, 483 faixas de grade cerca de 450–451
da grade 468–471 espaçamento entre faixas alinhando 475–476 conteúdo
472 abrangendo 464 propriedade grid-column- dimensionamento baseado em 456–457 definindo
start 463–465, 478, 484 propriedade grid-gap 452–454 tamanhos de faixa repetidos 457–458
472, 478, 483 espaçamento entre 472 especificando valores

Graham, Geoff 521 de tamanho de faixa 455–457
design gráfico (visual) 9–10, 17–18 maior ou
igual a (>=) operador 603 maior que o sinal (>)
106, 603 Inspetor de grade 453–454, 461–462 itens
de grade sobre 449–451 alinhando 472–476
Verde, Tom 220 alterando a ordem de 469 direção de fluxo Grigsby, Jason 159, 507, 664, 685, 690 seletores
Greenwich Mean Time (GMT) 94 grades e e densidade 470 comportamento implícito agrupados 252–253, 281, 316
contêineres de grade cerca de 449, 451–452 da grade 468–470 margens e 474 Grunt task runner 346, 577–579, 699
ferramentas de análise para 454 definição sobrepostos 469 colocando 463–468 Gulp task runner 577–579, 699
de áreas de grade 458–459 definição de propriedades listadas 478, 484 Gustavo, Aaron 39, 190
faixas de grade 452–457 grades flexíveis Ferramenta Gzip 724
488–489 propriedade abreviada de grade
459–460, 471, 478, 483 comportamento
implícito da grade 468–471 aninhamento 449
H
colocação de itens da grade 463–468 Módulo Grid Layout sobre h1 (nível de título 1) elemento 62, 72-73,
propriedades listadas 478, 483–484 repetição de 394, 447–448 suporte ao 112
tamanhos de trilha 457–458 navegador 448–449 declarando a h2 (título nível 2) elemento 72–73, 112 h3 (título
exibição da grade 451 como o Grid nível 3) elemento 72–73, 112 h4 (título nível 4)
Layout funciona 449 comportamento elemento 72–73, 112 h5 (título nível 5) elemento 72,
implícito da grade 468–471 dependência 112 h6 (título nível 4) 6) elemento 72, 112
RWD e 487-489 da direção do idioma 422
776 Índice
Índice
Codec de vídeo H.264 220, 224 HLS (HTTP streaming de vídeo) 221 adicionando links 113–130
halos 677–678 Halvorson, Kristina 5, Hogan, Lara 46, 512 mecanismos de renderização do navegador 24,
500 Handbrake video tool 222 diretório inicial 571 régua 30–31 capitalização em 56 verificando o suporte
Handlebars tool 580 recuo deslocado horizontal (quebras temáticas) 62, 74 alinhamento do navegador 156 criando páginas simples 49–
288–289 propriedade de pontuação horizontal de texto 289–290 nome do host 25 imagens 70 familiaridade do designer com 10 suporte
suspensa 294, 301 pixels de de hotlinking 135 recurso de mídia de foco 493 :seletor DOM 621 mídia incorporada 215–235 formulários
hardware 147–148 Hartl, Michael 571–572 hashes de foco em torno de 317–319, 756 31, 43, 177–213 desenvolvimento de front-end
( Git ID) 583 :has() seletor 758 Hay, Stephen 37, 515 10– 11 histórico de 759–762 elementos obsoletos
head commit (Git) 584 head element cerca de 70 na 89 marcação de tabela 163–176 marcação de
estrutura do documento 57–59, 246–247 style texto 71–112 padrões da web 38 tags HTML.
element and 245, 268–269 header element 82–84, Transformações Veja as tags cabeçalhos HTTP 32, 57 HTTP
112 cabeçalhos tabela 167, 170–171 páginas da SVG e 141 e 527 (HyperText Transfer Protocol) sobre 21
web 82–84 transições de disparo 518 href navegadores e 23–24 software de servidor e 22–
atribuem um elemento 84, 114–128, 23 URLs e 24–27 solicitações/respostas HTTP
130, 132 elemento de link 350 hr (regra 32–33, 44, 133 protocolo HTTPS 25–26, 181
horizontal) elemento 62, 74, 112 HTTP códigos de status 32 HTTP Streaming Video
(HLS) 221 servidores HTTP (web) 22 modelo de
Modelo de cor HSB 307, 310 hub (Git) 582 matiz (modelo de cores HSL) 309
Modelo de cor HSLa 309, 311 links de hipertexto. Veja um elemento (âncora)
Modelo de cores HSL 307, 309–311, 317 Hypertext Markup Language.
arquivo htaccess 133
atributo de cabeçalhos HTML5
td elemento 171, 176º Suporte API 764–765 suporte
elemento 176 títulos ao navegador 82 atributos
72-74 globais 101–102, 753–754 histórico de 29,
Head, Val 538 762 componentes de marcação 763
deficiência auditiva 42 elemento organização do conteúdo da página 82–87
de tela de atributo de altura 234 validação 763 padrões da web 71, 83
elemento de incorporação
234 elemento de iframe 216,
234 elemento de img 137, 162, Serialização XML de 763
490 tipos de elemento de entrada Script HTML5 Shiv 82–83, 631 Consulte
212 elemento de objeto 235 Documentos HTML Protocolo de transferência de hipertexto HTML.
elemento de svg 707, 724–726 anatomia de 27–33 Consulte seletor de valor de atributo separado por
elemento de vídeo 223, recurso anexando estilos a 241–243 criando hífen HTTP 323, propriedade de 756 hífens 294,
de mídia de 235 altura 493 no Bloco de Notas 51 criando no 301
propriedade de altura 357, 386, 520 TextEdit 52 considerações sobre
herança 246–247 marcando manualmente 50
EU
HEVC (Codificação de Vídeo de Alta Eficiência) analisando 30, 32 estrutura mínima recomendada
220 56–58 i18n (internacionalização) 97 site
sistema de numeração hexadecimal 308– IANA.org 226 perfis de cores ICC 652,
309
655, 698 ícones
Hicks, John 667 Web Design Responsivo 40–41
atributo global oculto 101, 753 controle de desempenho do site e 44 estruturação adaptável 731
entrada oculta 198, 210, 212 atributo alto, 11, 31, 55–59, 241–242 criando 667
elemento medidor 202, 210 displays de alta Considerações SVG 141–142 favicons 665–667
densidade 147–149, 658–659, 686–690 validando 68–69, 763 elemento html encontrando páginas da web 644
sobre 57–59, 70 na estrutura do Ferramenta Icon Slate
Codificação de vídeo de alta eficiência (HEVC) documento 246–247 atributo lang 97 666 idêntica ao operador (===) 603–604 id
220
atributo global sobre 100–102, 753 nós acessando
texto destacado 89, propriedade por 624 elementos datalist e 189 rótulos de
de histórico 94, objeto de janela 613 HTML (Hypertext Markup Language) cerca de 29 formulário explicitamente atribuídos 203
Formulário Encoder Hivelogic 127 adicionando imagens 62–65, 131–162
Hixon, Jeremy 576
Índice 777
Índice
identificador de fragmento 124–125 salvando imagens no Photoshop CC 671– Expressão Funcional Invocada
Seletor de ID e 243, 282 673 SVG. Consulte Transparência Imediatamente (IIFE) 612 animação
Padrão de microformato e 103 códigos SVG e marcação de imagem 647, 650– implícita 537. Veja a associação implícita de
idiomáticos JavaScript 605 referência 282 651, 653, 678–680 WebP 132, 645, 654–656 transições (rótulos de formulário) 203 !indicador
134–137. Veja também imagens importante 250 importando folhas de estilo externas
Seletores de responsivas plug-in imagemin 699 ferramenta 350 @import rule 245, 251, 349–350 :indeterminate
ID sobre 243, 282–284, 316, 755 ImageOptim 699 resolução da imagem 657–658 selector 758 index (default) file 26 –27.584 cores
jQuery e 636 especificidade e 249, considerações de acessibilidade das imagens indexadas 648, 653, 697 números indexados
284–285 136 adição de 62–65, 131–162 adição de SVGs 139– (matrizes) 603 índice de arquivos (Git) 584 Arquiteto
instruções if/else 604–606 elemento 145 plano de fundo 324–340 origem do plano de de Informação 5 Designer de Informação 5 herança
iframe (inline frame) fundo 331–333 arquivos de imagem em cache 136
cerca de 215 a 216 sprites CSS 557–559 externo 132–133 favicons 665–
vídeos incorporados com 217 667 produção de ativos de imagem. Veja produção
atributos de sandbox 217, 234 de ativos de imagem texto baseado em imagem
Considerações SVG 143, 727 envolve 400 formatos de imagem. Veja formatos
IIFE (Imediatamente Invocado Funcional de imagem técnicas de substituição de imagem cerca de 246
Expressão) 612 556–557 tamanho e resolução da imagem 657– atributos de tamanho de caixa e 360
IIS (Serviços de Informações da Internet) 22, 660 fontes de imagem 641–644 otimização 9, 691– cores e 281, 311–312 estrutura de
180 700 permissões para uso 135 fornecendo documentos e 246–247 pais e filhos 247
i (itálico) elemento 89–91, 106, 112 dimensões para 137 redimensionamento 137, 664, propriedades e 247–248 polegadas
Ilic, Manoela 542 684 marcação de imagem responsiva 146–158 (polegadas) unidade 253–254 inicial
Ilustrador (Adobe) 17, 142, 642, 687–688, rotativa 528– 529 RWD e 487, 490–491 contendo bloco 409 atributo de escala inicial,
718 desempenho do site e 44 SVG. Veja SVG meta elemento 488 Editor do Inkscape 719
Ferramenta ImageAlpha 694–695 transparente 400 escrevendo nomes de caminho eixo inline (horizontal) 450–451 elementos inline
produção de ativos de imagem para 123 elemento img (imagem) sobre 30–32, (fraseado) cerca de 61, 72, 134 backstory de 89
cerca de 9 estratégias de 134–135 atributo alt 136, 149, 162, 556 alinhamento como contendo blocos 410 flutuantes 390–391 listas
fluxograma para otimização de imagem de imagem padrão 135–136 como elemento vazio de 88–98 margens suportadas em 379 não
660–665 9, 691–700 dicas de produção 56, 62–63, 134 como elemento substituído 135 – substituídos 135, 357, 379 , 390–391 estilos
de imagem responsiva 680–690 salvando 136 atributos obrigatórios em 134 atributo src 134– embutidos 245–246, 251, 284, 713 bordas internas
imagens em formatos da Web 671– 135, 149, 162 atributo srcset 148–150, 152, 162 (caixa de elemento) 356 propriedade innerHTML
676 trabalhando com transparência 676–680 considerações SVG 140–141, 144, 709, 714, 727– 626 controles de entrada. Veja controles de
botões de imagem 190, 212 imagem editores 728 problemas de resolução de problemas 68 mapa formulário elemento de entrada type="button" 190,
suporte para formato de imagem 672–674 resolução de uso 162 atributo de largura 137, 162, 490 209–210, 212 type="checkbox" 192, 194, 203,
de imagem 657–658 otimização de tamanhos de 210, 212 type="color" 201–202, 210, 213
arquivo 693–698 redimensionamento de imagens type="date" 198– 199, 210, 213 type="datetime-local"
672, 684 198–199, 210, 213 type="email" 210, 213 type="file"
197–198, 210, 212 type="hidden" 198, 210, 212 type
="image" 210, 212 type="month" 198–200, 210, 213
Modo de cor RGB 306–307, 675 type="number" 200–201, 210, 213 type="password"
salvando imagens em formatos da web 671–672 210, 212 type="radio" 192–193, 203, 210, 212
ferramentas de ilustração vetorial 718–720 type="range" 200–201, 210, 213 type="reset" 182,
baseado na web 17 190–192, 210, 212
formatos de
imagem cerca de 132–133,
644–645 escolhendo a melhor
compactação 656 e 646–647, 651, 653, 693 perda
cumulativa de qualidade de imagem 646 GIF.
Consulte Formato GIF JPEG. Consulte o formato
JPEG, o Photoshop suporta 672 PNG. Veja o
formato PNG que fornece um modelo alternativo de
155 cores RGB e 644, 675 imagens salvas no GIMP
671, 673–674
778 Índice
Índice
type="search" 210, 213 polyfills e 630–632 janelas acessibilidade de formulário e atributo de rótulo
type="submit" 182, 190–192, 210, 212 type="tel" pop-up 126 widgets 180, 184, 192, 203 e atributo global lang 196 97,
210, 213 type="text" 184, 210, 212 type="time" personalizados pré-fabricados 205 101, 753 :lang() seletor 320, 757 códigos de idioma
198–199, 210 , 213 type="url" 210, 213 aprimoramento progressivo 39 (IANA) 226
type="week" 198–200, 210, 213 atributo desempenho do site e 44
inputmode, elemento textarea Suporte SVG 140, 715–718 Larson, Rob
validando formulários 190 o que 39 :seletor de último filho 320,
JavaScriptS pode fazer 595–597 window 757 :seletor de último tipo 320, 757
object 612–613 Lawson, Bruce 762
211 :seletor dentro do Notação de Objeto JavaScript (JSON) 633 padrões de layout 501–502
intervalo 758 método insertBefore() 628– JavaServer Pages 180 motores de layout (renderização) 24
629 ins (texto de inserção) elemento 89, 96, 112 Jehl, Scott 39, 156, 495, 632 Lázaris, Luís 322
Design de interação (IxD) 6–9 Jones, Alex 161 Biblioteca LazyLinePainter 717
entrelaçamento 652–653 Formato JPEG propriedade esquerda 406–407, 418,
internacionalização (i18n) 97 cerca de 132, 645–647, 657 521 elemento de legenda 180, 204–205, 210,
Números de livros padrão internacionais Suporte ao GIMP 674 549 propriedade de comprimento 607, 610, 623
(ISBNs) 100 otimizando 693–694 Lesiÿski, Kornel 694–695
internet cerca de 21 Photoshop suporta transparência MENOS pré-processador 346, 351, 572–573, 576
história de 22 672 e 676, 710 menor ou igual a (<=) operador 603 menor que sinal
Programa JPEGmini 699 (<) 106, 603 propriedade de espaçamento entre
Serviços de Informações da Internet (IIS) 22, biblioteca jQuery 205, 633–636 letras 292, 301, 520 ligaduras 278 caixas de luz 596–
180 JSON (Notação de Objeto JavaScript) 633 597 luminosidade (cor HSL modelo) 309 li (item de
intranets JSON-LD padrão 103 lista) elemento 75–77, 112, 115 elemento
23 :seletor inválido 758 propriedade de justificação de linearGradient (SVG) 705 função linear-gradient()
caracteres invisíveis 107 conteúdo sobre 428–429, 437, 475, 478, 482, 341–343, 662 caixa de linha 287 propriedade de
endereços IP 22–23 Irish, Paul 483 alinhando itens com margens 433 quebra de linha 294, 301 quebras de linha (retornos
630 ISBNs (International propriedade de justificação de itens 474–475, 478, de carro) br elemento 62, 89, 96, 112 comportamento
Standard Book Numbers) 100 elemento isindex 483 propriedade de justificação própria 473–474, 478, 484do navegador em relação a 55 blocos de declaração
89 site da iStockPhoto 643 itálico. e 243
Consulte a propriedade de estilo de fonte IxD
(Design de interação) 6–9 K
Kadlec, Tim 515
Kanouni, Hasma 161 kbd
(teclado) elemento 89, 93, 112 Keith, Jeremy JavaScript e 599
elementos de linha (SVG) 705
J 630, 762 Kellum, Scott 559 kerning 279
animação de quadro-chave. Veja a animação propriedade de altura de linha 277, 287–288, 301,
520
JavaScript. Consulte também scripts e scripts sobre @keyframes rule 538–539 kind attribute,
593–597 adição de comportamentos com 31 track element 226, 235 Kleinfeld, Sanders 230 atributo lineWidth (API de tela) 230,
232
adição a páginas da Web 597–598 recursos Koblentz, Thierry 398, 491–492 Koch, Peter-
elemento de link
adicionais 617 suporte a animação 540–541 objeto Paul 126 Kraken.io service 159, 664, 690, 699
do navegador 612–613 área de desenho da tela cerca de 349–350
Krug, Steve 8
228–232 capitalização em 627 distinção entre folhas de estilo externas e 31, 245, 349–
350 atributo href 350 atributo de mídia
maiúsculas e minúsculas 599, 601, 609, 613 tipos
494 atributo rel 350, 666 links adicionando
de dados 601–602 DOM e. Consulte a
113–130 alterando a aparência de 316
funcionalidade suspensa do DOM 189 eventos
613–616 desenvolvimento de front-end 10–11 navegadores exibindo texto vinculado 113
links diretos 226 links externos 114– 115
idiomáticas 605 bibliotecas 632–637 bibliotecas
suportadas 717 eu atributo href 84, 114–128 links de
label attribute hipertexto 21–22, 26
optgroup elemento 196, 210 option

elemento 210 track elemento 226,
235 label element atributos para
210
JavaScript e 31
Índice 779
Índice
vinculando a um arquivo em um diretório

M linguagem MathML 706 função
matrix3d() 536 função matrix()
118 vinculando a um fragmento em outro
documento 125–126 informações legíveis por máquina 95, 103 527 cor fosca 677–678, atributo
Ambiente Macintosh
link para um diretório superior 120–121 link para 683 max
ferramenta de linha de comando 568–
um diretório inferior 118–119 link para um ponto
específico em uma página 124–125 link dentro 571 criando documentos HTML 52 tipos de elemento de entrada 200, 202, 212–213
de um diretório 117 link com nomes de dotfiles 570 organização de arquivos 116 elemento de medidor 210 elemento de progresso
caminhos relativos da raiz do site 122 links mailto 211

Ferramentas Git/GitHub 588 Conversor de áudio máximo 222
127 abertura em novas janelas do navegador
126–127 links de telefone 128 sublinhado editores de imagem 672, 719 Site MaxCDN 724 propriedade
290 usando imagens como links 132, 135, 138 software de servidor e 22
max-height 360, 386, 520 atributo de escala
usando imagens como links 113 em sites 116– desenvolvimento web e 14–15 máxima, elemento meta
126 :seletor de links 316–320, 756 Maia, Renata 161 links 488
mailto 127 main axis
tipo de elemento de
423–424, 428–429 main element 82– entrada do atributo maxlength 185, 186–
83, 112 main size (flex containers) 424 187, 212–213 elemento textarea 211
recurso de mídia max-width 492, 495
Mall, Dan 9 man propriedade max-width 152, 360, 386, 490,
comando 571
Ambiente Linux sobre Mangialardi, Michael 662 520

581 ferramentas de Marcotte, Ethan em Maio, Matt 43
linha de comando 568–571 design de “saída de conteúdo” 497 McGrane, Karen 500 MDN
Ferramenta Cygwin 19, em grades flexíveis 514 em consultas Web Docs site no método
569 editores de imagem de mídia 514 em preservar a addEventListener() 615 adicionando legendas
719 desenvolvimento web e 14 integridade do elemento 499 em design web e legendas ao vídeo HTML 227 em CSS 259 em
atributos de lista, tipos de elementos de entrada responsivo 40, 271, 487–488 iframe embedding 217 em posicionamento fixo
189, 212–213 406 m-dot sites 40, 41 medidas, unidades de. Ver
lista propriedade de fundo de margem 376–378, 386, unidades de mea
520
a mudança de marcadores e a numeração 77,
296–298 descrição 74, 77–78 aninhamento propriedade margin-left 376–378, 386, 520
77 ordenado 74, 76–77, 180 não ordenado 74– propriedade margin 376–378, 386, 389 propriedade
77, 205, 433 margin-right 376–378, 386, 521 margens sobre 356, certeza
376–378 alinhando itens flexíveis com 432–433 elemento de link de
centralizando com 376, 508 –511 recolhimento de atributo de mídia 494
Plug-in de seletores de lista 577 378, 422 padrão para navegadores 376 em elemento de origem 154, 162
propriedade de imagem de estilo de lista 298, 302, elementos embutidos 379 negativos 379–380 condições de mídia 152
340 propriedade de posição de estilo de lista 297, valores percentuais para 376, 422 ponteiros de MediaHuman Audio Converter 222 Serviço
tipografia 503–504 propriedade margin-top 376– Media.io 222 Media Player API 224, 764 media
302 propriedade de estilo de lista 298 propriedade
378, 386, 521 mark element 89, 94, 112 linguagens
de tipo de lista de estilo 77, 296–298, 302 plug-in queries sobre 350, 488 suporte a navegador
LiveReload 579 variáveis de escopo local 611–612 de marcação 10 Consulte também HTML Marquis, 495 escolhendo pontos de interrupção 495–498
propriedade localStorage 765 propriedade de Mat introdução ao JavaScript 593–620 usando por recurso 491–493 como usar 494–495
localização, objeto de janela 613 esboços de JavaScript 621–638 elemento de máscara (SVG) tipos de mídia 491–492 MQTest. ferramenta
aparência e comportamento 9 atributo de loop 705 mascaramento (SVG) 694, 705, 709–711 mestre io 498 RWD e 487, 491-495 estrutura de 491
elemento de áudio 234 elemento de vídeo 223, 235 (Git) 584 :matches() seletor 758 operadores
loops (JavaScript) 606–608 compactação sem perdas matemáticos 604 Mathis , Brandon 310
647, 651, 653 compactação com perdas 646 baixa
atributo, elemento do medidor 202, comando 210 ls
569–571 site Lynda.com 538–539 esquema de
compressão LZW 653
Site da galeria de consultas de mídia
40 @media rule 492–493 tipos de mídia
492 atributo de menu, elemento de
botão 209 barra de menu ARIA role 102
Índice 780
Índice
elemento de menu 89 dispositivos móveis entidade nomeada 105–106

menus (controle de texto alternativo 136–137 namespaces 707 convenções
formulário) cerca de 195 navegadores em 23 larguras de nomenclatura para
menus suspensos 189, de dispositivo 487 mídia arquivos 54 para tipos de
195 opções de agrupamento 196– incorporada em 218, 221 efeitos de elementos de entrada 183 para
197 rolagem 195–196 menus foco e 318 marcações de imagem variáveis JavaScript 600 para nomes
(navegação) 432, 504–506, 509 mesclando para 146–158 multiplicidade de 36–37 de caminho 120–122 navegação
commits (Git) 585 metadados 57–59, 582, 655 suporte a plug-ins 218 Responsive otimizando em viewports 499, 504–
elemento meta 57–59, 62, 70, 487–488 elemento Web Design e 40–41, 485–516 506 organização do conteúdo da página 87
de medidor 202, 210, 549 atributo de método, testando em 15, 512–514 telas de toque e 318, elemento nav (navegação) 82–84, 87, 112 Neal,
elemento de formulário 181–182, 506, 596 viewports. Veja as janelas de Jonathan 555 margens negativas 379–380 valores
visualização Abordagem “Mobile First” 501 negativos nas posições de fundo 331 nas margens
209 deficiência de mobilidade 42 Modernizr polyfill 379–380 nas entradas numéricas 200 na ordenação
métodos, manipuladores de eventos como 615 82, 562–564, 655 folhas de estilo externas de itens flexíveis 443 nas sombras do texto 293
Meyer, Eric modulares 351 pontos de interrupção baseados aninhamento de colchetes 491 elementos 92, 179,
sobre o colapso das margens 378 em módulo 497 recurso de mídia monocromática 203, 706 grades 449–450 listas 77 contextos de
no CSS 258, 448 no CSS redefinir 493 fontes monoespaçadas 79, 93, 266–267 navegação aninhados 216, 218 flexboxes
554 nas formas CSS 403 na Montague, Destiny 512 Biblioteca MooTools 633 aninhados 422 estilos aninhados 573 Netscape
unidade em 255 Mosley, Marie 557 Mozilla Foundation 346, 478 Browser Wars 630 elemento de incorporação 218
Prefixo do fornecedor Mozilla 346 Formato MP3 HTML e 760 JavaScript e 594 Web Standards Project
em gradientes 343 em 221 Contêiner MPEG-4 220–221, 224 Ferramenta 760 Ferramenta de rede (navegadores) 45–46
especificidade 285 MQTest.io 498 Módulo de layout de várias seletor de irmãos próximos 283, 755 Estrutura
Michalek, Martin 343 colunas (W3C) 420 Node.js 573, 577, 579, 723 nodeLists (coleções)
Microdata padrão 103 624 nós sobre 622–625 adicionando e removendo
Microformatos padrão 100, 103 Microsoft elementos 627–
Active Server Pages 180 ASP.NET 180
Browser Wars 630 ferramentas de

desenvolvedor para CSS 257 Internet
Information Services 22, 180 prefixo de
fornecedor 346 Visual Studio 16, 244

Web Projeto de Padrões 760 Mills, Chris 224
tipos MIME atributo 133, 155, 218, 220 min vários tipos de elemento
de entrada de atributo 196, 198, 212–213
selecionar elemento 211
Murray, Scott 717

atributo silenciado
elemento de áudio 234
tipos de elemento de entrada 200, 202, 212–213 elemento de vídeo 223,

elemento de medidor 210 comando de 235 mv 571
propriedade min-height 360, 386, 520 tipo de

elemento de entrada do atributo minlength 630
185, 186–187, 212–213 elemento textarea

N manipulando 626–627
211 função minmax() 455–458, 489 atributo name sobre Noessel, Christopher 8 espaço
182–183, 185 elemento sem quebra 107 elementos não
botão 209 elemento substituídos 135, 357, 379, 390–391 linguagens
Minns, Drew 578 sinal fieldset 209 elemento form não ocidentais 97 Normalize.css 555–
de menos (-) recurso de 209 elemento iframe 234 556 Norman, Donald 6, 8 Bloco de notas
mídia de 601 min de largura 492, propriedade tipos de elementos input (Windows) 50– 51 não é igual ao operador (!=)
de 495 min de largura 360, 386, 520 212–213 elemento object 235 603 não é idêntico ao operador (!==) 603 não
Site do Miracle Tutorials 227 propriedade é o operador 561 :not() seletor 320, 758
elemento output 210 elemento param
mix-blend-mode 560 convenção de 235 elemento select 211 elemento
mixins 575–576 comando mkdir 571 mm
textarea 211
(milímetros) unidade 253–254
Índice 781
Índice
atributo novalidate, elemento de formulário 209 otimizar CSS (pós-processamento). seletor de valor de atributo parcial 323, 756 controle
Nowell, Peter 660 :nth- Veja o pós-processamento de entrada de senha 187, 212, 548 animadores de
child() seletor 320, 757 :nth-last-child() otimizando imagens 9, 691–700 atributo caminho 717 elemento de caminho (SVG) 139, 705,
seletor 320, 757 :nth-last-of-type() seletor ótimo, elemento medidor 202, 708 nomes de caminho cerca de 116 absolutos 24–
320, 757 :nth-of-type() seletor 320 , 757 tipo de 25, 114–115, 135 relativos 114, 116–126 relativos à
dados nulos 136, 601–602 controle de entrada 210 :seletor opcional 758 raiz do site 122, 324-326
de número 213 números e alteração de elemento de opção 189, 195, 210, 549
numeração para listas 77, 296–298 variantes Codec de áudio Opus 221
de fonte 263, 278–279, 301 Oracle VirtualBox 15 listas
ordenadas 74, 76–77, 180 Convenções Unix 120–122 atributo
propriedade de ordem sobre 437, de padrão, tipos de elemento de entrada 212–213

601–602 relacionados a JavaScript 478, 483–484 alteração da ordem unidade pc (picas) 253–254 valores
como fatores de escala 288 entidade dos itens 442–445, recurso de mídia de orientação percentuais cerca de 272 para posicionamento de
numérica 105–106 469 493 imagem de origem 331–333 ou operador 562 fundo 331–332 para tamanho de fundo 331–332
conversão de pixels 489 modo flexbox e 422
para grades flexíveis 489 para tamanhos de fonte

O Formato OTF (OpenType) 264 borda 269 para tamanhos de trilha de grade 455
elemento objeto externa (caixa de elemento) 356

cerca de 218–219 propriedade de cor de contorno 317, 370, 386, 520
incorporando imagem SVG com 142–144, propriedade de deslocamento de contorno 370, 386
714 propriedade de contorno 370, 386 propriedade de
Considerações SVG 727–728 símbolo estilo de contorno 370, 386 propriedade de largura de
contorno 370, 386 , 520 :seletor fora da faixa 758 Modelo de cores HSL e 309–310 para
octothorpe (#) 124, 282–283, 325 propriedades de
deslocamento 406–407, 411–413 elemento de saída 202, 210 recurso de mídia de posicionamento de imagem 413 para
Ogg container 220–221 ol (lista bloco de estouro 493 recurso de mídia em linha de animações de quadro-chave 538 para
estouro 493 propriedade de estouro 360–361, 386 alturas de linha 288 para margens 376,
ordenada) elemento 76–77, 112 manipulador
de eventos onblur 614 manipulador de eventos propriedade de estouro-empacotamento 294, 302 422 para preenchimento 362, 422, 729
onchange 614 manipulador de eventos onclick para layouts de página 253 para
613–614 manipulador de eventos onerror 614 propriedades 253 para gradientes radiais
manipulador de eventos onfocus 614 343
manipulador de eventos onkeydown 614
manipulador de eventos onkeypress 614

P Modelo de cores RGB e 307 para
cantos arredondados 372 para
manipulador de eventos onkeyup 614
preenchimento de recuos de texto 288 para tamanhos
manipulador de eventos onload 613–614 :seletor
filho único 320, 757 :seletor somente do tipo de trilha 455 para transformações
cerca de 361-363 como componentes de
529–531 para caixas de visualização
320, 757 manipulador de eventos onmousedown caixa de elemento 356 valores percentuais
726 por cento sinal (%) 413
614 manipulador de eventos onmousemove para 362, 422, 729 propriedade de preenchimento inferior 361-362, 386,
614 manipulador de eventos onmouseout 614 521 permissões para uso de imagem 135
manipulador de eventos onmouseover 613– propriedade de preenchimento esquerdo 361–362, 386, personas 8 propriedade de origem de
614 manipulador de eventos onmouseup 614 521 propriedade de preenchimento 326, 362–363, 386 perspectiva 536, 545 propriedade de
manipulador de eventos onsubmit 614 propriedade de preenchimento direito 361–362, 386, perspectiva 535, 545
propriedades animáveis de opacidade 520 521
propriedade de preenchimento superior 361–362, 386, 521 Peterson, Clarissa 500–501, 515
Ferramenta PageSpeedInsights (Google) 46 Petit, Nick 667
Paint Shop Pro 650 Pfeiffer, Silvia 220

Modelo de cores HSLa e 311 Parallels Desktop para Mac 15 Técnica de Phark 556-557
Modelo de cor RGBa e propriedade elemento param 218, 235 elementos Photoshop
de opacidade 309 315, 354, 520 software pai 247, 313 parênteses () 608–610 sobre 17–18, 672–673, 687–688
animações e 654 paletas de cores em
de código aberto 22, 346 método parent() 636
Variações de Fonte OpenType 503 648–650 criando arquivos WebP 655
Formato OpenType (OTF) 264 Parker, Todd 39

Filtro Gaussian Blur 642 imagem
Prefixo do fornecedor do software Opera 346 Park, Thomas 478
elemento optgroup 195–197, 210, 549 função parseInt() 609 analisando pontilhada 697 imagens para
Ferramenta Optimizilla 699 documentos HTML 30, 32 telas de alta densidade 687
782 Índice
Índice
camadas em 339, 560 Photoshop suporta 672 pré-processamento

quantização em 648 transparências e 647, 650–651, 676, 678–680 de cerca de 10.572–576
reduzindo o número de cores 696 ferramenta PNGGauntlet 699 biblioteca de folhas de estilo modulares e 351
redimensionando imagens 684 salvando compressão pngquant 695 recursos de mídia de apresentações (camada de apresentação).
imagens em 671–673 imagens ponteiro 493 pontos (pixels de referência) 147– Consulte também CSS sobre 11, 31, 239,
transparentes e 676–678, 680 visualizando tabela 148, 659–660 polyfills (shims) cerca de 156, 596, 242 JavaScript e 595 marcação semântica e
de cores 648–649 linguagem de script PHP 180– 621, 630–631 HTML5 Shiv script 82–83, 631 59 atributo preserveAspectRatio, elemento svg
181 elementos de fraseado. Veja elementos em bibliotecas JavaScript 632–634 Modernizr 726–727 tipo de mídia de impressão 492
linha físicos (dispositivo) pixels 147–148 elemento polyfill 82, 562–564, 655 Picturefill polyfill 156, 632 prioridade (regras de estilo) 249 gerentes de
de imagem sobre 144, 162 seleção baseada em Respond.js polyfill 495 Selectivizr polyfill 320, produto 13 elemento de progresso 202,
direção de arte 153–155, 631–632 elemento de polígono (SVG) 705 211, 549 aprimoramento progressivo 38 –39
polígono( ) função 399, 401, 403 elemento gerentes de projeto 13 prompt, linha de comando
polilinha (SVG) 705 janelas pop-up 126 Portis, 569 função prompt() 598, 609 propriedades sobre
686 Eric 686 elementos de posicionamento, tipos de 242–243 relacionadas a ARIA 104–105 herança
seleção baseada em formato de imagem 155 elementos de entrada posicionamento absoluto de 246–248 listas de propriedades chave 262
Considerações SVG 144 405, 408–415 Propriedades CSS 418 valores de 244 protocolos 21, 24–27 biblioteca de
Polyfill de preenchimento de imagem 156, 632 posicionamento fixo 406, 416 posicionamento protótipos 633 seletores de pseudo-classe 316–
Peregrino, Mark 762 relativo 405, 407–408 especificando 406–407 320, 756–758 seletores de pseudo-elemento 320–
pixels (px) cerca de 147 posicionamento estático 405 posicionamento fixo 322, 758 pt (pontos) unidade 253–254, 487
406 tipos de elementos de posicionamento 405– atributo pubdate, elemento de tempo 112 menus
Dispositivo CSS 147–148, 406 (contexto de posicionamento) suspensos 189, 195 pull (Git) 586 pull requests
253–254 147 dimensões para (Git) 587 PunyPNG Pro tool 695, 699 push (Git)
imagens 137 hardware 147 586 pwd command 569–570 px unit 253–254,
resolução de imagem 657–658 455, 489 Python scripting language 180
física 147 referência 147–148

resolução de tela 658–660
SVG 707–708, 721, 725

Editor Pixir 17
Plug-in Pixrem 577 tipo de

elemento de entrada de
atributo de espaço reservado 185–187, 212–213
elemento textarea 211 :seletor de espaço Propriedades CSS 521
reservado mostrado 757 propriedade de posição 405–406, 409, 418 Pós-
Platz, Brian 259 processador PostCSS 572, 576–578 atributo
Pleeease framework 578 plug- poster, elemento de vídeo 223, 235 Método POST
ins sobre 218–219 requisitos de 181–182 pós-processamento sobre 572, 576–578
acessibilidade 43 efeitos de plug-ins 577–578 plug-ins que suportam 723
animação 538 ferramentas de ferramentas de prefixação do fornecedor 346, 446
construção como 578–579 pós- libras (£) 108 p (parágrafo) elemento 71–72, 112 Q
processamento 577–578, 723 ppi (pixels por polegada) 147, 657 Plug-in PreCSS q (1/4 milímetro) unidade 253 q (sair)
executores de tarefas e 699 577 atributo de pré-carregamento elemento de comando 571 q (aspas) elemento
áudio 234 elemento de vídeo 223, 235 pré- 79, 89, 92, 112 método querySelectorAll(),
WebP para Photoshop 655–656 sinal de carregadores 150 pré (pré-formatados texto) elemento objeto de documento 625 aspas curvas 108
mais (+) 601–602, 604 78-80, caracteres de aspas de escape 106 nomes
Formato PNG
de fontes e 263 tipos de dados string e 602 valores
sobre 132, 155, 645, 647–653, 657 PNGs de atributo de encapsulamento em 64
animados 652 comparação de formatos de
bitmap 656 criando favicons em 666–667
Suporte ao GIMP 674

otimizando imagens 694–698 112
citações no texto 78–79, 92
Índice 783
Índice
resolução elemento raiz. Veja o elemento

R sobre 657 html :seletor de raiz 320, 757 Rose,
elemento radialGradient 708 Dan 680 função de rotação3d() 536
imagem 657–658
função radial-gradient() 343–344, 662 botões de tela 147–149, resolução 658– função de rotação() 230, 527–529,
rádio 192–194, 203, 210, 212, 548 Raggett, David 660 recurso de mídia 493 531–532 função de rotaçãoX() 536 função de
759 Ragusa, Davide 161 range input control 213 Respond.js polyfill 495 Gerador de rotaçãoY() 536 função de rotaçãoZ() 536 cantos
imagens raster. Veja imagens bitmap Rathi, pontos de interrupção de imagem responsiva arredondados 371– 374, 662 row-gap property
Baljeet 382 atributo r, elemento circle 141 RDFa 685 472 rows attribute, textarea element 186, 211
padrão 103 folhas de estilo de leitor (usuário) 249 imagens responsivas rowspan attribute td element 168–169, 176th
tipos de elemento de entrada de atributo readonly adicionando 156– element 168–169, 176
187, 212–213 elemento textarea 211 :seletor 158 formatos de imagem alternativos
somente leitura 757 :seletor leitura-gravação 757 155 direção de arte 153–155
evento pronto 635 Really Simple Syndication suporte ao navegador 155–156
(RSS) 706 rect element (SVG) 139, 705, 708– telas de alta densidade 147–149
709 pixels de referência 147–148, 659–660 estratégias de ativos de imagem para 663– extensão de linha (tabelas)
marca registrada (®) 108 registrando nomes
664 marcação para 131–132, 146–156 169 imagens royalty-free
de domínio 33 Reimann, Robert 8 relativo flex dicas de produção 680–690 servidor 643 rp (fraseado rubi) elemento 89, 97, 112
441 relativo pathnames 114, 116–126 considerações 159 imagens de largura RSS (Really Simple Syndication) 706 rt (texto
posicionamento relativo 405, 407–408, 409 variável 150–152 ruby) elemento 89, 97, 112 anotação ruby 97
valores unitários relativos 253–256, 269–272 Grupo comunitário de imagens responsivas elemento ruby 89, 97, 112 Ordem das regras
URLs relativos sobre 114, 116–123 importação 146 da plataforma Ruby on Rails 180 (regras de
de folhas de estilo 350 link para imagens 135 SVGs responsivos 724–731 estilo) 250–251 regras, estilo. Veja as regras
atributo rel um elemento 103 elemento de link Responsive Web Design (RWD) cerca de estilo Rundle, Mike 556 Rutter, Richard
350, 666 repositórios remotos (Git) 586 método de 40–41, 485–487 recursos 503 RWD. Veja veja Web Design Responsivo
removeChild() 629–630 rem (raiz em) unidade adicionais 514–515 escolhendo
253–254, 269–271 mecanismos de renderização
pontos de interrupção 495–498
24, 30–31 Rendle, Robin 280 função repeat() projetando responsivamente 499–511
455, 457–458 repeating-linear-gradient( ) função grades flexíveis 488–489 imagens
345 função repeating-radial-gradient() 345 método flexíveis 490–491 configurando a
replaceChild() 629 elementos substituídos 13 5–
janela de visualização 487–488 return
S
136, 379 repositórios (Git) 582–583, 586 tipos palavra-chave 610–611 recurso de Salminen, Viljami 498
de elementos de entrada de atributo obrigatório reutilização e reciclagem (SVG) 712–713 atributo Sambells, Jeffrey 630
198, 212–213 elemento select 211 elemento invertido, ol elemento 112 samp (amostra) elemento 89, 93, 112
textarea 211 :seletor obrigatório 758 botões de Estrutura de retrabalho 578 atributo sandbox, elemento iframe 217,
reset 182, 190–192, 210, 212, 548 Resig, John Modelo de cores RGBa 309 234
633 Modelo de cor RGB fontes sans-serif 266–267 Pré-
sobre 303, 306 processador Sass 351, 572–576
propriedades de cor e 280–281, 307–309 saturação (modelo de cores HSL) 309
controle de formulário de seletor de cores e
Scalable Vector Graphics. Veja SVG
201 valores hexadecimais 308–309 formatos função scale3d() 536 função scale() 230,
de imagem e 646, 651, 675 especificando 527–528, 530–532 função scaleZ() 536 recurso
valores RGB 307–308 de mídia de varredura 493 Vocabulário
Rhose, Niklas 161 Schema.org 103 Schmitt, Christopher 258
Rich, Melissa 5, 500 atributo de escopo, o elemento 171, 176 escopo
documentos rich text 52, 102 de variáveis 611 –612 designers de tela 657
Riethmuller, Michael 504 direito tipo de mídia de tela 492 leitores de tela cerca
de propriedade 406–407, 418, 521 de 59 texto alternativo para imagens 136
imagens com direitos de gestão 642–643 transmitindo conteúdo estressado 88, 90
Rizzo, Davide 507 rm descrevendo o conteúdo da tabela 171
comando 571
Rodney, Dan 689
Roelof, Greg 679
funções 4–14, 102–104, 205, 718
diretório raiz 122, 133, 569
784 Índice
Índice
contornos de documentos e 72 classe 284, 316, 323, 755 desempenho do site 44–46
considerações sobre SVG 718 compostos 755 estilos nome do caminho relativo da raiz do site 122, 324–
resolução de tela 147–149, 658–660 Site de conflitantes e 249 contextuais 281, 326 Sitnik, Andrey 577 tipo de elemento de entrada
tamanhos de tela 497 elemento de script 597– 283 descendentes 281–282, 316, de atributo de tamanho 186, 188, 195, 212–213
598, 635, 715 scripts e scripts. Veja também 755 tipo de elemento 243, 249, 281, elemento selecionado 211 atributo de tamanhos
anatomia de scripts JavaScript 598–612 arrays 603 284, 316 grid-estrutural 758 agrupados 252– elemento img 150–152, 162 elemento de origem
diferenciação de maiúsculas e minúsculas 599 253, 281, 316 ID 243, 249, 282–284, 316, 636, 154, 162 Esboço ferramenta de design de interface
comentários 599–600 operadores de comparação 755 lista de Nível 3 e 4 755–758 pseudoclasse 16–17, 642, 687–688, 720 função skew() 527–528,
603–604 widgets de formulário personalizado 205 316–320, 756–758 pseudoelemento 320–322, 531 função skewX() 531 função skewY() 531 barra
tipos de dados 601–602 scripts incorporados 597 758 especificidade 249–250 tipo 755 universal (/) barra invertida versus 56 nos comentários 600
scripts externos 597 formulários e 180 funções 608– 285, 316 , 755 marcação semântica 59–61 para divisão 601 nas tags 56– 57, 67 em URLs 25–26,
611 requisitos de acessibilidade do governo ponto e vírgula (;) 105–106, 243, 245, 599 SEO 116, 119–122, 326 requisitos XHTML 63
(Search Engine Optimization) 13.226 controle deslizante ARIA função 102 caracteres
especialistas em SEO 13 fontes serif 266–267 versalete 275–276, 278, 301 elemento pequeno 89–
servidores e processamento do lado do servidor 91, 112 Smashing Magazine 285, 319, 504, 515, 685
cerca de 22–23 alternativas ao responsivo SMIL (Linguagem de Integração Multimídia
imagens 159 desenvolvimento de backend e 12 Sincronizada) 716 Biblioteca Snap.svg 717 soquetes
manipulação de formatos de imagem 132–133 765 Soferman, Nadav 685 software, desenvolvimento
43 códigos de status HTTP 32 arquivos de índice web 10–12, 15–19 Soueidan, Sara 730 documentos
instruções if/else 604–606 loops 606– e 26 desempenho do site e 44 nomes de caminho de origem 27–29, 61 elemento de origem
608 operadores matemáticos 604 relativos à raiz do site e 122 API de Service Workers
posicionamento do script 598 765 API de histórico de sessão 765 propriedade

desempenho do site e 44 instruções sessionStorage 765 método setAttribute() 626
599 variáveis 600–603 escopo da função setTimeout() 609 SGML (Standardized

variável 611–612 var palavra-chave Generalized Markup Language) 760 SHA-1 hash
611–612 583 shape-image-threshold propriedade 400, 418
shape-ma rgin property 400, 418 shape-outside
property 399, 418 Sharp, Remy 82, 572, 630–631,
Requisitos XML 706 mecanismos 762 Shea, David 240 shell (interface visual) 568
de rolagem para imagens de fundo Shepherd, Eric 224 calços. Veja polyfills (shims)
335 caixa de elemento 360–361 para elementos irmãos 247 barras laterais 86 deficiência
menus 195–196 visual 42 Simmons, Jen 403, 448–449, 478, 765
seletor de atributo simples 323, 756 Simple Things
SCSS (Sassy CSS) 573, 578 515 SiteBuilder site 4 nome do site (URLs) 24–26
Otimização do mecanismo de pesquisa (SEO) 13,
226
controle de entrada de campo de pesquisa 188, opções de formato de áudio e 225

213, 548 elemento de seção 82, 84-87, 112 imagens responsivas 153–156
Secure Socket Layer (SSL) 26 segurança Considerações SVG 144
elementos de trilha e 226 opções
Compartilhamento de recursos entre origens 400 de formato de vídeo e 224 espaçamentos

HTTPS e 25–26, 181 arquivos de texto de formatação e 292
de índice e 26–27 links visitados
e 317 Grid Layout Module 472–477 spam-bots
atributo selecionado, elemento de opção 196, e endereços de e-mail 127 span attribute col
210 element 173, 176 colgroup element 173, 176
selecione o elemento 195, 205, 211, 549 span element 89, 98–100, 112 spanning cells
Selectivizr polyfill 320, 631–632 selector (tabelas) 168–169 caracteres especiais 107–
engine (jQuery) 635–636 seletores sobre 242– 108, 601, 706 conteúdo especial, viewports e
243, 281 nós de acesso por 625 atributos 506–507 campos de entrada de texto
323–324, 755–756 filhos 283, 316, 755 especializados 187–189, 210, 212–213
Índice 785
Índice
especificidade (regras de estilo) 249–250, 285– atributo de largura de traço 713–714 SVG (Scalar Vector Graphics) sobre
286 tipo de mídia de fala 492 atributo elemento forte 88–91, 112, 275 dados 132, 139–140, 645, 703–706, 713
global de verificação ortográfica 101, 754 estruturados 103 estrutura (camada acessibilidade 718 adicionando estilos a 713–
sprites 557–559, 712, 731 estrutural) cerca de 11, 31, 242 HTML. 714 adicionando a páginas da web 139–145,
Veja HTML HTML5. Consulte 714 animação e 140, 541, 716–717 como
Atributo src do site documentos HTML HTML5. Ver imagem de fundo 143 suporte ao navegador
Squarespace 4 documento HTML 705 recorte e mascaramento 709–711
elemento de áudio 225, 234 coordenadas em 708, 725 visualização de
elemento de incorporação mentos dados 717–718 elementos e atributos 705
218, 234 elemento iframe 216, de herança e 246–247 estilos imagens bitmap incorporadas 709–710
234 elemento img 63-65, 123, 134-135, 149, embutidos e 245 incorporação com elemento img 140–141
162 JavaScript e 595 incorporação com elemento de objeto 142–
tipos de elemento de entrada 212– marcação semântica e 59 143 recursos como filtragem XML 713–719
213 elemento de script 597 elemento elementos de estilo sobre 244.348 efeitos 711–712 histórico de 705 estratégias de
de origem 162, 235 elemento de folhas de estilo incorporadas ativos de imagem para 663 em linha em
faixa 226, 235 elemento de vídeo em documentos documentos HTML 141–142 interatividade
222, 235 atributo srcdoc, elemento 245 com JavaScript 715–716
iframe 234 atributo srclang, elemento track menus de formatação 268–269
235 atributo srcset Considerações sobre SVG 140,
143 estilo atributo global 101, 245, 348, 754
elemento img 148–150, 152, 162 Plug-in Stylelint 577 propriedade de estilo 626–
elemento de origem 154, 162 627 regras de estilo. Veja também regras
codificação sRGB 306, 672 Suporte a JavaScript 140, otimização
SSL (Secure Socket Layer) 26 s atribuição de importância a 250 715–718 723–724
(tachado) elemento 89–91, 112 pilha de componentes de 242–244 tratamento Suporte ao Photoshop 672
confirmações (Git) 584 de estilos conflitantes (cascata) 249–251 responsivo 724–731 recurso
Fórum Stack Overflow 318 hierarquia de 249–251 prioridade de 249 de reutilização e reciclagem 712–713
arquivos de teste (Git) 584 SVG ordem de regras 250–251 especificidade de SVGs autônomos 140–141 suporte a
autônomo 140–141 249–250, 284–285 folhas de estilo. Consulte ferramentas para 718–721
Marcação Generalizada Padronizada os blocos de estilo CSS 9 Pré-processador Controle de versão SVN 582
Conformidade com os Stylus 346, 572–573, 576 subdomínios 25 elemento de símbolo (SVG) 705, 712
padrões da linguagem (SGML) 760 Editor de texto sublime 15–16 botões de envio Integração multimídia sincronizada
38 atributo de início, elemento ol 112 182, 190, 210, 212, 548 caracteres subscritos Sintaxe de linguagem
tags de início 56 instruções 89, 93, 278 seletor de irmãos subsequentes (SMIL) 716 para atributos 63–64
(JavaScript) 599, 604–606 estados, 283, 755 sub (subscrito ) elemento 89, 93 para elementos 55
especificação ARIA em 104 posicionamento Editor SumoPaint 17 caracteres sobrescritos
estático 405 sites estáticos 32 propriedade de 89, 93, 278 @suporta regra 399, 560–562 sup Caracteres de sintaxe HTML 106
status, objeto de janela 613 atributo de etapa, (sobrescrito) elemento 89, 93 Editor de edição Requisitos XML 706 fontes
tipos de elemento de entrada 201, 212–213 de SVG 720 elemento svg adicionando SVG do sistema 277
posicionamento adesivo 406 às páginas 141–142, 714 atributo de altura
707 , 724–726 atributo preserveAspectRatio
726–727 atributo viewBox 708, 725–726
T
Stint web font 364 atributo largura 707, 724–726 atributo xmlns atributo global tabindex 101, 754 elemento
banco de imagens e ilustrações 642–643 707 de tabela cerca de 165–166, 176
elementos suportados na propriedade
Storey, Dudley 731 de layout de tabela 166 553 tabelas
storyboards 8–9 cerca de 163–165 acessibilidade 169–
Straub, Ben 587 171 bordas recolhidas 552–553 elementos
elemento strike 89 de grupo de colunas 171–173 criando
tipo de dados string 602 167, 174 valores de exibição para 553
função stroke() 232 função
strokeRect() 230–231 atributo
strokeStyle (API Canvas) 230, Biblioteca SVG.js 717
232 Programa SVGO 723
786 Índice
Índice
elementos listados 176 elemento de texto (SVG) 705, 708 Tidwell, Jenifer 8
cabeçalhos 167, 170–171 controles de entrada de texto cerca de Formato TIFF 132, 645, 647, 699 til (~)
estrutura mínima 165–167 responsivos 184.548 atributos disponíveis para 569 imagens de fundo lado a lado 326–
507 elementos de grupo de linhas 171– cada tipo de entrada 210–212 campos de entrada de 327 controles de hora (e data) 198–200, 210,
172 bordas separadas 551–552 células texto multilinha 184, 186–187,
de extensão 168–169 considerações de 213
estilo 166, 551–553 211 elemento de tempo 84, 89, 94-95, 112
campo de entrada de texto de linha única 184– função de temporização (facilitação) 520
Tablesaw plug-ins 507 guias, 186 campos de entrada de texto especializados TinyPNG tool 695, 699 title
navegadores ignorando 55 187–189, 210, 212–213 propriedade de recuo element 56–59, 70 title global
propriedades de tamanho de guia de texto 288–289, 302, 520, attribute 101, 754
294, 302 tags (HTML) cerca de 27, 557 Toland, Patty 39 top
56–57 em documentos HTML 27– text-justify propriedade 294, 302 elementos propriedade 406–407, 418, 521
30, 69 barras em 56–57, 67 atributo de semânticos em nível de texto. Veja os elementos Torvalds, dispositivos de
destino um elemento 127, 130 formulário embutidos caracteres de marcação de texto toque Linus 581
elemento 209 destino/contexto=resultado escapes 105–108 figuras 78, 80–81 desenvolvimento projetando para os dedos 506
(fórmula) 271–272, de frontend 10–11 elementos genéricos 98–102 efeitos de foco e 318 elemento de
requisitos de acessibilidade do governo trilha 225–226, 235 marca registrada

(™) 108 propriedade de origem de
489 transformação 521, 529, 545 propriedade de
:target selector 320, 756 :target- transformação 521, 527–532, 545 transforma cerca de
within selector 756 task runners 346, 43 527–528 suporte ao navegador 528
577–579, 699 tasks 578–579 tbody elemento à mão 50 títulos

166, 172, 176 td (dados da tabela) elemento 72–74
165–166, 176 tel: protocol 128 tel (telefone) Componente HTML5 763 Propriedades CSS 521, 545
número) controle de entrada 188, 213, 548 site melhorando a acessibilidade com ARIA 102– produzindo distorção suave 532
gerado por modelo 580 105 elementos inline 61, 72, 88–98 lista de 531
elementos de texto 112 listas 74–78 citações 3-D 534–536
longas 64, 78–79 organização do conteúdo da ângulos de transformação 528–529
página 82–87 parágrafos 71–72 texto pré- posição de transformação 529–530 tamanho
Ferramenta de linha de comando do terminal 19, formatado 78–80 marcação semântica 59–61 de transformação 530 propriedade de estilo
568 testes em navegadores 18 laboratórios de citações curtas 92 desempenho do site e 44 de transformação 545 propriedade de atraso
dispositivos de construção 512–513 considerações quebras temáticas 62, 74 não reconhecidos de transição 518, 523, 545 propriedade de duração
sobre emulador 513 em dispositivos móveis 15 pelos navegadores 55 de transição 518–519, 524, 545 propriedade de
páginas para design compatível com daltonismo transição 523–524, 545 propriedade de
propriedade de transição 518–519, 525, 545 transições
sobre 517–519 aplicando múltiplas transições 523–
314 525 aplicando valores a todos 525 suporte a
Considerações RWD 512–514 URLs navegador 518 propriedades listadas 545 configurando
relativos à raiz do site 326 serviços de Requisitos de XHTML 56, 761 nós de texto atrasos 523 configurando o tempo para completar
terceiros 514 622, 627–630 propriedade text-shadow 293– 519–520 propriedade abreviada 523 especificando a
texto 294, 302, 520 propriedade text-transform 291, 302, 320– propriedade 519 funções de tempo 520–522
alterando a cor do texto 280–281 321 formas de quebra de texto 399–405 elemento tfoot propriedade de função de tempo de transição 518,
formatação. Consulte formatação de 166, 172, 176 520–522, 545 função translate3d() 536 função
marcação de texto. Consulte as citações de translate() 527–532 atributo global de tradução 101,
marcação de texto em 78–79, 92 754
considerações SVG 140 text-align-last Thain, Toby 655
property 294, 302 text-align property 289–290, elemento thead 166, 172, 176 quebras
294, 302 textarea element 184, 187–188, 211, 548 temáticas (regra horizontal) 62, 74
text-decoration property 290– 291, 302, 317, 320–321 O Projeto Substantivo 644
Editor de edição de texto (macOS) 50, 52 editores de Codec de vídeo Theora 220
texto 15, 50–52, 719 serviços de teste de terceiros 514

Transformações 3-D 534–536º
elemento (cabeçalho da tabela) 165–167
Índice 787
Índice
função translateX() 529–530 função sublinha 290–291 sublinhado :seletor válido 758
translateY() 529–530 função translateZ() (_) 54, 569, 601 propriedade unicode- elemento de botão de
536 transparência alfa 651, 676, 678–679, bidi 294, 302 atributo de valor 209
694 binário 676–678 Unicode (Conjunto Universal de Caracteres) elemento de dados 95 tipos
57–58, 97, 108 de elemento de entrada 185, 188, 195, 199, 212–
Identificadores uniformes de recursos (URIs) 25 213 elemento li 112 elemento de medidor 210
Modelo de cor HSLa 311 Localizadores uniformes de recursos. Ver URLs Uniform elemento de opção 210 elemento de parâmetro
formatos de imagem 647, 650–651, 653, 678– Resource Names (URNs) 25 unidades de medida 235 elemento de progresso 211 valores unidades
680, 710 gradientes lineares e 341 absolutas 253–254, 269 para atributos 64
cerca de 253
Modelo de cores RGBa 309 unidades absolutas 253–254, 269, 272
texto embrulhado e 400 unidades relativas 253–256, 269–272, 288
atravessando o DOM 623 Conjunto de caracteres universais (Unicode)
Motor de renderização Trident 24 57–58 seletores universais 285, 316, 755
Solução de problemas da Boolean 602, 605 para

ferramenta Trimage 699 Ambiente Unix cores 303–311
Git conflitos 585 nomes de diretórios 25 Declarações CSS 242, 243 funções
elemento de imagem 68 nomes de cores estendidos 304 retornando 610–611 para propriedades
nomes de caminho relativos 116, 129 ferramentas de gerenciamento e transferência de 244 unidades relativas 253–256, 269–
problemas de página da web 67–68 arquivos 19 convenções de nome de caminho 120– 272, 288 variáveis para 574–575 fontes variáveis
elemento tr (linha da tabela) 165–166, 176 122 software de servidor e 22 produtos VM 15 listas 503 variáveis sobre 182
Especificação Truecolor 306, 646, 651 não ordenadas 74–77, 205, 433 Unsplash website
Formato TrueType (TTF) 264 valor 643 recurso de mídia de frequência de atualização 493
verdadeiro 602, elemento 605 tt 89 URIs (Uniform Resource Identifiers) 25 função url()
321, 351, 399–400, 714 url (localização) controle de 600–603, 606–607 relacionados ao JavaScript
Formato TTF (TrueType) 264 entrada 188, 213 URLs (Uniform Resource Locators) Variáveis de formulário de
Tuck, Michael 267 absoluto 24–25, 114–115, 135, 351 partes de 24–25, nomenclatura 576 menos suportadas 182–
interpolação 518 elemento 114 recomendações para copiar 114 relativo 114, 116– 183 como elementos de código de programa 93
de botão de atributo de 126, 135, 350 URIs versus 25 URNs (Uniform Resource Escopo 574–576 compatível com
tipo 209 elemento de Names) 25 use element (SVG) 705, 712 usemap Sass de 611–612 palavra-chave
incorporação 218, 234 elemento attribute, img element 162 user agents 23, 172. Veja var 611–612 imagens de largura
de entrada 184, 189–190, 210, 212–213 também browsers user agent style sheets 62, 249, variável (imagens responsivas) 150–152 palavra-chave
elemento de objeto 218, 234 elemento 554–555 User-Centered Design (UCD) 6 sistema de var 611–612 elemento var (variável) 89, 93
de imagem 155 elemento de origem 162, coordenadas do usuário 725 diretório do usuário ferramentas de ilustração vetorial 718–720 imagens
224, 235 569, 571 User Experience (UX) design 6–9 User vetoriais 132 , 140, 645, 657, 689-690
Interface (UI) design 6–9, 16–17 usuário (leitor) folhas
Serviço Typekit (Adobe) 265, atributo de estilo 249 espaço do usuário 725 u (sublinhado)
typemustmatch 280, elemento de objeto elemento 89–91, 112 UX (Experiência do Usuário) Prefixos do fornecedor da
235 design 6–9 biblioteca de velocidade 717 345–347, 382, 575
seletores de tipo 755 Verou, controle de
tipografia versão Lea 348 581–587
Suporte CSS3 277–280 em propriedade de alinhamento vertical 294, 302, 320–321,

layouts responsivos 499, 502–504 422, 520 vh (altura da janela de visualização)
Serviço tipoteca 265 unidade 253, 255–256,
elemento de vídeo 504

você
cerca de 219.223
UCD (Design Centrado no Usuário) 6 adicionar vídeo às páginas 222–224
Uggedal, Eivind 515 atributos listados 223.235 suporte ao

navegador 219
Design de interface do usuário (interface do usuário) 6–9, 16–17
Gerador de gradiente CSS final
V API do Media Player 224, 764
347–348 ul WebVTT e 227
validando
formulários 190 formatos de vídeo 220
(lista não ordenada) elemento 75, 112, 115 tipo de
Site do VideoSWS 224
dados indefinido 601–602 Documentos HTML 68–69, 763
788 Índice
Índice
atributo viewBox, elemento svg 708, 725–726 WAI (Iniciativa de Acessibilidade na Web) 42–43, conteúdo de design 314 compatível com
viewboxes 725–726 sistema de coordenadas 102 daltônicos para. Veja o conteúdo de páginas da Web
da viewport (SVG) 708, Walkway library 717 Walsh, criando 49–70 mídias incorporadas simples e 215–
David 229 Walton, Philip 447 232 requisitos de acessibilidade do governo
725 Warren, Samantha 9 WaSP
unidade de altura da janela de visualização (vh) 253, 255–256, (Web Standards Project) 760 43
504 diagramas em cascata 45–46 Waterhouse, Tom Visão geral do HTML 49
viewports 538 Formato WAV 221 wbr (word break) elemento identificando elementos de texto 59–62 links
sobre 40, 150, 487 89, 97, 112 WCAG (Web Content Diretrizes de para 115–127 organizando conteúdo para
ferramentas de exibição do Acessibilidade) 42, 137 w-descriptor 150–152 82–87 tempos de carregamento de página
navegador 498 tipografia fluida 504 Web Accessibility Initiative (WAI) 42–43 WebAIM 44 estruturando documentos HTML 55–59
conceitos básicos de posicionamento website 43, 137, 171 linguagens de aplicativos da problemas de resolução de problemas 67–68
405–409 imagens responsivas 685 web 12 navegadores da web. Veja validando documentos 68–69 visualizando fonte 29
seleção com base em 150 configuração navegadores Web Content Accessibility Guidelines apresentação visual 9–10 fontes da web para 264–
487–488 (WCAG) 42, 137 web design e desenvolvimento. 265
724–725 imagens de largura Consulte também Considerações de acessibilidade do
variável baseadas em SVG e 150–152 unidades Web Design responsivo 42–45 conceitos a serem
de largura da janela de visualização (vw) 151, 253, conhecidos 35–46 considerações sobre equipamentos Ferramenta WebPageTest 46
255–256, 504 14–15 como a web funciona 21–34 ferramentas modernas paleta da web 307
Função Visualizar Fonte 29 de desenvolvimento web 567– Formato WebP 132, 645, 654–657, 676 sites
Site Virtuosoft 347 propriedade construídos com dados e modelos 580 links
de visibilidade 520 caixa de dentro de 116–126 funções de criação de sites 4–14

elemento visível 357 deficiência diagramas de sites 7 nome do site em URLs 24–26
visual 42 :seletor visitado 316– desempenho do site 44–46
320, 756 design visual (gráfico) 9–10,

17–18
Visual Studio 16, 244
Biblioteca Vivus 717 590 API de soquetes da Web 765
vmax (viewport max) unidade 253, 256, 504 software de produção na web 10–12, 15–19 funções Projeto de Padrões da Web (WaSP) 760
Produto VMFusion VM 15 vmin de criação de sites 4–14 fontes da web cerca de 264– API de armazenamento da Web 765
(mínimo da porta de visualização) unidade 253, 256, 265 WebVTT (Web Video Text Tracks) para esteira 227
504 vocabulário 103
Codec de áudio Vorbis 220–221 Serviço Google Web Fonts 265, 268, Weebly website 4 peso
Codec de vídeo VP8 220 vw 364 das regras de estilo 249–
(largura da porta de visualização) unidade 151, considerações de tipografia 503 formulários 251 de fontes variáveis 503
253, 255–256, 504 da web. Consulte formulários servidores da
Web (HTTP) 22 Grupo de Trabalho de Weinschenk, Susan 9

Tecnologia de Aplicativos de Hipertexto da Web Weizenbaum, Nathan 573
C (WHATWG) 103.762 imagens da Web. Veja as Wennington, Jay 161
imagens Web Inspector 376 Mecanismo de Weyl, Estelle nas
W3C (World Wide Web Consortium)
renderização WebKit 24 prefixo do fornecedor do animações 537 no CSS
Desenvolvimento de API 219
Especificações CSS 258 webkit 346 Contêiner WebM 220–221 Web Open Font 258, 448 na unidade 255
DOM padrão 630 histórico Format 1 e 2 (WOFF/WOFF2) 264 páginas da Web
de 11, 22, 760–761 adicionando imagens 62–65, 131–162 adicionando em gradientes 343 em
JavaScript a 597–598 adicionando SVG para 144–145, especificidade 285 em
Especificação de contexto HTML5 Canvas 2D 232
714 adicionando vídeo a 222–224 anatomia de 27–33 transições 537
Esforços de internacionalização do mudando a aparência com folhas de estilo 66–67 WHATWG (Aplicativo de Hipertexto da Web
Grupo de Trabalho HTML5 762 97 Technology Working Group) 103, 762
whitespace 55, 243, 450, 599 white-space
Histórico SVG 705
padrões da web 38, 71, 83 propriedade sobre 294, 302 nowrap valor 100 pre
Especificação WebVTT 227 valor 79
Wachs, Maggie Costello 39

WAI-ARIA (Internet Rica Acessível
Aplicações) 43–44, 102, 105
Índice 789
Índice
widgets 205 Site Wix 4 WOFF/ histórico de serialização

atributo de largura WOFF2 (Web Open Font Format 1 e 2) 760–761 de requisitos de sintaxe
elemento de tela 229, 234 264 Wolf, Zach 556 propriedade de HTML5 763 706
elemento de incorporação 234 quebra de palavra 294, 302 Site Wordpress Método XMLHttpRequest 633 atributo
elemento iframe 216, 234 4 propriedade de espaçamento entre xmlns, elemento svg 707
elemento img 137, 162, 490 palavras 292, 302, 320– 321, 520 XSLT (linguagem de folha de estilo eXtensible
tipos de elemento de entrada 212– propriedade de quebra de palavra 302 diretório Transformações) 717-718
213 elemento de objeto 235 elemento de trabalho 570, 583 World Wide Web
svg 707, 724–726 elemento de vídeo Consortium. Veja atributo wrap W3C, elemento
223, 235 largura recurso de mídia textarea 186, 211 texto encapsulado 399–405
S
493 largura propriedade 356-357, 386, Wroblewski, Luke 37, 206, 501–502 Yahoo! Ferramenta YSlow
391-393, 46 Linguagem YAML 580
520
eixo y 536 ienes (¥) 108
Wikimedia Commons 643
Ferramenta YSlow (Yahoo!)
Wilde, Erik 764 46
objeto de janela, propriedades e métodos 612–613
X
Paletas de cores do ambiente Nomes de cores X11 304 Z
Windows 650 ferramenta eixo x 536
eixo z 414, 536
de linha de comando 568–571 Formato XCF 673 x-
Zéa, Ricardo 319
criando documentos HTML 51 descritor 147–149 Zeldman, Jeffrey 38, 259
organização de arquivos 116 XHTML (eXtensible HTML) sobre marceneiro de largura zero 107
considerações sobre fontes 267 706 histórico de 760–761 requisitos
não associador de largura zero
Ferramentas Git/GitHub 588
de marcação 56, 63, 761 elemento 107 espaço de largura zero 107
editores de imagem 672.719 de script e 597 propriedade de índice z sobre
consultas de mídia em 495 418, 478, 484, 521 ordem de
softwares de servidor e 22 de
XML (eXtensible Markup Language) sobre 706 empilhamento e 414–415, 469
desenvolvimento web e 14–15 Estúdios ZURB 507
paletas da web e 307 diagramas de Seção CDATA 597, 706, 715, 761
estrutura de arame 6–7 Suporte DOM 621
Índice 790

Learning Web Design

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Learning Web Design

Enviado por

Direitos autorais:

Formatos disponíveis

Machine Translated by Google

“Ao contrário de todos os outros livros que começam no começo, este

Jennifer Niederst Robbins

APRENDENDO DE DESIGN DA WEB

GUIA PARA INICIANTES DE HTML, CSS,

Jennifer Niederst Robbins

Pequim • Boston • Farnham • Sebastopol • Tóquio

Aprendendo Web Design, Quinta Edição

Copyright © 2018 O'Reilly Media, Inc. Todos os direitos reservados.

EDITORES: Meg Foley e Jeff Bleiel

EDITORA DE PRODUÇÃO: Kristen Brown

DESENHISTA DA CAPA: Edie Freedman

DESIGNER DE INTERIORES: Jennifer Robbins

Março de 2001: Primeira edição.

Junho de 2003: Segunda edição.

Junho de 2007: Terceira edição.

Agosto de 2012: Quarta edição.

Maio de 2018: Quinta edição.

PREFÁCIO .................................................. .................................................. .xi _

PREFÁCIO .................................................. .................................................. .... xiii

1. Introdução ao Web Design ............................................. 3 Por onde eu

É preciso uma vila ( Funções de criação de sites) ........................................ 4

Preparando-se para Web Design ............................................. ............... 14

Teste você mesmo .................................................. ................................... 20

2. Como a Web funciona ............................................. ............ 21

Servindo suas informações ............................................. ............ 22

Endereços de página da Web (URLs)......................................... ................ 24 A

Anatomia de uma Página da Web .............................. .................................. 27

Juntando tudo ............ .................................................. ....... 32

3. Alguns Grandes Conceitos que Você Precisa Saber ..............................

Respeitando os Padrões ......................................................... ............... 38

Aprimoramento Progressivo .............................. ......................... 38

Web Design Responsivo ............................................. ................... 40 Uma Web

para Todos (Acessibilidade) ................... .............................. 42 A Necessidadede

Velocidade (Desempenho do Site )......... ................................... 44

Parte II. HTML PARA ESTRUTURA

4. Criando uma página simples .................................................. ......... 49 Uma

Etapa 1: comece com o conteúdo .................................................. ...................

53 Etapa 2: Forneça a Estrutura do Documento HTML ................... ............. 55

Etapa 3: Identificar os elementos do texto .............................. ....................... 59

Etapa 4: Adicionar uma imagem ................ .................................................. ....

62 Etapa 5: Alterar a aparência com uma folha de estilo ................................... ..

66 Quando as páginas boas ficam ruins ........................................ .......... 67

Validando seus documentos .............................. ................................... 68

Revisão do Elemento: Configuração do Documento HTML .............................. 70

5. Marcando texto ............................................. ......... 71

Títulos ....................................... ............................................. 72 Intervalos

Mais elementos de conteúdo .............................................. ................... 78

Organizando o conteúdo da página ............................................. .......... 82 O

resumo de elementos embutidos ....................... ......................... 88 Elementos

Genéricos (div e span)......... ......................................... 98 Melhorando a

acessibilidade com ARIA . ......................................... 102 Escapes de

Caracteres. .................................................. ......................... 105 Juntando

tudo ........................ .......................................... 108

Revisão do elemento: Elementos do texto ............................................. ........ 112

6. Adicionando Links ............................................. ................... 113

Vinculando a páginas na Web .................................................. ............. 115

Vinculando em seu próprio site .............................. ....................... 116 Direcionando

uma nova janela do navegador ....................... .......................... 126

Ligações Telefónicas ................................................. .......................... 128

Revisão do elemento: Links.............................................. ................... 130

7. Adicionando Imagens .............................................. ................ 131 Primeiro, uma

palavra sobre formatos de imagem .............................. ......................... 132 O

Elemento img ......................... .................................................. ..... 134 Adicionando