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.

Tổng quan

Bảng Tổng quan về CSS sẽ tạo một báo cáo về số liệu thống kê về CSS trên trang web của bạn. Báo cáo này thu thập dữ liệu về tất cả các lần xuất hiện của CSS và thậm chí cả các nội dung khai báo không dùng đến. Bảng Tổng quan về CSS giúp bạn điều tra các lần xuất hiện kỹ hơn bằng cách làm nổi bật trang hoặc bằng cách liên kết trực tiếp đến mã bị ảnh hưởng trong bảng Phần tử.

Xem cách Chạy và chạy lại báo cáo Tổng quan về CSS và Tìm hiểu báo cáo Tổng quan về CSS.

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 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 trang Tổng quan về CSS, hãy nhấp vào biểu tượng Xóa. Xoá thông tin 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 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 của trang. 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 kích thước phông chữ, độ đậm phông chữ và chiều cao dòng khác nhau. 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.