Finder für ungenutzte CSS-Selektoren
Vergleichen Sie ein Stylesheet mit einer HTML-Seite und listen Sie die Selektoren auf, die nichts treffen.
Finder für ungenutzte CSS-Selektoren
Fügen Sie ein Stylesheet auf der einen Seite und das HTML, das es formatiert, auf der anderen Seite ein, und dieses Tool listet jeden Selektor auf, der kein Element auf der Seite trifft. Es ist eine schnelle Möglichkeit, tote Regeln zu erkennen, die nach einer Neugestaltung, einem entfernten Element oder Monaten von kopiertem CSS zurückgelassen wurden - die Art von Ballast, der in einer Datei mit Hunderten von Regeln mühsam von Auge zu finden ist.
Pseudo-Klassen und Pseudo-Elemente ignorieren vergleicht eine Regel wie .button:hover als einfaches .button, da ein statischer HTML-Schnappschuss keinen Hover- oder Fokuszustand zeigen kann; deaktivieren Sie es und das Tool prüft die Regeln, die es sicher kann - first-child, last-child, nth-child und not - anhand der tatsächlichen Position jedes Elements. Selektoren ignorieren, die entsprechen akzeptiert einen regulären Ausdruck oder ein einfaches Textfragment als Fallback, um Klassen auszuschließen, die ein Skript zur Laufzeit umschaltet, wie alles, das mit js- oder is-active beginnt, damit sie nie als tot markiert werden. HTML-Klassen/IDs ohne CSS-Regel anzeigen kehrt den Vergleich um, was zum Erkennen von Tippfehlern in Klassennamen hilfreich ist. Selektoren in @media einschließen prüft Media-Query-Regeln genauso wie den Rest des Stylesheets oder überspring sie, wenn sie ausgeschaltet ist. Schalten Sie die Ausgabe auf Bereinigte CSS um, um das Stylesheet mit jeder ungenutzten Regel entfernt zurückzuerhalten.
Der Vergleich wird gegen die HTML-Struktur wie geschrieben durchgeführt - Markup, das von einem Skript nach dem Laden der Seite eingespritzt wird, ist nicht im eingefügten Schnappschuss vorhanden. Überprüfen Sie also zweimal, bevor Sie eine Regel löschen. Selektoren, die mit Kommas kombiniert sind, werden einzeln überprüft. Eine Regel, die zwei Klassen auf einmal abdeckt, wird nur entfernt, wenn beide bestätigt ungenutzt sind.
Alles passiert in Ihrem Browser: die CSS und HTML, die Sie einfügen, werden nirgendwo hochgeladen. Kopieren Sie das Ergebnis, laden Sie es als .txt-Datei herunter oder senden Sie es direkt zurück in die Eingabe, um einen weiteren Durchgang durchzuführen.