CSS Shorthands adalah salah satu teknik dalam penulisan kode CSS yang lebih singkat dari aturan pada umumnya. Seorang web desainer pasti tidak akan menuliskan ribuan baris kode CSS dengan cara konvensional dan menyita banyak waktu. Maka munculah teknik CSS Shorthands itu untuk membantu kerja desainer agar lebih efisien waktu. Manfaat lainnya adalah kita bisa menghemat karakter dan ukuran file CSS yang dibuat sehingga bisa mengurangi beban load dalam sebuah website.

Berikut beberapa contoh teknik penulisan CSS Shorthands.

Margin

margin-top:2px;
margin-right:3px;
margin-bottom:2px;
margin-left:3px;

Jika disingkat menjadi:

margin:2px 3px;

Padding

padding-top:2px;
padding-right:3px;
padding-bottom:2px;
padding-left:3px;

Jika disingkat menjadi:

padding:2px 3px;

Border

border-width:1px;
border-style:dashed;
border-color:#AC1616;

Jika disingkat menjadi:

border:1px dashed #AC1616;

Font

font-size:12px;
font-weight:bold;
line-height:18px;
font-family:Arial, Helvetica, Sans-serif;

Jika disingkat menjadi:

font:bold 12px/18px Arial,Helvetica,Sans-serif;

Border-radius

border-top-left-radius: 2px;
border-top-right-radius: 6px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 3px;

Jika disingkat menjadi:

border-radius:2px 6px 5px 3px;

Background

background-color:#333;
background-image:url(bg.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

Jika disingkat menjadi:

background:#333 url(bg.png) no-repeat fixed 0 0;

List-style

list-style-type:disc;
list-style-position:inside;
list-style-image:url(gambar.gif);

Jika disingkat menjadi:

list-style:disc inside url(gambar.gif);

Color

color:#333333;

Jika disingkat menjadi:

color:#333;

Demikian tadi beberapa contoh CSS Shorthands untuk membantu teman-teman dalam mempercepat penulisan kode CSS. Semoga bermanfaat.

Tulisan Terkait: