2 Komentar

Optimisasi web dengan CSS shorthand

speed up

Gambar dari solvater.com

Dulu 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…

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left:40px;
}

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

p {
  margin:10px 20px 30px 40px;
}


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

BACKGROUND


Penulisan properti background cukup banyak dan panjang jika kita gunakan semuanya.

element {
  background-color: color || #hex || (rgb / % || 0-255);
  background-image: url(URI);
  background-repeat: repeat || repeat-x || repeat-y || no-repeat;
  background-position: X Y || (top||bottom||center) (left||right||center);
  background-attachment: scroll || fixed;
}

Semua properti background diatas dapat kita tulis dalam bentuk shorthand:

element {
 background:
  #fff;
  url(image.png);
  no-repeat;
  20px 100px;
  fixed;
}

Apa yang terjadi jika ada properti yang nilainya tidak kita masukkan? nilai default-nya yang akan digunakan.

Nilai default properti background.

element {
  background-color: transparent;
  background-image: none;
  background-repeat: repeat;
  background-position: top left;
  background-attachment: scroll;
}

Pelajaran yang dapat ditarik: berhati-hatilah ketika tidak mendeklarasikan nilai dari properti. Karena dengan tidak menuliskan nilai tertentu artinya anda menggunakan nilai default dari properti yang tidak anda tuliskan. Kita lihat contoh berikut:

Dengan menulis…

element {
  background:red url(image.png);
}

secara tidak langsung sama dengan menulis…

element {
  background:red transparent url(image.png) repeat top left scroll;
}

FONT


Properti font mungkin yang paling kompleks, aturannya sama seperti background ketika kita tidak mendeklarasikan nilai akan di set ke nilai default.

element {
  font-style: normal || italic || oblique;
  font-variant:normal || small-caps;
  font-weight: normal || bold || bolder || || lighter || (100-900);
  font-size: (number+unit) || (xx-small - xx-large);
  line-height: normal || (number+unit);
  font-family:name,"more names";
}

Nilai default-nya properti font adalah:

element {
 font-style: normal;
 font-variant:normal;
 font-weight: normal;
 font-size: inherit;
 line-height: normal;
 font-family: inherit;
}

Dan dalam bentuk shorthand adalah sebagai berikut:

element {
  font: normal normal normal inhert normal inherit;
}

Contoh penggunaan shorthand pada properti font adalah sebagai berikut :

p {
font: bold 1em/1.2em georgia,"times new roman",serif;
}

kode diatas secara tidak langsung sama dengan :

p {
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 1em;
line-height: 1.2em;
font-family: georgia,"times new roman",serif;
}

BORDER


Properti border sebagai berikut :

element {
  border-width: number+unit;
  border-style: (numerous);
  border-color: color || #hex || (rgb / % || 0-255);
}

Bentuk shorthand :

element {
  border: 4px groove linen;
}

MARGIN dan PADDING


Mungkin ini adalah properti yang paling mudah. Penempatan nilainya searah jarum jam di mulai dari top, jadi urutan penulisannya adalah top, right, bottom, left.

element {
  margin-top: number+unit;
  margin-right: number+unit;
  margin-bottom: number+unit;
  margin-left: number+unit;
}

Bentuk shorthand-nya:

/*
* top:10 right:20 bottom:30 left:40
* ukurannya dalam pixel
*/
element {
  margin: 10px 20px 30px 40px;
}

/* top-bottom right-left */
element {
  margin: auto auto;
}
/* semua jaraknya 10 pixel */
element {
  margin: 10px;
}

OUTLINE


Outline sudah lama ditinggalkan dalam desain dan layout karena tidak semua browser support properti ini, namun bagaimanapun juga properti outline juga dapat ditulis dalam bentuk shorthand.

element {
  outline-width: number+unit;
  outline-style: (numerous);
  outline-color: color || #hex || (rgb / % || 0-255);
}

Bentuk shorthand-nya :


element {
  outline:3px dotted gray;
}

LIST-STYLE


Ini merupakan yang terakhir.

element {
  list-style-type: (numerous);
  list-style-position: inside || outside;
  list-style-image: url(image.png);
}

Nilai default-nya :

element {
  list-style-type:disc;
  list-style-position:outside;
  list-style-image:none;
}

Contoh penggunaannya :

ul li {
  list-style:square inside url(image.png);
}

/*
* dalam kasus ini jika image.png tidak ada maka
* akan diganti dengan simbol kotak
*/

COLOR(ing)


Oh ya satu lagi (ini yang paling akhir). adalah cara penulisan warna hexadesimal dapat kita tulis dengan format shothand.

#CCCCCC

dapat ditulis sebagai :

#CCC

atau bentuk seperti…

#FF9900

dapat ditulis dengan cara :

#F90


Itu semua adalah properti CSS yang dapat ditulis dalam bentuk shorthand, dan shorthand ini merupakan draft dari CSS3. Kita tunggu saja dokumentasi lengkapnya.

Semoga bermanfaat.

[Adaptasi dari salah satu tulisan Tony White di smashmagazine.com dan Dustin Diaz di dustindiaz.com]

2 comments on “Optimisasi web dengan CSS shorthand

  1. lumayan sedikit rumit juga ya optimisasi menggunakan css shortand ini.

Menurut anda bacaan ini bermanfaat? Ada tambahan? Atau mungkin mencari jawaban lain? Tulis disini Ok (:

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: