Assallamuallaikum Wr Wb..

im.png

Selamat pagi sahabat Blogponsel, berjumpa lagi dengan saya pada pagi hari ini. Di perjumpaan kali ini saya akan membahas tentang Mengenal Lebih Dalam Fungsi !important Di Css, baiklah mari kita langsung menuju ke topik pembahasan !

Pernahkah anda suatu ketika membongkar css milik orang lain dan menemukan kode !important di dalamnya ? Pasti pernah !!
Jika kalian pernah melakukannya kalian akan menemukan kode seperti ini !

Selector { background:#ff0000 !important;margin:2px;padding:3px; }

Kode yang berwarna merah itu yang disebut !important, lalu apa fungsinya ? Tenang saya akan jelaskan semampu saya, oke !!

Bagi seorang master css tentu sudah tidak asing lagi dengan !important, mereka pasti sudah paham untuk apa fungsinya !important di css. Tapi bagi seorang pemula di dunia css tentu akan bertanya-tanya apa itu !important dan apa fungsinya di css ? Mari kita pelajari bersama-sama !!


1. Pengertian

!important ialah suatu deklarasi yang mengatur penetapan nilai value pada css, jika diartikan dalam Bahasa Indonesia !important dapat diartikan "Penting" jadi bisa di simpulkan bahwa !important adalah nilai value yang penting.

Jika property tersebut memiliki deklarasi !important di belakang nilai value maka dapat di pastikan bahwa nilai value tersebut adalah mutlak atau tidak dapat di rubah. Hal itu disebabkan karena !important mendeklarasikan nilai value tersebut yang harus di baca oleh web browser.


2. Fungsinya

Fungsi dari !important adalah menetapkan nilai value dari suatu property sebagai nilai tetap, jika nilai value memiliki deklarasi !important di belakangnya maka nilai value tersebut yang akan di baca oleh browser meskipun di satu selector terdapat beberapa property yang sama dengan value berbeda.

!important juga berfungsi untuk mengatasi masalah bug css yang ada di IE (Internet Explore) karena tidak semua kode css bisa di baca oleh browser IE, untuk mengatasi masalah ini kita bisa melakukan cara di bawah ini !

Selector { background:#0000ff !important;background:#ff0000; }


Keterangan :

Pada kode di atas memiliki dua property sama dengan nilai value yang berbeda, pada nilai value pertama terdapat tambahan deklarasi !important di belakangnya sedangkan yang kedua tidak mendapat tambahan di belakangnya.

Artinya, jika pengunjung menggunakan browser selain IE maka kode yang bekerja adalah yang memiliki !important di belakangnya atau yang "background:#0000ff !important", tapi jika pengunjung menggunakan browser IE maka kode yang bekerja adalah yang tidak memiliki !important di belakangnya atau yang "background:#ff0000".

Mari kita bahas lebih dalam lagi tentang fungsi !important pada css agar kalian tidak bingung mengartikannya, anggap saja kita mau mengedit selector body di css !!

Di contoh pertama saya akan membuat tiga kode yang sama namun dengan nilai value yang berbeda, tentunya tanpa !important juga !

Body { background:#0000ff;background:#ff0000;background:#000000; }

Yang jadi pertanyaannya adalah kode mana yang akan bekerja di browser?


Jawabannya !

Kode yang berkerja adalah yang paling akhir atau yang saya kasih warna merah di atas, itu dikarenakan browser akan memakai kode yang terakhir jika terdapat property yang sama lebih dari satu..

Silahkan lihat gambar di bawah ini atau klik tautan berikut ini Preview !

body1.png

Bisa anda lihat kalau hasilnya adalah warna hitam padahal kode di atas memiliki tiga background yaitu biru, merah, dan hitam, itu disebabkan karena browser akan memakai kode yang paling akhir untuk di tampilkan atau seperti yang saya jelaskan di atas tadi !


Baca Juga = Pengertian Blog Dummy Dan Manfaatnya

Lalu di contoh kedua ini saya akan menambahkan deklarasi !important pada kode kedua yang memiliki background merah, contoh kodenya seperti ini !

Selector { background:#0000ff;background:#ff0000 !important;background:#000000; }

Kode di atas akan menghasilkan tampilan seperti gambar di bawah ini atau klik tautan berikut ini Preview !

body2.png


Pertanyaan :

Kenapa pada contoh kedua background yang di hasilkan adalah berwarna merah, sedangkan contoh pertama tadi menghasilkan background berwarna hitam ?


Jawaban :

Hal itu disebabkan karena saya telah menambahkan deklarasi !important pada kode yang kedua atau yang berwarna merah !

Coba anda baca kembali pengertian !important di atas tadi, saya menjelaskan bahwa !important dapat di artikan ke dalam Bahasa Indonesia sebagai "Penting". Dalam hal ini bisa dijelaskan seperti kita memberi perintah kepada browser untuk menggunakan kode yang kedua & mengabaikan kode yang pertama & ketiga.

Jadi intinya browser akan menggunakan kode yang terakhir jika kita tidak menambahkan deklarasi !important di dalam kode tersebut, namun jika kita menambahkan !important di salah satu kode maka browser akan menggunakan kode yang ada deklarasi !importantnya, karena kode tersebut akan di anggap penting oleh browser.

Di contoh ketiga ini saya akan menambahkan deklarasi !important di kode pertama & kedua sedangkan yang ketiga tidak saya tambahkan, kode manakah yang akan bekerja yang pertama atau kedua atau yang ketiga, mari kita cari tahu jawabannya !
Contoh kodenya seperti ini !

Selector { background:#0000ff !important;background:#ff0000 !important;background:#000000; }

Seperti yang kalian lihat kode di atas, di kode pertama & kedua terdapat !important di belakangnya sedangkan yang ketiga tidak ada. Kode di atas akan menghasilkan tampilan seperti gambar di bawah ini !

body2.png


Pertanyaan :

Kenapa bisa menghasilkan background warna merah, sedangkan kode yang pertama juga ada deklarasi !important'nya ?


Jawaban :

Jawabannya begini, kita kembali ke contoh pertama tadi !

Di contoh pertama tadi saya menjelaskan bahwa browser akan menggunakan kode yang terakhir jika terdapat property yang sama lebih dari satu, hal itu berlaku juga buat contoh yang ketiga ini !

Namun bedanya adalah browser akan menggunakan kode terakhir yang ada deklarasi !important nya, kalian bisa melihat kode berwarna biru di atas itu kode yang akan di tampilkan oleh browser.


Baca Juga = Kode Script Penerjemah Bahasa Website

Saya rasa penjelasan tentang Fungsi !important cukup sampai di sini, sekarang saya akan membahas sekalian tata cara penulisan & penerapan kode !important yang benar.


3. Tata Cara

Ketika kita mau menambahkan !important di dalam kode css kita harus memperhatikan beberapa faktor, yaitu !
- Cara Penulisan.
- Penentuan kode yang tepat.


A. Cara Penulisan

Sebelum kita menambahkan kode !important di dalam kode css, kita harus mengetahui posisi yang benar dalam menambahkan deklarasi !important.

Posisi yang benar adalah setelah nilai value dari property tersebut, contohnya !

Selector { background:#0000ff !important; }

Seperti yang kalian lihat kode di atas bahwa !important (warna merah) berada setelah nilai value (warna biru) dari property background (warna hijau), jika posisinya di balik menjadi !important sebelum nilai value kemungkinan kode !important tidak bisa bekerja dengan baik & ini posisi yang salah. Posisi yang benar adalah setelah nilai value.


B. Penentuan Kode Yang Tepat

Hal ini yang agak sulit dilakukan, karena kita tidak bisa sembarangan menambahkan deklarasi !important ke dalam kode css. Kita harus mencari kode yang tepat untuk ditambahkan !important di dalamnya, seperti yang telah kalian baca pengertian !important di atas tadi bahwa !important berarti "Penting" jadi kita tidak bisa asal menempatkannya.

Saran saya saat kalian mau menambahkan !important di dalam kode css anda.

Carilah kode yang menurut anda itu penting, jika itu tidak penting maka tidak usah ditambahkan !important di dalamnya.. Oke !!

Tidak lupa saya akan menyediakan tools untuk bahan uji coba anda, agar kalian bisa lebih cepat memahami artikel ini. Cara penggunaannya juga mudah, anda tinggal memasukkan warna background dan kode !important setelah kode warna'nya, lalu coba juga tanpa !important setelah kode warnanya, agar kalian dapat membedakannya.

Kode warna bisa menggunakan kode html atau menggunakan bahasa inggris contoh red, green, white.

Background 1 :

Background 2 :

Background 3 :

Silahkan melakukan eksperimen sesuka anda, semoga dengan tools ini kalian dapat lebih mudah memahami artikel ini.

Demikian yang dapat saya sampaikan tentang Mengenal Lebih Dalam Fungsi !important Di Css semoga apa yang saya share ini bisa bermanfaat buat kalian semua & kalian dapat memahaminya dengan mudah, saya minta maaf jika artikel ini sulit di mengerti dan jika kalian belum mengerti bisa bertanya di kolom komentar.
Terima kasih...

Wassallamuallaikum Wr Wb...