Penghitung Gaya di CSS | – Beragampengetahuan

ini system Deskriptor

ini symbols atau additive-symbols Deskriptor mendefinisikan karakter yang digunakan untuk gaya counter, dan system Katakan bagaimana menggunakannya.

efisien system Nilai adalah:

• cyclic
• alphabetic
• symbolic
• additive
• fixed
• extends

cyclic Akan melewati karakter yang ditetapkan symbols Dan ulangi mereka. Kami hanya bisa symbols Daftar peluru imitasi:

@counter-style cyclic-example {
  system: cyclic;
  symbols: "⏵";
  suffix: " ";
}

Atau alternatif antara dua atau lebih karakter:

@counter-style cyclic-example {
  system: cyclic;
  symbols: "🔸" "🔹";
  suffix: " ";
}

fixed Akan ada di sini symbols Deskriptor hanya sekali. Dalam contoh sebelumnya, jika diatur ke fixeddan yang lainnya akan jatuh pada milik mereka fallbacksecara default, desimal.

@counter-style multiple-example {
  system: fixed;
  symbols: "🔸" "🔹";
  suffix: " ";
}

Saat penghitung kustom dimulai, kami dapat mengaturnya <integer> tiba fixed nilai. Misalnya, penghitung kustom berikut akan dimulai dengan item keempat:

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

numeric Akan menggunakan satu Sistem Lokasi Kustom (Base-2, Base-8, Base-16, dll.). Sistem posisi dimulai pada 0, jadi symbols Akan digunakan sebagai 0, selanjutnya sebagai 1, dan seterusnya. Mengetahui hal ini, kita dapat memesan daftar menggunakan sistem numerik non-sepuluh seperti hexadecimal:

@counter-style numeric-example {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "A" "B" "C" "D" "E" "F";
  suffix: ". ";
}

9. roti
10. mentega
11. susu
12. apel

alphabetic Daftar item akan disebutkan menggunakan sistem huruf khusus. Ini mirip dengan sistem numerik, tetapi perbedaan utamanya adalah tidak memiliki 0 karakter, jadi itu hanya mengulangi angka berikutnya. Misalnya, jika kami symbols Ya "A" "B" "C" Mereka akan membungkus "AA", "AB", "AC"Kemudian BA, BB, BC dll.

Karena tidak ada nilai 0 dan negatif yang setara, mereka akan ketinggalan di belakang fallback mereka.

@counter-style alphabetic-example {
  system: alphabetic;
  symbols: "A" "B" "C";
  suffix: ". ";
}

1. roti
2. mentega
3. susu
4. apel
5. Kayu manis

symbolic Dapat menelusuri karakter symbols Ulangi setiap iterasi lagi. Jadi, misalnya, jika kami symbols Ya "A", "B", "C"itu menggandakan mereka dalam iterasi berikutnya menjadi “AA”, “BB” dan “CC”, dan kemudian melipatgandakan mereka sebagai “AAA”, “BBB”, “CCC” dll.

Karena tidak ada nilai 0 dan negatif yang setara, mereka akan ketinggalan di belakang fallback mereka.

@counter-style symbolic-example {
  system: symbolic;
  symbols: "A" "B" "C";
  suffix: ". ";
}

1. roti
2. mentega
3. susu
4. apel
5. Kayu manis

additive Karakter diberikan nilai numerik dan ditambahkan bersama untuk mendapatkan representasi penghitung. Anda dapat menganggapnya sebagai cara kami biasanya menghitung tagihan: jika kami hanya memiliki $ 5, $ 2 dan $ 1 tagihan, kami akan menambahkannya bersama untuk mendapatkan jumlah yang dibutuhkan dan mencoba untuk menjaga setidaknya jumlah tagihan yang digunakan. Jadi untuk mewakili 10, kami akan menggunakan dua tagihan $ 5, bukan tagihan $ 10 $ 1.

Karena tidak ada nilai negatif yang setara, mereka akan tertinggal di belakang fallback mereka.

@counter-style additive -example {
  system: additive;
  additive-symbols: 5 "5️⃣", 2 "2️⃣", 1 "1️⃣";
  suffix: " ";
}

Perhatikan bagaimana kami menggunakannya additive-symbols Saat sistemnya additivedan kami hanya menggunakan symbols Untuk sistem sebelumnya.

extends Gaya khusus akan dibuat dari gaya kustom lain, tetapi akan dimodifikasi. Untuk melakukan ini, itu perlu <counter-style-name> setelah extends nilai. Misalnya, kita bisa berubah decimal Nilai default gaya penghitung suffix Penutupan kurung (")") `:

@counter-style extends-example {
  system: extends decimal;
  suffix: ") ";
}

1. roti
2. mentega
3. susu
4. Kayu manis

Menurut spesifikasi, @counter-style menggunakan extends Sistem, itu tidak boleh mengandung a symbols atau additive-symbols deskriptor, jika tidak @counter-style Aturannya tidak valid. “

Deskriptor lainnya

ini negative Deskriptor memungkinkan kita untuk membuat representasi khusus untuk nilai negatif dari daftar. Ini dapat memakan satu atau dua karakter: Karakter pertama disiapkan ke konter, secara default Tanda penghubung (("-"). Yang kedua melekat pada simbol. Misalnya, kita dapat memasukkan representasi negatif dalam tanda kurung (2), (1), 0, 1, 2:

@counter-style negative-example {
  system: extends decimal;
  negative: "(" ")";
}

-2. roti
-1. mentega
0. susu
1. apel

ini prefix Dan suffix Deskriptor memungkinkan kita untuk memulai dan menambahkan karakter dalam representasi counter, masing-masing. Kita dapat menggunakannya untuk menambahkan karakter di awal setiap konter prefix:

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

ini range Definisi deskriptor Inklusif Gunakan rentang gaya counter. Kita dapat mendefinisikan ruang lingkup terbatas dengan menulis satu <integer> Di sebelahnya ada yang lain. Misalnya, kisaran 2 4 akan mempengaruhi elemen 2, 3 dan 4:

@counter-style range-example {
  system: cyclic;
  symbols: "‣";
  suffix: " ";
  range: 2 4;
}

• roti
• mentega
• susu
• apel
• Kayu manis

Di sisi lain, gunakan infinite Nilai Kami dapat membatalkan rentang ke satu sisi. Misalnya, kita bisa menulis infinite 3 Oleh karena itu, semua hingga 3 item memiliki gaya terbalik:

@counter-style range-example {
  system: alphabetic;
  symbols: "A" "B" "C";
  suffix: ". ";
  range: infinite 3;
}

• roti
• mentega
• susu
• apel
• Kayu manis

ini pad Deskriptor <integer> Ini mewakili lebar minimum penghitung dan mengisinya dengan karakter. Misalnya, gaya counter yang diisi nol terlihat seperti ini:

@counter-style pad-example {
  system: extends decimal;
  pad: 3 "0";
}

ini fallback Deskriptor memungkinkan Anda untuk mendefinisikan gaya penghitung mana yang diterapkan sebagai mundur ketika tidak dapat mewakili jumlah tertentu. Misalnya, gaya penghitung berikut adalah fixed Dan akan dipesan lower-roman Setelah item enam:

@counter-style fallback-example {
  system: fixed;
  symbols: "⚀" "⚁" "⚂" "⚃";
  fallback: lower-roman;
}

• roti
• mentega
• susu
• apel
• Kayu manis

akhirnya, speak-as Deskriptor itu mengisyaratkan pembaca suara bagaimana gaya penghitung harus dibaca. Mungkin:

• auto menggunakan system bawaan.
• bullets Baca daftar yang tidak teratur. Secara default, cyclic Sistem dibaca sebagai bullets
• numbers Baca nilai penghitung dalam bahasa konten. Secara default, additive,,,,, fixed,,,,, numericDan, symbolic Baca sebagai numbers.
• words Menunjukkan penghitung sebagai kata.
• spell-out Baca perwakilan penghitung melalui surat. Secara default, alphabetic Baca sebagai spell-out.
• <counter-style-name> Itu akan menggunakan konter speak-as nilai.

@counter-style speak-as-example {
  system: extends decimal;
  prefix: "Item ";
  suffix: " is ";
  speak-as: words;
}

symbols()

ini symbols() Fungsi menentukan satu -satunya gaya counter yang digunakan tanpa menyelesaikan @counter-styletetapi beberapa fitur hilang. Itu dapat digunakan secara internal list-style-type Properti dan counter() Dan counters() Fungsi.

ol {
  list-style-type: symbols(cyclic "🥬");
}

Namun, karena hanya didukung di Firefox, dukungan browsernya mengejutkan.