Czy istnieją jakieś dobre podejścia, które pomogą zidentyfikować nieużywane definicje css w projekcie? Pobierano kilka plików css i teraz próbuję trochę posprzątać.
Czy istnieją jakieś dobre podejścia, które pomogą zidentyfikować nieużywane definicje css w projekcie? Pobierano kilka plików css i teraz próbuję trochę posprzątać.
Odpowiedzi:
Spójrz na rozszerzenie Firefox Dust-Me na https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ .
Narzędzia dla programistów Chrome mają kartę Audyty , która może pokazywać nieużywane selektory CSS.
Przeprowadź audyt, a następnie w obszarze Wydajność strony internetowej zobacz Usuwanie nieużywanych reguł CSS
Właśnie znalazłem tę stronę - http://unused-css.com/
Wygląda dobrze, ale musiałbym dokładnie sprawdzić wygenerowany „czysty” css przed przesłaniem go na którąkolwiek z moich stron.
Podobnie jak w przypadku wszystkich tych narzędzi , muszę sprawdzić, czy nie usuwa identyfikatorów i klas bez stylu, ale jest używanych jako selektory JavaScript.
Poniższa treść pochodzi ze strony http://unused-css.com/, więc pochwal ich za polecanie innych rozwiązań:
Latish Sehgal napisał aplikację systemu Windows do wyszukiwania i usuwania nieużywanych klas CSS. Nie testowałem tego, ale z opisu musisz podać ścieżkę do plików HTML i jednego pliku CSS. Następnie program wyświetli listę nieużywanych selektorów CSS. Ze zrzutu ekranu wygląda na to, że nie ma możliwości wyeksportowania tej listy lub pobrania nowego, czystego pliku CSS. Wygląda również na to, że usługa jest ograniczona do jednego pliku CSS. Jeśli masz wiele plików, które chcesz wyczyścić, musisz je wyczyścić jeden po drugim.
Dust-Me Selectors to rozszerzenie 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óry z tych selektorów nie jest używany. Dane są następnie przechowywane, aby podczas testowania kolejnych stron selektory mogły zostać wykreślone z listy w miarę ich spotykania. To narzędzie powinno być w stanie przeszukać całą stronę internetową, ale niestety mogę sprawić, by działało. Ponadto nie sądzę, że można skonfigurować i pobrać plik CSS z usuniętymi stylami.
Topstyle to aplikacja systemu Windows zawierająca wiele narzędzi do edycji CSS. Nie testowałem tego zbyt wiele, ale wygląda na to, że ma możliwość usuwania nieużywanych selektorów CSS. To oprogramowanie kosztuje 80 USD.
Cleancity CSS Cleaner to skrypt php, który używa wyrażeń regularnych do sprawdzania stylów jednej strony. Powie ci klasy, które nie są dostępne w kodzie HTML. Nie testowałem tego rozwiązania.
Deadweight to narzędzie do obsługi CSS. Biorąc pod uwagę zestaw arkuszy stylów i zestaw adresów URL, określa, które selektory są rzeczywiście używane, oraz listy, które można „bezpiecznie” usunąć. To narzędzie jest modułem rubinowym i będzie działało tylko z witryną z szynami. Nieużywane selektory należy ręcznie usunąć z pliku CSS.
Helium CSS to narzędzie javascript do wykrywania nieużywanego CSS na wielu stronach witryny. Najpierw musisz zainstalować plik javascript na stronie, którą chcesz przetestować. Następnie musisz wywołać funkcję helu, aby rozpocząć czyszczenie.
UnusedCSS.com to aplikacja internetowa z łatwym w użyciu interfejsem. Wpisz adres strony, 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 czystego pliku CSS.
CSSESS to bookmarklet, który pomaga znaleźć nieużywane selektory CSS w dowolnej witrynie. To narzędzie jest dość łatwe w użyciu, ale nie pozwala na konfigurację i pobieranie czystych plików CSS. Wyświetla tylko nieużywane pliki CSS.
Google Page Speed może to zrobić dla Ciebie (w rzeczywistości robi znacznie więcej niż tylko mówienie, który CSS jest nieużywany). W FireFox jest dostępny jako dodatek FireBug. Jest też wersja online.
Lepszy CSS Minifier w C # zrzuca zbędne style;
Z tym też chciałbyś użyć Dust-Me.
Pamiętaj, że jeśli jest jakaś treść, która nie jest obecnie widoczna dla mnie, możesz wyrzucić potrzebne style.
EDYCJA: link został uszkodzony, ale archive.org ma zarówno stronę, jak i kod.
Rozszerzenie Firebug, aby zobaczyć, które reguły CSS są faktycznie używane.
Użycie CSS to rozszerzenie Firebug (dlatego jest konieczne, aby mieć zainstalowany Firebug), który pozwala poznać nieużywane reguły stylu CSS. Określa CSS, którego używasz, a których nie używasz. Pozwala wskazać, które niepotrzebne części można usunąć. Zdecydowanie powinieneś użyć tego dodatku, aby pliki CSS były tak lekkie, jak to możliwe.
Wygląda na to, że ktoś zaktualizował selektory DustMe do współpracy z Firefoksem pod nową nazwą - „CSS Roundup” http://blog.brothersmorrison.com/?p=198
Użyj Internet Explorer Developer Toolbar , s Widok> CSS selektor pasuje : Zobacz raport wszystkich zasad określonych stylów i ile razy są one wykorzystywane na bieżącej stronie.
Sprawdź Google PageSpeed dla Firefoksa . Robi to i cały ładunek więcej.
Najwyraźniej wtyczka Chrome również jest w fazie rozwoju.