🎨

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

Làm đẹp CSS đã nén để dễ đọc hoặc thu gọn CSS để đưa vào sản xuất. Mọi thứ chạy trong trình duyệt của bạn · không có máy chủ, không theo dõi.

Công cụ nhà phát triển Chạy cục bộ Không gửi dữ liệu
làm đẹp css Thu gọn CSS Bộ định dạng chỉ phía máy khách
Kích thước thụt lề:
Đầu vào CSS
0 ký tự
->
CSS đã định dạng
0 ký tự Xử lý thất bại
💡
Làm đẹp định dạng CSS đã nén hoặc thu gọn thành mã dễ đọc với thụt lề và ngắt dòng phù hợp — rất hữu ích khi gỡ lỗi hoặc đọc bảng kiểu của bên thứ ba. Thu gọn loại bỏ chú thích và khoảng trắng để giảm kích thước tệp cho triển khai môi trường thực tế. Cả hai chế độ đều không sửa đổi giá trị thuộc tính.

Công cụ định dạng & thu gọn CSS là gì?

Công cụ định dạng & thu gọn CSS giúp bạn chuyển đổi giữa mã stylesheet dễ đọc và đầu ra gọn nhẹ sẵn sàng cho production. Công cụ hữu ích để gỡ lỗi CSS đã biên dịch, xem lại selector và khai báo, và nén stylesheet lần nữa trước khi phát hành.

Cách sử dụng công cụ định dạng & thu gọn CSS

  1. Dán CSS bạn muốn làm đẹp hoặc nén.
  2. Chọn chế độ định dạng hoặc thu gọn và điều chỉnh thụt lề nếu cần.
  3. Xem lại đầu ra để đảm bảo dễ đọc hoặc giảm kích thước tệp.
  4. Sao chép kết quả trở lại stylesheet hoặc quy trình build của bạn.

Công cụ liên quan

⚡
minify CSS
Thu gọn CSS bằng cách xóa chú thích và khoảng trắng
 📝
Công cụ định dạng JS
Làm đẹp hoặc thu gọn mã JavaScript với định dạng kiểu Prettier
 🏷️
Công cụ định dạng HTML
Làm đẹp hoặc thu gọn HTML với thụt lề tùy chỉnh
Tìm hiểu về công cụ định dạng & thu gọn CSS ▾
Ví dụ
Đầu vào .card{display:flex;padding:16px;background:#fff;border-radius:8px}
Đầu ra .card { display: flex; padding: 16px; background: #fff; border-radius: 8px; }
Các trường hợp sử dụng phổ biến
  • Làm đẹp các stylesheet đã thu gọn trước khi gỡ lỗi sự cố bố cục
  • Xem lại CSS được tạo từ công cụ thiết kế hoặc đầu ra bản dựng
  • Thu gọn lại CSS sau khi chỉnh sửa để triển khai production
  • Kiểm tra selector và khai báo rõ ràng hơn khi review mã
Vì sao nên dùng công cụ này
  • Hữu ích để gỡ lỗi các stylesheet lớn hoặc đã thu gọn.
  • Cho phép chuyển nhanh giữa đầu ra CSS dễ đọc và thu gọn.
  • Chạy cục bộ nên stylesheet nguồn không bao giờ rời khỏi trình duyệt.
Câu hỏi thường gặp
Định dạng có làm thay đổi hành vi của CSS không?

No. Adding whitespace and line breaks to CSS has no effect on how browsers parse and apply the styles. The formatted output is functionally identical to the original.

Tôi có thể định dạng CSS chứa tiền tố nhà cung cấp không?

Có. Các thuộc tính có tiền tố nhà cung cấp như -webkit-transform hoặc -moz-appearance được coi là thuộc tính chuẩn và được định dạng bình thường.

Công cụ có xử lý cú pháp SCSS hoặc Less không?

Trình định dạng được tối ưu cho CSS chuẩn. Cú pháp đặc thù của SCSS/Less như lồng nhau hoặc biến có thể không được định dạng đúng; hãy dùng trình định dạng SCSS/Less chuyên dụng cho các tệp đó.

Tôi có nên định dạng CSS trước khi dùng trong production không?

Không. Trong production, bạn nên thu gọn CSS để giảm kích thước tệp. Dùng Trình định dạng CSS trong quá trình phát triển và review mã, sau đó thu gọn trước khi triển khai.