Công cụ định dạng CSS
Làm đẹp CSS bằng Prettier: mỗi khai báo một dòng, khoảng cách nhất quán, 2 hoặc 4 dấu cách hay tab, media query lồng nhau gọn gàng. Chạy trong trình duyệt.
Chạy hoàn toàn trong trình duyệt. Dữ liệu của bạn không bao giờ bị tải lên.
Công cụ Liên quan
Xem Tất cảĐịnh dạng CSS là gì?
Công cụ định dạng CSS biến stylesheet đã rút gọn hoặc thiếu nhất quán thành CSS dễ đọc bằng Prettier: mỗi rule và khai báo nằm trên một dòng riêng, khoảng cách quanh dấu hai chấm và selector được chuẩn hóa, các at-rule lồng nhau được thụt lề.
Cách sử dụng Định dạng CSS
- Dán CSS vào ô nhập hoặc bấm Tải ví dụ.
- Chọn Thụt lề.
- Bấm Định dạng (kết quả cũng cập nhật khi bạn gõ).
- Sao chép hoặc tải xuống CSS đã định dạng.
Ví dụ
a{color:red;margin:0 auto} a {
color: red;
margin: 0 auto;
} Khi nào nên dùng Định dạng CSS
Dùng để đọc CSS đã rút gọn của một website, chuẩn hóa stylesheet viết tay trước khi review hoặc định dạng đoạn CSS cho tài liệu. Công cụ không kiểm tra tên hay giá trị thuộc tính – hãy dùng Trình kiểm tra CSS cho việc đó. Với SCSS hoặc Less, hãy chọn ngôn ngữ tương ứng trong Công cụ làm đẹp mã.
Định dạng CSS hoạt động như thế nào
Stylesheet được phân tích bằng parser dựa trên PostCSS của Prettier và in ra theo quy tắc CSS của Prettier: sau mỗi dấu hai chấm có một dấu cách, mỗi khai báo kết thúc bằng dấu chấm phẩy, và các selector trong danh sách nằm trên những dòng riêng. Khối chưa đóng hoặc lỗi cú pháp khác được báo kèm dòng và cột.
Các Trường Hợp Sử Dụng Phổ Biến
- Giải nén CSS đã rút gọn để gỡ lỗi site production
- Chuẩn hóa định dạng trước khi review code
- Định dạng đoạn CSS cho bài blog
- Làm sạch CSS xuất từ công cụ thiết kế
Lưu Ý Bảo Mật
Mọi thứ chạy cục bộ trong trình duyệt của bạn; đoạn mã bạn dán vào không được tải lên đâu cả.
Câu Hỏi Thường Gặp
Công cụ có sắp xếp lại thuộc tính không?
Không, các khai báo giữ nguyên thứ tự ban đầu.
Có định dạng được SCSS hoặc Less không?
Hãy dùng Công cụ làm đẹp mã và chọn SCSS hoặc Less.
Chú thích có được giữ lại không?
Có, chú thích được giữ nguyên.