CSS Shorthand Properties

Salah satu keunggulan penggunaan metode CSS(cascading Style Sheet) adalah size dari file yang dihasilkan lebih kecil, dan otomatis akan mengurangi waktu download halaman kita di internet. selain itu juga salah satu keunggulan (keunggulan utama menurut saya) adalah dengan metode CSS kita bisa memisahkan antara HTML dengan visual style-nya dimana akan memudahkan kita melakukan switching dan atau upgrade desain visual dari website kita. So tidak perlu lagi mengganti line by line di halaman HTML cukup mengganti-nya di halaman CSS kita, dan akan langsung mengubah tampilan HTML sesuai perubahan yang kita buat di halaman CSS.

Tapi dari metode css ini sendiri kita bisa melakukan optimize sehingga manfaat yang kita dapat dari penggunaan metode CSS ini lebih besar baik itu dari sisi filesize maupun kemudahan lain dari metode CSS. Tehnik Optimisasi yang saya bahas disini adalah penggunaan CSS Shorthand Properties, apa itu?

CSS Shorthand Properties adalah Penyederhanaan bentuk penulisan blok deklarasi CSS

CSS Shorthand Properties Font

Dengan metode CSS biasa kita menuliskan property untuk font sbb:

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: underline;
font-family: arial

Dengan metode peyederhanaan kita bis amenuliskan 5 baris diatas menjadi satu baris saja

font: 1em/1.5em bold underline arial

CSS Shorthand Properties Font mempunyai element minimal Font-Size dan Font-Family element-element yang lain seperti: font-weight, font-style hanya di apply jika disebutkan, jika tidak akan dikembalikan ke nilai default.

CSS Shorthand Properties Border

Metode CSS biasa:

border-width: 1px;
border-color: #000;
border-style: dotted

Dengan metode CSS Shorthand Properties Border bentuk CSS diatas menjadi

border: 1px #000 dotted

Jika disebutkan spesifik border misal:

border-left-width: 1px;
border-left-color: #000;
border-left-style: dotted

CSS Shorthand Properties Border :

border-left: 1px #000 dotted

Selain cara diatas kita juga bisa memanfaatkan CSS Shorthand Properties Border untuk menyederhanakan bentuk CSS border yang berbeda untuk setiap sisi, dengan aturan penulisan ber-urut top, right, bottom, left. perhatikan code CSS dibawah kedua blok CSS tersebut menghasilkan visual yang sama.

.satu{
border-top-color:#000099;
border-top-style:dotted;
border-top-width:2px;

border-right-color:#006600;
border-right-style:solid;
border-right-width:4px;

border-bottom-color:#000000;
border-bottom-style:dashed;
border-bottom-width:1px;

border-left-color:#CC0000;
border-left-style:double;
border-left-width:3px;
}
.dua{
border-color:#000099 #006600 #000000 #CC0000;
border-style:dotted solid dashed double;
border-width:2px 4px 1px 3px;
}

CSS Shorthand Properties Margin & Padding

Penulisan style margin dan padding sangat fleksible jika menggunakan CSS Shorthand Properties Margin & Padding tergantung jumlah nilai element yang dimasukkan didalam deklarasi CSS.

4 Nilai Element
Aturan urutan yang berlaku jika kita memasukkan ke-4 element sisi margin & padding adalah Top, Right, Bottom, Left. Contoh :

.margin_1{
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px
}
.margin_2{
margin:1px 2px 3px 4px;
}

Ke-2 blok deklarasi CSS margin diatas akan menghasilkan visual effect yang sama terhadap element yang mengunakan class bersangkutan.

3 Nilai Element
Aturan : top, right and left, bottom. Contoh :

.margin_1{
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 2px;
}
.margin_2{
margin: 1px 2px 3px;
}

2 Nilai Element
Aturan : top and bottom, right and left. contoh:

.margin_1{
margin-top: 1px;
margin-right: 2px;
margin-bottom: 1px;
margin-left: 2px;
}
.margin_2{
margin: 1px 2px;
}

1 Nilai Element
Aturan : Semua sisi menggunakan nilai yang sama. contoh:

.margin_1{
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
}
.margin_2{
margin: 1px;
}

Untuk Padding berlaku aturan CSS Shorthand yang sama dengan margin

CSS Shorthand Properties Background

.background_1{
background-color: #000;
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: top center
}
.background_2{
background:#000 url(sample.gif) no-repeat top center
}

Jika nilai background-repeat dan atau background-position tidak disebutkan maka nilai default akan digunakan yaitu repeat dan atau top left.

CSS Shorthand Properties List

li.satu{
list-style-type:circle;
list-style-position:inside;
list-style-image: url(sample.gif)
}
li.dua{
list-style: circle inside url(sample.gif)
}

Jika salah satu element list stle tidak disebutkan maka akan diberikan nilai default yaitu disc untuk list-style-type, outside untuk list-style-position dan none untuk list-style-image.

Sumber:http://www.ariel.web.id