Minimieren von CSS mit CSS -Optimierer

Komprimieren von CSS: Ein leistungsstarkes Tool zur Verbesserung der Website -Geschwindigkeit

Kernpunkte:

• CSS -Komprimierung reduziert die Dateigröße, indem sie redundante Codes Zeichen entfernen, wodurch Downloads beschleunigt und die Datenübertragung gespeichert werden.
• CSS Optimizer (CSSO) ist ein Knoten.JS-basiertes Komprimierungswerkzeug, das mit der Befehlszeilenschnittstelle vertraut werden muss.
• CSSO entfernt nicht nur unnötige Räume, Semikolons und Kommentare, sondern optimiert auch, indem er Deklarationsblöcke mit doppelten Selektoren zusammennimmt, überschriebene Attribute löscht und Farbcodes verkürzt.
• Während das Komprimieren von CSS die Website der Website verbessern kann, kann der Code auch das Lesen und Debuggen erschweren. Daher wird empfohlen, die ursprünglichen unkomprimierten CSS -Dateien für Entwicklungszwecke zu halten.

(Das Folgende wird aus dem von Tiffany Brown geschriebenen Buch "The Master of CSS" ausgehalten. Das Buch ist weltweit erhältlich und Sie können die E-Book-Version hier auch kaufen.)

Entwicklertools können Ihnen helfen, Rendering -Probleme zu finden und zu beheben, aber wie effizient ist es? Wurde unsere Dateigröße minimiert? Dazu brauchen wir Komprimierungswerkzeuge.

im Kontext von CSS bedeutet Komprimierung einfach das Entfernen von überschüssigen Zeichen. Betrachten Sie beispielsweise den folgenden Codeblock:

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

Dieser Code enthält Zeilenpausen und Leerzeichen sowie 98 Bytes. Schauen wir uns das komprimierte Beispiel an:

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

Jetzt ist unser CSS nur 80 Bytes lang, ein Rückgang von 18%. Je weniger Bytes, desto schneller die Download -Geschwindigkeit und je weniger Daten Sie und Ihre Benutzer übertragen.

In diesem Abschnitt werden wir CSS Optimizer (CSSO), ein Knoten.JS-basiertes Komprimierungswerkzeug vorstellen. Um CSSO zu installieren, müssen Sie zuerst Node.js und NPM installieren. NPM ist als Teil des Installationsprozesses von Node.js installiert, sodass Sie nur ein Paket installieren müssen.

Mit CSSO müssen Sie mit der Befehlszeilenschnittstelle vertraut sein. Linux- und OS X -Benutzer können Terminalanwendungen verwenden (für OS X, Anwendungen & GT; Terminalanwendungen). Wenn Sie Windows verwenden, verwenden Sie die Eingabeaufforderung. Gehen Sie zum Start- oder Windows -Menü und geben Sie CMD in das Suchfeld ein.

CSSO

installieren

Nach dem Einrichten von Node.js und NPM können Sie CSSO installieren. Geben Sie in der Befehlszeile Eingabeaufforderung:

ein

npm install -g csso -g Flags, um CSSO global zu installieren, damit wir es in der Befehlszeile verwenden können. OS X- und Linux -Benutzer müssen möglicherweise sudo (sudo npm install -g csso) verwenden. Wenn NPM seinen Installationspfad zum Befehlszeilenfenster druckt und die Befehlszeile Eingabeaufforderung wieder auftaucht, wissen Sie, dass er erfolgreich installiert wurde, wie in Abbildung 3.25 gezeigt.

Abbildung 3.25.

Jetzt sind wir bereit, CSS zu komprimieren.

komprimieren Sie mit CSSO

Um die CSS -Datei zu komprimieren, den Befehl cSSO ausführen und den Dateinamen als Parameter übergeben:

csso style.css Dies führt eine grundlegende Komprimierung durch. CSSO entfernt unnötige Räume, zusätzliche Semikolons und Kommentare in CSS -Eingabedateien.

Nach Abschluss druckt CSSO das optimierte CSS auf Standardausgabe, d. H. Das aktuelle Terminal- oder Eingabeaufforderungfenster. In den meisten Fällen möchten wir diese Ausgabe jedoch in einer Datei speichern. Übergeben Sie dazu den zweiten Parameter an CSSO, den Namen der komprimierten Datei. Wenn wir beispielsweise die komprimierte Version von style.css als style.min.css speichern möchten, verwenden wir den folgenden Befehl:

csso style.css style.min.css standardmäßig ordnet CSSO Teile von CSS um. Beispielsweise verschmelzen es Deklarationsblöcke mit doppelten Selektoren und entfernt einige überschriebene Attribute. Betrachten Sie das folgende CSS:

body { margin: 20px 30px; padding: 100px; margin-left: 0px; }

h1 { font: 200 36px / 1.5 sans-serif; }

h1 { color: #ff6600; }

in diesem Codesegment überschreibt margin-left die vorherige margin -DEklaration. Wir haben auch h1 als Selektor für kontinuierliche Deklarationsblöcke wiederverwendet. Nach der Optimierung und Komprimierung erhalten wir:

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

cSSO löscht unnötige Räume, Newlines und Semikolons und verkürzt #ff6600 zu #f60. CSSO fusioniert auch die Eigenschaften margin und margin-left in eine Deklaration (margin: 20px 30px 20px 0) und kombiniert unsere separaten h1 -Auskündigungsblöcke in eine. Wenn Sie jetzt bezweifeln, wie CSSO Ihre CSS umschreiben wird, können Sie seine Refactoring -Funktion deaktivieren. Verwenden Sie einfach das Logo --restructure-off oder -off. Zum Beispiel wird das Ausführen von csso style.css style.min.css -off die folgenden Ergebnisse erhalten:

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

Jetzt ist unser CSS komprimiert, aber nicht optimiert. Durch Deaktivieren von Refactoring wird verhindert, dass Ihre CSS -Datei die Mindestgröße erreicht. Vermeiden Sie das Deaktivieren von Refactoring, es sei denn, Sie stoßen auf Probleme. Der in Kapitel 9 eingeführte Präprozessor bietet Kompressionsfunktionen in seinem Werkzeugsatz.

Häufig gestellte Fragen zur Verwendung von CSS -Optimierer zur Komprimierung von CSS

Welche Bedeutung hat die Komprimierung von CSS in der Webentwicklung?

CSS -Komprimieren ist ein wichtiger Aspekt der Webentwicklung, da es dazu beiträgt, die Größe von CSS -Dateien zu verringern. Eine reduzierte Dateigröße führt zu einem schnelleren Laden der Website und bietet somit eine bessere Benutzererfahrung. Die komprimierte CSS -Datei beseitigt unnötige Zeichen wie Leerzeichen, Zeilenpausen und Kommentare, die die Funktionalität des Codes nicht beeinflussen. Dieser Prozess kann die Leistung der Website erheblich verbessern, insbesondere für Benutzer mit langsameren Internetverbindungen.

Wie funktioniert CSS -Optimierer?

CSS -Optimierer funktioniert, indem Sie Ihren CSS -Code analysieren und unnötige Zeichen und Redundanz entfernen. Es komprimiert CSS -Dateien, indem es Leerzeichen, Zeilenpausen und Kommentare beseitigt und die Codestruktur vereinfacht. Dies führt zu kleineren Dateigrößen und schnelleren Downloads des Webbrowsers, wodurch die Gesamtleistung der Website verbessert wird.

Was sind die Risiken des Komprimierens von CSS?

Während das Komprimieren von CSS die Leistung Ihrer Website erheblich verbessern kann, sollte beachtet werden, dass der Code auch schwieriger zu lesen und zu debuggen kann. Dies liegt daran, dass der Prozess alle Formate und Kommentare entfernt, die den Code leicht zu lesen machen. Daher wird empfohlen, die ursprünglichen unkomprimierten CSS -Dateien für das Debuggen und die Entwicklung beizubehalten.

Kann ich CSS manuell komprimieren?

Ja, Sie können CSS manuell komprimieren, indem Sie alle unnötigen Zeichen entfernen und den Code vereinfachen. Dieser Prozess kann jedoch sehr zeitaufwändig und fehleranfällig sein, insbesondere für größere CSS-Dateien. Dieser Vorgang kann mithilfe von Tools wie CSS -Optimierer automatisiert werden, um sicherzustellen, dass Ihr CSS genau und effizient komprimiert wird.

Wie kann ich CSS -Optimierer verwenden?

Um den CSS -Optimierer zu verwenden, fügen Sie den CSS -Code einfach in das Eingangsfeld auf der CSS -Optimierer -Website ein und klicken auf die Schaltfläche "Optimierer". Das Tool analysiert dann Ihren Code und bietet Ihnen eine komprimierte Version, die Sie auf Ihrer Website kopieren und verwenden können.

Wirkt sich die Komprimierung von CSS auf die Funktionalität meiner Website aus?

Nein, das Komprimieren von CSS wirkt sich nicht auf die Funktionalität Ihrer Website aus. Der Prozess beseitigt nur unnötige Zeichen und vereinfacht den Code, ändert jedoch nicht die Art und Weise, wie der Browser die CSS -Regeln interpretiert. Daher bleibt das Aussehen und die Funktionalität Ihrer Website gleich, laden jedoch aufgrund der kleineren Dateigröße schneller.

Kann ich CSS -Optimierer für große CSS -Dateien verwenden?

Ja, CSS -Optimierer kann große CSS -Dateien verarbeiten. Je größer die Datei, desto länger dauert es, bis das Tool den Code analysiert und komprimiert. Bei großen CSS -Dateien ist die Verwendung von CSS -Optimierer jedoch immer noch effizienter und genauer, als zu versuchen, den Code manuell zu komprimieren.

Ist CSS -Optimierer frei zu bedienen?

Ja, CSS -Optimierer ist ein kostenloses Tool, mit dem Sie den CSS -Code komprimieren können. Es ist ein webbasiertes Tool, sodass Sie nichts herunterladen oder installieren müssen, um es zu verwenden. Sie müssen nur die CSS -Optimierer -Website besuchen, Ihren CSS -Code einfügen und eine komprimierte Version erhalten.

Kann ich diesen Prozess umkehren, wenn ich das CSS ändern muss?

Ja, Sie können diesen Vorgang mit der ursprünglichen unkomprimierten CSS -Datei umkehren. Aus diesem Grund wird empfohlen, eine Kopie der ursprünglichen CSS -Datei vor dem Komprimieren zu führen. Wenn Sie den Code ändern oder debuggen müssen, können Sie die Originaldatei verwenden und ihn dann erneut komprimieren, wenn Sie fertig sind.

Welche anderen Praktiken kann ich mit der CSS -Komprimierung kombinieren, um die Leistung meiner Website zu verbessern?

Zusätzlich zum Komprimieren von CSS können Sie auch HTML- und JavaScript -Dateien komprimieren. Dies kann die Ladezeit der Website weiter verkürzen. Weitere Praktiken umfassen die Optimierung von Bildern, die Verwendung von Content Distribution Networks (CDNs), die Ermöglichung der Komprimierung und die Implementierung des Browser -Caching. Diese Praktiken in Kombination mit der CSS -Komprimierung können die Leistung und Benutzererfahrung Ihrer Website erheblich verbessern.

Das obige ist der detaillierte Inhalt vonMinimieren von CSS mit CSS -Optimierer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!