Công cụ Làm đẹp & Thu gọn CSS
Thụt lề lại CSS lộn xộn để dễ đọc, hoặc thu gọn để tối ưu hóa dung lượng — với chế độ an toàn không bao giờ thay đổi thứ tự các quy tắc của bạn.
CSS của bạn được định dạng và thu gọn ngay trong trình duyệt. Không có dữ liệu nào được tải lên BroBroGo.
Hỏi đáp
Sự khác biệt giữa làm đẹp (beautify) và thu gọn (minify) là gì?
Làm đẹp (Beautify) sẽ thụt lề và giãn cách lại các kiểu định dạng của bạn để chúng dễ đọc và chỉnh sửa hơn. Thu gọn (Minify) thì ngược lại — nó loại bỏ các khoảng trắng và chú thích mà trình duyệt không cần đến, đồng thời rút ngắn các giá trị như mã màu, giúp tệp nhỏ hơn và tải nhanh hơn. Hãy làm đẹp khi bạn làm việc và thu gọn trước khi xuất bản.
Các thiết lập nén An toàn và Tối ưu hóa có tác dụng gì?
Chế độ An toàn (Safe) chỉ loại bỏ khoảng trắng, chú thích và rút ngắn các giá trị, giữ nguyên vị trí của mọi quy tắc định dạng. Chế độ Tối ưu hóa (Optimized) tiến xa hơn bằng cách gộp các bộ chọn và quy tắc trùng lặp để tệp nhỏ hơn — chế độ này có thể sắp xếp lại thứ tự các quy tắc, vì vậy đối với các trang kiểu phụ thuộc vào thứ tự nguồn, bạn nên kiểm tra nhanh trước khi xuất bản. Các chú thích dạng /*! … */ đều được giữ lại trong cả hai chế độ.
Việc thu gọn có làm thay đổi giao diện trang web của tôi không?
Trong chế độ An toàn (Safe) thì không — các kiểu định dạng của bạn sẽ hiển thị hoàn toàn giống nhau. Nó chỉ thu gọn khoảng trắng, bỏ các chú thích thông thường và viết lại các giá trị dưới dạng tương đương ngắn hơn (như #ffffff thành #fff), đồng thời không bao giờ thay đổi các tiền tố nhà cung cấp (vendor prefixes) hay cú pháp hiện đại của bạn. Chế độ Tối ưu hóa (Optimized) cũng gộp các quy tắc, điều này trông giống hệt nhau trên hầu hết mọi trang kiểu nhưng bạn nên xác minh lại nếu trang kiểu của mình phụ thuộc vào thứ tự quy tắc.