Sudah menjadi satu kebiasaan apabila anda ingin nyahpijat (debug) elemen atau isu yang melibatkan CSS, maka Chrome Devtools adalah jawapannya. Rutin ini dilakukan berulang-ulang sehinggalah anda menjadi buntu apabila menerima satu masalah yang pelik melibatkan CSS. Ianya tidak lain dan tidak bukan adalah berkenaan ghost CSS.
Apa itu Ghost CSS
Ghost CSS ini ialah isu berkaitan dengan elemen CSS dimana anda membuat susun atur rekaan UI, tetapi hasilnya itu tidak seperti yang dimahukan anda. Lebih menjengkelkan, anda tidak pasti apa masalahnya kerana anda tidak nampak secara visual elemen yang menjadi punca permasalahan tersebut.
Banyak faktor yang mempengaruhinya. Antaranya susun atur elemen. Sebab itulah paparan antaramuka anda kadang-kala terlalu ketepi, scrollbar tak keluar, ada whitespace dan macam-macam lagi. Puas ditenung dan dibuat dianogsis dengan Devtools, tidak pula menjumpai jawapannya. Jadi masalah-masalah seperti ini sememangnya menyakitkan hati.
Masalah saya
Dalam isu saya, saya hadapi masalah dengan whitespace di sebelah kanan UI untuk paparan telefon bimbit sahaja. Jika diimbas dengan mata kasar, tidak pula nampak dimana silapnya.
Walaupun tau isu overflow, kita nak juga tahu elemen mana yang menjadi punca dan menganggu susunan UI. Kalau terpaksa refactor, kita akan buat. Kalau hal kecil, kita ubah sedikit sahaja.
Jadi bagaimana cara untuk siasat?
Mudah sahaja. Kita perlu nyahpejat (debug) CSS secara manual. Caranya ialah dengan memasukkan kod berikut dalam fail CSS.
/* Debug Ghost CSS*/
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}Ini adalah cara untuk anda debug kod secara manual menggunakan CSS. Kebiasaannya saya akan menggunakan cara ini sebab bukan selalu saya nak spotcheck elemen CSS.
Tapi kalau anda nak jadikan aktiviti ini sebagai satu tabiat, anda boleh gunakan kod Javascript dibawah dan jadikannya sebagai bookmark browser anda.
javascript: ( function () { const xray = document.createElement('style'); xray.innerHTML = "*{background:#000!important;color:#0f0!important;outline:solid #f00 1px!important;}"; const xraysInPage = [...document.body.getElementsByTagName("style")].filter(style => style.innerHTML === xray.innerHTML); if(xraysInPage.length > 0) { xraysInPage.forEach(style => document.body.removeChild(style)); } else { document.body.appendChild(xray) } } )();Caranya ialah dengan highlight code Javascript ini, kemudian drag sahaja kod ini ke ruangan bookmark browser anda. Selepas itu anda boleh cuba untuk klik bookmark tadi. Anda akan dapati laman web yang anda buka akan bertukar warna.
Menerusi kaedah ini, anda dapat mendiagnosis elemen dengan lebih mudah kerana setiap bahagian akan diwarnakan. Sempadan elemen diwarnakan dengan warna merah, latar belakang warna hitam dan tulisan berwarna hijau. Jadi anda akan nampak susunan elemen dibahagian mana yang bermasalah.
Bagi kes saya, masalah berpunca daripada seksyen hero saya sahaja. Memandangkan ini masalah kecil, saya hanya tambahkan overflow-x: hidden; pada HTML dan body tanpa usik elemen hero. Dimasa akan datang, mungkin ada benda lain yang hendak diperbetulkan, cara ini mungkin boleh membantu.
Kesimpulan
Ini adalah cara mudah yang menjimatkan masa jika anda berkerja dengan UI tetapi UI itu degil tak dengar cakap. Adakalanya bila dah menulis beribu kod, kita penat dan terleka sehingga terbuat silap. Ini salah satu cara untuk debug dan kenalpasti masalahnya.
Baca juga: Beza camel, snake, kebab dan pascal case dalam penulisan kod
Terima kasih kerana sudi membaca. Jika ada trick lain lagi, saya pasti akan kongsikannya di masa akan datang.
Nota: Kalau anda tambah kod tersebut di CSS, dah sudah debug, jangan lupa buang kod tu.
