O que significa quando uma regra CSS está acinzentada no inspetor de elementos do Chrome?

248

Estou inspecionando um h2elemento em uma página da web usando o inspetor de elementos do Google Chrome e algumas das regras de CSS - que parecem ser aplicadas - ficam esmaecidas. Parece que um strike-through indica que uma regra foi substituída, mas o que significa quando um estilo está acinzentado?

Rob Sobers
fonte

Respostas:

95

Para mim, as respostas atuais não explicaram o assunto completamente o suficiente, por isso estou adicionando essa resposta que, espero, pode ser útil para outras pessoas.

Acinzentado / esmaecido fora texto, pode significar tanto

  1. é uma regra / propriedade padrão que o navegador aplica, que inclui propriedades de mão abreviada padrão.
  2. Envolve herança que é um pouco mais complicada.

Herança

Nota: O painel "estilo" das ferramentas de desenvolvimento do Chrome exibirá um conjunto de regras, porque uma ou mais regras do conjunto estão sendo aplicadas ao nó DOM atualmente selecionado. Eu acho que, por uma questão de integridade, as ferramentas de desenvolvimento mostram todas as regras desse conjunto, sejam elas aplicadas ou não.

No caso de uma regra ser aplicada ao elemento atualmente selecionado devido à herança (ou seja, a regra foi aplicada a um ancestral e o elemento selecionado a herdou), o chrome exibirá novamente o conjunto de regras inteiro.

As regras aplicadas ao elemento atualmente selecionado aparecem no texto normal.

Se uma regra existir nesse conjunto, mas não for aplicada por ser uma propriedade não herdável (por exemplo, cor de fundo), ela aparecerá como texto acinzentado / esmaecido.

aqui está um artigo que fornece uma boa explicação - (Nota: o item relevante está na parte inferior do artigo - figura 21 - infelizmente a seção relevante não tem um cabeçalho) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

Trecho do artigo

Esse [cenário de herança] ocasionalmente pode criar um pouco de confusão, porque as propriedades padrão da mão abreviada; a figura 21 ilustra as propriedades abreviadas padrão da propriedade font, juntamente com as propriedades não herdadas. Esteja ciente do contexto que você está olhando ao examinar elementos.

Michael Coleman
fonte
10
A declaração "regras herdadas, mas não aplicadas , elas aparecerão como texto esmaecido / esmaecido" não é verdadeira. Se não for aplicado, eles terão um rasurado. Atualizei minha resposta com uma captura de tela e um exemplo ao vivo.
Rob Sobers
10
Esta é a resposta certa!!! A frase-chave é ... "Se uma regra existir nesse conjunto, mas não for aplicada por ser uma propriedade não herdável (por exemplo, cor de fundo), ela aparecerá como texto acinzentado / esmaecido."
Niko Bellic
Esta é definitivamente a resposta certa. Se uma propriedade esmaecida aparecer em uma seção que diz "Herdado de [seletor]", é uma propriedade não herdável que não é aplicada ao elemento atual. Qualquer propriedade riscada foi substituída por um estilo mais específico.
onlynone
1
Se as regras estão acinzentadas quando não são herdáveis, por que meu elemento div acinzentou as regras de 'largura'? A largura não é herdável? Estou perguntando isso a sério, a propósito.
moosefetcher
1
... Então, se você vir o Chrome acinzentando as regras css que estão sendo muito aplicadas - onde você pode desmarcá-las (ou alterar seus valores) e ver uma alteração correspondente na página - pode ser que a regra afete o elemento mas não é aplicado a esse elemento em particular, mas a um pai.
Ben Wheeler
82

Isso significa que a regra foi herdada, mas não é aplicável ao elemento selecionado:

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

O painel contém apenas propriedades de regras diretamente aplicáveis ​​ao elemento selecionado. Para exibir adicionalmente as propriedades herdadas, ative a caixa de seleção Mostrar herança. Essas propriedades serão exibidas em uma fonte esmaecida.

regras acinzentadas são herdadas dos ancestrais

Exemplo ao vivo: inspecione o elemento que contém o texto "Olá, mundo!"

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}
<div id="foo">Hello, world!</div>

Rob Sobers
fonte
13
@Rob Para ser preciso, quando um estilo é exibido em cinza, significa que ele foi herdado de algum outro elemento abrangente, mas não é aplicável ao elemento selecionado . Na documentação: "O painel contém apenas propriedades de regras diretamente aplicáveis ​​ao elemento selecionado. Para exibir adicionalmente propriedades herdadas, ative a caixa de seleção Mostrar herança. Essas propriedades serão exibidas em uma fonte esmaecida."
drkvogel
2
@ RobSobers Infelizmente, não acho que seu exemplo demonstre herança. De onde é o pai ancestral do qual a div está herdando? Se você rolar para baixo no painel Styels no Chrome, verá as seções intituladas "Herdado de ...". O que significam as regras acinzentadas? Você pode incorporar isso em um exemplo?
Niko Bellic
8
Não entendo por que essa resposta é a. marcado como a melhor resposta e b. tem tantos votos positivos. Está claramente errado. Margens não são propriedades herdáveis ​​( stackoverflow.com/a/5612360/24267 ) A resposta de Michael Coleman é a correta. Oh, você não quer dizer herdado de um elemento ancestral, quer dizer ... não tenho certeza do que você quer dizer exatamente. De qualquer forma, esta resposta não está correta em 2015, com o Chrome 46.
mhenry1384
3
Claramente, os votos são para algumas mágicas do MS Paint com as setas e esse efeito de sombra de bolha. votado como incorreto.
David David
2
@ mhenry1384 "a" é facilmente explicável: porque foi escrito pela pessoa que fez a pergunta.
Andrew Grimm
27

Michael Coleman tem a resposta certa. Eu só quero adicionar uma imagem simples para acompanhar. O link que ele incluiu tem este exemplo simples: http://commandlinefanatic.com/art033ex4.html

O HTML / DOM se parece com isso ...

HTML

O Painel de Estilos no Chrome fica assim quando você seleciona o elemento p ...

Painel Estilos

Como você pode ver, o elemento p herda de seus ancestrais (os divs). Então, por que o estilo está background-color: blueacinzentado? Porque faz parte de um conjunto de regras que possui pelo menos um estilo herdável. Esse estilo herdável étext-indent: 1em

background-color:bluenão é herdável, mas faz parte do conjunto de regras que contém o text-indent: 1emque é herdável e os desenvolvedores do Chrome queriam estar completos ao exibir conjuntos de regras. No entanto, para distinguir entre estilos no conjunto de regras herdáveis ​​e estilos que não são, os estilos que não são herdáveis ​​ficam acinzentados.

Niko Bellic
fonte
1
Esta é a melhor resposta, pois oferece uma demonstração simples. Abra esse URL em uma nova guia e use as Ferramentas do desenvolvedor do Chrome para selecionar os vários divs e p. Você verá que background-colornão está acinzentado div#two. Mas background-colorestá acinzentado para div#threee p.
wisbucky
boa explicação
Dirk Boer
10

Isso também ocorre se você adicionar um estilo pelo inspetor, mas esse novo estilo não se aplica ao elemento que você selecionou. Normalmente, os estilos mostrados são apenas os do elemento selecionado, portanto, o cinza indica que o estilo que você acabou de adicionar não seleciona o elemento que está focado no navegador DOM.

AaronLS
fonte
Este foi o meu problema. Obrigado!
Chuck Le Butt
5

Isso significa que a regra foi substituída por outra regra com maior prioridade. Por exemplo, folhas de estilo com:

h2 {
  color: red;
}
h2 {
  color: blue;
}

O inspetor mostrará a regra color:red;acinzentada ecolor:blue; normalmente.

Leia sobre a herança de CSS para saber quais regras são herdadas / têm prioridade mais alta.

EDITAR:

Confusão: as regras acinzentadas são as regras não definidas, que usam uma folha de estilo padrão especial aplicada a todos os elementos (as regras que tornam o elemento renderizável, porque todos os estilos precisam ter um valor).

tcooc
fonte
Acabei de testar isso e acho que está incorreto. No caso de uma regra ser substituída, haverá uma advertência (como minha pergunta indica). Veja: yfrog.com/f/j3fooep
Rob Sobers
@ Rob: teve uma confusão desde devtools não estava começando. Eu consegui rodar e editei minha resposta com a resposta testada .
Tcoc
Também não tenho certeza se isso está correto; as regras desbotadas são aqueles que você definiu na minha própria folha de estilos (por exemplo, font-size: 20px;)
Rob Sobers
1

Ao usar o webpack, qualquer regra ou propriedade css que foi alterada no código-fonte fica acinzentada quando a página é recarregada após uma reconstrução. Isso é realmente irritante e me forçou a recarregar a página todas as vezes.

user2528531
fonte
0

insira a descrição da imagem aqui

A nova versão do desenvolvedor do Chrome mostra de onde é herdada.

jmojico
fonte
0

Estou respondendo muito tempo depois que a pergunta já tem muitas respostas corretas, porque encontrei um caso diferente de ter um bloco de código CSS acinzentado e não editável no Chome DevTools: O bloco em questão continha caracteres U + 200B ZERO WIDTH SPACE . Depois de encontrá-los e removê-los, eu poderia editar o bloco no Chrome DevTools novamente. Presumivelmente, isso pode acontecer com outros personagens não-ascii também, não tentei descobrir isso.

davidreedernst
fonte