Home | a plain old wp coder | Web Design and Wordpress Custom

CSS Conflict dan Solusi

Saat kita mengaplikasinya 2 atau lebih rule css pada teks yg sama, maka bisa saja properti properti css tersebut mengalami conflict dan menghasilkan layout yg tidak diharapkan. Inilah CSS conflict, dan sering kali kita tidak menyadarinya sampai keadaan sudah terlambat dan mengharuskan kita mengubah kode css halaman web agar tampilan visual sesuai dgn apa yg kita inginkan

Nah, sebagai catatan, render browser mentaati aturan css sebagai berikut Bila seandainya ada dua rules yg diaplikasikan pada teks yg sama. Browser akan memproses kedua rules kecuali ada attribute spesifik yg mengalami conflik.

Sebagai contoh, salah satu rule menyatakan kalau warna teks pada class “contoh” itu blue atau biru. Dan aturan lain menyatakan kalau warna teks itu merah

<h1><span class=”Blue”>This paragraph is controlled by the .Blue custom style and h1 HTML tag style.<span class=”Red”>Except this sentence is controlled by the .Red style.</span> Now we’re back to the .Blue style.</span></h1>

Bila kedua warna itu diaplikasikan, maka akan terjadi conflick. Dan untuk menjembatasi bentrokan ini, browser akan mengaplikasikan aturan berikut

• Browser akan memilih aturan terdekat teks
• Bila elemen teks memiliki stye sheet eksternal dan inline style juga mempengaruhinya. Maka inline style yg akan dipilih browser
• Bila konflik terjadi, atribute pada custom css (yg diaplikasikan melalui class attribute) akan menggilas (istilahnya override) attribute yg menggunakan HTML tag style

Pada contoh diatas, style h1 mungkin bisa dispesifikasikan untuk seluruh jenis font, size, color bagi seluruh paragrap h1. Akan tetapi, custom css rule pd class .Blue yg juga diaplikasikan pada paragrap tsb akan mengoverride setingan warna sebelumnya. Sementara itu, custom rule class .Red akan menggilas class .Blue.

Understanding CSS Conflict

Iya, mamahami bagaimana konflik antar rule CSS yg kita buat itu penting. Pengetahuan ini memudahkan kita mendebug masalah bila seandainya layout web yg kita buat ternyata berbeda dgn apa yg kita desain sebelumnya. Seiring pengalaman, kita bisa mengetahui aau minimalnya menebak bila terjadi error pd desain kita.

Tags: CSS, Web Design