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

Jecelyn Yeen

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

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.

    Hoặc, bạn có thể dùng Trình đơn lệnh để mở bảng điều khiển Tổng quan về CSS.

    Hiển thị 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 Chụp tổng quan để tạo báo cáo Tổng quan về CSS cho trang của bạn.

    Thu thập thông tin tổng quan về CSS.

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

    Xoá 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 gồm năm phần:

  1. Tóm tắt tổng quan. Bản 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 sắc. Tất 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 thấy các văn bản gặp vấn đề về độ tương phản thấp.

    Màu.

    Từng 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. Để xem 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 phần tử sử dụng màu đó.

    Để làm nổi bật phần tử đó trên trang, hãy di chuột qua phần tử đó trong danh sách.

    Hãy di chuột qua một phần tử để làm nổi bật 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 về phông chữ. Tất cả phông chữ trên trang của bạn và số lần xuất hiện của các phông chữ đó, được nhóm theo nhiều kích thước phông chữ, độ đậm phông chữ và chiều cao dòng. Tương tự như phần Màu, để xem danh sách các phần tử bị ảnh hưởng, hãy nhấp vào số lần xuất hiện của các phần tử đó.

    Thông tin 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 bản khai báo không dùng đến.

    Ví dụ: hai nội dung khai báo ở trên không được 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 phương tiện. Tất cả truy vấn phương tiện đã 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 số lần xuất hiện của các phần tử đó.

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