🗜️ Công cụ Nén CSS

Giới thiệu

Công cụ nén CSS này chạy hoàn toàn trong trình duyệt bằng phương pháp phân tách token, xử lý chính xác các trường hợp đặc biệt. Nó xóa chú thích một dòng (//) và nhiều dòng (/* */), thu gọn khoảng trắng liên tiếp thành một dấu cách hoặc loại bỏ chúng xung quanh các dấu câu như { } : ; , và >, đồng thời giữ nguyên nội dung chuỗi được trích dẫn và giá trị url() để khoảng trắng trong data URI hay tên font không bao giờ bị hỏng. Vì đây là tokenizer cơ bản chứ không phải AST parser đầy đủ, công cụ hoạt động nhanh và không phụ thuộc thư viện, phù hợp với phần lớn CSS viết tay hoặc được tạo bởi preprocessor. Công cụ hiển thị kích thước gốc, kích thước sau khi nén và số byte tiết kiệm để bạn quyết định có cần tối ưu thêm không.

Cách sử dụng

1. Dán CSS của bạn vào vùng nhập liệu ở bên trái.
2. Nhấn Minify — công cụ phân tách token CSS của bạn và xuất phiên bản nén ở bên phải.
3. Xem phần tóm tắt kích thước để biết kích thước gốc, kích thước sau khi nén và số byte đã tiết kiệm được.
4. Nhấn Copy để sao chép CSS đã nén vào clipboard, hoặc dùng Download để lưu thành file .css.

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

Công cụ này có xử lý CSS của tôi trên máy chủ không?

Không. Quá trình nén chạy hoàn toàn trong trình duyệt bằng JavaScript. CSS của bạn không bao giờ được gửi đi đâu cả.

Quá trình nén có làm hỏng CSS của tôi không?

Tokenizer bảo vệ chuỗi được trích dẫn và giá trị url(), vì vậy CSS hợp lệ sẽ được giữ nguyên. Tuy nhiên, đây không phải AST parser đầy đủ — các trường hợp đặc biệt hiếm gặp với cú pháp không chuẩn có thể không được xử lý hoàn hảo.

Chú thích một dòng // có bị xóa không?

Có. Cả chú thích một dòng // lẫn nhiều dòng /* */ đều bị xóa. Lưu ý rằng // không chính thức là một phần của đặc tả CSS nhưng phổ biến trong các file nguồn preprocessor.

CSS của tôi sẽ nhỏ hơn bao nhiêu?

CSS viết tay thông thường giảm khoảng 20–40%. Các file có nhiều chú thích hoặc khoảng trắng rộng sẽ tiết kiệm nhiều hơn. Để đạt nén tối đa, hãy kết hợp với gzip hoặc Brotli trên máy chủ của bạn.

Tôi có thể nén CSS chứa biến hoặc biểu thức calc() không?

Có. Thuộc tính tùy chỉnh (--var), var(), calc() và các hàm CSS hiện đại khác được xử lý như giá trị token thông thường và đi qua một cách an toàn.