Sử dụng Normalize.css để phát triển đồng nhất

Khả năng tương thích trình duyệt là một phần lớn của khả năng truy cập trên web. Các nhà phát triển cần xem xét phương sai của khán giả và phiên bản trình duyệt cần hỗ trợ. Mặc dù đặt lại CSS là một tùy chọn, hầu hết các nhà phát triển thích Normalize.css vì tính đơn giản và khả năng tương thích chéo của nó trong tất cả các trình duyệt web hiện đại.

Trong bài này tôi sẽ trình bày những điều cơ bản của Chuẩn hóa và cách so sánh với các bộ CSS chung. Đây không phải là một thư viện phức tạp và không nên mất hơn một vài giờ để hiểu. Nhưng chìa khóa để bình thường hóa là học tập làm sao để thực hiện nó đúng cách và thận trọng.

Đặt lại trình duyệt so với bình thường hóa

Trong nhiều năm, tôi đã sử dụng một phiên bản tùy chỉnh của bộ CSS CSS của Eric Meyer. Những điều này đã đủ cho hầu hết các dự án của tôi và không gây ra bất kỳ vấn đề lớn nào. Tuy nhiên, Chuẩn hóa đã thay đổi quan điểm của tôi về thiết lập lại vì nó hoạt động khác với thiết lập lại CSS. Điều quan trọng là bạn hiểu sự khác biệt.

Hãy nghĩ về Bình thường hóa như một may mặc áp dụng nhất quán cho tất cả các trình duyệt, và nghĩ về một Thiết lập lại CSS như một vụ nổ nhiệt hạch trên tất cả các trình duyệt.

Bình thường hóa các kiểu và định dạng tiêu đề, đoạn văn, chuỗi khối và các yếu tố phổ biến để chúng xuất hiện giống hệt nhau (hoặc đủ gần) trong tất cả các trình duyệt được hỗ trợ. Đặt lại CSS hoàn toàn xóa sạch bảng sao cho có không mặc định cho bất cứ điều gì.

Với thiết lập lại CSS, các tiêu đề của bạn có thể trông giống như các đoạn văn của bạn; các phần tử không có phần đệm, lề hoặc khoảng cách của bất kỳ loại nào. Với thiết lập lại CSS bạn phải cung cấp mã mới để nâng cao phong cách. Với Chuẩn hóa, bạn nhận được một phong cách thiết kế sẵn có thể được xây dựng trên.

Vì vậy, một trong những tốt hơn so với cái khác? Đây là một chủ đề tranh luận sôi nổi, mặc dù một điểm tranh luận nói rằng Bình thường hóa hoạt động tốt hơn để tương thích và tạo kích thước tệp nhỏ hơn.

“Tôi sẽ phải tranh luận rằng bình thường hóa tốt hơn là đặt lại. Nó sẽ dẫn đến việc CSS được truyền qua dây ít hơn, sử dụng mặc định UA tốt hơn và hiểu rõ hơn về các yếu tố như thế nào có nghĩa là để hiển thị.”

Cho dù bạn có yêu thích Bình thường hóa hay thích thiết lập lại điển hình, điều quan trọng nhất là phải hiểu cả hai mặt và chọn bất cứ điều gì phù hợp nhất. Rất ít nhà phát triển bắt đầu mã hóa từ đầu vì vậy Chuẩn hóa hoặc thiết lập lại CSS gần như là bắt buộc để phát triển lối vào hiện đại.

Nếu bạn muốn thử thiết lập lại CSS, đây là một số lựa chọn phổ biến:

Đặt lại của Eric Meyer
Đặt lại HTML5
Đặt lại HTML5Doctor

Chuẩn hóa cấu hình

Bình thường hóa người sáng tạo Nicolas Gallagher đã viết một bài giới thiệu dẫn đầu với tuyên bố này:

“Normalize.css là một tệp CSS nhỏ cung cấp tính nhất quán của trình duyệt chéo tốt hơn trong kiểu dáng mặc định của các phần tử HTML. Đây là một tính năng hiện đại, sẵn sàng cho HTML5, thay thế cho thiết lập lại CSS truyền thống.”

Trong những năm qua, nó đã phát triển thành một thư viện đáng tin cậy được sử dụng bởi các nhà phát triển trên toàn thế giới. Chuẩn hóa thậm chí đã được sử dụng ở một mức độ nào đó trong Bootstrap và Pure CSS.

Có hai cách để sử dụng Chuẩn hóa trong dự án: chỉnh sửa nguồn để tùy chỉnh biểu định kiểu Chuẩn hóa của riêng bạn hoặc sử dụng nó làm cơ sở và thêm kiểu trên đầu trang.

Chiến lược trước đây là một chiến lược chọn và chọn trong đó bạn đi qua tệp Normalize.css và xóa bất cứ thứ gì bạn không cần để tạo biểu định kiểu tùy chỉnh của riêng bạn. Điều này là tốt nhất trên cơ sở từng dự án để giữ cho kích thước tệp thấp.

Ngoài ra, một số nhà phát triển bao gồm toàn bộ tệp Normalize.css và xây dựng biểu định kiểu của riêng họ trên đó. Biểu định kiểu chuẩn hóa đầy đủ kéo dài hơn 420 dòng mã tương đương với ~ 6,8KB không nén.

Không phương pháp nào tốt hơn phương pháp kia và nó đáng để làm theo bất cứ điều gì tốt nhất cho từng dự án hoặc quy trình công việc ưa thích của bạn.

Để bắt đầu, hãy tải xuống một bản sao Chuẩn hóa từ GitHub hoặc lưu trữ nó từ CDN bên ngoài. Bạn cũng có thể lấy phiên bản Chuẩn hóa mới nhất ngay từ NPM như sau:

cài đặt npm --save normalize.css

Nếu bạn không muốn tải xuống bất kỳ tệp nào, bạn thậm chí có thể tạo dự án CodePen mới có thể nối thêm Chuẩn hóa chỉ bằng một nút bấm.

Vì Chuẩn hóa là mô-đun, bạn có thể xóa các phần tạm thời hoặc thậm chí tạo bản dựng Bình thường hóa tùy chỉnh của riêng bạn. Sau đó, bạn có thể bắt đầu mỗi dự án với các phần được chọn như các thành phần hiển thị HTML5 trong khi xóa kiểu cho nội dung được nhúng.

Mỗi quy tắc Chuẩn hóa có một nhận xét CSS tương ứng giải thích những gì nó làm và những vấn đề / lỗi mà nó giải quyết. Một số rõ ràng như thiết lập hiển thị: khối trên các phần tử HTML5 mới hơn.

Các mã khác ít rõ ràng hơn như mã SVG này ẩn tràn trong Internet Explorer:

svg: not (: root) overflow: hidden;

Tôi đặc biệt khuyên bạn nên lướt qua biểu định kiểu để xem chính xác cách thức hoạt động và tìm hiểu xem liệu Chuẩn hóa có phù hợp với dự án của bạn không.

Chuẩn hóa.css trong thiết kế web

Phiên bản mới nhất của Chuẩn hóa v4.0 cung cấp hỗ trợ trình duyệt rộng rãi.

Chrome (hai lần cuối)
Cạnh (hai cuối)
Firefox (hai cái cuối)
ESR Firefox
Internet Explorer 8+
Opera (hai cuối)
Safari 6+

Từ những gì tôi có thể nói, Chuẩn hóa có thể hỗ trợ các phiên bản trình duyệt cũ hơn với các bản cập nhật liên tục như Firefox. Nhưng “chính thức” chỉ hỗ trợ hai phiên bản Chrome / Edge / FF / Opera mới nhất.

Ngoài ra IE6 + và Safari 4+ được hỗ trợ với Chuẩn hóa v1, nhưng phiên bản đó không còn được cập nhật.

Điều quan trọng là bạn kiểm tra các phiên bản trình duyệt bằng một công cụ như Google Analytics. Điều này sẽ cho bạn ý tưởng tốt hơn về việc Bình thường hóa có thể là một công cụ hữu ích cho công việc thiết kế web hiện đại không.

Tài nguyên khác

Không có nhiều thứ để dạy cụ thể về Bình thường hóa nên hầu hết việc học diễn ra bằng cách làm.

Và thực sự không có nhiều điều để giải thích rằng bạn không thể nhận bằng cách đọc qua biểu định kiểu và sao chép / thay đổi mã khi cần. Nhưng nếu bạn đang tìm kiếm thông tin liên quan khác, tôi đã thêm một số liên kết dưới đây.

Những bài viết liên quan

Nicolas Gallagher: Giới thiệu về Chuẩn hóa.css
Giới thiệu về nồi hơi HTML5
Chuẩn hóa.css so với Reset.css: Sử dụng cái nào?

Video giới thiệu

Sử dụng chuẩn hóa CSS
Đặt lại và chuẩn hóa bởi Envato
Nicolas Gallagher - Suy nghĩ vượt ra ngoài CSS có thể mở rộng