Saya kaget melihat banyak respon tulisan sebelumnya tentang jurus atur ulang dalam mendesain situs web berbasis standar. Berbasis standar artinya adanya pemisahan antara pengaturan tampilan dan konten (isi). Dengan pemisahan ini, para penganut web berbasis standar percaya, situs web akan lebih dapat didayagunakan karena mendukung: aksesibilitas konten, usabilitas isi, selain faktor pembangunan yang lebih efisien.

Aksesibilitas dimungkinkan oleh kode yang memanfaatkan elemen-elemen semantik, sehingga isi di dalamnya dapat diambil oleh berbagai macam perangkat secara mudah dan dapat diakses oleh siapa saja. Usabilitas terjadi karena konten yang terpisah tersebut akhirnya dapat dimanfaatkan oleh siapa saja secara mudah dan cepat. Faktor terakhir yang paling penting tentu efisiensi dalam pembangunan situs. Sebabnya, kalau kita mendayagunakan pembangunan web berbasis standar, pembuat situs lebih mudah mengaplikasikan pembangunan situsnya, lebih fokus, dan lebih mudah dimodifikasi ulang bila diperlukan.

Baiklah, saya rasa kapan-kapan perlu juga dibuat tulisan khusus tentang web berbasis standar, tapi kali ini saya ingin membahas lagi tentang jurus atur ulang dalam tulisan sebelumnya. Kenapa perlu ditulis ulang? Saya rasa penjelasan sebelumnya masih terlalu teknis dan tidak ada penjelasan detil mengenai latar belakang kenapa semua perlu diatur ulang.

Pada Awalnya, Semua Harus Semantik

Suatu ketika, saya membangun sebuah situs web dengan metodologi web berbasis standar. Saya kira saya cukup fanatik untuk memegang teguh prinsip penggunaan metodologi ini. Namun, karena semau baru mulai, saya belum ada pegangan bagaimana kode dan CSS tersebut harus ditulis. Saya belum mengerti bahwa kode itu harus semantik, kode judul harus ditulis dalam <h2>Judul Artikel</h2> misalnya, atau subjudul dengan <h3>Sub Judul</h3>, dan juga judul utama situs menggunakan <h1>Nama Situs Anda</h1>. Dan seterusnya. Daftar harus memakai <ul>..</ul> atau <ol>…</ol>, kutipan harus <blockquote>, dan seterusnya. Saya waktu itu hanya memakai aturan <div class=“nama-class”>…</div> atau <div id=“nama-id”>…</div>. Cukup begitu.

Saya kira dengan begitu saja semua cukup standar. Ketika divalidasi semua valid. Maka saya nggap sudah. Tapi ketika saya berhadapan dengan teori web yang harus semantik, dan sebagainya, maka mau tak mau, saya akhirnya mengalah. Salah satu keunggulan web semantik adalah berbagai peralatan pembaca seperti robot mesin pencari, screen reader, dll dapat mengartikannya seperti entitas situs tersebut. Artinya, kalau Anda menulis judul dalam H2, maka ia lebih diutamakan daripada menulisnya dalam tag <p class=“judul”>….</p> misalnya. Di masa mendatang, dari dokumentasi yang saya baca, seperti juga visi web oleh Tim Berners-Lee, mesin pengolah web di masa mendatang (seperti mesin pencari dan screen reader tadi) akan menganut paham semantik seperti ini.

Setelah Semantik, Masalah Bermunculan

Begitulah semua berasal, dan begitulah saya mulai menulis kode XHTML/CSS saya dalam model yang semantik. Pada tahap ini, saya mulai menerapkan pengembangan web saya memakai Firefox, baru saya sesuaikan ke perambah lain, termasuk mengakali (hack) CSS untuk perambah yang bermasalah seperti IE6, IE5.5, IE5 Win/Mac, dan juga perambah yang lebih kuno semacam IE4.0 dan Netscape. Untuk IE6 saya memakai browser dari XP. Untuk IE versi lain yang berbasis Windows, saya menggunakan Multiple IE. Karena saya tidak punya mesin Mac, maka hack untuk perambah ini biasanya saya lupakan. Untuk perambah kuno, biasanya saya berusaha menerapkan aturan abaikan. Jadi, di perambah IE4.0 misalnya, lebih baik isi situs tidak diatur sama sekali tata letaknya atau tampil apa adanya seperti tanpa lembar gaya (stylesheet).

Mulanya semua lancar saja, hingga saya mengecek tampilan situs dengan perambah yang berbeda.

Kalau menggunakan Firefox, biasanya tampilan situs tampil normal karena Firefox menganut konsep model kotak (box-model) yang baku seperti yang diatur W3C. Masalah datang ketika saya mencoba tampilan situs di IE, tiba-tiba muncul perilaku pembatas (margin) dan pelapis (padding) yang aneh di IE. Belum lagi faktor pembatas dan pelapis yang menurun pada anaknya.

Misalkan Anda punya kode seperti di bawah ini.

<div class=“isi”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum est eu mauris. In volutpat blandit felis. Suspendisse eget pede.</p>
<div>

Lalu Anda atur tampilannya pada lembar gaya dengan kode seperti ini. Kita ambil contoh, untuk pembagian tata letak isi (div), kita beri pembatas kiri 10 piksel, dan pembatas kanan 10 piksel. Kemudian bila kita pada elemen paragraf kita juga memberi batas kiri misalkan 5 piksel dan kanan 5 piksel.

<code>P {
    margin: 0 5px 0 5px;
}

div.isi {
    margin: 0 10px 0 10px;
}</code>

Bila kode di atas kita buka di IE6, sesungguhnay tampilan yang dibuat tidak mirip seperti yang kita inginkan, yaitu 15 piksel kiri. Kita tahu setiap perambah mempunyai aturan standar pada masing-masing elemennya. Saya tidak sempat untuk meneliti apa saja aturan ini, tapi yang jelas, ketika di IE, hal ini seringkali membuat kacau. Misalnya saja, batas kiri pada kode di atas bisa saja tampil 30 piksel (dua kali lipat). Tentu saja kita dapat dengan mudah mengakali dengan CSS hacks pada IE, tapi hal ini bukan solusi tepat. Kadangkala, masih ada saja elemen lain yang juga ikut menabrak aturan yang kita tetapkan tadi.

Awal Jurus Atur Ulang

Dari sinilah saya teringat berbagai kode CSS dari desainer terkemuka dunia yang mempromosikan metodologi standar web itu. Kemudian datang kasus warna situs yang tampil aneh karena kalah oleh aturan standar di perambah. Jadilah ide jurus atur ulang ini saya pakai. Dalam bahasa Inggris, mungkin istilah tepatnya reset all layout.

<code>H1, H2, H3, H4, H5, H6, P, UL, OL, LI, 
BLOCKQUOTE, CODE, FORM { 
    margin: 0;
    padding: 0;
    border: 0;
}</code>

Saya pernah melihat kode pengatur ulang tata letak seperti di atas di situs lain. Kebetulan pembuatnya cukup murah hati dengan memberi komentar bahwa hal itu untuk memudahkan pengaturan di elemen lain. Awalnya saya tidak percaya dan tidak menerapkan hal ini, tapi kemudian kasus di atas terjadi, dan inilah semua awalnya.

Kenapa saya mengatur ulang hampir semua elemen tata letak?

1. Dengan mengatur ulang semua elemen, semua masalah yang mungkin akan timbul pada perambah yang berbeda dapat diminimalisir. Artinya, kalau margin, padding, dan border sudah Anda sikat, semua beres. Tidak bakal ada lagi peluang muncul keanehan-keanehan pada perambah berbeda yang biasanya disebabkan ketiga selektor ini.
2. Kalau sudah begini, kita seperti harus mengatur ulang semua kemungkinan elemen akan muncul lagi di situs kita? Ya, harus. Kalau tidak tentu H2 akan tampak aneh karena tampil berdempetan dengan paragraf, dan paragraf Anda akan tampil lucu karena tidak ada pembatas antar alenia. Juga, dengan begini, sebenarnya Anda akan lebih fokus dan kode CSS Anda akan lebih rapi dan detil. Kemungkinan ada elemen yang lupa diatur juga dapat diminimalisir sebab semua tampilan elemen sudah disikat habis :)
3. Masalah warna juga perlu disikat habis, seperti awal mula kenapa saya menulis ini.
4. Masalah formulir, atur pula detil-detil kalau ada kemungkinan formulir muncul di pembagi tata letak untuk isi situs, formulir muncul di pembagi sidebar, formulir pada header (biasanya kotak pencari) dan seterusnya.
5. Fokus pada semantik. Dengan kata lain, jangan mengatur pewarnaan, dan pengaturan gaya pada selektor non semantik. Jangan mengatur warna latar belakang, pemilihan huruf, dan pengaturan gaya lain pada elemen seperti DIV. Atur hal-hal ini pada elemen semantik seperti P, H1, H2, dst. Kalau Anda mengatur pada DIV, kemudian di dalam DIV tersebut ada elemen semantik seperti P, maka ada kemungkinan pengaturan di DIV tersebut menurun pada P (terutama di perambah IE).
6. Jangan lupa mengatur tautan. Atur tautan pada kondisi dasarnya (ini terutama untuk semua isi situs Anda). Tautan biasanya muncul pada menu utama, menu di sidebar, juga tautan pada isi dan footer. Masing-masing bisa jadi mempunyai karakter tampilan berbeda. Jadi atur ulang semuanya. Untuk mengatur tautan pada pembagi tata letak yang berbeda ini, kita bisa memanfaatkan selektor pseudo seperti di kode di bawah artikel ini.
7. Ingat selalu kunci para pengembang apa pun. Atur ulang semua peralatan pengembangan pada kondisi yang terburuk. Hal ini untuk menghindari terjadinya hal terburuk tersebut di alam nyata, di perambahnya pengguna kita. Bila para pengembang PHP menganut pelaporan kesalahan semua, maka sebaiknya untuk membangun CSS kita juga mengatur ulang semua pada kondisi minimal, bukan kondisi optimis. Dengan berpegang pada kondisi minimal dan extreme, kita akan tahu kalau ada keanehan muncul. Contoh gampanganya adalah masalah warna. Kalau Anda mengatur warna dasar Firefox Anda pada kondisi warna paling aneh, misalnya latar belakang Lemon dan latar depan Jingga menyala, maka kalau ada elemen yang tampil seperti itu berarti Anda masih melupakan salah satu elemen tersebut.

Contoh XHTML penggunaan kode pseudo:

<code>&lt;div id="header"&gt;
&lt;a href="#"&gt;....&lt;/a&gt;
&lt;/div&gt;

&lt;div id="isi"&gt;
...
&lt;a href="#"&gt;....&lt;/a&gt;
...
&lt;/div&gt;

&lt;div id="footer"&gt;
&lt;a href="#"&gt;....&lt;/a&gt;
&lt;/div&gt;</code>

Kode CSS-nya seperti ini:

<code>/* Untuk selektor A secara umum */
A {
...
}

#header A {
...
}

#isi A {
...
}

#footer A {
...
}</code>

Demikian, semoga lebih jelas dan berguna. Selamat bekerja.