Nén & Định Dạng CSS miễn phí

Cách hoạt động

Công cụ này dùng bộ tách token CSS tự viết, không phụ thuộc, xây dựng hoàn toàn bằng JavaScript — không thư viện bên ngoài, không gọi máy chủ. Bộ tách token phân loại mọi ký tự là mã, chú thích, chuỗi trong dấu nháy hoặc giá trị url() trước khi áp dụng bất kỳ biến đổi nào, ngăn quy tắc khoảng trắng làm hỏng nội dung chuỗi, data URI hoặc biểu thức calc().

1. 1
   Lượt tách token

   CSS đầu vào được quét từng ký tự và chia thành các token có kiểu: đoạn mã thô, chú thích /* ... */, chuỗi trong dấu nháy (giữ nguyên chuỗi thoát) và khối url(...). Điều này đảm bảo các biến đổi ở bước sau chỉ tác động vào cú pháp CSS thực — không bao giờ động đến nội dung chuỗi ký tự hoặc data URI.
2. 2
   Thu gọn hoặc làm đẹp

   Ở chế độ thu gọn, chú thích thường bị loại bỏ (chú thích /*! license */ được giữ lại), các chuỗi khoảng trắng trong token mã được gộp thành một dấu cách, và khoảng trắng cạnh dấu câu quanh { } : ; , > ~ bị xóa. Dấu cách quanh + và - được cố ý giữ nguyên để không làm hỏng biểu thức calc(). Ở chế độ làm đẹp, mã trước tiên được thu gọn về dạng sạch, rồi tách token lại và thụt lề lại với theo dõi độ sâu hai dấu cách và phát hiện dấu hai chấm khai báo để phân biệt dấu hai chấm property: value với dấu hai chấm của selector như a:hover.
3. 3
   Ước tính kích thước gzip

   Sau khi tạo đầu ra, CompressionStream API gốc của trình duyệt được dùng để nén kết quả bằng gzip và đo số byte thu được. Điều này cho ước tính kích thước truyền tải thực tế, khớp với những gì máy chủ web có nén gzip sẽ gửi qua mạng.
4. 4
   Sao chép hoặc tải về

   CSS đã xử lý được ghi vào bộ nhớ tạm qua Clipboard API, hoặc tải về dạng styles.min.css (chế độ thu gọn) hoặc styles.css (chế độ làm đẹp) bằng Blob với MIME type text/css. Phần trăm giảm kích thước được hiển thị trực tiếp khi bạn gõ.

Công cụ liên quan