Khi lướt web, bạn thường thấy cùng một trang web hiển thị khác biệt trên các thiết bị hoặc trình duyệt khác nhau. Thậm chí một số tính năng hoàn toàn không hoạt động.
Thường đây không phải lỗi của trang web mà là do trình duyệt. Năm trình duyệt desktop phổ biến nhất sử dụng đến bốn "rendering engine" (cơ chế hiển thị) khác nhau — và Microsoft Edge trên Windows 10 giới thiệu engine thứ năm — mỗi engine hoạt động theo cách riêng.
Điều này có nghĩa là trải nghiệm web của bạn thay đổi tùy thuộc vào trình duyệt đang dùng, thậm chí cả phiên bản của trình duyệt đó.
Rendering Engine là gì?
Trang web không phải là một thực thể đơn lẻ được tải xuống và hiển thị từng pixel một. Thay vào đó, nó về cơ bản là một chuỗi các hướng dẫn được viết bằng nhiều loại mã — HTML, CSS, JavaScript, PHP và nhiều hơn nữa — nói cho trình duyệt biết phải làm gì, ở đâu và như thế nào.
Mỗi trình duyệt sử dụng một rendering engine (còn gọi là layout engine) để lấy nội dung và thông tin định dạng trong mã, sau đó hiển thị nó trên màn hình dưới dạng đã được định dạng hoàn chỉnh.
Vấn đề là không có một rendering engine duy nhất được dùng cho mọi trình duyệt. Mặc dù mỗi ngôn ngữ được định nghĩa bởi các thông số kỹ thuật chi tiết, engine chỉ có thể cung cấp một cách diễn giải của thông số đó.
Đặc biệt với CSS (mã cung cấp thông tin định dạng), không engine nào tạo ra kết quả hoàn toàn giống nhau. Đôi khi sự khác biệt chỉ là vài pixel lệch, nhưng đôi khi lại khác biệt hoàn toàn.
Trình duyệt nào dùng Engine nào?
Có bốn rendering engine chính mà các trình duyệt phổ biến nhất sử dụng:
- WebKit: Engine mã nguồn mở được Safari dùng trên macOS và iOS, cũng như nhiều trình duyệt di động khác, bao gồm trình duyệt Android gốc.
- Blink: Engine mã nguồn mở dựa trên WebKit, vận hành Chrome, Opera, Amazon Silk và Android WebView (trình duyệt mở trong ứng dụng).
- Gecko: Engine mã nguồn mở do Quỹ Mozilla phát triển, dùng cho Firefox.
- Trident: Engine độc quyền do Microsoft phát triển, dùng trong Internet Explorer. Trình duyệt Microsoft Edge dùng phiên bản mới hơn gọi là EdgeHTML.
Tiêu chuẩn Web (Web Standards)
Khoảng cách giữa các rendering engine khác nhau hiện nhỏ hơn rất nhiều so với thời kỳ Internet Explorer thống trị.
Các bài kiểm tra như Acid3 cho thấy trình duyệt hiển thị trang web chính xác đến đâu, và hầu hết trình duyệt hiện đại đều đạt điểm cao. Tuy nhiên, tuân thủ tiêu chuẩn là một nhiệm vụ cực kỳ phức tạp.
Thông số kỹ thuật cho HTML, CSS và các ngôn ngữ khác rất lớn. Các phần tử mới được thêm vào; các phần tử cũ, không dùng hoặc lỗi thời bị loại bỏ. Rendering engine cần thời gian dài để phản ánh những thay đổi này.
Một số phần tử trong đặc tả HTML5 và CSS vẫn chưa được hỗ trợ bởi bất kỳ trình duyệt chính lưu nào, một số chỉ được hỗ trợ một phần, trong khi những phần tử khác được hỗ trợ bởi một số trình duyệt nhưng không phải tất cả.
Trang web html5test.com cho phép bạn kiểm tra trình duyệt và phiên bản cụ thể để xem mức độ hỗ trợ các tính năng chính thức và thử nghiệm của HTML5. Tại thời điểm viết bài, Chrome đứng đầu các trình duyệt chính, trong khi Internet Explorer (v11) xếp cuối.
Nếu một nhà phát triển web sử dụng tính năng được hỗ trợ trong trình duyệt này nhưng không trong trình duyệt kia, trình duyệt không hỗ trợ phải hoặc chấp nhận một giải pháp gần đúng, hoặc bỏ qua tính năng đó hoàn toàn (ví dụ: hộp trong suốt có thể được hiển thị thành không trong suốt).
Điều này làm cho việc hiển thị trang web phức tạp hơn vẻ ngoài. Trình duyệt cập nhật thường xuyên hơn có khả năng tuân thủ tiêu chuẩn hơn so với trình duyệt ít cập nhật, như được minh họa bởi việc Chrome cập nhật tự động thường xuyên so với các bản cập nhật thưa thớt của IE.
Còn có các yếu tố khác cũng ảnh hưởng:
- Lỗi trong engine: Rendering engine là phần mềm, và mọi phần mềm đều có lỗi. Mặc dù các lỗi nghiêm trọng sẽ được phát hiện và khắc phục nhanh chóng, nhưng không thể đảm bảo một tổ hợp mã cụ thể trên trang web sẽ không tạo ra kết quả bất ngờ khi hiển thị.
- Lỗi trong trang web: Trình duyệt có mức độ dung sai lỗi nhất định, nhưng mức độ này khác nhau giữa các engine. Trang web có lỗi trong mã có thể hiển thị hoàn hảo trong trình duyệt này nhưng bị hỏng hoàn toàn trong trình duyệt khác.
- Font chữ: Cách hiển thị font không do trình duyệt xử lý mà do hệ điều hành. Windows và macOS hiển thị font khác nhau, nên ngay cả cùng một font trong cùng trình duyệt cũng trông khác nhau trên các nền tảng khác nhau.
- Hệ thống cũ (Legacy): Trình duyệt thường áp dụng các tính năng mới, đặc biệt là CSS, trước khi chúng trở thành một phần của đặc thức chính thức. Nếu việc triển khai thay đổi khi được chấp nhận, nhà phát triển trình duyệt phải quyết định: áp dụng thay đổi và rủi ro phá vỡ tương thích với hàng nghìn trang web được thiết kế cho phiên bản cũ, hay bỏ qua phiên bản mới hoàn toàn.
- Tính năng độc quyền: Một số trình duyệt có thể sử dụng công nghệ độc quyền không có ở nơi khác. Điều này nổi tiếng nhất với khung ActiveX của Microsoft trong Internet Explorer, tuy nhiên công ty đã không sử dụng nó trong Microsoft Edge mới.
Tổng kết
Với nhiều vấn đề liên quan, không ngạc nhiên khi sự khác biệt trong cách trình duyệt xử lý trang web vẫn tồn tại.
Tình hình đang cải thiện, nhưng khó có thể giải quyết hoàn toàn. Việc mọi người chạy phiên bản mới nhất của trình duyệt đã chọn sẽ giúp ích rất nhiều, nhưng với Internet Explorer 8 đã sáu tuổi vẫn giữ 4,5% thị phần, điều đó còn rất xa.
Bạn dùng trình duyệt nào và có cập nhật thường xuyên không? Bạn có từng gặp trang web không hoạt động trên trình duyệt của mình? Hãy chia sẻ trong bình luận bên dưới.
Nguồn ảnh: Thiết bị via Jeremy Keith, Trình duyệt không hỗ trợ via Duncan Hill