Stas Melnikov, penulis kursus HTML Layout HTML, berbicara tentang nuansa yang dapat menyulitkan pekerjaan dengan properti CSS kustom.Aturan Sintaks Nama Properti Kustom
Kami terbiasa dengan fakta bahwa properti CSS sebaris tidak peka terhadap huruf besar-kecil. Oleh karena itu, metode berikut untuk mendeklarasikan properti
border akan memberikan hasil yang sama:
button { BORDER: 2px solid
Properti khusus, sebaliknya, peka terhadap huruf besar-kecil, jadi contoh berikut membuat dua properti khusus yang berbeda:
button { --NETOLOGY-BRAND-COLOR:
Sekarang bingkai telah menjadi # 800080 (ungu), dan teks telah menjadi # 27ae60 (hijau).
Nilai Valid untuk Properti Kustom
Untuk properti CSS biasa, Anda hanya dapat menetapkan nilai yang diizinkan oleh standar. Menurut standar properti khusus, setiap nilai CSS valid yang ada dapat digunakan sebagai nilai. Misalnya, seperti semua properti khusus berikut:
.element::before { --color: rgba(0, 0, 0, 1); --hex:
Misalnya, mari kita mengatur bingkai dengan warna # 800080 untuk tombol:
button { --netologyBrandColor:
Selain nilai standar, Anda dapat menetapkan satu properti khusus sebagai nilai untuk yang lain.
button { --netologyBrandColor:
Hasilnya tidak berbeda dari yang sebelumnya, dan tombol masih memiliki bingkai dengan warna # 800080.
Jika properti khusus
--netologyBrandColor memiliki nilai yang salah untuk properti
border-color , misalnya 18px, maka bingkai akan berubah menjadi hitam.
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); }
Faktanya adalah bahwa sebelum browser menerapkan nilai properti pengguna untuk properti bawaan, ia akan memeriksa kebenarannya. Jika nilai tersedia untuk properti inline, browser akan menerapkannya. Jika tidak, ini akan menetapkan nilai default untuk properti bawaan.
Dalam kasus kami, 18px adalah nilai yang salah untuk properti
border-color bawaan, dan oleh karena itu browser akan menetapkan nilai default, yaitu
currentColor . Ini sangat mudah diverifikasi dengan menyetel properti
color ke # 800080:
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); color:
Seperti yang Anda lihat, browser menerapkan nilai # 800080 untuk bingkai. Dalam contoh ini, saya menggunakan sintaks lengkap untuk mengatur bingkai. Tapi kita bisa menggunakan yang pendek, yaitu properti
border .
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border: 2px solid var(--buttonBorderColor); color:
Di sini kita menunggu nuansa lain. Ada bagian terpisah dalam standar yang menjelaskan perilaku properti khusus dalam situasi seperti itu. Menurutnya, jika properti pengguna memiliki nilai yang salah untuk properti inline, maka properti pengguna ini tidak valid, sehingga browser akan mengabaikan properti inline.
Dalam contoh kami, properti
border --buttonBorderColor memiliki salah satu nilai yang disetel ke properti khusus
--buttonBorderColor dengan nilai 18px yang tidak valid. Menurut algoritma yang dijelaskan, browser hanya mengabaikan properti
border , sehingga elemen kehilangan perbatasan.
Nilai default untuk properti khusus
Ketika kami melihat contoh fungsi
var , kami hanya menggunakan satu parameter - nama properti khusus.
button { --netologyBrandColor:
Tapi selain itu, fungsi
var dapat menerima yang kedua - nilai default. Untuk mendeklarasikan nilai default, Anda harus memberi koma setelah nama properti kustom dan menulis nilai itu sendiri.
Ketika browser menyadari bahwa pengembang belum mendeklarasikan nilai untuk properti kustom, itu menggunakan nilai default. Misalnya, nilai # 800080 (ungu) untuk properti khusus adalah
--netologyBrandColor .
button { border: 2px solid var(--netologyBrandColor,
Kami melihat bingkai dan teks menjadi ungu. Tetapi jika Anda memindahkan tombol, mereka akan berubah menjadi hijau. Ini menunjukkan bahwa browser menerapkan nilai # 27ae60 ke properti pengguna, sehingga mengganti nilai default.
Tapi ini tidak semua kemungkinan fungsi
var . Pada contoh sebelumnya, properti kustom
--netologyBrandColor digunakan dua kali, masing-masing, jadi saya menetapkan nilai default dua kali.
Tetapi itu bisa dilakukan secara berbeda. Fungsi
var memungkinkan Anda untuk melewati fungsi
var lain, sehingga Anda dapat mengatur properti kustom lain sebagai nilai default. Saya akan menulis ulang contoh sebelumnya menggunakan properti khusus
--defaultButtonColor :
button { --defaultButtonColor:
Secara lahiriah, hasilnya tidak akan berubah. Tetapi sekarang untuk mengubah nilai default, Anda perlu melakukan ini hanya di satu tempat, dan tidak di beberapa tempat, seperti sebelumnya.
Warisan sifat khusus
CSS memiliki mekanisme pewarisan yang memungkinkan elemen untuk mewarisi properti dari elemen induk. Dalam hal ini, properti khusus tidak berbeda dari mereka. Sebagai contoh, saya akan menulis kode di mana properti kustom
--netologyBrandColor diwarisi dari elemen
body induk.
body { --netologyBrandColor:
Melihat inspektur, Anda dapat melihat tulisan "Warisan dari tubuh", yang menunjukkan kepada kita bahwa properti khusus diambil dari elemen
body . Tetapi jika kita menambahkan properti khusus
--netologyBrandColor untuk elemen
button , maka itu sudah menimpa properti dari elemen
body .
body { --netologyBrandColor:
Inspektur menunjukkan bahwa properti khusus
--netologyBrandColor elemen
button menimpa properti
--netologyBrandColor , yang kami tentukan untuk elemen
body .
Nilai global
Dalam standar CSS, Properti Kustom memperkenalkan pseudo-
root khusus yang memungkinkan Anda untuk menentukan properti kustom yang berlaku untuk elemen root dokumen. Misalnya, dalam dokumen HTML untuk elemen
html .
:root { --netologyBrandColor:
Di inspektur, kita dapat melihat bahwa properti khusus yang dideklarasikan diterapkan ke elemen html. Tetapi, di samping dokumen HTML, pseudo-
root berfungsi dalam dokumen SVG. Misalnya, saya akan mendeklarasikan properti khusus dalam tag
style .
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 28" width="50" height="50"> <style> :root{ --iconColor:
Dan di sini kita melihat bahwa pseudo-
root root telah ditambahkan ke elemen root SVG. Dengan demikian, ini membuktikan bahwa pseudo-class root tidak hanya berlaku untuk tag
html , tetapi juga untuk elemen root apa pun.
Kesimpulan
Dalam artikel ini, kami bertemu dengan perangkap properti khusus yang dapat membingungkan. Dan karenanya, kita dapat mulai menggunakannya. Karena itu, pada artikel selanjutnya saya akan berbicara tentang trik praktis yang saya gunakan dalam proyek saya.
Dari para editor
Mata kuliah Netologi dengan topik: