Komponen penarafan bintang CSS sahaja dan banyak lagi! (Bahagian 1)

Membina komponen penarafan bintang adalah latihan klasik dalam pembangunan web dan telah berulang kali dilaksanakan menggunakan pelbagai teknik. Biasanya sedikit kod JavaScript diperlukan, tetapi bagaimana dengan pelaksanaan menggunakan CSS? Ya, ya!

Ini adalah demonstrasi komponen penarafan bintang yang dilaksanakan menggunakan CSS sahaja. Anda boleh mengklik penilaian kemas kini.

Ia sejuk, bukan? Selain menggunakan CSS sahaja, kod HTML hanya satu elemen:

<input type="range">

Elemen input pelbagai sesuai kerana ia membolehkan pengguna memilih nilai angka antara dua sempadan (minimum dan maksimum). Matlamat kami adalah untuk merekabentuk elemen asli ini, mengubahnya menjadi komponen penarafan bintang, tanpa penandaan tambahan atau skrip mana -mana! Kami juga akan membuat lebih banyak komponen pada akhirnya, jadi tunggu.

NOTA: Artikel ini hanya memberi tumpuan kepada bahagian CSS. Walaupun saya berusaha sedaya upaya untuk memikirkan aspek UI, UX, dan aksesibiliti, komponen saya tidak sempurna. Ia mungkin mempunyai beberapa kelemahan (kesilapan, isu kebolehcapaian, dan lain -lain), jadi gunakan dengan berhati -hati.

elemen <input type="range">

Anda mungkin tahu bahawa mereka bentuk elemen asli, seperti elemen input, agak rumit kerana semua gaya penyemak imbas lalai dan struktur dalaman yang berbeza. Sebagai contoh, jika anda menyemak kod untuk elemen input pelbagai, anda akan melihat HTML yang berbeza antara Chrome (atau Safari, Edge) dan Firefox.

bernasib baik, kita mempunyai beberapa bahagian yang sama yang saya akan bergantung. Saya akan mencari dua elemen yang berbeza:

elemen utama (input sendiri) dan elemen slider (elemen yang anda gunakan tetikus untuk sapu untuk mengemas kini nilai).

CSS kami terutamanya seperti berikut:

input[type="range"] {
  /* 主元素样式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑块样式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑块样式 */
}

Satu -satunya kelemahan adalah bahawa kita perlu mengulangi gaya elemen slider dua kali. Jangan cuba melakukan perkara berikut:

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑块样式 */
}

Ini tidak berfungsi kerana keseluruhan pemilih tidak sah. Chrome dan lain -lain tidak faham bahagian

, manakala Firefox tidak memahami bahagian ::-moz-*. Untuk kesederhanaan, dalam artikel ini saya akan menggunakan pemilih berikut: ::-webkit-*

input[type="range"]::thumb {
  /* 滑块样式 */
}

tetapi demo mengandungi pemilih sebenar dengan gaya mengulangi. Pengenalan sudah cukup, mari kita mulakan pengekodan!

gaya elemen utama (bintang)

kita mula -mula menentukan saiz:

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: 5;

  appearance: none; /* 删除默认浏览器样式 */
}

Jika kita fikir setiap bintang berada di kawasan persegi, untuk penarafan 5 bintang, kita memerlukan lebar sama dengan lima kali ketinggian, jadi gunakan

. aspect-ratio: 5

Nilai 5 juga ditakrifkan sebagai nilai atribut

atribut elemen input. max

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

jadi kita boleh bergantung pada fungsi

yang baru dipertingkatkan (kini Chrome sahaja) untuk membaca nilai dan bukannya menentukan secara manual! attr()

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: attr(max type(<number>));

  appearance: none; /* 删除默认浏览器样式 */
}</number>

Sekarang anda boleh mengawal bilangan bintang dengan hanya menyesuaikan atribut

. Ini hebat kerana atribut max juga digunakan secara dalaman oleh penyemak imbas, jadi mengemas kini nilai akan mengawal pelaksanaan kami dan tingkah laku penyemak imbas. max

Versi yang dipertingkatkan ini attr() kini hanya tersedia di Chrome, jadi semua demo saya termasuk skema sandaran untuk membantu penyemak imbas yang tidak disokong.

Langkah seterusnya ialah menggunakan topeng CSS untuk membuat bintang. Kami memerlukan bentuk yang akan diulang lima kali (atau lebih banyak kali, bergantung kepada nilai max), jadi saiz topeng harus sama dengan var(--s) var(--s) atau var(--s) 100% atau dipermudahkan kepada var(--s) kerana ketinggian akan sama dengan 100% secara lalai.

<input type="range">

anda boleh bertanya apakah atributnya? Saya fikir ia tidak menghairankan bahawa saya akan memberitahu anda bahawa ia memerlukan beberapa kecerunan, tetapi ia juga boleh menjadi SVG. Artikel ini adalah mengenai membuat komponen penarafan bintang, tetapi saya mahu bahagian bintang tetap serba boleh supaya anda dapat dengan mudah menggantikannya dengan apa -apa bentuk yang anda inginkan. Itulah sebabnya saya berkata "lebih" dalam tajuk jawatan ini. Kami akan melihat kemudian bagaimana untuk mendapatkan pelbagai varian yang berbeza menggunakan struktur kod yang sama. mask-image

Berikut adalah demonstrasi yang menunjukkan dua cara yang berbeza untuk melaksanakan bentuk bintang. Satu adalah menggunakan kecerunan, yang lain adalah menggunakan SVG.

Dalam kes ini, pelaksanaan SVG kelihatan lebih bersih dan kodnya lebih pendek, tetapi ingat kedua -dua kaedah, kerana pelaksanaan kecerunan kadang -kadang boleh dilakukan dengan lebih baik.

gaya slider (nilai terpilih)

mari fokus sekarang pada elemen slider. Gunakan demo terakhir, kemudian klik pada bintang dan perhatikan kedudukan gelangsar.

Berita baiknya ialah untuk semua nilai (dari minimum hingga maksimum), gelangsar sentiasa berada di rantau bintang yang diberikan, tetapi setiap bintang mempunyai kedudukan yang berbeza. Ia akan menjadi lebih baik jika kedudukannya sentiasa sama tanpa mengira nilai. Idealnya, untuk konsistensi, gelangsar harus selalu berada di tengah -tengah bintang.

Ini adalah gambar yang menggambarkan lokasi dan bagaimana untuk mengemas kini.

garis -garis ini adalah kedudukan slider untuk setiap nilai. Di sebelah kiri kami mempunyai kedudukan lalai di mana gelangsar bergerak dari pinggir kiri elemen utama ke tepi kanan. Di sebelah kanan, jika kita mengehadkan kedudukan slider ke kawasan yang lebih kecil dengan menambahkan beberapa ruang di kedua -dua belah pihak, kita akan mendapat penjajaran yang lebih baik. Ruang ini sama dengan separuh saiz bintang, atau

. Kita boleh menggunakan padding untuk ini: var(--s)/2

input[type="range"] {
  /* 主元素样式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑块样式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑块样式 */
}

Lebih baik, tetapi tidak sempurna, kerana saya tidak memikirkan saiz gelangsar, yang bermaksud kita tidak benar -benar berpusat. Ini bukan masalah, kerana saya akan menggunakan lebar sama dengan 1px untuk menjadikan saiz slider sangat kecil.

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑块样式 */
}

gelangsar kini garis nipis, terletak di tengah bintang. Saya menggunakan merah untuk menyerlahkan kedudukan, tetapi pada hakikatnya saya tidak memerlukan warna kerana ia akan telus.

Anda mungkin fikir kami masih jauh dari hasil akhir, tetapi kami hampir selesai! Hartanah hilang untuk melengkapkan teka -teki ini:

. border-image Atribut

membolehkan kita menarik hiasan di luar elemen menggunakan fungsi border-image. Untuk melakukan ini, saya membuat gelangsar lebih kecil dan telus. Pewarna akan dilakukan dengan menggunakan outset. Saya akan menggunakan kecerunan dengan dua warna pepejal sebagai sumber: border-image

input[type="range"]::thumb {
  /* 滑块样式 */
}

kami menulis kandungan berikut:

<input type="range">

di atas bermakna kita memperluaskan kawasan border-image dengan 100px dari setiap sisi elemen, dan kecerunan akan mengisi kawasan itu. Dalam erti kata lain, setiap warna kecerunan akan meliputi separuh kawasan, iaitu 100px.

Adakah anda memahami logiknya? Kami mencipta teduhan yang melimpah pada setiap sisi gelangsar - teduhan yang secara logiknya akan mengikuti slider supaya setiap kali bintang diklik ia slaid ke tempatnya!

sekarang mari kita gunakan nilai yang sangat besar dan bukannya 100px:

Kami hampir selesai! Pewarna mengisi semua bintang, tetapi kami tidak mahu ia berada di tengah, tetapi pada seluruh bintang yang dipilih. Untuk melakukan ini, kami mengemas kini kecerunan sedikit, bukannya menggunakan 50%, kami menggunakan 50% var(--s)/2. Kami menambah offset sama dengan separuh lebar bintang, yang bermaksud warna pertama akan mengambil lebih banyak ruang dan komponen penarafan bintang kami adalah sempurna!

kita masih boleh mengoptimumkan kod sedikit dan bukannya menentukan ketinggian untuk slider, kita simpan pada 0 dan pertimbangkan menegak border-image outset untuk memperluaskan teduhan.

input[type="range"] {
  /* 主元素样式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑块样式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑块样式 */
}

kita juga boleh menggunakan kecerunan kerucut untuk menulis kecerunan secara berbeza:

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑块样式 */
}

Saya tahu sintaks border-image tidak mudah difahami, dan saya sedikit cepat menjelaskan. Tetapi saya mempunyai artikel yang sangat terperinci yang diterbitkan di Smashing Magazine di mana saya membedah harta ini dengan banyak contoh dan saya menjemput anda untuk membacanya untuk pemahaman yang lebih mendalam tentang bagaimana ia berfungsi.

Kod lengkap komponen kami adalah seperti berikut:

input[type="range"]::thumb {
  /* 滑块样式 */
}

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: 5;

  appearance: none; /* 删除默认浏览器样式 */
}

itu sahaja! Dengan beberapa baris kod CSS, kami mendapat komponen penarafan bintang yang bagus!

Penilaian Semi-Star

Bagaimana untuk menetapkan skor granularity kepada setengah bintang? Ini sangat biasa, dan kami dapat melengkapkan kod sebelumnya dengan membuat beberapa tweak.

Pertama, kami mengemas kini elemen input untuk kenaikan separuh langkah dan bukannya langkah penuh:

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

Secara lalai, saiz langkah adalah sama dengan 1, tetapi kita boleh mengemas kini ke .5 (atau sebarang nilai) dan kemudian juga mengemas kini nilai minimum kepada .5. Di sisi CSS, kami menukar padding dari var(--s)/2 ke var(--s)/4 dan melakukan perkara yang sama untuk offset dalam kecerunan.

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: attr(max type(<number>));

  appearance: none; /* 删除默认浏览器样式 */
}</number>

Perbezaan antara kedua-dua pelaksanaan adalah faktor setengah, yang juga merupakan nilai saiz langkah. Ini bermakna kita boleh menggunakan attr() dan membuat kod biasa yang berfungsi untuk kedua -dua kes.

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: attr(max type(<number>));

  appearance: none; /* 删除默认浏览器样式 */

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

Ini adalah demo di mana mengubah saiz langkah adalah semua yang anda perlu lakukan untuk mengawal butiran. Jangan lupa bahawa anda juga boleh menggunakan atribut max untuk mengawal bilangan bintang.

Gunakan papan kekunci untuk menyesuaikan skor

seperti yang anda tahu, kami boleh menggunakan papan kekunci untuk menyesuaikan nilai yang dimasukkan oleh slider julat, jadi kami juga boleh menggunakan papan kekunci untuk mengawal skor. Ini adalah perkara yang baik, tetapi ada amaran. Oleh kerana penggunaan harta mask, kami tidak lagi mempunyai garis lalai yang menunjukkan tumpuan papan kekunci, yang merupakan isu kebolehaksesan bagi pengguna yang bergantung pada input papan kekunci.

Untuk pengalaman pengguna yang lebih baik dan menjadikan komponen lebih mudah diakses, lebih baik memaparkan garis besar dalam fokus. Penyelesaian yang paling mudah ialah menambah pembungkus tambahan:

<input type="range">

ini akan mempunyai garis besar apabila input di dalam mempunyai tumpuan:

input[type="range"] {
  /* 主元素样式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑块样式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑块样式 */
}

Cuba gunakan papan kekunci untuk menyesuaikan kedua -dua penilaian ini dalam contoh berikut:

Idea lain adalah untuk mempertimbangkan konfigurasi topeng yang lebih kompleks yang menyimpan kawasan kecil di sekitar elemen yang dapat dilihat untuk menunjukkan garis besar:

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑块样式 */
}

Saya lebih suka menggunakan kaedah terakhir kerana ia menyimpan pelaksanaan unsur tunggal, tetapi mungkin struktur HTML anda membolehkan anda menambah fokus pada elemen induk, dan anda boleh menyimpan konfigurasi topeng mudah. Semuanya terpulang kepada anda!

lebih banyak contoh!

Seperti yang saya katakan sebelum ini, kami membuat lebih daripada sekadar komponen penarafan bintang. Anda boleh mengemas kini nilai topeng dengan mudah untuk menggunakan apa -apa bentuk yang anda mahukan.

Berikut adalah contoh, saya menggunakan SVG jantung dan bukannya bintang.

Mengapa tidak rama -rama?

Kali ini saya menggunakan imej PNG sebagai topeng. Jika anda tidak digunakan untuk menggunakan SVG atau gradien, anda boleh menggunakan imej telus. Selagi anda mempunyai SVG, PNG, atau kecerunan, anda boleh melakukan apa -apa dalam bentuk dengan kaedah ini.

kita dapat menyesuaikan dan membuat komponen kawalan kelantangan seperti yang berikut:

Dalam contoh terakhir, bukannya mengulangi bentuk tertentu, saya menggunakan konfigurasi topeng kompleks untuk membuat bentuk isyarat.

Kesimpulan

Kami bermula dengan komponen penarafan bintang dan berakhir dengan banyak contoh yang sejuk. Tajuk ini mungkin "Cara Merancang Unsur Input Julat" kerana itulah yang kita lakukan. Kami menaik taraf komponen asli tanpa sebarang skrip atau tag tambahan dan hanya menggunakan beberapa baris kod CSS.

di mana anda? Bolehkah anda memikirkan komponen lain yang menggunakan struktur kod yang sama? Kongsi contoh anda di bahagian komen!

Siri Artikel

1. komponen penarafan bintang CSS-sahaja dan banyak lagi! (Bahagian 1)
komponen penarafan bintang CSS-sahaja dan banyak lagi! (Bahagian 2) -
2. Dikeluarkan pada 7 Mac!

Atas ialah kandungan terperinci Komponen penarafan bintang CSS sahaja dan banyak lagi! (Bahagian 1). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!