Preskoči na vsebino
TextArray1.41.0
100% lokalno

Iskalnik neuprabljenih CSS selektorjev

Primerjaj slogovno datoteko s HTML-om in prikaži selektorje, ki se ne ujemajo z nobenim elementom na strani.

Vhod
HTML
Izhod
Povezana orodja
Kalkulator specifičnosti CSSnovoOrodja za razvijalce
Minifier CSSOrodja za razvijalce
Pregledovalnik dostopnosti HTMLnovoOrodja za razvijalce
i18n tipka difOrodja za razvijalce
Pretvornik TOML v JSONOrodja za razvijalce
SQL v JSONOrodja za razvijalce
Iskalnik neuprabljenih CSS selektorjev
Prilepi slogovno datoteko na eno stran in HTML, ki ga sloji, na drugo, in to orodje bo naštelo vsak selektor, ki se ne ujema z nobenim elementom na strani. To je hiter način za odkrivanje mrtvih pravil, ki so ostala po preoblikovanju, odstranitvi komponente ali mesecih kopiranja in lepljenja CSS-a — vrsto nakopičenja, ki je dolgočasno iskati v datoteki s stotinami pravil.
Ignoriraj psevdo-razrede in psevdo-elemente primerja pravilo, kot je .button:hover, kot navadni .button, ker statična HTML potrditev ne more prikazati stanja hover ali focus; pustite ga izključenega in orodje bo preverilo tiste, ki jih varno lahko — first-child, last-child, nth-child in not — glede na pravo lego vsakega elementa. Ignoriraj selektorje, ki se ujemajo, vzame regularni izraz ali navaden tekstovni fragment kot fallback, da izključiš razrede, ki jih skripta preklopi med izvajanjem, kot je kaj, ki se začne z js- ali is-active, tako da se nikoli ne označijo kot neuporabljeni. Prikaži HTML razrede/ID-je brez CSS pravila obrnete primerjavo, koristno za lovljenje napak v imenih razredov. Vključi selektorje znotraj @media preveri pravila media query na enak način kot preostala datoteka ali jih preskoči, kadar je izključeno. Preklapljaj izhod na Očiščeni CSS, da dobiš slogovno datoteko z odstranjenim vsakim neuporabljenim pravilom.
Primerjava se izvaja glede na HTML strukturo, kot je napisana — oznaka, ki jo vstavi skripta po naložitvi strani, ni v prilepenjem posnetku, zato preverite pred izbrisom pravila. Selektorji, kombinirani z vejicami, se preverjajo posamično, zato se pravilo, ki pokriva dva razreda naenkrat, odstrani šele, ko se oba potrdita kot neuporabljena.
Vse se zgodi v vašem brskalniku: CSS in HTML, ki ga prilepiš, se nikoli ne naložita nikamor drugam. Kopiraj rezultat, ga preuri kot .txt datoteko ali ga direktno pošalji nazaj v vnos, da zaženeš drugi prehod.
FAQ
Ali preveri selektorje znotraj @media, @supports in @keyframes?
Selektorji znotraj @media se preverjajo kot katerakoli druga pravila, z možnostjo, da jih preskoči, če želiš. Druga na-pravila, kot sta @font-face in @keyframes, nimajo elementnih selektorjev za primerjavo, zato so prepuščena nespremenjena.
Ali lahko ujame razrede, ki jih JavaScript doda ali odstrani?
Ne — primerjava se izvaja glede na HTML, ki ga prilepiš, ne glede na živo, skriptirano stran. Uporabi možnost ignoriraj uzorak, da izključiš razrede, za katere veš, da jih JavaScript preklopi, kot je is-open ali js-active, tako da se ne prijavijo kot neuporabljeni.
Kaj se zgodi s kombinatorji, kot sta child ali sibling selektor?
Orodje sledi celotni verig selektorja — descendant, child, adjacent sibling in general sibling — glede na strukturo prilepenaga HTML-a, ne samo zadnji razred.
Zakaj je selektor, za katerega vem, da se koristi, še vedno naveden kot neuporabljen?
Najpogosteje HTML, ki ga koristi, ni prileljen, ali se doda dinamično po naložitvi strani. Prilepi celoten renderiran markup ali izključi selektor z možnostjo ignoriraj uzorak, če ga je primijenila skripta.
Ali sta moj CSS ali HTML naložena nekje?
Ne. Primerjava se izvršuje v celoti v tvojem brskalniku — niti slogovna datoteka niti oznaka, ki jo prilepiš, se nikoli ne zapusti tvojo napravo.