Saat menerapkan tata letak halaman web Div+CSS untuk membuat situs web yang sesuai dengan standar web, ada beberapa masalah yang mungkin mudah muncul.
Mari kita rangkum sekarang agar semua orang dapat melihat di mana letak masalahnya.
1. Masalah validasi CSS
Halaman web yang kami desain semuanya berharap dapat mematuhi standar XHTML dan CSS agar lulus verifikasi W3C. Beberapa verifikasi CSS2.0 yang gagal. Kesalahan verifikasi utama adalah: "Baris: 0 font-family: Disarankan agar Anda menentukan jenis keluarga sebagai pilihan terakhir."
W3C merekomendasikan bahwa ketika mendefinisikan font, sebaiknya diakhiri dengan kategori font, bukan satu font. Misalnya, "sans-serif" dapat memastikan bahwa font web dapat ditampilkan di sistem operasi yang berbeda.
Meskipun kebanyakan orang mendefinisikan "sans-serif" pada tag body, jika sans-serif dihilangkan saat menentukan font lagi di ID atau kelas lain, verifikasi dianggap gagal. Kesalahan ini tidak terlalu serius dan dapat dihindari dengan sedikit perhatian.
2. Saran penulisan CSS
Tambahkan komentar ke file CSS. Komentar akan memberikan kemudahan pada pemeliharaan Anda di masa mendatang. Disarankan untuk menambahkan komentar ke file CSS sebanyak mungkin, dan jangan khawatir tentang penambahan sejumlah kecil byte. Cobalah untuk mempersingkat sintaks CSS sebanyak mungkin. Misalnya, nilai warna "#FFFFFF" dapat disingkat menjadi "#FFF"; "padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px" dapat disingkat menjadi " bantalan:30px 0 10px" 20px;". Ada lebih banyak teknik hemat dalam mendefinisikan teknik, dan seiring dengan semakin mahirnya Anda dalam aplikasi CSS, Anda akan terus menemukan metode yang lebih baik.
3. Masalah validasi XHTML
Orang sering kali lebih memperhatikan verifikasi CSS, tetapi mereka mengabaikan kepatuhan standar XHTML, dan banyak terjadi kesalahan tingkat rendah. Permasalahan utama tercantum di bawah ini:
◎target="_blank", sintaksis ini benar di HTML4.0, tetapi tidak diperbolehkan di XHTML1.0. Salah satu solusinya adalah dengan menulis target="new", dan solusi lainnya adalah menggunakan js untuk memproses semua target;
◎Sebaiknya jangan menyematkan style sheet. File style sheet terpisah akan lebih mudah dipelihara. Jika <style> disematkan, maka harus ditulis sebagai <style type="text/css">, dan tipenya tidak dapat diabaikan, jika tidak, XHTML tidak dapat menentukan untuk apa gaya Anda digunakan.
◎<br> harus ditulis sebagai <br />. XHTML mengharuskan semua tag harus ditutup.
◎Gunakan kembali ID yang sama. ID hanya dapat digunakan sekali dalam XHTML. Jika Anda perlu mereferensikan gaya beberapa kali, Anda harus menggunakan class.
◎Metode penyematan Flash salah. <embed> awalnya merupakan tag pribadi Netscape. Meskipun kemudian didukung oleh IE, tag tersebut tidak pernah dikenali oleh W3C. Tidak ada tag <embed> di HTML4.0. W3C menganjurkan penggunaan tag <object>. Untuk mengatasi masalah kompatibilitas antar browser yang berbeda, solusinya adalah dengan menggunakan kedua tag.
Contoh kode lengkapnya adalah sebagai berikut (background flash transparan):
| Berikut isi kutipannya: <objek classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" basis kode= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" lebar="300" tinggi="100"> <param nama="kualitas" nilai="tinggi"> <param name="wmode" value="transparan"> <param nama="SRC" value="test.swf"> <embed src="test.swf" wmode="transparan" quality="tinggi" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" ketik = "aplikasi/x-shockwave-flash" lebar = "300" tinggi = "100"> </sematkan> </objek> |
Namun menulisnya langsung di XHTML masih tidak bisa. Sekarang kita hanya bisa menipu verifikasi dengan menulis kode di atas di file flash.js lalu memanggilnya.
<skrip type="teks/javascript" src="flash.js"></skrip>
Apakah flash memenuhi standar merupakan isu kontroversial.
◎Kode yang mirip dengan id=header class=title harus ditulis sebagai id=”header” class=”title”. Mengutip nilai atribut adalah aturan sintaksis XHTML yang paling dasar.
4. Masalah kompatibilitas
Beberapa situs web berubah bentuk dan tidak sejajar bila dilihat di IE6.0, Mozilla Firefox 1.0, dan Opera 7.12.
Itu berpusat di IE, tapi tidak di Mozilla. Setting body {TEXT-ALIGN: center;} di IE sudah bisa dipusatkan, namun di Mozilla Anda harus menambahkan pengaturan style berikut pada layer yang perlu dipusatkan: MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
Melebihi lebar. Halaman terlihat normal di Mozilla, tetapi di IE berubah bentuk karena melebihi lebarnya, dan lapisan berdampingan dipindahkan ke bawahnya. Situasi ini disebabkan oleh perbedaan interpretasi model kotak antara IE dan Mozilla. Ada banyak solusi, seperti metode "!important".
Standar web dan tata letak CSS telah dipahami dan dikuasai oleh semakin banyak desainer. Setelah periode pencernaan, pemahaman dan penerapan tata letak CSS, lebih banyak halaman web dengan pertimbangan teknis dan estetika akan muncul.