perhatikan contoh berikut:

.warna {
color: Red;
}
.warna {
color: Blue;
}

Bila kode idatas diaplikasikan pada sebuah tag html, yang akan muncul adalah sebuah teks dengan warna biru (color: Blue;).

Lalu ubah css diatas menjadi:

p.warna {
color: Red;
}
.warna {
color: Blue;
}

Yang akan muncul kemudian adalah huruf dengan warna merah (color: Red;). Property color: Blue; tidak lagi menimpa fungsi diatasnya, karena p.warna memiliki nilai specificity lebih tinggi dari pada .warna.

Menghitung Specificity

Specificity ditentukan dari selector pada css:
HTML selector (p, div, ul) memiliki nilai specificity 1
Class Selector (.warna) memiliki nilai specificity 10
ID Selector (#warna) memiliki nilai specificity 100

div p (1 dimiliki div, 1 dimiliki p) memiliki nilai specificity 2
div.header (1 dimiliki div, 10 dimiliki .header) memiliki nilai specificity 11
#container .header (100 dimiliki #container, 10 dimiliki .header) memiliki nilai specifity 110

Lalu, untuk apakah mengetahui specificity ini? Specificity dapat digunakan untuk mengatur susunan document css untuk mempermudah penggunaan pada skala besar, menghindari penggunaan secara masif !important, menghemat penamaan selector dan dengan mudah mengatur style untuk selector yang memiliki nama yang sama.

Anda dapat melihatnya pada halaman Contoh.

Yang perlu kita siapkan adalah sebuah image yang bisa dibuat dengan menggunakan Photoshop seperti dibawah ini:

Gambar diatas adalah gambar yang akan kita pergunakan dimana gambar diatas terbagi menjadi 2 bagian, yaitu bagian atas untuk tombol yang tidak ditempati kursor (state), dan bagian kedua adalah bagian yang ditempati kursor (Over/Rollover), pada contoh ini saya berinama file tersebut dengan nama tombol.gif.

Perhatikan gambar diatas, dan perhatikan baik-baik pada ukuran yang saya berikan pada bagian atas. nah ukuran itu yang nanti akan kita pergunakan sebagai ukuran dari tombol. Yang kita perlukan sekarang adalah membuat kode html untuk tombol diatas:

<a href="#">Tombol</a>

Nah, semudah itu. Sekarang kita buat CSS nya:

a {
display: block;
background: url(tombol.gif) top center;
width: 124px /*Lebar Tombol*/
height: 40px /*Tinggi Tombol*/
text-align: center; /*Supaya Teks Ditengah (vertical)*/
line-height: 40px; /*Supaya Teks Ditengah (Horizontal)*/
font-family: Geneva, Arial, Sans-Serif; /*(Jenis Huruf)*/
color: #fff; /*(Warna Hurus)*/
text-decoration: none; /*Jangan pergunakan garis bawah*/
}

a:hover { /*Posisi kursor diatas tombol*/
background: url(tombol.gif) bottom center;
}

Intinya, kita menukar posisi image pada tombol.gif, bila tidak aktif maka ia menggunakan background bagian atas, ketika aktif maka akan digunakan background bagian bawah. Kenapa kita harus menggunakan display:block? Dikarenakan <a> merupakan inline tag, maka ia harus menggunakan display:block agar menjadi block tag dan dapat merespon link area. Mudah bukan?
http://pupungbp.erastica.com

Beberapa tag yang memiliki nilai default berbeda pada setiap browser, sebagai contoh adalah Heading <h> , List <ul, ol, li>, Paragraph <p>, blockquote, dll. Umumnya perbedaan ini dimiliki oleh tag-tag yang bersifat block (block tag).

Sebagai contoh, bila kita mendefinisikan heading (h1, h2, h3, dst) maka jarak margin dan padding akan berbeda pada berbagai browser.

Sebuah tips yang mungkin berguna bagi Anda, adalah dengan menggunakan apa yang biasa disebut dengan “Global Reset” yaitu dengan menambahkan aturan yang menyamakan semua perbedaan pada setiap browser. Yaitu dengan menambahkan:

 /* CSS Document */
* {
padding: 0;
margin: 0;
}

Dengan demikian semua margin dan padding akan di-reset menjadi 0. Dengan demikian, yang anda perlukan selanjutnya adalah mengatur kembali margin dan padding pada setiap elemen:

 h1 {
font: normal 18px Arial, Helvetica, Sans-Serif;
margin: 4px;
padding: 4px;
}

Bagi saya, global reset memudahkan penelusuran masalah bila Anda menemukan tampilan yang berbeda atau menjadi tidak sama pada setiap browser. Silakan saja dicoba… (Pupung Budi Purnama)

Btw, IE ngga mendukung pseudo-element jadi mendingan buka Firefox atau Opera supaya bisa ngikutin artikel ini. Ya emang suxx, tapi kalo kata bule-bule, “it will degrade gracefully”.

Apa Sih Gunanya Pseudo-Elements?

Biar lebih jelas coba salin kode dibawah ini dan buka di browser. Atau liat aja contoh 1.

body:before {
  content: "Hello World!!";
  display: block;
  font-size: 5em;
  text-align: center;
}

Udah? Lumayan keren kan? Itu sih belom apa-apa, masih banyak lagi kegunaan praktis pseudo-element. Nyok kita liat…

Memasukkan Teks dan Objek

Pada dasarnya sih kamu bisa memasukkan string teks apa aja, caranya juga udah bisa kamu lihat di contoh 1. Tapi selain itu kamu juga bisa memasukkan objek lain lho (gambar misalnya), kamu tinggal memberikan URLnya.

.box:before {
  content: url(box-top.gif);
  display: block;
  ...
}
.box:after {
  content: url(box-bottom.gif);
  display: block;
  ...
}

Oia, gue lupa. Kalo divisualisasikan pseudo-element :before dan :after akan memasukkan konten di bagian ini:

<div class="box">
  <BEFORE>box-top.gif</BEFORE>

  <p>some content...</p>

  <AFTER>box-bottom.gif</AFTER>
</div>

Kode CSS diatas bisa dipake untuk bikin rounded corner tanpa markup tambahan. Liat sendiri hasilnya di contoh 2.

Penomeran Otomatis

Selain menampilkan teks statis, kamu juga bisa membuat counter atau penomeran otomatis pake fungsi counter(nama). Untuk permulaan kita coba dengan contoh yang simpel dulu: Kita akan menomeri contoh-contoh kode seperti yang akan kamu liat pada contoh 4 dengan label “Example 1″, “Example 2″, dst.

html {
  counter-reset: codenum;
}
.example:before {
  content: "Example " counter(codenum);
  counter-increment: codenum;
  display: block;
  ...
}

Fyi, semua blok kode pada halaman contoh dibungkus dalem div.example lho ya.

Oke, bagian ini mungkin perlu sedikit penjelasan. Perhatikan selector kedua, disini gue membuat sebuah counter dengan nama codenum yang diawali teks “Example”. Trus menjalankan penomerannya pake properti counter-increment.

Belom selesai! Properti counter-reset di selector pertama dipake untuk memulai penomeran dari nol (ini sebenernya bug fix supaya Firefox ngga ngebandel). Dan biarpun secara default penomeran dibuat dengan format angka, tapi diubah jadi bermacam style lain juga bisa.

Membuat Daftar Multi-Kolom

Sekarang ceritanya kamu harus membuat sebuah daftar urut (pake tag ol donk), yang secara visual harus terpisah jadi beberapa kolom. Tapi itu artinya kamu harus memisahnya jadi beberapa daftar dan penomeran ngga akan berurutan donk. Jadi gimana cara kita menghasilkan efek ini?

html {
  counter-reset: listnum;
}
ol li {
  list-style-type: none;
}
ol li:before {
  content: counter(listnum) ". ";
  counter-increment: listnum;
}

Dengan markup pada contoh 5 dan CSS diatas, daftar multi-kolom kita jadi deh! Keren kan?

Menampilkan Isi Atribut Tag HTML

Ada saatnya kita mau memberikan informasi tambahan tentang sebuah elemen. Contohnya atribut cite dari tag blockquote yang isinya biasanya informasi mengenai sumber kutipan yang sialnya kebanyakan browser ngga menampilkan isinya. Disinilah pseudo-element datang membantu, dengan fungsi attr().

blockquote[cite]:after {
  content: "Source: " attr(cite);
  display: block;
  ...
}

Gue juga pake attribute selector supaya hanya blok kutipan yang punya atribut cite yang diberi styling. Hasilnya liat di contoh 6.

Tooltip Dinamis Tanpa JavaScript

Tooltip JavaScript? Basi! Cobain tooltip murni CSS ini. Disini kita bermain dengan fungsi attr() untuk menampilkan isi atribut title sebuah link.

a[title]:hover:after {
  content: attr(title);
  display: block;
  width: auto;
  position: absolute;
  z-index: 1000;
  top: auto;
  left: auto;
  ...
}

Coba liat contoh 7 dan cek sourcenya kalo perlu. Eh, pake Opera aja ya soalnya ancur di Firefox :P

Progressive Enhancement

Masalah pasti ada. IE 6 jelas ngga ketolong dan developer IE 7 juga udah bilang ngga akan mendukung pseudo-element, jadi protesnya jangan sama gue. Pengguna Safari pada OS X sepertinya juga ngga bisa nikmatin fitur CSS yang satu ini, sori :)

Tapi inget aja kalo CSS dan browser-browser open-source seperti Firefox terus berkembang. Yang gue tunjukin disini kadang disebut dengan istilah Progressive Enhancement, ato praktik yang memanfaatkan sepenuhnya kemampuan browser-browser modern, sementara tetep menjamin pengalaman yang optimal untuk pengguna browser laen.

Sebelom pulang gue mo bilang terima kasih buat Ncus, Dental, Lino, Deny dan pastinya mas Pupung BP yang udah membantu pengetesan. Cheers!

Penulis:
Rizky Syajuli – 23 / Male / Jakarta
Web Desainer dan konsultan Search Engine Marketing.
http://blog.kometdigital.web.id/

Gini lho, IE 5 dan 6 punya banyak banget bug, jadi kalo platform development utama kamu adalah IE, dari awal kamu udah berpatokan pada hal yang salah. Jadi kali ini gue mau nunjukin langkah-langkah yang lebih menjamin kompatibilitas antar browser.

Gunakan Doctype Yang Sesuai

Doctype di bagian paling awal kode dokumen (x)HTML pada dasarnya berguna untuk menentukan mode layout dokumen tersebut. Tanpa ini browser akan beralih ke quirks mode, yang secara kasar bisa berarti merender sebuah sebuah dokumen seenaknya dewek.

Untuk hasil konsisten gue sarankan pake Doctype XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Mulai Dari Yang Mendukung CSS Lebih Baik

Biarpun kamu biasa browsing pake IE tapi waktu mendesain mendingan kamu menggunakan browser yang lebih standards-compliant seperti Firefox atau Opera. Kalo gue sendiri urutannya seperti ini:

1. Firefox (Win XP): Banyak add-on yang membantu banget proses pengembangan web. Ngga ada lawan kalo soal ini.
2. Opera (Win XP): Satu-satunya browser yang lulus acid test. Kalo ada masalah disini kemungkinan ada sesuatu yang salah.
3. Safari (OS X): Perlu diinget kalo koleksi font dan cara rendering teks di sistem berbasis Unix itu beda, tapi secara umum ngga perlu perhatian khusus.
4. Konqueror (Ubuntu): Catetan seputar font juga berlaku disini. Dan sejauh ini juga masih blom ada masalah.
5. Internet Explorer 7 (Win XP): Mulai was-was, biarpun dukungan CSS udah jauh lebih lengkap tapi masih ada aja masalah :( Tapi dengan sedikit hack atau conditional comment masalah beres.
6. Internet Explorer 6 (Win XP): Tantangan terbesar ada disini. Untungnya bug-bug IE 6 terdokumentasi dengan baik, jadi tinggal Googling sebentar aja. malah kalo udah berpengalaman gejala-gejala bug sebenernya cukup jelas kok.

Harus gue akuin urutannya ngga selalu gitu, kadang gue males ngecek di Linux. Browser laennya? Kalo Netscape dan semua yang berbasis Mozilla gue asumsikan punya kemampuan sama seperti Firefox. Dan IE 5 versi Windows ataupun Mac biasanya ngga gue urusin lagi, toh browser-browser ini juga udah jarang beredar — Kecuali ada permintaan spesifik atau duit ekstra ya :P

Testing Untuk Perangkat Mobile

Ini era tri-ji bung, ngga ada salahnya untuk bersiap dari sekarang. Opera punya fitur berguna untuk melihat bagaimana tampilan desain kita di layar kecil (Opera Mobile).

Pilih menu View > Small Screen atau tekan Shift + F11

Testing Aksesibilitas

tanpa table, semantik, separasi antara struktur dan presentasi. apa kata-kata itu kedengarannya aneh buat kamu? Coba gunakan browser yang text-only seperti Lynx (Linux) dan lihat apakah kamu bisa meneluri situs kamu sendiri. Sedikit tips, di Firefox coba matiin style, image, dan JavaScript, hasilnya cukup mirip :)

Catatan Tambahan

Ngga ada Linux? PC dual-boot bukan hal aneh jaman sekarang. sebuah CD Ubuntu Linux misalnya, gampang didapet dan di-install, jadi jangan cari-cari alesan deh. Kalo testing di Mac? ngga punya MacBook? ndeso! tapi ada sih layanan gratis di BrowsrCamp.com untuk mengambil skrinsyut desain kamu jika dilihat melalui Safari.

Terakhir kalo kamu masih perlu hasil tes tambahan dan punya sedikit dana ekstra ada BrowserCam yang bisa membantu kamu mengetes di berbagai platform sekaligus. Ada free trial 24 jam juga lho ;)

Penulis:
Rizky Syajuli – 23 / Male / Jakarta
Web Desainer dan konsultan Search Engine Marketing.
http://blog.kometdigital.web.id/

Namun dibalik keunggulan itu, HTML memiliki keterbatasan. Ia tidak memberikan kebebasan penuh pada para desainer untuk menampilkan objek-objek yang akan ditampilkan di Web. Diantaranya adalah logo perusahaan, karena alasan grafis dan tipografi, keberadaan logo yang kebanyakan berupa Image ini tidak dapat begitu saja digantikan oleh teks HTML, dengan kata lain, hal ini berkaitan dengan image perusahaan dan branding (yang satu ini tidak dapat di tawar-menawar dengan klien).

CSS menawarkan solusi untuk hal ini, yaitu dengan metode Image Replacement. Titel atau nama sebuah situs yang disimpan dalam sebuah tag heading atau <h1> dapat kita gantikan menggunakan gambar (image) secara visual. Walaupun sebenarnya image bukan “menggantikan” sepenuhnya dari fungsi titel dalam h1 ini, tapi lebih ke “bekerja-sama” dimana kedua fungsi ini akan saling menggantikan.

Image Replacement ini memiliki beberapa metode diantaranya

Fahrner Image Replacement (FIR)

Diperkenalkan oleh Todd Fahrner, Metoda ini mungkin adalah metode image replacement yang paling terkenal dan banyak digunakan karena kemudahannya. Konsep dari metode ini sangat sederhana, yaitu dengan menyimpan teks dalam tag span diapit oleh tag heading:

<h1>
<span>Fourg Core Gear</span>
<h1>

Lalu aplikasikan image untuk menggantikan teks sebagai background pada elemen heading.

h1 {
background: url(logofourg.gif) no-repeat top left;
width: 180px;
height: 50px;
} 

Lalu sembunyikan konten dalam span dengan:

span {
display:none;
} 

Metode ini bekerja dengan sangat baik, namun ternyata memiliki metode ini akibat buruk terhadap aksesibilitas. Bila user menon-aktifkan tampilan image pada browser mereka, mereka tidak melihat apa-apa. Selain itu screen reader juga tidak membaca teks yang telah disembunyikan oleh metode ini.

Phark

Mike Rundle memperkenalkan metode yang lebih screenreader-friendly dan menghindari penggunaan non-semantic tag.

<h1>Fourg Core Gear</h1>

Metode yang dipergunakan Phark tidak membuat teks menghilang, tapi dengan memindahkan teks keluar area browser. Phark memberikan text-indent negatif yang besar,

h1 {
text-indent: -5000px;
background: url(logofourg.gif) no-repeat top left;
width: 180px;
height: 50px;
}

Screen reader dapat membaca dengan baik teks dalam h1, namun seperti halnya teknik FIR, metode ini tidak akan bekerja bila tampilan image tidak diaktifkan di browser karena keterbatasan bandwidth dan akses yang lambat.
Masih terdapat beberapa metode Image Replacement kita akan membahasnya pada tulisan yang akan datang (bersambung…)

Pustaka:
CSS Mastery: Advanced Web Solutions; Budd, Andy; 2006; Friends of Ed.

p {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 11pt;
font-style: normal;
}

dapat kita singkat menjadi:

p {
font: normal 11pt Arial, Helvetica, Sans-Serif;
}

CSS Shorthand Property ini dapat kita terapkan pada background, font, margin dan padding, border, dan list.

Background

Pada background, CSS Shorthand Property memiliki sintaks sebagai berikut:

background: background-color | background-image | background-repeat | background-attachment | background-position

contoh:
.elin {
background: #EFEFEF url('images/background.jpg') repeat-x fixed top;
}


Font

Sintaks:
font: font-style | font-variant | font-weight | font-size | line-height | font-family

contoh:
p {
font: bold 11px Arial, Helvetica, Sans-Serif;
}


margin dan padding

Sintaks:
margin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left

Contoh:
.left {
margin: 11px 12px 30px 20px;
padding: 11px 12px 30px 20px;
}

Supaya memudahkan mengingat, saya biasa menganalogikannya dengan putaran jarum jam yang selalu dimulai dari jam 12 (top). Untuk margin dan padding, ia memiliki perbedaan, dimana ia bisa dideklarasikan dengan lebih sederhana lagi:
Sintaks:
Margin: margin-top = margin-right = margin-bottom = margin-left

contoh:
.left {
margin: 15px;
}
berarti, untuk margin atas, kanan, bawah, dan kiri memiliki value 15px.

Sintaks:
margin: margin-top = margin-bottom | margin-right = margin-left

contoh:
.left {
margin: 15px 20px;
}
berarti, margin atas dan bawah 15px, sedangkan margin kiri dan kanan 20px;

Sintaks:
margin: margin-top | margin left = margin right | margin bottom