CSS Sayaçları İle Listelemelerin Uzmanı Olun

CSS Sayaçlarını ilk keşfettiğimde mutluluktan havalara uçacak gibiydim! Kullanım alanlarına dair olasılıkları düşündükçe hep heyecanlanırım. Bu yazıda, sizinle beraber, bir listelemeyi özelleştirmek için CSS Sayaçlarını yani counter-reset ve counter-increment yordamlarını nasıl kullanabileceğimizi göreceğiz.

HTML’de en çok kullandığımız listeleme yöntemleri -bildiğiniz gibi- OL (Ordered List) ve UL (Unordered List)‘dir. Fakat bir projemde gerekene kadar bu listelemeyi nasıl özelleştireceğimi düşünmemiştim.

Aktif olarak kullanmayanlar için kısaca özetlemek gerekirse: Ordered List; 1. 2. 3. şeklinde sıra numaraları, Unordered List ise her maddenin başına bullet dediğimiz nokta veya özelleştirilerek farklı sembollerle yapılan ‘maddeleme’ şeklindeki sıralamalardır.

Aşağıda örneklerle inceleyeceğimiz ve Internet Explorer’ın da desteklediği bu CSS yöntemi sayesinde; hem <OL> kullanıp hem de sıralamalarımızı farklı şekillerde sunabileceğimizi göreceğiz. Şimdi çok sade bir HTML koduna, küçük CSS eklemeleriyle neler yapabileceğimize bir bakalım.

İlk olarak standart bir Ordered List kullandığımızda ne sonuç aldığımıza bakalım:

Kodumuz şu olsun:

<h2>Deprem sonrasında neler yapılmalı?</h2>
<ol>
 	<li>Çevreniz ve kendi emniyetinizden emin olduktan sonra binayı terk edin.</li>
 	<li>Elektrik, gaz ve su vanalarını kapatın, soba ve ısıtıcıları söndürün.</li>
 	<li>Afet ve acil durum çantanızı alarak toplanma alanına gidin.</li>
 	<li>Deprem sonrası yardıma ihtiyaç duyabileceklere destek olmaya çalışın.</li>
</ol>

Çıktısı ise şu şekilde olacaktır:

Pekiyi ama bu sunum zaten standart, ya bu sunumu özelleştirmek istersek?

Mesela bu 4 maddeyi yan yana sunmak istiyoruz diyelim.

O zaman tabii ki float:left‘li bir çözüm üretebileceğimiz gibi, genellikle projelere kullanılan Bootstrap’tan da yardım alabiliriz. Böylece olası responsive / mobil sunumlarını da tek seferde iyileştirmiş olacağız.

Bunun için <ol>‘mize bir row class’ı ekleyip <li>‘lerimize de gerekli genişlik/ölçek parametrelerini (col-md-3 col-sm-6 col-xs-2 gibi) girmemiz yeterli.

Bu durumda kodumuz şuna dönüşüyor:

<ol class="row">
	<li class="col-md-3 col-sm-6 col-xs-2">Çevreniz ve kendi emniyetinizden emin olduktan sonra binayı terk edin.</li>
	<li class="col-md-3 col-sm-6 col-xs-2">Elektrik, gaz ve su vanalarını kapatın, soba ve ısıtıcıları söndürün.</li>
	<li class="col-md-3 col-sm-6 col-xs-2">Afet ve acil durum çantanızı alarak toplanma alanına gidin.</li>
	<li class="col-md-3 col-sm-6 col-xs-2">Deprem sonrası yardıma ihtiyaç duyabileceklere destek olmaya çalışın."</li>
</ol>

Şimdiki ekran çıktımız:

Daha iyi oldu değil mi? Mobil cihazınızdan bakıyorsanız, hiç bir değişiklik görmüyorsunuzdur. Bu da istediğimiz şeydi zaten. Geniş ekranda yan yana gelen maddeler mobilde elbette ki alt alta gelecek 😉

Ama halâ geliştirilebilir. Örneğin sıra numaraları yazının yanında değil de neden üzerinde olmasın? Böylece metinlerimizi, masaüstü ekranımızda, 4 eşit sütunda ve daha ferah bir şekilde sunabiliriz.

Bunun için yine <ol> satırımıza bir class ekleyip (mesela adı ol-sunum olsun) <li>‘lerimizi de geliştirebiliriz.

Gelelim CSS Sayaçları’nın Faydalarına

Burada işin içinde CSS’in counter-reset ve counter-increment yordamlarını sokuyoruz. Bu yordamlar sayesinde standart sıralamadan çıkıp, sıra numaralarının idaresini CSS Sayaçlarını kullanarak HTML’den CSS’e devretmiş oluyoruz.

CSS Satırlarımız şu şekilde:

.ol-sunum  {margin:0; padding:0; counter-reset:sira;}
.ol-sunum  li {display:inline-block; vertical-align:top; color:#666; margin-bottom:2rem}
.ol-sunum  li::before {display:block; font-size:1.6rem; line-height:3rem; font-weight:300; color:#aaa; counter-increment:sira; content: "" counter(sira) "";}

HTML’de ise sadece <ol> satırımıza ol-sunum class’ını ekledik:

<ol class="row ol-sunum">

Sonuç:

 

Daha farklı sunumlar olamaz mı?

Hayal gücünüzle sınırlı. Mesela:

CSS

.ol-2 {margin:0; padding:0; counter-reset:sira;}
.ol-2 li {min-height:8rem; margin:2rem 0; display:inline-block; vertical-align:top;color:#666; position:relative; font-weight:500; padding:.5rem 2rem .5rem 6rem}
.ol-2 strong {font-weight:900}
.ol-2 li::before {display:block; font-size:10rem; line-height:0rem; font-weight:100; color:#ddd; counter-increment: sira; content: "" counter(sira) "";    position:absolute; z-index:0; top:4.5rem; left:0}

HTML

<h2>Deprem anında neler yapılmalı?</h2>
<ol class="row ol-2">
	<li class="col-md-4 col-sm-6 col-xs-2"><strong>Yat:</strong> Yere yüzüstü yatma, ya da yan yatarak bacakları karına çekme (cenin) şeklindedir. Bu şekilde hem iç organlar hem de baş korunur.</li>
	<li class="col-md-4 col-sm-6 col-xs-2"><strong>Çök:</strong> Özellikle masa altı gibi yerlerin tercih edildiği hallerde uygulanır. İki diz üzerine çökülerek vücut öne eğilir. Önemlidir.</li>
	<li class="col-md-4 col-sm-6 col-xs-2"><strong>Korun/Kapan:</strong> Deprem sırasında çevremizden üzerimize düşecek ya da devrilecek cisimlere karşı kendimizi koruma durumunu ifade eder.</li>
	<li class="col-md-4 col-sm-6 col-xs-2"><strong>Korun:</strong> Özellikle baş bölgesinin korunması birinci önceliktir, yastık ya da başka bir cisimle başı 'korumak' gibi.</li>
	<li class="col-md-4 col-sm-6 col-xs-2"><strong>Kapan:</strong> Başımızı kollarımızın arasına alarak 'kapanmak'. İç organları, uzuvları ve başı korumaya yöneliktir.</li>
	<li class="col-md-4 col-sm-6 col-xs-2"><strong>Tutun:</strong> Deprem sırasında salınan koltuk ve oturma grubu gibi ağır ve büyük cisimlere tutunarak onlarla beraber sallanabilir ve sizi ezmelerine engel olursunuz."</li>
</ol>

Sonuç:

CSS Sayaçlarını ayrıca sayfa içi linklerinin ve indexlerinin oluşturmasında da kullanabiliriz.

Buna da bir sonraki yazıda değinelim 🙂

Siz de CSS Sayaçlarıyla yaşadığınız deneyimleri yorum alanına paylaşırsanız çok sevinirim.

Sevgiler.

 

İleri okuma için:
MDN: https://developer.mozilla.org/tr/docs/Web/Guide/CSS/Saya%C3%A7lar
W3C: https://www.w3schools.com/css/css_counters.asp