Przegląd CSS: rozpoznawanie potencjalnych ulepszeń CSS

Jecelyn Yeen

Korzystając z panelu Przegląd usługi porównywania cen, możesz lepiej poznać kod CSS swojej strony i określić potencjalne ulepszenia.

Otwórz panel Przegląd CSS

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

  3. Wybierz Więcej. Dostosowywanie i kontrolowanie Narzędzi deweloperskich > Więcej narzędzi > Przegląd CSS.

    Przegląd CSS.

    Możesz też skorzystać z menu poleceń, by otworzyć panel Przegląd usług porównywania cen.

    Pokaż polecenie Przegląd CSS w menu Polecenie.

Wygeneruj i ponownie wygeneruj raport Przegląd usług porównywania cen

  1. Kliknij przycisk Przechwyć przegląd, aby wygenerować raport Przegląd usług porównywania cen dla swojej strony.

    Przechwyć przegląd CSS.

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

    Jasny przegląd.

Omówienie raportu Przegląd usług porównywania cen

Składa się on z 5 sekcji:

  1. Podsumowanie Ogółem. Ogólne podsumowanie CSS Twojej strony. Podsumowanie.

  2. Kolory. Wszystkie kolory na stronie. Kolory są pogrupowane według typów, takich jak kolory tła, kolory tekstu itp. W tych sekcjach znajdują się również teksty, które wykazują problemy z niskim kontrastem.

    Kolory.

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

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

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

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

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

  3. Informacje o czcionce. Wszystkie czcionki na stronie i ich wystąpienia, pogrupowane według różnych rozmiarów, grubości i wysokości wiersza. Podobnie jak w sekcji Kolory, kliknij listę elementów, których dotyczy problem.

    Informacje o czcionce.

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

    Nieużywane deklaracje.

    Na przykład 2 deklaracje powyżej są nieużywane, ponieważ zawartość określa wysokość i szerokość elementu wbudowanego. Aby wyświetlić odpowiednie 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.