Cara menggunakan css sprite

Apa itu Css Sprite?
Css spite adalah kumpulan beberapa gambar yang disatukan menjadi satu file gambar dengan tujuan untuk mengurangi http request. Gambar yang biasanya dibuat sprite image adalah gambar-gambar penghias blog seperti ikon-ikon dan sebagainya. Contoh dari penggunaan css sprite ini seperti ikon pada menu navigasi (seperti pada blog ini), ikon media sosial, bullet list dan sebagainya.


Mengapa Css Sprite?
Alasan mengapa kita menggunakan css sprite mungkin karena kita menginginkan sesuatu yang lebih unik karena gambar yang digunakan adalah gambar yang kita pilih sesuai dengan keinginan atau mungkin kita buat sendiri, alasan lain yaitu mengurangi http request serta penambahan waktu load blog yang diakibatkan oleh penggunaan css eksternal ikon font.


Penerapan Css Sprite
Pertama-tama kita perlu menggabungkan beberapa gambar, bisa digabungkan dengan menggunakan software seperti photoshop, microsoft paint, gimp, corel draw, adobe illustrator dan sebagainya, atau dengan menggunakan bantuan dari website css sprite generator. Untuk cara penerapan css sprite dalam blog cukup mudah misalnya, saya mempunyai markup seperti ini:

<ul class='sosikon'>
<li><a href='#'>facebook</a></li>
<li><a href='#'>twitter</a></li>
<li><a href='#'>plus+</a></li>
<li><a href='#'>rss</a></li>
</ul>

Karena target yang saya mau beri background adalah linknya, maka saya akan menggunakan selektor child sosikon maka properti cssnya yaitu:
.sosikon li a{background:#fff url('url gambar')}
contohnya saya akan menggunakan gambar dibawah sebagai background

Maka kode CSS seperti ini:

.sosikon li a{background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSbd5OsreoaHOzrIRy0DRznx64aHBUNKAUthp2k-e_FGhjB0NbUByma0-IGJJV7EJ5QVwnPIyTm-AR3MpXmz5reCj6dx4ACmPINSpv0avF9PabJeHjl_rhP7z8uyiw6639uc9IwbYYtpWQ/s1600/csss-prite.png')no-repeat}
.sosikon li a:nth-child(1){background-position:0 0}
.sosikon li a:nth-child(2){background-position:0 -48px}
.sosikon li a:nth-child(3){background-position:0 -24px}
.sosikon li a:nth-child(4){background-position:0 -72px}

Dan hasilnya akan seperti ini:

Cara terbaik
Penerapan selektor seperti di atas sebenarnya kurang baik jika terus mengandalkan pseudo element bukan menggunakan selektor yang lebih spesifik seperti penggunaan class pada masing-masing child li. Dengan menggunakan class pada masing-masing li tentu penulisan css-nya lebih pendek.

<ul class="sosikon">
<li class="fb"><a href="#">facebook</a></li>
<li class="tw"><a href="#">twitter</a></li>
<li class="gp"><a href="#">plus+</a></li>
<li class="rss"><a href="#">rss</a></li>
</ul>

sehingga penulisan css-ya tidak lagi menggunakan :nth melainkan dengan class yang lebih spesifik.
.fb{background-position:0 0}
.tw{background-position:0 -48px}
.gp{background-position:0 -24px}
.rss{background-position:0 -72px}

Css sprite atau fontawesome?
Kebanyakan blog kita temui mungkin menggunakan ikon dari fontawesome. Alasannya mungkin karena praktis saja, secara fontawesome memiliki ratusan ikon dan kita tinggal memilih dan memasangnya di dalam blog, selain itu fontawesome scalable seperti halnya font bisa diubah ukurannya dengan menggunakan property font-size, sedangkan jika menggunakan css sprite ukuran gambar bisa diperkecil namun jika diperbesar akan menjadi blur. Jadi penggunaan css sprite yah tergantung kebutuhan saja...