Bộ Kiểm Tra CSS Render Thực Quy tắc ThắngDùng động cơ trình duyệt để xác minh quy tắc CSS nào thực sự thắng
Vì sao cần render thực sự, không chỉ tính toán lý thuyết?
Hầu hết các công cụ tính đặc hiệu CSS trực tuyến chỉ đưa bộ chọn của bạn vào một công thức và cho ra một điểm số — ví dụ #main p có điểm (1,0,1), còn .card.active có điểm (0,2,0). Nhưng điều mà một trình duyệt thực sự quyết định khi nhiều quy tắc xung đột còn phụ thuộc vào tính kế thừa, thứ tự tầng (cascade), !important, và cách cùng một thuộc tính được viết trong các quy tắc khác nhau — tất cả những điều này các công cụ tính lý thuyết đều bỏ qua. Công cụ này áp dụng cách tiếp cận khác: nó render HTML và CSS bạn dán vào bên trong một iframe ẩn để trình duyệt thực sự áp dụng các style, sau đó đọc lại kết quả thật bằng getComputedStyle(). Những gì bạn thấy chính là điều trình duyệt thực sự quyết định — không phải một con số được tính trên giấy.
Điểm (a, b, c) thực sự được so sánh như thế nào — một ví dụ cụ thể
Độ đặc hiệu CSS được viết dưới dạng ba số (a, b, c): a đếm số bộ chọn ID, b đếm số bộ chọn class/thuộc tính/giả lớp (pseudo-class), c đếm số bộ chọn kiểu phần tử/giả phần tử (pseudo-element). Việc so sánh hoạt động như so sánh từng chữ số — bên nào có 'a' cao hơn thắng ngay, và chỉ so sánh tiếp 'b' khi 'a' bằng nhau. Ví dụ, #main p có điểm (1,0,1) trong khi .card .title.active có điểm (0,3,0) — #main p vẫn thắng vì 1 > 0 ở 'a', dù bộ chọn kia xếp chồng ba class. Nếu hai quy tắc có độ đặc hiệu hoàn toàn bằng nhau, trình duyệt sẽ áp dụng quy tắc được định nghĩa sau trong CSS — đây là lý do thứ tự trong mã nguồn cũng quan trọng. !important là yếu tố duy nhất có thể vô hiệu hóa hoàn toàn độ đặc hiệu: một quy tắc có độ đặc hiệu thấp hơn nhưng có !important sẽ thắng một quy tắc có độ đặc hiệu cao hơn mà không có !important (trừ khi quy tắc kia cũng có !important, lúc đó độ đặc hiệu lại quyết định).
Khi nào bạn thực sự nên dùng công cụ này?
Tình huống điển hình là: 'tôi đã viết quy tắc CSS này nhưng màn hình không thay đổi gì' — điều này thường có nghĩa là một quy tắc khác có độ đặc hiệu cao hơn (hoặc có !important) đang ghi đè lên nó. Dán HTML+CSS đang xung đột vào, nhập bộ chọn của phần tử bạn đang gỡ lỗi, công cụ sẽ liệt kê mọi quy tắc khớp cùng điểm đặc hiệu của chúng, và để động cơ trình duyệt thực sự cho bạn biết quy tắc nào thắng thật — không cần đoán xem tầng cascade nào đang chiến thắng nữa.
Công cụ này render trong một iframe cách ly, không tải phông chữ, hình ảnh hay thực thi JavaScript từ bên ngoài, và không hỗ trợ Shadow DOM hay các style CSS-in-JS được chèn động — hãy dán các đoạn HTML/CSS tĩnh để có kết quả chính xác.