ใช้องค์ประกอบ DOCTYPE ในโหมด Quirks

ปล่อย Doctype เพื่อใส่เบราว์เซอร์ลงในโหมด Quirks

หากคุณเคยออกแบบหน้าเว็บมานานกว่าสองสามเดือนคุณมักจะตระหนักถึงปัญหาในการเขียนหน้าเว็บที่ มีลักษณะเหมือนกันในทุกเบราว์เซอร์ ในแง่ของความเป็นจริงที่เป็นไปไม่ได้ เบราว์เซอร์หลายรุ่นมีคุณสมบัติพิเศษที่สามารถจัดการได้ หรือพวกเขามีวิธีพิเศษในการจัดการกับสิ่งต่างๆที่แตกต่างจากที่เบราว์เซอร์อื่นจัดการได้ ตัวอย่างเช่น:

• เลเยอร์ถูกสร้างขึ้นเพื่อใช้ในเบราว์เซอร์ Netscape พวกเขาไม่ได้ทำงานในเบราว์เซอร์อื่นใดและในความเป็นจริงได้ถูกเลิกใช้งานใน Netscape 6.x +

• เฟรมอินไลน์ ถูกสร้างขึ้นสำหรับ Internet Explorer เท่านั้นและได้กลายเป็นส่วนหนึ่งของข้อกำหนด HTML แล้ว
• Internet Explorer 6.0 เพิ่มพื้นที่เพิ่มเติม (เช่น
  ) โดยรอบแท็กเว้นแต่คุณจะเขียนเนื้อหาของ div ทั้งหมดในบรรทัดเดียว (ยาว) (IE 6 มี quirks มากขึ้นเช่นเดียวกับนี้)
• Netscpe 4.7 จะไม่แสดงตารางที่ไม่ได้เขียนด้วย HTML ที่ถูกต้อง แต่จะแสดงหน้าเปล่าแทน ได้รับการแก้ไขใน Netscape 6

ปัญหาสำหรับนักพัฒนาเบราว์เซอร์คือต้องสร้างเว็บเบราว์เซอร์ที่สามารถทำงานร่วมกับเว็บเบราว์เซอร์ที่เก่ากว่าได้ เพื่อจัดการกับปัญหานี้ผู้ผลิตเบราว์เซอร์ได้สร้างโหมดสำหรับเบราว์เซอร์เพื่อใช้งานโหมดเหล่านี้ถูกกำหนดโดยการมีหรือไม่มีองค์ประกอบ DOCTYPE และสิ่งที่ DOCTYPE เรียกใช้

DOCTYPE Switching และ "Quirks Mode"

หากคุณใส่ DOCTYPE ต่อไปนี้ในหน้าเว็บของคุณ:

เบราว์เซอร์สมัยใหม่ (Android 1+, Chrome 1+, IE 6+, iOS 1+, Firefox 1+, Netscape 6+, Opera 6+, Safari 1+) จะแปลความหมายนี้ในรูปแบบต่อไปนี้:

1. เนื่องจากมี DOCTYPE ที่เขียนขึ้นอย่างถูกต้องโหมดนี้จึงเรียกใช้โหมดมาตรฐาน
2. เป็นเอกสาร HTML 4.01 Transitional
3. เนื่องจากในโหมดมาตรฐานเบราว์เซอร์ส่วนใหญ่จะทำให้เนื้อหาสอดคล้อง (หรือสอดคล้องกับส่วนใหญ่) กับ HTML 4.01 Transitional

และถ้าคุณใส่ DOCTYPE นี้ในเอกสารของคุณ:

นี่เป็นการบอกเบราว์เซอร์สมัยใหม่ที่คุณต้องการแสดง HTML 4.01 เพจของคุณโดยปฏิบัติตาม DTD อย่างเคร่งครัด

เบราว์เซอร์เหล่านี้จะเข้าสู่โหมด "เข้มงวด" หรือ "มาตรฐาน" และทำให้เพจสอดคล้องกับมาตรฐาน (ดังนั้นสำหรับเอกสารนี้แท็กเช่นอาจถูกละเว้นโดยเบราว์เซอร์เนื่องจากองค์ประกอบ FONT ถูกปฏิเสธใน HTML 4.01 Strict)

หากปล่อย DOCTYPE ออกมาโดยสิ้นเชิงเบราว์เซอร์จะถูกเตะเข้าสู่โหมด "quirks" โดยอัตโนมัติ

ตารางด้านล่างแสดงให้เห็นว่าเบราว์เซอร์ทั่วไปทำอย่างไรเมื่อนำเสนอกับ DOCTYPE การประกาศร่วมกันที่แตกต่างกัน

ไมโครซอฟท์ทำให้มันยากขึ้น

นอกจากนี้ Internet Explorer 6 ยังมีคุณลักษณะที่หากคุณใส่ข้อมูลใด ๆ เหนือประกาศ DOCTYPE พวกเขาจะเข้าสู่โหมดที่ไม่ชอบมาพากล ดังนั้นทั้งสองตัวอย่างนี้จะทำให้ IE 6 เข้าสู่โหมดที่ไม่เป็นที่พอใจแม้ว่าการประกาศ DOCTYPE จะกล่าวในโหมดมาตรฐานที่เข้มงวด:

และ XHTML 1.1 DOCTYPE:

นอกจากนี้ถ้าคุณใช้ IE6 ในอดีตคุณจะมี "คุณลักษณะ" ที่ Microsoft เพิ่มใน IE8 และ IE9: การ เปลี่ยนองค์ประกอบของ META และเว็บไซต์ blacklisting ในความเป็นจริงเบราว์เซอร์สองรุ่นนี้มีโหมดที่แตกต่างกันถึงเจ็ด (!):

• IE 5.5 quirks mode (IE 8 และ 9)
• โหมดมาตรฐาน IE 7 (IE 8 และ 9)
• IE 8 เกือบมาตรฐานโหมด (IE 8 และ 9)
• โหมดมาตรฐาน IE 8 (IE 8 และ 9)
• IE 9 เกือบโหมดมาตรฐาน (IE 9)
• โหมดมาตรฐาน IE 9 (IE 9)
• โหมด XML (IE 9)

IE 8 ยังนำเสนอ "Compatibility Mode" ซึ่งผู้ใช้สามารถเลือกที่จะเปลี่ยนรูปแบบการแสดงผลกลับไปที่ IE 7 ได้ ดังนั้นแม้ว่าคุณจะตั้งค่าโหมดที่คุณต้องการตั้งค่าโดยใช้องค์ประกอบ DOCTYPE และ META แต่หน้าของคุณอาจ ยังคง ถูกผลักกลับเข้าสู่โหมดที่ไม่ได้มาตรฐานอีกด้วย

โหมด Quirks คืออะไร?

โหมด Quirks ถูกสร้างขึ้นเพื่อช่วยจัดการกับการแสดงผลที่แปลกประหลาดและการสนับสนุนเบราว์เซอร์ที่ไม่สนับสนุนและการแฮ็กที่นักออกแบบเว็บใช้ในการจัดการกับสิ่งเหล่านั้น ความกังวลที่ผู้ผลิตเบราว์เซอร์ได้รับก็คือหากพวกเขาเปลี่ยนเบราว์เซอร์ของพวกเขาไปตามข้อกำหนดเต็มรูปแบบนักออกแบบเว็บจะถูกทิ้งไว้เบื้องหลัง

การตั้งค่าการสลับ DOCTYPE และ "Quirks Mode" ทำให้นักออกแบบเว็บสามารถเลือกได้ว่าต้องการให้เบราว์เซอร์แสดงผล HTML อย่างไร

Quirks Mode Effects

มีลักษณะพิเศษหลายอย่างที่เบราว์เซอร์ส่วนใหญ่ใช้ในโหมด Quirks:

• ในเบราว์เซอร์บางรุ่นกล่องจะเปลี่ยนเป็นรูปแบบกล่องรุ่น IE 5.5 ในโหมดที่ไม่ชอบมาพากล
• เบราว์เซอร์บางประเภทไม่สืบทอดสไตล์ลงในตาราง
• โหมด Quirks มีผลต่อการแยกวิเคราะห์ CSS และ CSS อย่างมากหากคุณกำลังแปลงหน้าเว็บเป็นโหมดมาตรฐานจากโหมด Quirks โปรดตรวจสอบรูปแบบ CSS และการแยกวิเคราะห์อย่างละเอียด
• ดูการเปลี่ยนแปลงการเขียนสคริปต์เมื่ออยู่ในโหมดที่ไม่ชอบมาพากล Firefox เปลี่ยนวิธีที่แอ็ตทริบิวต์ id ทำงานเช่น IE8 และ IE9 มีการเปลี่ยนแปลงอย่างมากในการเขียนสคริปต์ในโหมด quirks

นอกจากนี้ยังมีความแตกต่างใน "เกือบมาตรฐานโหมด:"

• ความสูงของเซลล์ตารางที่มีเฉพาะภาพภายในจะคำนวณแตกต่างจากโหมดมาตรฐาน

วิธีเลือก DOCTYPE

ฉันไปดูรายละเอียดเพิ่มเติมในบทความ DOCTYPE บทความของฉัน แต่นี่เป็นกฎทั่วไปของหัวแม่มือ:

1. เลือกโหมดมาตรฐานทุกครั้ง มาตรฐานปัจจุบันที่คุณควรใช้คือ HTML5:
   ยกเว้นกรณีที่คุณมีเหตุผลเฉพาะเพื่อหลีกเลี่ยงการใช้ HTML5 DOCTYPE นี่คือสิ่งที่คุณควรใช้
2. ไปที่ HTML 4.01 ที่เข้มงวดหากคุณต้องการตรวจสอบความถูกต้องขององค์ประกอบเดิมหรือต้องการหลีกเลี่ยงคุณลักษณะใหม่ ๆ ด้วยเหตุผลบางประการ:

3. หากคุณได้หั่นบาง ๆ ภาพไว้ในตารางและไม่ต้องการแก้ไขให้ไปที่การเปลี่ยนรูป HTML 4.01:

4. อย่าเขียนหน้าอย่างจงใจในโหมดที่ไม่ชอบ ใช้ DOCTYPE ทุกครั้ง นี้จะช่วยคุณประหยัดเวลาในการพัฒนาในอนาคตและจริงๆไม่มีประโยชน์ IE6 กำลังสูญเสียความนิยมอย่างรวดเร็วและโดยการออกแบบสำหรับเบราว์เซอร์นี้ (ซึ่งโดยพื้นฐานแล้วการออกแบบในโหมด quirks คือ) คุณจะ จำกัด ตัวเองผู้อ่านและหน้าเว็บของคุณ ถ้าคุณต้องเขียนสำหรับ IE 6 หรือ 7 จากนั้นใช้ความคิดเห็นที่มีเงื่อนไขเพื่อสนับสนุนพวกเขาแทนที่จะบังคับให้เบราว์เซอร์รุ่นใหม่เข้าสู่โหมดที่ไม่เหมาะ

ใช้ DOCTYPE ทำไม

เมื่อคุณทราบเกี่ยวกับการเปลี่ยน DOCTYPE ประเภทนี้แล้วคุณจะสามารถส่งผลต่อหน้าเว็บของคุณได้โดยตรงโดยใช้ DOCTYPE ที่ระบุว่าเบราเซอร์สามารถคาดหวังได้จากหน้าเว็บของคุณ นอกจากนี้เมื่อคุณเริ่มใช้ DOCTYPE แล้วคุณจะเขียน HTML ใกล้เคียงกับที่ถูกต้อง (คุณยังควรตรวจสอบความถูกต้อง) และโดยการเขียน XHTML ที่ถูกต้องคุณจะแนะนำให้ผู้ผลิตเบราว์เซอร์สร้างมาตรฐานเบราว์เซอร์ที่เข้ากันได้

เวอร์ชันเบราว์เซอร์และโหมด Quirks