Sind CSS -Minifikatoren, die Elemente zerstören?

Question

Ich fand diesen CSS -Minifikator (http://www.lotterypost.com/css-compress.aspx). Am Ende dieser Seite befindet sich ein Abschnitt mit der Bezeichnung "Was macht der CSS -Kompressor absichtlich nicht?" Es gibt vier Dinge, von denen ich nicht verstehen konnte, warum sie destruktiv sein könnten:

Kombination der einzelnen Rand-, Polster- oder Grenzstile in ein einzelnes Eigentum.

  margin-top: 10px; 
  margin-right: 0; 
  margin-bottom: 8px;
  margin-left: 30px;

Wird

  margin: 10px 0 8px 30px;

Und Kombination von Stilen für das gleiche Element, das in verschiedenen Stilblöcken angegeben ist.

#element {
   margin: 0;
}

#element {
   color: #000000;
}

Wird

#element {
   margin: 0;
   color: #000000;
}

Ich denke, CsStidy macht beide. Ist die Webseite oben korrekt? Gibt es Situationen, in denen diese Art von Minifikation ein Problem sein könnte?

Answer 1

Ich bin der Entwickler des CSS -Kompressors, der Gegenstand dieser Frage ist (http://www.lotterypost.com/css-compress.aspx), also werde ich mit einem Beispiel dafür eingehen, wie ein Kompressor die CSS-Kaskade brechen kann, wenn ein Werkzeug ihn aggressiv umschreibt.

Es gibt viele Möglichkeiten, Elemente in einem Stilblatt zu zielen, und da ein CSS -Kompressor nicht intim über die Dom -Struktur, Klassen, IDs usw. der Seite verfügt Definitionen werden brechen oder nicht.

Zum Beispiel eine einfache HTML -Struktur:

<div class="normal centered">
    <p>Hello world.</p>
</div>

Und einige CSS:

div.normal p {
    margin: 10px 0 10px 0;
}

div.centered p {
    margin: 10px auto;
}

div.normal p {
    margin-bottom: 5px;
}

Das unkomprimiert Der Code würde einen zentrierten Absatz mit einem 10px -oberen Rand und einem 5px unteren Rand erzeugen.

Wenn Sie die CSS -Stile über den CSS -Kompressor ausführen, erhalten Sie den folgenden Code, der die Reihenfolge und Kaskade der ursprünglichen unkomprimierten Stile beibehält.

div.normal p{margin:10px 0}div.centered p{margin:10px auto}div.normal p{margin-bottom:5px}

Nehmen wir an, Sie möchten die Stile aggressiv komprimieren, indem Sie die Ränder der beiden kombinieren div.normal p Definitionen. Beide haben genau den gleichen Selektor und scheinen den unteren Rand überflüssig zu stylen.

Es gibt zwei Möglichkeiten, die Margen zu kombinieren: Sie können entweder die beiden Margin -Definitionen mit der ersten (oben) kombinieren (oben). div.normal p Stil oder kombinieren Sie sie in die letzte (unten). Versuchen wir es in beide Richtungen.

Wenn Sie die Ränder in die erste (oben) kombinieren, kombinieren Sie div.normal p Stil, du bekommst das:

div.normal p{margin:10px 0 5px}div.centered p{margin:10px auto}

Das Ergebnis der Kombination der Ränder auf diese Weise würde dazu führen, dass der untere Rand falsch auf 10px eingestellt wird, da die "zentrierte" Klasse den unteren Rand überschreibt (weil die Definition im "zentrierten" Stil jetzt später in der Kaskade erscheint).

Wenn Sie die Ränder mit dem letzten (unten) kombinieren, kombinieren Sie div.normal p Stil, du bekommst das:

div.centered p{margin:10px auto}div.normal p{margin:10px 0 5px}

Das Ergebnis der Kombination der Ränder auf diese Weise würde dazu führen, dass der Absatz nicht mehr als zentriert erscheint, da die untere "P" -Dfinition die linken und rechten Ränder von "Auto", die in der "zentrierten" Klasse definiert sind, außer Kraft setzen würde.

Wir können also sehen, dass durch Kombination von Stildefinitionen, die sogar genau denselben Selektor haben, einige ziemlich schlechte Probleme verursachen kann.

Würden Sie persönlich jemals einen solchen Code schreiben? Vielleicht, vielleicht auch nicht. Aufgrund der verschiedenen "Gewichts" -Regeln der Kaskade ist es möglich, in diese Art von Codefalle zu geraten, ohne sie jemals zu merken.

Angesichts der Tatsache, dass auf den heutigen Webseiten mehrere CSS-Dateien häufig zu einer Datei kombiniert werden, um den Server mit weniger Downloads zu treffen Geschrieben von verschiedenen Personen), die zusammen in eine Datei angehängt sind.

Tatsächlich habe ich den CSS -Kompressor für dieses Szenario auf meiner Website geschrieben. Lotteriepost. Jede Webseite verfügt über viele Stilblätter, die verschiedene JQuery- und andere Komponenten unterstützen, und der CSS -Kompressor wird verwendet, um alle diese Stilblätter automatisch zu einem einzigen Download zu komprimieren. Alle Seiten auf der Website verfügen über mindestens 10 verschiedene Stilblätter zusammen, und die meisten Seiten haben mehr als das.

Wenn Sie sich beispielsweise den Code hinter der CSS -Kompressorseite selbst ansehen, finden Sie das Hauptstilblatt im Kopf, das so aussieht:

<link rel="stylesheet" href="http://lp.vg/css/d11019.0/j2HKnp0oKDOVoos8SA3Bpy3UHd7cAuftiXRBTKCt95r9plCnvTtBMU2BY2PoOQDEUlKCgDn83h16Tv4jbcCeZ(gupKbOQ9ko(TcspLAluwgBqrAjEhOyXvkhqHA(h5WFDypZDK2TIr(xEXVZtX7UANdFp6n1xfnxqIMR8awqGE)vrwUgY2hrCGNNTt1xV7R1LtCSfF46qdH1YQr2iA38r1SQjAgHze(9" />

Das GobbledEegook in der URL ist tatsächlich eine verschlüsselte Zeichenfolge, die alle Stilblätter enthält, die Sie auf dem Server kombinieren können. Der Server komprimiert sie und zwischengespeichert das Ergebnis.

Zu den räumlichen und zeitsparenden Techniken auf diesem einen Styles Blattaufruf gehören:

• Kombinieren Sie viele Stilblätter zu einer Datei/Download, indem Sie sie einfach alle zusammen anhängen
• Komprimieren Sie das kombinierte Stilblatt mit dem CSS -Kompressor (ohne die Kaskade durcheinander zu bringen!)
• Verwenden eines anderen Domainnamens (LP.VG) für den Download des Stilblatt
• Verwenden eines sehr kurzen Domänennamens (LP.VG)
• Die GZIP -Komprimierung wird auf das Stylesheet auf dem Webserver angewendet
• Die Versionsnummer des Stylesheets ist in die URL eingebettet (".../d11019.0/..."), sodass ich die Versionsnummer ändern kann, wenn ein Stil in einem der mehreren Stilblätter geändert wird, und die Versionsnummer und die Browser wird die Version nie verwenden, die zwischengespeichert wurde. (Beachten Sie, dass die Versionsnummer Teil des URL -Pfades sein sollte, nicht in der Abfragezeichenfolge, da einige Proxy -Server die Abfragezeichenfolge nicht betrachten, um festzustellen, ob eine Seite aus dem Cache abgerufen werden soll.)

Ich hoffe, das erklärt die Dinge besser und ist hilfreich für diejenigen, die die Seitenleistung verbessern möchten!

-Todd

MEHR INFO:

Stellen Sie sich vor, dass wir Ihr Farbbeispiel annehmen und Stildefinitionen mit denselben Selektoren kombinieren können.

Hier sind einige unkomprimierte Stile:

div.normal p {
    margin: 10px 0 10px 0;
}

div.centered p {
    margin: 10px auto;
    color: blue;
}

div.normal p {
    color: black;
}

Der CSS -Kompressor erzeugt die folgende Ausgabe:

div.normal p{margin:10px 0}div.centered p{margin:10px auto;color:blue}div.normal p{color:#000}

Wenn wir aggressive Kombination von Stildefinitionen mit demselben Selektor anwenden, erhalten wir den folgenden Code.

Methode 1, Wenn Sie beide in die erste Definition kombinieren, würde die Textfarbe fälschlicherweise blau machen:

div.normal p{margin:10px 0;color:#000}div.centered p{margin:10px auto;color:blue}

Methode 2, Wenn beide in die zweite Definition kombiniert werden, würde der Text fälschlicherweise links ausgerichtet werden:

div.centered p{margin:10px auto;color:blue}div.normal p{margin:10px 0;color:#000}

Die einzige Zeit, mit der Stildefinitionen mit demselben Selektor kombiniert werden, ist 100% fehlerfrei, wenn die Definitionen direkt nacheinander angezeigt werden, aber in jedem anderen Fall besteht diese Technik, die die Kaskade der Stile zu beschädigen.

Ich konnte mir keinen Fall vorstellen, in dem ein Entwickler Code auf diese Weise schreiben würde Ein zusätzlicher Ausfallpunkt im Kompressor war es nicht wert, einen Langstrecken zu haben.

Ehrlich gesagt wäre ich sehr besorgt über einen CSS -Kompressor, der Stile aus verschiedenen Definitionsblöcken kombiniert, weil die Kaskade eine sehr fragile Sache ist und es extrem einfach ist, die Kaskade zu brechen.

Answer 2

Die Seite hat eine Abschnitt über „Vernunft nicht verwendet“, der beschreibt, warum es diese beiden Dinge nicht tut.

Und obendrein würde ich davon ausgehen, dass es nicht versucht, diese Dinge zu tun, weil es kein vollständiger CSS -Parser/-dolmetscher ist und anfangen würde, Dinge wie CSS -bedingte Blöcke zu bauen.

Answer 3

Mit "zerstörerisch" nehme ich an, du meinst 'das CSS funktioniert nicht wie erwartet.

Die Kombination von Langzeitregeln wie Ihrem ersten Beispiel kann ohne negative Auswirkungen erfolgen.

In einem einfachen alten Stylesheet ohne Medienblöcke oder anderer ausgefallener Dinge verursacht das zweite Beispiel auch kein Problem.

Der Grund, warum Nr. 2 riskant ist, liegt darin, dass das Ändern der Reihenfolge der Regeln oder die zusammenfassenden Regeln zusammen, ohne die Kaskade zu berücksichtigen, zu Unterbrechungen führen kann.

Einige CSS -Kompressoren können Regeln alphabetisch oder nach dem Auswahltyp neu ordnen. Diese sind sehr riskant, da sich bewegende Regeln um das kaskadierte Verhalten des Autors brechen können.

Minifier wie der Yui-Kompressor tun keine davon und entscheiden sich für sicherere Strategien wie das Entfernen von Whitespace, redundante Halbkolons und Nullen und dergleichen.

Mit mehr CSS mit Medienblöcken und anderen CSS3 -Code ist wahrscheinlich, dass viele der aktuellen CSS -Kompressoren überhaupt nicht richtig funktionieren. Die meisten haben keinen ordnungsgemäßen Lexer für das Parsen des Code-sie verwenden den Kontext-AWARE-BYTE-byte (Tidy) oder Regexs (den größten Teil des Restes), um den Code zu verarbeiten.

Bei der Auswahl eines Kompressors würde ich vorschlagen, etwas zu finden, das es lokal tut und mit einer guten Testsuite gesichert ist, damit Sie sehen können, welcher Fall korrekt behandelt wird (und nicht).