CSS Reset là gì?

CSS Reset là gì?

CSS Reset ám chỉ đến việc thiết lập hiển thị cho các phần tử HTML trên các trình duyệt khác nhau 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 CSS Reset?

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

CSS Reset 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) nhằm 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 nên khi thuật ngữ này ra đời, người ta nghĩ ngay đến việc sử dụng Universal Selector * với 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í đó 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: http://cssreset.com/

Normalize.css

Tuy Normalize.css không hẳn được gọi là CSS Reset do 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 bạn 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 (http://nicolasgallagher.com/about-normalize-css/).

Đâ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 nên hiện tại nó có mặt trong khá nhiều dự án và được động đảo các developer tin dùng vì thế 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 (http://necolas.github.io/normalize.css/), nhớ là đặt normalize.css ở vị trí đầu tiên trong project của mình các bạn nhé.

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.