Trình kiểm tra CSS

Kiểm tra CSS là gì?

Trình kiểm tra CSS báo lỗi cấu trúc (ngoặc nhọn, chuỗi, chú thích hoặc ngoặc tròn chưa đóng), lỗi phân tích, thuộc tính không xác định, giá trị thuộc tính không hợp lệ và at-rule lạ, mỗi lỗi kèm dòng và cột. Việc kiểm tra thuộc tính và giá trị dùng dữ liệu ngữ pháp CSS đi kèm css-tree; đây không phải dịch vụ kiểm tra CSS của W3C.

Cách sử dụng Kiểm tra CSS

1. Dán CSS vào ô nhập.
2. Bấm Kiểm tra hợp lệ (kết quả cập nhật khi bạn gõ).
3. Đọc phần tóm tắt và danh sách lỗi, cảnh báo.
4. Sửa từng vấn đề dựa trên dòng và cột được hiển thị.

Ví dụ

a { colr: red; color: bluee; }

Errors: 2 · Warnings: 0
Line 1, column 5 Unknown property "colr"
Line 1, column 16 Invalid value for "color": bluee

Khi nào nên dùng Kiểm tra CSS

Dùng để bắt lỗi gõ như colr hay bluee, tìm dấu ngoặc nhọn chưa đóng trong file dài, hoặc kiểm tra CSS viết tay trước khi triển khai. Các thuộc tính rất mới có thể chưa có trong dữ liệu ngữ pháp; khả năng hỗ trợ của trình duyệt không được kiểm tra.

Kiểm tra CSS hoạt động như thế nào

Một bộ quét kiểm tra {} và () có cân bằng không và chuỗi/chú thích đã được đóng chưa. Sau đó stylesheet được phân tích bằng css-tree (đi kèm CSSO), công cụ này báo lỗi phân tích. Mỗi khai báo được đối chiếu bằng lexer.matchDeclaration với ngữ pháp thuộc tính của css-tree: thuộc tính không xác định là lỗi, thuộc tính lạ có tiền tố nhà cung cấp (-moz-foo) là cảnh báo, còn giá trị không khớp ngữ pháp (ví dụ margin với năm giá trị) là lỗi. Thuộc tính tùy biến (--x) và giá trị dùng var(), env() hoặc attr() không thể kiểm tra tĩnh nên được bỏ qua.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Tìm lỗi gõ trong tên thuộc tính
• ✓ Xác định dấu ngoặc nhọn chưa đóng làm hỏng phần còn lại của file
• ✓ Kiểm tra các giá trị như grid template hoặc màu sắc
• ✓ Xem lại CSS do người dùng gửi hoặc do công cụ sinh ra

Câu Hỏi Thường Gặp

Khám phá thêm danh mục