Định dạng & rút gọn CSS

Định dạng CSS dễ đọc hoặc thu gọn cú pháp, hỗ trợ nhập tệp cục bộ và tải xuống.

Frontend & Thiết kế
Đang chuẩn bị không gian làm việc…

Đầu vào

Đang chuẩn bị không gian làm việc…

Đầu ra
Kết quả sẽ xuất hiện ở đây.

Cách sử dụng

  1. Dán CSS, mở tệp UTF-8 hoặc nạp Mẫu.
  2. Chọn thụt lề hoặc bật Rút gọn CSS, rồi chạy thao tác.
  3. Kiểm tra kết quả rồi Sao chép hoặc Tải xuống.

Định dạng và minify CSS

Định dạng giúp stylesheet dễ đọc và rà soát. Minify bỏ khoảng trắng tùy chọn và chú thích thường để tạo văn bản nhỏ hơn.

Cả hai đều phân tích cú pháp đầu vào trước. Prettier định dạng, còn CSSTree tạo cú pháp gọn thay vì tối ưu toàn bộ stylesheet.

Chọn thao tác

Định dạng tạo thụt lề và ngắt dòng nhất quán. Chọn hai hoặc bốn dấu cách theo dự án.

Minify thu gọn CSS hợp lệ nhưng giữ khoảng trắng bắt buộc và chú thích giấy phép bắt đầu bằng dấu chấm than. Công cụ tối ưu riêng có thể tiếp tục đơn giản hóa đầu ra.

Ví dụ
Đầu vào
.card { color: red; padding: 8px; }
Kết quả
.card{color:red;padding:8px}

Minh họa cú pháp thu gọn; chọn Rút gọn CSS để tạo dạng này.

Giới hạn phân tích và chuyển đổi

Công cụ không xóa selector không dùng, gộp quy tắc, đổi URL tài nguyên hay tải import. Hãy kiểm tra kết quả trong ngữ cảnh ứng dụng gốc.

Đầu vào là CSS, không phải Sass hoặc Less. Lỗi phân tích được hiển thị; không thể xuất kết quả cũ sau khi dữ liệu hoặc cài đặt đổi.

Xuất stylesheet

Sao chép lấy toàn bộ kết quả hiện tại; Tải xuống lưu styles.css. Hai thao tác không sửa tệp nguồn hay tự cài stylesheet vào dự án.

Giới hạn xử lý

Đầu vào văn bản tối đa 1 MiB. Chuyển đổi CSS và HTML chạy trong Worker với giới hạn 30 giây. Công cụ màu dùng sRGB; kiểu dáng được tạo là bản xem trước và cần kiểm thử trong bố cục của bạn.

?

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

Minify có xóa CSS không dùng không?

Không. Nó thu gọn cú pháp mà không phân tích HTML hay xác định selector đang dùng.

Có giữ chú thích giấy phép không?

Minify giữ chú thích bắt đầu bằng /*! và bỏ chú thích thường. Kiểm tra đầu ra nếu dự án có yêu cầu thông báo bổ sung.

Có thể dán Sass hoặc Less không?

Công cụ phân tích CSS và không chạy trình biên dịch Sass hoặc Less. Hãy biên dịch nguồn preprocessor trước.

Vì sao Sao chép bị tắt sau khi sửa đầu vào?

Đầu ra đang hiển thị thuộc dữ liệu hoặc cài đặt cũ. Chạy lại thao tác để tạo kết quả hiện tại.

Stylesheet có được tải lên không?

Không. Phân tích và chuyển đổi diễn ra trong trình duyệt. Tệp được đọc cục bộ; Tải xuống tạo tệp kết quả mới.

Tìm công cụ tiếp theo

Ngôn ngữ

Đổi ngôn ngữ? Nội dung làm việc hiện tại sẽ bị xóa. Hãy sao chép hoặc tải xuống dữ liệu cần giữ trước.