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?