Yuk Berkenalan dengan "Counter" dalam CSS Permudah Output Web-mu

Counter merupakan salah satu fungsi CSS yang mungkin jarang digunakan oleh Web Developer. Mungkin karena sudah terbiasa menggunakan perhitungan counter sendiri dalam output sebuah loop atau mungkin tidak tahu bahwa CSS memiliki kemampuan perhitungan penambahan sederhana untuk output sebuah elemen, caranya mudah loh !

Untuk singkatnya bayangkan html yang kamu gunakan untuk sebuah daftar dengan menggunakan ordered list atau tag <ol>. Nah sekarang bayangkan kamu bisa menggunakan fitur ordered list ini pada semua elemen kamu.. menarik bukan ?

Paling tidak ada 3 attribute dasar yang perlu kamu taruh dalam file css-mu yaitu:

counter-reset, counter-increment, counter()

Sebelum masuk contoh saya akan share tentang dasar dari ketiga fungsi ini:

counter-reset: digunakan untuk mendeklarasi suatu variabel. Jika nilai awal tidak diberikan maka variabel akan dimulai dari nol

counter-increment: digunakan untuk member penambahan pada variabel yang di deklarasi pada counter-reset di awal

counter(variable,tipe output): digunakan untuk melakuakn output dari variabel, beserta tipenya masing-masing.

Baca juga: Membuat Preloader dengan CSS dan Javascript

Ok saatnya demonstrasi:

Silahkan kamu kunjungi https://jsfiddle.net/veeco/0tcfegb4/1/

Saya baru saja membuat struktur html yang paling standar:

<div id="berita">   
	<div class="artikel">
		Hello ini baris pertama
	</div>
	<div class="artikel">
		Dan ini baris kedua
	</div>
	<div class="artikel">
		Diakhiri baris ketiga
	</div>
	<div class="artikel">
		Artikel ke empat
	</div>
</div>

Simple, dan saya rasa kamu tidak akan kesulitan lihat tag diatas. Sekarang mari kita lihat CSS-nya:

 
.berita {
	counter-reset: item 0;
}

.artikel {
	counter-increment: item;
}

.artikel:before {
	content: counter(item);
	display: inline;
}   

Nah ini yang mulai menarik, seperi lihat di contoh jsfiddle.net, Div dengan class artikel ini sekarang punya counter layaknya membuat output dengan <ol>..</ol>, mari kita bedah cara kerjanya..

Pertama, kita melakukan 'deklarasi' variabel dengan attribute counter-reset. Dalam contoh saya, saya menggunakan 'item' dengan nilai awal '0'

Kedua, pada setiap class artikel, saya melakukan penambahan 1 (default) pada variabel 'item'

Ketiga, sebelum class artikel, saya tambahkan pseudo elemen :before, gunanya untuk melakukan output dengan fungsi counter().

Ok, itu saja basic-nya... mudah bukan ?

Apa yang bisa dilakukan lagi setelah ini ?

• Kamu bisa memberikan melakukan penambahan lebih dari satu dengan cara set attribut, jika saya ingin mempunyai penambahan 2, maka penulisan counter-increment akan sebagai berikut
  • counter-increment: item 2
• Kamu juga bisa menampilkan alphabet loh, caranya saat output dengan counter(), tambahkan parameter kedua lower-alpha, contoh:
  • counter(item, lower-alpha)

  bisa juga, gunakan tipe berikut:

  • decimal
  • upper-alpha
  • lower-roman
  • upper-roman

<li>Metode ini juga biasa digunakan jika kamu ingin memiliki ordered-list yang juga dalam huruf tebal, karena secara default, hal ini tidak bisa dilakukan dengan &lt;ol&gt; biasa, contoh:

ol {
	counter-reset:item 0;
	margin:0 0 1.5em;
	padding:0;
}

ol>li {
	margin:0;
	padding:0 0 0 2em;
	text-indent:-2em;
	list-style-type:none;
	counter-increment:item;
}

ol>li:before {
	display:inline-block;
	width:1.5em;
	padding-right:0.5em;
	font-weight:bold;
	text-align:right;
	content:counter(item) ".";
}

Demikian tutorial CSS dari saya, semoga bisa menginspirasi proyek yang sedang kamu kerjakan !