Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

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í 15++ Năm (Từ 2006 đến Nay)

Các mẹo xây dựng website tương thích đa trình duyệt

5/5 - (8 bình chọn)

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.

Các mẹo xây dựng website tương thích đa trình duyệt feature-image

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 ulli để 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 ValidatorCSS 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.

Các mẹo xây dựng website tương thích đa trình duyệt validate_html-1024x520

Các mẹo xây dựng website tương thích đa trình duyệt validate_css-1024x505

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.cssReset CSS by Eric Meyer.

Các mẹo xây dựng website tương thích đa trình duyệt Css-Reset

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

Tin mới nhất

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...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

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...

Khách đang xem

  1. Có vẻ như một nửa số hướng dẫn trong Codex và cộng đồng viết blog (blogosphere) sử dụng query_posts() và nửa số...
    9 giây trước
  2. Làm việc với ngày tháng và thời gian đó là công việc phổ biến của người lập trình web. Trong...
    22 giây trước
  3. Google AMP HTML Accelerated Mobile Pages sử dụng cho WordPress thật dễ dàng và cung cấp sẵn cho người dùng...
    3 giây trước
  4. FreeLancer là gì? Người làm việc tự do, công việc tự do, triển khai dự án tự do, không vướng...
    5 giây trước
  5. Bài viết này là cập nhật mới nhất vào tháng 9/2017. Bao gồm rất nhiều blog mới và đặc biệt...
    3 giây trước
  6. Bootstrap inputs, ở bài trước chúng ta đã cùng nhau tìm hiểu những thẻ đầu vào (input) nào được bootstrap...
    7 giây trước
  7. Hướng dẫn cài đặt WordPress là bài đầu tiên trong những bài hướng dẫn sử dụng WordPress của mình. Mục...
    16 giây trước
  8. Trong chiến lược tiếp thị toàn diện và hiệu quả, có rất nhiều nhân tố được các chủ doanh nghiệp...
    15 giây trước
  9. Sau một thời gian nghiên cứu nhiều cách kiếm tiền online từ máy tính cho đến điện thoại (smartphone), có những...
    8 giây trước
  10. Sức mạnh thực sự của PHP cũng như các ngôn ngữ lập trình khác xuất phát từ các hàm của...
    1 giây trước