Làm đẹp/định dạng CSS trực tuyến

Tính năng chính

Công cụ này cung cấp hai chức năng chính: làm đẹp mã CSS (thêm khoảng trắng, xuống dòng để dễ đọc) và nén mã CSS (loại bỏ khoảng trắng, chú thích để giảm kích thước). Bạn có thể chọn kiểu thụt lề phù hợp với dự án của mình.

Ví dụ cụ thể

Với mã CSS đầu vào: body{color:red;margin:0;}

Khi chọn Beautify với thụt lề 2 khoảng trắng, kết quả sẽ là:

body {
  color: red;
  margin: 0;
}

Khi chọn Minify, kết quả sẽ là: body{color:red;margin:0} (loại bỏ khoảng trắng và dấu chấm phẩy cuối cùng trước dấu đóng ngoặc).

Tham số và giới hạn

• Giới hạn đầu vào: 500.000 ký tự mỗi lần.
• Chế độ thụt lề: 2 khoảng trắng, 4 khoảng trắng hoặc tab.
• Chế độ xử lý: Beautify hoặc Minify.
• Không tạo source map, không tính kích thước gzip.

Lưu ý về độ chính xác

Công cụ này là trình định dạng văn bản nhẹ, không phải trình phân tích cú pháp CSS hoàn chỉnh. Với các chuỗi phức tạp, giá trị thuộc tính tùy chỉnh, URL dữ liệu, chú thích dùng làm chỉ thị hoặc CSS sai cú pháp, bạn nên kiểm tra lại trong trình duyệt hoặc quy trình xây dựng vì dấu câu bên trong có thể có ý nghĩa đặc biệt.

Quyền riêng tư

Toàn bộ quá trình xử lý diễn ra trong trình duyệt của bạn; không có tệp nào được tải lên máy chủ.

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

1. Tôi có thể xử lý mã CSS có chứa biến (custom properties) không?

Có, công cụ sẽ giữ nguyên giá trị của biến, nhưng nếu giá trị chứa dấu ngoặc hoặc dấu chấm phẩy bên trong, kết quả có thể không chính xác. Hãy kiểm tra thủ công.

2. Tại sao kết quả minify của tôi không giảm kích thước nhiều?

Minify chỉ loại bỏ khoảng trắng và chú thích, không thực hiện tối ưu hóa sâu như gộp thuộc tính hay loại bỏ mã không dùng. Nếu mã đã được viết gọn, mức giảm sẽ ít.

3. Công cụ có tự động thêm tiền tố vendor (như -webkit-) không?

Không, công cụ không thêm tiền tố vendor, không sắp xếp lại thuộc tính, không sửa selector hay kiểm tra tính tương thích.