Tổng quan về CSS: Xác định những điểm có thể cải thiện về CSS

Jecelyn Yeen
Jecelyn Yeen
Twitter GitHub Trang chủ

Sử dụng bảng Tổng quan về CSS để hiểu rõ hơn về CSS của trang và xác định những điểm cần cải thiện.

Mở bảng điều khiển Tổng quan về CSS

  1. Mở một trang web bất kỳ, chẳng hạn như trang này.
  2. Mở Công cụ cho nhà phát triển.

  3. Chọn Xem thêm. Tuỳ chỉnh và kiểm soát Công cụ cho nhà phát triển > Công cụ khác > Tổng quan về CSS.

    Tổng quan về CSS trong trình đơn.

    Ngoài ra, hãy dùng Trình đơn lệnh để mở bảng Tổng quan về CSS.

    Hiện lệnh Tổng quan về CSS trong trình đơn Lệnh.

Chạy và chạy lại báo cáo Tổng quan về CSS

  1. Nhấp vào nút Capture Overview (Ghi lại thông tin tổng quan) để tạo báo cáo Tổng quan về CSS cho trang của bạn.

    Ghi lại thông tin tổng quan về CSS.

  2. Để chạy lại Tổng quan về CSS, hãy nhấp vào biểu tượng Rõ ràng. Xoá tổng quan rồi lặp lại bước đầu tiên.

    Xóa thông tin tổng quan.

Tìm hiểu báo cáo Tổng quan về CSS

Báo cáo này bao gồm 5 phần:

  1. Thông tin tóm tắt tổng quan. Tóm tắt cấp cao về CSS trên trang của bạn. Tóm tắt tổng quan.

  2. Màu. Tất cả các màu trên trang của bạn. Màu sắc được nhóm theo loại, chẳng hạn như màu nền, màu văn bản, v.v. Mục này cũng cho bạn biết các văn bản có vấn đề về độ tương phản thấp.

    Màu.

    Mỗi màu đều có thể nhấp vào. Ví dụ: giả sử màu đường viền #DADCE0 không phù hợp với bảng phối màu của trang web. Để nhận danh sách các phần tử sử dụng màu này, hãy nhấp vào màu đó.

    Danh sách các phần tử sử dụng màu sắc.

    Để đánh dấu phần tử trên trang, hãy di chuột qua phần tử đó trong danh sách.

    Di chuột qua một phần tử để đánh dấu phần tử đó trên trang.

    Để mở phần tử trong bảng điều khiển Phần tử, hãy nhấp vào phần tử đó trong danh sách.

  3. Thông tin phông chữ. Tất cả phông chữ trên trang của bạn và lần xuất hiện của phông chữ, được nhóm theo kích thước phông chữ, độ đậm phông chữ và chiều cao dòng khác nhau. Tương tự với mục Màu, để xem danh sách các phần tử bị ảnh hưởng, hãy nhấp vào lần xuất hiện của chúng.

    Thông tin về phông chữ.

  4. Nội dung khai báo không dùng đến. Tất cả kiểu không có hiệu lực, được nhóm theo lý do.

    Các nội dung khai báo không dùng đến.

    Ví dụ: 2 khai báo ở trên không được sử dụng vì nội dung xác định chiều cao và chiều rộng của một phần tử cùng dòng. Để xem các phần tử tương ứng, hãy nhấp vào các lần xuất hiện.

  5. Truy vấn nội dung đa phương tiện. Tất cả truy vấn phương tiện được xác định trên trang của bạn, được sắp xếp theo số lần xuất hiện theo thứ tự giảm dần. Để xem danh sách các phần tử bị ảnh hưởng, hãy nhấp vào lần xuất hiện của các phần tử đó.

    Truy vấn về nội dung nghe nhìn.