CSS Dasar Part 10 - CSS Specifity
CSS Dasar Part 10 - CSS Specifity - Konsep Specifity adalah sebuah konsep sederhana yang ada pada CSS, namun memiliki peran penting ketika kita menentukan selector yang fungsinya memberikan style pada elemen HTML tertentu, dimana kita tahu, bahwa selector adalah elemen yang pertama yang kita harus tentukan ketika kita ingin memberi style pada halaman HTML dengan memanipulasi property dari elemen HTML yang menjadi selector. Karena itu sebaiknya kita bisa memahami konsep ini dengan baik, agar kita bisa memahami seberapa penting dan bernilai selector CSS yang kita buat. Definisi Specifity menurut link http://www.Smashingmagazine.Com/2010/04/07/css-specifity-and-inheritance/ adalah sebagai berikut :
Setiap deklarasi CSS ( selector ) memiliki berat yg tidak sinkron, berat tersebut memilih seberapa spesifik sebuah elemen dapat dipilih oleh selector.
 |
| CSS Specifity |
Dalam artikel saya yg berjudul Penggunaan & Pemilihan Selector Pada CSS, saya pernah menyinggung bahwa pada pemilihan selector sebisa mungkin kita menggunakan elemen HTML, lalu prioritas ke 2 memakai group, baru sesudah itu kita menggunakan id. Why?.. Karena ibarat kita mengukur/menimbang sesuatu dengan memakai indera ukur/alat timbang yg outputnya berupa hasil/nilai yg direpresentasikan dengan standar nomor , maka pemilihan/penentuan selector menggunakan menggunakan elemen HTML memiliki nilai 1, kemudian menggunakan group mempunyai nilai 10, & id mempunyai nilai 100. Semakin besar nilai angka dari hasil yang didapatkan, otomatis beratnya pun akan semakin besar . Maka apabila kita terapkan dalam konsep specifity, nomor /nilai yg dihasilkan akan bisa memilih seberapa spesifik selector yang kita gunakan. Semakin khusus sesuatu, umumnya akan sebagai perhatian dan prioritas utama pada mengerjakan/merampungkan sesuatu, & yang pasti bobot/berat nilainya pun niscaya akan semakin besar karena sebagai prioritas tertentu. Artinya, selector yg memilki bobot/berat nilai yg semakin berat, maka sebagai sangat specifik, sehingga prioritas pada pemberian style-nya pun akan lebih diutamakan menurut selector lainnya.
Lalu bagaimana dengan selector-selector yang mempunyai bobot/berat yg sama, atau tingkatan yang memiliki level yang sama dalam kondisi hadiah style suatu elemen HTML tertentu, kalau berdasarkan penjelasan paragraph di atas bahwa selector semakin berat, maka semakin specifik, semakin specifik selector, maka otomatis pengerjaan anugerah style-nya pun akan lebih diutamakan. Untuk selector-selector yg memiliki level yg sama pada pemberian style elemen tertentu, maka anggaran pengerjaan style CSS pada elemen HTML eksklusif tersebut akan mengerjakan selector yang terakhir dibentuk berapun jumlah selector tersebut. Artinya, selector yg terkini atau terakhir dibentuk akan menimpa atau meng-overwrite selector sebelumnya. Sebagai contohnya bisa lihat dibawah ini :
 |
| Pemberian Style CSS Pada Elemen HTML Yang Sama |
Bayangkan kita berada dalam sebuah pertandingan olahraga, biasanya pada pertandingan olahraga masih ada papan score yang fungsinya buat mengetahui kondisi menang dan kalah player yg bertanding yang direpresentasikan dalam angka pada papan score. Begitu pula menggunakan selector, setiap selector mempunyai angka score seperti papan score pada pertandingan olahraga misalnya yang tampak pada gambar dibawah ini.
 |
| Papan Score Untuk Selector |
Pada papan score selector kita bisa mengetahui berat sebuah selector, sehingga kita bisa menentukan seberapa khusus selector yang kita buat, semakin akbar score-nya maka otomatis selector-nya niscaya lebih khusus. Hasil yang terdapat pada papan score selector, tidak akan terpengaruh menggunakan selector yg terakhir dibuat, nir seperti pada kondisi beberapa selector yang mempunyai score/level yg sama, maka selector terakhir akan menimpa/meng-overwrite selector sebelumnya. Score selector hanya akan berkonsentrasi pada output berdasarkan papan score selector saja untuk menciptakan prioritas pengerjaan hadiah style pada elemen HTML tertentu. Untuk lebih jelas silakan lihat model dibawah ini :
 |
| Mengukur Berat Sebuah Selector |
Dari model pada atas kita sanggup melihat bahwa group mempunyai score yang lebih berat dibanding dengan elemen HTML, karena itu style rona dari paragraph berwarna salmon dampak dari group p1.
Suatu waktu mungkin kita mengalami satu kondisi dimana kita ingin memberi style pada elemen HTML, tetapi style yang kita berikan tidak berjalan. Padahal mungkin kita telah membuat sebuah penanda agar elemen tadi bisa menampilkan suatu style tertentu. Contohnya misalnya pada gambar dibawah ini. Ada list/daftar olahraga favorit, dimana diantara daftar olahraga tersebut, terdapat satu olahraga paling kita sukai, misalnya senam, dan kita ingin memberi rona yg tidak sama menggunakan list lain. Untuk menandai bahwa senam merupakan olahraga favorit, kita menciptakan sebuah class fav, supaya warnanya tidak selaras berdasarkan yang lain, tetapi ternyata hasilnya tidak sesuai dengan asa kita. Dalam masalah ini, terdapat baiknya kita menggunakan konsep papan score selector untuk mengetahui score selector kita sehingga kita mampu mengetahui seberapa khusus selector tersebut.
 |
| Membuat Selector Yang Lebih Spesifik |
Setelah kita menggunakan papan score selector, kita jadi memahami, bahwa selector yg kita buat buat olahraga senam ternyata kurang berat, sebagai akibatnya style yang akan tampil, mengikuti style berdasarkan selector yang lebih berat & spesifik. Karena itu jika kita suatu ketika mengalami syarat semacam ini, yang mampu kita lakukan buat mengatasi masalah ini, adalah sebagai berikut:
Buat elemen yang diinginkan/ditarget buat diberi style sebagai lebih spesifik, lalu masukkan beban dalam elemen tadi agar semakin berat sebagai akibatnya CSS memprioritaskan style tadi.
 |
| Specifity CSS |
Pembahasan tentang konsep Spesifikasi CSS yang ada dalam CSS dan bagaimana cara penggunaanya, sekian dulu. Semoga sahabat-sahabat sanggup mengerti penjelasan ini, terutama bagi para pemula yang baru belajar CSS. Jika terdapat pertanyaan, kritik dan saran. Silakan ajukan pada kolom komentar dibawah ini. Semoga artikel ini mampu bermanfaat buat sahabat-sahabat seluruh, terutama bagi para pemula. Tetap semangat nge-blog. See you on my next articles. Bye-bye....
Referensi:
https://developer.Mozilla.Org/en-US/docs/Web/CSS/Reference
http://www.Smashingmagazine.Com/2010/04/07/css-specifity-and-inheritance
- kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
- the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.
Belum ada Komentar untuk "CSS Dasar Part 10 - CSS Specifity"
Posting Komentar