Sau khi hoàn thành phần HTML5 Enterprise, chúng ta đã có thể xây dựng cấu trúc website chuẩn. Tuy nhiên, nếu mở cùng một trang trên Chrome, Firefox, Edge hoặc Safari, bạn sẽ thấy giao diện có thể không giống nhau.
Nguyên nhân là mỗi trình duyệt đều có một bộ CSS mặc định (User Agent Stylesheet) riêng.
Để giải quyết vấn đề này, lập trình viên thường bắt đầu dự án bằng CSS Reset.
🎯 Mục tiêu bài học
Sau bài này bạn sẽ:
Hiểu CSS Reset là gì.
Biết vì sao cần Reset CSS.
Phân biệt CSS Reset và Normalize CSS.
Tự xây dựng một bộ Reset hiện đại.
Chuẩn bị nền tảng cho Responsive Design và Design System.
CSS Reset là gì?
CSS Reset là tập hợp các quy tắc CSS giúp đưa tất cả các trình duyệt về một điểm xuất phát giống nhau.
Ví dụ:
Chrome có thể đặt:
body {
margin: 8px;
}
Trong khi trình duyệt khác có thể xử lý khoảng cách hoặc kích thước mặc định khác nhau.
Điều này khiến cùng một mã HTML hiển thị không đồng nhất.
