Sự khác biệt giữa Normalize.css và Reset CSS là gì?

Tôi biết CSS Reset là gì, nhưng gần đây tôi đã nghe về điều mới này được gọi là Normalize.css

Sự khác biệt giữa Normalize.css và Reset CSS là gì?

Sự khác biệt giữa bình thường hóa CSS và đặt lại CSS là gì?

Có phải nó chỉ là một từ buzz mới cho CSS Reset?

Tôi làm việc trên normalize.css.

Sự khác biệt chính là:

1. Normalize.css bảo tồn các mặc định hữu ích thay vì "hủy kết nối" mọi thứ. Ví dụ: các phần tử như suphoặc sub"chỉ hoạt động" sau khi bao gồm normalize.css (và thực sự được tạo ra mạnh mẽ hơn) trong khi chúng không thể phân biệt trực quan với văn bản thông thường sau khi bao gồm cả reset.css. Vì vậy, normalize.css không áp đặt điểm bắt đầu trực quan (đồng nhất) lên bạn. Điều này có thể không phù hợp với khẩu vị của mọi người. Điều tốt nhất để làm là thử nghiệm với cả hai và xem loại gel nào với sở thích của bạn.

2. Normalize.css sửa một số lỗi phổ biến nằm ngoài phạm vi của reset.css. Nó có phạm vi rộng hơn reset.css và cũng cung cấp sửa lỗi cho các vấn đề phổ biến như: cài đặt hiển thị cho các phần tử HTML5, thiếu tính fontkế thừa bởi các thành phần biểu mẫu, sửa lỗi font-sizekết xuất pre, tràn SVG trong IE9 và buttonlỗi kiểu dáng trong iOS.

3. Normalize.css không làm lộn xộn các công cụ dev của bạn. Một sự khó chịu phổ biến khi sử dụng reset.css là chuỗi thừa kế lớn được hiển thị trong các công cụ gỡ lỗi CSS của trình duyệt. Đây không phải là một vấn đề như vậy với normalize.css vì các kiểu dáng được nhắm mục tiêu.

4. Chuẩn hóa.css là mô-đun nhiều hơn. Dự án được chia thành các phần tương đối độc lập, giúp bạn dễ dàng loại bỏ các phần (như chuẩn hóa biểu mẫu) nếu bạn biết rằng trang web của bạn sẽ không bao giờ cần đến chúng.

5. Normalize.css có tài liệu tốt hơn. Mã normalize.css được ghi lại thành dòng cũng như toàn diện hơn trong GitHub Wiki . Điều này có nghĩa là bạn có thể tìm hiểu từng dòng mã đang làm gì, tại sao nó được đưa vào, sự khác biệt giữa các trình duyệt và dễ dàng chạy thử nghiệm của riêng bạn hơn. Dự án nhằm mục đích giúp giáo dục mọi người về cách trình duyệt hiển thị các yếu tố theo mặc định và giúp họ dễ dàng tham gia vào việc gửi các cải tiến.

Tôi đã viết chi tiết hơn về điều này trong một bài viết về normalize.css

Sự khác biệt chính là:

• Đặt lại CSS nhằm mục đích loại bỏ tất cả các kiểu trình duyệt tích hợp. Các yếu tố tiêu chuẩn như H1-6, p, strong, em, et cetera cuối cùng trông giống hệt nhau, không có trang trí nào cả. Sau đó, bạn nên thêm tất cả các trang trí cho mình.

• Chuẩn hóa CSS nhằm mục đích làm cho kiểu dáng trình duyệt tích hợp nhất quán trên các trình duyệt. Các yếu tố như H1-6 sẽ xuất hiện đậm, lớn hơn et cetera một cách nhất quán trên các trình duyệt. Sau đó, bạn chỉ cần thêm sự khác biệt trong trang trí nhu cầu thiết kế của bạn.

Nếu thiết kế của bạn a) tuân theo các quy ước chung cho typography et cetera và b) Normalize.css hoạt động cho đối tượng mục tiêu của bạn, thì sử dụng Normalize.CSS thay vì thiết lập lại CSS sẽ giúp CSS của bạn nhỏ hơn và nhanh hơn để viết.

Normalize.css chủ yếu là một tập hợp các kiểu, dựa trên những gì tác giả của nó nghĩ sẽ trông tốt và làm cho nó trông nhất quán trên các trình duyệt. Về cơ bản, thiết lập lại dải kiểu dáng từ các yếu tố để bạn có quyền kiểm soát nhiều hơn đối với kiểu dáng của mọi thứ.

Tôi sử dụng cả hai.

Một số kiểu từ Reset, một số từ Normalize.css. Ví dụ: từ Normalize.css, có một kiểu để đảm bảo tất cả các thành phần đầu vào có cùng một phông chữ, điều này không xảy ra (giữa các kiểu nhập văn bản và textareas). Đặt lại không có kiểu như vậy, vì vậy đầu vào có các phông chữ khác nhau, điều mà thông thường không muốn.

Vì vậy, về cơ bản, sử dụng hai tệp CSS thực hiện công việc 'Cân bằng' mọi thứ tốt hơn;)

Trân trọng!

Đầu tiên reset.csslà thư viện tồi tệ nhất bạn có thể sử dụng, bởi vì nó loại bỏ cấu trúc tiêu chuẩn của HTML và hiển thị mọi thứ bạn viết giống như văn bản, sau khi gán các giá trị của phần đệm lề và các thuộc tính khác 0. Vì vậy, ví dụ bạn sẽ thấy rằng <H1>, sẽ giống như <H6>.

Mặt khác Normalize.csssử dụng cấu trúc tiêu chuẩn và cũng sửa hầu hết các lỗi hiện có trong nó. Ví dụ, nó khắc phục vấn đề bằng cách hiển thị một biểu mẫu từ trình duyệt này sang trình duyệt khác. Bình thường hóa sửa lỗi này bằng cách sửa đổi các tính năng này để các yếu tố của bạn sẽ được hiển thị giống nhau trên tất cả các trình duyệt.

Theo mô tả của nó, có vẻ như nó cố gắng làm cho kiểu mặc định của tác nhân người dùng nhất quán trên tất cả các trình duyệt thay vì tước bỏ mọi kiểu dáng mặc định như thiết lập lại.

Giữ nguyên các mặc định hữu ích, không giống như nhiều bộ CSS.

Đặt lại dường như là một điều cần thiết để đáp ứng các thông số kỹ thuật thiết kế tùy chỉnh, đặc biệt là trên các dự án thiết kế kiểu phức tạp, không nồi hơi. Nghe có vẻ như bình thường hóa là một cách tốt để tiến hành lập trình web hoàn toàn trong tâm trí, nhưng các trang web thông thường là một cuộc hôn nhân giữa lập trình web và quy tắc thiết kế UI / UX.

Đôi khi, giải pháp tốt nhất là sử dụng cả hai. Đôi khi, nó là để sử dụng không. Và đôi khi, nó là để sử dụng cái này hay cái khác. Nếu bạn muốn tất cả các kiểu, bao gồm đặt lại lề và đệm trên tất cả các trình duyệt, hãy sử dụng reset.css. Sau đó áp dụng tất cả các trang trí và tạo kiểu cho mình. Nếu bạn chỉ đơn giản thích các kiểu dáng tích hợp nhưng muốn đồng bộ nhiều trình duyệt hơn tức là chuẩn hóa thì hãy sử dụng normalize.css. Nhưng nếu bạn chọn sử dụng cả reset.css và normalize.css, trước tiên hãy liên kết biểu định kiểu reset.css và sau đó là biểu định kiểu normalize.css (ngay lập tức) sau đó. Đôi khi không phải lúc nào cũng tốt hơn, nhưng khi nào nên sử dụng cái nào so với khi nào nên sử dụng cả hai so với khi nào không sử dụng. IMHO.

Câu hỏi này đã được trả lời nhiều lần, tôi sẽ tóm tắt ngắn gọn cho mỗi câu hỏi, một ví dụ và thông tin chi tiết vào tháng 9 năm 2019:

• Normalize.css - như tên cho thấy, nó bình thường hóa các kiểu trong trình duyệt cho các tác nhân người dùng của họ, nghĩa là làm cho chúng giống nhau trên tất cả các trình duyệt do lý do mặc định chúng hơi khác nhau.

Ví dụ : <h1>thẻ bên trong <section>theo mặc định Google Chrome sẽ làm cho nhỏ hơn kích thước của <h1>thẻ "dự kiến" . Mặt khác, Microsoft Edge đang tạo ra kích thước "mong đợi" của <h1>thẻ. Chuẩn hóa.css sẽ làm cho nó phù hợp.

Trạng thái hiện tại : kho lưu trữ npm cho thấy gói normalize.css hiện có hơn 500 nghìn lượt tải mỗi tuần. Sao GitHub trong dự án của kho lưu trữ là hơn 36k.

• Đặt lại CSS - như tên cho thấy, nó đặt lại tất cả các kiểu, tức là loại bỏ tất cả các kiểu tác nhân người dùng của trình duyệt.

Ví dụ : nó sẽ làm một cái gì đó như thế dưới đây:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

Trạng thái hiện tại : nó ít phổ biến hơn so với Normalize.css, gói reset-css cho thấy khoảng 26 nghìn lượt tải xuống mỗi tuần. Các ngôi sao GitHub chỉ có 200, vì nó có thể được nhận thấy từ kho lưu trữ của dự án .