Komponen Peringkat Bintang CSS dan banyak lagi! (Bagian 1) – Beragampengetahuan

Membuat komponen peringkat bintang adalah latihan klasik dalam pengembangan web. Menggunakan berbagai teknik telah dilakukan dan kembali. Kami biasanya membutuhkan sejumlah kecil javascript untuk menggabungkannya, tetapi bagaimana dengan implementasi CSS? Ya, itu mungkin!

Ini adalah demo komponen peringkat bintang CSS saja. Anda dapat mengklik untuk memperbarui peringkat.

Keren, kan? Kecuali CSS saja, kode HTML tidak lebih dari sebuah elemen:

<input type="range" min="1" max="5">

Elemen rentang input adalah elemen kandidat yang ideal di sini, karena memungkinkan pengguna untuk memilih nilai numerik antara dua batas ( min Dan max). Tujuan kami adalah mengatur elemen lokal dan mengubahnya menjadi komponen peringkat bintang tanpa tag tambahan atau skrip apa pun! Kami juga akan membuat lebih banyak komponen di akhir, jadi tindak lanjuti.

Catatan: Artikel ini hanya berfokus pada bagian CSS. Sementara saya mencoba yang terbaik untuk memikirkan aspek UI, UX dan aksesibilitas, komponen saya tidak sempurna. Ini mungkin memiliki beberapa kelemahan (kesalahan, masalah aksesibilitas, dll.), Jadi gunakan dengan hati -hati.

ini <input> elemen

Anda mungkin tahu ini, tetapi menata elemen asli seperti input agak rumit karena semua gaya browser default dan struktur internal yang berbeda. Misalnya, jika Anda memeriksa kode untuk rentang input, Anda akan melihat HTML yang berbeda antara Chrome (atau Safari atau Edge) dan Firefox.

Untungnya, kami memiliki beberapa bagian umum yang akan saya andalkan. Saya akan menargetkan dua elemen berbeda: Elemen utama (Masukan sendiri) dan Elemen ibu jari (Anda menggunakan yang Anda geser dengan mouse untuk memperbarui nilainya).

CSS kami akan terlihat seperti ini:

input[type="range"] {
  /* styling the main element */
}

input[type="range" i]::-webkit-slider-thumb {
  /* styling the thumb for Chrome, Safari and Edge */
}

input[type="range"]::-moz-range-thumb {
  /* styling the thumb for Firefox */
}

Satu -satunya downside adalah bahwa kita perlu mengulangi gaya elemen ibu jari dua kali. Jangan mencoba melakukan hal berikut:

input[type="range" i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* styling the thumb */
}

Ini tidak berhasil karena seluruh pemilih tidak valid. Chrome & Co. Tidak mengerti ::-moz-* Beberapa tidak tahu tentang Firefox ::-webkit-* bagian. Untuk kesederhanaan, saya akan menggunakan pemilih berikut dalam artikel ini:

input[type="range"]::thumb {
  /* styling the thumb */
}

Tetapi demo berisi selektor nyata dengan gaya berulang. Ada cukup pengantar, mari kita mulai berkode!

Elemen utama bentuk (bentuk bintang)

Pertama -tama kita mendefinisikan ukurannya:

input[type="range"] {
  --s: 100px; /* control the size*/
  
  height: var(--s);
  aspect-ratio: 5;
  
  appearance: none; /* remove the default browser styles */
}

Jika kita berpikir bahwa setiap bintang ditempatkan di area persegi, maka untuk peringkat bintang 5 kita membutuhkan lebar sama dengan tinggi lima kali, jadi gunakan aspect-ratio: 5.

Itu 5 Nilainya juga didefinisikan sebagai max Masukkan atribut elemen.

<input type="range" min="1" max="5">

Oleh karena itu, kami dapat mengandalkan peningkatan baru attr() Fungsi (saat ini hanya chrome) membaca nilai alih-alih mendefinisikannya secara manual!

input[type="range"] {
  --s: 100px; /* control the size*/
  
  height: var(--s);
  aspect-ratio: attr(max type(<number>));
  
  appearance: none; /* remove the default browser styles */
}

Sekarang Anda dapat menyesuaikan jumlah bintang secara sederhana max milik. Ini bagus karena max Properti juga digunakan di dalam browser, sehingga memperbarui nilai ini akan mengontrol implementasi kami dan perilaku browser.

Versi yang disempurnakan ini attr() Saat ini hanya tersedia di Chrome, jadi semua demo saya termasuk fallback untuk membantu dengan browser yang tidak didukung.

Langkah selanjutnya adalah menggunakan CSS mask Buat bintang. Kita perlu bentuk untuk diulang lima kali (atau lebih tergantung pada max nilai), sehingga ukuran topeng harus sama var(--s) var(--s) atau var(--s) 100% Atau sederhana var(--s) Karena secara default, tinggi akan sama 100%.

input[type="range"] {  
  --s: 100px; /* control the size*/
  
  height: var(--s);
  aspect-ratio: attr(max type(<number>));
  
  appearance: none; /* remove the default browser styles */

  mask-image: /* ... */;
  mask-size: var(--s);
}

Bagaimana dengan itu mask-image Properti apa yang mungkin Anda tanyakan? Saya pikir tidak mengherankan bahwa saya katakan kepada Anda butuh beberapa gradien, tetapi itu bisa menjadi SVG juga. Artikel ini adalah tentang membuat bahan bintang, tetapi saya ingin menjaga bagian bintang universal sehingga Anda dapat dengan mudah menggantinya dengan bentuk apa pun yang Anda inginkan. Itu sebabnya saya mengatakan “lebih banyak” dalam judul posting ini. Nanti kita akan melihat cara menggunakan struktur kode yang sama dan kita bisa mendapatkan berbagai perubahan.

Ini adalah demonstrasi yang menunjukkan dua implementasi bintang yang berbeda. Salah satunya adalah menggunakan gradien, yang lain adalah menggunakan SVG.

Dalam hal ini, implementasi SVG terlihat lebih bersih dan kodenya lebih pendek, tetapi masukkan kedua metode di saku belakang Anda karena implementasi gradien dapat melakukan lebih baik dalam beberapa kasus.

Terapkan ibu jari (nilai yang dipilih)

Sekarang mari kita fokus pada elemen ibu jari. Ambil demonstrasi terakhir dan klik bintang -bintang dan perhatikan posisi ibu jari Anda.

Hal yang baik adalah ibu jari selalu sama sekali nilai bintang yang diberikan (dari min tiba max), tetapi setiap bintang memiliki posisi yang berbeda. Jika lokasi selalu sama, itu akan menjadi hal yang baik terlepas dari nilainya. Idealnya, ibu jari harus selalu berada di tengah bintang untuk konsistensi.

Berikut adalah nomor yang menjelaskan lokasi dan cara memperbarui.

Garis adalah posisi ibu jari untuk setiap nilai. Di sebelah kiri, kami memiliki posisi default di mana ibu jari berasal dari tepi kiri ke tepi kanan elemen utama. Di sebelah kanan, jika kita membatasi posisi ibu jari ke area yang lebih kecil dengan menambahkan beberapa ruang di samping, kita mendapatkan keselarasan yang lebih baik. Ruang ini sama dengan setengah dari bintang, atau var(--s)/2. Kami dapat menggunakan pengisi:

input[type="range"] {  
  --s: 100px; /* control the size */
  
  height: var(--s);
  aspect-ratio: attr(max type(<number>));
  padding-inline: calc(var(--s) / 2);
  box-sizing: border-box;
  
  appearance: none; /* remove the default browser styles */

  mask-image: ...;
  mask-size: var(--s);
}

Ini lebih baik, tetapi tidak sempurna, karena saya tidak berpikir tentang ukuran ibu jari, yang berarti kita tidak memiliki inti nyata. Ini bukan masalah karena saya akan membuat ibu jari ukurannya sangat kecil dan lebar sama dengan 1px.

input[type="range"]::thumb {
  width: 1px;
  height: var(--s);  

  appearance: none; /* remove the default browser styles */ 
}

Sekarang, ibu jari adalah garis tipis, terletak di tengah bintang. Saya menggunakan merah untuk menyoroti posisinya, tetapi pada kenyataannya, saya tidak membutuhkan warna karena akan transparan.

Anda mungkin berpikir kami masih jauh dari hasil akhirnya, tetapi kami hampir selesai! Properti hilang untuk menyelesaikan teka -teki: border-image.

ini border-image Properti memungkinkan kami untuk menggambar dekorasi di luar elemen, berkat fungsi awalnya. Jadi saya membuat ibu jari saya kecil dan transparan. Warnanya akan digunakan border-image. Saya akan menggunakan gradien dengan dua warna solid sebagai sumbernya:

linear-gradient(90deg, gold 50%, grey 0);

Mari kita tulis yang berikut:

border-image: linear-gradient(90deg, gold 50%, grey 0) fill 0 // 0 100px;

Di atas berarti kami telah berkembang border-image Dari setiap sisi elemen 100px Gradien akan mengisi area tersebut. Dengan kata lain, setiap warna gradien akan mencakup setengah dari area tersebut, yaitu. 100px.

Apakah Anda melihat logikanya? Kami membuat pewarnaan yang meluap di setiap sisi ibu jari – warna secara logis akan mengikuti ibu jari, jadi setiap kali bintang dikliknya meluncur ke tempatnya!

Sekarang bukan 100px Mari kita gunakan nilai yang sangat penting:

Kami sedang mendekat! Warnanya penuh dengan semua bintang, tetapi kami tidak ingin itu berada di tengah, tetapi sebaliknya mencakup seluruh bintang. Untuk melakukan ini, kami memperbarui gradien, daripada menggunakan 50%kami gunakan 50% + var(--s)/2. Offset yang kami tambahkan sama dengan setengah lebar bintang, yang berarti warna pertama akan memakan lebih banyak ruang, dan komponen peringkat bintang kami sempurna!

Kami masih dapat mengoptimalkan kode alih -alih mendefinisikan ketinggian ibu jari, kami menyimpannya 0 Kami sudah mempertimbangkan border-image Oleskan pewarnaan.

input[type="range"]::thumb{
  width: 1px;
  border-image: 
    linear-gradient(90deg, gold calc(50% + var(--s) / 2), grey 0)
    fill 0 // var(--s) 500px;
  appearance: none;
}

Kami juga dapat menulis gradien dengan cara yang berbeda menggunakan gradien kerucut:

input[type="range"]::thumb{
  width: 1px;
  border-image: 
    conic-gradient(at calc(50% + var(--s) / 2), grey 50%, gold 0)
    fill 0 // var(--s) 500px;
  appearance: none;
}

Aku tahu border-image Tidak mudah untuk memahami, saya agak cepat menjelaskan. Tetapi saya memiliki artikel yang sangat rinci tentang Smashing Magazine di mana saya membedah properti dengan banyak contoh dan saya mengundang Anda untuk membacanya untuk mendapatkan pemahaman yang lebih dalam tentang bagaimana properti bekerja.

Kode lengkap komponen kami adalah:

<input type="range" min="1" max="5">

input[type="range"] {  
  --s: 100px; /* control the size*/
  
  height: var(--s);
  aspect-ratio: attr(max type(<number>));
  padding-inline: calc(var(--s) / 2); 
  box-sizing: border-box; 
  appearance: none; 
  mask-image: /* ... */; /* either an SVG or gradients */
  mask-size: var(--s);
}

input[type="range"]::thumb {
  width: 1px;
  border-image: 
    conic-gradient(at calc(50% + var(--s) / 2), grey 50%, gold 0)
    fill 0//var(--s) 500px;
  appearance: none;
}

itu saja! Dengan beberapa baris kode CSS, kami memiliki komponen bintang peringkat yang baik!

Peringkat setengah bintang

Bagaimana dengan mengambil granularitas setengah bintang sebagai peringkat? Ini adalah hal yang umum, dan kami dapat melakukan ini dengan membuat beberapa penyesuaian untuk menggunakan kode sebelumnya.

Pertama, kami memperbarui elemen input menjadi setengah stepS bukannya langkah lengkap:

<input type="range" min=".5" step=".5" max="5">

Secara default, langkah -langkahnya sama dengan 1 Tapi kami bisa memperbaruinya .5 (atau nilai apa pun) lalu kami memperbarui min nilai .5 Hal yang sama benar. Di sisi CSS, kami var(--s)/2 tiba var(--s)/4kami melakukan hal yang sama untuk offset di dalam gradien.

input[type="range"] {  
  --s: 100px; /* control the size*/
  
  height: var(--s);
  aspect-ratio: attr(max type(<number>));
  padding-inline: calc(var(--s) / 4); 
  box-sizing: border-box; 
  appearance: none; 
  mask-image: ...; /* either SVG or gradients */
  mask-size: var(--s);
}

input[type="range"]::thumb{
  width: 1px;
  border-image: 
    conic-gradient(at calc(50% + var(--s) / 4),grey 50%, gold 0)
    fill 0 // var(--s) 500px;
  appearance: none;
}

Perbedaan antara kedua implementasi adalah setengah dari faktor, dan itu juga step nilai. Ini berarti kita bisa menggunakan attr() Dan membuat kode umum yang berfungsi untuk kedua kasus.

input[type="range"] {  
  --s: 100px; /* control the size*/
  
  --_s: calc(attr(step type(<number>),1) * var(--s) / 2);
  height: var(--s);
  aspect-ratio: attr(max type(<number>));
  padding-inline: var(--_s);
  box-sizing: border-box; 
  appearance: none; 
  mask-image: ...; /* either an SVG or gradients */
  mask-size: var(--s);
}

input[type="range"]::thumb{
  width: 1px;
  border-image: 
    conic-gradient(at calc(50% + var(--_s)),gold 50%,grey 0)
    fill 0//var(--s) 500px;
  appearance: none;
}

Ini adalah demonstrasi, dan langkah modifikasi adalah semua yang perlu Anda lakukan untuk mengendalikan granularitas. Jangan lupa, Anda juga bisa menggunakannya max milik.

Sesuaikan skor menggunakan keyboard

Seperti yang Anda ketahui, kami dapat menggunakan keyboard untuk menyesuaikan nilai slider rentang input, sehingga kami juga dapat menggunakan keyboard untuk mengontrol peringkat. Itu hal yang baik, tapi ada peringatan. Karena digunakan mask Properti, kami tidak lagi memiliki garis besar default yang menunjukkan fokus keyboard, yang merupakan masalah aksesibilitas bagi mereka yang mengandalkan input keyboard.

Untuk pengalaman pengguna yang lebih baik dan membuat komponen lebih mudah diakses, yang terbaik adalah menunjukkan garis fokus. Solusi termudah adalah menambahkan pembungkus tambahan:

<span>
  <input type="range" min="1" max="5">
</span>

Ini akan memiliki garis besar ketika fokus input adalah internal:

span:has(:focus-visible) {
  outline: 2px solid;
}

Coba gunakan keyboard dalam contoh berikut untuk menyesuaikan dua peringkat:

Gagasan lain adalah mempertimbangkan yang lebih kompleks mask Konfigurasi yang mencegah kontur (atau dekorasi eksterior apa pun) disembunyikan. Caranya adalah memulai dengan:

mask:
  conic-gradient(#000 0 0) exclude,
  conic-gradient(#000 0 0) no-clip;

ini no-clip Kata kunci berarti bahwa tidak ada dalam elemen yang dipotong (termasuk garis besar). Lalu kami gunakan exclude Terdiri dari gradien lain. Kecualikan semua yang ada di dalam elemen akan disembunyikan sambil menjaga sesuatu yang terlihat di luar.

Akhirnya, kami menambahkan topeng yang menciptakan bentuk bintang:

mask: 
  /* ... */ 0/var(--s), 
  conic-gradient(#000 0 0) exclude,
  conic-gradient(#000 0 0) no-clip;

Saya lebih suka menggunakan pendekatan terakhir ini karena mempertahankan implementasi elemen tunggal, tetapi struktur HTML Anda juga memungkinkan Anda untuk menambahkan elemen fokus atas dan dapat menjaga konfigurasi topeng tetap sederhana. Itu semua tergantung!

Terima kasih kepada trik terakhir Ana Tudor!

Lebih banyak contoh!

Seperti yang saya katakan sebelumnya, kami melakukan lebih dari sekadar komponen peringkat bintang. Anda dapat dengan mudah memperbarui nilai mask untuk menggunakan bentuk apa pun yang Anda inginkan.

Berikut adalah contohnya, saya menggunakan hati, bukan bintang.

Mengapa tidak kupu -kupu?

Kali ini, saya menggunakan gambar PNG sebagai topeng. Jika Anda tidak nyaman menggunakan SVG atau gradien, Anda dapat menggunakan gambar transparan. Selama Anda memiliki SVG, PNG, atau gradien, apa yang dapat Anda lakukan tentang ini dalam bentuk bentuk.

Kami dapat lebih lanjut menyesuaikan dan membuat komponen kontrol volume yang mirip dengan yang berikut:

Dalam contoh terakhir, saya tidak mengulangi bentuk tertentu, tetapi menggunakan kompleksitas mask Konfigurasikan untuk membuat bentuk sinyal.

sebagai kesimpulan

Kami mulai dengan komponen level bintang dan berakhir dengan banyak contoh keren. Judulnya bisa saja “bagaimana merancang elemen rentang input” karena itulah yang kami lakukan. Kami meningkatkan komponen asli tanpa skrip atau tag tambahan, dengan hanya beberapa baris CSS.

Dan kamu? Dapatkah Anda mempertimbangkan komponen mewah lain menggunakan struktur kode yang sama? Bagikan contoh Anda di bagian komentar!

Seri artikel

1. Komponen Peringkat Bintang CSS dan banyak lagi! (Bagian 1)
2. Komponen Peringkat Bintang CSS dan banyak lagi! (Bagian 2) – 7 Maret akan segera hadir!

Komponen Peringkat Bintang CSS dan banyak lagi! (Bagian 1) Awalnya diterbitkan di beragampengetahuan, bagian dari keluarga Digitalocean. Anda harus menerima buletin.