1 Mei 2013

Kegunaan Nilai !important pada Properti CSS

Sering kali kita menjumpai penulisan CSS secara inline di sebuah halaman web. Apalagi ketika kamu mendapat tugas untuk mengubah sebuah style dari beberapa elemen yang ditulis inline.

Prioritas inline adalah yang paling tinggi jika dibandingkan dengan penulisan CSS secara internal maupun eksternal. Hal itu menjadi dilema yang tak kunjung habisnya saat kita hanya mengubah style berdasarkan selektor dengan eksternal CSS.Bagaimana menyelesaikan kasus ini?

Solusi

Cara menyelesaikan kasus ini adalah dengan memahami nilai !important dari properti selektor yang ditulis inline. Berikut adalah kode dan hasil dari penggunaan !important. Amati dan pahami, kamu akan tahu bagaimana !important bekerja.

html-important.html

css-important.css

Hasil render menggunakan !important

Kesimpulan

Browser melakukan render dengan prioritas CSS penulisan inline di atas CSS penulisan internal dan eksternal. Namun, dengan adanya !important, browser mengubah prioritasnya.

14 komentar:

  1. pertama berkunjung, pengen bisa buat template sendiri mohon bantuannya ya pasangan baru :D

    BalasHapus
  2. Balasan
    1. Mangga kali maksudnya :D

      Hapus
    2. itu kan emang perpaduan jawa barat dan jawa tengah LOL

      Hapus
    3. subahanallah, pasangan yang harmonis bersatu dalam sebuah blog :D

      Hapus
  3. templatenya cool.. enak sekali di pandang...

    soal kaya ginian, aku benar-benar ga nyambung..padahal juga sangat penting di pelajari bagi orang yang punya blog..

    BalasHapus
  4. nyimak..., agak2 oon sy klo css *smile

    BalasHapus
  5. Pada intinya hirarki prioritas CSS untuk browser tuh:
    1. !important CSS
    2. Inline CSS
    3. Target khusus dalam CSS (semakin detil target semakin tinggi prioritasnya)
    4. Target Global dalam CSS

    Sebenarnya sebuah Styling bisa mendapatkan prioritas lebih tinggi daripada !important, yakni dengan menggunakan javascript. Namun karena langkanya kesempatan untuk menggunakan metode tersebut, maka aku memutuskan untuk tidak membahasnya lebih jauh lagi.

    Kuharap info tersebut dapat membantu.

    BalasHapus
    Balasan
    1. makasih :D

      dan karena itu aku sekarang mulai belajar JavaScript, walaupun dimulai dengan jQuery terlebih dahulu :D

      Hapus

Populer Terbaru Komentar

Entri Terbaru

Komentar Terbaru

Creative Commons License
All contents by Iskael is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at Iskael.
Permissions beyond the scope of this license may be available at Iskael.
© 2013 Belajar Ngeblog bersama Iskael. All Right Reserved. Powered by Blogger. Iskael Template by Iskael. Submitted on TopBlogIndonesia