Beberapa hal yang mungkin tidak Anda ketahui tentang gaya penghitung khusus

24/01/2025

Saya sedang membaca entri terakhir Juan di kalender @counter-style Pada dasarnya, dan saya akan ngeri jika tidak mengungkapkan dan membongkar beberapa hal menarik yang dapat kita lakukan untuk menata menu, khususnya tag menu. Anda mungkin sudah menyadarinya ::marker Barang palsu. Anda mungkin pernah mencoba-coba penggunaan penghitung khusus counter-reset Dan counter-increment. Atau mungkin cara Anda melakukan sesuatu adalah menghapus list-style (Berhati-hatilah saat melakukan ini!) Dan secara manual berikan tanda pada item menu ::before PALSU.

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

-Advertisement-.

proxmox
netbird

Anda dapat mendesain label hanya untuk satu item menu

Ini disebut “tetap” system Ditugaskan ke item tertentu.

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

li {
  list-style: style-fourth-item;
}
Sertakan Cadangan CodePen

Anda dapat menetapkan huruf ke tag tertentu

Jika Anda memilih “aditif” systemKemudian Anda dapat memilih ikon milik item menu.

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

li {
  list-style: dice;
}
Sertakan Cadangan CodePen

Perhatikan caranya system Ini berulang setelah mencapai akhir siklus dan memulai rantai baru berdasarkan elemen pertama dalam pola tersebut. Jadi, misalnya, sebuah dadu biasa memiliki enam sisi dan kita mulai melempar dua dadu pada item ketujuh dalam daftar, sehingga totalnya ada tujuh.

Anda dapat menambahkan awalan dan akhiran ke daftar tag

Dahulu kala, Chris menunjukkan cara menyisipkan tanda baca di akhir tag daftar menggunakan item daftar ::before PALSU:

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

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

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

Ini jauh lebih mudah saat ini dengan @counter-styles:

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

Anda dapat mendesain beberapa rentang item menu

Katakanlah Anda memiliki daftar 10 item tetapi Anda hanya ingin mendesain item 1-3. Kita dapat mengatur a range Jadi:

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

li {
  list-style: single-range;
}
Sertakan Cadangan CodePen

Kami bahkan bisa extend Contoh dadu kami 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;
}
Sertakan Cadangan CodePen

Cara lain untuk melakukan ini 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;
}

Berbicara tentang infiniteAnda dapat menetapkannya sebagai nilai kedua dan nilai tersebut akan dihitung tanpa batas untuk berapa pun jumlah item daftar yang Anda miliki.

Mungkin Anda ingin mendesain dua pita sekaligus dan menyertakan item 6-9. Saya tidak yakin mengapa Anda ingin melakukan ini, tetapi saya yakin Anda (atau kuda nil Anda) 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;
}
Sertakan Cadangan CodePen

Anda dapat menambahkan padding di sekitar tag menu

Pernahkah Anda menghadapi situasi di mana tag menu Anda tidak sejajar? Ini biasanya terjadi ketika berpindah dari satu digit ke dua digit, misalnya. Anda bisa pad Tag yang berisi huruf tambahan untuk mengatur sesuatu.

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

Sekarang tag akan selalu disejajarkan… yah, hingga 999 item.

Sertakan Cadangan CodePen

Itu saja!

Saya pikir ini adalah beberapa cara menarik untuk bekerja dengan tag daftar di CSS yang dipicu <>menangkal (Mengerti?!) Bagaimana saya biasanya menangani hal semacam ini. Dan dengan @counter-style Baseline menjadi “baru tersedia” pada bulan September 2023, dan didukung dengan baik di browser.

Beberapa Hal yang Mungkin Tidak Anda Ketahui Tentang Gaya Penghitung Kustom Awalnya diterbitkan di CSS-Tricks, yang merupakan bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.

Sumber

-Advertisement-.

IDJ