April 3, 2013 speed-up
speed up
Gambar dari solvater.com

Dulu (kapan? he.he.) sempat ada panduan ideal untuk ukuran sebuah halaman web yaitu maksimal 30KB, semua itu sudah termasuk HTML, CSS, Javascript. Namun sekarang dengan meningkatnya popularitas penggunaan CSS dalam membangun layout halaman web dan Javascript untuk memperkaya interaksi antara halaman web dengan pengunjung, ukuran 30KB sulit untuk dipertahankan terutama untuk website skala besar, bahkan untuk file CSS-nya saja bisa melebihi 30KB.

Mengapa Optimisasi?

Setidaknya ada dua alasan, yang pertama untuk mendapatkan ukuran file CSS yang lebih kecil sehingga halaman lebih cepat dimuat (loading). Yang kedua adalah menulis kode yang terstruktur sehingga mudah dibaca hal ini akan sangat membantu ketika kita melakukan peng-edit-an CSS. Dan teknik shorthand berguna untuk mendukung alasan kesatu. Idenya adalah dengan penulisan kode yang lebih pendek (namun dengan fungsi yang sama) file CSS akan menjadi lebih kecil.

Dengan CSS shorthand kita dapat memangkas kode/properti CSS yang panjang (juga mempercepat penulisan kode).

Semua properti seperti margin, border, padding, background, font, list-style, dan bahkan outline dapat kita tulis dalam bentuk shorthand-nya.

CSS shorthand berarti, dari pada menulis deklarasi yang berbeda untuk properti yang sama…

[sourcecode language=”css”]
p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left:40px;
}
[/sourcecode]

… kita dapat menggunakan bentuk shorthand-nya dengan hanya menuliskan nilai tersebut sesuai urutannya menjadi:

[sourcecode language=”css” light=”true”]
p {
margin:10px 20px 30px 40px;
}
[/sourcecode]


Dengan menuliskan jumlah nilai yang berbeda browser akan mengartikannya berbeda berdasarkan banyaknya nilai yang ditulis, lihat ilustrasi dibawah.

Ilustrasi deklarasi shorthand akan diartikan berbeda tergantung dari jumlah nilai yang diberikan untuk sebuah properti CSS. Aturan seperti ini juga berlaku untuk padding dan border-width diantara properti yang lain. | Gambar dari smashmagazine.com

Shorthand pada font juga dapat diterapkan untuk menghemat space dan jumlah karakter yang harus ditekan.

shorthand font
Contoh pada font menunjukan bahwa dengan tidak mengisi beberapa nilai akan me-reset nilai tersebut ke nilai awal atau default-nya. | Gambar dari smashmagazine.com

Lanjut ke halaman berikutnya >>

Share This:

Tagged on:

Leave a Reply

Your email address will not be published. Required fields are marked *