CSS @counter-style kuralı

Tanımlama ve Kullanım

CSS @counter-style Kural, özelleştirilmiş sayıcı stili tanımlamak için kullanılır.

Öntanımlı stiller ihtiyaçlarınıza uygun değilse,@counter-style Kural, kendi sayıcı stili tanımlamanıza olanak tanır.

Örnek

Listelere özelleştirilmiş sayıcı stili atayın:

@counter-style crown {
  system: cyclic;
  symbols: "\1F451";
  suffix: " ";
}
ul {
  list-style: crown;
}

Kişisel olarak deneyin

CSS dilbilgisi

@counter-style countername {
  Bir veya daha fazla tanımlayıcı
}

Özellik değeri

Değer Açıklama
countername

Sayacı tarzının büyük/küçük harfe duyarlı adını tanımlar.

Uyarı: Sayacı ismi none, decimal, disc, square, circle, disclosure-open veya disclosure-closed olamaz.
system

Sayacının tam sayı değerini dizgeye dönüştüren algoritmayı tanımlar.

system: döngüsel, sayısal, alfabik, sembolik veya sabit olarak ayarlandığında symbols tanımlayıcısı gereklidir.

system: artımsal olarak ayarlandığında additive-symbols tanımlayıcısı gereklidir.
symbols

İşaret için kullanılacak simgeleri (dizgi, resim veya özelleştirilmiş tanımlayıcı olabilir) tanımlar.

system tanımlayıcısı döngüsel, sayısal, alfabik, sembolik veya sabit olarak ayarlandığında zorunludur.

HTML UTF-8 simgeleri.
additive-symbols

Artımsal sistemin eklenmiş gruplarını tanımlar.

Artımsal sayıcı sistemleri (örneğin, Roma rakamları) bir dizi ağırlıklı simgeden oluşur.

Ağırlıkla azalan sırayla sıralanmış, sayacı simgeleri ve olumlu tamsayı ağırlıkları listesi olan tanımlayıcıdır.

system tanımlayıcısı artımsal olarak ayarlandığında zorunludur.
negative Değer negatif olduğunda, işaretin başına veya sonuna eklenmesi gereken ekran adımını tanımlar.
prefix İşaretin başına eklenmesi gereken ekran adımını tanımlar.
suffix İşaretin sonuna eklenmesi gereken ekran adımını tanımlar.
range

Sayacı tarzının değer aralığını tanımlar.

Sayacı değeri aralık dışına çıktığında, yedek tarzına geri dönülür.
pad

İşaretin en az uzunluğu gerektirdiği durumda bu tanımlayıcıyı kullanın.

Örneğin, sayacı 01'den başlatıp 02, 03, 04 gibi sırayla devam ettirmek istiyorsanız, pad tanımlayıcısını kullanın.

Belirtilen pad değeri büyükse, sayacı normalde oluşturulur.
speak-as

Sesli sentezleyicinin sayacı tarzını nasıl okuyacağını tanımlar.

Örneğin, sıralı liste için rakam veya harf olarak okunur; sırasız liste için sesli uyarı olarak okunur.
fallback

Sistemin işaret oluşturamaması veya belirtilen aralık dışına çıkması durumunda geri dönülmesi gereken sayacı adını tanımlar.

Yedek sayacı veya yedek sistemin sayacı değeri ifade edememesi durumunda, ondalık tarzına geri dönülür.

Tarayıcı desteği

Tablo içindeki rakamlar, bu @ kuralını tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
91 91 33 17 77