Định dạng & nén HTML
Làm gọn HTML lộn xộn hoặc nén lại để đưa lên production
Về công cụ này
Làm đẹp phần HTML vừa chui ra từ một bộ đóng gói, một trình cào dữ liệu hay một trình soạn thảo WYSIWYG: các phần tử được thụt lề theo mức bạn chọn, thuộc tính ở nguyên dòng của nó, còn nội dung trong pre và textarea được giữ nguyên từng byte. Chế độ nén loại bỏ chú thích và gom khoảng trắng giữa các thẻ — với trang viết tay thì thường giảm được 10–25% dung lượng.
Phép nén ở đây cố tình dè dặt: script và style viết thẳng trong trang được bảo vệ, chú thích điều kiện vẫn sống sót, và một dấu cách giữa các phần tử nội tuyến được giữ lại để “bấm <a>vào đây</a> ngay” không dính liền thành một cục. Bạn nhận được một phép nén an toàn, chứ không phải kiểu nén tối đa bất chấp.
Cả hai thao tác đều chạy cục bộ trong trình duyệt của bạn — trang chưa xuất bản và mã giao diện quản trị nội bộ không bao giờ rời khỏi máy bạn.
Câu hỏi thường gặp
- Nén có làm hỏng JavaScript hay CSS viết thẳng trong trang không?
- Không — các khối <script>, <style>, <pre> và <textarea> được loại hoàn toàn khỏi việc gom khoảng trắng. Chỉ phần mã nằm giữa các thẻ mới bị đụng tới. Muốn nén chính phần script thì hãy đưa chúng qua công cụ nén JavaScript riêng.
- Vì sao bỏ khoảng trắng giữa các thẻ lại an toàn?
- Phần lớn trường hợp là an toàn: khoảng trắng giữa các phần tử khối không tạo khác biệt thị giác nào. Nhưng giữa các phần tử nội tuyến thì có, nên bộ nén gom chúng về một dấu cách thay vì xóa hẳn. Những bố cục dựa vào mẹo khoảng trắng của inline-block là ngoại lệ hiếm hoi đáng liếc mắt kiểm tra.
- Công cụ có sửa HTML sai chuẩn không?
- Nó định dạng đúng thứ bạn đưa vào mà không đối chiếu với đặc tả HTML — thẻ chưa đóng thì vẫn cứ chưa đóng. Trình duyệt vốn dễ dãi với mớ thẻ lộn xộn, nên việc định dạng vẫn giúp bạn nhìn rõ cấu trúc đủ để phát hiện chỗ hỏng.
- Nên dùng mức thụt lề bao nhiêu?
- 2 dấu cách là quy ước thịnh hành trong các mã nguồn web và cũng là mặc định của phần lớn hướng dẫn phong cách của các framework. Chọn 4 nếu nhóm bạn đã thống nhất như vậy — đây thuần túy là chuyện hình thức.