Przegląd CSS: rozpoznawanie potencjalnych ulepszeń CSS

Jecelyn Yeen

Korzystaj z panelu Przegląd CSS, aby lepiej poznać kod CSS strony i znaleźć możliwości jej ulepszenia.

Omówienie

Panel Przegląd CSS tworzy raport ze statystykami CSS witryny. Ten raport zbiera dane o wszystkich wystąpieniach reguł CSS, nawet o tych nieużywanych. Panel Przegląd CSS ułatwia dalsze analizowanie wystąpień dzięki wyróżnianiu stron lub linkowaniu bezpośrednio do kodu, którego dotyczy problem, w panelu Elementy.

Dowiedz się, jak uruchamiać i ponownie uruchamiać raport Przegląd usługi porównywania cen oraz interpretować raport Przegląd usługi porównywania cen.

Otwórz panel Przegląd CSS

  1. Otwórz dowolną stronę internetową, np. tę.
  2. Otwórz Narzędzia deweloperskie.

  3. Kliknij Więcej. Dostosowywanie i sterowanie DevTools > Więcej narzędzi > Przegląd CSS.

    Przegląd CSS w menu.

    Możesz też otworzyć panel Przegląd CSS za pomocą menu poleceń.

    W menu „Polecenia” kliknij „Przegląd CSS”.

Uruchamianie i ponowne uruchamianie raportu Przegląd CSS

  1. Kliknij przycisk Zamieść przegląd, aby wygenerować raport Przegląd CSS strony.

    Przechwyć przegląd CSS.

  2. Aby ponownie uruchomić przegląd usług porównywania cen, kliknij ikonę Wyczyść. Wyczyść przegląd i powtórz pierwszy krok.

    Wyczyść przegląd.

Omówienie raportu Przegląd CSS

Raport składa się z 5 sekcji:

  1. Podsumowanie przeglądu. Ogólny przegląd kodu CSS strony.Podsumowanie ogólne.

  2. Kolory. Wszystkie kolory na stronie. Kolory są grupowane według typów, takich jak kolory tła, kolory tekstu itp. W tej sekcji znajdziesz też teksty, które mają problemy z kontrastem.

    kolory;

    Każdy kolor można kliknąć. Załóżmy na przykład, że kolor obramowania #DADCE0 nie pasuje do schematu kolorów Twojej witryny. Aby wyświetlić listę elementów, które używają tego koloru, kliknij ten kolor.

    Lista elementów, które używają koloru.

    Aby wyróżnić element na stronie, najedź na niego kursorem.

    Najedź myszką na element, aby go wyróżnić na stronie.

    Aby otworzyć element w panelu Elementy, kliknij go na liście.

  3. Informacje o czcionkach. Wszystkie czcionki na stronie i ich wystąpienia pogrupowane według rozmiaru, grubości i wysokości wiersza. Podobnie jak w sekcji Kolory, aby wyświetlić listę elementów, których dotyczy problem, kliknij ich wystąpienia.

    Informacje o czcionce.

  4. Nieużywane deklaracje. Wszystkie style, które nie mają żadnego wpływu, pogrupowane według przyczyny.

    Nieużywane deklaracje.

    Na przykład 2 deklaracje powyżej są nieużywane, ponieważ wysokość i szerokość elementu w treści określa treść. Aby wyświetlić odpowiednie elementy, kliknij wystąpienia.

  5. Zapytania dotyczące mediów. Wszystkie zapytania dotyczące multimediów zdefiniowane na stronie, posortowane według liczby wystąpień w kolejności malejącej. Aby wyświetlić listę elementów, których dotyczy problem, kliknij ich wystąpienia.

    Zapytania multimedialne.