1. ปัญหาการตรวจสอบ CSS
ก่อนอื่น ตามข้อกำหนดของการแข่งขัน ผลงานที่ส่งเข้าประกวดจะต้องเป็นไปตามมาตรฐาน XHTML และ CSS ที่ส่งมาจะต้องผ่านการตรวจสอบ W3C สถานการณ์การตรวจสอบ CSS เหมาะอย่างยิ่ง มีเพียง 8 รายการเท่านั้นที่ล้มเหลวในการตรวจสอบ CSS2.0 ข้อผิดพลาดในการตรวจสอบหลักคือ: "บรรทัด: 0 ตระกูลแบบอักษร: ขอแนะนำให้คุณระบุตระกูลประเภทเป็นตัวเลือกสุดท้าย"
W3C แนะนำว่าเมื่อกำหนดแบบอักษร ควรลงท้ายด้วยหมวดหมู่ของแบบอักษร แทนที่จะเป็นแบบอักษรเดียว ตัวอย่างเช่น "sans-serif" ถูกใช้เพื่อให้แน่ใจว่าแบบอักษรของเว็บสามารถแสดงภายใต้ระบบปฏิบัติการที่แตกต่างกันได้
แม้ว่าคนส่วนใหญ่จะกำหนด "sans-serif" บนแท็ก body แต่หากละเว้น sans-serif เมื่อกำหนดแบบอักษรอีกครั้งใน ID หรือคลาสอื่น จะถือว่าการตรวจสอบล้มเหลว ข้อผิดพลาดนี้ไม่ร้ายแรงมากนักและสามารถหลีกเลี่ยงได้ด้วยการเอาใจใส่เพียงเล็กน้อย
2. คำแนะนำการเขียน CSS
เพิ่มความคิดเห็นให้กับไฟล์ CSS ความคิดเห็นจะนำความสะดวกสบายมาสู่การบำรุงรักษาในอนาคตของคุณ ขอแนะนำให้เพิ่มความคิดเห็นลงในไฟล์ CSS ให้มากที่สุด และไม่ต้องกังวลกับการเพิ่มจำนวนไบต์เพียงเล็กน้อย
พยายามย่อไวยากรณ์ CSS ให้สั้นลงให้มากที่สุด ตัวอย่างเช่น ค่าสี "FFFFFF" สามารถย่อเป็น "#FFF"; "padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px" สามารถย่อเป็น " การขยาย:30px 0 10px" 20px;". มีเทคนิคการบันทึกเพิ่มเติมในการกำหนดเทคนิค และเมื่อคุณมีความเชี่ยวชาญมากขึ้นในแอปพลิเคชัน CSS คุณจะค้นพบวิธีการที่ดีขึ้นต่อไป
3. ปัญหาการตรวจสอบ XHTML
เนื่องจากเป็นการแข่งขันสไตล์ชีต ทุกคนจึงให้ความสำคัญกับการตรวจสอบ CSS มากขึ้น แต่ก็ถูกละเลยเล็กน้อยในแง่ของการปฏิบัติตาม XHTML และเกิดข้อผิดพลาดระดับต่ำจำนวนมาก ประเด็นหลักมีดังต่อไปนี้:
target="_blank" ไวยากรณ์นี้ถูกต้องใน HTML4.0 แต่ไม่ได้รับอนุญาตใน XHTML1.0 วิธีแก้ปัญหาหนึ่งคือเขียน target="new" และอีกวิธีหนึ่งคือใช้ js เพื่อประมวลผลเป้าหมายทั้งหมด
เป็นการดีที่สุดที่จะไม่ฝังสไตล์ชีต เป็นการง่ายกว่าที่จะรักษาไฟล์สไตล์ชีตแยกจากกัน หากฝัง <style> ไว้ จะต้องเขียนเป็น <style type="text/css"> และไม่สามารถละเลยประเภทนั้นได้ ไม่เช่นนั้น XHTML จะไม่สามารถระบุได้ว่าสไตล์ของคุณใช้ทำอะไร
<br> ต้องเขียนเป็น <br /> XHTML กำหนดให้แท็กทั้งหมดต้องปิดสนิท ต้องตามด้วย "/" โดยตรง
ใช้ ID เดียวกันซ้ำ ID สามารถใช้ได้เพียงครั้งเดียวใน XHTML หากคุณต้องการอ้างอิงสไตล์หลายครั้ง คุณควรใช้คลาส
<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />เห็นได้ชัดว่ามีเครื่องหมายคำพูดเพิ่มเติมในค่าแอตทริบิวต์เนื้อหา
วิธีการฝัง Flash ไม่ถูกต้อง <embed> เดิมเป็นแท็กส่วนตัวของ Netscape แม้ว่า IE จะรองรับในภายหลัง แต่ W3C ไม่เคยรู้จักแท็กนี้เลย W3C สนับสนุนการใช้แท็ก <object> เพื่อแก้ปัญหาความเข้ากันได้ระหว่างเบราว์เซอร์ที่แตกต่างกัน วิธีแก้ปัญหาคือใช้ทั้งสองแท็ก รหัสตัวอย่างที่สมบูรณ์มีดังนี้ (พื้นหลังแฟลชโปร่งใส): <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 "
width = "300" height = "100"> <ชื่อพารามิเตอร์ = "คุณภาพ" ค่า = "สูง"> <ชื่อพารามิเตอร์ = "ค่า wmode" = "โปร่งใส">
<ชื่อพารามิเตอร์ = "SRC" value = "test.swf"> <ฝัง src = "test.swf" wmode = "โปร่งใส" คุณภาพ = "สูง"
Pluginspage=" http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash "
ประเภท = "application / x-shockwave-flash" width = "300" height = "100"> </embed> </object>
แต่การเขียนโดยตรงใน XHTML ยังคงเป็นไปไม่ได้ ตอนนี้เราทำได้เพียงโกงการตรวจสอบโดยการเขียนโค้ดด้านบนในไฟล์ flash.js แล้วเรียกมัน
<script type="text/javascript" src="flash.js"></script>
แฟลชมีคุณสมบัติตรงตามมาตรฐานหรือไม่นั้นเป็นประเด็นที่ถกเถียงกัน คำแนะนำเพิ่มเติม: อ้างถึง http://www.blueidea.com/tech/site/2004/1920.asp
รหัสเช่น id=header class=title ควรเขียนเป็น id="header" class="title" การอ้างอิงค่าแอตทริบิวต์เป็นกฎไวยากรณ์ XHTML พื้นฐานที่สุด
4. ปัญหาความเข้ากันได้
มีผลงาน 12 ชิ้นที่มีรูปร่างผิดปกติและไม่ตรงแนวเมื่อดูใน IE6.0, Mozilla Firefox1.0 และ Opera 7.12 (ฉันไม่ได้ทดสอบกับ IE5.0 แต่ฉันขี้เกียจ :) IE5.0 ถือเป็นความท้าทายสำหรับนักออกแบบเลย์เอาต์ CSS ทุกคน)
มีศูนย์กลางอยู่ที่ IE แต่ไม่ใช่ใน Mozilla การตั้งค่าเนื้อหา {TEXT-ALIGN: center;} ใน IE สามารถจัดกึ่งกลางได้แล้ว แต่ใน Mozilla คุณต้องเพิ่มการตั้งค่าสไตล์ต่อไปนี้ให้กับเลเยอร์ที่ต้องอยู่กึ่งกลาง: MARGIN-RIGHT: auto;MARGIN-LEFT: auto เกิน ความกว้าง หน้าเว็บดูเป็นปกติใน Mozilla แต่ใน IE หน้าจะมีรูปร่างผิดปกติเนื่องจากมีขนาดเกินความกว้าง และเลเยอร์แบบเคียงข้างกันจะถูกย้ายไปข้างใต้ สถานการณ์นี้เกิดจากการตีความรูปแบบกล่องที่แตกต่างกันระหว่าง IE และ Mozilla มีวิธีแก้ไขมากมาย เช่น วิธี "!สำคัญ"
โดยทั่วไปแล้ว ผลงานส่วนใหญ่ผ่านการรับรองโดยรวม และโดยพื้นฐานแล้วการแข่งขันนี้ก็บรรลุตามวัตถุประสงค์ของมาตรฐานเว็บและเค้าโครง CSS ที่ได้รับการเข้าใจและเชี่ยวชาญโดยนักออกแบบมากขึ้นเรื่อยๆ สำหรับผลงานศิลปะที่ไม่ดีนัก ฉันคิดว่านี่เป็นกระบวนการที่นักออกแบบอาวุโสทุกคนควรจำไว้ว่าเมื่อเค้าโครงตารางปรากฏขึ้นครั้งแรก หน้าเว็บส่วนใหญ่จะเรียบง่ายมาก หลังจากพิจารณาทำความเข้าใจและประยุกต์ใช้เลย์เอาต์ CSS เป็นระยะเวลาหนึ่งแล้ว จะมีหน้าเว็บจำนวนมากขึ้นที่คำนึงถึงทั้งเทคโนโลยีและความสวยงามเหมือนกับการได้รับรางวัลที่หนึ่ง