Giới hạn sử dụng hợp lý áp dụng cho công cụ này.

Công cụ này có hữu ích với bạn không?

4/5 từ 38 đánh giá

Định dạng lại CSS đã nén thành mã dễ đọc; các quy tắc lồng nhau như @media và @keyframes có thể không định dạng đúng.

Giới thiệu

CSS đã thu nhỏ hoặc nén thủ công hiệu quả cho trình duyệt tải xuống nhưng khó đọc đối với con người — mọi thứ dính liền nhau, không có ngắt dòng, không có thụt lề, và thường không có bình luận. Làm đẹp làm ngược lại với thu nhỏ: nó lấy CSS ở trạng thái nén đó và xây dựng lại các ngắt dòng, khoảng cách, và thụt lề giúp nó dễ đọc trở lại, mà không thay đổi những gì bất kỳ quy tắc nào thực hiện. Điều này quan trọng bất cứ khi nào một con người, chứ không phải trình duyệt, thực sự cần xem xét CSS — để học hỏi từ nó, kiểm tra nó, hoặc tìm một quy tắc cụ thể bên trong nó.

Cách công cụ này định dạng CSS của bạn

Dán CSS vào và nhấp Làm đẹp sẽ xây dựng lại mã theo mỗi khối một quy tắc: mỗi bộ chọn trên một dòng riêng, theo sau là các thuộc tính của nó được thụt lề bên dưới, mỗi thuộc tính một dòng. Bản thân các giá trị thuộc tính — màu sắc, đơn vị, dạng viết tắt — được giữ nguyên chính xác như bạn đã dán vào; chỉ có khoảng cách và cấu trúc thay đổi. Có hai chi tiết đáng biết về cách các bộ chọn và giá trị được xử lý:

Các bộ chọn được nhóm vẫn giữ nguyên với nhau. Một quy tắc với nhiều bộ chọn phân tách bằng dấu phẩy, như .card, .card-highlight, .card-featured { ... }, được giữ nguyên trên một dòng bộ chọn duy nhất thay vì bị tách ra từng dòng một như một số công cụ định dạng khác làm.
Các giá trị chứa dấu hai chấm được xử lý đúng cách. Chỉ dấu hai chấm đầu tiên trong mỗi khai báo được xem là dấu phân cách giữa thuộc tính và giá trị của nó, vì vậy một giá trị tự nó chứa dấu hai chấm — một địa chỉ web như background: url(http://example.com/img.png) là trường hợp phổ biến nhất — không bị cắt sai vị trí.

Các bình luận bị loại bỏ như một phần của quá trình này, điều đáng biết nếu bảng định kiểu của bạn bao gồm một thông báo bản quyền hoặc ghi công — xem lưu ý bên dưới.

Những gì cần biết trước khi sử dụng

Công cụ này hoạt động tốt trên CSS đơn giản, phẳng — một danh sách thuần túy các bộ chọn và thuộc tính của chúng. Nó có hai giới hạn cụ thể đáng biết trước khi dán mã thực tế:

Các quy tắc lồng nhau không định dạng đúng. Nếu CSS của bạn bao gồm một truy vấn @media, một khối @keyframes, hoặc bất kỳ quy tắc nào lồng bên trong một khối khác, phần xung quanh nó có khả năng bị lộn xộn thay vì được thụt lề gọn gàng. Công cụ này xây dựng lại cấu trúc bằng cách khớp dấu ngoặc mở và đóng từng cặp một, và không theo dõi độ sâu của một dấu ngoặc bên trong một khối khác — vì vậy một quy tắc lồng bên trong @media sẽ có nội dung bị trộn lẫn với chính khối @media thay vì vẫn được lồng đúng cách. Nếu bảng định kiểu của bạn sử dụng truy vấn media hoặc keyframes, hãy kiểm tra kỹ phần đó của kết quả, hoặc làm đẹp một phiên bản đã loại bỏ các phần lồng nhau.
Mọi bình luận đều bị loại bỏ, không có ngoại lệ. Khác với CSS Minifier trên trang này, vốn giữ lại các bình luận được viết dưới dạng thông báo bản quyền hoặc ghi công, công cụ làm đẹp này loại bỏ mọi bình luận trong mã đã dán. Nếu bảng định kiểu của bạn bao gồm tiêu đề bản quyền cần giữ lại, hãy lưu một bản sao trước khi làm đẹp.

Không điều nào trong số này ảnh hưởng đến những gì CSS thực hiện — các quy tắc và giá trị cơ bản không thay đổi, chỉ có mức độ cấu trúc được định dạng lại đúng cách thành dạng dễ đọc.

Khi nào đây là công cụ phù hợp

Đọc CSS đã thu nhỏ của người khác để học hỏi từ nó. Xem bảng định kiểu của một trang web thực tế thông qua công cụ dành cho nhà phát triển của trình duyệt thường hiển thị CSS nén, khó đọc — dán nó vào đây và làm đẹp nó giúp bạn có thể thực sự nghiên cứu cách một bố cục hoặc thành phần được xây dựng, một cách sử dụng năng lực số thực sự vượt ra ngoài việc chỉ chạy công cụ trên mã của riêng bạn.
Xem xét CSS đã nộp của một học sinh. Mã được sao chép và dán giữa các trình soạn thảo đôi khi mất định dạng gốc; làm đẹp nó trước khi đọc giúp việc xem xét và phản hồi nhanh hơn.
Gỡ lỗi một bố cục không hoạt động. CSS dày đặc, chưa định dạng khó quét hơn để tìm quy tắc gây ra vấn đề — định dạng nó trước thường giúp vấn đề thực sự dễ phát hiện hơn.

Nếu CSS bạn đang làm việc dựa vào truy vấn @media hoặc các khối lồng nhau khác và bạn cần định dạng đáng tin cậy, công cụ định dạng tích hợp sẵn của một trình soạn thảo mã sẽ phù hợp hơn công cụ này — xem giới hạn ở trên. Đối với một bảng định kiểu phẳng không có quy tắc lồng nhau, điều này bao phủ nhiều công việc thiết kế web nhập môn, công cụ này là một cách nhanh chóng để có kết quả dễ đọc mà không cần cài đặt gì.

Ví dụ

Một học sinh thấy CSS của một trang mẫu thú vị và muốn hiểu cách một bố cục thẻ được xây dựng. Bảng định kiểu trực tiếp bị thu nhỏ thành một dòng dày đặc, vì vậy trước khi có thể thực sự đọc nó, các em dán nó vào công cụ này và làm đẹp nó. Các quy tắc tách ra thành một cấu trúc dễ đọc, giúp có thể thấy bộ chọn nào điều khiển phần nào của bố cục, khoảng cách được thiết lập bằng margin và padding như thế nào, và màu sắc nào được tái sử dụng trong toàn bộ thiết kế. Nếu bảng định kiểu đã sao chép bao gồm các truy vấn @media cho hành vi phản hồi, phần đó cần được xem lại kỹ hơn sau đó — xem "Những gì cần biết trước khi sử dụng" ở trên.

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

Việc làm đẹp có thay đổi những gì CSS thực hiện không?

Không. Chỉ có khoảng cách, ngắt dòng, và thụt lề thay đổi — các bộ chọn, thuộc tính, và giá trị vẫn giữ nguyên.

Điều gì xảy ra với các bình luận trong CSS của tôi?

Chúng bị loại bỏ. Công cụ này không giữ lại các bình luận bản quyền hoặc ghi công theo cách CSS Minifier làm — hãy lưu một bản sao trước nếu bạn cần giữ lại một bình luận.

Nó có định dạng đúng CSS với truy vấn media không?

Không đáng tin cậy. Các quy tắc lồng bên trong @media, @keyframes, hoặc các khối tương tự có thể xuất hiện lộn xộn — hãy kiểm tra phần đó của kết quả, hoặc dùng công cụ định dạng của một trình soạn thảo mã cho các bảng định kiểu phụ thuộc nhiều vào việc lồng nhau.

Tôi có thể làm đẹp CSS đã thu nhỏ được sao chép từ trang web khác không?

Có — đó là một cách sử dụng phổ biến, hợp pháp để học cách một trang được xây dựng. Hãy lưu ý các điều khoản riêng của trang web nguồn nếu bạn định tái sử dụng mã thực tế thay vì chỉ nghiên cứu nó.

Mã của tôi có được lưu ở đâu không?

Không. CSS đã dán được xử lý để tạo ra kết quả đã định dạng và không được lưu trữ sau đó; chỉ có việc công cụ đã được sử dụng được ghi lại, không phải bản thân mã.