Nén CSS (CSS Minifier)
Dán stylesheet để xóa khoảng trắng và chú thích, rút gọn giá trị như #ff0000 → red, và gộp các quy tắc trùng lặp nhờ tối ưu cấu trúc của CSSO.
Chạy trên trình duyệtKhông cần đăng kýKhông tải lên gì
Cách dùng Nén CSS (CSS Minifier)
- Dán CSS hoặc mở tệp
.css. - Giữ bật Tái cấu trúc để gộp quy tắc và khai báo, hoặc tắt đi để chỉ xóa khoảng trắng một cách an toàn.
- Giữ bật Giữ chú thích giấy phép để bảo toàn các thông báo
/*! … */. - So sánh kích thước gốc, sau khi nén và sau khi gzip.
- Sao chép kết quả hoặc tải xuống
output.min.css.
Cách nén CSS hoạt động
Công cụ này dùng CSSO (CSS Optimizer), phân tích stylesheet thành cây cú pháp rồi in lại ở dạng tương đương ngắn nhất. Ngoài việc xóa khoảng trắng và chú thích, nó còn viết lại giá trị một cách an toàn:
#ffffff→#fff,#ff0000→red0px→0,0.90→.9margin: 8px 16px 8px 16px→margin:8px 16px- Quy tắc rỗng và khai báo trùng lặp bị loại bỏ
“Tái cấu trúc” làm gì?
Tái cấu trúc xem xét toàn bộ stylesheet: các quy tắc có khai báo giống nhau được gộp thành một danh sách selector (.a,.b{color:red}), và các selector lặp lại được kết hợp. Điều này thường tiết kiệm thêm 5–15% trên stylesheet thực tế. CSSO chỉ gộp khi thứ tự cascade không đổi, nhưng nếu bạn dựa vào các ghi đè bất thường, bạn có thể tắt nó để chỉ nén về mặt cú pháp.
Vì sao nên nén CSS?
CSS chặn quá trình hiển thị: trình duyệt không thể vẽ trang cho tới khi các stylesheet trong <head> được tải và phân tích xong. CSS nhỏ hơn nghĩa là First Contentful Paint nhanh hơn và Core Web Vitals tốt hơn, có lợi cho cả người dùng lẫn thứ hạng tìm kiếm. Kết hợp nén với gzip hoặc Brotli trên máy chủ để có kết quả tốt nhất.
Câu hỏi thường gặp
Nén CSS có an toàn không?
Có hỗ trợ CSS hiện đại như custom properties, nesting và @layer không?
--var), @media, @supports, @layer, @container và cú pháp grid đều được giữ nguyên.