Mengenal Teknik Shorthand Pada CSS

Cara Menulis CSS Shorthand

Apa itu Shorthand CSS? Teknik shorthand adalah cara mempersingkat penulisan kode CSS (Cascading Style Sheets) yang memungkinkan untuk menetapkan nilai beberapa property secara bersamaan. Teknik ini dapat menghemat karakter, menghemat energi, dan tentu saja menghemat waktu. Kode jadi terlihat lebih rapi dan efisien (dan seringkali lebih mudah dibaca). Metode penulisan model shorthand dapat diterapkan kedalam Javascript dan CSS. Tapi dalam bahasan kali ini, kita fokus ke bagian CSS saja dulu.

Dalam CSS, adalah wajar jika satu property memiliki banyak elemen. Misalnya dalam CSS margin memiliki 4 property untuk setiap sisi elemen.
  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left

Cara Mempersingkat Penulisan Kode CSS

Perhatikan deh. Penulisan kata "margin" diulang-ulang, kan? Jika kamu menggunakan teknik shorthand CSS, maka hal seperti itu bisa dihindari demi terciptanya kode yang lebih ringkas. Teknik shorthand pada CSS ini nggak bisa ngasal. Urutan penulisan syntax harus benar agar sesuai dengan style yang diinginkan.

Untuk saat ini, metode penulisan shorthand CSS ini tersedia untuk beberapa property berikut:
  1. Margin
  2. Padding
  3. Font
  4. Background
  5. Border
  6. List

1. Margin dan Padding

Untuk margin dan padding, ada 4 jenis penulisan shorthand yang dikenal.

1.1. Satu Value

Jika menggunakan ini, keempat elemen memiliki value yang sama.

KODE
margin: 5px;
padding: 5px;

ARTINYA
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;

SYNTAX PENULISAN
margin: margin-top, margin-right, margin-bottom, dan margin-left
padding: padding-top, padding-right, padding-bottom, dan padding-left

1.2. Dua Value

Value pertama untuk margin vertikal (top dan bottom), value kedua untuk margin horizontal (right dan left).

KODE
margin: 5px 10px;
padding: 5px 10px;

ARTINYA
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;

SYNTAX PENULISAN
margin: margin-top dan margin-bottom | margin-right dan margin-left
padding: padding-top dan padding-bottom | padding-right dan padding-left

1.3. Tiga Value

Value pertama untuk top, value kedua untuk right dan left, value ketiga untuk bottom.

KODE
margin: 5px 7px 10px;
padding: 5px 7px 10px;

ARTINYA
margin-top: 5px;
margin-right: 7px;
margin-bottom: 10px;
margin-left: 7px;

SYNTAX PENULISAN
margin: margin-top | margin-right dan margin-left | margin-bottom
padding: padding-top | padding-right dan padding-left | padding-bottom

1.4. Empat Value

Setiap elemen ditentukan valuenya masing-masing.

KODE
margin: 3px 5px 7px 10px;
padding: 3px 5px 7px 10px;

ARTINYA
margin-top: 3px;
margin-right: 5px;
margin-bottom: 7px;
margin-left: 10px;

SYNTAX PENULISAN
margin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left

2. Font

Khusus untuk font, yang wajib ditulis adalah value dari property font-size dan font-family. Kalau nggak, biasanya akan gagal.

KODE
font: italic bold 14px/30px Arial;

ARTINYA
font-style: italic;
font-weight: bold;
font-size: 14px;
line-height: 30px;
font-family: Arial;

SYNTAX PENULISAN
font: font-style | font-weight | font-size/line-height | font-family

3. Backgound

KODE
background: #cc0000 url('igniel.jpg') no-repeat top center;

Kalau nggak mau pake background, isi URLnya tinggal dikosongkan sehingga hasilnya menjadi url('').

ARTINYA
background-color: #cc0000;
background-image: url('igniel.jpg');
background-repeat: no-repeat;
background-position: top center;

SYNTAX PENULISAN
background: background-color | background-image | background-repeat | background-position

4. Border

KODE
border: 3px solid #0000cc;

ARTINYA
border-width: 5px;
border-style: solid;
border-color: #0000cc;

SYNTAX PENULISAN
border: border-width | border-style | border-color

5. List

KODE
list-style: disc inside url('dot.gif');

Kalau nggak mau pake background, isi URLnya tinggal dikosongkan sehingga hasilnya menjadi url('').

ARTINYA
list-style-type: disc;
list-style-position: inside;
list-style-image: url('dot.gif');

SYNTAX PENULISAN
list-style: list-style-type | list-style-position | list-style-image

Cobain deh teknik penulisan shorthand CSS ini untuk template kamu agar source kodenya nggak terlalu panjang. Nanti ukuran page pun akan lebih kecil. Bisa lah sedikit-sedikit memperingan loading blog meskipun perbedannya nggak terlalu signifikan. Buat saya, tujuan utama menerapkan shorthand ini agar kode terlihat lebih rapi dan efisien aja. Energi dan waktu pun akan lebih hemat karena kode yang ditulis menjadi lebih sedikit.
Baca Juga

DONASI VIA PAYPAL

Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

4 Komentar

  1. wihhh...makasih informasinya mba...ternyata kodinganya memang mantaff dehh

    ReplyDelete
  2. Ternyata sebutannya itu Shorthand toh.. baru tau saya :)

    ReplyDelete
  3. Jadi shorthand ini bisa langsung di letakkan di halamannya langsung tanpa memanggilnya lagi. Seperti itu kan kak?

    ReplyDelete
    Replies
    1. Shorthand ini cuma metode penulisan yang bikin kode CSS lebih singkat kak. Tetep harus dipanggil seperti biasanya.

      Misal
      <div class="contoh">

      Delete

Gunakan tag HTML <em> untuk menuliskan URL, potongan kode, atau hal penting lainnya.
Contoh: <em>isi pesan</em>