CSS Asyik - Belajar Bikin Web Makin Asyik dengan CSS

Mengenal CSS Specificity

3 October 2009 - 1:42 by Firewalker Tutorial , , , ,

ucsi012922Specificity atau “Kekhususan” pada CSS adalah bagaimana suatu aturan style pada CSS mampu membatalkan aturan pada style lainnya. Sesuai dengan arti harfiah dari “Cascading Style Sheet”, semakin ke bawah aturan CSS akan semakin khusus dan lebih dominan. Pelajaran mengenai CSS Specificity ini penting dan prinsipnya selalu digunakan dalam proses pembuatan website.

Dalam tahap awal pembuatan CSS, web designer pada umumnya memulai dengan menentukan style-style basis untuk elemen HTML yang akan dipakai. Style-style basis atau mendasar ini adalah style yang nantinya akan paling banyak digunakan di dalam website. Kita tentunya tidak ingin menulis style untuk setiap elemen satu persatu karena akan memakan waktu dan tidak efisien.

Sebagai contoh, kita akan menentukan style untuk font yang paling banyak digunakan.

1
2
3

body {
	font: normal 12px/150% verdana, arial, sans-serif;
}

Style diatas ditempatkan pada elemen body. Berhubung body mencakup seluruh elemen yang ada dalam setiap website, style-style yang didefinisikan di dalam body akan diwariskan (inherited) kepada setiap elemen yang terkandung didalamnya. Sebagai contoh apabila di dalam body terdapat elemen p atau div, maka kedua elemen tersebut akan memiliki jenis font yang sama dengan body. Disinilah CSS Specificity berperan penting. Mari kita lihat skenario lain untuk menjelaskan peran CSS Specificity.

Dengan tetap menggunakan CSS seperti diatas, kita buat HTML seperti berikut ini:

1
2
3
4
5
6

<html>
	<body>
		<h1>Judul Ini Memiliki Font Georgia</h1>
		<p>Paragraf ini tetap menggunakan Font dari Body</p>
	</body>
</html>

Pada skenario ini, saya menginginkan agar elemen h1 memiliki jenis font-family Georgia. Berhubung Body telah mendefinisikan jenis font-family menjadi Verdana, maka khusus untuk elemen h1 kita harus membuat definisi style yang baru. Seperti berikut ini:

1
2
3
4

body {
	font: normal 12px/150% verdana, arial, sans-serif;
}
h1 { font-family: georgia; }

Karena definisi style untuk h1 diletakkan setelah body, maka setiap elemen h1 didalam body akan mematuhi style yang didefinisikan khusus untuk h1. Bagaimana jika h1 diletakkan sebelum body? Hal ini akan membuat style yang didefinisikan untuk h1 akan dibatalkan oleh body karena CSS merender style sesuai urutan penulisan. Ini adalah contoh CSS Specificity yang sangat sederhana.

Mengenal Strata/Tingkatan Pada CSS

Strata atau tingkatan inilah yang menentukan CSS Specificity. Pada contoh sebelumnya kita mensertakan dua elemen, h1 dan body. Kedua elemen tersebut dan seluruh elemen HTML lainnya memiliki strata yang sama di hadapan CSS. Yang membedakan hanyalah urutan penulisan mereka.

W3C memberikan penjelasan bagaimana menentukan strata di CSS. Untuk mempermudah kita dapat menentukan “kekuatan” dari masing-masing strata dengan 4 digit angka. Keempat digit angka tersebut menempati posisi: a, b, c dan d.

Keempat strata tersebut adalah:

  1. Inline style, adalah atribut style=" " yang ditempatkan pada tag HTML. Strata ini menempati urutan tertinggi dan menempati posisi “a” pada peta “kekuatan” strata. Nilai pada strata ini selalu 1
  2. Atribut ID, pada CSS ditandai dengan “#”. Ditempatkan pada posisi “b”, nilainya tergantung dari jumlah atribut ID yang akan didefinisikan
  3. Atribut Class, pada CSS ditandai dengan “.” . Ditempatkan pada posisi “c”, nilainya tergantung dari jumlah atribut Class yang akan didefinisikan
  4. Elemen, setiap elemen yang didefinisikan pada CSS menempat posisi “d”. Strata terkecil yang nilainya tergantung dari jumlah elemen yang didefinisikan

Masih bingung? Mari kita beri beberapa skenario!

1
2

#container p { color: blue;} /* nilai specificity: 0,1,0,1 */ 
p { color: red;} /* nilai specificity: 0,0,0,1 */

Pada contoh diatas, tulisan pada p akan berwarna biru walaupun p { color: red; } ditulis paling akhir.

1
2

#container p { color: blue;} /* nilai specificity: 0,1,0,1 */
#container .content p { color:red;} /* nilai specificity: 0,1,1,1 */

Jika ditotal, 111 > 101, maka tulisan pada p akan berwarna merah.

1
2

div p { color: blue;} /* nilai specificity: 0,0,0,2 */
.div p { color:red;} /* nilai specificity: 0,0,1,1 */

Lihat perbedaannya? Div yang kedua adalah atribut Class, maka memiliki nilai 10. P akan berwarna merah.

1
2

div p { color: blue;} /* nilai specificity: 0,0,0,2 */
td div p { color:red;} /* nilai specificity: 0,0,0,3 */

Jika memiliki strata yang sama, maka nilainya akan ditambahkan sesuai jumlah strata tersebut. P akan berwarna merah.

1
2

#container div .content p { color: blue;} /* nilai specificity: 0,1,1,2 */
#container ul li p { color:red;} /* nilai specificity: 0,1,0,3 */

Cukup jelas, bukan? Mari kita terapkan pada HTML :)

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
	<head>
		<style type="text/css">
			#container p { color: blue;} /* nilai specificity: 0,1,0,1 */
			#container .content p { color:red;} /* nilai specificity: 0,1,1,1 */
		</style>
	</head>
	<body>
		<div id="container">
			<p>Paragraf ini tetap menggunakan Font dari Body</p>
		</div>
	</body>
</html>

Dari nilai specificity-nya, baris kedua lebih tinggi dari baris pertama. Namun pada kenyataannya setelah diterapkan pada HTML, CSS justru mengacu pada baris pertama! Mengapa demikian? Lihat struktur HTML-nya:

1
2
3
4
5

...
<div id="container">
	<p>Paragraf ini tetap menggunakan Font dari Body</p>
</div>
...

P hanya dikelilingin oleh div dengan ID “container”. Sedangkan pada baris kedua CSS terdapat Class “content”, sehingga baris kedua CSS tersebut tidak akan digunakan apabila struktur tag HTML sudah sesuai dengan baris tersebut. Inilah “kekhususan” dari CSS yang harus selalu diperhatikan! Nilai dari CSS Specificity baru dapat diaplikasikan apabila sudah memenuhi kriteria kekhususan yang didefinisikan pada CSS. Untuk memenuhi kriteria CSS baris kedua tersebut, tag HTML harus memilik struktur #container > .content > p. :D

Coba perhatikan juga kasus seperti ini:

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
	<head>
		<style type="text/css">
			#container p { color: blue;} /* nilai specificity: 0,1,0,1 */
			#container .content p { color:red;} /* nilai specificity: 0,1,1,1 */
		</style>
	</head>
	<body>
<div id="container">
	<p style="color: green;">Paragraf ini tetap menggunakan Font dari Body</p>
</div>
	</body>
</html>

Dalam hal ini p akan berwarna hijau (green) karena memiliki inline style. Lihat kembali penjelasan strata, inline style adalah strata terkuat dengan nilai 1000 :) .

Menggunakan !important

Ada kalanya kita menjumpai suatu kasus dimana sebuah atribut CSS tidak boleh berubah. Dalam hal ini, mengesampingkan CSS Specificity dengan memasukkan rule baru. Disinilah !important berfungsi. Contoh penggunaannya adalah sebagai berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
	<head>
		<style type="text/css">
			p { color: yellow !important; }
                        #container p { color: blue;} /* nilai specificity: 0,1,0,1 */
			#container .content p { color:red;} /* nilai specificity: 0,1,1,1 */
		</style>
	</head>
	<body>
<div id="container">
	<p style="color: green;">Paragraf ini tetap menggunakan Font dari Body</p>
</div>
	</body>
</html>

!important diletakkan setelah value atribut di definisikan dan sebelum atribut ditutup dengan “;”. Hal ini menandakan apapun value yang didefinisikan sebelum !important tidak boleh berubah walaupun ada inline style sekalipun. Dalam hal ini, warna p adalah kuning :) .

Demikian tutorial kali ini mengenai CSS Specificity. :) Jika anda memahami ini, maka anda akan paham sebagian besar dari CSS. Pertanyaan silakan berikan melalui komen.

 
Post a comment or leave a trackback: Trackback URL.

6 comments for “Mengenal CSS Specificity”

Leave comments









 
Fully Powered By:
WordPress Firewalker Copyright © 2010 Firewalker Design