Bagan batang CSS menggunakan fungsi modern – Beragampengetahuan

Fitur CSS baru terkadang dapat membuat desain kode menjadi lebih mudah dan efisien yang sudah kita ketahui cara membuatnya. Efisiensi ini mungkin dihasilkan dari pengurangan kode atau peretasan, atau peningkatan keterbacaan karena adanya fitur baru.

Dengan semangat ini, mari kita tingkatkan konten dasar diagram batang.

<ul class="chart" tabindex="0" role="list" aria-labelledby="chart-title">
  <li class="chart-bar" data-value="32" tabindex="0" role="img" aria-label="32 percentage">32%</li>
  <!-- etc. -->
</ul>

Kita mulai dengan membuat kisi-kisi.

.chart {
  display: grid;
  grid-template-rows: repeat(100, 1fr);
  /* etc. */
}

Indikator grafik didasarkan pada persentase, seperti “angka Skor penuh 100“. Katakanlah kita menggunakan grid dengan 100 baris. Itu seharusnya menjadi stress test, bukan?

Selanjutnya kita menambahkan bar ke grid grid-column Dan grid-row ciri:

.chart-bar {
  grid-column:  sibling-index();
  grid-row: span attr(data-value number);
  /* etc. */
}

Pertama, saya ingin menunjukkan beberapa hal. pertama adalah sibling-index() Fungsi. Ini baru dan belum memiliki dukungan browser penuh pada tulisan ini (ayolah, Firefox!), meskipun saat ini didukung di Chrome dan Safari terbaru (tetapi tampaknya tidak di iOS). diikuti oleh attr() Fungsi. Kami telah menggunakannya selama beberapa waktu, namun baru-baru ini ditingkatkan dan sekarang menerima atribut data. Jadi ketika kita memiliki salah satu dari ini di markup kita – itu seperti data-value="32" –Inilah yang dapat dibaca oleh fungsi tersebut.

Dengan ini, kita dapat membuat diagram batang yang sangat bagus menggunakan CSS biasa! Demo berikut memiliki fallback sehingga Anda masih dapat melihat hasil akhirnya jika browser Anda tidak mengadopsi fitur baru ini:

Ya, itu mudah dilakukan, tetapi lebih baik mengetahui secara pasti Mengapa itu berhasil. Jadi, mari kita uraikan.

Secara otomatis membuat kolom kisi

Mengumumkan sibling-index() berfungsi di grid-column milik secara eksplisit Tempatkan item daftar di kolom yang berurutan. Saya mengatakan “secara eksplisit” karena kami memberi tahu grid di mana menempatkan setiap item berdasarkan posisi spesifiknya data-value atribut dalam tag. itu berjalan duluan <li> Di kolom pertama, di kolom kedua <li> Di kolom kedua, dan seterusnya.

ini adalah kekuatan sibling-index() — Grid akan dengan cerdas membuatkan pesanan untuk kita tanpa harus melakukannya secara manual melalui variabel CSS.

/* First bar: sibling-index() = 1 */
grid-column: sibling-index();

/* ...results in: */
grid-column: 1;
grid-column-start: 1; grid-column-end: auto;

/* Second bar: sibling-index() = 2 */
grid-column: sibling-index();

/* ...results in: */
grid-column: 2;
grid-column-start: 2; grid-column-end: auto;

/* etc. */

Secara otomatis membuat baris grid

Hampir sama! Namun dalam kasus ini, setiap batang menempati sejumlah baris tertentu berdasarkan persentase yang diwakilinya. Grid mendapatkan nilai-nilai ini dari data-value Properti dalam penanda yang secara efektif memberi tahu kisi-kisi ketinggian setiap batang pada bagan.

/* First bar: data-value="32" */
grid-row: span attr(data-value number);

/* ...results in: */
grid-row: span 32

/* Second bar: data-value="46" */
grid-row: span attr(data-value number);

/* ...results in: */
grid-row: span 46

ini attr() fungsi, ketika menyediakan a tipe data Parameter (nilai parameter number Dalam kasus kami), konversikan nilai yang diambil attr() ke dalam genre tertentu. Dalam contoh kita, attr() nilai kembalian fungsi data-value sebagai <number> tipe, yang kemudian digunakan untuk menentukan jumlah baris yang akan direntang untuk setiap batang.

Ayo buat grafik yang berbeda!

Sekarang kita sudah memahami dasar-dasar pendekatan ini, saya pikir saya akan mendorongnya lebih jauh dan mendemonstrasikan bagaimana teknik yang sama dapat diterapkan pada berbagai grafik CSS murni.

Misalnya kita bisa menggunakan grid-row Sesuaikan nilai vertikal bilah:

Atau kita dapat melewatkan seluruh subbagian dan menggunakan penanda sebagai gantinya:

Kita juga dapat menukar kolom dan baris diagram batang horizontal:

Meringkaskan

Cukup mengasyikkan, bukan? Lihat saja semua metode yang kami gunakan untuk menerapkan hal-hal ini di masa lalu. sibling-index() dan versi yang ditingkatkan attr():