- `counter-increment` özelliği, geliştiricilerin `counter` adı verilen bir CSS değişkeninin değerini dinamik olarak artırmasına veya azaltmasına olanak tanır.
- Etkin numaralandırma, sayacı başlatmak için sayaç sıfırlama ve değeri görüntülemek için counter() fonksiyonunun bir kombinasyonunu gerektirir.
- Gelişmiş kullanım seçenekleri arasında, counters() fonksiyonu kullanılarak iç içe sayaçlar ve Roma rakamlarıyla veya alfabetik listelerle özel biçimlendirme yer almaktadır.
Uzun bir belgeye baktığınızda, her yeni bölüm eklediğinizde "1, 2, 3" diye manuel olarak yazmak yerine başlıklarınızı otomatik olarak numaralandırabilmeyi dilediğiniz oldu mu hiç ? Şanslısınız, çünkü CSS'nin bunu halletmenin yerleşik bir yolu var. CSS sayaçlarını, tarayıcı sayfanızı oluştururken sayıları takip eden dahili değişkenler olarak düşünün ; bu sayede anında kendilerini güncelleyen listeler ve diziler oluşturabilirsiniz.
İlk bakışta JavaScript gerektiren bir şey gibi görünse de, bu araçlar tarayıcıya özgüdür ve inanılmaz derecede hafiftir. Diğer özelliklerle birlikte sayaç artırma özelliğini kullanarak , düz HTML öğelerini yapılandırılmış, numaralı bir diziye dönüştürebilir, böylece içeriğinizin kullanıcılarınız için gezinmesini çok daha kolay hale getirirken, işaretlemenizi temiz ve anlamsal tutabilirsiniz.
Temel Mekanik: Nasıl Çalışır
Bu sayaçları çalışır hale getirmek için tek bir özellik kullanmak yeterli değil; birlikte çalışan küçük bir CSS kuralları ekibine ihtiyacınız var. İlk olarak, başlangıç çizgisi görevi gören `counter-reset` özelliği var. Bu özellik, belirli bir ad ve isteğe bağlı olarak bir başlangıç numarasıyla bir sayacı başlatır. Bir sayı belirtmezseniz, varsayılan olarak 0 değerini alır . Örneğin, ilk öğenizin 1 olmasını istiyorsanız, öğeler görünmeden önce sayacı 0'a sıfırlamanız gerekir.
Ardından gösterinin yıldızı geliyor: sayaç artırma . Bu özellik, tarayıcıya belirli bir seçiciyle karşılaştığı her seferinde adlandırılmış sayacınıza bir değer eklemesini söyler. Varsayılan olarak 1 ekler, ancak herhangi bir tamsayı belirtebilirsiniz . -1 gibi negatif bir sayı kullanırsanız, sayaç aslında geriye doğru sayar; bu da geri sayımlar veya ters listeler oluşturmak için kullanışlı bir yöntemdir. Bir sayacın belirli bir alanda artmasını durdurmanız gerekiyorsa, bunu "none" olarak ayarlayabilirsiniz.
Sayıları Ekrana Getirmek
Yeni başlayanları zorlayan şeylerden biri de şudur: sayaçlar görünmezdir Varsayılan olarak. Bunlar sadece tarayıcının belleğinde yüzen sayılardır. Bunları gerçekten görebilmek için şunu kullanmalısınız: içerik özelliğigenellikle bir ::before or ::after sözde öğe. İşte burası sayaç() fonksiyonu Bu kod devreye girer ve değişkeninizin mevcut değerini alıp metin olarak yazdırır.
- Temel uygulama: Numaralandırmak istediğiniz öğeyi hedefleyin, uygulayın.
counter-incrementve sonra kullanıncontent: counter(name);bir sözde öğe içinde. - Özel Dizeler: Sadece sayıyla sınırlı değilsiniz. metni birleştirGibi
content: \"Step \" counter(my-counter) \": \";Daha profesyonel bir görünüm yaratmak için. - Çıktıyı Şekillendirme: Fonksiyona ikinci bir argüman geçirerek sayının görünümünü değiştirebilirsiniz. Örneğin, yukarı romen size Roma rakamlarını verecektir, düşük alfa Harflendirilmiş bir liste sunar.
Gelişmiş Teknikler ve Gerçek Dünya Kullanım Örnekleri
Eğer ilgileniyorsan iç içe geçmiş yapılarİçindekiler tablosunda 1, 1.1 ve 1.1.1 gibi bölümler olduğu gibi, tek bir sayaç yeterli değildir. İşte burada devreye giriyor... sayaçlar() fonksiyonu (çoğul) hayat kurtarıcıdır. Tekil halinden farklı olarak, counters() birden fazla iç içe geçmiş seviyeyi takip edebilir ve onları bir iple birleştirinÖrneğin, nokta gibi bir işaret kullanarak hiyerarşik bir numaralandırma sistemi oluşturulabilir.
Çok pratik bir uygulama da eklemektir. satır numaralarını kod bloklarına dönüştürünVarsayılan olarak numaralandırmayı desteklemeyen sözdizimi vurgulayıcıları kullanırken, CSS ile kod satırlarını hedefleyebilirsiniz. Sayacı sıfırlayarak... <pre> etiket ve her seferinde artırılması .line sınıf oluşturuyorsunuz kesintisiz numaralandırma sütunu JavaScript mantığınıza dokunmadan.
Bir diğer zekice numara da şudur: kardeşleri saymak Teknik olarak iç içe geçmemiş olanlar. Eğer bir diziye sahipseniz, <h2> hem de <h3> Etiketleri oluşturabilirsiniz. <h2> sıfırla <h3> Bu bir sayaç oluşturur. Bu bir sayaç oluşturur. mantıksal sıra DOM'da hepsi kardeş öğe olsalar bile, yeni bir ana başlık göründüğünde alt başlıklar her seferinde 1'den yeniden başlıyor.
Erişilebilirlik Hakkında Birkaç Söz
CSS sayaçlarını kullanarak herhangi bir div grubunu liste gibi göstermek cazip gelse de dikkatli olmalısınız. Anlamsal HTML kraldır.İçerik mantıksal olarak bir liste ise, şunu kullanın: <ol> hem de <li>CSS kullanarak liste görünümünü taklit etmek harika bir yöntemdir. görsel dekorasyon Ya da başlıklara numara eklemek gibi, ancak bu, ekran okuyucuların bir sayfada etkili bir şekilde gezinmek için güvendiği temel yapıyı değiştirmemeli.
Sayaç sıfırlama, sayaç artırma ve counter() fonksiyonunun gücünden yararlanarak , statik numaralandırmadan uzaklaşabilir ve tüm matematiksel işlemleri sizin için halleden dinamik bir sisteme geçebilirsiniz. İster iç içe bölümler içeren karmaşık bir teknik kılavuz oluşturuyor olun, ister bir blogun kod parçacıklarına biraz ince ayar ekliyor olun, bu araçlar sıralamayı doğrudan stil sayfalarınızda yönetmenin sağlam ve yüksek performanslı bir yolunu sunar.
