Định Dạng CSS miễn phí
Định dạng CSS đã nén với thụt lề nhất quán, hoặc nén CSS lại. Có tùy chọn sắp xếp thuộc tính theo bảng chữ cái để so sánh khác biệt dễ dự đoán hơn.
Thả tệp vào đây hoặc nhấp để chọn
CSS · được xử lý trên thiết bị của bạn
hoặc nhấn Ctrl+V để dán từ bảng nhớ tạm
Kết quả sẽ hiển thị tại đây…Công dụng phổ biến
- Gỡ Lỗi CSS Sản XuấtXem CSS được thu nhỏ từ các trang web sản xuất ở định dạng có thể đọc được để tìm và kỹ thuật đảo ngược kiểu.
- Thực Thi Kiểu CSS NhómChạy CSS do đội gửi thông qua một beautifier nhất quán để diff là về nội dung, không phải định dạng.
- Định Dạng CSS Được Tiền Tố Nhà Cung CấpCSS có tiền tố nhà cung cấp (đầu ra autoprefixer) thường có rất nhiều biến thể -webkit-, -moz-, -ms-. Định dạng để kiểm tra.
- Tìm Hiểu từ CSS ProHọc CSS từ các hệ thống thiết kế nổi tiếng bằng cách định dạng đầu ra biên dịch của chúng.
- Định Dạng CSS cho Báo Cáo LỗiKhi nộp các lỗi CSS, CSS được định dạng sẽ dễ dàng hơn nhiều để các nhà xem xét đọc và hiểu.
Cách hoạt động
Công cụ này định dạng CSS bằng bộ phân tích đệ quy tự viết tích hợp trực tiếp trong trang — không thư viện bên thứ ba, không gọi máy chủ. Bộ phân tích duyệt CSS từng ký tự, xử lý đúng chuỗi trong dấu nháy, giá trị url(), at-rule lồng nhau và chú thích vốn làm rối các cách tiếp cận dựa trên regex đơn giản.
- 1Tách token ở mức ký tựHàm walkCss quét đầu vào thô từng ký tự một, theo dõi trạng thái dấu nháy và độ sâu dấu ngoặc để dấu chấm phẩy hoặc dấu ngoặc nhọn bên trong url(), giá trị chuỗi hoặc chú thích không bao giờ bị nhầm là dấu phân cách cấu trúc.
- 2Tách khối và khai báoKhi bộ quét tìm thấy dấu ngoặc nhọn mở ở cấp cao nhất, nó lấy phần mở đầu (selector hoặc từ khóa at-rule) và xử lý đệ quy phần thân khối — phần này có thể chứa các quy tắc lồng nhau (@media, @supports, CSS nesting gốc) được xử lý ở độ sâu đệ quy lớn hơn.
- 3Sắp xếp thuộc tính và thụt lềCác khai báo trong mỗi khối được gom thành một nhóm, rồi tùy chọn sắp xếp theo thứ tự chữ cái của tên thuộc tính trước khi ghi ra với độ thụt lề đã chọn (2 hoặc 4 dấu cách). Chế độ thu gọn bỏ hoàn toàn khoảng trắng và loại bỏ chú thích.
- 4Đầu ra tức thì trong trình duyệtKết quả xuất hiện khi bạn gõ nhờ hook useMemo — không có gì được gửi đi. CSS đã định dạng hoặc thu gọn có thể được sao chép vào bộ nhớ tạm hoặc tải về dạng tệp .css, và bảng hiển thị chênh lệch kích thước so với bản gốc.
Công cụ liên quan
Định Dạng & Nén HTML
In đẹp hoặc nén HTML với thụt lề lồng nhau chuẩn. Giữ nguyên nội dung bên trong các khối <pre>, <script>, <style>.
Định Dạng & Làm Đẹp SQL
In đẹp các truy vấn SQL với thụt lề chuẩn, kiểu chữ từ khóa có thể cấu hình và ngắt dòng ở các mệnh đề chính. Hoạt động với bất kỳ phương ngữ SQL nào.
Nén & Định Dạng CSS
Nén CSS để giảm kích thước tệp hoặc định dạng CSS đã nén để dễ đọc. Tức thì, trên trình duyệt.