Karşı set - CSS Hileleri

İçindekiler:

Anonim

counter-setCSS özelliği, gerçek adının, CSS sayaç için başlangıç değerini ayarlar. Sıralı listelerin nasıl 1'den başlayıp oradan nasıl arttığını biliyor musunuz? counter-setMülkiyet, bir şeye değer başlayan başka, demek o sete bizi tanır -1. Veya 2. Veya 200! Sıralı listeler yerine CSS sayaçlarına uygulanması dışında.

Öyleyse, kitap bölümlerinin bir listesi için özel bir sayacımız olduğunu varsayalım, burada bölüm numarası bölüm adının önüne eklenmiştir.

counter-resetÖzellik ile bir sayaç tanımlayarak başlayabiliriz . Onu arayacağız chapterve onu yaratıcı bir şekilde adlı bölümlerimiz için bir üst konteyner sınıfında tanımlayacağız .chapters.

.chapters ( counter-reset: chapter; )

Ardından, özelliği chapterkullanarak sayacı bir öğeye atarız counter-increment. Bunlar kitap bölümleri olduğundan, bunları

öğeler, kitap başlığının şu olacağını varsayarak

. Sayacımızı gerçek :beforeöğenin başına eklememize izin verdiği için aslında onu sözde öğeye atadığımıza dikkat edin.

öğesi. 
h2:before ( counter-increment: chapter; )

Harika, ihtiyacımız olan son şey tezgaha ne göstermesi gerektiğini söylemektir. Bu, contentmülk üzerinde counter()işlev aracılığıyla yapılır . Tasarım gerektirdiği için tezgahın üzerine de biraz renk atacağız.

h2:before ( color: red; content: "Chapter " counter(chapter) ": "; counter-increment: chapter; )

Hey, iyi görünüyoruz!

Fakat bekle! Bölüm 1'den başladığımız gerçeğini gerçekten araştırmıyorum. Yani, "İleri" gerçekten bir bölüm değil. Bir şey varsa, Bölüm 0 gibi.

İşte burada counter-setdevreye giriyor! İşleri sıfırdan başlayacak şekilde ayarlayalım:

h2:first-of-type::before ( counter-set: chapter; )

Oraya gidiyoruz! Bu daha iyi. Sadece özellik değerini sayacın adına ayarlayarak, bölümlerin listesini Bölüm 0'dan başlayacak şekilde ayarladık. Bölüm 100 gibi başka bir şeyden başlamasını da aynı kolaylıkla ayarlayabilirdik.

Ve bir tarayıcı desteklemiyorsa counter-set? Gerçekten hiçbir şey. Basitçe yok sayılacak ve liste varsayılan konumunda başlayacaktır 1.

Sözdizimi

( ? )+ | none

Bu, temelde, özelliğin özel bir sayacın adını ( ) ve başlangıç ​​değerini ( ) aldığını söylemenin süslü bir yoludur . Veya olarak ayarlayın noneve numaralandırma varsayılan başlangıç ​​noktasında başlayacaktır 1.

  • Başlangıç ​​değeri: none
  • Şunlar için geçerlidir: tüm öğeler (görsel olmayanlar dahil)
  • Devralındı: hayır
  • Animasyon türü: hesaplanan değer türüne göre

Değerler

/* Set "awesome-counter" to 0 */ counter-set: awesome-counter; /* Set "awesome-counter" to -10 */ counter-set: awesome-counter -10; /* Set "awesome1" to 0, and "awesome2" to 2 */ counter-set: awesome1 awesome2 2; /* Wipe out any other settings that may have been declared elsewhere */ counter-set: none; /* Global values */ counter-set: inherit; counter-set: initial; counter-set: unset;

counter-setÜzerinde belirtilen sayaç adı başka bir yerde tanımlanmamışsa yeni bir sayaç oluşturacağını unutmayın .

Tarayıcı desteği

IE Kenar Firefox Krom Safari Opera
Hayır Hayır 68+ Hayır Hayır Hayır
Android Chrome Android Firefox Android Tarayıcı iOS Safari Opera Mini
Hayır 79+ Hayır Hayır Hayır
Kaynak: caniuse

daha fazla okuma

  • CSS Listeleri Modül Seviye 3 Spesifikasyonu (Çalışma Taslağı)
  • Mevcut Adımın CSS Sayaçlarıyla Görüntülenmesi
  • CSS Sayaçları ve Izgara ile Sayma
  • CSS Özel Sayaçlarını Ters Çevirme