CSS ile Sayaç Yapımı

AbakusCSS’nin derinliklerinde CSS sayaçları bulacaksınız. Adından da anlaşılacağı gibi bunlar sayfanızda birşey saymanıza imkan tanıyor. Devamlı artan değerler, CSS ile sayfanızda görünüyor.

CSS’in bu işlevi; eğitici bir websiteniz varsa kullanılabilirliği daha yüksek olur. – bu site yemek tarifi sitesi de olabilir, web programlama sitesi de –

Bunların hepsinde birbirini takip eden adımlar bulunur ve muhtemelen içerikten önce adım numarasını yazmak zorunda kalırsınız. CSS sayaçları adımlama işlemlerini otomatik yaparak yardımcı olabilir. Hatta resimleri saydırıp başlıklarının önüne numara ekleyebilirsiniz.

Örnekte; CSS seçicileri yardımıyla paragraf başlarını arayıp adım numarasını her paragrafın öncesine eklemeyi gösterdim.

HTML kısım:

Bu HTML yapıda, her paragraf farklı bir adımdır ve biz dinamik olarak CSS ile ekleyeceğiz. 3 satırlık küçük bir kod parçası yazacağız.

<section>
	<p>Adım bir için madde</p>
	<p>Adım iki için madde</p>
	<p>Adım üç için madde</p>
	<p>Adım dört için madde</p>
	<p>Adım beş için madde</p>
</section>

CSS Kısım:

CSS sayaçlar artırma özelliğini kullanır. Aslında CSS 2.1’de gelmiş olan bir özellikmiş. Adımları saydırıp yazmadan önce sayacı sıfırlamalıyız.

body {
counter-reset: adimlar;
}

Bu satır hem sayacı sıfırlar hem de sayacın adını belirler. Örneğimizde sayacımızın adı “adimlar”. Bu isimlendime, sayfamızda birden fazla sayaca izin verir.

Bir sonraki adım; :before elementi ile hedefteki paragrafların öncesine adım numarasını eklemek. Bunu yaparken counter-increment‘e ihtiyacınız var. Daha sonra içeriği belirtin. (content özelliği ile). Sadece numarayı kullanabildiğiniz gibi numaranın önüne ya da arkasına yazı da ekleyebilirsiniz. Biz sayacın önüne “Adım: ” yazalım.

p:before {
  counter-increment: adimlar;
  content: "Adım " counter(adimlar) ": ";
}

Ayrıca biz bu yazıyı biraz öne çıkarmalıyız. Paragraftan önce bu yazılara daha büyük font büyüklüğü verelim.

p {
 color: #242424;
 font-family: arial, sans-serif;
 font-size: 16px;
 line-height: 20px;
}

p:before {
  counter-increment: adimlar;
  content: "Adım " counter(adimlar) ": ";
  font-weight: bold;
  font-size: 18px;
}

Ekran Görüntüsü:

css-sayac

Tarayıcı Desteği:

Tarayıcı desteği, CSS ile çalışanların sürekli endişesidir. Fakat bu CSS 2.1 uygulaması için tarayıcı desteği büyük. Tüm büyük tarayıcılar tarafından desteklendi. Masaüstü ve mobilde tek önemli tarayıcı IE 7 desteklemiyor. Destekleme ihtiyacınız olsun ya da olmasın IE7, sizin sitenizin istatistiklerine bağlıdır.

Sonuç

CSS sayacı her projenizde kullanacağınız birşey değil. Fakat aklınızın bir köşesinde tutmalısınız. Elbet bir gün yararını görürsünüz 🙂

Bu yazı Web Tasarım kategorisine gönderilmiş ve , , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

CSS ile Sayaç Yapımı için 1 cevap

  1. Batuhan der ki:

    Teşekkürler işime yarıyacak

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir