Trình kiểm tra CSS: kiểm tra cú pháp, thuộc tính và lỗi
Trình kiểm tra CSS phân tích CSS bằng css-tree và báo lỗi cú pháp kèm vị trí dòng và cột, tiếp tục qua lỗi đầu tiên để bạn tìm thêm vấn đề. Công cụ cũng gắn cờ tên thuộc tính vắng mặt trong bảng đặc tả CSS như lỗi gõ sai có thể, đồng thời bỏ qua thuộc tính tùy biến (--*) và tiền tố nhà cung cấp. Hãy xem lại số lượng quy tắc, khai báo và @-rule cùng kết quả.
Trình kiểm tra CSS là trình kiểm tra cú pháp CSS chạy trên trình duyệt, phân tích stylesheet bằng css-tree. Công cụ báo lỗi cú pháp kèm vị trí dòng và cột và tiếp tục qua lỗi đầu tiên để bạn xem lại thêm vấn đề. Công cụ cũng gắn cờ tên thuộc tính không có trong bảng đặc tả CSS như lỗi gõ sai có thể, và hiển thị số lượng quy tắc, khai báo và @-rule.
Trong quá trình kiểm tra, CSS được phân tích và các vấn đề cú pháp được báo kèm vị trí. Tên thuộc tính vắng mặt trong bảng đặc tả CSS bị gắn cờ, nhưng thuộc tính tùy biến (--*) và tiền tố nhà cung cấp bị bước kiểm tra đó bỏ qua. Nhờ đó trình kiểm tra giúp phân biệt lỗi chính tả có thể với những mẫu tên thuộc tính mà nó được thiết kế để bỏ qua.
CSS mô tả các quy tắc và khai báo tạo kiểu, còn trình kiểm tra xem stylesheet được cung cấp có phân tích được không và tên thuộc tính có xuất hiện trong bảng đặc tả CSS không. Dùng trình kiểm tra CSS giúp lập trình viên điều tra lỗi trước khi CSS tới trình phân tích lỗi lúc chạy, xác minh đầu ra đã tạo, và xác định vấn đề mà không phải tìm thủ công trong file.
Trình kiểm tra CSS chạy hoàn toàn trong trình duyệt của bạn: dữ liệu nhập được xử lý trên thiết bị của bạn và không gửi tới máy chủ. Công cụ hoạt động ngoại tuyến sau khi trang đã tải xong, nên bạn có thể dùng mà không cần kết nối sau thời điểm đó. Công cụ miễn phí, và lập trình viên cùng kỹ sư DevOps có thể dùng nó để kiểm tra stylesheet và xem kết quả kiểm tra.
Bước 1: Dán hoặc thả CSS của bạn vào công cụ. Hãy thêm stylesheet bạn muốn kiểm tra.
Bước 2: Chạy kiểm tra CSS. Công cụ phân tích đầu vào của bạn và báo các lỗi cú pháp tìm thấy.
Bước 3: Xem lại từng vị trí lỗi được báo. Hãy dùng chi tiết dòng và cột để xác định phần CSS liên quan.
Bước 4: Kiểm tra cảnh báo thuộc tính và các số lượng. Công cụ gắn cờ tên thuộc tính không nhận dạng và hiển thị tổng số quy tắc, khai báo và @-rule.
Trường hợp sử dụng: Kiểm tra file CSS trước khi nó tới trình phân tích và lỗi lúc chạy. Trình kiểm tra giúp bạn phát hiện sớm vấn đề cú pháp.
Trường hợp sử dụng: Tìm dòng và cột của lỗi cú pháp thay vì chia đôi file bằng tay. Hãy xem lại các vị trí được báo để thu hẹp nơi cần điều tra.
Trường hợp sử dụng: Xác nhận đầu ra từ công cụ khác là CSS hợp lệ, không chỉ là văn bản trông có vẻ đúng. Trình phân tích báo các lỗi cú pháp nó tìm thấy.
Trường hợp sử dụng: Tìm lỗi gõ sai tên thuộc tính có thể trong stylesheet. Trình kiểm tra gắn cờ các tên vắng mặt trong bảng đặc tả CSS trong khi bỏ qua thuộc tính tùy biến và tiền tố nhà cung cấp.
Trường hợp sử dụng: Xem lại số lượng quy tắc, khai báo và @-rule sau khi tạo hoặc chỉnh sửa CSS. Các tổng số cho cái nhìn nhanh về nội dung stylesheet.
Trường hợp sử dụng: Kiểm tra stylesheet dùng thuộc tính tùy biến hoặc thuộc tính có tiền tố nhà cung cấp. Các thuộc tính này bị trình kiểm tra tên thuộc tính bỏ qua, nên không bị gắn cờ là thuộc tính không xác định.