Beberapa Hal yang Mungkin Tidak Anda Ketahui Tentang Gaya Penghitung Kustom

Saya sedang membaca entri Almanak terbaru Juan untuk @counter-style at-rule dan saya akan terkutuk jika dia tidak mengungkap dan membongkar beberapa hal yang sangat menarik yang dapat kita lakukan untuk menata daftar, terutama penanda daftar. Anda mungkin sudah mengetahuinya ::marker elemen semu. Kemungkinan besar Anda pernah mencoba-coba penggunaan penghitung khusus counter-reset Dan counter-increment. Atau mungkin cara Anda melakukan sesuatu adalah dengan memusnahkannya list-style (hati-hati saat melakukan itu!) dan gulingkan penanda pada item daftar dengan tangan ::before semu.

Tapi pernahkah Anda bermain-main dengannya @counter-style? Ternyata hal ini memberikan banyak pekerjaan berat dan membuka cara baru dalam bekerja dengan daftar dan penanda daftar.

Anda dapat mengatur gaya penanda hanya pada satu item daftar

Ini disebut “tetap” system diatur ke item tertentu.

@counter-style style-fourth-item {
  system: fixed 4;
  symbols: "💠";
  suffix: " ";
}

li {
  list-style: style-fourth-item;
}

Anda dapat menetapkan karakter ke penanda tertentu

Jika Anda memilih “aditif” systemlalu Anda dapat menentukan simbol mana yang termasuk dalam item daftar mana.

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

li {
  list-style: dice;
}

Perhatikan bagaimana system berulang setelah mencapai akhir siklus dan memulai rangkaian baru berdasarkan item pertama dalam pola. Jadi, misalnya, ada enam sisi pada dadu biasa dan kita mulai melempar dua dadu pada item daftar ketujuh, totalnya tujuh.

Anda dapat menambahkan awalan dan akhiran ke penanda daftar

Beberapa waktu yang lalu, Chris memamerkan cara menyisipkan tanda baca di akhir penanda daftar menggunakan item daftar ::before semu:

ol {
  list-style: none;
  counter-reset: my-awesome-counter;

  li {
    counter-increment: my-awesome-counter;

    &::before {
      content: counter(my-awesome-counter) ") ";
    }
  }
}

Itu jauh lebih mudah hari ini dengan @counter-styles:

@counter-style parentheses {
  system: extends decimal;
  prefix: "(";
  suffix: ") ";
}

Anda dapat mengatur gaya beberapa rentang item daftar

Katakanlah Anda memiliki daftar 10 item tetapi Anda hanya ingin menata item 1-3. Kita dapat mengatur a range untuk itu:

@counter-style single-range {
  system: extends upper-roman;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

Kami bahkan bisa extend contoh dadu kita sendiri dari sebelumnya:

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

Cara lain untuk melakukannya adalah dengan menggunakan infinite kata kunci sebagai nilai pertama:

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: infinite 3;
}

li {
  list-style: single-range;
}

Omong-omong infiniteAnda dapat menetapkannya sebagai nilai kedua dan nilai tersebut akan dihitung tanpa batas untuk item daftar sebanyak yang Anda miliki.

Mungkin Anda ingin menata dua rentang sekaligus dan menyertakan item 6-9. Saya tidak yakin mengapa Anda ingin melakukan itu, tetapi saya yakin Anda (atau Anda kuda nil) punya alasan bagus.

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style multiple-ranges {
  system: extends dice;
  suffix: ".";
  range: 1 3, 6 9;
}

li {
  list-style: multiple-ranges;
}

Anda dapat menambahkan padding di sekitar penanda daftar

Pernahkah Anda menghadapi situasi di mana penanda daftar Anda tidak sejajar? Hal ini biasanya terjadi ketika beralih dari, katakanlah, satu digit ke dua digit. Anda bisa pad penanda dengan karakter tambahan untuk mengatur segalanya.

/* adds leading zeroes to list item markers */
@counter-style zero-padded-example {
  system: extends decimal;
  pad: 3 "0";
}

Sekarang penandanya akan selalu sejajar… yah, hingga 999 item.

Itu saja!

Saya hanya berpikir itu adalah beberapa cara yang cukup menarik untuk bekerja dengan penanda daftar di CSS yang dijalankan menangkal (mengerti?!) tentang bagaimana saya secara tradisional melakukan pendekatan terhadap hal semacam ini. Dan dengan @counter-style menjadi Baseline “baru tersedia” pada bulan September 2023, ini didukung dengan baik di browser.