Apa arti penting dalam CSS?

409

Apa yang dimaksud !importantdengan CSS?

Apakah tersedia di CSS 2? CSS 3?

Di mana itu didukung? Semua browser modern?

css Itay Moav -Malimovka
sumber
2
w3.org/TR/CSS2/cascade.html#important-rules
j08691
17
... sesuatu yang harus dihindari sedapat mungkin.
Scott
2
kemungkinan duplikat dari Bagaimana Anda membaca! Penting dalam CSS? , Apa implikasi dari penggunaan "! Penting" di CSS? dan lihat juga: kapan harus menggunakan properti penting di css? , Ketika digunakan untuk menyimpan hari (ketika bekerja dengan CSS) “penting!”
Cody Gray

Jawaban:

400

Artinya, pada dasarnya, apa yang dikatakannya; bahwa 'ini penting, abaikan aturan berikutnya, dan masalah kekhususan yang biasa, terapkan aturan ini !'

Dalam penggunaan normal aturan yang didefinisikan dalam stylesheet eksternal ditolak oleh gaya yang ditentukan dalam headdokumen, yang, pada gilirannya, ditolak oleh gaya in-line di dalam elemen itu sendiri (dengan asumsi spesifisitas pemilih yang sama). Mendefinisikan aturan dengan !important'atribut' (?) Membuang kekhawatiran normal sehubungan dengan aturan 'nanti' mengesampingkan yang 'sebelumnya'.

Juga, biasanya, aturan yang lebih spesifik akan menggantikan aturan yang kurang spesifik. Begitu:

a {
    /* css */
}

Biasanya ditolak oleh:

body div #elementID ul li a {
    /* css */
}

Karena pemilih yang terakhir lebih spesifik (dan tidak, biasanya, menjadi masalah di mana pemilih yang lebih spesifik ditemukan (di dalam headatau stylesheet eksternal), ia akan tetap menimpa pemilih yang kurang spesifik (atribut gaya in-line akan selalu menimpa pemilih 'lebih-', atau 'kurang-', karena selalu lebih spesifik.

Namun, jika Anda menambahkan !importantke deklarasi CSS pemilih yang kurang spesifik, itu akan memiliki prioritas.

Menggunakan !importantmemiliki tujuannya (meskipun saya berjuang untuk memikirkannya), tetapi ini seperti menggunakan ledakan nuklir untuk menghentikan rubah membunuh ayam Anda; ya, rubah akan dibunuh, tetapi begitu juga dengan ayam. Dan lingkungannya.

Itu juga menjadikan debugging CSS Anda mimpi buruk (dari pengalaman pribadi, empiris, pengalaman).

David mengatakan mengembalikan Monica
sumber
253
Ini juga membingungkan bagi banyak pengembang karena dalam banyak bahasa pemrograman awalan! artinya tidak .
rustyx
19
Satu tujuan! Penting adalah dalam skrip GreaseMonkey di mana Anda sengaja mengesampingkan CSS orang lain yang kemungkinan lebih spesifik daripada milik Anda.
Noumenon
1
Secara resmi W3 menyebutnya sebagai "aturan".
JD Smith
5
setidaknya itu tidak sarkastik dan mengatakan important!(penting TIDAK)
user3553260
2
Anda menulis: 'Dalam penggunaan normal aturan yang ditentukan dalam stylesheet eksternal ditolak oleh gaya yang ditentukan di kepala dokumen'. Ini salah.
jlguenego
130

Aturan penting adalah cara untuk membuat kaskade CSS Anda, tetapi juga memiliki aturan yang menurut Anda paling penting selalu diterapkan. Aturan yang memiliki properti! Penting akan selalu diterapkan di mana pun aturan itu muncul dalam dokumen CSS.

Jadi, jika Anda memiliki yang berikut ini:

.class {
   color:red !important;
}
.outerClass .class {
   color:blue;
}

aturan dengan yang penting akan menjadi yang diterapkan (tidak termasuk spesifisitas )

Saya percaya !importantmuncul di CSS1 sehingga setiap browser mendukungnya (IE4 ke IE6 dengan implementasi parsial, IE7 + penuh)

Juga, itu adalah sesuatu yang tidak ingin Anda gunakan cukup sering, karena jika Anda bekerja dengan orang lain, Anda dapat menimpa properti lainnya.

nicosantangelo
sumber
1
IE4 +, sebenarnya, dengan bug, hingga dan termasuk 6.
BoltClock
15
Kebingungan terjadi seperti !simbol untuk TIDAK dalam beberapa bahasa tetapi lebih jelas sekarang.
Si8
2
Saya sangat senang Anda memasukkan sintaks untuk digunakan !important. CSS cukup berbeda dari bahasa lain sehingga mudah melupakan cara menggunakan hal-hal tertentu.
blainarmstrong
3
@ Si8 - Ya, karena kebingungan itu, saya selalu berpikir "mereka" harus mendefinisikannya sebagai important!, atau mungkin IMPORTANT!, daripada !important. Saya bertanya-tanya apakah ada orang (yang mungkin membaca ini) yang tahu mengapa mereka mendefinisikannya dengan tanda baca di depan? Jelas, sudah terlambat untuk mengubahnya sekarang.
Kevin Fegan
22

!important adalah bagian dari CSS1.

Browser yang mendukungnya: IE5.5 +, Firefox 1+, Safari 3+, Chrome 1+.

Artinya, kira-kira seperti:

Gunakan saya, jika tidak ada yang penting di sekitar!

Aku tidak bisa mengatakannya lebih baik.

Topan
sumber
5
!importanttidak terbatas hanya pada Safari 3+; itu telah mendukungnya sejak awal seperti semua browser non-IE lainnya. IE memahaminya dari versi 4 dan seterusnya, tetapi hanya mendukungnya bebas bug mulai dari versi 7.
BoltClock
12

Ini digunakan untuk mempengaruhi penyortiran dalam kaskade CSS ketika penyortiran menurut asal dilakukan. Ini tidak ada hubungannya dengan kekhususan seperti yang dinyatakan di sini dalam jawaban lain.

Berikut adalah prioritas dari terendah ke tertinggi:

  1. gaya browser
  2. deklarasi style sheet pengguna (tanpa! penting)
  3. deklarasi style sheet penulis (tanpa! penting)
  4. ! Lembar gaya penulis penting
  5. ! Lembar gaya pengguna yang penting

Setelah itu kekhususan terjadi karena aturan masih memiliki jari di pai.

Referensi:

Fabian Barney
sumber
Seperti yang ditunjukkan oleh @ fabian-barney !importantadalah pengubah untuk pengembang pesanan cascading.mozilla.org/en-US/docs/Web/CSS/Cascade (lihat tabel untuk referensi).
Doomjunky