คุณทำทุกอย่างที่คิดว่าถูกต้อง แต่หน้าเว็บทำงานไม่ถูกต้องในเบราว์เซอร์รุ่นล่าสุด นั่นเป็นเพราะคุณเขียน XHTML และ CSS ที่ไม่ถูกต้อง คุณใช้ Document Object Model (DOM) มาตรฐาน W3C เพื่อจัดการองค์ประกอบแบบไดนามิกบนเพจ และเมื่อเบราว์เซอร์พยายามใช้มาตรฐานเหล่านี้ เว็บไซต์ของคุณก็ล้มเหลว สาเหตุน่าจะเกิดจากประเภทเอกสารไม่ถูกต้อง (DOCTYPE) บทความนี้มีไว้เพื่อให้คุณทราบถึงวิธีการทำงานของ DOCTYPE และอธิบายการใช้งานจริงของเอกสารประเภทเหล่านี้
ทำไมต้องเป็น DOCTYPE
ตามมาตรฐาน HTML และ XHTML DOCTYPE (ย่อมาจาก "การประกาศประเภทเอกสาร") ใช้เพื่อบอกเบราว์เซอร์ว่าคุณใช้ (x)HTML เวอร์ชันใด และจะต้องปรากฏที่ด้านบนของทุกหน้า DOCTYPE เป็นองค์ประกอบสำคัญของหน้าเว็บ หากไม่มีสิ่งเหล่านี้ CSS ของคุณก็จะใช้งานไม่ได้อีกต่อไป
ตามที่กล่าวไว้ในบทความ ALA ที่กล่าวถึงก่อนหน้านี้ (และประเด็นที่น่าสนใจอื่นๆ เช่นกัน) DOCTYPE จะต้องได้รับการปรับให้เข้ากับเบราว์เซอร์อื่นๆ เช่น Mozilla, IE5/Mac หรือ IE6 หรือ IE7
DOCTYPE ใหม่ประกอบด้วย URI ทั้งหมด (sconf หมายเหตุ: Universal Resource Identifier, Universal Resource Identifier) (URL ที่สมบูรณ์) ซึ่งบอกให้เบราว์เซอร์แยกวิเคราะห์ (เรนเดอร์) เพจเป็นรูปแบบที่เข้ากันได้กับมาตรฐาน ประมวลผล (X)HTML, CSS และ DOM เป็นสิ่งที่คุณคาดหวัง
การใช้ DOCTYPE ที่ไม่สมบูรณ์หรือเก่า หรือแม้แต่ไม่มี DOCTYPE เลย จะทำให้เบราว์เซอร์แปลงเป็นรูปแบบ "Quirks" โดยที่เบราว์เซอร์จะถือว่าคุณกำลังเขียนโค้ดที่ล้าสมัยและใช้งานไม่ได้ในยุคหลังยุค 90
ด้วยการตั้งค่านี้ เบราว์เซอร์จะพยายามแยกวิเคราะห์หน้าเว็บของคุณโดยใช้มาตรฐานเก่า และแยกวิเคราะห์ CSS ของคุณให้เป็นมาตรฐาน IE4 และตอบกลับเจ้าของด้วย DOM พิเศษ (IE ตอบกลับ DOM ของ IE ในขณะที่ Mozilla และ Netscape 6 ตอบกลับโมเดลที่พวกเขาคิดว่าเป็น)
ไม่ต้องสงสัยเลยว่านี่ไม่ใช่สิ่งที่คุณต้องการ แต่เป็นสิ่งที่คุณได้รับบ่อยๆ ดังนั้นบทความนี้จึงต้องการแก้ไข DOCTYPE ที่ไม่ถูกต้องหรือไม่สมบูรณ์เหล่านี้
(หมายเหตุ: เบราว์เซอร์ Opera ไม่รองรับกฎเหล่านี้ โดยจะพยายามแยกวิเคราะห์หน้าเว็บให้เป็นแบบมาตรฐาน ในทางกลับกัน Opera ไม่ได้ให้การสนับสนุน DOM ของ W3C มากนัก แต่ก็สามารถทำงานได้ดีเช่นกัน) Ed: เนื่องจากสิ่งนี้ บทความถูกเผยแพร่ครั้งแรก Opera ได้เพิ่มฟังก์ชันการทำงานที่สอดคล้องกับ DOM ให้กับ Opera 7
DOCTYPE ไปไหน? (เอกสารทั้งหมดหายไปไหน?)
แม้ว่าประเภทเอกสารเป็นส่วนสำคัญของมาตรฐาน WEB ในเบราว์เซอร์ และแม้ว่า W3C จะเป็นผู้นำในการสร้างมาตรฐาน WEB แต่คุณคาดหวังว่าไซต์ W3C จะสามารถจัดเตรียมประเภทเอกสารที่เหมาะสมบางประเภทได้ และคุณอาจต้องการค้นหาข้อมูลนี้อย่างรวดเร็วและง่ายดายยิ่งขึ้น อย่างไรก็ตาม ขณะที่ฉันเขียนสิ่งนี้ คุณยังทำไม่ได้ {Ed: ขณะนี้ W3C แสดงรายการชุด DOCTYPE มาตรฐานบนเว็บไซต์ คุณสามารถดูสิ่งเหล่านี้ได้ในหลักเกณฑ์ของ W3C เช่น "เว็บไซต์ของฉันเป็นมาตรฐาน และของคุณ?"}
W3.org ไม่ใช่ List Apart, WebReference หรือ Webmonkey เดิมทีไม่ได้มีจุดมุ่งหมายเพื่อช่วยให้นักออกแบบเว็บไซต์ นักพัฒนา และองค์กรภาคประชาสังคมเร่งทำความเข้าใจและการใช้เทคโนโลยีล่าสุด นี่ไม่ใช่งานของเขา
W3C เผยแพร่ชุดแนวทางปฏิบัติ แม้ว่านักออกแบบเว็บไซต์ส่วนใหญ่จะไม่ทราบก็ตาม -
คุณสามารถค้นหา DOCTYPE ได้ตลอดทั้งวันบน W3.org โดยไม่ต้องดูรายการเฉพาะ และเมื่อคุณดาวน์โหลด DOCTYPE (โดยปกติจะเกี่ยวข้องกับข้อเสนอหรือร่างการทำงานบางรายการ) มันจะทำงานไม่ถูกต้องบนไซต์ของคุณ
ทั่วทั้งไซต์ W3C มี DOCTYPE ที่ไม่มี URIs (หมายเหตุที่น่าสงสัย: ไม่ใช่ URI ที่สมบูรณ์) ซึ่งชี้ไปที่เว็บไซต์ของ W3C เอง เมื่อสิ่งเหล่านี้ถูกย้ายจาก W3C ไปยังหน้าเว็บของคุณเอง URL เหล่านี้จะกลายเป็นเอกสารที่ไม่มีอยู่จริง
ตัวอย่างเช่น DOCTYPE ของหลายๆ ไซต์ถูกคัดลอกโดยตรงจาก W3.org:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
หากคุณเห็นส่วนสุดท้ายของ DOCTYPE นี้ ("DTD/xhtml1-strict.dtd") คุณจะพบว่านี่คือลิงก์ที่เกี่ยวข้องไปยังไซต์ W3C ข้อมูลนี้อยู่ในไซต์ W3C ไม่ใช่ของคุณ ดังนั้น URI นี้จึงไม่มีผลกระทบต่อเบราว์เซอร์ (หมายเหตุที่น่าสงสัย: เมื่อคุณเยี่ยมชม W3.org จะใช้งานได้เนื่องจากเป็นลิงก์ที่เกี่ยวข้อง)
DOCTYPE นี้ควรเปลี่ยนเป็น:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
โปรดทราบว่า DOCTYPE ด้านหลังมี URI ที่สมบูรณ์ ซึ่งจะแสดงทรัพยากรที่ถูกต้องบนเครือข่ายเพื่อให้เบราว์เซอร์สามารถค้นหาและแยกวิเคราะห์เอกสารของคุณเป็นรูปแบบที่เป็นไปตามมาตรฐาน
วิธีใช้ DOCTYPE (DOCTYPE ที่ใช้งานได้)
แล้วจะใช้ DOCTYPE ได้อย่างไร? ดีใจที่คุณถาม DOCTYPE ที่สมบูรณ์ด้านล่างคือทั้งหมดที่เราต้องการ:
HTML 4.01 เข้มงวด การเปลี่ยนผ่าน เฟรม
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd "> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd "> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 เฟรมเซ็ต//EN" " http://www.w3.org/TR/html4/frameset.dtd "> |
XHTML 1.0 เข้มงวด เปลี่ยนผ่าน กรอบงาน
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 เฟรมเซ็ต//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd "> |
XHTML1.1 DTD
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" |