Làm đẹp CSS ngay trên trình duyệt
Trình Định Dạng CSS biến các stylesheet đã nén hoặc lộn xộn thành mã CSS gọn gàng, thụt lề chuẩn theo thời gian thực — ngay trong trình duyệt. Dán một stylesheet production đã nén hay một mớ quy tắc viết tay, kết quả đã định dạng xuất hiện tức thì ở ô bên phải, mỗi khai báo một dòng và giãn cách đều đặn.
Trường hợp dùng phổ biến
Bung mã đã nén
Dọn dẹp quy tắc
Đọc & học
Cách định dạng CSS
Dán stylesheet của bạn
Gõ hoặc dán CSS vào ô Đầu vào bên trái. Bạn cũng có thể Tải lên một file .css, hoặc bấm Code mẫu để nạp một ví dụ.
Xem kết quả tức thì
Stylesheet đã định dạng và tô sáng cú pháp hiện ra tự động ở ô bên phải khi bạn gõ. Số dòng và bộ đếm dung lượng trực tiếp giúp bạn di chuyển trong các file lớn dễ dàng.
Tùy chỉnh tùy chọn
Chọn thụt lề (2, 3, 4, 8 dấu cách hoặc Tab) và đặt độ rộng dòng để kiểm soát chỗ ngắt các dòng dài. Kết quả được định dạng lại ngay lập tức.
Sao chép hoặc tải về
Bấm Sao chép để lấy kết quả, hoặc Tải về để lưu thành file .css. Dùng Chỉnh sửa để tinh chỉnh kết quả bằng tay trước khi xuất.
Tính năng & Tùy chọn
Tùy chọn định dạng
Việc định dạng CSS của Prettier phần lớn là tự động, với hai điều khiển để điều chỉnh kết quả theo ý bạn. Mỗi thay đổi đều định dạng lại kết quả tức thì.
| Tùy chọn | Lựa chọn | Kiểm soát điều gì |
|---|---|---|
| Thụt lề | 2 · 3 · 4 · 8 dấu cách · Tab | Độ rộng thụt lề và ký tự dùng cho các quy tắc và khai báo lồng nhau. |
| Độ rộng dòng | 80 · 100 · 120 | Độ dài dòng mục tiêu trước khi giá trị dài và danh sách bộ chọn xuống dòng. |
Những gì được định dạng
Bộ chọn & khai báo
Thụt lề nhất quán, mỗi khai báo một dòng và giãn cách gọn gàng quanh dấu hai chấm và dấu ngoặc.
Media query & at-rule
Các @media, @keyframes lồng nhau và at-rule khác được thụt lề và căn chỉnh đúng.
Công cụ tích hợp
Định dạng thời gian thực
Kết quả cập nhật khi bạn gõ, kèm tô sáng cú pháp và số dòng.
Tải lên & tải về
Nạp một file .css trên máy hoặc xuất kết quả đã định dạng chỉ bằng một cú bấm.
Kết quả chỉnh sửa được
Chuyển ô kết quả sang chế độ chỉnh sửa để tinh chỉnh bằng tay trước khi sao chép.
Câu hỏi thường gặp
CSS của tôi có bị gửi lên máy chủ không?
Không. Mọi thao tác định dạng diễn ra cục bộ trong trình duyệt. Stylesheet của bạn không bao giờ được tải lên, ghi log hay lưu trữ, nên an toàn để định dạng cả CSS nội bộ hoặc chưa phát hành.
Công cụ dùng bộ định dạng nào?
Nó dùng Prettier với bộ phân tích PostCSS, cùng một bộ định dạng được dùng rộng rãi để giữ stylesheet nhất quán trong các dự án thực tế. Kết quả tuân theo một phong cách quy chuẩn, đáng tin cậy.
Có xử lý được media query và keyframes không?
Có. Các at-rule lồng nhau như @media và @keyframes được thụt lề và căn chỉnh đúng, cùng với các bộ chọn và khối khai báo thông thường.
Tôi có tùy chỉnh được kết quả không?
Có. Đặt kích thước thụt lề và độ rộng dòng từ thanh công cụ để kiểm soát thụt lề và chỗ ngắt các dòng dài. Kết quả được định dạng lại ngay để bạn xem trước thay đổi.
Công cụ có nén (minify) CSS luôn không?
Công cụ này chuyên làm đẹp — nó bung và thụt lề CSS cho dễ đọc chứ không nén lại. Để thu nhỏ stylesheet cho production, hãy dùng một công cụ nén CSS chuyên dụng.
Nếu CSS không hợp lệ thì sao?
Nếu bộ phân tích không hiểu được đầu vào, công cụ sẽ hiện thông báo lỗi mô tả vấn đề thay vì tạo ra kết quả sai. Sửa lỗi được báo và kết quả đã định dạng sẽ xuất hiện lại.
Chưa có bình luận nào. Hãy là người đầu tiên!