X-UA-Compatible Meta Tag คืออะไร + สอนวิธีใช้

เชื่อว่าหลายๆ คน คงจะเคยเห็น X-UA-Compatible meta tag กันมาบ้างแล้ว แต่หากยังไม่รู้ว่ามันเอาไว้ทำอะไร ไม่ใส่แล้วจะเป็นไรมั้ย บทความนี้มีคำตอบให้ครับ

ทำไมต้องมี X-UA-Compatible Meta Tag ?

จากการสำรวจ browser market share ในสมัยก่อน จะพบว่า Internet Explorer นั้นมีผู้ใช้งานมากที่สุด ด้วยเหตุนี้เอง เวลานักพัฒนาเว็บไซต์สมัยนั้นจะทำเว็บขึ้นมาสักเว็บหนึ่ง เค้าก็จะต้องทำให้มันดูดีให้ได้ใน Internet Explorer โดยจะเน้นไปที่เวอร์ชั่นที่มีคนใช้เยอะที่สุดในขณะนั้น

X-UA-Compatible meta tag นั้น ถูกเพิ่มเข้ามาใน Internet Explorer 8 ด้วยเหตุผลที่ว่า หลายๆ เว็บไซต์นั้น ถูกออกแบบมาเพื่อให้แสดงผลได้ดีใน IE7 โดยเฉพาะ หากเปิดด้วย IE8 แล้ว หน้าตาอาจจะผิดเพี้ยนไป เนื่องจาก IE8 นั้น มีการอัพเดทหลายๆ อย่าง เพื่อให้รองรับ standards ล่าสุดในขณะนั้น

<meta http-equiv="X-UA-Compatible" content="IE=7">

จากโค้ด meta tag ด้านบน จะเป็นการบอกเฉพาะ Internet Explorer ให้ render หน้านี้โดยใช้ rendering engine ของ IE7 (ถึงแม้ว่าจะเปิดด้วย IE8, 9 หรือ 10 ก็ตาม) เพียงเท่านี้ หน้าเว็บที่เราได้ test มาแล้วเป็นอย่างดีกับ IE7 ก็จะยังคงแสดงผลได้อย่างสวยงามอยู่ แม้ว่าจะเปิดกับ Internet Explorer รุ่นใหม่ๆ

X-UA-Compatible Meta Tag มีแบบไหนบ้าง ?

ค่าของ X-UA-Compatible meta tag ที่เราสามารถใส่ได้ มีดังนี้

• IE=5render ด้วย IE5 quirks mode
• IE=EmulateIE7ถ้ามี <!DOCTYPE> ให้ render ด้วย IE7 standards mode ถ้าไม่มีให้เข้าสู่ compatibility mode
• IE=7render ด้วย IE7 standards mode
• IE=EmulateIE8ถ้ามี <!DOCTYPE> ให้ render ด้วย IE8 standards mode ถ้าไม่มีให้เข้าสู่ compatibility mode
• IE=8render ด้วย IE8 standards mode
• IE=EmulateIE9ถ้ามี <!DOCTYPE> ให้ render ด้วย IE9 standards mode ถ้าไม่มีให้เข้าสู่ compatibility mode
• IE=9render ด้วย IE9 standards mode
• IE=edgerender ด้วย IE เวอร์ชั่นสูงสุดที่มีอยู่
• chrome=1render ด้วย chrome frame ถ้าได้ติดตั้งไว้

นอกจากนั้น เรายังสามารถกำหนดได้มากกว่า 1 ค่า ให้เราคั่นแต่ละค่า ด้วย comma แบบนี้

<meta http-equiv="X-UA-Compatible" content="IE=7, IE=8">

จากโค้ดด้านบน จะเป็นการบอกเฉพาะ Internet Explorer ให้ render ด้วย engine ของ IE8 แต่ถ้าไม่มีก็ให้ใช้ engine ของ IE7 แทน

แล้ว Standards mode ต่างจาก Compatibility mode อย่างไร ?

compatibility mode นั้นเป็นกลไกของ Internet Explorer ที่จะทำให้ IE ยังสามารถ render หน้าเว็บนั้นๆ ได้อยู่ แม้ว่าในโค้ดจะมีบางสิ่งบางอย่าง ที่ rendering engine แบบ default ยังไม่รองรับ หรือ เลิกรองรับไปแล้ว โดยมันจะไปจำลอง rendering engine ที่ยังคงรองรับสิ่งนั้นมาให้แทน ซึ่งก็คือ IE5 quirks mode

สมมติในหน้าเว็บเราเขียนโค้ดที่ IE7 รองรับได้ แต่โค้ดนั้น ใช้ไม่ได้แล้วตั้งแต่ IE8 ขึ้นไป หากเราเปิดด้วย IE10 มันก็จะเข้าสู่ compatibility mode โดยอัตโนมัติ เพื่อย้อนกลับไปใช้ rendering engine ที่ยังคงเข้าใจโค้ดแบบนั้นอยู่ เรามักจะเห็นว่าหน้าตาหลังจากเข้าสู่ compatibility mode จะแปลกๆ ไป ทั้งนี้ก็เพราะว่า rendering engine ที่ไปจำลองมานั้น มันคือ IE5 quirks mode นั่นเอง

ส่วน standards mode ของ Internet Explorer นั้น ไม่ได้หมายถึง โหมดที่เป็นมาตรฐานของ Internet Explorer แต่มันหมายถึง โหมดของ Internet Explorer ที่จะใช้ “มาตรฐาน” ล่าสุดในขณะนั้นต่างหาก ในโหมดนี้ Internet Explorer จะรู้จัก specifications ใหม่ๆ ของ html5, css3, svg และอื่นๆ มากที่สุด

เขียน HTML5 ควรใช้ X-UA-Compatible Meta Tag แบบไหน ?

Internet Explorer จะใช้ standards mode กับหน้าที่มีการประกาศ HTML5 document type (<!DOCTYPE>) โดยอัตโนมัติอยู่แล้ว แต่ก็มีในบางกรณีที่มันจะยังคงเข้าสู่ compatibility mode โดยสาเหตุนั้นจะมาจากสิ่งเหล่านี้

• มีการเขียนโค้ดที่ไม่ได้เป็น standard
• มีการเขียนโค้ดที่เลิกรองรับไปแล้ว
• มีการเขียนโค้ดที่สามารถใช้ได้เฉพาะบางเวอร์ชั่นเท่านั้น

ถ้ามันเข้าสู่ compatibility mode แล้วล่ะก็ หน้าเว็บคงจะไม่แสดงผลอย่างที่เราตั้งใจอย่างแน่นอน วิธีแก้คือให้เราใส่ X-UA-Compatible meta tag ดังต่อไปนี้

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

จากโค้ดด้านบน จะเป็นการบอก Internet Explorer ให้ render หน้าเว็บโดยใช้ chrome frame หากได้มีการติดตั้งไว้ แต่ถ้าไม่มี ให้ render ด้วย rendering engine เวอร์ชั่นสูงสุดเท่าที่มี ซึ่งนั่นก็หมายความว่ามันน่าจะรองรับโค้ด html5 ของเราได้ดีที่สุด

ข่าวร้าย? X-UA-Compatible Meta Tag ทำให้ Validate ไม่ผ่าน

เนื่องจาก X-UA-Compatible meta tag นั้นทำออกมาเพื่อแก้ปัญหาให้กับ Internet Explorer เอง มันจึงไม่ได้เป็น standard แต่อย่างใด หากเรา validate html โดยใช้ tool ของ w3c มันก็จะฟ้องว่ามี error

ให้เราแก้ปัญหาโดยการเอา X-UA-Compatible meta tag ออกจากหน้าเว็บของเรา แล้วเปลี่ยนไปกำหนดใน header ของ http request แทน หากเราใช้ web server เป็น apache ให้เราใส่โค้ดนี้ลงไปในไฟล์ .htaccess

Header set X-UA-Compatible "IE=edge, chrome=1"

เพียงเท่านี้ ทุกๆ หน้าเว็บของเราก็จะแสดงผลเหมือนกับการใส่ X-UA-Compatible meta tag ลงไปในโค้ดของเรา และยังสามารถ validate html ผ่านอีกด้วย

อย่างไรก็ตาม หากเราต้องการกำหนดแค่บางหน้า หรือเราไม่สะดวกทำที่ฝั่ง server เราก็สามารถใส่ X-UA-Compatible meta tag ในโค้ดของเราได้ตามเดิม เนื่องจาก tool validate html ของ w3c นั้น มีไว้สำหรับเป็น guidelines เท่านั้น การ validate ไม่ผ่าน จึงไม่ได้แปลว่างานของเราไม่ดีเสมอไป