Đến phần nội dung
Toova
Tất cả công cụ

Bộ rút gọn và làm đẹp CSS

Riêng tư theo thiết kế — chạy hoàn toàn trong trình duyệt của bạn

Rút gọn hoặc làm đẹp CSS trong trình duyệt của bạn. Toova loại bỏ khoảng trắng và chú thích để thu nhỏ bảng định kiểu cho sản xuất, hoặc in đẹp CSS đã rút gọn thành thứ bạn thực sự có thể đọc trong khi gỡ lỗi.

Hai chế độ, một quy trình

Chế độ rút gọn loại bỏ mọi chú thích, mọi khoảng trắng dư thừa, và mọi xuống dòng không cần thiết. Đầu ra là CSS giống về mặt chức năng nhưng thường nhỏ hơn 20-40%, giúp tăng tốc lần vẽ đầu tiên và giảm kích thước truyền. Chế độ làm đẹp đi theo hướng khác — nó lấy CSS đã rút gọn từ CDN, bó framework, hoặc widget bên thứ ba và mở rộng thành dạng dễ đọc để bạn có thể kiểm toán bộ chọn và thuộc tính.

Định dạng có thể cấu hình

Chọn thụt lề 2 khoảng trắng, 4 khoảng trắng, hoặc tab cho đầu ra đã làm đẹp. Chọn liệu có giữ chú thích không (hữu ích cho banner tiêu đề và chuỗi giấy phép) hoặc loại bỏ chúng hoàn toàn. Trình rút gọn giữ nguyên biến CSS và bộ chọn nguyên văn, nên tên thuộc tính tùy chỉnh và keyframe hoạt hình sống sót khứ hồi. Tiền tố nhà cung cấp được giữ nguyên.

Chỉ cục bộ

Mọi thao tác rút gọn và làm đẹp chạy trong trình duyệt của bạn. CSS bạn dán — dù là bảng định kiểu độc quyền từ hệ thống thiết kế của bạn hay mã bên thứ ba bạn đang kiểm toán — không bao giờ rời trang. Tab Network sẽ trống trong khi xử lý, và trang hoạt động ngoại tuyến sau lần tải đầu tiên.

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

CSS đã rút gọn nhỏ hơn bao nhiêu?
Thường nhỏ hơn 20-40% so với bản gốc sau khi gzip. Việc tiết kiệm đến từ việc loại bỏ chú thích, khoảng trắng, và giá trị không dư thừa. Pipeline xây dựng hiện đại làm điều này tự động, nhưng có một công cụ thủ công hữu ích cho các đoạn một lần.
Việc rút gọn có phá vỡ CSS của tôi không?
Không. Trình rút gọn giữ nguyên mọi quy tắc, thuộc tính, và giá trị nguyên văn. Nó chỉ loại bỏ khoảng trắng và chú thích. Biến CSS, hoạt hình, và tiền tố nhà cung cấp sống sót nguyên vẹn.
Tôi có thể làm đẹp CSS từ CDN không?
Có. Dán CSS đã rút gọn và Toova mở rộng nó thành dạng dễ đọc với thụt lề nhất quán. Hữu ích cho việc kiểm toán xem một widget bên thứ ba thực sự làm gì hoặc gỡ lỗi đầu ra đã biên dịch của một framework.
Chú thích có được giữ không?
Đó là công tắc. Theo mặc định, việc rút gọn loại bỏ chú thích để tối đa hóa tiết kiệm. Bạn có thể giữ tiêu đề giấy phép và các chú thích quan trọng khác bằng cách bật tùy chọn giữ chú thích.
CSS của tôi có được gửi đi đâu không?
Không. Việc xử lý chạy hoàn toàn trong trình duyệt của bạn. Không có gì được tải lên hoặc ghi nhật ký.