IE กับปัญหา X-UA-Compatible default ที่ไม่เป็นอย่างที่ตั้งใจให้เป็น (Java dev)
การพัฒนา application ที่หวังว่าจะให้ทำงานได้ถูกต้องแล้ว เรื่องความสวยงามของ UI เป็นอีกหนึ่งเรื่องที่ทำให้ user ที่เข้ามาใช้งานพอใจ ถ้าจะพูดถึงว่าการที่จะทำให้ UI ของ application สวยงามนั้นก็เพียงใช้ CSS basic ถึง advance ก็ตกแต่งหน้า UI ให้สวยงามได้ไม่ยาก แต่บทความนี้กำลังจะบอกถึงอะไร ?
CSS ไม่ใช่ทุก properties style ที่รองรับการ display ของ แต่ละ browser ได้ซะทั้งหมด มีบาง browser ที่ยังไม่ support properties นั้นๆ ก็มีค่อนข้างเยอะ เช็ค css props ที่ต้องการใช้งานได้ที่ https://caniuse.com/ จะช่วยบอกว่า support browser อะไรได้บ้าง ตัวอย่างเช่น display:flex ที่บาง browser อย่าง IE ที่ version 6–9 ยังไม่ support
IE version > 9 Support CSS เกือบ ๆ เทียบเท่า Chrome ,Firefox แต่มีความลับบางอย่างที่เป็นความพิเศษของ IE ที่จะเรียกว่าเป็นข้อดี หรือ ข้อเสียดีละ ?
Mode Develop (F12) feature Emulation Mode ที่ dev สามารถ switch เปลี่ยนจำลองให้ตัว browser เองย้อนไปเป็น IE version ก่อน ๆ ได้ เช่น IE 11,10,9,8,7,6 และ 5 โดยการเปลี่ยน Document Mode นี้จะมีผลถึงการแสดงผล UI ที่เปลี่ยนไปตาม IE version ตามที่เลือก
x-ua-compatible meta tag คืออะไร
<meta http-equiv=”X-UA-Compatible” content=”IE=7, IE=8">
บทความของ siamhtml.com อธิบายไว้ค่อนข้างดี ขออ้างถึงบทความนี้ให้เรื่องคำอธิบายแล้วกัน X-UA-Compatible Meta Tag คืออะไร + สอนวิธีใช้
ปัญหามันเกิดตรงนี้ เมื่อวิธีการแก้ปัญหาของคนพบปัญหาส่วนใหญ่ใช้ไม่ได้ผลกับปัญหาของผม
application ที่พัฒนาด้วย Spring Framework ทดสอบเปิดกับ Edge แล้ว Emulation Mode set IE version 5 (default) ทำให้เวลา user เปิดเข้าใช้งานจะเห็น UI ของ application ที่พัฒนาเป็น IE version 5 ซึ่งก็รู้นะว่า css ที่เราบรรจงสร้างสรรค์ มัน not working on IE v.5 T..T
ถ้าวิธีการแก้เบื้องต้นที่ web developer ส่วนใหญ่แนะก็เพียงแต่เพิ่ม <meta http-equiv=”X-UA-Compatible” content=”IE=Edge"> ไว้ที่ส่วนบนภายใต้ <head/> เท่านี้ก็น่าจะแก้ปัญหาได้ browser ก็จะ default version Edge ให้
แต่ solution นี้ไม่ work กับ application ของผม ที่ development แบบ dynamic web page (java servlet) ที่มีการทำงานของ code web page ที่ server side
เริ่มใช้วิธีการแก้ปัญหาแบบ Java Developer
เพราะด้วยว่าการแก้ปัญหาแบบคนส่วนใหญ่ (เข้าใจว่ามันจะ work กับ static web app) ใช้กับ application ของผมไม่ได้ผล ก็ค้นหาจนไปเจอวิธีการเพิ่ม filter (javax.servlet.Filter) การ implement class Filter ของ servlet
สิ่งที่ต้องเพิ่มเข้าไปใน Project ของเรามี 2 ส่วน
- สร้าง Class Filter UserAgentCompatibleFilter.java แล้ว implement javax.servlet.Filter เพิ่ม Code ในส่วน HttpServletResponse ให้มีการ SetHeader Property “X-UA-Compatible” ให้เท่ากับ IE version ที่เราต้องการที่จะ force browser ให้เลือกเป็น version ที่เราต้องการ
2. เพิ่ม Filter Tag ที่ web.xml file เพื่อ run filter servlet
3. run web server (tomcat web server) แล้วลองทดสอบ web อีกครั้ง
ขอบคุณที่ติดตามบทความครับ
