Apa arti dari properti gaya silang di devtools Google Chrome?

Saat memeriksa elemen menggunakan devtools Chrome, di tab elemen, bilah 'Gaya' di sebelah kanan menunjukkan properti CSS yang sesuai. Kadang-kadang, beberapa dari sifat-sifat ini disentuh. Apa arti properti ini?

Ketika properti CSS ditampilkan sebagai menerobos, itu berarti bahwa gaya dicoret diterapkan, tetapi kemudian ditimpa oleh pemilih yang lebih spesifik, aturan yang lebih lokal, atau oleh properti yang lebih baru dalam aturan yang sama.

(Kasus khusus: gaya juga akan ditampilkan sebagai menerobos jika gaya ada dalam aturan yang cocok tetapi dikomentari, atau jika Anda telah menonaktifkannya secara manual dengan menghapus centang di dalam alat pengembang Chrome. Itu juga akan ditampilkan sebagai dilintasi keluar, tetapi dengan ikon kesalahan, jika gaya memiliki kesalahan sintaks.)

Misalnya, jika warna latar belakang diterapkan ke semua divs, tetapi warna latar belakang yang berbeda diterapkan untuk divs dengan id tertentu, warna pertama akan muncul tetapi akan dicoret, karena warna kedua telah menggantikannya (di properti daftar divdengan id itu).

Di samping catatan. Jika Anda menggunakan @media queries (seperti @media screen (max-width:500px)) berikan perhatian khusus untuk menerapkan @media query SETELAH Anda selesai dengan gaya normal. Karena @media query akan dicoret (meskipun lebih spesifik) jika diikuti oleh css yang memanipulasi elemen yang sama. Contoh:

@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 **

Selain jawaban di atas saya juga ingin menyoroti kasus properti mogok yang benar-benar mengejutkan saya.

Jika Anda menambahkan gambar latar belakang ke div:

<div class = "myBackground">

</div>

Anda ingin skala gambar agar sesuai dengan dimensi div jadi ini akan menjadi definisi kelas normal Anda.

.myBackground {

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

}

tetapi jika Anda menukar urutan sebagai: -

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

kemudian di chrome Anda akan melihat ukuran latar belakang seperti dicoret. Saya tidak yakin mengapa ini, tapi ya Anda tidak ingin mengacaukannya.

Jika Anda ingin menerapkan gaya bahkan setelah mendapatkan indikasi melanda, Anda dapat menggunakan "!important"untuk menegakkan gaya. Ini mungkin bukan solusi yang tepat tetapi menyelesaikan masalah.

Ada beberapa kasus ketika Anda menyalin dan menempelkan kode CSS di suatu tempat dan itu memecah format sehingga Chrome menunjukkan peringatan kuning. Anda harus mencoba memformat ulang kode CSS dan harus baik-baik saja.