Przejdź do treści

Wyszukiwarka nieużywanego CSS

Porównaj arkusz stylów CSS z kodem HTML i znajdź selektory, które nigdzie się nie stosują.

Wejście
HTML
Wynik

Wyszukiwarka nieużywanego CSS

Wklej arkusz stylów CSS na jedną stronę i HTML, które stylizuje, na drugą stronę, a to narzędzie pokaże ci każdy selektor, który nie pasuje do żadnego elementu na stronie. To szybki sposób na znalezienie martwych reguł pozostawionych po przeprojektowaniu, usuniętym komponencie lub miesiącach skopiowanego CSS — dokładnie tego rodzaju zbyteczny kod, który jest nudny do wyszukiwania wzrokiem w pliku ze sto regułami.

Opcja "Ignoruj pseudo-klasy i pseudo-elementy" porównuje regułę jak .button:hover jako zwykłe .button, ponieważ statyczny snímek HTML nie może pokazać stanu hover lub focus; wyłącz ją, a narzędzie sprawdzi te, które może bezpiecznie — first-child, last-child, nth-child i not — w stosunku do rzeczywistej pozycji każdego elementu. "Ignoruj selektory pasujące do wzoru" przyjmuje wyrażenie regularne lub zwykły tekst, aby wykluczyć klasy, które skrypt zmienia w czasie rzeczywistym, takie jak coś zaczynającego się od js- lub is-active, aby nigdy nie były oznaczane jako martwe. "Pokaż klasy/ID z HTML bez reguły CSS" odwraca porównanie, co jest przydatne do łapania literówek w nazwach klas. "Uwzględnij selektory w @media" sprawdza reguły w media query tak samo jak reszta arkusza stylów lub je pomija, gdy jest wyłączone. Przełącz wynik na "Wyczyszczone CSS", aby uzyskać arkusz stylów CSS z powrotem bez każdej nieużywanej reguły.

Porównanie odbywa się względem struktury HTML, jak jest napisana — znaczniki wstrzykiwane przez skrypt po załadowaniu strony nie znajdują się w wklejonym snímku, więc dokładnie sprawdź przed usunięciem reguły. Selektory połączone przecinkami są sprawdzane indywidualnie, więc reguła obejmująca dwie klasy naraz jest usuwana tylko wtedy, gdy oba są potwierdzone jako nieużywane.

Wszystko dzieje się w Twojej przeglądarce: CSS i HTML, które wklejasz, nigdy nie opuszczają Twojego urządzenia. Skopiuj wynik, pobierz go jako plik .txt lub wyślij go z powrotem do wejścia, aby uruchomić kolejny przebieg.

Częste pytania

Czy sprawdza selektory w @media, @supports i @keyframes?
Selektory w @media są sprawdzane jak każda inna reguła, z opcją ich pominięcia, jeśli wolisz. Inne reguły at, takie jak @font-face i @keyframes, nie mają selektorów elementów do porównania, więc pozostają nienaruszone.
Czy może przechwycić klasy, które JavaScript dodaje lub usuwa?
Nie — porównanie odbywa się w stosunku do HTML, który wklejasz, a nie do żywej strony ze skryptem. Użyj opcji wzoru ignorowania, aby wykluczyć klasy, które wiesz, że JavaScript zmienia, takie jak is-open lub js-active, aby nigdy nie były zgłaszane jako martwe.
Co się stanie z kombinatorami, takimi jak selektor potomka lub brata?
Narzędzie śledzi cały łańcuch selektora — potomka, dziecka, sąsiedniego brata i ogólnego brata — w stosunku do struktury wklejonych HTML, a nie tylko ostatniej nazwy klasy.
Dlaczego selektor, którego wiem, że jest używany, jest nadal wymieniony jako nieużywany?
Najczęściej HTML, który go używa, nie został wklejony, lub jest dodawany dynamicznie po załadowaniu strony. Wklej całą wyrenderowaną adiustację HTML, lub wyklucz selektor opcją wzoru ignorowania, jeśli jest używany przez skrypt.
Czy mój CSS lub HTML jest gdzieś przesłany?
Nie. Porównanie odbywa się całkowicie w Twojej przeglądarce — CSS i markup, które wklejasz, nigdy nie opuszczają Twojego urządzenia.