Đảm Bảo Tương Thích Cross-Browser: Xây Dựng Website Hoạt Động Mượt Mà Trên Mọi Trình Duyệt

Khi xây dựng cho web, dễ dàng bị "tunnel vision" chỉ xây dựng cho mình. Bạn có thể bỏ qua nhu cầu đa dạng của khán giả và chỉ tập trung vào sở thích và giao diện trên trình duyệt ưa thích. Điều này khiến bỏ lỡ khía cạnh chức năng quan trọng và dẫn đến vấn đề tương thích sau này trên trình duyệt khác.

Trong bài này, chúng ta đi sâu vào chiến lược thực tế đạt được cross-browser compatibility, tập trung vào component UI cụ thể như form element, scrollbar, font. Sau đó thảo luận best practices chung mọi web developer nên áp dụng.

"Hãy nhớ bạn không phải user của bạn — chỉ vì site chạy trên MacBook Pro hoặc Galaxy Nexus cao cấp không có nghĩa nó chạy cho tất cả user!" – MDN Web Docs

Mục Lục

• Cross-Browser Compatibility Là Gì?
• Vấn Đề Cross-Browser Phổ Biến Và Giải Pháp
• Best Practices Cho Cross-Browser Compatibility
• Kết Luận

Một cách đơn giản, cross-browser compatibility là đảm bảo website mang lại trải nghiệm nhất quán, đẳng cấp cho mọi user, bất kể lựa chọn trình duyệt.

Trình duyệt dùng engine khác nhau, nên mặc định render website khác nhau. Để website trông và hoạt động giống nhau bất kể trình duyệt user dùng đòi hỏi hiểu khả năng độc đáo của từng trình duyệt.

Cross-browser compatibility nói: lý tưởng website trông và hoạt động giống nhau dù xem trên Chrome, Microsoft Edge và Opera (engine Blink), Firefox (engine Gecko) hoặc Safari (engine WebKit).

Lợi Ích Của Cross-Browser Compatibility:

1. Tiếp cận rộng hơn — website accessible cho nhiều user hơn, bất kể trình duyệt.
2. Trải nghiệm người dùng nhất quán — website có giao diện và chức năng đồng nhất cross-platform.
3. SEO tốt hơn — website xếp hạng cao hơn nhờ user-friendly hơn.

Vấn Đề Cross-Browser Phổ Biến Và Giải Pháp

Infographic kết quả test trang web trên trình duyệt khác nhau. Image credit Browserstack

Form Elements (Phần Tử Form)

Giao diện và hành vi form element như <input>, <select>, <textarea>, <button> khác biệt đáng kể cross-browser. Ảnh hưởng cả mặt trực quan và usability của form, bao gồm cách user tương tác (click, focus, typing).

Ví dụ, placeholder text trong <input> có thể mờ hơn ở trình duyệt này và rõ hơn ở trình duyệt kia, gây vấn đề readability.

Để giải quyết:

• Dùng CSS chuẩn hóa giao diện form element càng nhiều càng tốt.
• Đối với placeholder, đảm bảo contrast và readability cross-browser:

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #909090; opacity: 1; /* Firefox */ } input.studentid:-ms-input-placeholder { /* Microsoft Edge */ color: #909090; } 

CSS trên target placeholder text trong input field cross-browser, set color #909090, đảm bảo opacity đầy đủ cho hiển thị nhất quán (với rule riêng cho Microsoft Edge).

Fonts (Phông Chữ)

Font và typography đối mặt vài vấn đề cross-browser compatibility, từ default font size khác nhau đến khác biệt engine render font. Điều này ảnh hưởng weight, spacing, và appearance tổng thể của text.

Font có thể mỏng hơn và spacing rộng hơn ở Chrome so với Edge, ảnh hưởng readability và consistency thiết kế.

Để giải quyết:

• Định nghĩa base font size trong CSS và dùng relative units (như em hoặc rem) cho text sizing như code dưới. Giúp duy trì scalability và consistency.

html { font-size: 16px; /* Define a base font size */ } body { font-family: 'Open Sans', sans-serif; line-height: 1.6; color: #333; } h1, h2, h3, p { margin: 2rem;; padding: 1.5rem; } 

• Khi dùng web font, đảm bảo load đúng cross-browser bằng dịch vụ như Google Fonts, cung cấp font loading cross-browser compatible:

<link href="<https://fonts.googleapis.com/css?family=Open+Sans&display=swap>" rel="stylesheet"> 

• Code dưới làm cho font 'Open Sans' trông giống nhau trên website, bất kể trình duyệt. Làm bằng cách dùng version font có sẵn trên máy để load nhanh. Nếu không, tải từ net nhưng swap font mặc định khi chờ load.

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(<https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2>) format('woff2'); } 

Scrollbars (Thanh Cuộn)

Styling scrollbar lâu nay là thách thức cho web developer do support không nhất quán cross-browser. Mặc dù Chrome, Safari, Edge cung cấp cách customize scrollbar bằng CSS, mức support và cách implement khác nhau.

Cập nhật gần đây thấy cải thiện chuẩn hóa scrollbar customization, hầu hết trình duyệt hiện đại adopt khả năng tương tự. Nhưng vẫn còn khác biệt cách tiếp cận:

Cho Chrome, Edge, Firefox, dùng CSS property scrollbar-width và scrollbar-color tùy chỉnh giao diện scrollbar. Đây là phần standard mới hơn nhằm cách nhất quán styling scrollbar cross-browser hỗ trợ nó.

/* For Chrome, Firefox, and Edge */ scrollbar-width: thin; scrollbar-color: #c0c0c0 #f0f0f0; 

Cho Safari, dùng engine WebKit render, cần dùng pseudo-element ::-webkit-scrollbar để styling tương tự. Phương pháp này dành riêng WebKit-based browser.

/* For Safari */ .mostly-customized-scrollbar::-webkit-scrollbar { width: 5px; height: 8px; background-color: #aaa; /* or add it to the track */ } 

CSS trên customize giao diện scrollbar cross-browser bằng cách điều chỉnh kích thước và màu.

Nhưng để consistency cross-browser, cần thiết kế trang web sao cho default scrollbar appearance không ảnh hưởng tiêu cực thiết kế.

Best Practices Cho Cross-Browser Compatibility

Infographic công cụ đo lường. Image credit Creative Bloq

Định Nghĩa Doctype

Bắt đầu HTML document với khai báo <!DOCTYPE> đảm bảo standards mode kích hoạt.

Quan trọng vì nó báo cho trình duyệt phiên bản HTML trang viết. Nếu không, trình duyệt có thể render ở "quirks mode" — nơi trình duyệt giả định bạn viết code cũ, non-standard. Điều này dẫn đến styling và layout bất dự đoán vì modern web standard không áp dụng đầy đủ.

Khai báo <!DOCTYPE> trong HTML5 như sau ở đầu file HTML:

<!DOCTYPE html> 

Dùng CSS Reset

CSS reset cơ bản là thêm set rule target element phổ biến để xóa default styling, giảm chênh lệch browser-default.

Các trình duyệt khác nhau có inherent style khác nhau cho HTML element — margin, padding, font size, v.v. Vậy implement CSS reset đảm bảo chỉ style bạn viết trong code có hiệu lực. Điều này dẫn đến baseline nhất quán styling webpage cross-browser.

Có developer thích tự viết từ đầu. Có người như tôi, dùng Eric Meyer's popular free CSS reset như code dưới:

/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } 

Có nhóm developer khác dùng Normalize.css, cài bằng package manager như npm và import vào CSS.

npm install normalize.css 

Xem Xét Hỗ Trợ CSS Property

Trước khi dùng tính năng CSS nâng cao, check compatibility trên Can I Use. Tìm bảng compatibility chi tiết HTML, CSS, JavaScript cross-browser và version. Giúp quyết định công nghệ dùng và khi nào implement fallback.

Trong screenshot dưới, search CSS Grid và ngay thấy trình duyệt và version hỗ trợ. Vậy trước khi implement CSS Grid, đã biết browser nào hoạt động.

Browser compatibility cho CSS Grid.

Tạo Website Responsive

Thế giới multi-device hiện nay đòi hỏi developer ưu tiên responsiveness.

Dùng fluid layout, flexible image, media query đảm bảo website thích ứng mọi kích thước màn hình. Hiệu ứng dây chuyền của responsiveness đúng là cross-browser compatibility, accessibility và UX nâng cao.

Bài viết thảo luận best practices responsive design và cách implement.

Thực Hiện Cross-Browser Testing

Testing trở thành buzzword lập trình gần đây, nhưng vì nó rất quan trọng đảm bảo code viết chạy như mong đợi.

Không chỉ check TypeScript code chạy mượt. Dự án web đơn giản cũng cần test kỹ.

Cross-browser testing nghĩa là thử trang web trên nhiều trình duyệt và thiết bị đảm bảo trông và hoạt động nhất quán.

Kết Luận

Cross-browser compatibility có thể khó phát âm. Nhưng như đã thấy, nó thiết yếu khi xây dựng website. Và bạn có thể dần làm website compatible bằng cách test và tinh chỉnh code implement 5 best practices thảo luận.

Vậy, trước khi kết thúc website hoặc web app tiếp theo, nhớ check xem user trên Chrome, Firefox, Safari và trình duyệt khác có thấy và trải nghiệm cùng điều gì.

Tài nguyên hữu ích:

• MDN Web Docs on Cross-browser compatibility
• Codepaper on Significance of Cross-browser compatibility
• Eric Meyer on CSS Reset

Học lập trình miễn phí. Chương trình mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm lập trình viên. Bắt đầu ngay