เบราว์เซอร์แสดงหน้าเว็บอย่างไร และทำไมจึงไม่มีสองตัวที่ดูเหมือนกัน?

ขณะที่คุณกำลังเล่นอินเทอร์เน็ต การพบเว็บไซต์ที่ดูต่างกันไปในอุปกรณ์ต่างๆ ไม่ใช่เรื่องแปลกใหม่ อาจมีฟีเจอร์บางอย่างที่ทำงานไม่ได้เลยก็เป็นได้

บ่อยครั้งที่สิ่งนี้ไม่ใช่ปัญหาของเว็บไซต์ แต่เป็นของเบราว์เซอร์ของคุณ เบราว์เซอร์หลักบนเดสก์ท็อป 5 ตัวใช้ "เครื่องมือเรนเดอร์" (rendering engines) 4 แบบในการแสดงหน้าเว็บ — และเบราว์เซอร์ Microsoft Edge รุ่นใหม่สำหรับ Windows 10 จะนำเสนอเครื่องมือตัวที่ห้า — โดยแต่ละตัวทำงานแตกต่างกันไป

นั่นหมายความว่าประสบการณ์การใช้เว็บของคุณอาจเปลี่ยนแปลงไป ขึ้นอยู่กับเบราว์เซอร์ที่ใช้ และแม้แต่เวอร์ชันของเบราว์เซอร์นั้นๆ ก็ตาม

เครื่องมือเรนเดอร์ (Rendering Engine) คืออะไร?

หน้าเว็บไม่ใช่สิ่งเดียวที่ดาวน์โหลดมาแสดงบนหน้าจอทีละพิกเซล แต่เป็นชุดคำสั่งที่เขียนในรหัสหลายประเภท — HTML, CSS, JavaScript, PHP และอื่นๆ — ที่บอกเบราว์เซอร์ว่าต้องทำอะไร ที่ไหน และอย่างไร

แต่ละเบราว์เซอร์ใช้เครื่องมือเรนเดอร์ (หรือเรียกว่ layout engine) เพื่อนำเนื้อหาและข้อมูลการจัดรูปแบบจากรหัสมาแสดงบนหน้าจอในรูปแบบที่สมบูรณ์

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

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

เบราว์เซอร์ไหนใช้เครื่องมือไหน?

มีเครื่องมือเรนเดอร์หลัก 4 แบบที่เบราว์เซอร์ยอดนิยมใช้:

• WebKit: เครื่องมือโอเพนซอร์สที่ Safari ใช้บน OS X และ iOS รวมถึงเบราว์เซอร์มือถืออื่นๆ หลายตัว รวมถึงเบราว์เซอร์เริ่มต้นของ Android;
• Blink: เครื่องมือโอเพนซอร์สที่พัฒนาจาก WebKit ใช้ใน Chrome, Opera, Amazon Silk และ Android WebView (เบราว์เซอร์ที่เปิดภายในแอป);
• Gecko: เครื่องมือโอเพนซอร์สที่ Mozilla Foundation พัฒนา ใช้ใน Firefox;
• Trident: เครื่องมือของ Microsoft ใช้ใน Internet Explorer เบราว์เซอร์ Microsoft Edge จะใช้รุ่นใหม่ที่เรียกว่า EdgeHTML

มาตรฐานเว็บ (Web Standards)

ช่องว่างระหว่างเครื่องมือเรนเดอร์ต่างๆ เล็กลงมากเมื่อเทียบกับสมัยที่ Internet Explorer ครองตลาด

การทดสอบอย่าง Acid3 แสดงว่าเบราว์เซอร์เรนเดอร์หน้าเว็บแม่นยำแค่ไหน และเบราว์เซอร์สมัยใหม่ส่วนใหญ่ได้คะแนนสูง แต่การปฏิบัติตามมาตรฐานเป็นงานที่ซับซ้อนมาก

ข้อกำหนดของ HTML, CSS และอื่นๆ มีขนาดใหญ่มาก มีการเพิ่มองค์ประกอบใหม่ ลบองค์ประกอบเก่าที่ไม่ได้ใช้หรือล้าสมัย อาจใช้เวลานานกว่าที่เครื่องมือเรนเดอร์จะสะท้อนการเปลี่ยนแปลงเหล่านี้

บางองค์ประกอบในข้อกำหนด HTML5 และ CSS ยังไม่ได้รับการรองรับจากเบราว์เซอร์หลักตัวไหน บางอย่างรองรับบางส่วน ส่วนบางอย่างรองรับในเบราว์เซอร์บางตัวแต่ไม่ใช่ทุกตัว

เว็บไซต์ html5test.com ช่วยให้คุณทดสอบเบราว์เซอร์และเวอร์ชันที่ใช้งานอยู่ ว่ารองรับฟีเจอร์ทางการและทดลองของ HTML5 ได้ดีแค่ไหน ณ เวลาเขียน Chrome ได้อันดับหนึ่งของเบราว์เซอร์หลัก ในขณะที่ Internet Explorer (v11) ต่ำสุด

ถ้านักพัฒนาเว็บใช้ฟีเจอร์ที่รองรับในเบราว์เซอร์หนึ่งแต่ไม่รองรับในอีกตัว เบราว์เซอร์ที่ไม่รองรับต้องยอมรับค่าประมาณการที่ใกล้เคียง หรือละเว้นฟีเจอร์นั้นไปเลย (เช่น กล่องโปร่งใสอาจแสดงเป็นไม่โปร่งใส)

สิ่งนี้ทำให้การเรนเดอร์หน้าเว็บซับซ้อนกว่าที่คิด เบราว์เซอร์ที่อัปเดตบ่อยกว่ามักจะปฏิบัติตามมาตรฐานมากกว่า ตัวอย่างคือ Chrome ที่อัปเดตอัตโนมัติบ่อยครั้ง เทียบกับ IE ที่อัปเดตนานกว่า

ยังมีปัจจัยอื่นๆ ที่เกี่ยวข้องอีกด้วย:

• บั๊กในเครื่องมือ: เครื่องมือเรนเดอร์เป็นซอฟต์แวร์ และซอฟต์แวร์ทุกตัวมีบั๊ก แม้บั๊กสำคัญจะถูกค้นพบและแก้ไขเร็ว แต่ไม่สามารถรับประกันได้ว่าการผสมผสานรหัสบนหน้าเว็บจะไม่สร้างผลลัพธ์ที่ไม่คาดคิดเมื่อเรนเดอร์
• บั๊กในหน้าเว็บ: เบราว์เซอร์มีระดับความทนทานต่อข้อผิดพลาดในตัว แต่มันแตกต่างกันในแต่ละเครื่องมือ หน้าเว็บที่มีข้อผิดพลาดในรหัสอาจเรนเดอร์ได้สมบูรณ์ในเบราว์เซอร์หนึ่ง แต่เสียหายรุนแรงในอีกตัว
• แบบอักษร (Fonts): การแสดงแบบอักษรไม่ได้จัดการโดยเบราว์เซอร์ แต่โดยระบบปฏิบัติการ Windows และ OS X เรนเดอร์แบบอักษรต่างกัน ดังนั้นแม้แบบอักษรเดียวกันในเบราว์เซอร์เดียวกัน ก็อาจดูต่างกันบนแพลตฟอร์มต่างๆ
• มรดกเก่า (Legacy): เบราว์เซอร์มักนำฟีเจอร์ใหม่มาใช้ (โดยเฉพาะ CSS) ก่อนที่จะเป็นส่วนหนึ่งของข้อกำหนดทางการ หากการนำฟีเจอร์ไปใช้เปลี่ยนแปลงเมื่อถูกนำมาใช้อย่างเป็นทางการ นักพัฒนาต้องตัดสินใจว่าจะนำการเปลี่ยนแปลงมาใช้และเสี่ยงต่อการแตกความเข้ากันได้กับพันเว็บไซต์ที่ออกแบบสำหรับรุ่นเก่า หรือละเว้นรุ่นใหม่ไปเลย
• ฟีเจอร์เฉพาะตัว (Proprietary features): บางเบราว์เซอร์อาจใช้เทคโนโลยีเฉพาะตัวที่ไม่มีที่อื่น ตัวอย่าง nổiชื่อคือ ActiveX framework ของ Microsoft ใน Internet Explorer แม้บริษัทจะไม่ใช้ใน Microsoft Edge รุ่นใหม่

สรุป

ด้วยปัญหาเยอะขนาดนี้ จึงไม่น่าแปลกใจที่ความแตกต่างในการจัดการหน้าเว็บของเบราว์เซอร์ยังคงอยู่

สถานการณ์กำลังดีขึ้น แต่ไม่น่าจะแก้ไขได้สมบูรณ์ จะดีกว่าถ้าทุกคนใช้เวอร์ชันล่าสุดของเบราว์เซอร์ที่เลือก แต่ Internet Explorer 8 ที่มีอายุ 6 ปียังคงครองส่วนแบ่งตลาด 4.5% อยู่ นั่นยังไกลมาก

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

เครดิตรูปภาพ: Devices via Jeremy Keith, Unsupported browser via Duncan Hill