1. Masalah validasi CSS
Pertama-tama, menurut persyaratan kompetisi, entri harus mematuhi standar XHTML, dan CSS yang dikirimkan harus lulus verifikasi W3C. Situasi verifikasi CSS ideal. Hanya 8 entri di antara entri yang gagal dalam verifikasi CSS2.0. 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" digunakan untuk 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
Karena ini adalah kompetisi style sheet, semua orang lebih memperhatikan verifikasi CSS, tetapi mereka sedikit diabaikan dalam hal kepatuhan XHTML, dan banyak terjadi kesalahan tingkat rendah. Permasalahan utama tercantum di bawah ini:
target="_blank", sintaks 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;
Yang terbaik adalah tidak menyematkan style sheet. Lebih mudah untuk memelihara file style sheet secara mandiri. 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.
<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />Jelas ada tanda kutip tambahan pada nilai atribut content.
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 sebagai berikut (background flash transparan): <object 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 name = "kualitas" nilai = "tinggi"> <param nama = "wmode" nilai = "transparan">
<param name="SRC" value="test.swf"> <sematkan src="test.swf" wmode="transparan" quality="high"
pluginspage=" http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash "
type="application/x-shockwave-flash" width="300" height="100"> </embed> </object>
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. Instruksi lebih lanjut: lihat http://www.blueidea.com/tech/site/2004/1920.asp
Kode seperti id=header class=title harus ditulis sebagai id=”header” class=”title”. Mengutip nilai atribut adalah aturan sintaksis XHTML yang paling dasar.
4. Masalah kompatibilitas
Ada 12 karya yang cacat dan tidak selaras jika dilihat di IE6.0, Mozilla Firefox 1.0, dan Opera 7.12. (Saya tidak menguji dengan IE5.0, saya malas :) IE5.0 adalah tantangan bagi semua desainer tata letak CSS).
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 lebarnya. 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".
Secara umum, sebagian besar peserta memenuhi syarat secara keseluruhan, dan tujuan kompetisi ini pada dasarnya telah tercapai. Standar web dan tata letak CSS telah dipahami dan dikuasai oleh semakin banyak desainer. Mengenai seni yang buruk dari beberapa karya, menurut saya ini adalah sebuah proses. Desainer senior harus ingat bahwa ketika tata letak Tabel pertama kali muncul, sebagian besar halaman web sangat sederhana. Setelah periode pencernaan, pemahaman dan penerapan tata letak CSS, akan ada lebih banyak halaman web yang mempertimbangkan teknologi dan estetika seperti pemenang pertama.