Cách sử dụng

Dán CSS vào ô nhập, mở tệp .css hoặc dùng thử ví dụ.
Chọn Làm đẹp để có mã dễ đọc hoặc Rút gọn để có đầu ra nhỏ nhất.
Khi làm đẹp, chọn 2 dấu cách, 4 dấu cách hoặc tab.
Sao chép kết quả hoặc tải xuống dưới dạng tệp .css. Nếu dấu ngoặc hoặc dấu nháy không cân bằng, thông báo lỗi sẽ hiển thị dòng và cột.

Cách hoạt động

Công cụ trước tiên tách stylesheet thành các token: chuỗi trong dấu nháy đơn hoặc nháy kép, giá trị url(…), chú thích, dấu ngoặc nhọn và dấu chấm phẩy. Vì chuỗi và url() là các token đơn lẻ, dấu chấm phẩy bên trong data URI hoặc dấu ngoặc nhọn bên trong content: "{ }" không bao giờ làm sai lệch cấu trúc và nội dung của chúng được sao chép nguyên văn.

Beautify đặt mỗi selector trong danh sách selector trên một dòng riêng, thêm khoảng trắng quanh các tổ hợp con, anh chị em và liền kề (>, ~, +), và viết mỗi khai báo dưới dạng “property: value;” trên dòng riêng. Các khối bên trong @media, @supports, @layer, @container và CSS lồng nhau tự nhiên được thụt lề một cấp theo độ sâu. Dấu chấm phẩy bị thiếu sau khai báo cuối cùng của khối được thêm vào. Chú thích được giữ nguyên vị trí.

Minify xóa chú thích (trừ chú thích bản quyền /*! … */), gộp khoảng trắng, xóa khoảng trắng quanh dấu ngoặc nhọn, dấu hai chấm, dấu chấm phẩy, dấu phẩy và tổ hợp selector, đồng thời bỏ dấu chấm phẩy trước mỗi dấu đóng ngoặc nhọn. Các khoảng trắng làm thay đổi nghĩa được giữ lại: tổ hợp hậu duệ trong “.a .b”, khoảng trắng trong “a :focus”, và khoảng trắng bên trong các giá trị như calc(100% - 2px). “! important” được chuẩn hóa thành “!important”.

Công cụ không viết lại giá trị: màu sắc, đơn vị và số 0 được giữ nguyên như đã viết, và các rule không bị gộp hay sắp xếp lại. Tệp SCSS hoặc Less có lồng ghép thuần túy thường hoạt động, nhưng cú pháp riêng của chúng như chú thích // hoặc mixins không được hiểu.

Ví dụ

Đọc tệp framework đã minify

Dán một đoạn bootstrap.min.css một dòng và chọn Beautify với 2 khoảng trắng để xem từng rule, các media query và rule lồng bên trong trên các dòng riêng, có thụt lề.

Triển khai stylesheet viết tay

Minify một stylesheet 12 KB có chú thích và thụt lề trước khi nhúng trực tiếp vào mẫu email hoặc phần head của trang. Phần tóm tắt hiển thị số ký tự trước và sau.

Tìm dấu ngoặc nhọn bị thiếu

Một stylesheet ngừng áp dụng giữa chừng. Công cụ báo lỗi “Dấu { này không bao giờ có dấu } đóng tương ứng” kèm dòng của rule bị thiếu dấu đóng ngoặc nhọn.

Câu hỏi thường gặp

CSS đã rút gọn từ công cụ này có an toàn để dùng trong production không?

Nó chỉ loại bỏ chú thích và khoảng trắng mà CSS bỏ qua, nên các quy tắc hoạt động như cũ. Công cụ không thực hiện các tối ưu sâu như các công cụ build như gộp quy tắc hoặc rút gọn màu, nên kết quả có thể lớn hơn một chút so với chúng.

Tại sao dấu cách được giữ trong “a :focus”?

Trong selector, dấu cách là tổ hợp hậu duệ. “a :focus” nghĩa là phần tử được focus nằm trong một liên kết, còn “a:focus” nghĩa là chính liên kết được focus. Bỏ dấu cách đó sẽ thay đổi những phần tử khớp.

Công cụ có định dạng được SCSS hoặc Less không?

Các quy tắc lồng nhau thông thường được định dạng đúng. Cú pháp chỉ có trong preprocessor như chú thích //, mixin có đối số hoặc khối @if không được hiểu và có thể bị định dạng sai lệch, vì vậy hãy kiểm tra kết quả.

Chú thích giấy phép có bị loại bỏ khi rút gọn không?

Các chú thích bắt đầu bằng /*! được giữ lại, đây là quy ước thông thường cho thông báo giấy phép và bản quyền. Tất cả chú thích khác đều bị loại bỏ.

Quyền riêng tư

CSS của bạn chỉ được xử lý trong trình duyệt. Không có gì bị tải lên, lưu trữ hoặc đưa vào phân tích.