Shorthand dalam CSS

Hai semuanya, kali ini saya akan membahas tentang CSS. Terakhir kali kita membahas CSS yaitu tentang Penggunaan Margin dan Padding dalam CSS. Sekarang kita akan membahas tentang Shorthand dalam CSS. Sebelum melanjutkan ke dalam materi nya, kita akan membahas sedikit tentang Shortand. Apa itu Shorthand ?

     Shorthand adalah sebuah teknik atau cara yang digunakan untuk mempersingkat penulisan dalam codingan CSS. Manfaat dari penggunaan teknik ini adalah dapat menghemat karakter, menghemat waktu dan membuat file menjadi lebih ringan. Selain itu, dengan menggunakan teknik Shorthand ini dapat membuat codingan lebih rapih. Didalam CSS, satu property memiliki banyak elemen nya. Misalnya di dalam property padding dan margin terdapat 4 properti. Berikut ini adalah contoh elemen nya

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left
5. margin-top
6. margin-right
7. margin-bottom
8. margin-left

Jika kamu sudah membaca artikel sebelumnya, maka kamu sudah tau fungsi dari kedua tag diatas. Saat ini, penulisan Shorthand dalam CSS tersedia untuk beberapa property, diantaranya :

• margin
• padding
• background
• font
• list
• border

Untuk yang margin dan padding, bisa kita bedakan lagi Shorthand nya berdasarkan value nya.

1. Margin dan Padding

- Satu Value

Jika menggunakan satu value, maka keempat elemen nya bersifat sama.

Syntax :
| margin-top | margin-right | margin-bottom | margin-left |
| padding-top | padding-right | padding-bottom | padding-left |

Berikut ini contoh codingan nya

margin: 15px;
padding: 15px;

Maksud dari codingan diatas adalah

margin-top: 15px;

margin-right: 15px;

margin-bottom: 15px;

margin-left: 15px;

- Dua Value

Jika menggunakan dua value, maka value yang petama adalah margin vertikal ( margin-top dan margin-bottom) dan yang kedua adalah margin horizontal ( margin-left dan margin-right).

Syntax :
| margin-top dan margin-bottom | margin-left dan margin-right |
| padding-top dan padding-bottom | padding-left dan padding-right |

Berikut ini contoh codingan nya :

margin: 10px 12px;
padding: 10px 12px;

Maksud dari codingan diatas adalah

margin-top: 10px;

margin-right: 12px;

margin-bottom: 10px;

margin-left: 12px;

- Tiga Value

Jika menggunakan tiga value, maka value yang pertama adalah margin-top. Kedua margin-left dan margin-right, dan yang ketiga adalah margin-bottom.

Syntax :
| margin-top | margin-left dan margin-right | margin-bottom |
| padding-top | padding-let dan padding-right | padding-bottom |

Berikut ini contoh codingan nya

margin: 5px 10px 15px;
padding: 5px 10px 15px;

Maksud dari codingan diatas adalah

margin-top: 5px;

margin-left: 10px;

margin-right: 10px;

margin-bottom: 15px;

- Empat Value

Empat value ini sebenarnya sama saja dengan margin pada umumnya. Namun yang menjadi pembeda nya adalah penulisan nya, karena pembahasan kita kali ini adalah tentang Shorthand.

Note : margin dengan empat value memiliki arah jarum jam berputar.

Syntax :
| margin-top | margin-right | margin-bottom | margin-left |
| padding-top | padding-right | padding-bottom | padding-left |

Berikut ini adalah contoh codingan nya

margin: 2px 4px 6px 8px;
padding: 2px 4px 6px 8px;

Maksud dari codingan diatas adalah

margin-top: 2px;

margin-right: 4px;

margin-bottom: 6px;

margin-left: 8px;

2. Background

Kita juga bisa menerapkan Shorthand pada background. Dengan menerapkan Shorthand pada background, akan membuat kita lebih menghemat waktu. Berikut ini adalah contoh jika kita tidak menerapkan Shorthand.

background-color: #A2A2A2;
background-image: url('linkgambar.jpg');
background-position: top;
background-repeat: no-repeat;

Jika kita menerapkan Shorthand, maka codingan nya seperti dibawah ini.

background: #A2A2A2 url('') no-repeat top;

Syntax :
| background-color | background-image | background-repeat | background-position |

Maksud dari codingan diatas adalah

background-color: #A2A2A2;

background-image: url('');

background-repeat: no-repeat;

background-position: top;

3. Font

Font merupakan element terpenting pada sebuah website, font yang akan dipilihnya pun akan berpengaruh kepada para pembaca nya. Namun kebanyakan orang mengabaikan hal tersebut karena property nya. Jika tidak menggunakan teknik Shorthand, maka codingan yang ditulis harus seperti ini

font-style: italic;
font-weight: bold;
font-size: 10px;
font-family: 'Courier New', Courier, monospace;

Namun jika menggunakan teknik Shorthand, codingan nya menjadi lebih simple seperti dibawah ini

font: italic bold 10px 'Courier New', Courier, monospace;

Syntax :
| font-style | font-weight | font-size | font-family |

Maksud dari codingan diatas adalah

font-style: italic;

font-weight: bold;

font-size: 10px;

font-family: 'Courier New', Courier, monospace;

4. List

Salah satu fungsi list adalah membuat daftar atau urutan. Dalam penulisan list, pasti menggunakan style yang beragam dan banyak. Namun dengan menggunakan teknik Shorthand ini bisa mempersingkat codingan dan menghemat waktu. Berikut ini contoh codingan pembuatan list yang tidak menggunakan teknik Shorthand.

list-style-type: disc;
list-style-position: initial;
list-style-image: url('linkgambar.png');

Jika menggunakan teknik Shorthand, maka seperti dibawah ini.

list-style: disc initial url('linkgambar.png');

Jika kamu tidak ingin menggunakan background dalam list nya, kamu tidak perlu menuliskan value url

Syntax :
| list-style-type | list-style-position | list-style-image |

Maksud dari codingan diatas adalah

list-style-type: disc;

list-style-position: initial;

list-style-image: url('linkgambar.png');

5. Border

Jika kamu ingin membuat border dalam CSS, sebaiknya kamu menggunakan teknik Shorthand. Karena dalam pembuatan sebuah border, membutuhkan banyak property. Berikut ini adalah contoh jika membuat border menggunakan teknik Shorthand.

border: 5px solid #0000FF;

Syntax :
| border-width | border-style | border-color |

Maksud dari codingan diatas adalah

border-width: 5px;

border-style: solid;

border-color: #0000FF;

Jika kamu ingin menggunakan warna lainnya, kamu bisa memilih warna nya disini.

Kamu bisa menggunakan teknik Shorthand ini di dalam blog ataupun website milikmu agar dapat mempersingkat waktu. Selain dapat mempersingkat waktu, dengan menggunakan teknik Shorthand ini dapat memperkecil ukuran dari file CSS nya. Jika website nya hanya sekedar portofolio mungkin tidak berpengaruh, tetapi jika website nya seperti website perusahaan ataupun website sekolah tentu akan berpengaruh dari segi ukuran file CSS nya. Karena website perusahaan ataupun website sekolah berisi informasi yang sangat penting, sehingga membutuhkan banyak codingan. Sekian artikel kali ini dan terimakasih _^