Trình thu nhỏ CSS

Trình thu nhỏ CSS là công cụ miễn phí giúp loại bỏ các ký tự không cần thiết khỏi CSS, sau đó trả về biểu định kiểu đã thu nhỏ cùng số ký tự trước và sau khi xử lý.

Thu nhỏ CSS có tác dụng gì?

Thu nhỏ CSS làm giảm số ký tự trong biểu định kiểu bằng cách loại bỏ phần định dạng mà trình duyệt không cần. Những phần thường được loại bỏ gồm thụt lề, ngắt dòng, chú thích và khoảng trắng không bắt buộc quanh dấu câu.

Trình duyệt vẫn nhận được đầy đủ quy tắc CSS, bộ chọn và giá trị khai báo. Giao diện dự kiến sẽ không thay đổi, còn tệp truyền đến trình duyệt sẽ nhỏ hơn. Lợi ích thực tế của việc thu nhỏ biểu định kiểu CSS phụ thuộc vào tệp gốc, cơ chế nén HTTP và bộ nhớ đệm của trình duyệt. Nếu biểu định kiểu đã được nén tốt, số byte truyền đi có thể chỉ giảm một lượng khiêm tốn.

Thu nhỏ CSS hữu ích trước khi triển khai, khi kiểm tra tệp CSS quá lớn của bên thứ ba hoặc khi cần biết phần định dạng phục vụ phát triển chiếm bao nhiêu dung lượng. Thao tác này khác với việc tối ưu bằng cách xóa bộ chọn không dùng, gộp các quy tắc tương đương hoặc viết lại khai báo. Công cụ này không tuyên bố thực hiện những thao tác mở rộng đó.

Cách dùng Trình thu nhỏ CSS

Dán biểu định kiểu vào trường CSS rồi chạy công cụ. Sau đó, sao chép kết quả CSS đã thu nhỏ vào quy trình dựng hoặc triển khai phù hợp. Hãy giữ lại tệp CSS nguồn dễ đọc, đừng thay thế vĩnh viễn tệp đó bằng bản đã thu nhỏ.

1. Bắt đầu với mã CSS nguồn mà trang web hoặc ứng dụng đang sử dụng.
2. Kiểm tra để đảm bảo mã được phân tích cú pháp chính xác trước khi thu nhỏ.
3. Dán mã vào trường CSS rồi chạy công cụ.
4. So sánh Số ký tự CSS với Số ký tự CSS đã thu nhỏ.
5. Kiểm thử kết quả trên trang thử nghiệm, bao gồm các trạng thái đáp ứng, kiểu in và thành phần tương tác.

Quá trình thu nhỏ CSS diễn ra trên máy chủ. CSS bạn gửi được truyền đến máy chủ qua HTTPS và không được lưu trữ. Nếu biểu định kiểu chứa URL bí mật, tên máy chủ nội bộ hoặc dữ liệu nhạy cảm khác, hãy cân nhắc xem việc gửi dữ liệu đó đến một tiện ích chạy phía máy chủ có phù hợp với chính sách xử lý dữ liệu của tổ chức hay không.

Đọc kết quả như thế nào?

Kết quả gồm CSS đã chuyển đổi và hai số đếm ký tự, nhờ đó bạn có thể kiểm tra đầu ra và thấy ngay mức giảm. Số ký tự CSS là độ dài của nội dung đã gửi, còn Số ký tự CSS đã thu nhỏ là độ dài sau khi thu nhỏ.

Các con số này được tính bằng hàm đo độ dài có hỗ trợ ký tự nhiều byte. Không nên xem chúng là dự đoán chính xác về kích thước dữ liệu truyền qua mạng. Một ký tự UTF-8 có thể chiếm nhiều hơn một byte, còn cơ chế nén Brotli hoặc gzip có thể làm thay đổi đáng kể kích thước được gửi qua HTTP.

Công cụ này không có trường riêng để xác thực hoặc hiển thị lỗi. Vì vậy, đừng dùng nó như một trình xác thực CSS. Các lỗi thường gặp như thiếu dấu ngoặc nhọn tương ứng, thiếu dấu hai chấm, chuỗi chưa đóng, chú thích sai định dạng hoặc cấu trúc lồng không hợp lệ cần được kiểm tra bằng công cụ dành cho nhà phát triển của trình duyệt, trình kiểm tra mã hoặc trình xác thực có hỗ trợ tiêu chuẩn. CSS không hợp lệ vẫn có thể tạo ra đầu ra trông gọn nhưng hoạt động không đúng như dự kiến.

Ví dụ thu nhỏ CSS đơn giản

Một phiên bản thu nhỏ thông thường sẽ loại bỏ phần định dạng nhưng vẫn giữ nguyên quy tắc.

CSS

p { color: red; }

CSS đã thu nhỏ

p{color:red}

Trong ví dụ này, đầu vào dễ đọc có 17 ký tự, còn dạng rút gọn có 12 ký tự. Khoảng trắng và dấu câu bên trong chuỗi được đặt trong dấu ngoặc kép phải được giữ lại như một phần của giá trị.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

CSS đã thu nhỏ

.notice,.warning{color:#c00;margin:0 1rem}

Xóa mọi khoảng trắng một cách máy móc là không an toàn. Khoảng trắng có thể đại diện cho bộ tổ hợp phần tử hậu duệ, còn các toán tử số học trong những hàm như calc() có yêu cầu riêng về khoảng trắng. Chuỗi, URL dữ liệu, mã định danh dùng ký tự thoát và giá trị thuộc tính tùy chỉnh cũng cần được xử lý theo đúng cú pháp.

Ký tự có dấu và ký tự ngoài hệ chữ Latin có thể xuất hiện trong chuỗi và, nếu tuân thủ quy tắc về mã định danh CSS, trong bộ chọn. Số, dấu thập phân, phần trăm và đơn vị là thành phần cú pháp chứ không phải văn bản trang trí, vì vậy không thể tùy ý rút gọn nếu chưa hiểu khai báo. Biểu định kiểu trống không có CSS để thu nhỏ. Với biểu định kiểu rất lớn, dùng trình thu nhỏ trong quá trình dựng thường dễ lặp lại và kiểm tra hơn so với sao chép nội dung qua biểu mẫu trực tuyến.

Khi nào không đáng để thu nhỏ CSS?

Thông thường, không đáng chạy lại thao tác thu nhỏ nếu tệp đã được thu nhỏ hoặc được tạo dưới dạng tài nguyên production gọn nhẹ. Lần thu nhỏ CSS thứ hai có thể không giảm thêm hoặc chỉ giảm rất ít, đồng thời bổ sung một bước chuyển đổi nữa vào quy trình phát hành.

• Không định dạng lại cho dễ đọc rồi thu nhỏ lại CSS nếu chỉ trình duyệt hoặc hệ thống dựng cần đọc tệp đó.
• Không dùng thao tác thu nhỏ để thay thế việc xóa các quy tắc framework không dùng hoặc khai báo trùng lặp.
• Đừng kỳ vọng mức giảm ký tự sẽ cho biết yêu cầu nào đang chặn hiển thị, bộ nhớ đệm có vấn đề hay phông chữ tải chậm.
• Không xóa mã nguồn đã định dạng, đặc biệt khi cần gỡ lỗi độ ưu tiên, tầng xếp chồng hoặc truy vấn phương tiện.

Nếu CSS được tự động đóng gói, hãy dùng trình thu nhỏ ngay trong quy trình đó để mọi bản phát hành đều áp dụng cùng một cấu hình. Khi triển khai thủ công các tài nguyên liên quan, Trình thu nhỏ HTML và Trình thu nhỏ JS có thể thực hiện thao tác tương đương cho những loại tệp này.

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

Thu nhỏ CSS có làm thay đổi độ ưu tiên của bộ chọn không?

Thu nhỏ đúng cách không làm thay đổi độ ưu tiên vì các thành phần và thứ tự của bộ chọn phải được giữ nguyên. Tuy vậy, hãy kiểm tra kỹ những bộ chọn phức tạp nếu mã nguồn dùng ký tự thoát, lớp giả mới hoặc cú pháp được tạo tự động mà trình thu nhỏ cũ có thể không hiểu.

Có thể thu nhỏ thuộc tính tùy chỉnh CSS không?

Có thể đưa thuộc tính tùy chỉnh vào xử lý, nhưng giá trị của chúng có thể cần giữ nguyên token và khoảng trắng để thay thế sau này bằng var(). Hãy kiểm thử các khai báo chứa phép tính, giá trị dự phòng hoặc chuỗi nhúng trên những trình duyệt mà dự án hỗ trợ, thay vì mặc định rằng mọi khoảng trắng nhìn có vẻ thừa đều có thể xóa.

Công cụ có tạo source map không?

Không có kết quả source map riêng. Nếu việc gỡ lỗi trên production cần ánh xạ CSS đã thu gọn về Sass, Less hoặc một nguồn khác, hãy tạo tệp đã thu nhỏ và source map trong trình biên dịch hoặc công cụ đóng gói có thông tin về cấu trúc tệp gốc.

Chú thích giấy phép có được giữ lại trong đầu ra không?

Đừng mặc định rằng các chú thích CSS sẽ được giữ lại. Nếu giấy phép của một phần phụ thuộc yêu cầu thông báo phải đi kèm mã được phân phối, hãy lưu riêng thông báo đó hoặc kiểm tra đầu ra đã tạo trước khi phát hành.

Thu nhỏ có sửa được CSS bị lỗi không?

Không. Thu nhỏ chỉ loại bỏ ký tự không cần thiết, không sửa bộ chọn không hợp lệ, thuộc tính không được hỗ trợ, tài nguyên bị thiếu hoặc thứ tự xếp chồng không chính xác. Hãy xử lý các cảnh báo phân tích cú pháp và lỗi hiển thị trong mã nguồn trước.

Kiểm tra trước khi triển khai

Lưu đầu ra đã thu nhỏ thành một tài nguyên production riêng, xác minh rằng URL và nội dung trong dấu ngoặc kép vẫn nguyên vẹn, sau đó tải tệp trên trang thử nghiệm khi bảng điều khiển của trình duyệt đang mở. So sánh các trang đại diện ở kích thước khung nhìn hẹp và rộng, rồi xác nhận máy chủ áp dụng đúng loại nội dung, chính sách bộ nhớ đệm và cơ chế nén HTTP mong muốn.