Sări la conținut
Complet local

Localizator de selectoruri CSS neutilizate

Comparați o foaie de stil cu o pagină HTML și listați selectorurile care nu se potrivesc cu nimic.

Intrare
HTML
Ieșire

Localizator de selectoruri CSS neutilizate

Lipiți o foaie de stil pe o parte și HTML-ul pe care îl stilizează pe cealaltă, iar acest instrument listează fiecare selector care nu se potrivește cu nici un element din pagină. Este o modalitate rapidă de a găsi reguli moarte rămase după o redesenare, îndepărtarea unei componente sau luni de CSS copiat — tipul de risipă care este obositor să cauți cu ochii în ochi într-un fișier cu sute de reguli.

"Ignora pseudo-clasele și pseudo-elementele" compară o regulă precum .button:hover ca .button simplu, deoarece o imagine statică HTML nu poate arăta starea de hover sau focalizare; lăsați-o dezactivată și instrumentul verifică cele pe care le poate face în siguranță — first-child, last-child, nth-child și not — împotriva poziției reale a fiecărui element. "Ignora selectorurile care se potrivesc" acceptă o expresie regulată sau un fragment de text simplu ca alternativă pentru a exclude clase pe care un script le comută în timp de execuție, cum ar fi orice lucru care începe cu js- sau is-active, deci nu sunt niciodată marcate ca moarte. "Arată clasele/ID-urile HTML fără regula CSS" inversează comparația, util pentru a detecta literele greșite din numele claselor. "Include selectorurile din interiorul @media" verifică regulile de interogare a media la fel ca restul foii de stil sau le omite atunci când este dezactivat. Comutați rezultatul la "CSS curățat" pentru a obține foaia de stil înapoi cu fiecare regulă neutilizată eliminată.

Comparația se efectuează împotriva structurii HTML așa cum este scrisă — marcajul injectat de un script după încărcarea paginii nu se află în instantaneul lipit, deci verificați din nou înainte de a șterge o regulă. Selectorurile combinate cu virgule sunt verificate individual, deci o regulă care acoperă două clase deodată este doar îndepărtată odată ce ambele sunt confirmate ca neutilizate.

Totul se întâmplă în browserul dvs.: CSS-ul și HTML-ul pe care le lipiți nu sunt niciodată încărcate nicăieri. Copiați rezultatul, descărcați-l ca fișier .txt sau trimiteți-l direct înapoi la intrare pentru a executa o nouă trecere.

FAQ

Verifica selectorurile din interiorul @media, @supports și @keyframes?
Selectorurile din interiorul @media sunt verificate ca orice altă regulă, cu o opțiune de a le ignora dacă preferați. Alte reguli la nivelul « la » cum ar fi @font-face și @keyframes nu au selectoruri de element pentru a compara, deci rămân neschimbate.
Poate detecta clase pe care JavaScript le adaugă sau elimină?
Nu — potrivirea se face pe baza HTML-ului pe care îl lipiți, nu pe o pagină live cu script. Utilizați opțiunea ignore-pattern pentru a exclude clase pe care știți că sunt comutate de JavaScript, cum ar fi is-open sau js-active, deci nu sunt raportate ca neutilizate.
Ce se întâmplă cu combinatorii precum selectorurile de copil sau frate?
Instrumentul urmărește lanțul de selector complet — descendență, copil, frate adiacent și frate general — împotriva structurii HTML-ului lipit, nu doar a numelui clasei finale.
De ce un selector pe care știu că este folosit este încă listat ca neutilizat?
De obicei, HTML-ul care îl folosește nu a fost lipit, sau este adăugat dinamic după încărcarea paginii. Lipiți marcajul complet randată, sau excludeți selectorul cu opțiunea ignore-pattern dacă este aplicat de un script.
CSS-ul sau HTML-ul meu sunt încărcate undeva?
Nu. Comparația funcționează în întregime în browserul dvs. — nici foaia de stil și nici marcajul pe care îl lipiți nu pleacă niciodată de pe dispozitivul dvs.