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.

Mở đầu

CSS đã nén hoặc bị bóp gọn bằng tay thì trình duyệt tải về rất hiệu quả, nhưng người đọc lại rất khó theo — mọi thứ dính liền nhau, không xuống dòng, không thụt lề, và thường cũng chẳng còn chú thích. Làm đẹp thì làm ngược lại việc nén: nó lấy đoạn CSS đang ở trạng thái co cụm ấy và dựng lại những chỗ xuống dòng, khoảng cách và thụt lề vốn khiến nó dễ đọc, mà không đổi bất cứ điều gì các quy tắc đang làm. Chuyện này đáng kể mỗi khi người phải nhìn vào CSS chứ không phải trình duyệt: để học từ nó, để kiểm tra, hoặc để tìm một quy tắc cụ thể nằm bên trong.

Công cụ định dạng CSS của bạn ra sao

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

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

Chú thích bị loại bỏ như một phần của quá trình này, điều đáng biết nếu tệp kiểu của bạn có ghi chú giấy phép hay ghi công — xem lưu ý bên dưới.

Cần biết gì trước khi dùng

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

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

Không điều nào trong hai điều trên ảnh hưởng tới những gì CSS làm — các quy tắc và giá trị bên dưới không đổi; chuyện duy nhất là bao nhiêu phần của cấu trúc được dựng lại đúng thành dạng dễ đọc.

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

Đọc CSS đã nén của người khác để học hỏi. Xem tệp kiểu của một trang thật qua công cụ dành cho nhà phát triển của trình duyệt thường chỉ thấy CSS co cụm, không tài nào đọc nổi — dán vào đây rồi làm đẹp thì mới thật sự nghiên cứu được một bố cục hay một thành phần đã dựng ra sao; đây là cách dùng đúng nghĩa về năng lực số, chứ không chỉ là chạy công cụ trên mã của chính mình.
Xem lại bài CSS học sinh nộp. Mã sao đi chép lại giữa các trình soạn thảo đôi khi mất định dạng gốc; làm đẹp trước khi đọc giúp chấm và nhận xét nhanh hơn.
Dò lỗi một bố cục không chạy. CSS dày đặc, không định dạng thì khó rà tìm quy tắc đang gây chuyện — định dạng trước thường khiến vấn đề thật lộ ra dễ hơn.

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

Ví dụ

Một học sinh thấy CSS của một trang mẫu khá thú vị và muốn hiểu bố cục dạng thẻ được dựng thế nào. Tệp kiểu đang chạy đã bị nén thành một dòng dày đặc, nên trước khi đọc được, em dán nó vào công cụ này và làm đẹp. Các quy tắc tách ra thành cấu trúc dễ đọc, nhờ vậy thấy được bộ chọn nào điều khiển phần nào của bố cục, khoảng cách được đặt bằng margin và padding ra sao, và những màu nào lặp lại xuyên suốt thiết kế. Nếu tệp kiểu vừa chép có truy vấn @media cho hành vi co giãn theo màn hình, đoạn đó cần được xem lại lần nữa sau đó — xem “Cần biết gì trước khi dùng” ở phía trên.

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

Làm đẹp có đổi những gì CSS làm không?

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

Chú thích trong CSS của tôi sẽ ra sao?

Chúng bị bỏ đi. Công cụ này không giữ lại chú thích giấy phép hay ghi công như CSS Minifier — hãy lưu một bản sao trước nếu bạn cần giữ.

Nó có định dạng đúng CSS có truy vấn phương tiện không?

Không đáng tin. Những quy tắc lồng trong @media, @keyframes hay các khối tương tự có thể ra lộn xộn — hãy xem lại phần đó trong 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 những tệp kiểu dựa nhiều vào lồng nhau.

Tôi có được làm đẹp đoạn CSS đã nén chép từ trang khác không?

Được — đây là cách dùng phổ biến và chính đáng để học cách một trang được dựng nên. Hãy để ý điều khoản của trang nguồn nếu bạn định dùng lại chính đoạn mã đó chứ không chỉ nghiên cứu.

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

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