Khi xây dựng trang web, bạn có thể dễ dàng phát triển tầm nhìn đường hầm và chỉ xây dựng cho chính 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 cũng như giao diện của mọi thứ trên trình duyệt ưa thích của bạn. Điều này có thể 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 giữa nhiều trình duyệt, tập trung vào các thành phần giao diện người dùng cụ thể như thành phần 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 chung hay nhất mà mọi nhà phát triển web nên áp dụng.
“Hãy nhớ rằng bạn không phải là người dùng của mình — chỉ vì trang web của bạn hoạt động trên MacBook Pro hoặc Galaxy Nexus cao cấp không có nghĩa là nó sẽ hoạt động với tất cả người dùng của bạn!” – Tài liệu web MDN
Mục lục
- Khả năng tương thích giữa nhiều trình duyệt là gì?
- Các vấn đề và giải pháp phổ biến trên nhiều trình duyệt
- Các phương pháp hay nhất để tương thích giữa nhiều trình duyệt
- Kết luận
Nói một cách đơn giản, khả năng tương thích giữa nhiều trình duyệt là đảm bảo rằng trang web của bạn mang lại trải nghiệm nhất quán, hàng đầu cho tất cả người dùng, bất kể lựa chọn trình duyệt của họ là gì.
Các trình duyệt sử dụng các công cụ khác nhau nên theo mặc định, chúng hiển thị các trang web khác nhau. Để trang web của bạn có giao diện và hoạt động giống nhau bất kể trình duyệt của người dùng là gì, bạn cần có sự hiểu biết về các khả năng độc đáo của trình duyệt.
Khả năng tương thích giữa nhiều trình duyệt cho biết lý tưởng nhất là một trang web phải 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 công cụ Blink), Firefox (được hỗ trợ bởi công cụ Gecko) hay thậm chí Safari (được hỗ trợ bởi công cụ 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 – nhiều người dùng có thể truy cập trang web của bạn 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 thố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ó thứ hạng cao hơn nhờ thân thiện với người dùng hơn.
Các vấn đề và giải pháp phổ biến trên nhiều trình duyệt
Đồ họa thông tin hiển thị kết quả kiểm tra của một trang web trên các trình duyệt khác nhau. Tín dụng hình ảnh Browserstack
Thành phần biểu mẫu
Sự xuất hiện và 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 chuột, tập trung và nhập).
Ví dụ:văn bản giữ chỗ trong <input> các trường có thể mờ hơn trong một trình duyệt và rõ ràng hơn trong một 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 để chuẩn hóa hình thức của các thành phần biểu mẫu nhiều nhất có thể.
- Đối với phần giữ chỗ, hãy đảm bảo độ tương phản và mức độ 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;
}
Mã CSS ở trên nhắm mục tiêu văn bản giữ chỗ trong các trường nhập trên các trình duyệt, đặt màu của chúng thành #909090 và đảm bảo độ mờ hoàn toàn để có khả năng hiển thị nhất quán (với các quy tắc cụ thể dành cho Microsoft Edge).
Phông chữ
Phông chữ và kiểu chữ phải đối mặt với một số vấn đề về khả năng tương thích giữa nhiều trình duyệt, từ việc thay đổi kích thước phông chữ mặc định cho đến sự khác biệt trong công cụ hiển thị phông chữ. Điều này có thể ảnh hưởng đến độ dày, khoảng cách và hình thức tổng thể của văn bản.
Phông chữ có thể trông mỏng hơn và giãn cách hơn trong Chrome so với Edge, ảnh hưởng đến khả năng đọc và tính nhất quán trong thiết kế.
Để giải quyết vấn đề này:
- Xác định kích thước phông chữ cơ bản trong CSS của bạn và sử dụng các đơn vị tương đối (như
emhoặcrem) để thay đổi kích thước văn bản như 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 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, nơi cung cấp khả năng tải phông chữ tương thích với nhiều trình duyệt:
<link href="<https://fonts.googleapis.com/css?family=Open+Sans&display=swap>" rel="stylesheet">
- 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 tôi, bất kể trình duyệt. Nó thực hiện điều này trước tiên bằng cách sử dụng một phiên bản phông chữ có thể đã có trên máy tính của chúng tôi để tải mọi thứ nhanh hơn. Nếu không, nó lấy nó từ internet nhưng đổi sang phông chữ mặc định trong khi chờ phông chữ sau 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');
}
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 lại 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 đều áp dụng các khả năng tương tự. Nhưng vẫn có một số khác biệt trong cách tiếp cận:
Dành cho Chrome, Edge và Firefox , bạn có thể sử dụng CSS scrollbar-width và scrollbar-color Properties để 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 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ợ tiêu chuẩn đó.
/* For Chrome, Firefox, and Edge */
scrollbar-width: thin;
scrollbar-color: #c0c0c0 #f0f0f0;
Dành cho Safari , sử dụng công cụ kết xuất WebKit, bạn sẽ cần sử dụng ::-webkit-scrollbar phần tử giả để đạ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 */
}
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ó 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 tác động tiêu cực đến thiết kế của bạn.
Các phương pháp hay nhất để tương thích giữa nhiều trình duyệt
Đồ họa thông tin hiển thị các công cụ đo lường. Nguồn hình ảnh Creative Bloq
Xác định loại tài liệu
Bắt đầu tài liệu HTML của bạn bằng <!DOCTYPE> khai báo để đả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ế độ kỳ quặc" - nơi trình duyệt cho 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 vì các tiêu chuẩn web hiện đại không được áp dụng đầy đủ.
Một <!DOCTYPE> khai báo trong HTML5 trông như thế này ở phần đầu của tệp HTML của bạn:
<!DOCTYPE html>
Sử dụng Đặt lại CSS
Đặt lại CSS về cơ bản là thêm một bộ quy tắc nhắm vào các thành phần phổ biến để loại bỏ kiểu 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 thành phần HTML – lề, phần đệm, kích thước phông chữ, v.v. Vì vậy, việc triển khai đặt lại CSS sẽ đảm bảo rằng chỉ những kiểu bạn viết trong mã mới 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 nhiều trình duyệt khác nhau.
Có những nhà phát triển thích viết từ đầu. Và có những người khác giống như tôi, sử dụng CSS reset phổ biến và miễn phí của Eric Meyer như bạn có thể thấy trong đoạn 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 nhà phát triển khác sử dụng Normalize.css mà bạn có thể cài đặt bằng trình quản lý gói như npm rồi nhập nó vào CSS của mình.
npm install normalize.css
Xem lại 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 tính tương thích của chúng trên các trang web như Tôi có thể sử dụng không. Ở đó, 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à thời điểm triển khai các biện pháp 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 thấy các trình duyệt khác nhau cũng như các 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.
Khả năng tương thích của trình duyệt với CSS Grid.
Tạo trang web đáp ứng
Thế giới đa thiết bị mà chúng ta hiện đang sống đòi hỏi, với tư cách là nhà phát triển web, chúng ta phải ưu tiên khả năng phản hồi.
Chúng tôi 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 tôi thích ứng với mọi kích thước màn hình. Tác động lan tỏa của việc có được khả năng phản hồi phù hợp là khả năng tương thích giữa nhiều trình duyệt, khả năng truy cập và trải nghiệm người dùng nâng cao.
Đây là bài viết thảo luận về một số phương pháp hay nhất cho thiết kế đáp ứng và cách triển khai chúng.
Thực hiện kiểm tra trên nhiều trình duyệt
Gần đây, kiểm thử đã trở thành một từ thông dụng trong lập trình, 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.
Thử nghiệm trên nhiều trình duyệt có nghĩa là thử 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 chúng trông và hoạt động nhất quán trên mọi thiết bị.
Kết luận
Khả năng tương thích giữa nhiều trình duyệt có thể khó phát âm. Nhưng như chúng ta đã thấy, điều cần thiết là phải cân nhắc 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 thử nghiệm và điều chỉnh mã cũng như triển khai một số trong năm phương pháp hay nhất mà chúng tôi đã thảo luận ở trên.
Vì vậy, trước khi bạn giới thiệu 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 trên Chrome, Firefox, Safari và các trình duyệt khác có đang nhìn thấy và trải nghiệm những điều tương tự hay không.
Dưới đây là một số tài nguyên hữu ích:
- Tài liệu web MDN về khả năng tương thích trên nhiều trình duyệt
- Bảng mã về tầm quan trọng của khả năng tương thích giữa nhiều trình duyệt
- Eric Meyer về Đặt lại CSS
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu