Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.
SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)
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.
Contents
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.
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.
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.
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.
Để 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.
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.
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
Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...
VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...
Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...
Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...
Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...
Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...
Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...
Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...
Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...
Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...