Reset CSS, một khái niệm rất cần thiết nhưng liệu bạn đã biết?

Reset CSS là gì?

Reset CSS ám chỉ đến việc thiết lập hiển thị thống nhất cho các phần tử HTML trên các trình duyệt khác nhau. Tức là phải đảm bảo chúng về một khuôn mẫu chung để đảm bảo tính nhất quán. Nghe có vẻ mơ hồ vì tại sao ta lại phải cần đến Reset CSS?

Mặc định các trình duyệt đã có sự khác biệt

Nếu bạn để ý kỹ một chút, khi chưa có CSS, nội dung của trang tài liệu HTML sẽ có một khoảng cách nhất định so với trình duyệt. Điều này là do mặc định các trình duyệt sẽ quy định (User Agent Stylesheet) khoảng cách nhất định của thẻ body so với trình duyệt. Giá trị này thông thường là 8px nên vấn đề như trên mới xảy ra. Không chỉ đối với thẻ body, mà hầu hết các thẻ như p, blockquote, h1 – h6,… đều phải chịu chung số phận. Điều này ít nhiều sẽ làm ảnh hưởng không nhỏ đến việc trang trí, và bố cục của trang web giữa các trình duyệt với nhau.

Reset CSS sẽ khắc phục bằng cách thiết lập hiển thị cho các thẻ về thời nguyên thủy (điểm 0). Tức là tạo điểm khởi đầu giống nhau cho việc hiển thị giao diện trên tất cả các trình duyệt. Điều này giúp cho bạn dễ dàng trang trí cho web giống như ý muốn của mình. Vậy làm cách nào để sử dụng CSS Reset?

Khởi đầu

Bản chất của Reset CSS là loại bỏ tất cả khoảng cách của các thẻ HTML. Vì thế khi thuật ngữ này ra đời, người ta nghĩ ngay đến việc sử dụng Universal Selector. Cú pháp hết sức đơn giản như sau:

* {
padding: 0;
margin: 0;
}

Tuy nhiên, cách này có nhược điểm là nó không đáp ứng được đầy đủ hết tất cả các trường hợp. Ngoài ra còn liên quan đến vấn đề hiệu suất (mặc dù không đáng kể) nếu như trang web có đến hàng ngàn thẻ. Đặc biệt hơn là nó làm mất đi tính kế thừa của thẻ (inheritance). Do áp style mặc định lên tất cả các thẻ mà trong một số trường hợp ta không cần phải loại bỏ khoảng cách cho thẻ đó.

Vì thế, các phiên bản CSS Reset đã được nghiên cứu và cho ra đời nhằm đảm nhiệm vị trí đó. Có thể kể đến như YUI Reset, Normalize.css, HTML5 Doctor, Reset CSS 2.0 by Eric Meyer,… Các bạn có thể tham khảo và chọn cho mình một bộ Reset CSS để sử dụng riêng tại đây.

Normalize.css

Tuy Normalize.css không hẳn được gọi là CSS Reset. Lý do là nó chỉ xóa bỏ sự khác biệt về style giữa các trình duyệt chứ không xóa đi hoàn toàn định dạng của các thẻ HTML. Nhưng chúng ta có thể sử dụng nó như CSS Reset vì tính năng cũng gần như là tương tự. Bạn có thể xem document chi tiết của nó tại đây.

Đây là một tập tin CSS được viết nhằm reset các thẻ HTML dành cho các trang web hiện đại sử dụng HTML5. Vì thế hiện tại nó có mặt trong khá nhiều dự án và được đông đảo các developer tin dùng. Do đó, bạn cũng không cần phải ngại ngùng khi sử dụng nó. Hiện tại bạn có thể download và mổ xẻ nó tại đây. Nhớ là đặt normalize.css ở vị trí đầu tiên trong project của mình các bạn nhé.

Kết luận

Với những bạn có kinh nghiệm, các bạn cũng có thể tự tạo CSS Reset cho riêng mình. Miễn sao nó phù hợp với dự án của mình là được. Tuy nhiên sử dụng các file CSS Reset sẵn có cũng là một lựa chọn không tồi. Nó đảm bảo tính nhanh gọn, sẵn có. Đặc biệt là các bạn mới bắt đầu làm quen với CSS.