Nén CSS ngay trong trình duyệt của bạn
Để nén CSS, bạn chỉ cần dán stylesheet vào: công cụ sẽ xóa chú thích, dấu xuống dòng và mọi khoảng trắng mà trình duyệt không cần. Bản đã nén hiện ra bên dưới trong chưa tới một giây, kèm số byte chính xác bạn tiết kiệm được. Không cần cài đặt, không cần bước build, và nội dung bạn dán không bao giờ bị tải lên: mọi thứ chạy online, trong trình duyệt của bạn.
Minify CSS online theo ba bước
- Dán hoặc gõ CSS vào ô CSS gốc.
- Ngay sau khi bạn ngừng gõ, CSS đã nén hiện ra bên dưới, cùng kích thước ban đầu, kích thước mới và phần trăm tiết kiệm. Không có nút nào phải bấm.
- Chạm Sao chép vào khay nhớ tạm để dán vào dự án, hoặc Tải xuống .min.css để lưu thành tệp.
CSS bị lỗi cú pháp không làm công cụ treo: mã vẫn được nén tới chỗ còn đọc được, nên bạn có thể dán đoạn mã đang viết dở rồi sửa sau.
CSS minifier xóa gì và giữ lại gì
Mọi quy tắc vẫn hoạt động y như trước; chỉ những phần dành cho mắt người đọc bị bỏ đi. Chú thích bị xóa, khoảng trắng liên tiếp được gộp lại, dấu cách quanh ngoặc nhọn, dấu hai chấm và dấu phẩy biến mất, và dấu chấm phẩy cuối cùng trước ngoặc nhọn đóng cũng bị bỏ. Chuỗi trong dấu ngoặc kép, giá trị url() và ký tự thoát được giữ nguyên, nên nội dung như "a b" vẫn còn dấu cách.
Trước: /* Buttons */ .btn { color: #fff; margin: 0 auto; }
Sau: .btn{color:#fff;margin:0 auto}
Tối ưu CSS: tệp sẽ nhỏ đi bao nhiêu?
Điều đó tùy vào lượng chú thích và khoảng trắng trong tệp. Stylesheet có nhiều chú thích và thụt lề gọn gàng thường nhỏ đi từ một phần tư đến một nửa. Bên dưới kết quả, bạn thấy kích thước ban đầu, kích thước sau khi nén và phần trăm tiết kiệm chính xác.
Tệp nhỏ hơn tải nhanh hơn và trang hiển thị sớm hơn. Muốn truyền ít dữ liệu hơn nữa, máy chủ web của bạn có thể gửi tệp đã nén kèm gzip hoặc Brotli.
Giữ hay xóa chú thích giấy phép
Chú thích bắt đầu bằng /*! thường chứa giấy phép hoặc thông báo bản quyền của một thư viện. Mặc định chúng được giữ lại, vì nhiều giấy phép yêu cầu thông báo đó đi kèm mã nguồn.
Bỏ chọn Giữ lại chú thích giấy phép bên dưới ô nhập để xóa luôn các chú thích này và có tệp nhỏ nhất.
Rút gọn CSS có an toàn khi chạy thật không?
Có: tệp chỉ mất những ký tự không ảnh hưởng tới cách trình duyệt đọc stylesheet. Hãy giữ tệp dễ đọc làm mã nguồn và đưa bản .min.css lên trang web, ví dụ style.css đặt cạnh style.min.css.
Câu hỏi thường gặp
CSS minifier dùng để làm gì?
Nó xóa mọi thứ trình duyệt không cần để đọc style của bạn: chú thích, dấu xuống dòng, thụt lề, dấu cách quanh ngoặc nhọn, dấu hai chấm và dấu phẩy, cùng dấu chấm phẩy cuối của mỗi quy tắc. Kết quả hoạt động y hệt bản gốc nhưng nhỏ hơn, nên tải nhanh hơn.
Làm sao để minify CSS online?
Dán CSS vào ô “CSS gốc”. Bản đã nén hiện ra bên dưới ngay sau đó, kèm số byte tiết kiệm được. Chạm “Sao chép vào khay nhớ tạm” để dán vào dự án, hoặc “Tải xuống .min.css” để lưu thành tệp.
Nén CSS và minify CSS có khác nhau không?
Trong cách dùng hằng ngày, hai cách gọi này là một: làm văn bản nhỏ lại mà không đổi tác dụng. Dán stylesheet vào đây rồi sao chép hoặc tải kết quả về. Để truyền ít dữ liệu hơn nữa, máy chủ web có thể nén thêm tệp bằng gzip hoặc Brotli.
Làm sao xóa hết chú thích trong CSS?
Dán CSS vào rồi bỏ chọn “Giữ lại chú thích giấy phép”. Khi đó mọi chú thích đều bị xóa, kể cả những chú thích bắt đầu bằng /*!. Nếu để nguyên lựa chọn này, chỉ các thông báo giấy phép đó được giữ lại.
CSS đã nén có an toàn cho môi trường production không?
Có. Quá trình nén chỉ bỏ những ký tự không ảnh hưởng tới cách trình duyệt đọc stylesheet. Chuỗi, giá trị url() và ký tự thoát được chép đúng như bạn viết. Hãy giữ tệp gốc làm mã nguồn và dùng bản .min.css trên trang.
Tệp .min.css là gì?
Đó là bản sao đã nén của một stylesheet, được đặt tên như vậy theo quy ước để nằm cạnh tệp nguồn dễ đọc, ví dụ style.css và style.min.css. Hãy sửa tệp dễ đọc và liên kết tệp .min.css trên trang web đang chạy.
Có thể đưa CSS đã nén về lại dạng bình thường không?
Không thể khôi phục y nguyên vì định dạng gốc đã mất, nhưng bạn có thể làm cho mã dễ đọc trở lại. Dán mã đã nén vào Định dạng mã nguồn để thụt lề lại. Chú thích đã xóa sẽ không quay lại, nên luôn giữ tệp gốc.
CSS bị lỗi thì sao?
Công cụ không bị treo. CSS vẫn được nén tới chỗ còn đọc được, nên bạn có thể dán mã chưa xong và sửa sau.
