O que significam as propriedades de estilo cruzado nos devtools do Google Chrome?

274

Ao inspecionar um elemento usando as ferramentas do Chrome, na guia Elementos, a barra 'Estilos' do lado direito mostra as propriedades CSS correspondentes. Às vezes, algumas dessas propriedades são atingidas. O que essas propriedades significam?

rohitmishra
fonte
4
Eu antecipei esta pergunta. +1 para isso.
Rajesh Paul

Respostas:

314

Quando uma propriedade CSS aparece como riscada, isso significa que o estilo riscado foi aplicado, mas substituído por um seletor mais específico, uma regra mais local ou por uma propriedade posterior dentro da mesma regra.

(Casos especiais: um estilo também será mostrado como detalhado se um estilo existir em uma regra de correspondência, mas for comentado ou se você o tiver desativado manualmente, desmarcando-o nas ferramentas de desenvolvedor do Chrome. Ele também será exibido como cruzado mas com um ícone de erro, se o estilo tiver um erro de sintaxe.)

Por exemplo, se uma cor de plano de fundo foi aplicada a todos os divs, mas uma cor de plano de fundo diferente foi aplicada a divs com um determinado ID, a primeira cor será exibida, mas será riscada, conforme a segunda cor a substituiu (na propriedade lista para o divcom esse ID).

Jacob Mattison
fonte
18
Em uma nota lateral, as propriedades riscadas podem ser aquelas "canceladas" pelas propriedades com o mesmo nome posteriormente na mesma regra de CSS (conforme exigido pela especificação de CSS).
Alexander Pavlov
57
@ JacobM: Como saber qual propriedade está substituindo a propriedade atingida.
ArunRaj
51
@ArunRaj - Não há uma maneira fácil de saber qual propriedade (ou propriedades) está substituindo a propriedade riscada. Uma opção é procurar na guia de estilos "computados" para encontrar o mesmo tipo de propriedade e, se você expandir, verá a fonte das várias regras que estão tentando aplicar essa propriedade (incluindo a que está realmente ativa) . Portanto, se você vir que "font-size: 11px" está riscado, procure nas propriedades calculadas por "font-size" e deverá ver todos os locais em que o tamanho da fonte é aplicado, incluindo o realmente ativo. Espero que isto ajude.
27630 Jacob Mattison
7
Agora existe uma caixa de filtro na parte superior da guia Estilos. Se você está se perguntando o que substituiu border-color, basta digitar border-colorno filtro. Ele mostrará todas as regras que contêm essa propriedade, com a propriedade destacada em amarelo. Esse recurso também está disponível no Firefox.
Joeytwiddle
4
Também gostaria de acrescentar: Se um estilo é destacado, mas já está no topo, você pode ter um estilo CSS em algum lugar !importantque o substitua.
Dominic K
12

Em uma nota lateral. Se você estiver usando as consultas @media (como @media screen (max-width:500px)), preste atenção especial ao aplicar a consulta @media DEPOIS de concluir com estilos normais. Porque a consulta @media será riscada (mesmo que seja mais específica) se seguida por css que manipula os mesmos elementos. Exemplo:

@media (max-width:750px){
#buy-box {width: 300px;}
}

#buy-box{
width:500px;
}

** width will be 500px and 300px will be crossed out in Developer Tools. **

#buy-box{
width:500px;
}

@media (max-width:750px){
#buy-box {width: 300px;}
}

** width will be 300px and 500px will be crossed out **
sanjihan
fonte
e se as consultas de mídia estiverem em um arquivo css diferente?
Carlos Hernández Gil
11

Além da resposta acima, também quero destacar um caso de propriedade riscada que realmente me surpreendeu.

Se você estiver adicionando uma imagem de plano de fundo a uma div:

<div class = "myBackground">

</div>

Você deseja dimensionar a imagem para caber nas dimensões da div, para que esta seja sua definição de classe normal.

.myBackground {

 height:100px;
 width:100px;
 background: url("/img/bck/myImage.jpg") no-repeat; 
 background-size: contain;

}

mas se você trocar o pedido como: -

.myBackground {
 height:100px;
 width:100px;
 background-size: contain;  //before the background
 background: url("/img/bck/myImage.jpg") no-repeat; 
}

então, no chrome, você verá o tamanho do plano de fundo como riscado. Não sei por que isso acontece, mas sim, você não quer mexer com isso.

Rishul Matta
fonte
8

Se você deseja aplicar o estilo mesmo depois de receber uma indicação através da marcação, você pode usá-lo "!important"para aplicá-lo. Pode não ser a solução certa, mas resolve o problema.

Nanda
fonte
Eu tive problemas para dimensionar um GoogleMap para celulares através da mídia. Eu tenho uma configuração básica para navegadores (sem mídia), seguida por várias mídias com tamanhos menores, o que não funcionou (o estilo correto para dispositivos móveis é exibido no GC, mas com tachado). ! Depois eu adicionei importante, ele funciona, mas eu não entendo a "lógica" por trás dele ...
FredyWenger
-5

Há alguns casos em que você copia e cola o código CSS em algum lugar e ele quebra o formato para que o Chrome mostre o aviso amarelo. Você deve tentar reformatar o código CSS novamente e deve estar correto.

hien711
fonte
2
A pergunta não fez nada sobre "avisos amarelos". Esta resposta deve ser um comentário na melhor das hipóteses.
19617 Simon