11 Nützliche Tools zum Überprüfen, Reinigen und Optimieren Ihrer CSS-Datei

Das Minimieren der Dateigröße des CSS-Stylesheets wurde von vielen als eine gute Möglichkeit angesehen, um das Laden Ihrer Website zu beschleunigen. Durch das Reduzieren der CSS-Datei um einige Kilobyte nimmt der Server weniger Zeit zum Laden und führt zu einer schnelleren Webseite.

Für den Fall, dass Ihre Artikel die Digg-Startseite berühren, könnte dies auch einer der wenigen entscheidenden Faktoren sein (es gibt viele weitere), ob Ihr Server abstürzt oder nicht.

Einige der gebräuchlichsten Methoden zum Minimieren / Optimieren eines CSS-Stylesheets umfassen das Entfernen nicht verwendeter Selektoren, unerwünschter Leerzeichen, Tabulatoren, Kommentare und das Ändern der Langschrift-Deklaration in Kurzschreibweise.

Ich weiß, dass einige von Ihnen hier nicht technisch versiert genug sind, um Ihren eigenen CSS-Code zu bearbeiten. Daher werde ich Ihnen hier einige nützliche Tools zur Verfügung stellen, mit denen Sie Ihren CSS-Code optimieren können, selbst wenn Sie überhaupt keine Kenntnis davon haben CSS-Kodierung.

Überprüfen Sie Ihren CSS-Code

W3C CSS Validator

Der W3C-CSS-Validator ist ein Tool, mit dem Sie Ihr CSS überprüfen können. Sie können den Java-Validator entweder auf Ihren Computer herunterladen und offline verwenden oder das Online-Formular verwenden, um Ihren CSS-Code zu überprüfen.

Firefox Add-On für CSS-Prüfer

Um Ihnen die Validierung Ihres CSS-Codes zu erleichtern, gibt es diese Firefox-Erweiterung - CSS Validator -, die Sie in Ihrem Browser installieren können. Einmal installiert, können Sie Ihren Code einfach und schnell mit einem Rechtsklick überprüfen.

CSSCheck

Auch wenn Ihr CSS-Code überprüft wurde, bedeutet dies nicht, dass er fehlerfrei ist. Die Validierung bedeutet nur, dass sie den vom W3C festgelegten CSS-Standards entspricht. Wenn Sie mit Ihrem Stylesheet einige Browser-Kompatibilitätsprobleme überprüfen und prüfen möchten, ist CSSCheck ein gutes Werkzeug für Sie.

CSS Analyzer

CSS Analyzer ist ein nützliches Tool, mit dem Sie Ihr Stylesheet gegen den W3C-Standard validieren, einen Farbkontrasttest durchführen und prüfen können, ob relevante Größen in relativen Maßeinheiten angegeben sind.

Falls Sie sich fragen, besteht der Farbkontrasttest darin, zu prüfen, ob die Vordergrund- und Hintergrundfarbkombinationen einen ausreichenden Kontrast bieten, wenn Sie von jemandem gesehen werden, der Farbdefizite hat oder auf einem Schwarzweiß-Bildschirm.

Bereinigen Sie Ihren CSS-Code

Dust-Me-Selektoren

Dust-Me Selectors ist eine Firefox-Erweiterung, die ungenutzte CSS-Selektoren auf der angezeigten Seite findet. Wenn Sie nachfolgende Seiten derselben Domäne testen, wird das Ergebnis mit den vorherigen Daten abgeglichen und alle gefundenen Selektoren aus der Liste gestrichen. Sie können damit einzelne Seiten testen oder die gesamte Site spider machen.

Am Ende erhalten Sie einen Bericht über die Selektoren, die nirgendwo auf der Site verwendet werden. Sie können diese Selektoren dann aus Ihrem Stylesheet entfernen (weniger Code bedeutet kleinere Dateigröße)..

CSS-Redundanzprüfung

Ähnlich wie bei Dust-Me-Selektoren prüft dieses Tool Ihre Site auf nicht verwendete und redundante CSS-Selektoren. Der einzige Unterschied besteht darin, dass Sie den URI für jede Seite, die Sie testen möchten, manuell eingeben müssen.

Optimieren und komprimieren Sie Ihren CSS-Code

Wenn Sie die Gültigkeit Ihres CSS überprüft und nicht mehr benötigten Code bereinigt haben, müssen Sie die CSS-Datei optimieren und auf die kleinstmögliche Größe reduzieren.

CSS Tidy

CSS Tidy ist eine Open-Source-Software, mit der Sie Ihre CSS-Datei optimieren und komprimieren können. Es ist im EXE-Format (nur Windows) und in einem gezippten PHP-Skriptformat (alle Plattformen für Webentwickler) verfügbar. Was CSS Tidy macht, ist in erster Linie den Kommentar zu entfernen, unnötige Leerzeichen und einige Code in Kurzschrift zu ändern. Während der Komprimierung können Sie zwischen Lesbarkeit des Codes und maximaler Komprimierung wählen. Je nach Länge Ihres Codes können Sie problemlos eine Komprimierungsrate von bis zu 30% oder mehr erreichen.

Da es sich bei CSS Tidy um ein Open Source-Projekt handelt, gab es mehrere Websites, die den Code in ein Online-Tool verwandelten, das von den Benutzern verwendet werden konnte. Hier sind einige davon:

• SAUBERES CSS
• Code Beautifier
• CSS Formatierer und Optimierer aus dem CSS Portal

Andere CSS-Optimierer

FlumpCakes CSS-Optimierer

Ein einfacher Optimierer mit mehreren Optionen, aus dem Sie auswählen können.

Robson CSS-Kompressor

Obwohl es genauso aussieht wie andere, habe ich festgestellt, dass die Komprimierungsrate für Robson CSS Compressor die höchste von allen ist. Obwohl es mehrere Optionen für Sie gibt, mit denen Sie die Einstellung anpassen können, erhalten Sie immer das beste Ergebnis, wenn Sie alle Optionen unberührt lassen (alle Optionen aktiviert).

CSS-Laufwerk CSS-Kompressor

Der von CSS Drive angebotene CSS Compressor verfügt über zwei Modi, die Sie verwenden können: Normal und Erweitert. Im regulären Modus müssen Sie nur die gewünschte Komprimierungsstufe (Light, Normal oder Super Compact) auswählen. Den Rest erledigt der CSS Compressor. Im erweiterten Modus erhalten Sie mehr Optionen und eine bessere Aussage darüber, wie Ihr Stylesheet optimiert werden soll.

CSS Optimizer

Das CSS-Optimierungsprogramm von mabblog.com ist eine Befehlszeilenanwendung für Mac und Linux. Es ist für diejenigen gedacht, die eher mit dem Terminal als mit einer Online-Schnittstelle vertraut sind. Für diejenigen, die es schnell erledigen wollen, gibt es eine einfache Online-Version.

Hoffentlich reichen die hier aufgeführten Tools aus, um Ihr CSS-Stylesheet zu optimieren und zu optimieren. Wenn Sie andere als die oben genannten Tools verwendet haben, teilen Sie sie uns in den Kommentaren mit.

Erfahren Sie mehr über: Webdesign, Webentwicklung, Webmaster-Tools.