Fungsi dan Pengertian !Important Pada CSS

Dalam beberapa postingan saya, saya pernah memasukkan kode !Important pada CSS. Lantas banyak yang bertanya apa fungsinya. Ya, sesuai namanya itu menunjukkan kepentingan suatu css (important dalam bahasa inggris, penting dalam bahasa Indonesia). Banyak blogger menggunakannya untuk mengakali agar blog mereka baik di semua browser bahkan di browser-browser lawas seperti IE 6 dan versi-versi sebelumnya dengan memadukan width, max-width, min-width dan tingakat kepentingan dengan !important.

Sekarang saya akan mencoba mengenalkan ini dengan mudah dan semoga Anda bisa memahaminya. Kita akan mengambil contoh pada penggunaan kode selective yakni pemasangan widget di halaman tertentu (baca keseluruhan kode di : penampilan widget di halaman tertentu). Misalnya

Studi Kasus
#perintah 1 - Kita menggunakan kode selective tidak menampilkan sidebar blog di selain homepage. Artinya setiap memasuki halaman postingan atau archive page (pokoknya yang selain homepage), otomatis sidebar tersebut akan hilang.
#perintah 2 -  Lalu, kita menginginkan ada sidebar pada satu alamat postingan tertentu dan kita menyisipkan kode selective untuk menampilkan sidebar pada postingan tertentu. Misal postingan tersebut berlamatkan di:
http://www.masdoyok.co.cc/2010/06/fasilitas-editor-video-bari-di-youtube.html


Masalahnya?
Disini ada dua kode css yang berlawanan. Pertama kode css memerintahkan agar sidebar tidak  ditampilkan di selain homepage. Artinya pada halaman postingan dan halaman label sidebar tidak ditampilkan. Sedangkan perintah kedua adalah menampilkan sidebar pada halaman postingan tertentu saja.

- Ketika browser membuka homepage, maka tidak masalah karena itu hanya melibatkan perintah 1. Sidebar akan ditampilkan.
- Ketika browser membuka archivepage, maka tidak masalah karena itu hanya melibatkan perintah 1. Sidebar tidak ditampilkan karena archive page termasuk 'selain homepage'
- Ketika browser membuka alamat postingan lain secara umum, maka tidak masalah karena itu hanya melibatkan perintah 1, dan sidebar tidak akan ditampilkan karena alamat postingan termasuk 'selain homepage'
- Namun ketika browser membuka alamat postingan tertentu berikut: http://www.masdoyok.co.cc/2010/06/fasilitas-editor-video-bari-di-youtube.html, maka browser akan menemukan dua perintah yakni perintah 1 dan perintah 2. Alamat tersebut termasuk ke dalam perintah pertama, karena termasuk 'selain homepage' dan juga termasuk ke perintah kedua yang memang dikhususkan untuk postingan tersebut.

Nah, disinilah kode kepentingan !important akan berguna. Ketika ada dua kode yang berbenturan, kita menggunakan tambahan !important pada CSS.

Mana Yang Menang?
Di atas adalah contoh penggunaan nyata. Sekarang kita akan mencoba untuk menggunakannya pada hal yang lebih sederhana. Misalkan ode kode seperti ini.

#main-wrapper {

width: 700px;

width: 900px;

}

Kode tersebut tentu aneh karena memiliki dua lebar. Tapi ini hanya sebagai contoh saja. Jika suatu ketika Anda tanpa sengaja menyisipkan dua kode lebar seperti di atas, maka yang menang adalah perintah yang palign bawah. Artinya browser akan menampilan main-wrapper Anda selebar 900 px dan bukan 700 px. Jika kita bubuhkan !important menjadi seperti berikut ini:

#main-wrapper {

width: 700px !important;

width: 900px;

}

Pada kode di atas ada dua kode lagi yang sama. Jika tanpa !important maka kode yang bawah yang akan menang, namun ketika Anda menyisipkan kode !important maka yang diberi !important lah yang dianggap lebih penting dan dibaca oleh browser. Semoga sedikit pendalaman soal css ini bermanfaat untuk Anda dan menjawab beberapa blogger yang setia mangkal disini. Selamat siang... saya akan datang lagi dengan post lain yang takkalah menarik....