Định dạng & Làm đẹp CSS
Hướng dẫn sử dụng
CSS Formatter làm đẹp hoặc thu nhỏ mã CSS — bao gồm tệp CSS tiêu chuẩn, đầu ra preprocessor và khối style inline — trực tiếp trong trình duyệt. CSS được tạo tự động, được nén bởi các công cụ build, thường không thể đọc được: các quy tắc trên một dòng, bộ chọn ghép nối và các giá trị viết tắt khiến debug và xem lại trở nên khó khăn. Công cụ này mở rộng CSS thu nhỏ thành định dạng có thể đọc với mỗi khai báo trên một dòng riêng, thụt lề lồng nhau (cho @media queries và @keyframes) và khoảng cách nhất quán giữa bộ chọn, dấu ngoặc nhọn và khai báo. Engine định dạng sử dụng js-beautify được cấu hình đặc biệt cho CSS, với các tùy chọn về số khoảng trắng thụt lề, vị trí dấu ngoặc nhọn mở và xử lý nhiều bộ chọn. Thu nhỏ làm điều ngược lại: xóa tất cả khoảng trắng thừa và nén CSS xuống định dạng nhỏ gọn nhất.
- Dán CSS của bạn — Nhấp vào bảng nhập và dán mã CSS thô hoặc đã thu nhỏ. CSS tiêu chuẩn, Less, Sass đã biên dịch và các khối style inline đều được hỗ trợ.
- Chọn chế độ — Chọn "Làm đẹp" để có đầu ra có thể đọc, có thụt lề, hoặc "Thu nhỏ" để tạo CSS nhỏ gọn sử dụng trong sản xuất.
- Cấu hình thụt lề — Chọn kích thước thụt lề (2 hoặc 4 khoảng trắng). Kích thước nhất quán giúp xem lại code dễ hơn khi làm việc nhóm.
- Kiểm tra đầu ra — Đọc CSS đã định dạng ở bảng bên phải. Kiểm tra xem các khai báo có được căn chỉnh, @media queries có được thụt lề đúng và nhiều bộ chọn có trên các dòng riêng không.
- Sao chép kết quả — Nhấp "Sao chép" để mang CSS đã xử lý vào clipboard. Dán vào trình soạn thảo code, hệ thống thiết kế hoặc codebase.
- So sánh trước và sau — Sử dụng các bảng nhập và đầu ra đặt cạnh nhau để xác minh trực quan rằng định dạng không thay đổi nội dung ngữ nghĩa của CSS — chỉ khoảng cách và căn chỉnh.
Câu hỏi thường gặp
CSS của tôi có được gửi đến máy chủ không?
Không. Tất cả quá trình định dạng và thu gọn CSS diễn ra trong trình duyệt bằng JavaScript thuần. Mã của bạn ở lại trên thiết bị.
Tôi có thể sử dụng công cụ này ngoại tuyến không?
2Kit là một PWA. Sau lần truy cập đầu tiên, công cụ được lưu vào bộ nhớ đệm và hoạt động hoàn toàn ngoại tuyến.
Sự khác biệt giữa làm đẹp và thu gọn CSS là gì?
Làm đẹp định dạng CSS với thụt lề và xuống dòng phù hợp để dễ đọc. Thu gọn loại bỏ tất cả khoảng trắng và chú thích không cần thiết để giảm kích thước tệp cho môi trường sản xuất.
Công cụ này có hỗ trợ CSS hiện đại như biến và nesting không?
Có. Công cụ định dạng sử dụng js-beautify để xử lý CSS tiêu chuẩn bao gồm biến CSS tùy chỉnh (thuộc tính --custom) và hầu hết cú pháp CSS hiện đại.
Công cụ định dạng CSS này có miễn phí không?
Có. 2Kit hoàn toàn miễn phí, không yêu cầu tài khoản và không có giới hạn sử dụng.
Triển khai kỹ thuật
Tất cả quá trình xử lý diễn ra hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào được gửi đến máy chủ. Công cụ này hoạt động hoàn toàn ngoại tuyến như một Ứng dụng Web Lũy tiến (PWA): sau lần truy cập đầu tiên, tất cả trang và tài nguyên được Service Worker lưu vào bộ nhớ đệm và vẫn khả dụng khi không có kết nối internet. Dữ liệu đầu vào của bạn không bao giờ rời khỏi thiết bị, giúp an toàn cho nội dung nhạy cảm như khóa API, mật khẩu, cấu hình riêng tư và tài liệu bí mật.