Dicas do DevTools: descobrir problemas de CSS

Sofia Emelianova
Sofia Emelianova

Você já aplicou CSS a um elemento, mas ele não funcionou?

Com o Chrome DevTools, você pode descobrir, depurar e testar problemas de CSS rapidamente.

Assista ao vídeo para saber como o painel Elements > Styles destaca vários problemas de CSS:

  • Aviso. Propriedade com sintaxe inválida

  • Caixa de seleção. Propriedade substituída

  • Caixa de seleção. Propriedade inativa Informações.Com uma dica.

  • Herdado de parent

    • Caixa de seleção. Propriedade herdada
    • Caixa de seleção. Propriedade não herdada
  • Caixa de seleção. Propriedade abreviada expansível Expandir.

    • Caixa de seleção. Propriedade longa modificada
    • Caixa de seleção. Propriedade longa ativa

Folha de estilo do user agent

  • Propriedade não editável
  • Propriedade não editável substituída

Mais dicas de depuração:

  • Use o filtro no painel Styles para se concentrar na propriedade de seu interesse.
  • Use o painel Computed para conferir todos os vencedores da Cascade e os valores calculados.
  • No painel Computed, expanda uma propriedade e clique em um link para encontrar a origem dela no painel Styles.

Para saber mais sobre todas as maneiras como o DevTools destaca problemas de CSS, consulte Encontrar CSS inválidos, substituídos, inativos e outros.

Para aumentar sua experiência com CSS, consulte Aprender CSS.

Para saber como criar sites que tenham uma aparência incrível e funcionem bem para todos, consulte Aprender sobre design responsivo.