Nén và làm đẹp CSS

Công cụ này làm gì

Hai việc trái ngược trên cùng một tệp kiểu. Nén bỏ đi thứ chỉ con người mới cần: chú thích và thụt lề. Làm đẹp trả chúng về, để một tệp bạn tiếp quản đọc được trở lại. Cả hai đều làm việc trên đúng đoạn văn bản bạn đưa vào, và không cái nào đụng tới ý nghĩa của CSS.

Cách dùng

  1. 1 Dán CSS vào - cả tệp hay chỉ một quy tắc đều được.
  2. 2 Bấm Nén để thu gọn, hoặc Làm đẹp để trải ra kèm thụt lề.
  3. 3 Xem số byte rồi sao chép kết quả.

Dấu cách trong bộ chọn không phải để trang trí

".a .b" chọn một .b nằm trong .a; ".a.b" chọn một phần tử mang cả hai lớp. Đó là hai bộ chọn khác nhau, và một trình nén coi dấu cách là thừa sẽ lặng lẽ tô nhầm phần tử. Ở đây dấu cách giữa hai phần của bộ chọn luôn được giữ; chỉ khoảng trắng quanh các toán tử như > và + mới bị bỏ.

calc() cần đúng những dấu cách đó

Trong "calc(100% - 10px)", các dấu cách quanh dấu trừ là bắt buộc theo cú pháp: thiếu chúng, trình duyệt đọc "-10px" thành một độ dài âm, biểu thức trở nên không hợp lệ và cả khai báo bị vứt bỏ. Chẳng có cảnh báo nào - bố cục đơn giản là sai. Công cụ này không bao giờ bỏ khoảng trắng bên trong dấu ngoặc.

Chú thích giấy phép được giữ lại

Chú thích mở đầu bằng /*! mang thông tin bản quyền hoặc giấy phép, và theo thông lệ mọi trình nén đều giữ lại. Xoá nó đi là gỡ bỏ phần ghi công mà một thư viện yêu cầu bạn phát hành kèm. Còn chú thích /* thường là viết cho bạn và đồng đội, nên chúng bị loại.

Nén CSS lời ít hơn gzip

Máy chủ vốn đã nén tệp kiểu khi gửi đi, và gzip rất giỏi với khoảng trắng lặp lại - nên nén thêm bên trên thường chỉ tiết kiệm vài phần trăm chứ không phải một nửa. Hãy làm vì chính tệp đó là thứ lên sản phẩm và bạn muốn nó nhỏ gọn, ổn định, chứ không phải vì trông đợi trang tải nhanh thấy rõ.

Nén CSS - câu hỏi thường gặp

Chỉ khoảng trắng và chú thích thường bị bỏ, còn ba chỗ mà khoảng trắng mang ý nghĩa - bộ chọn, trong ngoặc và chuỗi - đều được để yên. Không có gì bị đổi tên, đảo thứ tự hay gộp lại, nên các quy tắc trình duyệt thấy đúng là những gì bạn đã viết.

Công cụ dành cho nhà phát triển phổ biến nhất

Mới
Định Dạng SQL Chia một truy vấn dài thành các dòng dễ đọc, hoặc ép lại thành một dòng. Giữ nguyên kiểu chữ từ khóa, tên trong dấu nháy và chuỗi của bạn.
Phổ biến hôm nay
Định Dạng JSON Định dạng, nén và kiểm tra JSON ngay trên trình duyệt. Lỗi được chỉ rõ theo dòng và cột, cây gấp gọn cho thấy cấu trúc.

Công cụ dành cho nhà phát triển liên quan

Định Dạng JSON Định dạng, nén và kiểm tra JSON ngay trên trình duyệt. Lỗi được chỉ rõ theo dòng và cột, cây gấp gọn cho thấy cấu trúc.
Định Dạng HTML Thụt lề đoạn HTML lộn xộn để đọc được, hoặc rút gọn để nó nhẹ hơn. Dùng được với cả đoạn rời, và không bao giờ viết lại mã của bạn thành thứ khác.
Định Dạng XML Thụt lề đoạn XML lộn xộn để đọc được, hoặc rút gọn cho nhẹ. Xử lý RSS, CDATA và namespace, và không bao giờ viết lại tài liệu của bạn.
Định Dạng SQL Chia một truy vấn dài thành các dòng dễ đọc, hoặc ép lại thành một dòng. Giữ nguyên kiểu chữ từ khóa, tên trong dấu nháy và chuỗi của bạn.

Các công cụ khác bạn có thể thích

Word sang PDF Chuyển Word sang PDF miễn phí: tải lên tệp DOC, DOCX, ODT hoặc RTF và nhận bản PDF giữ đúng định dạng chỉ trong vài giây.
PDF sang Word Chuyển PDF sang Word miễn phí: tải lên tệp PDF và nhận file DOCX chỉnh sửa được trong vài giây - không đăng ký, không hình mờ.
Trình đếm từ Công cụ đếm từ miễn phí: dán văn bản để đếm từ, ký tự, câu, đoạn và xem thời gian đọc ước tính. Văn bản không rời khỏi trình duyệt.
Trình đếm ký tự Công cụ đếm ký tự miễn phí: đếm ký tự có và không có khoảng trắng, số từ, số dòng và kiểm tra giới hạn SEO cho tiêu đề, mô tả.
Trình kiểm tra mật độ từ khóa Công cụ kiểm tra mật độ từ khóa miễn phí: dán văn bản hoặc URL để xem tần suất của từng từ và cụm từ kèm tỷ lệ phần trăm.