Memahami Teknik Shorthand Pada CSS
Apa itu Shorthand CSS?
Teknik shorthand adalah cara mempersingkat penulisan kode CSS yang memungkinkan untuk menetapkan nilai beberapa property secara bersamaan. Teknik ini dapat menghemat karakter, energi, dan tentu saja waktu, selain itu kode akan terlihat lebih rapi dan efisien. Metode penulisan model shorthand dapat diterapkan kedalam Javascript dan CSS. Tapi dalam bahasan kali ini, kita fokus belajar ke bagian CSS saja dulu.
Margin, Padding dan Outline
Margin, padding dan Outline mempunyai value (nilai) yang sama. Disini saya hanya akan mencontohkan margin.
margin-top:2px;
margin-right:10px;
margin-bottom:5px;
margin-left:20px;
maka Shorthand dari CSS di atas adalah
margin:2px 10px 5px 20px;
untuk mempermudah cara penulisnya ingat saja arah jarum jam atas > kanan > bawah > kiri
Satu Value
margin:10px;
apabila satu value, maka artinya semua value memiliki nilai samamargin:10px
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
Dua Value
margin:10px 15px;
apabila mempunya dua value maka berarti value pertama untuk margin vertikal (atas dan bawah), value kedua untuk margin horizontal (kanan dan kiri).
margin-top:10px;
margin-right:15px;
margin-bottom:10px;
margin-left:15px;
Tiga Value
margin:5px 10px 15px;
apabila mempunya tiga value maka berarti value pertama untuk atas, value kedua untuk kanan dan kiri, value ketiga untuk bawah.
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:10px;
Empat Value
margin:5px 10px 15px 20px;
apabila mempunya empat value maka berarti semua value memiliki nilai masing-masing.
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
Border
Pada property border, nilai yang bisa di set adalah border-width, border-style dan border-color.
border:1px solid #0000cc;
apabila diterjemahkan maka hasilnya adalah
border-width:1px;
border-style:solid;
border-color:#0000cc;
Font
Khusus untuk font, yang wajib ditulis adalah value dari property font-size dan font-family.
font: italic small-caps bold 12px/30px Arial, sans-serif;
maka artinya
font-weight:bold;
font-style:italic;
font-variant:small-caps;
font-size:12px;
line-height:30px;
font-family:Arial, sans-serif;
Background
Contoh Shorthand pada CSS Background
background:#fff url('/img/logo.png') no-repeat top right fixed;
maka artinya adalah
background-color: #fff;
background-image: url('/img/logo.png');
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;
Kalau tidak mau mengunakan background image, isi URLnya tinggal dikosongkan sehingga hasilnya menjadi url('')
List
Contoh CSS Shorthand pada List
list-style: circle inside url(dot.gif);
maka artinya
list-style-type: circle;
list-style-position: inside;
list-style-image: url(dot.gif);
Color
Warna juga bisa disingkat seperti #ffffff menjadi #fff atau dengan penyebutan warna seperti color: white;.
Sekian tutorial dari saya, semoga bermanfaat dan selamat mencoba…!
