Html5

SMASHING CSS

1

FERRAMENTAS

COMO QUALQUER outra coisa, o processo de construção de páginas Web (ou até mesmo de aplicativos) fica muito mais fácil 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 construção de ferramentas.

Há, até mesmo, ferramentas que fazem os navegadores suportarem mais folhas de estilo do que sua base de código nativa conseguiria. Você é um construtor, um artesão, um criador – este capítulo vai detalhar alguns itens que darão novo brilho à sua caixa de ferramentas.

CAPÍTULO

1

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 seção “Web Developer Toolbar”.) É uma extensão totalmente gratuita do navegador, também gratuito, Firefox. Mesmo se estiver usando outro navegador, continue lendo: você também pode conhecer as ações do Firebug!

Figura 1-1: A home page do Firebug.

Para obter sua cópia, acesse getfirebug.com no Firefox. Clique no botão Install (ele ficava no canto superior direito quando este texto foi escrito) e inicie a instalação. Reinicie o Firefox e prepare-se para se surpreender. Não é possível abordar tudo o que o Firebug é capaz de fazer apenas nessa dica; na verdade, um capítulo inteiro não seria suficiente. Eis alguns destaques. A guia HTML (veja a Figura 1-2) exibe a estrutura do documento à esquerda (com setas alternadas para a expansão ou retração da subárvore do documento). Observe que, quando colocamos o cursor sobre o nome de um elemento na guia HTML, esse elemento é realçado na própria página. Isso inclui a exibição da área de conteúdo e do espaçamento e margens do elemento por meio de regiões indicadas com cores, o que é simplesmente fantástico. Quando este texto foi escrito, a área de conteúdo era azul-claro, o espaçamento era roxo e a margem era amarelo-claro, mas