Kiểm tra khả năng tương thích của trình duyệt Mã HTML

Tính năng Kiểm tra tính tương thích của trình duyệt (BCC) giúp bạn định vị các tổ hợp HTML và CSS gặp sự cố trong một số trình duyệt nhất định. Khi bạn chạy BCC trên một tệp đang mở, Dreamweaver sẽ quét tệp và báo cáo mọi sự cố kết xuất CSS tiềm ẩn trong bảng Kết quả. Xếp hạng độ tin cậy, được biểu thị bằng một phần tư, một nửa, ba phần tư hoặc vòng tròn được lấp đầy hoàn toàn, cho biết khả năng xảy ra lỗi (vòng tròn được lấp đầy một phần tư biểu thị khả năng xảy ra và vòng tròn được lấp đầy hoàn toàn biểu thị khả năng xảy ra rất cao). Đối với mỗi lỗi tiềm ẩn mà nó tìm thấy, Dreamweaver cũng cung cấp liên kết trực tiếp đến tài liệu về lỗi trên Adobe CSS Advisor, một trang web trình bày chi tiết các lỗi kết xuất trình duyệt phổ biến và cung cấp giải pháp khắc phục chúng

Theo mặc định, tính năng BCC kiểm tra các trình duyệt sau. Firefox 1. 5; . 0 và 7. 0; . 2; . 0; . 0 và 9. 0; . 0

Tính năng này thay thế tính năng Kiểm tra trình duyệt mục tiêu cũ, nhưng vẫn giữ lại chức năng CSS của tính năng đó. Nghĩa là, tính năng BCC mới vẫn kiểm tra mã trong tài liệu của bạn để xem liệu có bất kỳ thuộc tính hoặc giá trị CSS nào không được trình duyệt mục tiêu của bạn hỗ trợ hay không

Trong bài viết này, chúng ta sẽ nói thêm một chút về tầm quan trọng của kiểm tra trình duyệt chéo. Sau đó, chúng tôi sẽ thực hiện một số bước để giúp bạn tạo một trang web tương thích với nhiều trình duyệt. Cùng bắt tay vào làm

Tại sao khả năng tương thích giữa các trình duyệt lại quan trọng?

Hầu hết mọi người sử dụng các trình duyệt nổi tiếng, chẳng hạn như Google Chrome, Safari, Firefox và Opera. Tuy nhiên, có rất nhiều tùy chọn có sẵn hơn bạn có thể tưởng tượng. Điều này tốt cho người tiêu dùng, nhưng vấn đề cho bạn là mỗi trình duyệt được xây dựng khác nhau. Điều đó có nghĩa là trang web của bạn có thể hoạt động hoàn hảo trên Chrome, nhưng gặp sự cố trên Firefox (chỉ để đưa ra một ví dụ)

Theo kinh nghiệm của chúng tôi, hầu hết các lỗi bạn sẽ thấy trong một trình duyệt nhưng không phải trong một trình duyệt khác là những vấn đề tương đối nhỏ. Một yếu tố cụ thể của trang web của bạn có thể không phù hợp hoặc một tính năng cụ thể có thể không hoạt động chính xác. Mặc dù những sự cố này có thể không đáng kể nhưng chúng cần được giải quyết nếu bạn muốn cung cấp trải nghiệm giống nhau cho tất cả khách truy cập trang web của mình

Lý tưởng nhất là bạn sẽ muốn thiết kế trang web của mình tương thích với nhiều trình duyệt ngay từ đầu. Bằng cách đó, bạn sẽ không có nguy cơ xa lánh người dùng của bất kỳ trình duyệt cụ thể nào. Trong một vài phần tiếp theo, chúng tôi sẽ chỉ cho bạn cách thực hiện điều đó

Cách tạo một trang web tương thích với nhiều trình duyệt

Ý tưởng tạo một trang web tương thích với nhiều trình duyệt nghe có vẻ khó khăn. Tuy nhiên, một vài bước đơn giản có thể đảm bảo rằng trang web của bạn hoạt động hoàn hảo trên hầu hết các trình duyệt. Hãy nói về những gì đó là

Bước 1. Đặt 'Doctype' cho tệp HTML của bạn

Khi trình duyệt tải trang web của bạn, nó phải tìm ra phiên bản HTML bạn đang sử dụng. Điều này rất quan trọng vì các phiên bản HTML khác nhau chứa các quy tắc khác nhau.  

'doctype' là một tuyên bố cho các trình duyệt biết. “Này, đây là phiên bản HTML mà chúng ta sẽ sử dụng. ” Bằng cách đó, các trình duyệt sẽ không phải đưa ra bất kỳ dự đoán nào, điều này có thể làm giảm số lượng lỗi mà người dùng của bạn sẽ gặp phải

May mắn thay, bước này rất đơn giản. Tất cả những gì bạn phải làm là thêm đoạn mã sau vào tài liệu HTML của mình

“http://www.w3.org/TR/html4/strict.dtd">

Như bạn sẽ nhận thấy, đoạn mã này dành cho phiên bản 4. 01 của HTML. Nếu bạn muốn sử dụng HTML5 thay thế, bạn có thể sử dụng mã này


Vấn đề là một số trình duyệt vẫn không chơi tốt với HTML5. Mặc dù có nhiều cải tiến nhưng việc sử dụng nó có thể ảnh hưởng đến khả năng tương thích giữa nhiều trình duyệt, vì vậy bạn sẽ cần cân nhắc thực tế đó bên cạnh những lợi ích của nó

Bước 2. Sử dụng Quy tắc đặt lại CSS

Thông thường, CSS là thủ phạm chính gây ra lỗi tương thích trình duyệt. Đó là bởi vì mỗi trình duyệt có bộ quy tắc CSS riêng. Nói cách khác, CSS của trang web của bạn có thể hiển thị khác nhau tùy thuộc vào trình duyệt mà khách truy cập của bạn sử dụng

Một cách để giải quyết vấn đề này là sử dụng 'thiết lập lại CSS'. Đây là các bộ quy tắc bạn có thể thêm vào trang web của mình, đặt cơ sở cho cách CSS hoạt động trên các trình duyệt

Có một số tùy chọn khi đặt lại CSS, nhưng một trong những tùy chọn yêu thích của chúng tôi được gọi là Chuẩn hóa. css, do mức độ toàn diện của nó

Bạn có thể tải xuống chuẩn hóa. css từ thư viện GitHub của nó và sử dụng nó làm điểm bắt đầu cho CSS trang web của bạn. Điều này sẽ giúp bạn tối đa hóa khả năng tương thích giữa các trình duyệt trên trang web của mình

Bước 3. Sử dụng các thư viện và khung tương thích với nhiều trình duyệt

Các thư viện JavaScript và các framework rộng lớn như Foundation và Bootstrap ngày nay cực kỳ phổ biến. Nếu bạn định sử dụng các yếu tố như vậy để xây dựng trang web của mình, bạn có thể tiết kiệm cho mình rất nhiều vấn đề đau đầu bằng cách sử dụng các tùy chọn thân thiện với nhiều trình duyệt

Một số thư viện và khung được phát triển từ đầu để hoạt động với nhiều trình duyệt nhất có thể. Nói chung, hầu hết các khung phổ biến - bao gồm cả hai khung chúng tôi vừa đề cập - được xây dựng để tương thích với nhiều trình duyệt nhất có thể.  

Tuy nhiên, để đảm bảo an toàn, hãy nhớ kiểm tra tài liệu về bất kỳ thư viện hoặc khung nào bạn định sử dụng. Trong hầu hết các trường hợp, bạn sẽ dễ dàng tìm thấy thông tin về khả năng tương thích giữa nhiều trình duyệt. Ví dụ: đây là trang tương thích của Foundation từ tài liệu của nó

Một nghiên cứu nhỏ sẽ giúp bạn cung cấp trải nghiệm tuyệt vời cho tất cả khách truy cập, không chỉ những người sử dụng một trình duyệt cụ thể

Kiểm tra trình duyệt chéo

Ngay cả khi bạn đã nỗ lực tạo một trang web tương thích với nhiều trình duyệt, bạn vẫn nên kiểm tra và xem mọi thứ có hoạt động như bình thường không. Quá trình đó tương đối đơn giản – tất cả những gì bạn phải làm là tải trang web của mình bằng nhiều trình duyệt và kiểm tra lỗi

Vấn đề là có rất nhiều trình duyệt ngoài kia. Để trang trải các cơ sở của bạn, chúng tôi khuyên bạn nên tập trung vào năm tùy chọn hàng đầu theo thị phần, đó là

  1. Google Chrome
  2. Cuộc đi săn
  3. firefox
  4. trình duyệt UC
  5. Ô-pê-ra

Bạn có thể nhận thấy rằng Microsoft Edge không có trong danh sách. Thị phần của nó ngày nay khá nhỏ, nhưng bạn vẫn nên đảm bảo rằng trang web của mình cũng hoạt động với nó

Tất nhiên, việc cài đặt năm hoặc sáu trình duyệt khác nhau trên máy tính của bạn có thể là một điều khó khăn. Đó là lý do tại sao có rất nhiều dịch vụ cho phép bạn tiến hành kiểm tra trực tuyến trên nhiều trình duyệt. Điều này đơn giản hóa rất nhiều quy trình và các khoản phí liên quan thường nhỏ

Đừng hy sinh trải nghiệm kỹ thuật số của bạn

Không phải tất cả khách truy cập trang web của bạn sẽ sử dụng cùng một trình duyệt. Điều này có nghĩa là nếu bạn muốn đảm bảo rằng mọi người dùng đều thích trang web của bạn, bạn sẽ cần thực hiện một số thử nghiệm trên nhiều trình duyệt

Tuy nhiên, hãy ghi nhớ – ngay cả khi trang web của bạn hoạt động hoàn hảo trên tất cả các trình duyệt, bạn vẫn cần sử dụng máy chủ lưu trữ web chất lượng hàng đầu nếu muốn cung cấp trải nghiệm kỹ thuật số tốt nhất có thể. Với WP Engine, bạn sẽ có được hiệu suất đáng kinh ngạc và khả năng tiếp cận hỗ trợ cấp chuyên gia, vì vậy hãy xem các kế hoạch của chúng tôi

Kiểm tra khả năng tương thích của trình duyệt Mã HTML

tham gia 1. 5 triệu trang web tin tưởng WP Engine làm máy chủ lưu trữ WordPress của họ

Xem kế hoạch của chúng tôi

bài viết liên quan

  • Cách kiểm tra trang web đúng cách
  • Cách tạo bảng giá trong WordPress
  • Làm thế nào để. Bộ nhớ đệm trình duyệt WordPress
  • JavaScript cho WordPress
  • Cách kiểm tra hiệu suất trang web WordPress

Đặt mua

Nhận các mẹo, thủ thuật và tin tức WordPress hàng tuần được gửi đến hộp thư đến của bạn

Địa chỉ email

Nộp

Trang web này được bảo vệ bởi reCAPTCHA và áp dụng Chính sách bảo mật và Điều khoản dịch vụ của Google. Tìm hiểu thêm về Chính sách quyền riêng tư của WP Engine

Làm cách nào để kiểm tra xem trang web của tôi có tương thích với trình duyệt không?

BrowserStack Live là công cụ kiểm tra trình duyệt và ứng dụng dành cho thiết bị di động. Bạn có thể kiểm tra trang web của mình trên hơn 2000 trình duyệt, do đó làm cho nó trở thành một trong những bài kiểm tra khả năng tương thích trình duyệt toàn diện. Bạn có thể kiểm tra trang web của mình trên thiết bị thực Android và iOS bằng nền tảng đám mây của họ.

Làm cách nào để làm cho tệp HTML tương thích với tất cả các trình duyệt?

Làm cách nào để trang web tương thích với mọi trình duyệt? .
Sử dụng trình giả lập trình duyệt trên thiết bị di động/máy tính để bàn cho từng trình duyệt
Thiết lập phòng thí nghiệm thiết bị tại chỗ
Sử dụng nền tảng dựa trên đám mây cho phép bạn thực hiện kiểm tra trình duyệt chéo trên các trình duyệt được cài đặt trên thiết bị thực

HTML có được hỗ trợ bởi tất cả các trình duyệt không?

HTML5 hiện tương thích với tất cả các trình duyệt phổ biến (Chrome, Firefox, Safari, IE9 và Opera) và với sự ra đời của DOCTYPE, thậm chí có thể có một vài HTML .

Làm cách nào bạn có thể biết liệu một trang web có tuân thủ HTML5 hay không?

Bạn có thể sử dụng công cụ Trình xác thực HTML5 để xác minh mức độ hỗ trợ của trang web đối với HTML5. Có nhiều công cụ xác thực có sẵn trực tuyến, nhưng tất cả chúng đều phải tuân thủ các thông số kỹ thuật HTML5 mới nhất. Một công cụ như vậy do W3C sản xuất được gọi là Dịch vụ xác thực đánh dấu W3C, tại http. // trình xác thực. w3. tổ chức.