CSS Asyik - Belajar Bikin Web Makin Asyik dengan CSS

Sebagai post pertama untuk blog ini, saya akan menjelaskan bagaimana menggunakan “CSS Shorthand” atau jika diterjemahkan secara bebasnya adalah “Jalan Pintas”. 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 memendekkan 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 position

1
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