Vyhledávač nepoužitých CSS selektorů
Porovnejte CSS soubor s HTML kódem a najděte selektory, které se nikde nepoužívají.
Vyhledávač nepoužitých CSS selektorů
Vložte CSS soubor na jednu stranu a HTML, které stylizuje, na druhou stranu, a tento nástroj vám ukáže každý selektor, který se nezhoduje s ani jedním prvkem na stránce. Jde o rychlý způsob, jak najít mrtvá pravidla, která zůstala po redesignu, odstraněné komponentě nebo měsících kopírovaného CSS — právě ten typ zbytečného kódu, který je únavný hledat zrakem v souboru se stovkami pravidel.
Možnost "Ignorovat pseudo-třídy a pseudo-prvky" porovnává pravidlo jako .button:hover jako jednoduché .button, protože statický HTML snímek nemůže ukázat hover nebo focus stav; vypněte ji a nástroj zkontroluje ty, které bezpečně může — first-child, last-child, nth-child a not — vůči skutečné pozici každého prvku. "Ignorovat selektory podle vzoru" přijímá regulární výraz nebo prostý text na vyloučení tříd, které skript mění za běhu, jako je cokoli začínající na js- nebo is-active, aby nikdy nebyly označeny jako mrtvé. "Zobrazit třídy/ID z HTML bez CSS pravidla" obrátí porovnání, což je užitečné pro chytání překlepů v názvech tříd. "Zahrnout selektory v @media" zkontroluje pravidla v media query stejně jako zbytek souboru, nebo je přeskočí, když je vypnuto. Přepněte výstup na "Vyčištěné CSS", abyste dostali CSS soubor zpět bez každého nepoužitého pravidla.
Porovnání probíhá vůči HTML struktuře, jak je napsána — značení injektované skriptem po načtení stránky není v vloženém snímku, takže si dvakrát zkontrolujte před odstraněním pravidla. Selektory kombinované čárkami jsou kontrolovány jednotlivě, takže pravidlo pokrývající dvě třídy najednou se odstranění pouze když jsou oba potvrzeny jako nepoužité.
Všechno probíhá ve vašem prohlížeči: CSS a HTML, které vložíte, se nikdy neposílají nikam. Zkopírujte výsledek, stáhněte si jej jako .txt soubor nebo jej pošlete přímo zpět do vstupu, aby se spustil další průchod.