Encontrei um bug! Mas será?

Encontrei um bug! Será? - Depurando seu código CSS e (X)HTML

Pessoal, pelo excessivo número de dúvidas a respeito do nosso querido CSS resolvi criar um guia de depuração do mesmo, que (eu espero) vai ajudar desde o iniciante, até o desenvolvedor mais experiente.

Vamos lá.

Sabemos que os bugs dos navegadores (ou do IE) estão aí e causam muitas dores de cabeça, mas antes de arrancar os cabelos ou usar aquele hack esquisito, vale a pena gastar uns minutinhos depurando o nosso código e ver se está tudo certo.

Antes de qualquer linha de código adicional, é necessário ter certeza que o problema realmente é um bug, e não uma falha de estruturação ou o que geralmente ocorre: uma falha nossa sobre como o posicionamento funciona no CSS.

Para detectar bugs existem muitas formas, fóruns e listas de discussão ajudam, talvez uma busca pelo google ou melhor ainda, consultar os documentos oficiais do W3C.

No entanto esta pode ser uma tarefa muito árdua se não soubermos o que realmente estamos procurando, assim indicam-se os seguintes passos que você pode até adotar como um costume quando encontrar erros:

1. Validação

Geralmente este primeiro passo não é seguido, o que é uma vergonha, pois a maioria dos “Bugs misteriosos” são simplesmente erros básicos de codificação. Valide seu documento não para por um selinho legal na sua página, mas sim para garantir que não está fazendo nada errado que possa ocasionar problemas mais tarde.

2. Simplifique seu CSS

Se todo o CSS estiver contido no documento em questão, isto é, se você estiver usando todo o CSS incorporado (o que não é uma boa prática), ou se todo o seu CSS estiver em um único arquivo importado, passe para o próximo passo. Se isso não ocorrer é aconselhável colocar todo o CSS relevante incorporado ao seu documento (apenas momentaneamente, não se assuste, hehe.)

IMPORTANTE: Providencie cópias de segurança de seus arquivos, depois pode ser tarde demais.

Depois retire o link de importação (tag <link> ou @import) e visualize a página. Se o “bug” desaparecer é sinal de que algo está errado com o arquivo importado, (que foi retirado momentaneamente) e, na verdade você não tem um bug, mas sim erros no seu código.

Feito esse processo e seu “bug” não desapareceu? É hora do trabalho de verdade começar!

3. Recorte e cole

O objetivo aqui é recortar várias seções do seu código, salvar o arquivo e checar se o “bug” continua ou não, se ele sumir, cole a seção de volta e recorte a próxima, assim você descobre exatamente o que está acontecendo de errado. Este método deve ser aplicado tanto ao CSS quanto ao (X)HTML.

Outra forma de fazer este trabalho é comentando blocos de código, que pode ser mais seguro, mas não tão rápido quanto o método anterior.

Tome cuidado com os estilos “inline” no seu (X)HTML.

Lembre-se, o objetivo aqui é manter o bug presente removendo o máximo de código possível, as seções começarão a ficar menores e menores até que você descobrirá a linha exata onde o erro está ocorrendo.

4. Análise

Agora, depois de tudo isso, e descoberto (eu espero) ao menos o código que causa o “bug” é hora de analisá-lo, brinque com seu código, faça testes, [uPDATE]Uma ótima dica é colocar bordas coloridas grandes ou paddings que ajudam a visualizar o efeito do seu código na tela do navegador (by micox)[/uPDATE] afinal esta página é resultado da tremenda filtragem que você realizou no terceiro passo e será muito mais fácil detectar o problema. Agora também é hora (exatamente, eu disse apenas AGORA e não antes dos 3 passos acima) de consultar os documentos do W3C, de procurar no Google e de postar no seu fórum preferido (leia-se Imasters, hehe), como o seu código está bem sucinto e você tem certeza que o problema está exatamente aí, o pessoal do fórum vai gostar de ajudar e não vai pegar no seu pé por postar um monte de código que ninguém entende.

Se depois de tudo isso algum “bug” ainda conseguir sobreviver, você acaba de descobrir (ou de conhecer) um verdadeiro bug de navegador. Está quase na hora de arrancar os cabelos, hehehe.

Depois do google, fóruns, documentações do W3C, não se esqueça de procurar nas documentações da página do desenvolvedor do navegador (Microsoft, Mozilla.. por exemplo), se o desespero for grande mesmo tente escrever para algum especialista (mas esteja consciente de que você poderá ser xingado, afinal... consultoria custa dinheiro!)

Se depois de tudo isso não estiver resolvido, amigo... meu sincero conselho:

Ctrl+A > Delete > Ctrl+N e boa sorte!