Hľadač nepoužitých CSS selektorov
Porovnajte CSS súbor s HTML kódom a nájdite selektory, ktoré sa nikde nepoužívajú.
Hľadač nepoužitých CSS selektorov
Vložte CSS súbor na jednu stranu a HTML, ktoré štylizuje, na druhú stranu, a tento nástroj vám ukáže každý selektor, ktorý sa nezhoduje s ani jedným prvkom na stránke. Ide o rýchly spôsob, ako nájsť mŕtve pravidlá, ktoré zostali po redizajne, odstránenom komponente alebo mesiacoch kopírovaného CSS — práve ten typ zbytočného kódu, ktorý je únavný hľadať zrakom v súbore so stovkami pravidiel.
Možnosť "Ignorovať pseudo-triedy a pseudo-prvky" porovnáva pravidlo ako .button:hover ako jednoduché .button, keďže statický HTML snímok nemôže ukázať hover alebo focus stav; vypnite ju a nástroj skontroluje tie, ktoré bezpečne môže — first-child, last-child, nth-child a not — oproti skutočnej pozícii každého prvku. "Ignorovať selektory podľa vzoru" prijíma regulárny výraz alebo obyčajný text na vylúčenie tried, ktoré skript mení za behu, ako je čokoľvek začínajúce na js- alebo is-active, aby nikdy neboli označené ako mŕtve. "Zobraziť triedy/ID z HTML bez CSS pravidla" obráti porovnanie, čo je užitočné na chytanie preklepov v názvoch tried. "Zahrnúť selektory v @media" skontroluje pravidlá v media query rovnako ako zvyšok súboru, alebo ich preskočí, keď je vypnuté. Prepnite výstup na "Vyčistená CSS", aby ste dostali CSS súbor späť bez každého nepoužitého pravidla.
Porovnanie prebieha proti HTML štruktúre tak, ako je napísaná — značkovanie injektované skriptom po načítaní stránky nie je v nalepenom snímku, preto si dvakrát skontrolujte pred odstránením pravidla. Selektory skombinované čiarkami sú kontrolované jednotlivo, takže pravidlo pokrývajúce dve triedy naraz sa odstráni iba keď sú obe potvrdené ako nepoužité.
Všetko prebieha vo vašom prehliadači: CSS a HTML, ktoré vložíte, sa nikdy neukladajú nikam. Skopírujte výsledok, stiahnite si ho ako .txt súbor alebo ho pošlite priamo späť do vstupu, aby ste spustili ďalší priechod.