Buy Me a Coffee

Về mặt lý thuyết, việc xây dựng một Website khá đơn giản. Chúng ta xây dựng cấu trúc trang sử dụng HTML, định dạng bằng CSS, test trên trình duyệt sau đó upload lên host để trang web của chúng ta được mọi người biết đến. Do đó, việc tương thích đa trình duyệt là hết sức quan trọng.

Trên thực tế thì mọi việc không hề đơn giản như chúng ta nghĩ. Các trình duyệt hiển thị HTML và CSS khác nhau, trong khi một số trình duyệt hiển thị không đúng chuẩn.

Việc xây dựng website để chúng hiển thị giống nhau trên các trình duyệt thường được gọi là tương thích trình duyệt (đa trình duyệt). Trong bài viết này chúng ta cùng khám phá các mẹo hữu ích để xây dựng website đa trình duyệt.

1. Xây dựng cấu trúc rõ ràng

Khi mã HTML và CSS càng lớn thì việc xảy ra lỗi càng trở lên nhiều hơn. Do đó, không nên sử dụng quá nhiều thẻ lồng nhau không cần thiết trong mã HTML và sử dụng thẻ đánh dấu phù hợp. Ví dụ, sử dụng ul và li để tạo menu thay vì dùng bảng hoặc các thẻ đánh dấu khác.

Tất cả style nên đặt ở file CSS bên ngoài và dẫn link vào từ file HTML. Dùng HTML để xây dựng cấu trúc trang web không phải định dạng style.

2. Validate HTML/CSS

Validate HTML và CSS trước khi upload lên host. Valid code không thể khiến website của bạn tương thích đa trình duyệt, nhưng invalid code có thể gây ra lỗi không mong muốn và khó debug.

Bạn dùng W3C HTML Validator và CSS Validator để validate HTML cũng như CSS. Bạn cũng có thể sử dụng plugins trên trình duyệt như Html Validator Firefox add-on để validate tự động trong khi bạn đang mở chúng bằng trình duyệt.

3. Sử dụng reset CSS

Hầu hết các trình duyệt có các giá trị mặc định cho padding, margin, line-height… Những giá trị mặc định này có thể ảnh hưởng tới những quy tắc CSS của bạn. Bạn phải lặp đi lặp lại nhiều lần những đoạn mã CSS nhàm chán để tạo website đa trình duyệt như margin:0; padding: 0;

Xem thêm: Cú pháp CSS

Để tránh sự lặp lại cũng như rắc rối mỗi lần viết CSS, bạn có thể sử dụng reset css đặt ở đầu file CSS của bạn. Reset CSS là việc chúng ta đưa tất cả các giá trị của các phần tử trên website về bằng 0 và xóa một số định dạng mặc định của trình duyệt. Hiện nay có 2 bộ reset css thông dụng đó là normalize.css và Reset CSS by Eric Meyer.

4. Develope trên Firefox

Hầu hết các Web developer có xu hướng test website của họ trên một trình duyệt mà họ dùng để phát triển website, sau đó test trên các trình duyệt phổ biến khác.

Theo cá nhân tôi cũng như các web developer khác khuyến cáo sử dụng Firefox để phát triển cũng như test website, sau đó testing website của chúng ta bằng các trình duyệt khác – đặc biệt là Internet Explore – để giải quyết vấn đề đa trình duyệt. Firefox là trình duyệt thân thiện với developer và phù hợp với tiêu chuẩn. Nếu trình duyệt của bạn hiển thị tốt trên Firefox thì nó cũng hiển thị tương tự trên Chorme, Opera và Safari.

Vấn đề hiển thị website trên Internet Explore luôn làm đau đầu các lập trình viên. Theo kinh nghiệm cá nhân của mình thì các bạn kiểm tra tính đa trình duyệt trên các trình duyệt chính và cuối cùng mới kiểm tra trên Internet Explore.

5. Sửa lỗi tương thích đa trình duyệt trên Internet Explore sử dụng conditional comments

Để website hiển thị tốt trên Internet Explore mà không dùng CSS hoặc JavaScript hack là điều không thể. Tuy nhiên đây là một sự thay thế. Bằng cách sử dụng IE-only markup với conditional comments, bạn có thể bổ sung HTML, CSS hoặc Javascript dành riêng cho IE khiến website hiển thị tốt hơn trên IE.

6. Cung cấp fallbacks

Trong khi hầu hết trình duyệt hỗ trợ Flash và JavaScript, và gần như tất cả hỗ trợ hình ảnh, chúng ta nên cung cấp dự phòng trong trường hợp những tính năng trên không hỗ trợ trên trình duyệt của người dùng.

• Hình ảnh: Chắc chắn rằng mỗi thẻ img chứa thuộc tình alt mô tả về hình ảnh.
• Flash movies: Không sử dụng Flash cho những phần quan trọng trên website như menu hoặc bạn có thể cung cấp non-Flash.
• JavaScript: Cố gắng không sử dụng JavaScript cho các chức năng quan trọng. Sử dụng thẻ noscript để cung cấp thay thế hoặc ít nhất là hiển thị thông báo yêu cầu người dùng bật JavaScript.

Kết luận:

Việc dành thêm chút thời gian để làm cho website của bạn hiển thị tốt trên nhiều trình duyệt là vấn đề cần thiết. Làm vậy bạn không chỉ tăng khả năng thu hút người dùng vào website của mình mà còn giữ được khách hàng. Hẹn gặp lại các bạn ở các bài viết khác. Chúc các bạn thành công!

Xem thêm: Dịch vụ thiết kế website