Nén CSS

Cách sử dụng

1. Dán stylesheet, hoặc đoạn bạn sắp nhúng thẳng vào trang.
2. Xem phần dung lượng tiết kiệm được — đó là con số thực sự đi tới người dùng.
3. Sao chép kết quả, hoặc tải về dưới dạng tệp .min.css.
4. Giữ lại bản gốc: kết quả này để phục vụ, không phải để chỉnh sửa tiếp.

Tính năng

• Xóa chú thích, kể cả chú thích nhiều dòng.
• Gộp khoảng trắng, và bỏ hẳn ở những chỗ CSS không cần.
• Giữ nguyên từng byte của chuỗi, giá trị `url()` và data URI.
• Bỏ dấu chấm phẩy thừa ở cuối mỗi khối.
• Chạy hoàn toàn trong trình duyệt — không tải stylesheet nào lên.

Câu hỏi thường gặp

Vì sao chuỗi và data URI cần được xử lý riêng?

Vì bên trong chúng chứa đúng những ký tự mà bộ nén đang tìm. `content: "/* hi */"` là văn bản chứ không phải chú thích; một URI `data:image/svg+xml;base64,…` đầy dấu chấm phẩy vốn chẳng có ý nghĩa gì với CSS. Bộ nén viết bằng biểu thức chính quy không phân biệt được, và sớm muộn cũng ăn mất một trong hai. Công cụ này đọc stylesheet theo từng ký tự và bước qua cả hai.

Nó có đổi mã màu hay gộp quy tắc của tôi không?

Không. Đổi `#ffffff` thành `#fff` hay gộp các selector trùng là việc của một bộ tối ưu đầy đủ, và đó cũng là nơi các bộ nén hay sinh lỗi — gộp quy tắc có thể làm đổi thứ tự ưu tiên. Ở đây chỉ xóa những gì chắc chắn vô nghĩa: chú thích, khoảng trắng thừa và dấu chấm phẩy cuối khối.

Tiết kiệm được bao nhiêu là hợp lý?

Thường 10–30% với stylesheet viết tay, phần lớn đến từ khoảng trắng và chú thích. Trên đường truyền thì mức tiết kiệm nhỏ hơn, vì gzip vốn đã nén tốt phần khoảng trắng lặp lại — nén vẫn có ích, nhưng con số phần trăm ở đây không phải thứ người dùng thực sự tải về.

Công cụ liên quan