Đã đăng vào thg 10 8, 4:04 SA 11 phút đọc

Khám phá khả năng tương thích trên nhiều trình duyệt: Xây dựng trang web hoạt động mượt mà ở mọi nơi

Khi xây dựng trang web, chúng ta dễ dàng rơi vào lối mòn và chỉ xây dựng cho chính mình. Bạn có thể bỏ qua nhiều nhu cầu đa dạng của người dùng và chỉ tập trung vào sở thích của mình, cách mọi thứ hiển thị trên trình duyệt yêu thích của bạn. Điều này khiến bạn bỏ lỡ các khía cạnh chức năng quan trọng và dẫn đến các vấn đề tương thích trong tương lai trên các trình duyệt khác.

Trong bài viết này, chúng ta sẽ đi sâu vào các chiến lược thực tế để đạt được khả năng tương thích trên nhiều trình duyệt, tập trung vào các thành phần UI cụ thể như phần tử biểu mẫu, thanh cuộn và phông chữ. Sau đó, chúng ta sẽ thảo luận về một số phương pháp hay chung mà mọi nhà phát triển web nên áp dụng.

Khả năng tương thích giữa nhiều trình duyệt là gì?

Nói một cách đơn giản, khả năng tương thích trên nhiều trình duyệt là việc đảm bảo rằng trang web của bạn mang đến trải nghiệm nhất quán, chất lượng cao cho tất cả người dùng, bất kể họ lựa chọn trình duyệt nào.

Các trình duyệt sử dụng các engine khác nhau, vì vậy theo mặc định, chúng hiển thị các trang web khác nhau. Để trang web của bạn trông và hoạt động giống nhau bất kể trình duyệt của người dùng yêu cầu phải hiểu rõ về khả năng độc đáo của từng trình duyệt.

Khả năng tương thích trên nhiều trình duyệt nói rằng lý tưởng nhất là một trang web nên trông và hoạt động giống nhau cho dù ai đó đang xem nó trên Chrome, Microsoft Edge và Opera (được hỗ trợ bởi engine Blink), Firefox (được hỗ trợ bởi engine Gecko) hoặc thậm chí là Safari (được hỗ trợ bởi engine WebKit).

Lợi ích của khả năng tương thích trên nhiều trình duyệt

Phạm vi tiếp cận rộng hơn: Trang web của bạn có thể tiếp cận nhiều người dùng hơn, bất kể họ sử dụng trình duyệt nào.
Trải nghiệm người dùng nhất quán: Trang web của bạn có giao diện và chức năng đồng nhất trên các nền tảng.
Tối ưu hóa công cụ tìm kiếm (SEO) tốt hơn: Trang web của bạn được xếp hạng cao hơn nhờ thân thiện với người dùng hơn.

Các vấn đề phổ biến trên nhiều trình duyệt và giải pháp khắc phục

1. Phần tử biểu mẫu

Giao diện và cách hoạt động của các phần tử biểu mẫu như <input>, <select>, <textarea> và <button> có thể khác nhau đáng kể giữa các trình duyệt. Điều này ảnh hưởng đến cả khía cạnh trực quan và khả năng sử dụng của biểu mẫu, bao gồm cả cách người dùng tương tác với chúng (ví dụ: nhấp, lấy nét và nhập).

Ví dụ: văn bản giữ chỗ trong các trường <input> có thể xuất hiện mờ hơn trong trình duyệt này và rõ nét hơn trong trình duyệt khác, dẫn đến các vấn đề về khả năng đọc.

Để giải quyết vấn đề này:

Sử dụng CSS để tiêu chuẩn hóa giao diện của các phần tử biểu mẫu càng nhiều càng tốt.
Đối với phần giữ chỗ, hãy đảm bảo độ tương phản và dễ đọc trên các trình duyệt

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #909090;
  opacity: 1; /* Firefox */
}

input.studentid:-ms-input-placeholder { /* Microsoft Edge */
  color: #909090;
}

Đoạn mã CSS ở trên nhắm mục tiêu văn bản giữ chỗ trong các trường nhập liệu trên các trình duyệt, đặt màu của chúng thành #909090 và đảm bảo độ mờ đầy đủ để hiển thị nhất quán (với các quy tắc cụ thể cho Microsoft Edge).

2. Phông chữ

Phông chữ và kiểu chữ phải đối mặt với một số vấn đề tương thích trên nhiều trình duyệt, từ việc thay đổi kích thước phông chữ mặc định đến sự khác biệt trong các engine hiển thị phông chữ. Điều này có thể ảnh hưởng đến trọng lượng, khoảng cách và hình thức tổng thể của văn bản.

Một phông chữ có thể xuất hiện mỏng hơn và cách nhau xa hơn trong Chrome so với Edge, ảnh hưởng đến khả năng đọc và tính nhất quán của thiết kế.

Để giải quyết vấn đề này:

Xác định kích thước phông chữ cơ sở trong CSS của bạn và sử dụng các đơn vị tương đối (như em hoặc rem) để định cỡ văn bản như được hiển thị trong mã bên dưới. Điều này giúp duy trì khả năng mở rộng và tính nhất quán.

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 sử dụng phông chữ web, hãy đảm bảo rằng chúng được tải đúng cách trên tất cả các trình duyệt bằng cách sử dụng các dịch vụ như Google Fonts, dịch vụ cung cấp khả năng tải phông chữ tương thích trên nhiều trình duyệt:

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

Đoạn mã bên dưới đảm bảo rằng phông chữ 'Open Sans' trông giống nhau trên trang web của chúng ta, bất kể trình duyệt là gì. Đầu tiên, nó sử dụng phiên bản phông chữ có thể đã có trên máy tính của chúng ta để tải mọi thứ nhanh hơn. Nếu không, nó sẽ lấy nó từ internet nhưng đổi sang phông chữ mặc định trong khi chờ phông chữ sau được tải.

@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');
}

3. Thanh cuộn

Kiểu dáng thanh cuộn từ lâu đã là một thách thức đối với các nhà phát triển web do sự hỗ trợ không nhất quán trên các trình duyệt khác nhau. Mặc dù các trình duyệt như Chrome, Safari và Edge đã cung cấp các cách để tùy chỉnh thanh cuộn bằng CSS, nhưng mức độ hỗ trợ và cách triển khai chúng rất khác nhau.

Các bản cập nhật gần đây đã chứng kiến những cải tiến trong việc tiêu chuẩn hóa tùy chỉnh thanh cuộn, với hầu hết các trình duyệt hiện đại áp dụng các khả năng tương tự. Tuy nhiên, vẫn còn một số khác biệt trong cách tiếp cận:

Đối với Chrome, Edge và Firefox, bạn có thể sử dụng các thuộc tính CSS scrollbar-width và scrollbar-color để tùy chỉnh giao diện của thanh cuộn. Đây là một phần của tiêu chuẩn mới hơn nhằm mục đích cung cấp cách tạo kiểu thanh cuộn nhất quán hơn trên các trình duyệt hỗ trợ nó.

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

Đối với Safari, sử dụng engine kết xuất WebKit, bạn sẽ cần sử dụng phần tử giả ::-webkit-scrollbar để đạt được kiểu dáng tương tự. Phương pháp này dành riêng cho các trình duyệt dựa trên WebKit.

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

Đoạn mã CSS ở trên tùy chỉnh giao diện của thanh cuộn trên các trình duyệt đó bằng cách điều chỉnh kích thước và màu sắc của chúng.

Nhưng để có được sự nhất quán trên tất cả các trình duyệt, bạn sẽ cần thiết kế các trang web của mình theo cách mà giao diện thanh cuộn mặc định không ảnh hưởng tiêu cực đến thiết kế của bạn.

Phương pháp tốt nhất để đảm bảo khả năng tương thích trên nhiều trình duyệt

Để đạt được khả năng tương thích trên nhiều trình duyệt, bạn có thể tham khảo một số phương pháp tốt nhất sau:

1. Xác định Doctype

Bắt đầu tài liệu HTML của bạn bằng khai báo <!DOCTYPE> để đảm bảo chế độ tiêu chuẩn được kích hoạt.

Điều này rất quan trọng vì nó cho trình duyệt web biết trang được viết bằng phiên bản HTML nào. Nếu không có nó, trình duyệt có thể hiển thị trang ở "chế độ quirks" - trong đó trình duyệt giả định rằng bạn đã viết mã cũ, không chuẩn. Điều này cuối cùng dẫn đến các vấn đề về kiểu dáng và bố cục không thể đoán trước được vì các tiêu chuẩn web hiện đại không được áp dụng đầy đủ.

Khai báo <!DOCTYPE> trong HTML5 trông như thế này ở đầu tệp HTML của bạn:

<!DOCTYPE html>

2. Sử dụng CSS Reset

CSS reset về cơ bản là thêm một tập hợp các quy tắc nhắm mục tiêu đến các phần tử chung để loại bỏ kiểu dáng mặc định của chúng, giảm sự khác biệt mặc định của trình duyệt.

Các trình duyệt khác nhau có các kiểu vốn có khác nhau cho các phần tử HTML - lề, phần đệm, kích thước phông chữ, v.v. Vì vậy, việc triển khai CSS reset đảm bảo rằng chỉ các kiểu bạn viết trong mã của mình sẽ có hiệu lực. Điều này dẫn đến một đường cơ sở nhất quán để tạo kiểu cho trang web của bạn trên các trình duyệt khác nhau.

Có những lập trình viên thích tự viết mã từ đầu. Và những người khác như tôi, những người sử dụng CSS reset phổ biến và miễn phí như bạn có thể thấy trong mã bên dưới:

/* http://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ó một nhóm các nhà phát triển khác sử dụng Normalize.css, bạn có thể cài đặt bằng trình quản lý gói như npm và sau đó nhập nó vào CSS của bạn.

npm install normalize.css

Xem xét hỗ trợ thuộc tính CSS

Trước khi sử dụng các tính năng CSS nâng cao, hãy kiểm tra khả năng tương thích của chúng trên các trang web như Can I Use. Ở đó, bạn có thể tìm thấy các bảng tương thích chi tiết cho các tính năng HTML, CSS và JavaScript trên các trình duyệt và phiên bản khác nhau. Điều này sẽ giúp bạn đưa ra quyết định sáng suốt về việc nên sử dụng công nghệ nào và khi nào nên triển khai các bản dự phòng.

Trong ảnh chụp màn hình bên dưới, tôi đã tìm kiếm CSS Grid và ngay lập tức được xem các trình duyệt khác nhau và phiên bản của chúng hỗ trợ nó. Vì vậy, trước khi triển khai CSS Grid trên trang web của mình, tôi có ý tưởng về các trình duyệt mà nó hoạt động.

Tạo trang Web đáp ứng

Thế giới đa thiết bị mà chúng ta đang sống đòi hỏi các nhà phát triển web như chúng ta phải ưu tiên khả năng phản hồi.

Chúng ta có thể sử dụng bố cục linh hoạt, hình ảnh linh hoạt và truy vấn phương tiện để đảm bảo trang web của chúng ta thích ứng với mọi kích thước màn hình. Hiệu ứng gợn sóng của việc phản hồi đúng là khả năng tương thích trên nhiều trình duyệt, khả năng truy cập và trải nghiệm người dùng nâng cao.

Thực hiện kiểm tra trên nhiều trình duyệt

Kiểm tra đã trở thành một từ thông dụng trong lập trình gần đây, nhưng điều này là do việc đảm bảo mã bạn viết hoạt động như mong đợi là rất quan trọng.

Tuy nhiên, nó không chỉ là kiểm tra xem mã TypeScript của bạn có chạy trơn tru hay không. Ngay cả các dự án web đơn giản hơn cũng cần được kiểm tra kỹ lưỡng.

Kiểm tra trên nhiều trình duyệt có nghĩa là thử nghiệm các trang web của bạn trên nhiều trình duyệt và thiết bị khác nhau để đảm bảo rằng chúng trông và hoạt động nhất quán trên bảng.

Kết luận

Khả năng tương thích trên nhiều trình duyệt có thể là một cụm từ khó phát âm. Tuy nhiên, như chúng ta đã thấy, điều cần thiết là phải xem xét khi xây dựng trang web. Và bạn có thể dần dần làm cho trang web của mình tương thích bằng cách kiểm tra và tinh chỉnh mã của mình và thực hiện một số trong số năm phương pháp hay nhất mà chúng ta đã thảo luận ở trên.

Vì vậy, trước khi bạn khép lại trang web hoặc ứng dụng web tiếp theo của mình, hãy nhớ kiểm tra xem người dùng của bạn trên Chrome, Firefox, Safari và các trình duyệt khác có nhìn thấy và trải nghiệm những điều tương tự hay không. Cảm ơn các bạn đã theo dõi.

development