Công cụ dùng bộ quét hiểu cú pháp thay vì tách mã một cách máy móc tại dấu ngoặc nhọn hay dấu chấm phẩy. Chuỗi, chú thích, hàm, bộ chọn thuộc tính và khối lồng nhau đều được theo dõi, nên dấu câu bên trong URL hoặc giá trị có dấu nháy vẫn được giữ nguyên.
Công cụ định dạng CSS miễn phí
Chạy hoàn toàn trên trình duyệt của bạn - không tải lên, không cần đăng ký.
CSS đầu vào
CSS đã định dạng
Dán CSS để bắt đầu định dạng
Công cụ định dạng CSS dùng để làm gì?
Công cụ định dạng CSS biến stylesheet bị nén hoặc có khoảng cách thiếu nhất quán thành mã dễ đọc với cách thụt lề và xuống dòng đều đặn. Dán CSS, chọn hai dấu cách, bốn dấu cách hoặc tab, sau đó sao chép hay tải kết quả xuống. Mọi thao tác diễn ra trong trình duyệt và giữ nguyên thứ tự khai báo.
Cách dùng
- 1Dán CSS. Đưa stylesheet, khối bộ chọn hoặc đoạn CSS đã nén vào ô nhập.
- 2Chọn thụt lề. Chọn hai dấu cách, bốn dấu cách hoặc tab. Kết quả đã định dạng sẽ cập nhật ngay.
- 3Kiểm tra trạng thái. Xem số liệu cấu trúc hoặc sửa dấu phân cách, chú thích hay chuỗi chưa đóng.
- 4Sao chép hoặc tải xuống. Sao chép CSS đã định dạng vào clipboard hoặc lưu thành formatted.css.
Dành cho ai
- Lập trình viên front-end mở rộng CSS dùng trong môi trường thật để đọc và tìm lỗi thuận tiện hơn.
- Người đánh giá mã chuẩn hóa thụt lề trước khi so sánh stylesheet hoặc đoạn mã trong pull request.
- Người học nhìn rõ cấu trúc của media query, bộ chọn và khối khai báo lồng nhau.
- Nhóm hỗ trợ và QA làm gọn CSS lấy từ công cụ kiểm tra của trình duyệt trước khi đưa vào phiếu lỗi.
Câu hỏi thường gặp
Công cụ định dạng CSS có miễn phí không?
Có. Bạn có thể định dạng lượng CSS mà trình duyệt xử lý thoải mái. Không cần tài khoản, cài đặt hay hạn mức sử dụng, và kết quả xuất hiện ngay.
CSS của tôi có được tải lên máy chủ không?
Không. Quá trình định dạng chạy cục bộ trong trình duyệt. CSS đã dán chỉ nằm trong trình soạn thảo của trang và không được gửi đến API, vì vậy có thể dùng cho mã dự án riêng tư.
Tôi có thể định dạng bao nhiêu CSS?
Công cụ không đặt giới hạn ký tự cố định. Stylesheet tự sinh rất lớn vẫn phụ thuộc vào bộ nhớ thiết bị và trình duyệt, còn CSS thông thường của trang web, thành phần hay email sẽ được xử lý nhanh.
Định dạng có làm thay đổi cách CSS hoạt động không?
Công cụ chỉ thay đổi khoảng trắng và cách xuống dòng, đồng thời giữ nguyên bộ chọn, khai báo, chú thích, chuỗi có dấu nháy và thứ tự của chúng. Hãy xem lại kết quả trước khi phát hành nếu mã dùng cú pháp thử nghiệm hoặc escape nhạy với khoảng trắng.
Công cụ có kiểm tra tính hợp lệ của thuộc tính CSS không?
Không. Công cụ chỉ kiểm tra sự cân bằng của ngoặc nhọn, ngoặc vuông, ngoặc tròn, chú thích và chuỗi. Nó không xác định từng thuộc tính, giá trị hay tính năng riêng của trình duyệt có hợp lệ về ngữ nghĩa hay không.
Có thể định dạng media query và CSS lồng nhau không?
Có. Các khối trong at-rule như media, supports, container, layer và keyframes được thụt lề theo độ sâu. Bộ chọn lồng nhau hiện đại cũng được định dạng mà không làm đổi chuỗi hay đối số hàm.