Tôi biết những gì CSS Thiết lập lại, nhưng thời gian gần đây tôi nghe nói về điều này mới gọi là Normalize.cssSự khác nhau giữa Normalize.css và Reset CSS là gì?
sự khác biệt giữa Normalize.css và Reset CSS là gì?
Sự khác biệt giữa việc chuẩn hóa CSS và đặt lại CSS là gì?
Đây có phải là từ mới cho CSS Reset không?
Tôi làm việc trên normalize.css.
Sự khác biệt chính là:
Normalize.css bảo tồn giá trị mặc định hữu ích hơn là "unstyling" tất cả mọi thứ. Ví dụ: các thành phần như sup hoặ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 bằng văn bản thông thường sau khi đặt lại.css. Vì vậy, normalize.css không áp đặt một điểm bắt đầu trực quan (đồng nhất) khi 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 cần làm là thử nghiệm cả hai và xem gel nào có sở thích của bạn.
Normalize.css sửa một số lỗi phổ biến nằm ngoài phạm vi cho tệp reset.css. Nó có phạm vi rộng hơn đặt lại.css và cũng cung cấp các bản 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 thừa kế font bởi các phần tử biểu mẫu, sửa font-size hiển thị cho pre, tràn SVG trong IE9 và lỗi kiểu dáng button trong iOS.
Normalize.css không làm lộn xộn công cụ của bạn. Một kích thích phổ biến khi sử dụng reset.css là chuỗi kế thừa 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à vấn đề như vậy với normalize.css vì kiểu dáng được nhắm mục tiêu.
Normalize.css có nhiều mô đun hơn. Dự án được chia nhỏ 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 (ví dụ như bình thường 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.
Normalize.css có tài liệu tốt hơn. Mã normalize.css được ghi lại nội tuyến 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 xem mỗi dòng mã nào đang hoạt động, tại sao nó được bao gồm, sự khác nhau giữa các trình duyệt là gì và dễ dàng chạy các 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 phần 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ề vấn đề này trong một bài báo about normalize.css
Cũng từ mô tả của nó, dường như nó cố gắng làm cho phong cách 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ì loại bỏ tất cả kiểu dáng mặc định làm đặt lại.
Bảo tồn các giá trị mặc định hữu ích, không giống như nhiều lần đặt lại CSS.
Vì vậy, tốt hơn bạn nên sử dụng css bình thường hóa trên Đặt lại? –
@Jitendra Vyas - no. Các công cụ khác nhau, không tốt hơn hoặc tệ hơn sau đó lẫn nhau. Chọn một trong đó giúp bạn giải quyết các vấn đề bạn có tốt nhất. – Quentin
Tôi sẽ phải tranh luận rằng bình thường hóa * là * tốt hơn so với đặt lại. Nó sẽ dẫn đến ít CSS được truyền qua dây, sử dụng tốt hơn các giá trị mặc định UA và hiểu rõ hơn về cách các thành phần * có ý nghĩa * hiển thị. –
Sự khác biệt chính là: resets
CSS nhằm loại bỏ tất cả built-in phong cách trình duyệt. Các yếu tố tiêu chuẩn như H1-6, p, mạnh mẽ, em, vân vân sẽ trông giống hệt nhau, không có trang trí gì cả. Sau đó, bạn phải thêm tất cả các trang trí mình.
Normalize CSS nhằm tạo kiểu trình duyệt được tích hợp sẵn 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 và vân vân một cách nhất quán trên các trình duyệt. Sau đó, bạn chỉ được phép thêm sự khác biệt để trang trí nhu cầu thiết kế của mình.
Nếu thiết kế của bạn a) sau ước chung cho typography vân vân, và b) Normalize.css làm việc cho đối tượng mục tiêu của bạn, sau đó sử dụng Normalize.CSS thay vì thiết lập lại CSS sẽ làm cho riêng bạn CSS nhỏ hơn và nhanh hơn để viết.
+1 Vui lòng cung cấp thêm chi tiết cho kịch bản của đoạn cuối –
@Jitendra Vyas: Nhà phát triển giao diện người dùng của bạn - thực sự chỉ có một cách: đọc mã Normalize.CSS được nhận xét và quyết định xem nó có phù hợp với bạn không có cần hay không. https://github.com/necolas/normalize.css/blob/master/normalize.css –
Lưu ý khác: Normalize.css nhằm mục đích không phô trương nhất có thể, cho phép nhà phát triển viết mã của họ dễ dàng hơn mà không cần phải chống lại tính đặc hiệu xung đột. – zzzzBov
Normalize.css chủ yếu là một tập hợp các phong cách, dựa trên những gì nó suy nghĩ của tác giả sẽ nhìn tốt, và làm cho nó trông ổn định qua trình duyệt. Đặt lại về cơ bản 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ừ Đặt lại, một số từ Normalize.css. Ví dụ, từ Normalize.css, có một kiểu để đảm bảo tất cả các phần tử đầu vào có cùng một phông chữ, không xuất hiện (giữa đầu vào văn bản và textareas). Thiết lập lại không có kiểu như vậy, vì vậy đầu vào có phông chữ khác nhau, mà không phải là bình thường muốn.
Vì vậy bascially, bằng cách sử dụng hai tập tin CSS làm một công việc tốt hơn 'Cân bằng' tất cả mọi thứ;)
kính chào!
Đây là một câu trả lời tốt, thực dụng. Nó không nhất thiết phải là một hay khác. Lấy những gì bạn muốn từ mỗi cái. Tôi thích một thiết lập lại đầy đủ, nhưng Normalizer cung cấp một số bit tốt đẹp và miếng mà làm việc tốt ontop. – Undistraction
@ricmetalster, do đó, bạn đã phải viết lại css của riêng bạn để kết hợp các chức năng từ reset.css và normalize.css? – ayjay
Nếu bạn muốn sử dụng cả hai, bạn có thể liệt kê "đặt lại" đầu tiên sau đó "bình thường hóa" sau đó thêm phong cách của bạn trên đầu trang? – Craig
việc đặt lại có vẻ cần thiết phải đáp ứng các đặc điểm 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 có bản mẫu. Nghe có vẻ như bình thường hóa là một cách tốt để tiến hành với lập trình web thuần túy trong tâm trí, nhưng đôi khi các trang web 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.
Đó là quá 99% trường hợp sử dụng. – Michael
@Michael cái nào?đặt lại hoặc chuẩn hóa? (Chỉ cần cố gắng hiểu suy nghĩ của mọi người về chủ đề này) – Bren
@Bren vừa đặt lại vừa chuẩn hóa. Việc biết giá trị CSS mặc định cho từng phần tử là một phần của việc trở thành nhà phát triển giao diện người dùng tốt. Tôi thấy chúng như là các phương pháp lực lượng vũ phu không cần thiết. – Michael
Đầu tiên reset.css là thư viện tồi tệ nhất bạn có thể sử dụng, 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 dưới dạng văn bản, sau khi gán giá trị của lề lề và các thuộc tính khác cho 0. Vì vậy, ví dụ bạn sẽ thấy rằng <H1>, sẽ giống như <H6>.
Mặt khác, Normalize.css sử dụng cấu trúc tiêu chuẩn và cũng sửa hầu như tất cả các lỗi hiện có trong đó. Ví dụ: nó khắc phục sự cố bằng cách hiển thị biểu mẫu từ trình duyệt này đến 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 phần tử của bạn sẽ được hiển thị giống nhau trên tất cả các trình duyệt.
Phụ thuộc vào trường hợp sử dụng của bạn. Xem xét ví dụ của bạn, nếu tôi cần phải sửa đổi kiểu phông chữ của tất cả các thẻ tiêu đề cho dự án của tôi, tôi sẽ không thực sự có bất kỳ việc sử dụng các giá trị mặc định, tôi sẽ không? Người ta không nên gắn nhãn một thư viện là "tồi tệ nhất" chỉ vì người ta không thể tìm thấy một sử dụng trong các dự án của riêng mình. – gdebojyoti
Một trong những mục đích chính của thiết lập lại là để chống lại các vấn đề phát sinh từ phong cách trình duyệt áp dụng rất hữu ích. Tôi cũng nghĩ rằng nó không nên được coi là một thư viện. –
@gdebojyoti Có một số trường hợp sử dụng, nhưng tôi rất hiếm khi muốn tất cả các tiêu đề của tôi có cùng kích thước, bất kể kiểu phông tương ứng của chúng. –
Đô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 kia. 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à stylings mình. Nếu bạn chỉ đơn giản là thích các kiểu tạo sẵn nhưng muốn có nhiều đồng bộ trình duyệt chéo hơn, nghĩa là các chuẩn hóa sau đó sử dụng normalize.css. Nhưng nếu bạn chọn sử dụng cả tệp reset.css và normalize.css, hãy liên kết bảng định kiểu reset.css trước và sau đó là biểu định kiểu normalize.css (ngay) sau đó. Đôi khi nó không phải luôn luôn là một vấn đề trong đó là tốt hơn, nhưng khi sử dụng cái nào so với khi sử dụng cả hai so với khi sử dụng không. IMHO.
Khá thường xuyên, bạn không để chúng ở số không (khi sử dụng đặt lại), vì vậy bạn thực sự viết ít mã hơn. Nếu bạn không muốn tìm ra một số giá trị, thì kiểu đó được ghép nối với phần tử mà nó có nghĩa là và nên giảm bớt lỗi. – necolas
Và R TH R isNG là một vấn đề đáng kể với nhiều lần đặt lại, bao gồm thực tế là việc xóa tất cả mọi thứ cũng làm chậm trình duyệt. – Rob
Và RATNG cũng là lợi thế của việc đặt lại - bình thường hóa việc bỏ lỡ các vấn đề kích thước như thế này: https://github.com/yahoo/pure/issues/395 –