Tìm hiểu CSS Reset và Normalize.css

Mỗi trình duyệt đều có một kiểu style mặc định sẵn và không phải tất cả là giống nhau. Bạn đã sắp xếp layout thật đẹp trên trình duyệt này rồi nhưng khi xem ở một trình duyệt khác thì layout bị vỡ hoặc xuất hiện các "lệch lạc" không như mong đợi. Sự không đồng nhất trong việc hiển thị HTML của các trình duyệt thường được giải quyết bằng cách sử dụng CSS Reset hay Normalize.css. Nếu chưa quen thuộc với các khái niệm này, bài viết sau sẽ cho bạn một cái nhìn tổng quan cũng như áp dụng chúng.


Tìm hiểu CSS Reset và Normalize.css

Giới thiệu CSS Reset

Bản chất của CSS Reset là ghi đè lên style mặc định của trình duyệt. CSS Reset sẽ đưa các thiết lập mặc định về "zero", điều này giúp tạo một điểm khởi đầu giống nhau cho việc hiển thị giao diện website trên các trình duyệt. Tất nhiên, điều này cũng đòi hỏi bạn phải dành thời gian để định nghĩa lại các thiết lập theo thiết kế giao diện của bạn để có được layout hoàn hảo.

Một trong những CSS Reset đơn giản nhất là Universal Selector, chỉ đơn giản loại bỏ tất cả margin và padding của mọi thẻ HTML. CSS Reset này chỉ gồm 1 dòng CSS như sau:

*{margin:0;padding:0}

Tuy nhiên phương pháp này không có hiệu suất tốt và không đáp ứng đầy đủ các trường hợp. Vì vậy, một số phiên bản CSS Reset khác đã được nghiên cứu và sử dụng khá phổ biến hiện nay như:

  1. Eric Meyer’s
  2. HTML5 Doctor
  3. Yahoo! (YUI 3)
  4. Normalize.css

Normalize.css

Normalize.css là một CSS Reset nhưng khác so với với các CSS Reset khác. Thay vì "xóa hoàn toàn" định dạng của các thẻ HTML, Normalize.css chỉ xóa bỏ sự khác biệt về style giữa các trình duyệt. Như vậy, các style mặc định của mỗi thẻ HTML sẽ được giữ lại và bạn không phải định nghĩa lại hết các thuộc tính cho chúng.

Các CSS Reset phổ biến

Nếu đủ thời gian và kiên nhẫn, bạn có thể dễ dàng tạo ra CSS Reset riêng. Tuy nhiên, đơn giản hơn bạn có thể sử dụng ngay những CSS Reset phổ biến được cung cấp sẵn. Tất cả CSS Reset phổ biến bạn đều có thể tìm thấy được tại cssreset.com.

Việc chọn lựa bản CSS Reset (bao gồm cả Normalize.css) thường dựa theo từng loại dự án mà bạn làm. Nhiều người chọn việc tạo một CSS Reset riêng dựa trên kinh nghiệm nhiều năm. Một số người lại thấy thoải mái với việc không sử dụng CSS Reset và chấp nhận sự khác biệt không đáng kể giữa các trình duyệt.

Đây là vài gợi ý để bạn dễ dàng lựa chọn CSS Reset:

  • Nếu bạn làm việc với HTML5, dùng HTML5 Doctor Reset CSS.
  • Nếu bạn làm một trang cơ bản và test, hoặc một trang không dùng HTML5 thì dùng Eric Meyer’s Reset CSS.
  • Nếu bạn cần một CSS Reset hoạt động như một framework, có các style được tạo sẵn sau khi reset thì dùng Tripoli CSS Reset hay Vanilla CSS Un-Reset.
  • Nếu bạn cần một CSS framework đầy đủ chức năng, hãy tìm hiểu và sử dụng YUI 3 CSS Libary.
  • Bạn cũng có thể dùng Universal Selector CSS Reset nhưng sẽ cực hơn so với các lựa chọn khác đấy nhé.

Nên đọc tiếp