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ì?
Công cụ này cho phép bạn nén (minify) hoặc định dạng mã CSS. Việc nén loại bỏ khoảng trắng, chú thích và ký tự dư thừa không cần thiết để giảm kích thước tệp cho triển khai sản xuất. Định dạng định dạng CSS với thụt lề và ngắt dòng thích hợp để dễ đọc hơn trong quá trình phát triển.
Tính năng chính
- Nén CSS - Xóa khoảng trắng, ngắt dòng và chú thích để giảm kích thước tệp
- Định dạng CSS - Định dạng CSS với thụt lề và ngắt dòng thích hợp để dễ đọc
- Kích thước thụt lề tùy chỉnh (2 khoảng trắng, 4 khoảng trắng hoặc tab)
- Tùy chọn giữ chú thích trong quá trình nén
- So sánh kích thước tệp hiển thị tỷ lệ nén
Trường hợp sử dụng phổ biến
- Tối ưu hóa tệp CSS cho triển khai sản xuất để giảm thời gian tải trang
- Định dạng CSS đã nén hoặc đã nén để dễ debug và xem xét mã
- Dọn dẹp mã CSS với định dạng không nhất quán
- Giảm sử dụng băng thông bằng cách cung cấp CSS đã nén cho người dùng
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
Nén CSS thường đạt được giảm 20-50% kích thước tệp tùy thuộc vào định dạng mã nguồn và mật độ chú thích. Kết hợp với nén Gzip phía máy chủ, tổng giảm có thể vượt quá 80%.
| 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