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.

Omówienie

Panel CSS – omówienie tworzy raport ze statystykami usług porównywania cen Twojej witryny. Ten raport zbiera dane o wszystkich wystąpieniach CSS, a nawet o nieużywanych deklaracjach. Panel Przegląd CSS pomaga w dalszej analizie wystąpień za pomocą podświetlenia strony lub bezpośredniego linku do kodu, którego dotyczy problem, w panelu Elementy.

Zobacz, jak wygenerować i ponownie wygenerować raport Omówienie usług porównywania cen i Interpretować raport Przegląd usług porównywania cen.

Otwórz panel Przegląd CSS

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

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

   

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

   

Generowanie i ponowne generowanie raportu Przegląd CSS

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

   

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

   

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

Raport składa się z 5 sekcji:

1. Podsumowanie. Ogólne podsumowanie CSS strony.

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.

   

   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.

   

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

   

   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.

   

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

   

   Na przykład dwie powyższe deklaracje są nieużywane, ponieważ zawartość 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.