4 técnicas simples e rapidamente depurar e corrigir o código CSS em praticamente qualquer navegador

4 técnicas simples e rapidamente depurar e corrigir o código CSS em praticamente qualquer navegador

Você projetou o layout perfeito para os novos e futuros site. Mas agora converter todo aquele arquivo de camadas PSD Photoshop bonito em um código perfeito pixel é a parte desafiadora. Não é desafiador porque você não sabe como codificar, mas mais desafiador porque diferentes navegadores rendem o seu código de forma diferente, mesmo quando você está usando um código CSS completamente válido para exibir esse incrível código semântico HTML5 que você escreveu. Isso é ainda mais frustrante ao corrigir um bug em um navegador agora se torna um novo bug em outro navegador. Mesmo que isso não seja um desafio, agora imagine que você está designado para corrigir o código de outra pessoa que está por todo o lado. Muitas vezes este último caso é aquele que faz você puxar o seu cabelo e dizer numerosos WTFs antes de você entender completamente o que está acontecendo em seu código, porque você provavelmente conhece toda a sua folha de estilo de coração e este novo código não é onde perto de qualquer convenção de codificação. No entanto, momento de se sujar com depuração que o código CSS é muito mais simples e menos frustrante do que antes, graças a essas ferramentas e técnicas muito simples.

1) Inspect Element Tool

Inspect element by far is the best tool to start debugging anything CSS. Se você está desenvolvendo sites, então você precisa do conjunto certo de ferramentas de desenvolvimento web. E felizmente Inspecionar elemento é agora integrado nativamente com todos os navegadores web modernos como parte de suas ferramentas de desenvolvimento. Esta ferramenta permite-lhe seleccionar o elemento específico da página que gostaria de corrigir e ver imediatamente quais as regras do CSS que são aplicadas a esse elemento que fazem com que o seu elemento seleccionado apareça dessa forma. Basta carregar com o botão direito e seleccionar “inspeccionar o elemento” no menu de contexto.

agora você tem acesso visual total a todas as regras que são computadas para esse elemento. Se você não selecionou o elemento direito, você poderia simplesmente clicar na fonte e pin apontar o elemento exato que você gostaria de diagnosticar. Como você vê na imagem acima, Agora você pode ajustar suas regras CSS. Usando a opção do lado esquerdo de cada propriedade CSS, você poderia comutar essa propriedade, ou até mesmo clicar na propriedade e mudar o seu valor, ou até mesmo carregar em enter key e adicionar novas regras para o seu elemento. Mesmo o mais incrível é a facilidade com que é possível depurar um estado de hover de um elemento, simplesmente abrindo o menu ao lado do elemento selecionado e escolher :estado de hover. Como você pode ver no painel direito, esta ferramenta incrível até mesmo mostra o arquivo de folha de estilo e número de linha da regra CSS que está sendo executado nesta página. Além disso, é mais compreensível para entender por que o nosso elemento tem um 10px de enchimento superior e inferior em vez de 5px, porque a regra na linha 1026 do estilo.o css da nossa consulta de mídia CSS substitui a antiga regra na linha 916 do mesmo arquivo. É mesmo possível ver o modelo de caixa do elemento selecionado com as suas dimensões atuais sem usar uma régua de terceiros ou ferramenta de medição. Ter essa riqueza de informações agora torna nosso trabalho de depuração muito mais fácil. Suponha que seu campo de formulário de folha de estilo não é semelhante a outros elementos de entrada e você se pergunta como você poderia resolver isso. Você inspecciona esse elemento e descobre que, como está a usar os novos tipos de campos de entrada HTML5, o seu desenhador de temas não incluiu quaisquer regras CSS para input, por isso adiciona este selector à folha de estilo.

input,input{ border: 1px solid #ccc;}

o Google Chrome também tem ferramentas de desenvolvimento similares que permitem as mesmas funcionalidades. É mesmo possível alterar o seu modo de depuração para a resolução do ecrã de um dispositivo que gostaria de testar o seu layout e descobrir como é que a sua pesquisa multimédia CSS se está a comportar nessas condições.

estas ferramentas de desenvolvimento têm capacidades muito poderosas, mesmo além do desenvolvimento de CSS, tais como DOM inspection, JavaScript profiling, JavaScript Console, ferramentas de monitoramento de recursos, e todo outro conjunto de recursos que precisam de sua própria seção tutorial além deste artigo. Como você pode ver na imagem acima, em Ferramentas de desenvolvedor Chrome, é mesmo possível emular diferentes agentes de usuário do navegador, ou até mesmo emular eventos de toque, como swiping. Com estas ferramentas, você nem precisa depurar ativamente o seu CSS no navegador móvel do seu smartphone, pelo menos até certo ponto.

quais as ferramentas de desenvolvimento do navegador são as melhores são as perguntas que você vai descobrir experimentando. No final do dia, tudo depende do que você está tentando alcançar e se esse conjunto de ferramentas lhe permite chegar ao seu objetivo final. Uso pessoalmente todas estas ferramentas a meu favor. Cada um tem algo que eu gosto e acho útil quando eu quero depurar o meu código. Por exemplo, eu acho a pequena representação de cores quadradas das cores hex ao lado das propriedades de cor CSS de alguma forma útil, mesmo que eu possa processar a cor RGB na minha cabeça e obter a visualização palato de cor aproximada, essas pequenas diferenças me fazem alternar entre essas ferramentas de desenvolvimento.

Firebug

Firebug foi uma das primeiras ferramentas que desde inspetor de recurso. É uma das ferramentas de desenvolvimento web mais populares, com quase 3 milhões de usuários diários médios. As of this writing, Firefox CSS debugging tools are adequate enough for me to not use Firebug, however for JavaScript debugging in Firefox I still use Firebug.Tens medo da IE7? Não ser mais

Você pode estar surpreso, mas o Internet Explorer ainda tem Inspecionar Elemento (Ctrl+B) recurso em suas ferramentas de desenvolvedor (F12). Embora não tão amigável como as ferramentas de desenvolvimento de outros navegadores, ainda este recurso construído no Internet Explorer 9 é muito útil para testar os seus layouts No modo emulado IE7 e IE8. Nos dias em que nenhuma destas ferramentas de desenvolvimento estava disponível para depurar navegadores IE antigos, esta segunda técnica geralmente era muito útil.

2) depurar no estilo

tão bom quanto o elemento inspecionar é, às vezes você não tem acesso a essa ferramenta, como navegadores móveis, ou você quer ajustar o estilo de alguns elementos na página em vez de apenas um específico. Eu Amo saber os limites do elemento que eu estou styling, então eu sei se há quaisquer transbordos, ou questões flutuantes, ou etc… por essa razão eu adiciono uma cor de fundo brilhante e perceptível para o elemento ativo que eu estou styling e tirar a cor de fundo uma vez que o styling é feito. Às vezes, eu vou e venho ajustando esses elementos, então eu apenas movo o código de depuração para o final da minha folha de estilo e comentá-lo, e descommentá-lo uma vez que eu preciso novamente. Desta forma, posso alternar rapidamente o modo de depuração e ver como cada elemento está posicionado no ecrã.

o que resulta em …

para este exemplo, eu apenas adicionei código de depuração para os itens de bloco de estrutura principal na minha página. Agora eu posso dizer onde cada post começa e quanto espaço há entre cada post ou item widget na minha barra lateral, e se eu quiser adicionar uma lacuna entre a barra lateral e o conteúdo principal, eu posso vê-lo visualmente em cores brilhantes.

o oposto disso também é possível, definindo uma série de regras de depuração, e adicionando essa classe a qualquer item que queremos ver. Por exemplo, acima eu defini uma nova classe chamada debug com o seguinte código.

.debug{ border:1px solid red; }

e sempre que quero depurar qualquer elemento, simplesmente adiciono classe de depuração a esse elemento.

<div class="foo debug">Div element with foo and debug classes</div>

3) depurar CSS usando JavaScript

esta técnica é muito semelhante a acima, no entanto, por algumas razões estranhas acontece que a situação acima não é viável. Este é um pedaço de código jQuery que vem em nosso auxílio aplicando a classe de depuração ao elemento foo, ou mesmo adicionando CSS diretamente ao elemento de Barra neste caso.Esta situação pode acontecer muito raramente, mas sei que usei esta técnica no passado, por isso é bom saber.

4) Conheça a Cascata

algumas questões CSS são tão comuns como os flutuadores de limpeza que você cairá nessa armadilha uma vez, e da próxima vez que você encontrar algo semelhante, você sabe o que causou o problema e como corrigi-lo. Em geral, a maioria das questões CSS são fáceis de resolver se você sabe como as regras CSS se sobrepõem. Por exemplo, os selectores mais específicos irão sobrepor-se aos mais gerais, ou o selector de ID sobrepõe-se ao selector de classes, ou a declaração !important tem precedência sobre uma declaração normal. Conhecer a Cascata irá ajudá-lo a resolver o seu código de folhas de estilo em cascata mais rapidamente.

aqui está um exemplo direto de W3C spec sobre como a especificidade do seletor funciona.Alguns exemplos:

<HEAD><STYLE type="text/css"> #x97z { color: red }</STYLE></HEAD><BODY><P ID=x97z style="color: green"></BODY>

no exemplo acima, a cor do elemento P seria verde. A declaração no atributo “style” irá sobrepor-se à do elemento “STYLE” por causa da regra de cascata 3, Uma vez que tem uma maior especificidade. Se você acha que este exemplo é difícil de entender verifique este artigo sobre a ordem de precedência CSS.

notas finais

alcançar resultados perfeitos em pixels é difícil devido a diferentes renderizações por navegadores diferentes. Alguns navegadores antigos não suportam CSS3 ou HTML5 completos, por isso verifique o projecto comunitário HTML5Please para ver se a sintaxe que está a tentar usar é suportada pela maioria dos navegadores. No entanto, você pode opcionalmente usar fallbacks ou polifills para fornecer recursos em falta para navegadores que não suportam a implementação CSS3 ou HTML5 completa.

Deixe uma resposta

O seu endereço de email não será publicado.