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

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

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

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

เครื่องมือแสดงผลคืออะไร

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

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

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

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

เบราว์เซอร์ใดใช้เอ็นจิ้นใด

มีเอ็นจิ้นการเรนเดอร์หลักสี่ตัวที่เบราว์เซอร์ยอดนิยมใช้มากที่สุด

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

มาตรฐานเว็บ

ช่องว่างระหว่างเอ็นจิ้นการเรนเดอร์ที่แตกต่างกันนั้นเล็กกว่าเมื่อตอนที่ Internet Explorer เป็นเบราว์เซอร์หลักมาก

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

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

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

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

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

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

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

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

สรุปผล

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

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

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

เครดิตรูปภาพ: อุปกรณ์ผ่าน Jeremy Keith เบราว์เซอร์ที่ไม่รองรับผ่าน Duncan Hill