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

Werbung

Werbung
Werbung

CSS-Tools Die Minimierung der Dateigröße des CSS-Stylesheets wurde von vielen als eine gute Möglichkeit angesehen, die Geschwindigkeit beim Laden Ihrer Website zu erhöhen. Wenn Sie die CSS-Datei um mehrere Kilobytes reduzieren, benötigt der Server weniger Zeit zum Laden und eine schnellere Webseite.

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

Einige der am häufigsten verwendeten Methoden zum Minimieren / Optimieren eines CSS-Stylesheets umfassen das Eliminieren nicht verwendeter Selektoren, unerwünschter Leerzeichen, Tabulatoren, Kommentare und Ändern der Langhand-Deklaration in Kurzschrift-Notationen.

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 der nützlichen Tools vorstellen, mit denen Sie Ihren CSS-Code optimieren können, selbst wenn Sie überhaupt nichts davon wissen CSS-Codierung.

Überprüfen Sie Ihren CSS-Code

W3C CSS Validator

Der W3C CSS Validator ist ein Werkzeug, mit dem Sie Ihr CSS validieren 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.

w3c-validator - check css code

CSS Validator Firefox Add-On

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 rechten Mausklick überprüfen.

CSScheck

Obwohl Ihr CSS-Code validiert ist, bedeutet dies nicht, dass er fehlerfrei ist. Die Validierung bedeutet lediglich, dass sie den CSS-Standards des W3C entspricht. Wenn Sie überprüfen möchten, ob einige Browserkompatibilitätsprobleme mit Ihrem Stylesheet bestehen, ist CSSCheck ein gutes Tool für Sie.

CSS-Analysator

CSS Analyzer ist ein nützliches Werkzeug, mit dem Sie Ihr Stylesheet gegen den W3C-Standard validieren, einen Farbkontrasttest durchführen und einen Test durchführen können, um sicherzustellen, dass relevante Größen in relativen Maßeinheiten angegeben werden.

Falls Sie sich wundern, der Farbkontrasttest besteht darin, zu überprüfen, ob die Vordergrund- und Hintergrundfarbenkombinationen einen ausreichenden Kontrast bieten, wenn sie von jemandem mit Farbdefiziten oder auf einem Schwarz-Weiß-Bildschirm betrachtet werden.

Bereinigen Sie Ihren CSS-Code

Staub-Me-Selektoren

Dust-Me Selectors ist eine Firefox-Erweiterung, die nicht verwendete 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 werden von der Liste gestrichen. Sie können es verwenden, um einzelne Seiten zu testen oder um die gesamte Site zu spidern.

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 (geringerer Code bedeutet kleinere Dateigröße).

sauberes CSS-Tool

CSS-Redundanzprüfung

Ähnlich wie Dust-Me Selectors überprüft dieses Tool Ihre Site auf ungenutzte und redundante CSS-Selektoren. Das einzige, was anders ist, ist, dass Sie den URI für jede Seite, die Sie testen möchten, manuell eingeben müssen.

CSS-Prüfer

Optimieren und komprimieren Sie Ihren CSS-Code

Nachdem Sie die Gültigkeit Ihres CSS überprüft und unnötigen Code bereinigt haben, ist es an der Zeit, die CSS-Datei zu optimieren und auf die kleinstmögliche Größe zu reduzieren.

CSS Aufräumen

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 einem gezippten PHP-Skript-Format (alle Plattformen für Web-Entwickler) verfügbar. Was CSS Tidy macht, ist hauptsächlich den Kommentar zu entfernen, unnötige Leerzeichen und etwas Code in Kurzschrift zu ändern. Während der Komprimierung können Sie zwischen Code-Lesbarkeit oder maximaler Komprimierung wählen. Abhängig von der Länge Ihres Codes können Sie leicht eine Komprimierungsrate von bis zu 30% oder mehr erreichen.

Da es sich bei CSS Tidy um ein Open-Source-Projekt handelt, gibt es mehrere Websites, die den Code verwenden und ihn zu einem Online-Tool für Nutzer machen. Hier sind einige davon:

  • Reinigen Sie CSS
  • Code-Verschönerung
  • CSS Formatierer und Optimierer vom CSS Portal

Andere CSS-Optimierer

FlumpCakes CSS Optimierer

Ein einfacher Optimierer, der mit mehreren Optionen zur Auswahl kommt.

Flumpcakes-Css-Kompressor

Robson CSS-Komprimierung

Obwohl es genauso aussehen mag wie andere, habe ich festgestellt, dass die Komprimierungsrate für Robson CSS Compressor die höchste unter allen ist. Obwohl es verschiedene Optionen für Sie gibt, um die Einstellung zu optimieren, bleiben alle Optionen unverändert (alle Optionen sind aktiviert) und ergeben immer das beste Ergebnis.

CSS-Laufwerk CSS-Komprimierung

Der von CSS Drive angebotene CSS-Compressor gibt es in zwei Modi, die Sie verwenden können: Regular und Advanced. Im normalen Modus müssen Sie nur die gewünschte Komprimierungsstufe wählen (leicht, normal oder superkompakt), und der CSS Compressor erledigt den Rest. Im erweiterten Modus erhalten Sie mehr Optionen und mehr Einfluss darauf, wie Ihr Stylesheet optimiert werden soll.

CSS-Optimierer

Der CSS Optimizer von mabblog.com ist eine Kommandozeilenanwendung für Mac und Linux. Es ist für diejenigen gedacht, die sich eher mit dem Terminal als mit einer Online-Schnittstelle auskennen. Es gibt auch eine einfache Online-Version für diejenigen, die es schnell erledigen wollen.

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

In this article