Finder för oanvända CSS-väljare
Jämför en stilmall mot en HTML-sida och lista väljare som inte matchar något.
Finder för oanvända CSS-väljare
Klistra in en stilmall på ena sidan och HTML som den formaterar på den andra, och det här verktyget listar alla väljare som inte matchar ett enda element på sidan. Det är ett snabbt sätt att hitta döda regler som lämnats kvar efter en omdesign, en borttagen komponent eller månader av kopierad CSS - den sort av skräp som är mödosamt att hitta för ögat i en fil med hundratals regler.
Ignorera pseudo-klasser och pseudo-element jämför en regel som .button:hover som vanligt .button, eftersom en statisk HTML-ögonblicksbild inte kan visa hover- eller fokustillstånd; stäng det och verktyget kontrollerar de det kan göra säkert - first-child, last-child, nth-child och not - mot varje elements faktiska position. Ignorera väljare som matchar tar ett reguljärt uttryck, eller en enkel textfragment som reserv, för att exkludera klasser som ett skript växlar vid körning, som allt som börjar med js- eller is-active, så de aldrig markeras som döda. Visa HTML-klasser/ID:n utan CSS-regel vänder jämförelsen, vilket är användbart för att hitta stavfel i klassnamn. Inkludera väljare inom @media kontrollerar media query-regler på samma sätt som resten av stilmallen, eller hoppar över dem när de är inaktiverade. Växla utdata till Städad CSS för att få tillbaka stilmallen med varje oanvänd regel borttagen.
Jämförelsen körs mot HTML-strukturen som skriven - markup som injiceras av ett skript efter att sidan har lästs in finns inte i den inklistrade ögonblicksbilden, så dubbelkontrollera innan du tar bort en regel. Väljare kombinerade med kommatecken kontrolleras individuellt, så en regel som täcker två klasser på en gång tas bara bort när båda har bekräftats som oanvända.
Allt sker i din webbläsare: CSS och HTML som du klistrar in lämnar aldrig din enhet. Kopiera resultatet, ladda ner det som en .txt-fil, eller skicka det direkt tillbaka till indata för att köra ytterligare en gång.