SMASHING CSS

FERRAMENTAS

COMO QUALQUER outra coisa, o processo de construo de pginas Web (ou at mesmo de aplicativos) fica muito mais fcil com o uso de ferramentas. No caso da CSS, existem as ferramentas que nos ajudam a escrever CSS ao mesmo tempo em que existe o uso da CSS que nos ajuda na construo de ferramentas.

H, at mesmo, ferramentas que fazem os navegadores suportarem mais folhas de estilo do que sua base de cdigo nativa conseguiria. Voc um construtor, um arteso, um criador este captulo vai detalhar alguns itens que daro novo brilho sua caixa de ferramentas.

CAPTULO

PARTE I: FUNDAMENTOS

FIREBUG
O Firebug (veja a Figura 1-1) uma das duas ferramentas essenciais na caixa de ferramentas de qualquer criador Web. (Para ver a outra, avance at a seo Web Developer Toolbar.) uma extenso totalmente gratuita do navegador, tambm gratuito, Firefox. Mesmo se estiver usando outro navegador, continue lendo: voc tambm pode conhecer as aes do Firebug!

Figura 1-1: A home page do Firebug.

Para obter sua cpia, acesse getrebug.com no Firefox. Clique no boto Install (ele ficava no canto superior direito quando este texto foi escrito) e inicie a instalao. Reinicie o Firefox e prepare-se para se surpreender. No possvel abordar tudo o que o Firebug capaz de fazer apenas nessa dica; na verdade, um captulo inteiro no seria suficiente. Eis alguns destaques. A guia HTML (veja a Figura 1-2) exibe a estrutura do documento esquerda (com setas alternadas para a expanso ou retrao da subrvore do documento). Observe que, quando colocamos o cursor sobre o nome de um elemento na guia HTML, esse elemento realado na prpria pgina. Isso inclui a exibio da rea de contedo e do espaamento e margens do elemento por meio de regies indicadas com cores, o que simplesmente fantstico. Quando este texto foi escrito, a rea de contedo era azul-claro, o espaamento era roxo e a margem era amarelo-claro, mas as cores no so to importantes quanto o fato de podermos v-las na pgina.

CAPTULO 1: FERRAMENTAS

Figura 1-2: Visualizao de elemento do layout com o Firebug.

No lado direito da guia HTML,voc poder ver a CSS que est sendo aplicada ao elemento examinado clicando na guia Style (veja a Figura 1-13). Ser exibido no s o que voc, o autor, definiu, mas tambm o que o prprio navegador est aplicando a partir de seus estilos internos. Se voc encontrar estilos provenientes de html.css ou quirk.css, por exemplo, saiba que esses so estilos internos. (Eles so chamados de estilos AU, termo derivado de estilos do agente do usurio. Voc pode definir se eles sero ou no exibidos em um menu popup na guia Style.) preciso ressaltar que, s vezes, o Firebug exibe propriedades que no especificamos, como moz-background-clip. No precisa dar muita importncia a elas, exceto se tiver certeza de que as declarou explicitamente. Alm disso, se voc usar uma propriedade shorthand, ela ser expandida nas propriedades individuais. Ou seja, algo assim:
font: 1em "Andale Mono", "Courier New", Courier, monospace;

...ser representado no Firebug desta forma:

font-family: "Andale Mono","Courier New",Courier, monospace; font-size: 1em; font-size-adjust: none; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;

PARTE I: FUNDAMENTOS

Figura 1-3: O Firebug exibido em uma janela separada com a guia Style ativa.

Embora essa representao no seja necessariamente ruim ela de fato nos avisa que, muitas vezes, o uso de uma propriedade shorthand diz muito mais do que dizemos na prtica , inicialmente pode ser confusa. (Para saber mais sobre propriedades shorthand, consulte o Captulo 2.) Tambm preciso destacar que as regras exibidas na guia Style so listadas em ordem inversa de especificidade; isto , a primeira a regra mais especfica aplicada ao elemento examinado, a segunda a prxima mais especfica, e assim por diante. (Para saber mais sobre especificidade, consulte Especificidade no Captulo 2.) Voc pode examinar qualquer elemento clicando nele com o boto direito do mouse e selecionando Inspect Element no menu contextual que abre (veja a Figura 1-4). Tambm pode clicar no pequeno cone de cursor e caixa prximo ao cone do Firebug para passar ao modo de inspeo. medida que voc se mover pela pgina, os elementos sero realados; ao clicar em um deles, ele ser inspecionado. Voc pode clicar esquerda de qualquer declarao para desativ-la pelo Firebug. Isso pode ser til quando voc quiser ver como as propriedades interagem testando os efeitos de desativ-las uma a uma. Conforme mostrado na Figura 1-5, voc tambm pode ver uma pequena caixa, com uma declarao de cor especfica, colocando o ponteiro do mouse sobre o valor.

CAPTULO 1: FERRAMENTAS

Figura 1-4: Opo Inspect Element do menu contextual.

Figura 1-5: Estilos desativados e caixa de cor exibida pelo cursor.

PARTE I: FUNDAMENTOS
Tambm possvel fazer a guia Style do Firebug exibir os valores definidos para o estilodo elemento (Figura 1-6), ou seja, a guia exibir os valores que o navegador aplicou a cada propriedade CSS conhecida por ele, independente de algum ter ou no fornecido informaes. Lembre-se de que todas as propriedades CSS tm valores padro; aqui, voc pode ver todos. Essa visualizao pode ser til quando voc quiser saber, por exemplo, exatamente quantos pixels de line-height o navegador est aplicando a um cabealho.

Figura 1-6: Valores denidos para o estilo.

possvel examinar tambm as dimenses e os tamanhos exatos dos componentes de modelo de caixa de um elemento, como altura, largura, espaamento, margens, etc. (veja a Figura 1-7), que so exibidos em pixels. O mais interessante que quando voc posiciona o mouse sobre a caixa exibida nesse painel, rguas em pixels aparecem na prpria pgina, ao longo das margens superior e esquerda da borda externa do elemento. E h muito mais: como mostrado na Figura 1-8, voc pode editar valores de atributos de elementos (como class) ou o prprio contedo do elemento, adicionar ou editar propriedades e valores CSS, etc. Voc pode clicar com o boto esquerdo ou direito do mouse em quase tudo na interface do Firebug para explor-la e ver o que possvel fazer.

10

CAPTULO 1: FERRAMENTAS

Figura 1-7: A guia Layout.

Figura 1-8: Editando a CSS dinamicamente na guia Style.

11

PARTE I: FUNDAMENTOS
Uma advertncia: quando estiver inspecionando a CSS de um elemento na guia Style, voc no ver regras orientadas a pseudoelementos que afetem esse elemento. Como exemplo, se tiver uma regra que use o seletor p:rst-letter, ela no aparecer na inspeo a um elemento p. As pseucoclasses aparecero, mas os pseudoelementos no. Isso pode ser particularmente desafiador se voc estiver usando uma soluo de clearfix que envolva contedo gerado (consulte Clearfix, no Captulo 4, para saber mais). Se no estiver usando o Firefox no desenvolvimento, mas quiser empregar os benefcios bsicos do Firebug, acesse getrebug.com/lite.html (mostrado na Figura 1-9) e siga as instrues para ativ-lo no Internet Explorer, Opera ou Safari. Voc pode vincul-lo pgina que estiver testando ou adicion-lo sua barra de marcadores como um bookmarklet (opo que recomendo).

Figura 1-9: O Firebug Lite executado no Internet Explorer.

Essa verso do Firebug no to completa quanto a extenso do Firefox por isso o nome Lite , mas mesmo assim muito poderosa e til.

12

CAPTULO 1: FERRAMENTAS

WEB DEVELOPER TOOLBAR

Alm do Firebug, o Web Developer Toolbar (WDT) outra ferramenta essencial da caixa de ferramentas de qualquer criador Web. uma extenso totalmente gratuita do tambm gratuito Firefox. Para obter sua cpia, acesse chrispederick.com/work/web-developer e instale-a. Outra opo acessar addons.mozilla.org, procurar Web Developer Toolbar e instal-lo a partir da pgina do WDT existente (veja a Figura 1-10).

Figura 1-10: A pgina do Web Developer Toolbar em addons.mozilla.org.

Como no caso do Firebug, no possvel abordar tudo que o WDT pode fazer; na verdade, um captulo inteiro no seria suficiente. Aqui mostrarei alguns destaques de menus selecionados, mas claro que voc deve reservar algum tempo para explorar todos os menus e opes disponveis aps instalar o WDT. possvel desativar o cache da pgina, o que ser til caso voc esteja fazendo muitas pequenas atualizaes e o cache do navegador insistir em no atualizar. Tambm possvel desativar o JavaScript (veja a Figura 1-11) para vermos o que acontece a uma pgina quando todos os recursos que possuem script falham ou a estrutura JavaScript no carregada.

13

PARTE I: FUNDAMENTOS

Figura 1-11: O menu Disable.

O Firebug aborda vrios pontos do menu CSS, mas um particularmente muito interessante o recurso de desativar apenas os estilos embutidos, os estilos vinculados (como mostrado na Figura 1-12) ou os estilos inline. (No que voc deva usar estilos inline!) Voc pode at mesmo cancelar a maioria dos estilos internos do navegadores, se quiser ver um cenrio realmente estranho. O menu Information (Figura 1-13) contm vrias opes interessantes, como a exibio das informaes de classe e ID do documento, um registro com a ordem dos elementos div da pgina, um resumo das cores usadas e muito mais. Voc tambm pode chamar um modo de informaes dos elementos que permitir clicar em qualquer elemento para visualizar um resumo de seus atributos e valores, sua posio na pgina, informaes de fonte, seus elementos ancestrais e descendentes e assim por diante. O menu Information muito parecido com o XRAY nas informaes que fornece; veremos mais sobre o XRAY mais adiante neste captulo.

14

CAPTULO 1: FERRAMENTAS

Figura 1-12: Desativando folhas de estilo vinculadas via menu CSS.

Figura 1-13: Exibindo valores de classe e ID via menu Information.

15

PARTE I: FUNDAMENTOS
Com o menu Outline, mostrado na Figura 1-14, voc pode contornar classes de elementos todos os blocos, estilos inline, vnculos, elementos posicionados, todas as clulas de tabelas, etc. como tambm definir seu prprio conjunto personalizado de elementos e cores e selecionar se os nomes dos elementos sero exibidos na pgina enquanto eles estiverem realados. Trata-se de um menu muito mais poderoso do que parece primeira vista. Considero-o como o menu de diagnstico de layout, porque posso contornar rapidamente conjuntos de elementos para ver como esto dispostos uns em relao aos outros e onde algo pode ter dado errado.

Figura 1-14: Contornando e identicando elementos de bloco via menu Outline.

O menu Tools d acesso rpido a diversos validadores, verificadores de erro e consoles de depurao. Um de seus melhores recursos, no entanto, so os itens Validate Local HTML e Validate Local CSS (veja a Figura 1-15). Nos dois casos, a pgina que voc est visualizando empacotada em uma string serializada e enviada para o validador apropriado. Logo, se voc selecionar Validate Local HTML, a marcao da pgina ser enviada para o validador HTML e um relatrio ser retornado. Esse recurso timo para a validao de pginas originadas do outro lado de um firewall ou na unidade de disco rgido de sua mquina isto , pginas que no esto na Web pblica e, portanto, no podem ser alcanadas pelo servio validador. Com a validao local, isso no mais problema.

16

CAPTULO 1: FERRAMENTAS

Figura 1-15: O menu Tools.

Como dito anteriormente, isso s uma mostra do que o WDT pode fazer, portanto, reserve algum tempo para pesquisar mais e encontrar as ferramentas que facilitaro sua vida.

INTERNET EXPLORER DEVELOPER TOOLBAR (OU TOOLS)

Se estiver usando o Internet Explorer (IE) 7 em seu desenvolvimento primrio na Web, no poder instalar o Web Developer Toolbar (consulte a seo anterior). Em vez disso, instale o Internet Explorer Developer Toolbar (IEDT). A URL do IEDT uma daquelas URLs clssicas indecifrveis da Microsoft, assim, acesse seu mecanismo de busca favorito (use o Google por ironia) e digite Internet Explorer Developer Toolbar. Ele deve aparecer no primeiro resultado. V em frente e instale-o se estiver usando o IE7. O IEDT no funciona no IE8; veremos em breve o que o IE8 oferece. Quando terminar a instalao, acesse o menu Tools no canto superior direito do navegador, perto do menu Pages (veja a Figura 1-16), e no o menu Tools mais acima esquerda, entre Favorites e Help. Nesse menu, selecione Toolbars, Explorer Bar e, ento, (finalmente!) IE Developer Toolbar.

17

PARTE I: FUNDAMENTOS

Figura 1-16: Encontrando o IE Developer Toolbar no IE7.

Quando voc alcanar o IE Developer Toolbar, ver um painel semelhante ao do Firebug aberto na parte inferior da janela do navegador, como mostrado na Figura 1-17. Tambm haver alguns menus como os do Web Developer Toolbar no topo do painel. Voc pode gerar tudo isso em sua prpria janela clicando no pequeno cone de duas janelas no canto superior direito do painel, prximo ao boto Close. Expandir o painel dessa forma pode ser particularmente til em configuraes de baixa resoluo, como nas telas de netbooks e retroprojetores.

18

CAPTULO 1: FERRAMENTAS

Figura 1-17: O IE Developer Toolbar em ao.

Um recurso interessante do Toolbar poder alternar facilmente entre a exibio de estilos calculados e estilos declarados usando a caixa de seleo Show Default StyleValues (Figura 1-18). Da mesma forma, voc pode usar Show Read-Only Properties para exibir as ltimas definies de propriedades DOM (Document Object Model) de um elemento inspecionado. Se no se sentir confortvel com scripts JavaScript e DOM, talvez isso no seja para voc. (Definitivamente,no para mim.)

19

PARTE I: FUNDAMENTOS

Figura 1-18: O IE Developer Toolbar com Show Default Styles desativada.

O IE Developer Toolbar inclui um subconjunto de recursos do Web Developer Toolbar, mas a maioria dos que so realmente teis, como contornar elementos e validar HTML e CSS local, aparece na primeira camada. A tela tambm tem uma entrada interessante chamada de ocorrncia de seletores CSS (veja a Figura 1-19). Ela exibe uma janela com todas as regras CSS e o nmero de vezes que elas so aplicadas a elementos do documento. Regras que exibam 0 match(es) for: no esto sendo aplicadas na pgina, e voc deve considerar a remoo delas.

20

CAPTULO 1: FERRAMENTAS

Figura 1-19: O relatrio de ocorrncia de seletores.

O IE8 inclui ferramentas de desenvolvedor internas, portanto, voc no precisa instalar extras. A documentao exibida online e, quando este texto foi escrito, ficava em uma URL um pouco menos indecifrvel do que a do Toolbar. Assim, digite apenas Discovering Internet Explorer Developer Tools em seu mecanismo de busca e voc deve chegar onde deseja usando o primeiro resultado. Para acionar o Tools, selecione Developer Tools no menu Tools do IE (Figura 1-20) ou pressione F12 em seu teclado. Sim, s isso. Voc ver algo muito semelhante ao IE Developer Toolbar, ou seja, um hbrido do Firebug e do Web Developer Toolbar. Os menus so quase todos iguais aos do IE7 Toolbar, mas as guias vistas embaixo se parecem mais com as do Firebug do que com as do IE7 Toolbar.

21

PARTE I: FUNDAMENTOS

Figura 1-20: O Developer Tools no IE8.

Uma coisa que, pessoalmente, acho confusa na guia Style do Developer Tool que os estilos que ela lista aparecem em uma ordem na qual no vejo sentido. Certamente, no por ordem de especificidade. A listagem de fato exibe as declaraes que esto sendo sobrepostas por outras, o que interessantes, mas sem uma ordem perceptvel como a do Firebug, fica difcil manipular. Mesmo o Toolbar e o Tools no fornecendo todo o conjunto de recursos encontrado no Firebug/Web Developer Toolbar, eles so muito teis e devem fazer parte da instalao do Internet Explorer de qualquer desenvolvedor Web. Podem ser bastante teis no rastreamento da fonte de layouts e outras excentricidades no Explorer.

DRAGONFLY (PARA OPERA)

Se seu principal navegador de desenvolvimento for o Opera, voc vai querer usar o Dragonfly (Figura 1-21), um ambiente de desenvolvimento que vem com o Opera 9.5 e posteriores. Acesse opera.com/dragony para obter mais informaes.

22

CAPTULO 1: FERRAMENTAS

Figura 1-21: A pgina do Dragony.

Para acessar o Dragonfly, o caminho padro abrir o menu Tools e, em seguida, em Advanced, selecionar Developer Tools. No entanto, voc pode instalar um menu Debug acessando opera.com/dragony e encontrando o link de instalao. Aps t-lo instalado, poder acessar facilmente o Dragonfly e vrios recursos desse menu. De uma maneira ou de outra, tambm podemos pressionar Option+Command+I (para usurios do Mac) ou Alt+Control+I (para Windows) para acess-lo. Uma singularidade que esse atalho de teclado no funciona na desativao: se o Dragonfly j estiver aberto, voc no poder usar o teclado para fech-lo. Ter que usar o mouse ou Command+W (Control+W). Isso funciona muito bem quando o Dragonfly est aberto em uma janela separada. No entanto, se ele estiver encaixado na janela do navegador, Command+W s fechar o Dragonfly se ele receber o foco de um clique em algum componente seu. Caso contrrio, a janela inteira ser fechada. Um timo recurso do menu Debug o fato de ele ter links que conduzem diretamente a HTML, CSS e outras especificaes. Outra rea divertida o submenu Layouts, que nos permite colocar o Opera em modos de layout como EmulateText Browser e Show Structural Elements. H at mesmo um modo de layout Nostalgia (Figura 1-22) que emocionar qualquer veterano da computao dos anos 80.

23

PARTE I: FUNDAMENTOS

Figura 1-22: A pgina do Dragony no modo Nostalgia.

Embora o layout do Dragonfly lembre bastante o do Firebug, h algumas diferenas dignas de nota. Em primeiro lugar, a guia Styles da direita pode exibir os estilos calculados junto aos estilos declarados (veja a Figura 1-23) e cada agrupamento pode ser expandido ou recolhido. Como no Firebug, o que vemos aqui no exatamente o que foi declarado com as propriedades shorthand sendo expandidas em propriedades individuais. Um detalhe interessante que o Dragonfly exibir as propriedades shorthand se voc quiser v-las pelo menos nos estilos calculados. Outra diferena item menos bem-vinda no encontrada no Firebug qualquer declarao que sobreposta por outra marcada em cinza, com [overwritten] surgindo em texto laranja-amarelado prximo a ela (Figura 1-24). Isso tumultua as coisas e dificulta ver os valores das declaraes sobrepostas.

24

CAPTULO 1: FERRAMENTAS

Figura 1-23: Dragony com o agrupamento Computed Style expandido.

Figura 1-24: Estilos sobrepostos na guia Styles.

25

PARTE I: FUNDAMENTOS
A Figura 1-25 mostra a guia Layout, que exibe a caixa de layout do elemento que est sendo inspecionado. Alm de exibir as dimenses da caixa de layout, ela tambm informa os valores em pixels de vrias propriedades como offsetTop e scrollLeft.

Figura 1-25: A guia Layout do Dragony.

WEB INSPECTOR (SAFARI)

Se seu navegador de desenvolvimento for o Safari, voc vai querer usar o Web Inspector. Para ativar o Web Inspector, acesse Preferences no Safari, selecione Advanced e marque a caixa prxima ao menu Show Develop na barra do menu principal (Figura 1-26). Depois disso, voc poder chamar o Web Inspector selecionando Show Web Inspector no menu Develop ou, ento, pressionando Option+Command+I. Como no Dragonfly, o atalho de teclado no funciona na desativao: se o Web Inspector j estiver aberto, voc no poder usar o teclado para fech-lo, ter que usar o mouse. O Command+W no funcionar exceto se o Web Inspector estiver em sua prpria janela; tente usar esse atalho quando ele estiver encaixado na janela principal e voc acabar fechando a janela inteira.

26

CAPTULO 1: FERRAMENTAS

Figura 1-26: Ativando o menu Develop.

Embora o layout do Web Inspector lembre muito o do Firebug, h algumas diferenas. Por exemplo, o painel da direita exibe os estilos calculados como um agrupamento (veja a Figura 1-27). Como no Firebug, o que vemos aqui no exatamente o que foi declarado, e as propriedades shorthand so expandidas em propriedades individuais ao mesmo tempo que so exibidas. Se voc marcar a caixa Show Inherited, ver uma lista bem longa. Logo abaixo, cada regra aplicada ao elemento inspecionado exibida em seu prprio agrupamento, que voc pode expandir ou recolher individualmente. Abaixo deles fica o subpainel Metrics, que exibe as dimenses da caixa de layout do elemento que est sendo inspecionado (veja a Figura 1-28).

27

PARTE I: FUNDAMENTOS

Figura 1-27: Os estilos calculados.

Figura 1-28: Os agrupamentos comuns de estilos e layout.

28

CAPTULO 1: FERRAMENTAS

XRAY
Se voc estiver procurando um inspetor de elementos leve para vrios navegadores, o XRAY, mostrado na Figura 1-29, exatamente o que procura. Ele tem um escopo muito limitado, mas, na verdade, sua abrangncia um ponto forte quando o que queremos exatamente um escopo limitado.

Figura 1-29: A pgina do XRAY.

Acesse westciv.com/xray e arraste a grande caixa XRAY para sua barra de ferramentas de marcadores (ou o menu, se quiser ocult-lo). Agora, sempre que voc estiver em uma pgina e quiser inspecionar um elemento, chame o XRAY e selecione o elemento que lhe interessa. Quando voc selecionar um elemento, ele ser realado e exibir informaes de dimenso laterais, e a caixa XRAY, mostrado na Figura 1-30, fornecer algumas informaes adicionais referentes ao seu local na rvore do documento, aos valores de ID ou classe e a um conjunto bsico de valores de propriedades CSS. Se voc selecionar algum dos elementos na hierarquia de herana, o XRAY passar a inspecionar esse elemento. Para ocultar o XRAY at a prxima vez que precisar us-lo, clique no cone de fechar no canto superior direito da caixa.

29

PARTE I: FUNDAMENTOS

Figura 1-30: O XRAY em ao.

Uma ferramenta semelhante com finalidade diferente o MRI (westciv.com/mri), que nos permite inserir um seletor e visualizar quais elementos da pgina ele selecionar.

SELECTORACLE
O nome SelectORacle (veja a Figura 1-31) parece propaganda de produto de banco de dados, mas no ; trata-se de uma ferramenta online que traduz seletores vlidos para algo parecido com o ingls comum. (O nome vem da mistura de Selector e Oracle.) Acesse gallery.theopalgroup.com/selectoracle e insira um ou mais seletores vlidos, independentemente da complexidade. Use o ingls, ou passe para o espanhol, e clique no boto ExplainThis!. Voc ver uma explicao de cada seletor que inseriu. Por exemplo:
ul li:nth-child(2n+3):not(:last-child)

retornar a explicao: Selecione qualquer elemento li que seja filho mpar, comeando no terceiro filho, e que no seja o ltimo filho descendente de um elemento ul.

30

CAPTULO 1: FERRAMENTAS

Figura 1-31: A pgina do SelectORacle.

Isso pode parecer um pouco confuso primeira vista, mas se voc ler lentamente ficar (em grande parte) claro. Alm disso, quando este texto foi escrito, nenhum navegador dava suporte a tudo que existe nesse seletor, portanto, no se preocupe tanto com ele. Apenas lembre-se de que, se voc encontrar um seletor cuja finalidade no esteja clara, talvez o SelectORacle possa ajudar. Voc j desejou que seu navegador o alertasse quando carregasse uma pgina com elementos obsoletos e incmodos, como font? Agora ele pode faz-lo pelo menos visualmente com a folha de estilo de diagnstico.

FOLHA DE ESTILO DE DIAGNSTICO

Com uma folha de estilo de diagnstico, voc pode ter uma pista visual rpida de onde ocorreram erros na marcao da pgina. Um exemplo de folha de estilo de diagnstico pode ser encontrado em meyerweb.com/eric/tools/css/diagnostic (em verses amigveis tanto CSS3 quanto ao IE7) e um recurso semelhante em accessites.org/ site/2006/07/big-red-angry-text. Bem, e da? Como exemplo, uma linha da folha de estilo de diagnstico do site meyerweb apresenta:
*[style], font, center {outline: 5px solid red;}

31

PARTE I: FUNDAMENTOS
Ela insere uma linha vermelha slida e grossa ao redor de qualquer elemento que tiver um atributo style, um elemento font e um elemento center. Poderamos piorar ainda mais a situao com algo como background:color: lime para explicar claramente a questo. A ideia detectar locais em que uma marcao inadequada tenha surgido, seja por entradas via CMS ou por algum outro meio. Voc pode achar que a validao detecta qualquer problema na marcao, mas nem sempre isso ocorre. Ela avisa se voc estiver usando font, mas h outros problemas que podemos encontrar e que um validador no detecta. Considere o exemplo comum de um link JavaScript:
<a href="#" onclick="javascript:nextPage();">Next</a>

Essa linha inteira parecer correta para um validador, porque a marcao est certa. O problema que, para quem no tiver JavaScript, o link no funcionar. Deveria haver algum tipo de fallback no JavaScript, e ele deveria ser manipulado com um valor href. Portanto, outra linha dos estilos de diagnstico do site meyerweb apresenta:
a[href="#"] {background: lime;}

Ela detectar qualquer link que no tenha um valor de fallback no JS para seu atributo href. (Funciona com o uso de um seletor de atributo; para saber mais, consulte Seleo de atributo simples no Captulo 2.) Como usar a CSS de diagnstico? Importando-a para a CSS de seu site em desenvolvimento e removendo-a antes de entrar no ar ou definido-a como uma folha de estilo de usurio em seu navegador para poder aplic-la a qualquer pgina que visitar. A seguir, temos uma folha de estilo de diagnstico completa que pode encontrar elementos que no tm contedo, chamar imagens sem atributos alt ou title, ou com esses atributos vazios, e encontrar tabelas sem atributos summary, cabealhos de tabelas com valores scope invlidos e links com atributos title e href quebrados ou vazios. bom ressaltar que essa verso no funcionar no IE7 por causa dos seletores de atributo. Como tambm no funcionar no IE8 por causa das pseudoclasses :not() e :empty(). A Figura 1-32 mostra uma pgina de teste dessa CSS de diagnstico.
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty {padding: 0.5em; background: yellow;} *[style], font, center {outline: 5px solid red;} *[class=""], *[id=""] {outline: 5px dotted red;} img[alt=""] {border: 3px dotted red;} img:not([alt]) {border: 5px solid red;} img[title=""] {outline: 3px dotted fuchsia;} img:not([title]) {outline: 5px solid fuchsia;} table:not([summary]) {outline: 5px solid red;} table[summary=""] {outline: 3px dotted red;} th {border: 2px solid red;} th[scope="col"], th[scope="row"] {border: none;} a[href]:not([title]) {border: 5px solid red;} a[title=""] {outline: 3px dotted red;} a[href="#"] {background: lime;} a[href=""] {background: fuchsia;}

32

CAPTULO 1: FERRAMENTAS

Figura 1-32: Uma pgina de teste para a CSS de diagnstico.

ESTILOS DE REBOOT
O que voc pode no ter notado sobre as CSS que elas so sempre aplicadas aos documentos, at mesmo quando criamos um documento HTML e no escrevemos uma linha sequer de CSS para ele. Na verdade, h vrias CSS sendo aplicadas a um documento no estilizado (como o da Figura 1-33), todas provenientes do prprio navegador. O tamanho e o peso da fonte padro dos ttulos, a separao entre elementos e linhas do texto, os marcadores prximos aos itens da lista e at mesmo a distino entre bloco e caixas inline, so controlados por um conjunto de estilos padro. Obviamente, os estilos padro variam um pouco entre os navegadores. Isso no necessariamente uma falha dos navegadores, porque no h uma especificao que diga com preciso como os documentos devem ser estilizados por padro. Portanto, a maioria dos navegadores faz o melhor que pode para simular o que o Mosaic fazia com os documentos. Sim, o Mosaic porque foi ele que o Netscape 1.0 tentou simular, que, por sua vez, o IE3 simulou, e assim por diante. Se voc examinar os estilos padro em detalhes, encontrar itens que foram replicados minuciosamente das primeiras verses beta do Mosaic, at mesmo no nvel dos pixels. Em resposta, vrias pessoas desenvolveram estilos de reset (veja a Figura 1-34), que tinham a finalidade de reduzir ao mximo as inconsistncias, definindo explicitamente propriedades comuns. O mais simples deles :
* {margin: 0; padding: 0;}

33

PARTE I: FUNDAMENTOS

Figura 1-33: Um documento no estilizado (mas, na verdade, com muito estilo).

Figura 1-34: Documento com uma CSS de reset bsica aplicada.

34

CAPTULO 1: FERRAMENTAS
Muitas pessoas o usam, em grande parte porque simples. O problema que ele gera para as outras pessoas que ele se aplica a todos os elementos do documento, inclusive elementos de formulrio como entradas de texto e caixas de seleo. J que, atualmente, os navegadores manipulam as CSS de elementos de formulrio de muitas maneiras diferentes (e alguns simplesmente no as aplicam), a abordagem aplicvel a todos os elementos significa que os formulrios acabam ficando inconsistentes por tentarmos deixar os navegadores mais uniformes com a reinicializao. Assim, CSS resets mais complicados foram desenvolvidos. Um CSS reset bem popular est disponvel em meyerweb.com/Eric/tools/css/reset. Ele comea assim:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, eldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; } body { line-height: 1; }

Nossa! So muitos elementos. Fizemos dessa forma para selecionar todos os elementos que no so entradas de formulrio (input, select, textarea) e faz-los agir de maneiras semelhantes. A primeira regra define explicitamente margem, espaamento e contorno zero e impe aos elementos o mesmo tamanho de fonte e alinhamento vertical de texto. A segunda regra define o elemento body com uma altura de linha reduzida, e esse valor herdado por todos os elementos que descendem do elemento body. H mais regras no reset apresentado pelo site meyerweb, inclusive algumas que removem marcadores de lista e as aspas autogeradas que enfeitam os elementos blockquote e q, entre outras. A finalidade tornar todos os navegadores consistentes ao mximo antes de comearmos a escrever a CSS que dar pgina uma boa aparncia. A essa altura voc deve estar pensando: Espere um pouco, isso significa que tenho que desfazer tudo que fiz! Nunca quis que a pgina tivesse line-height igual a um muito apertado! E tambm nunca quis mexer com o alinhamento vertical de sobrescritos e subscritos! Todas so preocupaes vlidas. O que voc deve fazer modificar a folha de estilo para que atenda suas preferncias. Digamos que voc sempre comece com line-height igual a 1.4, para dar uma aparncia bonita e leve ao seu texto. Apenas modifique essa linha do reset:
body { line-height: 1.4; }

35

PARTE I: FUNDAMENTOS
Enquanto isso, pode adicionar tambm seu padro para o background da pgina e as cores de texto alm de sua fonte favorita:
body { font: smaller/1.4 Helvetica, sans-serif; background: #ABACAB; color: #444; }

Voc pode remover a regra que elimina marcadores de lista se souber que no vai querer alter-los. (O que no se aplica a mim, mas, somos todos diferentes). Adicione regras que definam exatamente como e a que distncia as listas sero recuadas, a separao entre pargrafos e itens de lista, a maneira como prefere estilizar strong, e assim por diante. Agora, o que voc tem no uma folha de estilo de reset e, sim, uma folha de estilo de reboot. Voc est fazendo o reboot do navegador com sua linha bsica preferida para a estilizao de um documento, estabelecendo um ponto de partida personalizado para construir qualquer projeto. Poder sair na frente em cada novo projeto usando esse rebooter como a base a partir da qual todas as folhas de estilo finais derivam. Alm de poder fazer o reboot de navegadores com CSS, voc tambm pode atualizar alguns deles com JavaScript. srio!

IE9.JS
Com o IE9.js de Dean Edward, voc pode fazer as verses IE5 a IE8 agirem muito mais como o IE9 no que se refere manipulao de CSS e HTML. Acesse-o em code.google.com/p/ ie7-js sim, a parte ie7 est correta (consulte a Figura 1-35). (Ela aparece porque esse projeto comeou como IE7.js e quando o IE8 e o IE9 surgiram, novas verses foram necessrias.) O IE9.js um conjunto de rotinas JavaScript que, se o navegador for uma verso do Internet Explorer anterior ao IE9, percorre a CSS e o HTML de uma pgina e descobre que partes no so suportadas pela verso do IE que est sendo usada na visualizao da pgina. Ele ento usa vrios artifcios arrojados no back-end para fazer esse suporte ocorrer transparentemente. Como exemplo, o IE5 e o IE6 no do suporte aos seletores de atributo. Portanto, se voc tiver uma regra como esta:
a[href] {text-decoration: none; color: red;}

36

CAPTULO 1: FERRAMENTAS

Figura 1-35: A pgina do IE7.js.

... o IE5 e o IE6 a ignoraro completamente, e seus links permanecero intocados. (Embora isso possa deixar Jakob Neilsen feliz, o designer do projeto ficar consideravelmente menos impressionado.) Com o IE9.js, no entanto, a manipulao arrojada do script organizar o cenrio para que o IE5 e o IE6 possam aplicar esses estilos aos links, e eles vo simplesmente funcionar. S necessrio um link para o IE9.js a partir de qualquer pgina que precise dele e voc ter a soluo. claro que nada disso ter efeito se o JavaScript estiver desativado, ou seja, voc tem que ponderar os benefcios desse script em relao ao que esperado do pblico de seu site. Muitos deles usam o IE6? provvel que estejam com o JavaScript desativado? E assim por diante. Obviamente, essas so as mesmas coisas que temos que ponderar no design de qualquer site, portanto, um processo conhecido. A recomendao usual a insero do elemento script que acessa o arquivo JavaScript em um comentrio condicional, como em:
<!--[if lt IE 9]> <script src="/code/IE9.js" type="text/javascript"></script> <![endif]-->

37

PARTE I: FUNDAMENTOS
O prprio script garantir sua execuo somente quando necessrio, logo, voc pode saltar os comentrios condicionais. Isso, no entanto, significa que todos os visitantes acabaro baixando o script com os navegadores, executando-o ou no. Com os comentrios condicionais, voc garantir que s os navegadores que tiverem probabilidades de executar o script o carreguem. Como j mencionado, h verses anteriores do script projetadas para trazer verses antigas do IE ao nvel do IE7 ou IE8. Se achar que o IE9.js no atende s suas necessidades, tente uma das verses anteriores.

38