Trình tối ưu hóa & Làm đẹp CSS
Nén CSS cho sản xuất hoặc Làm đẹp để dễ đọc (100% Phía khách hàng)
Tài liệu Công cụ Nén và Định dạng CSS
Công cụ này là gì?
Nén CSS loại bỏ các ký tự không cần thiết về mặt cú pháp mà không thay đổi hành vi: khoảng trắng giữa các quy tắc, dấu xuống dòng, comments CSS (/* ... */), dấu chấm phẩy thừa trước dấu ngoặc nhọn đóng. Công cụ định dạng thực hiện ngược lại với thụt lề và dấu xuống dòng nhất quán.
Tính năng chính
- Xóa khoảng trắng và comments: loại bỏ tất cả khoảng trắng giữa quy tắc, xuống dòng và comments /* */. Giữ nguyên chuỗi ký tự và giá trị url(). Giữ /*! ... */ khi bật tùy chọn.
- Nén selector và khai báo: thu gọn nhiều khoảng trắng trong selector, bỏ dấu chấm phẩy cuối trước }, chuẩn hóa 0px→0 và 0.5→.5.
- Thụt lề có thể cấu hình: 2 khoảng trắng, 4 khoảng trắng hoặc tab; một quy tắc mỗi dòng; giữ @media, @keyframes và cấu trúc lồng nhau.
- Hỗ trợ CSS custom properties: không nén biểu thức var() hay khoảng trắng trong calc() (có thể gây lỗi parsing trong một số trình duyệt).
- Hiển thị thay đổi kích thước: số byte gốc, số byte sau nén và tỷ lệ nén bên cạnh kết quả.
Trường hợp sử dụng phổ biến
- Pipeline build sản xuất: tích hợp vào Webpack (css-minimizer-webpack-plugin), Vite (Lightning CSS tích hợp) hoặc Gulp (gulp-clean-css).
- Debug CSS bên thứ ba: định dạng Bootstrap 5 bootstrap.min.css hoặc đầu ra Tailwind để kiểm tra cấu trúc quy tắc.
- Dọn dẹp stylesheet cũ: cải thiện thụt lề và căn chỉnh trước khi tái cấu trúc.
- Giảm payload CDN: CSS nén giảm byte truyền tải và cải thiện LCP; giảm 20-50% điển hình.
Cách công cụ này xử lý CSS
Loại bỏ khoảng trắng
Xóa tất cả khoảng trắng, ngắt dòng và tab không cần thiết. Các quy tắc CSS được nén thành một dòng mà không ảnh hưởng đến chức năng. Ví dụ: `.btn { color: red; }` trở thành `.btn{color:red;}`
Loại bỏ chú thích
Xóa tất cả chú thích CSS (/* ... */) trừ khi tùy chọn "Giữ chú thích" được bật. Các chú thích giấy phép quan trọng sử dụng cú pháp /*! ... */ thường được giữ lại bởi hầu hết các trình nén.
Loại bỏ ký tự thừa
Loại bỏ dấu chấm phẩy không cần thiết (thuộc tính cuối cùng trong quy tắc), khoảng trắng xung quanh toán tử và số 0 thừa (0.5 → .5). Rút ngắn mã màu (#ffffff → #fff).
Tối ưu hóa thuộc tính
Xóa khoảng trắng xung quanh dấu ngoặc, dấu hai chấm và dấu phẩy. Ví dụ: `margin: 10px 20px;` trở thành `margin:10px 20px;`. Lưu ý: khoảng trắng được giữ lại trong calc() và các hàm khác khi cần thiết.
Tác động đến kích thước tệp
Giảm 20-50% cho CSS viết tay. 5-15% cho đầu ra framework. 40-60% cho các tệp có nhiều comment. Gzip bổ sung giảm thêm 70-80% kích thước truyền tải.
| Kịch bản | Gốc | Đã nén | Giảm | Gzip |
|---|---|---|---|---|
| CSS được định dạng tốt có chú thích | 50 KB | 25-30 KB | 40-50% | ~5-8 KB (85-90% tổng) |
| CSS đã nhỏ gọn với ít chú thích | 30 KB | 24-27 KB | 10-20% | ~4-6 KB (80-85% tổng) |
| CSS tài liệu có nhiều chú thích | 100 KB | 40-50 KB | 50-60% | ~8-12 KB (88-92% tổng) |
Công Cụ Liên Quan
Nén & Làm Đẹp HTML
Nén hoặc làm đẹp mã HTML, loại bỏ khoảng trắng và chú thích để tối ưu kích thước tệp, hoặc định dạng mã để dễ đọc
Nén & Làm Đẹp JavaScript
Nén hoặc làm đẹp mã JavaScript, loại bỏ khoảng trắng và chú thích để tối ưu kích thước tệp, hoặc định dạng mã để dễ đọc
Bảng Chọn & Chuyển Đổi Màu
Chuyển đổi màu giữa các định dạng HEX, RGB, HSL, CMYK, YCbCr, Lab, tạo bảng màu và kiểm tra độ tương phản WCAG
Trình Tạo Bảng Màu
Trình tạo bảng màu chuyên nghiệp với pha trộn màu, tạo gradient, sơ đồ màu và xuất sang định dạng CSS/SCSS/JSON
Chuyển Đổi Hình Ảnh Sang Base64
Chuyển đổi hình ảnh sang mã hóa Base64, hỗ trợ định dạng PNG, JPG, GIF, SVG, WebP, tạo Data URI và nền CSS
Kiểm Tra Văn Bản Khác Biệt
So sánh sự khác biệt giữa hai văn bản hoặc tệp với chế độ xem nổi bật song song