! Memaksakan Perubahan di Cascade
Salah satu cara terbaik untuk mempelajari cara mengkodekan situs web adalah dengan melihat kode sumber dari situs lain. Praktik ini adalah berapa banyak profesional web yang mempelajari kerajinan mereka, terutama pada hari-hari sebelum ada begitu banyak pilihan untuk kursus desain web , buku , dan situs pelatihan online.
Jika Anda mencoba praktik ini dan melihat style sheet cascading (CSS), satu hal yang mungkin Anda lihat dalam kode itu adalah baris yang mengatakan! Penting.
Apa artinya itu dan, sama pentingnya, bagaimana Anda menggunakan deklarasi itu dengan benar di lembar gaya Anda?
The Cascade of CSS
Pertama-tama, penting untuk memahami bahwa style sheet cascading memang riam , yang berarti mereka ditempatkan dalam urutan tertentu. Secara umum, ini berarti bahwa gaya diterapkan dalam urutan yang mereka baca oleh browser. Gaya pertama diterapkan dan kemudian yang kedua dan seterusnya.
Akibatnya, jika gaya muncul di bagian atas lembar gaya dan kemudian diubah lebih rendah ke bawah dalam dokumen, contoh kedua dari gaya itu adalah yang diterapkan dalam instance berikutnya, bukan yang pertama. Pada dasarnya, jika dua gaya mengatakan hal yang sama (yang berarti mereka memiliki tingkat kekhususan yang sama), yang terakhir yang terdaftar akan digunakan.
Sebagai contoh, mari kita bayangkan bahwa gaya-gaya berikut ini terdapat dalam style sheet. Teks paragraf akan berwarna hitam, meskipun properti gaya pertama yang diterapkan berwarna merah.
Ini karena nilai "hitam" tercantum kedua. Karena CSS terbaca dari atas ke bawah, gaya akhirnya adalah "hitam" dan karenanya yang menang.
p {warna: merah; }
p {warna: hitam; }
Bagaimana! Penting Mengubah Prioritas
Sekarang setelah Anda memahami bagaimana aturan yang hampir identik ini diproses oleh CSS, kita dapat melihat bagaimana arahan penting itu mengubah sedikit hal.
Direktif penting mempengaruhi cara di mana cascades CSS Anda mengikuti aturan yang Anda anggap paling penting dan harus diterapkan. Aturan yang memiliki arahan penting selalu diterapkan di mana pun aturan itu muncul dalam dokumen CSS.
Untuk membuat teks paragraf selalu merah, dari contoh di atas, Anda akan menggunakan:
p {color: red! important; }
p {warna: hitam; }
Sekarang semua teks akan berwarna merah, meskipun nilai "hitam" tercantum di urutan kedua. Direktif penting mengesampingkan aturan normal dari kaskade dan memberikan gaya yang sangat spesifik.
Jika Anda benar-benar membutuhkan paragraf untuk tampil merah, gaya ini akan melakukannya, tetapi itu tidak berarti bahwa ini adalah praktik yang baik. Mari kita lihat selanjutnya ketika Anda mungkin ingin menggunakannya! Penting dan saat tidak tepat.
Kapan Harus Digunakan! Penting
Petunjuk penting ini sangat membantu ketika Anda menguji dan melakukan debug pada situs web. Jika Anda tidak yakin mengapa suatu gaya tidak diterapkan dan menganggapnya sebagai masalah kekhususan, Anda dapat menambahkan! Deklarasi penting ke gaya Anda untuk melihat apakah itu memperbaikinya.
Jika menambahkan! Penting memang memperbaiki masalah gaya, Anda baru saja menetapkan bahwa itu adalah masalah kekhususan. Namun, Anda tidak ingin meninggalkan kode penting itu di tempat, itu hanya diletakkan di sana untuk tujuan pengujian.
Karena pengujian sudah selesai, Anda sekarang harus menghapus direktif itu dan menyesuaikan pemilih Anda untuk mencapai kekhususan yang Anda perlukan untuk mendapatkan gaya Anda bekerja. Penting jangan sampai masuk ke situs produksi Anda, sebagian karena cara itu mengubah kaskade normal.
Jika Anda terlalu bergantung pada deklarasi penting untuk mencapai gaya yang Anda inginkan, Anda akhirnya akan memiliki style sheet yang penuh dengan gaya-gaya penting. Anda akan secara mendasar mengubah cara CSS halaman diproses. Ini adalah praktik malas yang tidak baik dari sudut pandang manajemen jangka panjang.
Gunakan! Penting untuk pengujian atau, dalam beberapa kasus, ketika Anda benar-benar harus mengesampingkan gaya sebaris yang merupakan bagian dari kerangka tema atau kerangka.
Bahkan dalam kasus-kasus tersebut, gunakan pendekatan ini sesedikit mungkin dan sebagai gantinya berusaha untuk menulis style sheet yang bersih yang memahami kaskade.
Lembar Gaya Pengguna
Ada satu catatan terakhir tentang arahan penting yang penting untuk dipahami. Arahan ini juga diberlakukan untuk membantu pengguna halaman web mengatasi style sheet yang membuat halaman sulit bagi mereka untuk digunakan atau dibaca.
Biasanya, jika pengguna mendefinisikan style sheet untuk melihat halaman web, style sheet tersebut ditolak oleh halaman style penulis halaman web. Jika pengguna menandai sebuah gaya sebagai! Penting, gaya itu akan mengesampingkan halaman gaya penulis halaman web, bahkan jika penulis menandai aturan sebagai! Penting.
Ini berguna bagi pengguna yang perlu mengatur gaya dengan cara tertentu. Misalnya, seseorang mungkin perlu meningkatkan ukuran font default pada semua halaman web yang mereka gunakan. Dengan menggunakan arahan penting Anda dengan hemat dalam halaman yang Anda buat, Anda mengakomodasi setiap kebutuhan khusus yang mungkin dimiliki pengguna Anda.
Diedit oleh Jeremy Girard