Jak zidentyfikować nieużywane definicje css [zamknięte]

Czy są jakieś dobre metody, które pomogą zidentyfikować nieużywane definicje css w projekcie? Kilka plików css zostało wciągniętych, a teraz próbuję trochę posprzątać.

Author: Somnath Muluk, 2008-09-26

9 answers

 140
Author: David Medinets,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-09 18:12:42

Chrome Developer Tools posiada kartę Audits , która może pokazywać nieużywane selektory CSS.

Uruchom audyt, a następnie pod Wydajność strony internetowej Zobacz Usuń nieużywane reguły CSS

Tutaj wpisz opis obrazka

 242
Author: Derek Adair,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-19 21:09:06

Właśnie znalazłem tę stronę – http://unused-css.com/

Wygląda dobrze, ale musiałbym dokładnie sprawdzić jego wyjściowy "czysty" css przed przesłaniem go do którejkolwiek z moich stron.

Tak samo jak w przypadku tych wszystkich narzędzi musiałbym sprawdzić, czy nie usuwa id i klas bez stylu, ale są używane jako selektory JavaScript.

Poniższa treść pochodzi z http://unused-css.com / więc podziękuj im za polecanie innych rozwiązań:

Latish Sehgal napisał aplikację dla systemu windows do wyszukiwania i usuwania nieużywanych klas CSS. Nie testowałem tego, ale z opisu trzeba podać ścieżkę plików html i jeden plik CSS. Program wyświetli listę nieużywanych selektorów CSS. Na zrzucie ekranu wygląda na to, że nie ma sposobu na wyeksportowanie tej listy lub pobranie nowego czystego pliku CSS. Wygląda na to, że usługa jest ograniczona do jednego pliku CSS. Jeśli masz wiele plików, które chcesz wyczyścić, musisz wyczyścić jeden po drugim.

Dust-Me Selectors jest rozszerzeniem Firefoksa (dla wersji 1.5 lub nowszej), które znajduje nieużywane selektory CSS. Wyodrębnia wszystkie selektory ze wszystkich arkuszy stylów na przeglądanej stronie, a następnie analizuje tę stronę, aby zobaczyć, które z tych selektorów nie są używane. Dane są następnie przechowywane, aby podczas testowania kolejnych stron selektory mogły zostać skreślone z listy w miarę ich napotkania. To narzędzie ma być w stanie spider całą stronę internetową, ale ja niestety może się udać. Nie wierzę również, że możesz skonfigurować i pobrać plik CSS z usuniętymi stylami.

Topstyle to aplikacja windows zawierająca kilka narzędzi do edycji CSS. Nie testowałem go zbyt wiele, ale wygląda na to, że ma możliwość usunięcia nieużywanych selektorów CSS. To oprogramowanie kosztuje 80 USD.

Liquidcity CSS cleaner to skrypt php, który używa wyrażeń regularnych do sprawdzania stylów jednej strony. Powie Ci klasy, że nie są dostępne w kodzie HTML. Nie testowałem tego rozwiązania.

Deadweight jest narzędziem CSS coverage. Biorąc pod uwagę zestaw arkuszy stylów i zestaw adresów URL, określa On, które selektory są rzeczywiście używane i wymienia, które można "bezpiecznie" usunąć. To narzędzie jest modułem ruby i będzie działać tylko z witryną rails. Nieużywane selektory muszą być ręcznie usunięte z pliku CSS.

Helium CSS jest narzędziem javascript do odkrywania nieużywanych CSS w wielu strony na stronie internetowej. Najpierw musisz zainstalować plik javascript na stronie, którą chcesz przetestować. Następnie musisz wywołać funkcję helu, aby rozpocząć czyszczenie.

UnusedCSS.com jest aplikacją internetową z łatwym w użyciu interfejsem. Wpisz adres URL witryny, a otrzymasz listę selektorów CSS. Dla każdego selektora liczba wskazuje, ile razy Selektor jest używany. Ta usługa ma kilka ograniczeń. Instrukcja @ import nie jest obsługiwana. Nie można skonfigurować i pobrać nowego Wyczyść plik CSS.

CSSESS jest bookmarklet, który pomaga znaleźć nieużywane selektory CSS na dowolnej stronie. To narzędzie jest dość łatwe w użyciu, ale nie pozwoli Ci skonfigurować i pobrać czystych plików CSS. Wyświetli tylko nieużywane pliki CSS.

 63
Author: megaSteve4,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-18 16:18:38

Google Page Speed może to zrobić za Ciebie (w rzeczywistości robi dużo więcej niż tylko mówi, który CSS jest nieużywany). W Firefoksie jest on dostępny jako dodatek FireBug. Jest też wersja online.

 21
Author: Salman A,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-17 10:28:47

Lepszy Minifier CSS w C# wyrzuca zbędne style;

Chciałbyś również użyć Dust-Me do tego.

Pamiętaj, że jeśli jest jakaś zawartość, która nie jest obecnie widoczna dla dust-me, możesz wyrzucić style, których potrzebujesz.

EDIT: link został uszkodzony, ale archive.org posiada zarówno stronę jak i Kod.

 8
Author: mjc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-28 07:03:59

Wygląda na to, że ktoś zaktualizował selektory DustMe do pracy z Firefoksem ponownie pod nową nazwą - 'CSS Roundup' http://blog.brothersmorrison.com/?p=198

 7
Author: Josh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-21 16:36:53

Użycie CSS

Rozszerzenie Firebug do wyświetlenia, które reguły CSS są faktycznie używane.

CSS Usage jest rozszerzeniem dla Firebug (dlatego konieczne jest zainstalowanie Firebug), które pozwala poznać nieużywane reguły stylu CSS. Identyfikuje CSS, którego używasz, a którego nie używasz. Pozwala wskazać, jakie niepotrzebne części można usunąć. Zdecydowanie powinieneś użyć tego dodatku, aby zachować pliki CSS tak lekkie, jak to możliwe.

 6
Author: Somnath Muluk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-10 10:26:49

Use Internet Explorer Developer Toolbar , S View > CSS Selector Matches : wyświetla raport wszystkich reguł stylów i ile razy są one używane na bieżącej stronie.

 3
Author: Jitendra Vyas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-22 19:23:01

Sprawdź PageSpeed Google dla Firefoksa. Robi to, i cały ładunek więcej.

Najwyraźniej wtyczka Chrome jest również w fazie rozwoju.

 3
Author: Drew Noakes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-09-27 17:49:24