CSS Sayaçlar (Counters)

CSS Sayaçlar (Counters)

CSS sayaçları, değerleri CSS kuralları tarafından artırılabilen (kaç kez kullanıldıklarını izlemek için) CSS tarafından sağlanan "değişkenlerdir". Sayaçlar, içeriğin görünümünü belgedeki yerleşimine göre ayarlamanıza olanak tanır.

Sayaçlı Otomatik Numaralandırma

CSS sayaçlarıyla çalışmak için aşağıdaki özellikleri kullanabilirsiniz:

• counter-reset - Bir sayaç oluşturur veya sıfırlar.
• counter-increment - Bir sayaç değerini artırır.
• content - Oluşturulan içeriği ekler.
• counter() or counters() function - Bir öğeye bir sayacın değerini ekler.

Bir CSS sayacı kullanmak için önce counter-reset ile oluşturulmalıdır.

Aşağıdaki örnek, sayfa için bir sayaç oluşturur (gövde seçici (body selector)), ardından her <h2> öğesi için sayaç değerini artırır ve her <h2> öğesinin başına "Bölüm <sayacın değeri>: (Section <value of the counter>)" ekler:

Örnek:

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Yerleştirme Sayaçları

Aşağıdaki örnek, sayfa (bölüm (section)) için bir sayaç ve her <h1> öğesi (alt bölüm (subsection)) için bir sayaç oluşturur. "Bölüm (Section)" sayacı, "Bölüm <kesit sayacının değeri> (Section <value of the section counter>)" ile her <h1> öğesi için sayılır ve "<bölüm sayacının değeri>(<value of the section counter>) ile her <h2> öğesi için "alt bölüm (subsection)" sayacı sayılır.:

Örnek:

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Bir sayaç, alt öğelerde otomatik olarak yeni bir sayaç örneği oluşturulduğunda, anahatlı listeler yapmak için de yararlı olabilir. Burada, farklı iç içe sayaç seviyeleri arasına bir dize eklemek için counters() işlevini kullanıyoruz:

Örnek:

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}