Bir öğeyi Chrome'un cihazlarını kullanarak incelerken, öğeler sekmesinde, sağ taraftaki 'Stiller' çubuğu ilgili CSS özelliklerini gösterir. Bazen, bu özelliklerin bazıları çarpılır. Bu özellikler ne anlama geliyor?
Yanıtlar:
Bir CSS özelliği çarpıtılmış olarak görüntülendiğinde, üstü çizili stilin uygulandığı, ancak daha spesifik bir seçici, daha yerel bir kural veya aynı kuraldaki daha sonraki bir özellik tarafından geçersiz kılındığı anlamına gelir.
(Özel durumlar: Bir stil, eşleşen bir kuralda bir stil varsa ancak yorum yapılırsa veya Chrome geliştirici araçlarında işaretini kaldırarak manuel olarak devre dışı bıraktıysanız da çarpıtılmış olarak gösterilir. ancak stilin sözdizimi hatası varsa bir hata simgesiyle.)
Örneğin, tüm divs'ye bir arka plan rengi uygulanmışsa , ancak divbelirli bir kimliğe sahip farklı bir arka plan rengi uygulanmışsa , ilk renk görünecek, ancak ikinci renk onun yerini aldığı için çarpılacaktır (özellikte) için divbu kimliğe sahip liste ).
border-coloryazmanız border-coloryeterlidir. Özelliği sarı renkle vurgulanmış olarak, bu özelliği içeren tüm kuralları gösterir. Bu özellik Firefox'ta da mevcuttur.
!importantüzerine yazılan bir yerde bir CSS stiliniz olabilir .
Yan notta. @Media sorguları (örneğin @media screen (max-width:500px) kullanıyorsanız , normal stillerle işiniz bittikten SONRA @media sorgusunun uygulanmasına özellikle dikkat edin . Çünkü @media sorgusu (daha spesifik olsa bile), aynı öğeleri işleyen css izliyorsa çarpılacaktır. Misal:
@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 **Yukarıdaki cevaba ek olarak, beni gerçekten şaşırtan bir grev özelliği vurgulamak istiyorum.
Bir div öğesine arka plan resmi ekliyorsanız:
<div class = "myBackground">
</div>Görüntüyü div'ın boyutlarına sığacak şekilde ölçeklendirmek istiyorsunuz, böylece bu normal sınıf tanımınız olacaktır.
.myBackground {
height:100px;
width:100px;
background: url("/img/bck/myImage.jpg") no-repeat;
background-size: contain;
}ancak siparişi şu şekilde değiştirirseniz: -
.myBackground {
height:100px;
width:100px;
background-size: contain; //before the background
background: url("/img/bck/myImage.jpg") no-repeat;
}chrome'da arka plan boyutunu dikkat çekici şekilde görürsünüz . Bunun neden olduğundan emin değilim, ama evet onunla uğraşmak istemiyorsun.
Stili çarpma göstergesi aldıktan sonra bile uygulamak istiyorsanız, stili "!important"uygulamak için kullanabilirsiniz . Doğru bir çözüm olmayabilir, ancak sorunu çözün.
CSS kodunu bir yere kopyalayıp yapıştırdığınızda ve Chrome'un sarı uyarıyı göstermesi için biçimi ihlal ettiği bazı durumlar vardır. CSS kodunu yeniden biçimlendirmeyi denemelisiniz ve bu iyi olur.