Zoeker voor ongebruikte CSS-selectors
Vergelijk een stylesheet met een HTML-pagina en geef een lijst van selectors die niets treffen.
Zoeker voor ongebruikte CSS-selectors
Plak een stylesheet aan de ene kant en de HTML die het opmaakt aan de andere kant, en deze tool geeft een overzicht van elke selector die geen enkel element op de pagina treft. Het is een snelle manier om dode regels op te sporen die na een herontwerp, een verwijderd onderdeel of maanden van gekopieerde CSS zijn achtergelaten - het soort rommel dat in een bestand met honderden regels moeizaam met het oog te vinden is.
Pseudo-klassen en pseudo-elementen negeren vergelijkt een regel zoals .button:hover als gewoon .button, omdat een statische HTML-snapshot geen hover- of focustoestand kan weergeven; zet het uit en de tool controleert de regels die het veilig kan - first-child, last-child, nth-child en not - tegen de werkelijke positie van elk element. Selectors negeren die overeenkomen accepteert een reguliere expressie, of een gewone tekstfragment als fallback, om klassen uit te sluiten die een script tijdens runtime aanpast, zoals alles wat begint met js- of is-active, zodat ze nooit als dood worden gemeld. HTML-klassen/IDs zonder CSS-regel tonen draait de vergelijking om, wat nuttig is voor het opsporen van typefouten in klassenamen. Selectors in @media opnemen controleert media query-regels op dezelfde manier als de rest van het stylesheet, of slaat ze over wanneer uitgeschakeld. Zet de uitvoer om naar Opgeschoonde CSS om het stylesheet terug te krijgen met elke ongebruikte regel verwijderd.
De vergelijking wordt uitgevoerd op de HTML-structuur zoals geschreven - opmaak die door een script na het laden van de pagina wordt ingevoegd, staat niet in de geplakte snapshot. Controleer daarom twee keer voordat u een regel verwijdert. Selectors die met komma's zijn gecombineerd, worden afzonderlijk gecontroleerd. Een regel die twee klassen tegelijk bedekt, wordt alleen verwijderd zodra beide als ongebruikt zijn bevestigd.
Alles gebeurt in uw browser: de CSS en HTML die u plakt, worden nergens geüpload. Kopieer het resultaat, download het als .txt-bestand, of stuur het direct terug naar de invoer om een ander doorgang uit te voeren.