Featured Post

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.

Mungkin Kamu Juga Suka...

Comments

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

    ReplyDelete
  2. Replies
    1. Mangga kali maksudnya :D

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

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

      Delete
    4. wekekek ... begitulah :D

      Delete
  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..

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

    ReplyDelete
  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.

    ReplyDelete
    Replies
    1. makasih :D

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

      Delete

Post a Comment