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