Định dạng CSS
Làm đẹp CSS với thụt lề gọn gàng, hoặc thu gọn để giảm kích thước tệp. Xử lý media query, calc() và chú thích giấy phép.
Cách dùng Định dạng CSS
- 01
Dán CSS của bạn vào ô đầu vào.
- 02
Chọn Làm đẹp để định dạng hoặc Thu gọn để nén.
- 03
Chọn kích thước thụt lề, rồi sao chép kết quả.
Bộ định dạng CSS làm gì
Đây là bộ định dạng CSS làm đẹp các tệp kiểu với thụt lề gọn gàng và nhất quán, hoặc nén chúng lại để giảm dung lượng tệp. Bạn chọn mức thụt lề khi làm đẹp, và chuyển sang nén khi muốn kết quả nhỏ nhất.
Khi nào nên làm đẹp và khi nào nên nén
CSS dễ đọc thì dễ lướt qua, dễ duyệt và dễ gỡ lỗi hơn: khi mỗi quy tắc và mỗi khai báo được thụt lề nhất quán, bạn thấy ngay các bộ chọn, mức lồng nhau và hình hài của các truy vấn phương tiện.
Nén là dành cho môi trường thật. Nó bỏ đi khoảng trắng và chú thích mà trình duyệt không cần, nên tệp tải nhanh hơn. Với một tệp kiểu lớn, phần tiết kiệm cộng dồn lại đáng kể, nhất là trước khi máy chủ nén gzip.
Nén cẩn trọng với calc() và truy vấn phương tiện
Bộ nén rất cẩn trọng ở những chỗ quan trọng. Nó giữ các dấu cách quanh dấu cộng và dấu trừ bên trong calc(), nên calc(100% - 30px) vẫn hợp lệ, và nó chỉ bỏ dấu cách quanh các ký tự cấu trúc như dấu ngoặc nhọn, dấu hai chấm và dấu chấm phẩy. Nó cũng xử lý đúng các truy vấn phương tiện lồng nhau.
Chú thích giấy phép được giữ lại
Các chú thích giấy phép viết theo dạng /*! ... */ được giữ lại, đây là quy ước chuẩn để giữ thông báo bản quyền và giấy phép trong kết quả đã nén ngay cả khi các chú thích thường bị bỏ.
Chạy trong trình duyệt của bạn
Cả việc làm đẹp lẫn việc nén đều chạy hoàn toàn trong trình duyệt của bạn, nên các tệp kiểu không bao giờ rời khỏi thiết bị. Công cụ định dạng cho dễ đọc và cho nhẹ hơn; nó không kiểm tra CSS của bạn có đúng hay không.
Câu hỏi thường gặp
Thu gọn có làm hỏng biểu thức calc() không?
Không. Trình thu gọn giữ các dấu cách quanh dấu cộng và trừ bên trong giá trị, nên calc(100% - 30px) vẫn hợp lệ. Nó chỉ loại bỏ dấu cách quanh các ký tự cấu trúc như dấu ngoặc nhọn, dấu hai chấm và dấu chấm phẩy.
Chú thích có bị loại bỏ khi thu gọn không?
Chú thích thông thường bị loại bỏ để tiết kiệm dung lượng, nhưng chú thích giấy phép viết dưới dạng /*! ... */ được giữ lại, đây là quy ước chuẩn để giữ thông báo bản quyền.
CSS của tôi có được tải lên đâu không?
Không. Cả Làm đẹp và Thu gọn đều chạy hoàn toàn trong trình duyệt của bạn, nên các stylesheet của bạn không bao giờ rời khỏi thiết bị.