TanodTools
VI

Thu gọn và làm đẹp CSS

Dán một stylesheet để thu nhỏ cho môi trường production hoặc bố trí lại cho dễ đọc, và xem bạn tiết kiệm được bao nhiêu byte.

Chạy hoàn toàn trong trình duyệt của bạn

Chế độ
Chú thích

Đầu vào tối đa khoảng 10 MB. Công cụ chỉ xóa khoảng trắng và chú thích; không gộp quy tắc, không viết lại giá trị hay xóa CSS không dùng đến.

Cách thu gọn hoặc làm đẹp CSS

  1. Dán CSS của bạn vào ô, hoặc bấm Chèn mẫu.
  2. Chọn Thu gọn để nén, hoặc Làm đẹp để bố trí lại với mức thụt lề của bạn. Đánh dấu hoặc bỏ đánh dấu tùy chọn chú thích giấy phép khi thu gọn.
  3. Xem dung lượng tiết kiệm được, rồi sao chép kết quả hoặc tải xuống dưới dạng tệp .css.

Thu gọn CSS mà không làm hỏng nó

Thu gọn một stylesheet nghĩa là xóa mọi thứ trình duyệt bỏ qua: chú thích, thụt lề, dấu xuống dòng và khoảng trắng quanh dấu câu. Tệp nhỏ hơn tải và phân tích nhanh hơn, và với stylesheet lớn, mức tiết kiệm thường từ một phần tư đến một nửa dung lượng trước khi nén. Các quy tắc và thứ tự của chúng giữ nguyên như đã viết.

Phần khó là biết khoảng trắng nào trình duyệt bỏ qua. Một dấu cách giữa hai bộ chọn, như trong nav a, là toán tử có nghĩa là “bất kỳ phần tử con cháu nào”, nên nav a và nava là hai thứ khác nhau. Bên trong calc(1rem + 2px), các dấu cách quanh + là bắt buộc, và calc(1rem+2px) không hợp lệ. Văn bản trong dấu ngoặc kép và trong url() là dữ liệu, không phải cú pháp. Một trình thu gọn xây dựng từ biểu thức chính quy thường làm sai một trong những điều này; công cụ này đọc stylesheet như một chuỗi token và chỉ xóa khoảng trắng ở nơi ngữ pháp cho phép bỏ.

Làm đẹp là chiều ngược lại: mỗi khai báo một dòng, thụt lề bên trong dấu ngoặc nhọn, để một tệp đã thu gọn từ CDN trở thành thứ bạn đọc và so sánh được.

Mẹo

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

CSS của tôi có bị tải lên không?

Không. Việc thu gọn chạy trong trình duyệt của bạn, và thư viện làm đẹp chỉ được tải từ chính trang này nếu bạn chọn Làm đẹp. Stylesheet của bạn không bao giờ được gửi đi đâu.

Thu gọn chính xác thay đổi những gì?

Nó xóa chú thích và khoảng trắng quanh dấu ngoặc nhọn, dấu chấm phẩy, dấu phẩy và các toán tử quan hệ (>, ~, +), và bỏ dấu chấm phẩy cuối cùng trong mỗi khối. Nó giữ lại dấu cách trong a b (toán tử con cháu), trong and (min-width: ...) và quanh + và - bên trong calc(), clamp(), min() và max(), nơi việc xóa đi sẽ làm hỏng giá trị.

Công cụ có đụng đến chuỗi và url() không?

Không. Mọi thứ trong dấu ngoặc kép, kể cả văn bản trông giống chú thích hay dấu ngoặc nhọn, và nội dung của url() đều được sao chép nguyên từng ký tự.

Công cụ có rút gọn màu hay số không?

Không. Các giá trị như #336699, 0.5em và 0px được giữ nguyên như đã viết. Những phép viết lại đó tiết kiệm rất ít và có chút rủi ro, nên chỉ khoảng trắng và chú thích bị xóa.

Làm sao tôi biết CSS đã thu gọn là an toàn?

Sau mỗi lần chạy, trang phân tích bản gốc và kết quả của bạn bằng trình phân tích CSS của chính trình duyệt rồi so sánh những gì nó đọc được. Nếu chúng khác nhau, một thông báo sẽ hiện phía trên kết quả. Khớp nhau nghĩa là trình duyệt thấy cùng các quy tắc.

Chú thích giấy phép là gì?

Các chú thích bắt đầu bằng /*! theo quy ước được các công cụ thu gọn giữ lại vì chúng mang thông tin bản quyền hoặc giấy phép mà giấy phép có thể yêu cầu bạn giữ lại. Tắt tùy chọn này để xóa cả chúng.