Mengenal Teknik Shorthand Pada CSS

Mengenal Teknik Shorthand Pada CSS

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

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.