Ayo Singkatkan Kode CSSmu

Fuih, akhirnya saya nulis juga tentang CSS, untuk yang belum tau apa itu CSS, silakan baca selengkapnya di sini Wiki CSS, disini SitePoint CSS dan disitu W3School CSS.

Font
Kamu bisa menyingkat CSS dibawah ini:

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

menjadi

font: 1em/1.5em bold italic serif

Penyingkatan CSS ini akan berfungsi apabila kamu mendefinisikan font-size dan font-family, jika tidak maka kode CSS diatas akan diabaikan oleh browser. Jika kamu tidak mendefinisikan font-weight, font-style atau font-varient maka nilainya akan diset normal.

Background
Memperpendek kode CSS juga dapat diterapkan pada background, seperti dibawah ini:

background-color: #fff;
background-image: url(gambar.jpg);
background-repeat: no-repeat;
background-position: top left;

menjadi

background: #fff url(gambar.jpg) no-repeat top left

List
Singkatkan kode CSS list dari:

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(gambar.jpg)

menjadi

list-style: disc outside url(gambar.jpg)

Margin dan Padding
Margin dan Padding juga dapat dipersingkat seperti contoh dibawah ini:

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

menjadi

margin: 2px 1px 3px 4px (atas, kanan, bawah, kiri) searah jarum jam

Jika kamu menggunakan 3 nilai maka urutannya menjadi seperti berikut:
atas, kanan dan kiri, bawah (contoh: margin:2px 3px 4px;)

Jika kamu menggunakan 2 nilai maka urutannya menjadi seperti berikut:
atas dan bawah, kanan dan kiri (contoh: margin:2px 4px;)

Jika kamu menggunakan 1 nilai maka nilainya berlaku untuk seluruh posisi atas, kanan, bawah dan kiri.

Untuk keterangan lebih lanjut mengenai CSS Shorthand silakan dilirik disini
SitePoint CSS Shorthand, CSS Shorthand, atau kalau masih bingung mengenai properties CSS silakan lirik disini CSS Reference