Curso de CSS / Inspecionar regras com DevTools: Styles e Computed

As ferramentas de desenvolvedor do navegador permitem que você inspecione quais declarações de CSS correspondem a um elemento e quais valores são usados ​​finalmente. Styles explica regras correspondentes e substituídas, enquanto Computed ajuda você a verificar os valores finais das propriedades; edições no DevTools normalmente são temporárias.

Prepare o exemplo e o resultado esperado

Salve todo o código abaixo como index.html em formato UTF-8 e abra-o em seu navegador. Neste exemplo, o parágrafo com o horário de funcionamento é exibido em verde e o primeiro parágrafo geral é exibido em cinza. O aviso tem 16px de espaçamento interno e um fundo claro para possibilitar a comparação de resultados por atributo.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1 { color: #087f5b; }
    p { color: #666; }
    .notice {
      color: #087f5b;
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>A place to grow plants and take a break.</p>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>
</html>

Como colocamos o CSS no elemento style junto com o HTML do corpo, o código-fonte do exercício está em um único arquivo. Se você já estiver praticando com CSS externo, pode colocar a mesma regra em style.css, mas o nome do arquivo e o número da linha exibidos nas ferramentas de desenvolvedor serão diferentes. Após confirmar que o texto esperado aparece na tela, abra as ferramentas de desenvolvedor.

Selecione o elemento correto em Elements

1. Clique com o botão direito na frase “We open at 9 a.m. every day.” (abrimos às 9h todos os dias) na página e escolha Inspecionar. No Chrome ou Edge no Windows, você também pode abrir o DevTools com F12 ou Ctrl+Shift+I.
2. Na aba Elements, verifique se a linha selecionada é <p class="notice">. Se outro elemento estiver selecionado, pressione a ferramenta de seleção de elementos e selecione o aviso novamente. A localização das ferramentas e o idioma do menu podem variar dependendo do navegador/versão.
3. Abra Styles ao lado ou abaixo do elemento selecionado. Note que ambas as regras, .notice e p, estão visíveis. Em janelas estreitas, os painéis podem ser colocados na parte inferior ou algumas abas podem ficar num menu de abas adicionais.

O que o Elements expõe é o Document Object Model (DOM, modelo de objetos do documento), que é a estrutura do documento interpretada pelo navegador. Nem sempre parece com o código-fonte da página. Quando um navegador corrige HTML incorreto ou o JavaScript substitui um elemento, a seleção real deve ser determinada em relação à estrutura exibida no Elements.

O diagrama resume a relação entre as regras correspondentes em Styles e o valor final em Computed. É uma ilustração explicativa, não uma captura de tela de um novo teste. No DevTools, abra Computed e filtre por color para inspecionar o mesmo valor. Os painéis podem aparecer em lugares diferentes dependendo do layout e versão do navegador.

Compare Styles e Computed

O painel Styles exibe regras que correspondem ao elemento selecionado, estilos inline escritos diretamente no elemento e regras relacionadas à herança. Tanto p { color: #666; } quanto .notice { color: #087f5b; } correspondem ao aviso, mas a cor final do texto é verde. Isso ocorre porque o seletor de classe tem precedência maior do que o seletor de elemento na mesma condição de origem/importância/camada neste exemplo.

Se você vir um risco em uma declaração de cor cinza, primeiro verifique a possibilidade de que não seja “a sintaxe estava errada”, mas sim “outra declaração venceu”. O significado dos riscos e sinais de aviso pode variar dependendo da localização e da situação, então passe o mouse sobre a declaração e leia a explicação. padding: 16px é uma propriedade separada de cor, então mesmo que haja um conflito de cores, eles podem ser aplicados juntos.

Computed é usado para verificar o estilo final calculado para o elemento selecionado. Abra a aba e digite color no filtro para encontrar a cor do texto. #087f5b pode ser exibido como rgb(8, 127, 91), e eles são da mesma cor. Expanda uma propriedade para rastrear regras e fontes relacionadas. Algumas propriedades podem estar ocultas na lista padrão, então verifique também as opções de exibição.

A documentação de recursos CSS do Chrome DevTools explica os painéis e como editar declarações. Para entender por que as declarações entram em conflito, compare os exemplos condicionais em Herança, Especificidade e a Cascata no CSS.

Alternar declarações e editar valores

1. Em Styles, procure pela declaração .notice de color: #087f5b. Desmarcar a caixa ao lado de uma declaração apenas excluirá temporariamente essa declaração. Como resultado, confirme que a cor do aviso muda para cinza para a regra p.
2. Marque a caixa novamente para retornar à sua cor verde original. Em seguida, clique no valor da cor e mude para #1d4ed8 e pressione Enter. Verifique se apenas o texto no aviso muda para azul e a cor de fundo permanece verde claro.
3. Verifique a cor do texto novamente em Computed. Se estiver rgb(29, 78, 216), ela corresponde à cor azul que você alterou. O fundo é uma propriedade separada chamada background-color.
4. Este laboratório não configurou uma conexão de salvamento ou Local Overrides (substituições locais), então, quando você atualizar, a cor que você alterou nas Ferramentas de Desenvolvedor desaparecerá e você voltará para a cor verde original. Depois de confirmar que o original não foi alterado, prossiga para a próxima etapa.

Declarações desativadas podem ser restauradas ligando novamente a caixa de seleção, e valores alterados incorretamente podem ser restaurados reinserindo os valores existentes. Se você quiser remover todas as outras alterações de uma vez, atualize sem ativar a função de salvamento, como neste exercício. Se você tiver ativado o vínculo de espaço de trabalho ou substituição local, a forma como é salvo e mantido pode mudar, então não presuma que será restaurado com uma atualização.

Salve uma alteração confirmada no arquivo de origem

Clique no nome do arquivo de origem e no número da linha de uma regra em Styles para localizá-la. Como este exemplo incorpora CSS no HTML, edite a regra correspondente no index.html original. Para uma folha de estilo externa, abra o arquivo identificado lá, como style.css. Verifique o caminho antes de editar uma cópia com nome semelhante. Para mais detalhes, consulte Aplicar CSS com Styles Inline, Internos e Externos.

1. Abra o index.html que você realmente tinha aberto em um editor de texto. Se você copiou o arquivo para múltiplas pastas, certifique-se de que o caminho do arquivo corresponda ao endereço do navegador.
2. Altere o valor da cor da regra original .notice para #1d4ed8 e salve.
3. Atualize seu navegador. Agora, se você abri-lo novamente e o aviso aparecer em azul, ele foi refletido no original.
4. Para retornar ao design original após concluir o exercício, restaure a cor original em #087f5b e salve/atualize.

Distinga três falhas comuns de CSS

Para cada situação, altere a original uma a uma, salve/atualize, verifique e depois reverta. Na primeira situação, as regras de .notcie que não correspondem ao elemento selecionado podem não aparecer na lista de regras comumente aplicadas do Styles. Na terceira situação, a forma como o aviso aparece varia dependendo de onde ele foi criado e da versão do navegador. Dividindo os casos em casos onde não há regra, há uma regra mas ela foi sobrescrita, e a própria declaração é inválida, você pode ver onde corrigi-la.