Przegląd CSS: rozpoznawanie potencjalnych ulepszeń CSS

Jecelyn Yeen

W panelu Przegląd CSS możesz uzyskać więcej informacji o kodzie CSS swojej strony i zidentyfikować potencjalne ulepszenia.

Otwórz panel Przegląd CSS

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

  3. Kliknij Więcej. Dostosuj i kontroluj Narzędzia deweloperskie > Więcej narzędzi > Przegląd CSS.

    Przegląd CSS.

    Możesz też użyć menu poleceń, aby otworzyć panel Przegląd CSS.

    Pokaż polecenie Przegląd CSS w menu Polecenia.

Generowanie i ponowne generowanie raportu Przegląd CSS

  1. Kliknij przycisk Zarejestruj przegląd, aby wygenerować raport Przegląd CSS dla swojej strony.

    Przechwyć przegląd CSS.

  2. Aby ponownie przeprowadzić przegląd CSS, kliknij ikonę Przejrzystość. Wyczyść przegląd i powtórz pierwszy krok.

    Wyczyść przegląd.

Interpretowanie raportu Omówienie usług porównywania cen

Raport składa się z 5 sekcji:

  1. Podsumowanie. Ogólne podsumowanie CSS strony. Podsumowanie ogólne.

  2. Kolory. Wszystkie kolory na stronie. Kolory są pogrupowane według typów, takich jak kolory tła, kolory tekstu itp. W tej sekcji znajdziesz również teksty o niskim kontraście.

    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 zobaczyć listę elementów, które używają tego koloru, kliknij go.

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

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

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

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

  3. Informacje o czcionce: wszystkie czcionki na stronie i ich wystąpienia, pogrupowane według rozmiaru i grubości czcionki oraz 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 efektu, pogrupowane według przyczyny.

    Nieużywane deklaracje.

    Na przykład dwie powyższe deklaracje są nieużywane, ponieważ treść określa wysokość i szerokość elementu wbudowanego. Aby wyświetlić odpowiadające im elementy, kliknij wystąpienia.

  5. Zapytania o multimedia – Wszystkie zapytania o media 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 o multimedia.