Bismillah. Alhamdulillah. Untuk menampilkan gambar logo sebuah website, kita biasanya mengganti nama anchor link pada bagian header H1 dengan gambar logo, padahal H1 secara semantic digunakan sebagai identitas pada situs tersebut, sehingga ada pula yang menggunakan metode CSS untuk menempatkan gambar logo. Gambar Logo diletakan pada kode CSS sebagai background, pada saat halaman di-load, gambar logo dianggap background oleh header H1. Jika title atau judul header H1 tidak diset indentasinya, maka title akan menimpah gambar logo karena title berada diatas gambar logo (lihat ilustrasi gambar).
Skenario HTML CSS
Dibawah ini termasuk cara lama yang masih tetap banyak digunakan dan sampai saat ini masih dianggap cara yang terbaik. Kode HTML untuk menampilkan Judul situs dibagian header pada umumnya ditulis seperti ini:
<header><h1 class="sembunyikan">Judul Website</h1></header>Kemudian agar gambar logo bisa muncul biasanya kode CSS ditulis seperti ini:
.sembunyikan {
background: url(./gambar/logo.png) no-repeat 0 0;
}Jika kode CSS ditulis seperti diatas maka gambar logo akan tertutup Judul Website, untuk mengakalinya biasanya ditambahkan kode indentasi teks seperti dibawah ini:
text-indent: -9999px;sehingga apabila kode CSS digabungkan menjadi seperti dibawah ini:
.sembunyikan {
background: url(./gambar/logo.png) no-repeat 0 0;
text-indent: -9999px;
}text-indent atau indentasi teks digunakan untuk menggeser Judul Website sejauh mungkin dari area halaman atau sebesar -9999px (indentasi bisa bernilai positif atau negatif). Metode seperti diatas sampai hari ini masih dapat digunakan dan browser masih mampu me-render dengan sempurna, namun ada kemungkinan ketika HTML5 sudah menjadi standar bahasa HTML menggantikan HTML4 secara total, ditakutkan metode tersebut sudah tidak layak digunakan. Kemungkinan terbesar adalah browser tetap menampilkan teks walau indentasinya digeser sejauh mungkin, semakin jauh indentasi teks maka semakin lebar halaman situs, padahal yang ditampilkan hanya sebuah Judul Website. Hal ini juga didiskusikan pada HTML5 Boilerplate sebagai salah satu pengembang HTML5.
Metode "Font Crush"
Metode dibawah ini merupakan metode lain yang digunakan untuk menyembunyikan Judul Website dan memuncul gambar logo tanpa menggunakan indentasi teks atau text-indent. text-indent digantikan kode-kode seperti dibawah ini:
font: 0/0 a;sehingga jika di gabungkan menjadi seperti dibawah ini:
text-shadow: none;
color: transparent;
background-color: transparent;
.sembunyikan {
background: url(./gambar/logo.png) no-repeat 0 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
}Apa yang Dilakukan Deklarasi Ini?
Jika kita perhatikan, mungkin ada kejanggalan dan tidak lazim dari kode CSS yang digunakan. Namun mari kita telusuri, apa yang bisa dilakukan oleh deklarasi kode CSS tersebut.
- font: 0/0 a; ini adalah shorthand property untuk mengkosongkan ukuran huruf (font-size) dan spasi antar baris (line-height). Sedangkah nilai a adalah font-family terpendek (idenya diambil dari BEM implementation of this method). CSS Validator jelas akan menolak penggunaan 0/0 pada shorthand property font namun browser akan tetap menampilkannya tentunya dengan pemberitahuan error validasi. Makanya kemudian shorthand property ditambahkan nilai a sehingga menjadi font: 0/0 a; untuk melewati atau meloloskan kode CSS agar tetap dianggap valid oleh validator dan ternyata dengan penambahan value a halaman dianggap valid.
- text-shadow: none; ini untuk memastikan bahwa tidak terdapat inherit text-shadow pada property CSS lain yang mempengaruhi class tersebut dan jika ternyata ada maka deklarasi ini akan mengkosongkannya atau menghilangkannya.
- color: transparent; ini dibutuhkan apabila browser tidak mampu me-render deklarasi sebelumnya dengan baik. Karena pada beberapa browser, properti-properti yang tidak lazim tidak akan digunakan atau di-render sehingga properti yang paling dekatlah yang kemudian digunakan. Properti color: transparent; inilah yang kemudian akan membuat huruf atau judul seakan hilang atau transparan sehingga tidak tampak pada browser.
- background-color: transparent; ini berfungsi untuk menyembunyikan/membuang warna latar yang (kemungkinan) dipengaruhi oleh style lain.
Pada HTML5 Boilerplate juga ditambahkan border: 0; pada properti elemen. Hal ini memudahkan penggunaan class pada elemen seperti halnya tombol (button) atau link yang menggunakan background sebagai pengganti teks.
Keuntungan Metode "Font Crush"
Metode diatas mampu menyelesaikan berbagai masalah yang muncul dengan metode text-indent, termasuk yang pernah diusulkan oleh Scott Kellum untuk menghindari masalah kinerja pada iPad 1 mengenai indentasi teks negatif (negatif text-indent).
- Bekerja dengan sempurna pada IE6 dan IE7 pada elemen dengan properti inline-block. Sedangkan metode indentasi teks (text-indent) tidak mampu menampilkannya dengan sempurna bahkan cenderung hancur, seperti yang ditunjukan pada uji kasus ini (silahkan buka dengan IE6/IE7).
- Tidak menampilkan kotak offscreen (kotak rahasia). Metode text-indent menampilkan sebuah kotak lain yang dibuat didalamnya (kadang-kadang offscreen) untuk setiap teks dengan properti text-indent positif atau negatif. Dan kadang-kadang menimbulkan masalah performa.
- Tidak perlu menentukan spesifikasi text-alignment dan overflow: hidden; karena font (huruf) dihancurkan (crush) sehingga tidak memiliki ruang.
- Tidak perlu menyembunyikan tag br (line break) atau membereskan tag HTML dengan display: inline; karena masalah yang ditimbulkan oleh text-indent.
- Hanya diperlukan sedikit perbaikan pada style akibat penggunaan metode ini.
Kesimpulan
Metode ini hanya salah satu cara dari sekian banyak cara untuk menyembunyikan huruf/karakter diatas background/gambar, dan metode ini masih terus didiskusikan. Anda bisa meninggalkan komentar penting tentang kegagalan metode diatas pada HTML5 Boilerplate GitHub issue tracker.
Special thanks to Nicolas Gallagher dan HTML5 Boilerplate for Font Crush Methode. Happy Blogging :)
