Halo, Habr! Saya mempersembahkan kepada Anda terjemahan artikel
"5 alasan utama saya mengapa saya menyukai properti khusus CSS" oleh Stas Melnikov
Spesifikasi properti khusus CSS selamanya mengubah pandangan saya tentang pengembangan web. Itu sebabnya saya ingin menulis mengapa saya suka properti CSS khusus.
Apa itu properti CSS khusus?
Singkatnya, properti khusus CSS adalah properti yang dibuat oleh pengembang. Peramban tidak tahu apa-apa tentang mereka sampai pengembang menentukannya.
Pernyataan properti kustom apa pun dimulai dengan dua tanda hubung, setelah itu Anda harus menambahkan nama properti tersebut. Kemudian Anda menambahkan warna dan mengatur nilai properti.
Misalnya, saya membuat properti melnik909BrandColor, dengan nilai
ungu untuk elemen
tombol :
button { --melnik909BrandColor: purple; }
Fungsi var
Fitur pertama dari properti CSS khusus adalah fungsi
var . Dengan fungsi ini, saya dapat memberi tahu browser untuk mengambil nilai properti kustom dan menambahkannya ke properti CSS apa pun.
Untuk melakukan ini, saya harus mendefinisikan properti CSS dan menambahkan nilai properti ini, di tempat yang sama atur fungsi
var dengan properti kustom sebagai argumen.
Misalnya, saya menambahkan properti --melnik909BrandColor untuk properti border dan warna.
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); }
Properti khusus dapat diubah secara langsung di browser
Seorang pembaca berpengalaman yang mengetahui alat-alat seperti Sass atau KURANG mungkin mengatakan,
“Stas, mengapa saya harus mempelajari properti khusus CSS? Saya tahu variabel Sass dan itu cukup bagi saya .
"Perhatian! Variabel Sass dan KURANG membantu mengatur CSS sehingga lebih mudah bagi pengembang untuk mempertahankan kode. Misalnya, saya membuat variabel $ melnik909BrandColor tempat saya menyimpan warna:
$melnik909BrandColor: purple; button { color: $melnik909BrandColor; border: 2px solid $melnik909BrandColor; }
Setelah kompilasi, saya akan melihat kode berikut di browser:
button { color: purple; border: 2px solid purple; }
Contoh ini menunjukkan bahwa variabel Sass dan KURANG tidak di browser.
Fitur kedua dari properti CSS khusus adalah properti tersebut ada di browser. Dengan begitu, saya bisa mengubah nilai di sana. Misalnya, saya bisa mengubah nilai properti —melnik909BrandColor untuk keadaan pemilihan elemen
tombol :
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); } button:hover { --melnik909BrandColor: #27ae60; }
Anda dapat menggunakan properti CSS kustom dan kueri media secara bersamaan
Fitur ketiga dari properti CSS khusus adalah bahwa nilainya dapat diubah menggunakan kueri media. Sebagai contoh, saya mendefinisikan properti melnik909BrandColor untuk mengubah warna teks elemen
tubuh pada perangkat yang berbeda.
body { color: var(--melnik909BrandColor); } @media (max-width: 768px) { body { --melnik909BrandColor: purple; } } @media (min-width: 769px) { body { --melnik909BrandColor: tomato; } }
Fungsi Calc dan properti khusus CSS
Ada kalanya kita perlu menggunakan fungsi
calc . Misalnya, saya suka menggunakan fungsi ini ketika saya harus menghitung jumlah elemen dalam satu baris:
.child { width: calc(100% / 4); } .child { width: calc(100% / 3); }
Namun, kode ini sulit untuk digunakan kembali, dan di sini properti CSS khusus akan membantu kami. Kita dapat membuat variabel yang akan membaca jumlah elemen. Sebagai contoh, saya akan menambahkan properti –-itemsNumber ke contoh sebelumnya:
.child { width: calc(100% / var(--itemsNumber)); }
Dan saya akan mendefinisikan nilai-nilai dalam elemen
induk :
.parent { --itemsNumber: 5; } .parent { --itemsNumber: 7; }
Kustomisasi Gambar Vektor
Ada 2 cara untuk menyesuaikan grafik vektor menggunakan properti CSS kustom.
Pada metode pertama, kita mendefinisikan atribut
fill, stroke, dan stroke-width , dan menambahkan properti CSS kustom kepada mereka sebagai nilainya.
Lebih lanjut, kita dapat menambahkan nilai atribut dengan mengatur nilai properti khusus:
<svg class="svg-with-attr" viewBox="0 0 55.867 55.867"> <path stroke="var(--iconStroke)" stroke-width="var(--iconStrokeWidth)" fill="var(--iconFill)" d="..."> </svg>
Sekarang kita dapat menambahkan nilai atribut dengan mengatur nilai properti khusus:
.svg-with-attr { --iconFill: #eeeeee; --iconStroke: #000000; --iconStrokeWidth: 1px; }
Di sebelah kiri adalah ikon default tanpa gaya, dan di sebelah kanan adalah ikon dengan gaya.
Dalam metode kedua, kami mendefinisikan properti CSS khusus untuk
stroke, lebar stroke, dan mengisi properti menggunakan aturan CSS.
body { --iconFill: #ffcc00; --iconStroke: #000000; --iconStrokeWidth: 2px; } .svg-with-props { stroke: var(--iconStroke); stroke-width: var(--iconStrokeWidth); fill: var(--iconFill); }