Observe, não o painel Estilos (eu sei o que acinzentado significa nesse contexto - não aplicado), mas o próximo painel, o painel de propriedades Computadas.
O que significa quando uma propriedade Computed é mostrada em cinza?
Exemplo:
css
google-chrome
google-chrome-devtools
AmbroseChapel
fonte
fonte
Respostas:
NB: Esta resposta não tem evidências sólidas, é baseada em minhas observações ao longo do tempo.
As propriedades calculadas em cinza não são padrão nem herdadas. Isso ocorre apenas em propriedades que não foram definidas para o elemento, mas calculadas a partir de seus filhos ou pai com base na renderização do layout do tempo de execução.
Veja esta página simples como exemplo,
displayé padrão efont-sizeé herdada:<style> div { font-size: 13px; } </style> <div> <p>asdf</p> </div>Neste exemplo específico,
heighté calculado a partir<p>do nó filho - texto (tamanho da fonte mais altura da linha),widthé calculado a partir da<div>largura de seu pai , que também é calculada a partir de seu pai<body>.EDIT: Bem, eu pensei de novo, aqui está minha resposta baseada em opinião . Eu realmente deveria dar uma olhada no código-fonte do Chromium mais tarde: D
Ao expandir essas setas, você pode ver qual regra real é aplicada ao elemento, entre todas aquelas definidas contra ele (diretamente ou herdadas, pelo desenvolvedor ou navegador):
Aqui você pode rastrear cada definição, mesmo incluindo as regras integradas do navegador, e verificar com o mecanismo CSS em cascata (substituição).
Portanto, para aqueles elementos que não têm definição CSS (nenhum definido diretamente, nenhum herdado, nenhum navegador embutido), você não tem nenhuma fonte para rastrear. E os valores das propriedades são totalmente calculados em tempo de execução.
Se você marcar Mostrar tudo , mais propriedades acinzentadas serão mostradas. Eles também não estão definidos em lugar nenhum. Mas, ao contrário das capturas de tela anteriores, eles não são calculados em tempo de execução - são os valores padrão das especificações CSS.
fonte
run-time calculateduma vez que as propriedades de cinza são geralmente 'altura' e 'largura', que se você pensar sobre isso, são valores que dependem dinamicamente dos filhos de um elemento (por exemplo, quantidade de texto e tamanho da fonte de o texto contido no elemento ou a largura do pai quando o elemento tem largura: 100%)widthestilo, por exemplo.