CSS no Lanche

Desenvolver uma folha de estilos para que funcione corretamente em todos os browsers não é tarefa fácil, isso depende muito do layout, depende muito também da experiência do desenvolvedor, mas existem ferramentas que podem lhe auxiliar e lhe conduzir ao desenvolvimento menos doloroso. Utilizar um bom browser é uma delas, por exemplo, o Firefox, que em conjunto com outras extensões se torna uma suíte de desenvolvimento completa.

Plugins recomendados para o desenvolvimento

Um plugin que eu recomendo para auxiliar no desenvolvimento web em conjunto com o Firefox é a Web Developer Toolbar. Este plugin adiciona uma barra de ferramentas a seu Firefox que lhe auxiliam no debug de CSS, além de obter informações valiosas sobre Acessibilidade, desabilitar e habilitar JavaScript, manipular formulários. Uma maneira simples de debugar CSS é você ir até CSS > View Style Information, a partir de agora você deverá selecionar o elemento que deseja ver o CSS que foi aplicado. Abaixo da web developer, você verá informações desse tipo:

html > body > div #articlecontent

Uma outra ferramenta muito poderosa da Web Developer Toolbar é a possibilidade que você tem de editar css on the fly, ou seja, em tempo real e ver as modificações ao mesmo tempo no browser. Para isso você deve ir até CSS > Edit CSS, será aberta uma janela no seu browser, e a partir daí é só começar a edição. Depois basta salvar o arquivo e substituir seu arquivo CSS por esse arquivo novo. Conheço pessoas que não usam qualquer tipo de editor e só desenvolvem CSS dessa forma.

Em contrapartida, temos também o Firebug, utilizado por 9 em cada 10 desenvolvedores, a partir dele você pode editar, debugar e monitorar, HTML, CSS e JavaScript em tempo real em qualquer página web. Para editar o CSS de uma página, por exemplo, após a instalação do plugin, clique com o botão direito no elemento que deseja editar o CSS, escolha Inspect Element ou Inspecionar Elemento, abaixo é aberto um painel onde você tem total acesso ao código HTML e em consequência liberdade total de edição do CSS, como adicionar novas propriedades, deletar propriedades herdadas ou não. Com isso você verá as modificações acontecerem em tempo real semelhante a Web Developer Toolbar. As modificações estando Ok, é só salvar o arquivo e substituir o antigo.

Ferramenta de Debug para Internet Explorer

No Internet Explorer nós temos uma ferramenta não muito parecida com a Web Developer Toolbar e Firebug, mas nas horas difíceis ela quebra um galho, é a Internet Explorer Developer Toolbar, dentre suas características, você tem a possibilidade de:

• Explorar e modificar o DOM (Document object model) de uma página web.
• Localizar e selecionar elementos em uma página web por meio de uma variedade de técnicas.
• Assim como a Web developer toolbar do Firefox, permite selecionar, habilitar e desabilitar o CSS na página.
• Visualização de ids, divs, tabelas e seus respectivos valores.
• Validar os links HTML, CSS, WAI e também RSS.
• Visualizar as dimensões, tamanho de arquivos e permite manipulação da resolução da janela do navegador para uma nova resolução.
• Limpar cache e cookies do navegador.
• Disponibilizar de uma régua repleta de funções para ajudar no alinhamento e medidas de objetos na sua página.
• Procurar por regras de estilo usadas para configurar valores de estilos específicos para um elemento.

Como viram, hoje em dia não existe mais desenvolvimento web sem a utilização dessas ferramentas. Alguém mais quer dar a indicação de alguma ferramenta para auxiliar o desenvolvimento?

Entender como funciona o Box Model é essencial para aqueles que querem migrar das tabelas e começar o desenvolvimento de layouts utilizando CSS. É essencial entender como o browser renderiza os elementos HTML para não passar por problemas com Float. Os elementos na página são renderizados como retângulos, então, todas as tags HTML funcionam como caixas, e essas caixas são formadas por 4 áreas retângulares que são as seguintes:

• Conteúdo
• Espaçamentos (padding)
• Bordas (border)
• Margens (margin)

Imagem Ilustrativa do Box Model

Diagrama em 3D do Box Model gentilmente cedida pelo site hicksdesign.

O que muita gente não sabe quando está iniciando é que o padding é somado a largura total do elemento, ou seja, se temos uma div com uma largura fixa de 300px, e definimos um padding de 10px, ao invés de 300px agora essa div passará a ter 320px de largura, ganhamos 10px de cada lado. É muito importante lembrar-se disso, o padding é somado a largura total. Com margin ocorre a mesma coisa, se definirmos 20px de margin para nossa div, de 320px ela passará a ter 360px. E não se esqueçam de que isso também ocorre com as bordas, se definirmos 2 pixels de borda, a largura agora passará a ser 364px de largura total em nossa div

Características das áreas do box

As margens são sempre transparentes e cada browser tem uma margem default que é definida pelo próprio browser, embora as especificações CSS definam uma margem default(0) para cada elemento HTML, cada fabricante de browser adota um valor default para a margem. As bordas são sempre transparentes e seu valor default é igual a 0. O padding é transparente e seu valor default também é igual a 0. O background(fundo) está sempre por trás do conteúdo e do espaçamento.

Para corrigir esses comportamentos por default do browser, é aconselhável você iniciar seu CSS com um seletor universal (*) zerando todos as margens e paddings dos elementos HTML.

* {margin:0; padding:0}

Utilizando o seletor universal (*) em conjunto com margin:0 e padding:0 você quer dizer que todo elemento HTML irá iniciar com o valor padrão de margin e padding iguais a 0.

Possuir boas ferramentas para o desenvolvimento web, é essencial, portanto, a primeira coisa que você desenvolvedor web deve fazer é utilizar um bom browser como padrão, recomendo o Firefox, você deve testar seus sites em outros browsers também, isso é óbvio, mas sempre desenvolva primeiro para o Firefox, depois para os outros browsers. Porque?

Firefox é um browsers Standard Compliance, ou seja, segue a risca os padrões web, e ainda você possui a possibilidade de instalar extensões que podem lhe auxiliar no desenvolvimento. Se você possui somente o Internet Explorer instalado no micro, baixe o Firefox agora.

Extensões Firefox que auxiliam no desenvolvimento

Web Developer Toolbar é muito útil por mais de 100 motivos diferentes, você pode, por exemplo, editar o CSS dessa página com essa extensão.

CSSViewer lhe proporciona a possibilidade de visualizar as propriedades CSS aplicadas a qualquer elemento na página de uma forma simples e clara.

CSS Debug Toggle Bookmarklet permite visualizar toda a estrutura da página com um só clique. Adicione esse link aos seus favoritos para um acesso rápido.

Firebug é a ferramenta utilizada por 9 em cada 10 desenvolvedores web, ele integra a possibilidade de você editar, debugar e monitorar, HTML, CSS e JavaScript em tempo real em uma página web

Não é possível falar de CSS sem antes conhecermos um pouco sobre seu criador, Håkon Wium Lie. Ele é um Norueguês, de nome complicado, que veio ao mundo para mudar a forma de desenvolvimento para a Web. Antigamente, os desenvolvedores conseguiam formatar suas páginas utilizando títulos e parágrafos, mas isso não era o suficiente, e no ano de 1994, ele propôs a criação das CSS, trabalhando em conjunto com Tim Berners-Lee e Robert Cailliau.

Já trabalhou em empresas como: YesLogic, INTBAU, Skarpsno vel, onde atualmente trabalha na empresa Opera Software, onde é chefe de tecnologia.

Se surgiu interesse em saber mais sobre a vida de Håkon Wium Lie, seria interessante você dar uma olhada nos seguintes links:

• Site pessoal.
• Entrevista para o site Slashdot.
• Håkon Wium Lie: CSS was created to save HTML