Czy istnieje sposób sprawdzenia, które style CSS są używane lub nie są używane na stronie internetowej?

121

Chcesz wiedzieć, które style CSS są obecnie używane na stronie internetowej.

css

— WSPARCIE
źródło

2

Użyj przeglądarki z inspektorem CSS. Safari i Chrome (inaczej Webkit) zapewniają to jako część narzędzi programistycznych. W przeglądarce Firefox zapewnia to wtyczka Firebug. Internet Explorer nie ma nic podobnego, o czym jestem świadomy. Inspektor pozwoli Ci zaznaczyć element, kliknąć prawym przyciskiem myszy i wybrać „Sprawdź element” - wtedy pokaże Ci, które selektory i jakie indywidualne reguły są stosowane do zaznaczonego elementu.

— Lee,

Pasek narzędzi programisty @Lee ie8 zachowuje się tak samo jak firebug w selektorach css, możesz wybrać i zobaczyć style zastosowane po prawej stronie.

— kobe

możliwy duplikat wyodrębniania tylko css używanego na określonej stronie

— cweiske

58

Zainstaluj dodatek CSS Usage dla Firebug i uruchom go na tej stronie. Poinformuje Cię, które style są używane, a które nie są używane na tej stronie.

— kobe
źródło

@Harry, po zainstalowaniu tej wtyczki będzie ona w zakładce jako część firebuga, gdzie masz sieć i wszystkie //// daj mi znać, jeśli potrzebujesz czegoś więcej

— kobe

33

Czy jest coś takiego w Chrome?

— Pedro Luz

3

Wygląda na to, że to już nie działa i niestety nie jest już obsługiwane.

— nostromo

1

Uważaj, że Firebug nie jest już obsługiwany. Myślę, że ten dodatek nie działa z wbudowanymi narzędziami programistycznymi Firefoksa.

— Andrew,

Możesz użyć opcji audytu w chrome podczas inspekcji, która pokazuje tylko css, które nie są używane na tej konkretnej stronie.

— Sarath Hari

82

Google Chrome ma dwa sposoby sprawdzania nieużywanych arkuszy CSS .

1. Zakładka Audyt: > Kliknij prawym przyciskiem myszy + Sprawdź element na stronie, znajdź zakładkę „Audyt” i uruchom audyt, upewniając się, że zaznaczona jest opcja „Wydajność strony internetowej”.

Wyświetla wszystkie nieużywane tagi CSS - zobacz obrazek poniżej.

Aktualizacja: - - - - - - - - - - - - - - LUB - - - - - - - - - - - - - -

2. Zakładka Pokrycie: > Kliknij prawym przyciskiem myszy + Sprawdź element na stronie, znajdź trzy kropki po prawej stronie (zakreślone na obrazku) i otwórz szufladę konsoli (lub naciśnij Esc), na koniec kliknij trzy kropki po lewej stronie szuflady (zakreślone na obrazie), aby otworzyć narzędzie Pokrycie.

Chrome uruchomił narzędzie do przeglądania nieużywanych CSS i JS - Chrome 59 Update Umożliwia rozpoczęcie i zatrzymanie nagrywania (czerwony kwadrat na obrazie), aby umożliwić lepsze przedstawienie wrażeń użytkownika na stronie.

Pokazuje wszystkie używane i nieużywane CSS / JS w plikach - patrz obrazek poniżej.

— Cordell
źródło

3

Byłoby wspaniale zobaczyć, które z nich są również używane ... ale to świetnie, dzięki.

— Serj Sagan,

O ile wiem, jeśli chcesz wiedzieć, co jest używane, najlepiej jest zainstalować wtyczkę do Chrome - przepraszam

— Cordell

Nowa aktualizacja Chrome 59 pozwala zobaczyć używane / nieużywane CSS i JS

— Cordell

Z jakiej biblioteki korzysta Chrome w tym celu?

— Alexey Shevelyov

1

@UMAR, multi-page website coverage == (single-page coverage) * n gdzie n = każda strona w serwisie WWW . Zaklasyfikowanie narzędzia / tej odpowiedzi jako „bezużytecznej” nikomu nie przynosi korzyści.

— Shai Cohen

40

Tylko dla kompletności i ponieważ pytano o to w komentarzach - w tym samym celu jest teraz również narzędzie do audytu CSS w Chrome . Kilka szczegółów tutaj:

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

— Jan Petzold
źródło

3

Nie jestem pewien, czy „narzędzie do audytu CSS”, do którego odnosi się ta odpowiedź, jest tym samym, co karta Audyty w Narzędziach dla programistów Chrome, ale powie Ci, które reguły CSS są nieużywane (np. „Some.css: 42% nie jest używany przez bieżącą stronę. ”).

— Kenny Evitt,

11

Spójrz na UnCSS . Pomaga w tworzeniu pliku CSS używanego CSS.

— Robert Brisita
źródło

1

To wspaniały program. Dzięki! Rob

— r0berts

1

Dobre narzędzie internetowe do jednorazowego użytku. ty

— billynoah

1

To jest niesamowite - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- nieważne .......

— Brian Powell

@ brian-powell tak, dane wyjściowe szablonów musiałyby zostać wygenerowane jako pierwsze. Jak inaczej UnCSS wiedziałby, co jest potrzebne?

— Robert Brisita,

8

Używam CSS Dig . Jest przeznaczony do chromu, ale myślę, że to świetne narzędzie!

— cs.matyi
źródło

Właśnie tego próbowałem - robi wszystko, dzwoniąc do domu na cssdig.com, więc nie jest w stanie zobaczyć ani przeanalizować niczego hostowanego lokalnie.

— Brilliand

0

Spróbuj użyć tego narzędzia, które jest po prostu prostym skryptem js https://github.com/shashwatsahai/CSSExtractor/ To narzędzie pomaga w uzyskaniu CSS z określonej strony zawierającej wszystkie źródła aktywnych stylów i zapisaniu go w formacie JSON ze źródłem jako klucz i reguły jako wartość. Ładuje cały CSS z linków href i informuje o wszystkich zastosowanych stylach. Możesz zmodyfikować kod, aby zapisać cały plik CSS w pliku .css. W ten sposób łącząc wszystkie twoje css.

— Shashwat Sahai
źródło

0

Bez żadnych narzędzi innych firm i żadnej aplikacji możesz znaleźć nieużywane CSS i javascript, używając narzędzi chrome dla deweloperów na karcie pokrycia. przeczytaj poniższy post od programistów Google. zakładka pokrycia chromu

— Mahdi Safari
źródło