Manfaat dari CSS Shorthand ini adalah meringkas ukuran CSS anda secara dramatis. Mengeliminasi redundansi yang disebabkan oleh penulisan atribut yang sama secara berulang-ulang. Untuk lebih mengenalnya, mari kita lihat barisan kode berikut ini:
1
2
3
4
5
6 | div {
margin-top: 10px;
margin-bottom: 15px;
margin-left: 25px;
margin-right: 35px;
} |
Penulisan atribut
margin seperti diatas memerlukan 80 karakter dan terlihat tidak efisien. Atribut
margin memiliki CSS Shorthand yang sangat minim. Syntax untuk CSS Shorthand untuk
margin adalah :
top right bottom left. Sebagai contoh, untuk menyingkat kode diatas kita menulisnya sebagai berikut:
1 | div { margin: 10px 35px 15px 25px; } |
Nah, sangat pendek, kan? Hanya dengan 28 karakter kita bisa mendapatkan efek yang sama dengan 80 karakter.
Berikut ini adalah ringkasan semua CSS Shorthand yang ada beserta contoh penggunaannya:
Margin dan Padding
Margin dan Padding memiliki peraturan penulisan shorthand yang sama. Format penulisannya, seperti yang saya jelaskan sebelumnya adalah:
top right bottom left.
Penulisan dengan 4 value adalah standar penggunaan shorthand untuk margin dan padding.
1
2
3
4
5
6
7
8
9
10 | div {
margin-top: 10px;
margin-bottom: 15px;
margin-left: 25px;
margin-right: 35px;
}
/* sama dengan */
div { margin: 10px 35px 15px 25px; } |
Penulisan dengan 1 value menandakan keempat value lainnya adalah sama.
1
2
3
4
5 | div { margin: 10px; }
/* sama dengan */
div { margin: 10px 10px 10px 10px; } |
Penulisan dengan 2 value artinya value pertama adalah
top dan
bottom, sedangkan value kedua adalah
left dan
right.
1
2
3
4
5 | div { padding: 10px 20px; }
/* sama dengan */
div { padding: 10px 20px 10px 20px; } |
Penulisan dengan 3 value artinya value pertama adalah
top, value kedua adalah
left dan
right, dan value ketiga adalah
bottom.
1
2
3
4
5 | div { padding: 10px 20px 5px; }
/* sama dengan */
div { padding: 10px 20px 5px 20px; } |
Border
Untuk border, format penulisannya adalah:
width style color.
Atribut “border” digunakan untuk menentukan border dari keempat sisi sekaligus.
1
2
3 | /* Keempat sisi div akan diisi oleh border solid setebal 1 pixel
dengan warna #ccc (abu-abu) */
div { border: 1px solid #ccc; } |
Atribut “border-” + orientasi, digunakan untuk menentukan border dari sebuah sisi tergantung dari orientasi yang dicantumkan.
1
2 | /* Border ini hanya berlaku untuk sisi sebelah kanan */
div { border-right: 1px dotted blue; } |
Atribut “border-” + width/style/color, dapat digunakan untuk menentukan width/style/color dengan menggunakan format penulisan
top right bottom left. Penulisan 1 value, 2 value, 3 value, atau 4 value aturannya sama dengan margin dan padding
1
2
3
4
5
6
7
8 | /* Untuk mengganti warna border */
div { border-color: #ccc #666 #000; }
/* Untuk mengganti style border */
div { border-style: dotted solid; }
/* Untuk mengganti tebal/width border */
div { border-width: 2em 3em 1em 0.5em; } |
Background
Untuk background, format penulisannya adalah:
color image repeat attachment position1
2
3
4
5
6
7
8
9
10
11 | div {
background-color: #CCCCCC;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top left;
}
/* Sama dengan */
div { background: #ccccc url(images/bg.gif) no-repeat top left; } /* attachment secara default nilainya adalah scroll */ |
Font
Shorthand untuk font memiliki format:
style variant weight size/line-height family. Khusus untuk font, atribut yang wajib ditulis untuk shorthand adalah :
size family. Jika kedua atribut tersebut tidak ditulis, maka shorthand tersebut akan gagal. Oleh karena itu Font “hampir” dikategorikan sebagai shorthand.
1
2
3
4
5
6
7
8
9
10
11 | p { font: 600 9px Arial }
/* sama dengan */
p {
font-family: Arial;
font-style: normal;
font-variant: normal;
font-weight: 600;
font-size: 9px;
line-height: normal;
} |
List
Untuk list, format penulisan shorthand-nya adalah:
type position image.
1
2
3
4
5
6
7
8
9
10
11
12 | ul li {
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.png);
}
/* sama dengan */
ul li {
list-style:square inside url(image.png);
}
/* untuk kasus penulisan image dan type sekaligus,
browser akan membaca image terlebih dahulu,
jika file image tidak ditemukan, akan diganti dengan type */ |
Color
Dan yang terakhir, untuk setiap penulisan nilai atribut color bisa ditulis dengan shorthand dengan ketentuan berikut:
XYZ = XXYYZZ. Ketentuan ini berlaku hanya untuk nilai heksadesimal dari color
1
2
3
4
5
6
7 | p { color: #993322; }
/* sama dengan */
p { color: #932; }
p { color: #9999cc; }
/* sama dengan */
p { color: #99c; } |
Rampung sudah semua shorthand untuk aturan CSS 2 dibahas. Untuk mendapatkan Cheat Sheet-nya, sebuah situs yang saya temukan di Google telah merangkum dengan ringkas berikut contoh-contohnya:
CSS Shorthand Cheat Sheet
No comments:
Post a Comment