Kompres dan Tata Ulang Kode CSS, HTML dan JavaScript Kalian dengan Alat Ini
Saya membuat proyek baru berupa situs web berisi kumpulan alat untuk mengompres kode HTML, CSS dan JavaScript secara daring. Saat ini sudah tersedia alat pengompres kode HTML, CSS, JavaScript dan JSON. Untuk ke depannya mungkin akan Saya tambahkan alat-alat kompresi yang lain. Halaman web alat dapat kamu kunjungi melalui tautan https://minify.js.org
Selain alat pengompres, alat untuk menata ulang kode-kode yang sudah dikompres juga tersedia. Saat ini sudah tersedia alat penata kode HTML, CSS, JavaScript dan JSON. Halaman web alat dapat kamu kunjungi melalui tautan https://tidy.js.org
Berikut ini adalah kode-kode pihak ke tiga yang Saya gunakan untuk membuat alat-alat tersebut:
Sebelumnya Saya pernah membuat situs web kumpulan alat serupa pada repositori https://github.com/taufik-nurrohman/mini-web-tools. Tapi dengan adanya situs web yang baru, repositori tersebut kemungkinan besar akan Saya arsipkan. Silakan beri komentar dan saran mengenai alat-alat ini, simpan tautan ke penanda buku, dan bagikan ke teman-teman yang lain kalau kamu merasa bahwa alat-alat ini bermanfaat untuk kamu dan untuk mereka. Terima kasih ♥
Pembaharuan sintaks Blogger yang sekarang memungkinkan kita mencegah mesin Blogger untuk menyisipkan kode CSS dan JavaScript bawaan ke dalam hasil keluaran HTML tema. Caranya adalah dengan menambahkan atribut b:css dan b:js dengan nilai false.
<html b:css='false' b:js='false'> … </html>
Namun satu hal yang perlu diingat bahwa beberapa fitur bawaan yang bekerja dengan JavaScript mungkin tidak akan bisa bekerja karena perubahan ini. Fitur-fitur tersebut di antaranya adalah fitur balas komentar, fitur buka-tutup pada widget arsip hierarki, fitur formulir kontak, dan juga fitur ini.
Membuat Agar Tinggi Kontainer Mengikuti Tinggi Latar Gambarnya yang Responsif/Adaptif
Saya agak kesulitan untuk menemukan istilah yang tepat untuk menyatakan “latar gambar yang ukurannya bisa menyesuaikan diri dengan kontainer setiap kali ukuran kontainer berubah”, jadi Saya sebut saja sebagai ‘responsif’ atau ‘adaptif’, meskipun istilah tersebut sebenarnya kurang tepat. Istilah fluid lebih tepat.
Ketika kita ingin membuat sebuah gambar menjadi fluid, kita bisa mengeset lebar gambar tersebut ke dalam satuan persen dan tinggi gambar sebagai auto untuk menjaga agar ukuran tingginya tetap proporsional:
Bagaimana dengan latar gambar? Kita bisa menggunakan properti background-size dengan nilai cover atau 100% auto. Hanya saja, di sini masalahnya adalah kita tidak bisa membuat tinggi kontainer mengikuti tinggi latar gambar setiap kali lebar kontainer berubah:
Ada sebuah metode yang bisa digunakan untuk membuat tinggi kontainer gambar bisa mengikuti tinggi latar gambar yang ada di dalamnya (di belakangnya), yaitu dengan cara mengeset ukuran tinggi kontainer menjadi 0 dan menentukan nilai sebuah sisi padding vertikal dalam satuan persen untuk menciptakan ukuran tinggi kontainer palsu. Nilainya berupa hasil perbandingan antara tinggi gambar dengan lebar gambar dalam bentuk persen. Perhitungannya seperti ini:
Rasio = (Tinggi / Lebar * 100) + '%';
Atau jika diterjemahkan ke dalam bahasa yang sederhana adalah: “Tinggi proporsional X adalah sama dengan sekian persen dari lebarnya.”
Saya menggunakan gambar dengan ukuran lebar 800 piksel dan tinggi 615 piksel pada halaman demo, jadi:
Rasio Tinggi = (615 / 800 * 100) + '%'; Rasio Tinggi = 76.875%;
div {
background:transparent url('path/to/image.jpg') no-repeat 50% 0;
background-size:100% auto;
height:0; /* Set tinggi kontainer menjadi `0` */
padding-bottom:76.875%; /* Gunakan `padding` untuk menciptakan dimensi tinggi */
}
Catatan: Jika Anda telah menerapkan CSS Universal Box-Sizing, Saya sarankan Anda untuk menambahkan properti box-sizing dengan nilai content-box pada kontainer untuk mengembalikan logika box-model ke keadaan semula. Meskipun ketika Saya coba tanpa menambahkan properti itu sebenarnya tidak ada masalah. Ini cuma untuk memantapkan saja:
Anda memerlukan sebuah elemen tambahan untuk diposisikan sebagai elemen absolute karena kontainer yang sekarang sudah tidak memiliki ruang lagi (tinggi kontainer sekarang adalah 0 piksel):
HTML
<div class="container">
<div class="container-content">Konten di sini…</div>
</div>
Terkadang kita menemui sebuah saat dimana kita harus membuat sebuah elemen judul bersatu dengan tautan, namun keduanya harus tetap memiliki warna yang sama. Bagian yang paling sering mendapatkan kondisi seperti ini adalah ada pada bagian header sebuah halaman web:
Pada web-web standar, umumnya bagian ini memiliki sebuah sikap yang unik, yaitu ketika seorang pengguna sedang berada di halaman muka, maka tautan tidak akan diterapkan pada judul tersebut, akan tetapi ketika pengguna tersebut sedang berada di halaman yang lain, maka tautan menuju halaman muka akan diterapkan pada judul tersebut. Seperti inilah kira-kira kondisinya:
Memastikan agar warna elemen judul tetap sama di mana saja itu penting agar semuanya terlihat konsisten. Katakanlah kita akan membuat warna judul blog di atas menjadi hijau:
.blog-header h1 {color:green}
Ini akan berhasil jika kita sedang berada di halaman depan. Judul halaman akan berwarna hijau. Akan tetapi ketika kita berpindah ke halaman lain, warna judul akan berubah menjadi sama dengan warna tautan karena teks judul sekarang terbungkus oleh tautan yang posisinya berada di dalam elemen judul.
Untuk mengatasi masalah tersebut, biasanya kita akan melakukan hal ini:
.blog-header h1 {color:green}
.blog-header h1 a {color:green}
Saya biasa menemui deklarasi CSS semacam itu pada judul-judul posting di dalam sebuah templat Blogger:
Ini tidak efisien, karena jika suatu hari nanti kita ingin mengganti warna elemen judul tersebut, maka kita harus mengubah kode warnanya sebanyak minimal dua kali. Seandainya jumlah deklarasi semacam ini cuma ada satu saja mungkin tidak masalah, tapi bagaimana kalau ada banyak? Apalagi jika posisinya tidak berdekatan seperti contoh di atas. Mungkin posisi deklarasi warna elemen judul berada di sebelah sini dan posisi deklarasi warna tautan judul berada di sebelah sana. Pasti akan tambah susah lagi untuk mencarinya.
“Each property may also have a cascaded value of ‘inherit’, which means that, for a given element, the property takes the same specified value as the property for the element’s parent.” — CSS2 – The ‘inherit’ Value
Menggunakan nilai inherit bisa menjadi solusi. Dengan menuliskan nilai inherit pada properti CSS tertentu, maka nilai properti tersebut akan mengikuti nilai properti yang sama dari elemen induknya:
.blog-header h1 {color:green}
.blog-header h1 a {color:inherit}
Dengan begitu, setiap kali kita mengubah warna elemen judul pada contoh di atas, maka warna tautan di dalamnya akan selalu mengikuti.
Contoh lain ada pada masalah warna border. Terkadang kita menemui sebuah kasus dimana kita harus membuat sebuah tata letak halaman dengan beberapa border di dalamnya yang semua warnanya harus sama. Dengan memanfaatkan nilai inherit, kita bisa mewarnai semua border cukup pada elemen induknya saja:
Mungkin ini tidak penting tapi terkadang kita merasa bahwa menggeser-geser scrollbar dengan kursor bertipe pointer akan terasa lebih “enak” dibandingkan dengan menggeser-geser scrollbar dengan kursor bertipe default. Akan tetapi mengubah tipe kursor pada scrollbar tidak mungkin bisa dilakukan karena scrollbar tidak termasuk ke dalam elemen HTML (pengecualian jika kita menggunakan manipulasi seperti JavaScript Custom Scrollbar, karena setiap item penggulung dibuat menggunakan elemen HTML). Bahkan selektor CSS scrollbar milik WebKit pun tidak bisa dimanipulasi:
::-webkit-scrollbar-thumb {
cursor:pointer; /* tidak bekerja! :( */
}
Satu cara sederhana yang bisa kita lakukan untuk mengubah tipe kursor pada scrollbar adalah dengan menerapkan tipe kursor menjadi pointer secara keseluruhan kepada area yang diinginkan, kemudian mengembalikan tipe kursor ke keadaan semula pada bagian dalam. Di sini kita membutuhkan elemen pembungkus ekstra:
HTML
<div class="scrollable-area">
<div class="scrollable-area-content">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
Contoh lain, mengubah tipe kursor menjadi n-resize pada scrollbar vertikal dengan tampilan kustom (buka halaman demo menggunakan peramban Google Chrome atau Safari):
Border Semitransparan untuk Menciptakan Efek Tajam dan Tipis pada Elemen
Saya secara alami sering dan suka memperhatikan hal-hal yang detail, terutama pada elemen-elemen UI di dalam web-web terkenal seperti Google, Facebook dan juga berbagai framework web. Kali ini Saya akan membahas mengenai tampilan menu dropdown pada framework Bootstrap ini:
Menu dropdown pada Bootstrap.
Tampilannya terlihat sangat tajam dan dimensinya juga terlihat sangat tipis! Bagi Anda yang sudah terbiasa bekerja dengan aplikasi Photoshop dan sejenisnya mungkin tidak begitu asing dengan teknik untuk membuat efek seperti ini.
Pada kenyataannya, menciptakan elemen kotak dengan efek bayangan saja tidak cukup untuk memberikan kesan sisi yang tajam dan dimensi yang tipis seperti gambar di atas:
Deklarasi di atas sudah cukup untuk menciptakan efek kotak bergaris batas dan berbayang, namun tidak cukup utuk memberikan efek tajam pada elemen tersebut. Jika Anda memperhatikan dengan seksama pada menu dropdown di gambar pertama, maka seharusnya Anda akan menyadari bahwa garis batas pada menu tersebut ternyata tembus pandang:
Pembesaran tampilan.
Efek semacam ini tidak cukup dibuat hanya dengan warna solid dan bayangan, melainkan kita membutuhkan warna semi transparan pada border. Kita bisa menggunakan kode warna RGBA atau HSLA pada border:
Tapi sekarang efek transparan pada border justru menampilkan warna latar dari elemen .box di bagian bawahnya karena warna latar secara normal memang akan menembus sampai ke sisi terluar dari border (Anda bisa mengeceknya dengan mencoba mengubah tipe border menjadi dashed atau dotted). Untuk mencegah warna latar agar tidak melebihi batas dalam lingkar border, kita bisa menggunakan CSS background-clip dengan nilai padding-box:
Berikut ini adalah gambar cuplikan hasil tampilan pada efek sebelum dan efek sesudah:
Efek sebelum dan sesudah.
Penggunaan Properti background-clip Lainnya
Fungsi CSS background-clip adalah untuk menentukan apakah latar belakang elemen, baik warna atau gambar, akan meluas ke bagian bawah perbatasan atau tidak. Nilai padding-box pada properti ini memungkinkan warna latar yang secara normal akan melebar dan melebihi batas sebelah dalam dari lingkar border menjadi tidak melebihi batas tersebut. Selengkapnya mengenai CSS background-clip bisa Anda pelajari di sini
Secara pribadi Saya jarang menggunakannya untuk kepentingan dekorasi. Melainkan, Saya lebih sering menggunakan properti ini untuk memperbaiki tampilan yang sedikit rusak karena render piksel yang tidak terlalu baik pada beberapa peramban. Sebagai contoh adalah pada elemen tombol dengan efek rouded corner di sekelilingnya seperti ini:
Gambar sebelah kiri adalah tampilan standar tombol yang dibuat tanpa mendeklarasikan background-clip:padding-box. Jika Anda meperhatikannya dengan seksama, maka pada bagian sisi-sisi lengkungnya akan tampak sedikit warna latar yang melebihi batas. Saya tidak tahu mengapa, tetapi ini hanya terjadi pada elemen tombol yang dikenai deklarasi display:inline, sedangkan tombol dengan deklarasi display:inline-block atau display:block tidak mengalami masalah ini. Ini terjadi di Google Chrome.
Gambar sebelah kanan adalah hasil tampilan sesudah Saya menerapkan deklarasi background-clip:padding-box pada tombol. Terlihat lebih rapi, karena warna latar tidak menembus bagian sisi tombol.
Kembali kepada efek tajam dan super tipis pada menu dropdown, Google Chrome juga mengimplementasikan hal yang sama, hanya saja sepertinya dia menggunakan latar gambar, bukan CSS:
Menu dropdown pada Google Chrome.
Pada Google Chrome versi lama, Anda pasti pernah melihat sebuah menu di bagian kanan bawah bernama “Barusan Ditutup” yang jika diklik akan menampilkan daftar histori munculan yang juga memiliki kesan yang sama seperti yang sedang kita bahas sekarang, akan tetapi efek itu diciptakan menggunakan metode yang sedikit berbeda dan Saya pikir ini sudah tidak standar lagi karena hasilnya yang kurang rapi dan tidak konsisten. Bukan menggunakan border semitransparan dan CSS background-clip, melainkan menggunakan outline semitransparan. Hasilnya kurang bagus karena outline tidak bisa mengikuti efek lengkung di ujung-ujung kotak. Saya menambahkan ini sebagai pengetahuan tambahan saja. Seharusnya Saya membahas ini sebelum peramban tersebut diperbaharui sampai yang seperti sekarang:
Ini adalah teknik tersingkat, karena kita bahkan tidak memerlukan properti background-clip untuk menciptakan efeknya di sini. Hanya saja, jika peramban tidak mendukung CSS bayangan atau tidak mendukung CSS bayangan berganda atau tidak mendukung nilai spread pada CSS bayangan, maka efek garis batasnya tidak akan terlihat. Border memungkinkan kita untuk menciptakan fallback agar tampilan elemen tidak menjadi terlalu buruk pada peramban yang tidak mendukung CSS bayangan dan warna RGBA. Begini maksudnya:
.box {
background-color:white;
border:1px solid #bbb; /* warna fallback untuk peramban yang tidak mendukung warna RGBA */
border:1px solid rgba(0,0,0,.3); /* warna border yang seharusnya */
background-clip:padding-box;
box-shadow:0 4px 15px -4px rgba(0,0,0,.6);
}
Teknik ini sudah pernah dibahas dengan cukup detail di CSS-Tricks. Hanya saja Saya tidak habis pikir mengapa beliau tetap mempertahankan deklarasi column-count untuk memecah area menjadi beberapa kolom dan menggunakan media queries untuk mengurangi jumlah kolom pada saat ukuran layar peramban menyempit. Padahal jika kita sudah menentukan lebar masing-masing item dengan ukuran yang sama, kita bisa menggunakan column-width untuk menentukan lebar kolom tetap tanpa harus melibatkan media queries untuk mengurangi jumlah kolom pada saat ukuran layar semakin sempit. column-width akan menciptakan kolom-kolom dengan jumlah yang bisa menyesuaikan diri berdasarkan ruang yang tersisa. Sudah tertulis dengan jelas dalam spesifikasi:
Ada satu hal yang harus diperhatikan jika Anda ingin menciptakan efek/tata letak seperti ini pada elemen yang bukan merupakan gambar, yaitu deklarasi display berupa inline-block. Mendeklarasikan perintah ini akan mencegah perpotongan yang tak terduga pada masing-masing item karena CSS3 Kolom secara normal akan berusaha untuk membuat masing-masing kolom menjadi sama tinggi. Beberapa harus terpaksa dipotong di bagian bawah mengingat properti CSS ini memang sebenarnya berbasis teks:
Framework CSS · Utamakan Konsistensi Tampilan Artikel Sebelum Layout
Yang Saya maksudkan di sini adalah, jadikan tampilan artikel sebagai prioritas utama sebelum memulai pondasi desain/rancangan tema/template. Mengingat kebiasaan buruk yang sering terjadi adalah kita membentuk hasil jadinya terlebih dahulu kemudian baru merancang tampilan-tampilan paragraf, kuota dan blok kode. Padahal, dengan merancang elemen-elemen kecil dan umum tersebut terlebih dahulu, kita bisa memastikan bahwa tampilan akhir nantinya akan menjadi lebih konsisten.
Merancang penampilan secara keseluruhan dan melanjutkannya dengan merancang tampilan elemen artikel hanya akan menambah waktu kerja kita menjadi dua kali lipat lebih lama dan lebih rumit tanpa kita sadari. Sebagai contoh, saat kita merancang tampilan posting, saat itu kita juga akan menentukan tampilan judulnya. Setelah itu kita akan merancang tampilan sidebar dan footer, kemudian juga akan menentukan tampilan judulnya dan seterusnya:
Terlalu banyak pekerjaan hanya untuk membuat beberapa blok area saja. Seharusnya pekerjaan ini bisa menjadi lebih singkat apabila kita merancang framework elemen-elemen artikel terlebih dahulu secara global. Sudah ada beberapa framework yang tersedia untuk mengatasi kebiasaan buruk ini, misalnya Normalize dan HTML5 Boilerplate. Tapi di sini kita akan mencoba untuk membuatnya sendiri. Dimulai dengan CSS reset.
Merancang Framework CSS
CSS Reset
CSS ini akan menormalkan semua tampilan elemen HTML —kecuali elemen-elemen formulir— menjadi seragam/normal. Dimulai dari ukuran, warna, margin, padding, dimensi dan juga ketebalannya. Mengawali rancangan elemen artikel dengan CSS reset akan mempermudah kita dalam merancang tampilan elemen-elemen HTML setelah ini:
Berikutnya kita atur ukuran huruf, tipe huruf, line-height dan warna huruf secara global pada elemen <body>:
body {
/* `font-style:normal`,
`font-weight:normal`,
`font-size:13px`,
`line-height:1.4em`,
`font-family:Arial,Sans-Serif` */
font:normal normal .8125em/1.4 Arial,Sans-Serif;
background-color:white; /* warna latar secara global */
color:#333; /* warna huruf secara global */
}
Huruf Tebal, Huruf Miring dan Elemen-Elemen Kecil Lainnya
Karena tampilan elemen HTML sudah diatur ulang oleh CSS reset, maka kita perlu mengatur beberapa tampilan elemen menjadi seperti semula:
/* huruf tebal */
strong,b {
font-weight:bold;
}
/* citation & huruf miring (italic + emphasis) */
cite,em,i {
font-style:italic;
}
/* tautan */
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
/* Internet Explorer akan menambahkan border pada gambar
yang diliputi oleh tautan */
a img {
border:none;
}
/* abbreviation & acronym */
abbr,
acronym {
border-bottom:1px dotted;
cursor:help;
}
/* superscript & subscript */
sup,
sub {
vertical-align:baseline;
position:relative;
top:-.4em;
font-size:86%;
}
sub {
top:.4em;
}
/* huruf kecil */
small {
font-size:86%;
}
/* tombol keyboard */
kbd {
font-size:80%;
border:1px solid #999;
padding:2px 5px;
border-bottom-width:2px;
border-radius:3px;
}
/* penanda teks */
mark {
background-color:#ffce00;
color:black;
}
Margin Paragraf
Paragraf membutuhkan kerenggangan antara teks paragraf yang satu dengan yang lainnya. Begitu pula elemen-elemen lain yang biasa menyertainya seperti kuota, tabel, figur, formulir, daftar dan blok kode:
Atur elemen heading dengan line-height menjadi normal dan huruf menjadi tebal. Tentukan juga margin heading secara global sebelum kemudian kita melanjutkannya dengan menentukan ukuran elemen heading sesuai dengan level/tingkatannya:
Jangan biarkan elemen daftar menjadi terlalu sejajar dengan paragraf karena pada umumnya itu hanya akan membuat mata kita menjadi merasa tidak nyaman dan tertekan. Posisikan elemen daftar menjadi sedikit menjorok ke depan untuk menciptakan kesan istirahat/fokus:
/* ordered, unordered list & description list */
ol,ul,dl {margin-left:3em}
ol {list-style:decimal outside} /* atur ulang `list-style` pada elemen `<ol>` */
ul {list-style:disc outside} /* atur ulang `list-style` pada elemen `<ul>` */
li {margin:.5em 0} /* beri sedikit jarak atas dan bawah pada elemen `<li>` untuk item daftar dengan konten yang panjang */
dt {font-weight:bold}
dd {margin:0 0 .5em 2em}
Elemen Formulir
Biasanya ini tidak terlalu penting. Tetapi setidaknya samakanlah tipe dan ukuran huruf sesuai dengan huruf pada elemen induknya. Mengenai tampilan selanjutnya seperti warna latar dan efek :hover bisa ditentukan nanti setelah framework selesai dibuat:
input,
button,
select,
textarea {
font:inherit;
font-size:100%;
line-height:normal;
vertical-align:baseline;
}
/* mengeset `box-sizing` menjadi `border-box` pada `<textarea>` untuk mengatasi masalah
pengguna yang sering kesulitan menentukan lebar akurat
pada elemen ini menjadi `100%` ketika menggunakan logika box-model yang lama */
textarea {
display:block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
Blok Kode dan Kuota
<pre> dan <blockquote> biasanya mendapatkan perlakuan khusus mengingat elemen ini biasa kita gunakan untuk menyatakan hal-hal yang penting. Blok kode digunakan untuk menyatakan kode yang perlu dicatat/dipahami dan kuota digunakan untuk menyatakan teks yang perlu diingat atau direnungkan:
pre,
code {
font-family:"Courier New",Courier,Monospace;
color:inherit;
}
/* jika perlu tentukan juga warna latar dan huruf */
pre {
white-space:pre;
word-wrap:normal;
overflow:auto;
}
blockquote {
margin-left:2em;
margin-right:2em;
border-left:4px solid #ccc;
padding-left:1em;
font-style:italic;
}
Tabel
Seperti yang pernah Saya nyatakan pada tutorial pembuatan tabel dengan HTML, disarankan untuk menentukan border dan padding pada tabel yang memiliki atribut border=1 saja demi keamanan:
Sampai di sini Saya rasa sudah cukup untuk dijadikan sebagai dasar. Setelah ini Anda bisa melanjutkan untuk membuat kelas-kelas produktif seperti .hidden, .visually-hidden, .btn dan yang lainnya untuk keperluan rancangan tingkat lanjut:
Beberapa nama kelas di atas akan sangat mudah Anda temui pada framework HTML5 Boilerplate dan Twitter Bootstrap (Twitter Bootstrap juga memakai HTML5 Boilerplate). Anda akan mengetahui fungsi-fungsi kelas tersebut, mengapa kelas tersebut dibuat dan mengapa kelas-kelas tersebut menjadi semacam “standar” saat Anda mempelajarinya.
Beralih ke Framework Buatan Sendiri
Untuk mempercepat pekerjaan, yang terpenting sebenarnya adalah framework. Namun jika Anda tidak mengerti apa dan bagaimana framework itu dibuat dan digunakan, maka hasil akhirnya nanti akan sama saja. Memulai membuat framework sendiri Saya pikir jauh lebih baik dibandingkan hanya sekedar menyalin dan menempel kode dari framework lain yang sudah ada. Mengikuti dan mempelajari bagaimana mereka menciptakan framework seharusnya lebih diutamakan dibandingkan hanya sekedar memakainya. Karena dengan mempelajari bagaimana sebuah framework terbentuk, maka dari situ Anda bisa lebih cerdas di dalam mencontoh dan menyaring apa-apa saja yang sebenarnya diperlukan dan apa saja yang sebenarnya tidak diperlukan menurut kebutuhan Anda saat itu untuk keperluan yang lebih spesifik dan efisien tentunya:
Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian Tersebut
Ada satu hal yang mungkin tidak Anda sadari bahwa ketika Anda menyatakan font-family pada teks, maka peramban akan mencoba untuk menciptakan efek bold dan italic palsu ketika peramban tidak berhasil menemukan file font bold dan italic pada font terkait. Sebagai contoh, Tahoma hanya memiliki dua varian, yaitu regular dan bold, sehingga hasil tampilan teks pada peramban hanya akan terlihat bagus pada model teks biasa dan tebal:
Tahoma
Karena sejak awal varian italic tidak pernah ada pada keluarga font Tahoma, maka peramban mencoba untuk merekayasa dimensi font tersebut menjadi italic. Akan tetapi tetap saja, efek italic yang Anda lihat bukanlah italic yang sesungguhnya. Perbedaan akan terlihat jelas pada jenis-jenis font yang memiliki lebih banyak varian. Misalnya Georgia:
Georgia
Georgia memiliki empat varian, termasuk di dalamnya adalah regular, italic, bold bahkan bold-italic. Hal ini memungkinkan peramban untuk menampilkan dimensi font dalam “porsi” yang tepat pada varian font minimal. Yaitu regular, italic, bold dan bold-italic:
Georgia
Hal Buruk yang Sering Saya Lihat
Hal buruk yang sering Saya lihat adalah bahwa seorang pengguna mencoba untuk menyatakan font-weight:bold atau font-style:italic pada keluarga font yang tidak memiliki varian tersebut atau pada keluarga font yang memiliki varian tersebut, akan tetapi varian selain regular tidak pernah disertakan di dalam deklarasi @font-face:
Gambar 1: Mendeklarasikan ketebalan font heading pada situasi yang salah. Gambar 2: Dimensi font yang sesungguhnya.Keterangan: Bebas Neue pada judul dan Franklin Gothic Medium pada paragraf.
Pada keadaan normal, elemen heading akan memiliki efek tebal secara otomatis. Jadi, jangan lupa untuk mendeklarasikan font-weight dan font-style dengan nilai normal saat Anda sedang menerapkan font kustom yang tidak memiliki varian lengkap untuk elemen ini:
Yang dilakukan @font-face kepada file font pada dasarnya hanyalah memanggil file tersebut ke halaman web untuk diberi nama sesuai dengan nama yang ditentukan oleh pengguna agar bisa digunakan di dalam CSSfont sebagai font-family:
font-family berfungsi untuk menentukan nama font yang datang dari my-font.woff
src digunakan untuk menyatakan di mana font tersebut disimpan
format digunakan untuk menentukan format font
font-style dan font-weight tidak wajib. Bisa dibuang jika memang tidak diperlukan. Dan akan menjadi wajib untuk alasan yang akan Saya jelaskan nanti.
@font-face lebih baik dinyatakan di bagian paling awal CSS untuk memastikan agar file font bisa diunduh sesegera mungkin. Setelah itu, nama font bisa dinyatakan ke elemen mana saja yang Anda inginkan dengan nama font yang telah dinyatakan pada font-family:
Jangan lupa berikan beberapa font fallback dengan nama-nama font yang sudah biasa ada pada komputer Anda untuk berjaga-jaga agar jika font eksternal tersebut gagal dimuat atau terlalu lama dimuat atau belum berhasil dimuat, maka tampilannya tidak akan hanya jatuh ke font Serif. Pastikan tampilan font lokal tersebut mirip dengan font eksternal yang ingin ditampilkan. Inilah fungsi utama dari CSS Font Stack:
body {font-family:"Nama Font","Arial Narrow",Arial,Sans-Serif}
font-style dan font-weight
Bagi para pengguna yang baru pertama kali menggunakan @font-face mungkin akan merasa baik-baik saja dengan tampilan seperti ini. Namun tidak untuk para tipografer dan juga orang-orang yang sudah terbiasa melihat berbagai jenis font:
Font italic tampak terlalu miring.
Font dengan model italic akan tampak terlalu miring. Bahkan dalam beberapa peramban, font dengan gaya bold juga akan tampak terlalu tebal. Ini adalah contoh font Ubuntu Regular yang Saya lihat melalui peramban Safari di Windows:
Ubuntu, Safari Windows.
Menurut Saya tampilan masing-masing gaya font di atas kurang stabil dan tidak menarik. Itu disebabkan karena kita hanya memuat satu model font saja yaitu font regular. Ketika kita hanya memuat satu model font saja, maka model font yang lain seperti bold, italic dan bold-italic akan disesuaikan oleh peramban. Dan hasilnya tentu saja tidak akan sebagus model font asli dari keluarga tersebut. Para pembuat font yang baik setidaknya akan membuat minimal empat model font yaitu regular, italic, bold dan bold-italic. Itulah sebabnya mengapa kita harus menggunakan keempat-empatnya:
Gaya font Ubuntu.
Satu Nama Font dengan Empat Gaya
Memanggil file font dengan jumlah gaya minimal empat buah tentu saja memiliki cara tersendiri. Setiap @font-face harus tetap diberi satu nama font yang sama namun harus tetap bisa menampilkan masing-masing font eksternal dengan benar berdasarkan gayanya. Dan sekarang adalah saatnya kita menggunakan font-style dan font-weight dalam @font-face untuk menangani setiap gaya font.
Pertama-tama, yang terpenting adalah pastikan setiap font disimpan dengan nama yang mudah dan jelas berdasarkan gayanya:
Contoh pemberian nama file pada setiap font berdasarkan gayanya.
Setelah semua file diberi nama dengan baik, maka tugas selanjutnya adalah memanggil font, kemudian memberi masing-masing @font-face dengan font-family yang sama. Perbedaan setiap gaya hanya ditentukan oleh font-style dan font-weight:
Dan ini adalah tampilan font setelah keempat gaya dimuat:
Tampilan masing-masing gaya font sudah tampak ideal sekarang.
Pengguna Google Fonts
Jika Anda adalah pengguna layanan Google Fonts, pada halaman Quick Use sudah terlihat dengan jelas beberapa pilihan gaya font. Ambil minimal empat gaya seperti ini untuk memastikan agar tampilan teks terlihat ideal satu sama lain:
Pilih gaya normal/regular, italic, bold dan bold-italic (jika ada).
Gunakan @font-face Seperlunya
Font ideal paling minimal setidaknya hanya terdiri dari dua buah tipe font dengan satu gaya pada font pertama untuk tampilan judul dan empat gaya pada font ke dua untuk tampilan teks utama (5 @font-face).
Sintaks Aman @font-face
Fontspring menyarankan kita untuk memuat beberapa font dengan tipe file tertentu secara bersamaan untuk memastikan agar @font-face bisa bekerja pada hampir semua peramban dan perangkat:
Meski hasilnya akan lebih stabil, namun tentu saja itu akan membuat file yang dipanggil menjadi bertambah banyak. Jika target pembaca Anda hanya sebatas pada pemakai desktop, maka file font dengan format WOFF saja sudah cukup dan bisa lolos pada semua peramban modern.
Catatan Tambahan
Saat praktek, biasanya Anda akan menemui beberapa masalah seperti ini:
Font merupakan karya seni dan itu bisa saja masuk ke dalam kategori komersial (seperti halnya komik), atau terlarang untuk ditampilkan ke dalam media berupa web, sehingga kita harus tetap berhati-hati dalam menampilkan font eksternal ke dalam halaman web. Untuk sumber font berlisensi gratis yang bisa digunakan dengan aman baik secara pribadi maupun komersial bisa dengan mudah Anda dapatkan di Google Fonts dan FontSquirrel. Beberapa ada juga yang dibuat di Deviant Art. Mungkin itu font buatan para hobiis.
Memaksimalkan kerja selektor adjacent sibling sangat bermanfaat untuk menciptakan komunikasi yang lebih hidup pada saat proses pengisian formulir untuk pengunjung/anggota. Idenya adalah, seorang calon anggota mencoba untuk mengisi formulir. Dan saat kursor teks aktif di dalam elemen formulir tersebut, maka akan muncul pesan singkat di sebelahnya yang menjelaskan tentang apa saja yang harus calon anggota lakukan terhadap formulir yang sedang aktif tersebut.
Ide di atas bisa kita realisasikan hanya dengan cara seperti ini:
HTML
<input type="text">
<label>Mohon ketik setiap awalan dengan huruf kapital</label>
Melakukan beberapa pembaharuan pada tampilan elemen <label> untuk membuatnya tampak sebagai tooltip serta menambahkan efek transisi untuk memperlembut proses tampilnya deskripsi/pesan formulir, maka akan membuat komunikasi antarmuka menjadi semakin tegas tanpa harus meminta pengunjung yang sedang mengisi formulir tersebut pergi menuju ke halaman khusus mengenai panduan cara mengisi formulir. Dengan cara ini, pengunjung/calon anggota akan dipandu pada saat yang sama ketika mereka sedang mengisi formulir:
Kita juga bisa menggunakan plugin jQuery Toggle Sidebar untuk menampilkan dan menyembunyikan sidebar, dimana menu navigasi berada di dalam sidebar tersebut. Tapi dalam kasus ini Saya tidak menyarankannya, mengingat menggunakan JavaScript mentah saja masih bisa:
Meskipun, kebanyakan dari kita masih bertahan dengan satuan piksel saat menentukan ukuran-ukuran elemen HTML, namun di sini Saya ingin mencoba untuk membuka mata Anda lebih lebar lagi agar Anda bisa mengerti betul mengapa satuan-satuan relatif seperti em dan % dalam banyak kasus lebih efisien dan logis dibandingkan dengan satuan piksel (px) yang selama ini paling sering dipakai karena ukuran mereka yang sangat akurat.
Ketika % Menjadi Lebih Baik
Persentase merupakan satuan yang tidak dihitung berdasarkan ukuran elemen itu sendiri, melainkan dihitung berdasarkan perbandingan ukuran elemen tersebut terhadap ukuran induknya.
Satuan % Dalam Sistem Grid
Dimulai dari kasus sistem grid, atau katakanlah kolom-kolom web Anda. Di sini kita memiliki tiga elemen HTML untuk merancang sebuah susunan/layout situs sederhana. Terdiri dari pembungkus utama dan dua buah kolom. Salah satu kolom merupakan area artikel, dan satunya lagi merupakan area sidebar:
CSS di atas akan menghasilkan layout dua kolom dengan ukuran pembungkus utama selebar 600 piksel. Kolom kiri selebar 400 piksel dan kolom kanan selebar 200 piksel. Ukuran layout yang sangat tepat dan tidak mungkin bisa diragukan akurasinya. Tapi sayangnya, layout piksel seperti ini hanya akan menimbulkan kendala saat Anda mencoba untuk memodifikasi atau memperbaharui lebar layout tersebut di masa depan. Misalnya, suatu saat Anda ingin mengubah lebar layout menjadi 1000 piksel seperti ini:
.col-group {
width:1000px;
overflow:hidden;
}
Pada saat yang sama Anda tentu harus memperbaharui lebar kolom kiri dan kolom kanan:
Tidak praktis, tidak hemat waktu dan membutuhkan perhitungan baru setiap kali ukuran layout diperbaharui. Jika susunan halaman hanya terdiri dari dua buah kolom sederhana seperti contoh di atas mungkin tidak begitu menjadi masalah, tapi bagaimana jika jumlah kolomnya banyak?
Bandingkan dengan saat Anda mengatur lebar kolom menggunakan satuan persentase:
Meskipun beberapa orang (termasuk Saya) masih merasa sedikit kesulitan ketika mencoba mengubah sudut pandang satuan piksel ke persen, tapi hasil akhirnya nanti Saya jamin akan lebih stabil dan lebih mudah diperbaiki/diperbaharui (maintainable) saat kita menggunakan satuan persen. Karena yang menjadi standar ukuran di sini hanya ada satu, yaitu pada elemen terluar saja. Sedangkan ukuran lebar anak-anak kolom di dalamnya yang menggunakan satuan persen akan secara otomatis mengikuti ukuran berdasarkan perbandingan lebar induknya, betapapun kita mengubah lebar pembungkus luar kolom-kolom tersebut.
Demonstrasi di halaman ini mungkin bisa sedikit menjelaskan bagaimana persen dan piksel bekerja pada sistem grid:
Elemen-elemen heading h1, h2, h3, h4, h5 dan h6 akan lebih baik jika diatur menggunakan satuan persen. Walaupun beberapa ada juga yang menggunakan satuan em. Sebenarnya itu tidak masalah, karena baik em maupun % keduanya sama-sama merupakan satuan relatif. Yang penting cobalah untuk menghilangkan kebiasaan menggunakan satuan piksel dalam menentukan ukuran elemen heading. Ini berhubungan dengan pengaplikasian media queries yang lebih efisien dan juga kemudahan di dalam pengaturan ukuran judul berdasarkan ukuran teks utama. Sebuah contoh sederhana, di sini Anda mencoba menentukan ukuran elemen-elemen heading dengan satuan piksel:
Mengapa satuan piksel buruk dalam hal ini? Itu karena satuan piksel hanya akan membuat Anda melakukan ekstra perubahan ukuran teks dalam media queries perangkat seluler. Dimulai dari ukuran teks dasar yang dideklarasikan di dalam selektor body sampai ke ukuran teks pada elemen heading level 6:
Pola penyusutan teks akan berbeda jika Anda menggunakan satuan persentase saat menentukan ukuran judul artikel. Saat menggunakan satuan persentase, maka ukuran judul-judul artikel akan menyesuaikan diri berdasarkan perbandingan ukuran teks dasar saat itu, yaitu 13px (Sebagai contoh: 200% dari 13 piksel adalah 26 piksel):
Karena Anda menggunakan satuan persentase pada semua judul artikel, maka saat Anda memperkecil ukuran teks pada perangkat seluler, yang perlu Anda lakukan hanya memperkecil ukuran teks dasarnya saja, yaitu pada elemen <body>. Ukuran teks pada semua judul artikel nantinya akan menyusut menyesuaikan diri berdasarkan persentase terhadap ukuran teks utama yang sudah mengecil:
@media (max-width:360px) {
body {font-size:11px}
}
Menggunakan satuan persentase untuk elemen heading juga akan mempermudah Anda di dalam memperbaharui ukuran teks artikel. Anda tidak perlu memperbaharui semua ukuran judul artikel. Cukup perbaharui ukuran teks dasarnya saja. Selebihnya akan secara otomatis mengikuti skala yang diterapkan.
Ketika em Menjadi Lebih Baik
em adalah satuan yang dihitung berdasarkan ukuran teks di sekitarnya. Pada dasarnya 1em sama dengan 16 piksel. Itu jika Anda tidak menentukan ukuran teks pada elemen manapun. Tapi jika —misalnya— Anda menentukan ukuran teks sebesar 30 piksel pada <body>, maka 1em di area <body> akan setara dengan 30px (1em = Ukuran Teks di Sekitarnya).
Satuan em dalam line-height dan margin Paragraf
Satuan em sangat bermanfaat untuk menentukan ukuran dan jarak elemen yang terkait erat dengan ukuran teks. Misalnya margin paragraf dan jarak antar baris teks.
Contoh Kasus: Dua buah kolom dengan elemen paragraf di dalamnya mendapatkan ukuran teks sebesar 13 piksel yang diturunkan dari <body>. Paragraf di dalam kolom pertama menggunakan satuan piksel untuk mengatur margin dan line-height, sedangkan paragraf yang berada di dalam kolom ke dua akan menggunakan satuan em:
HTML
<div class="one">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="two">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
CSS
body {font-size:13px} /* 1em = 13px */
.one p {
line-height:18px;
margin:13px 0;
}
.two p {
line-height:1.384615384615385em; /* 18 / 13 */
margin:1em 0;
}
Hasil akhirnya, ukuran dan jarak antar baris paragraf akan tampak sama:
Sebelah kiri: Menggunakan piksel. Sebelah kanan: Menggunakan em.
Masalah akan muncul ketika Anda mencoba untuk memperbesar/memperkecil ukuran teks:
Sebelah kiri: Menggunakan piksel. Sebelah kanan: Menggunakan em.
Kolom sebelah kiri: Karena kita menggunakan satuan piksel, maka ketika ukuran teks berubah (dalam kasus ini: bertambah besar) jarak antar baris dan margin paragraf tetap sempit dan tidak berubah, bertahan pada ukuran 18px dan 13px. Membuat tulisan menjadi semakin sulit untuk dibaca.
Kolom sebelah kanan: Karena kita menggunakan satuan em, maka skala ukuran tinggi baris dan margin antarparagraf akan menyesuaikan diri berdasarkan ukuran teks.
Dalam Semua Elemen yang Terkait dengan Ukuran Teks
Pada intinya satuan em cocok untuk diterapkan pada semua hal yang berhubungan dengan ukuran teks. Semua hal yang membutuhkan ukuran dengan perbandingan yang tepat terhadap teks. Contoh paling sederhana ada pada desain tombol:
Desain tombol dengan satuan em pada padding dan border-radius akan menciptakan skala tombol yang lebih ideal dibandingkan px.
Ketika px Menjadi Lebih Baik
Satuan piksel dihitung berdasarkan ukuran lebar dan tinggi satu unit piksel pada layar. Oleh karena itu satuan piksel akan sesuai jika diterapkan pada elemen-elemen yang membutuhkan ukuran yang akurat dan tidak terpengaruh dengan ukuran elemen di sekitarnya. Misalnya lebar dan tinggi ikon, tebal border, blur bayangan, posisi latar dan ukuran teks utama. Ukuran teks utama biasanya dideklarasikan pada elemen <body> atau <html>.
Masalah Akurasi Ukuran pada Satuan Non-Piksel
Tidak bisa dipungkiri bahwa ukuran persentase dan relatif teks tidak akan bisa seakurat ukuran piksel. Tapi memangnya siapa yang peduli dengan itu? Kita, para penikmat desain dan tipografi pada dasarnya tidak pernah peduli mengenai seberapa besar tepatnya, ukuran huruf dan judul artikel yang sedang kita baca. Kita tidak peduli berapa piksel ukuran judul dan teks yang sedang kita baca. Karena yang kita pedulikan selama ini adalah proporsi yang ideal. Tipografi tidak begitu mementingkan akurasi, tipografi lebih mementingkan proporsi. Saya pikir kita tidak perlu khawatir untuk memulai beralih dari piksel dalam kasus-kasus tertentu menuju satuan-satuan relatif yang lebih mudah dipelihara dan responsif terhadap skala di sekitarnya.
Modifikasi Widget Posting Populer Menjadi Berwarna-Warni
Pada konfigurasi widget Posting Populer, pastikan bahwa Anda memilih model widget berupa thumbnail dan judul. Setelah itu masuk ke editor HTML template. Salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:
/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0;
padding:.5em 1.5em .5em .5em;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:120%;
color:inherit;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num);
display:block;
position:absolute;
background-color:black;
color:white;
width:30px;
height:30px;
line-height:30px;
text-align:center;
top:50%;
right:-10px;
margin-top:-15px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}
CSS Posisi Teks di Tengah Secara Vertikal dan Horizontal
CSS
div {
width:100px; /* dimensi lebar */
height:100px; /* dimensi tinggi */
line-height:100px; /* sama dengan tinggi elemen, posisi di tengah secara vertikal */
text-align:center; /* posisi di tengah secara horizontal */
background-color:maroon;
color:white;
}
