CSS verkleinern und verdunkeln ähnlich wie Javascript [geschlossen]

9

Ich weiß, dass es mehrere Tools gibt, die in der Lage sind, JavaScript-Dateien zu verschleiern, zum Beispiel durch Drehen einfacher Funktionen wie:

%Vor%

in

%Vor%

Meine Frage ist, ob so etwas für die Verwendung mit CSS / HTML existiert (oder gibt es ein Werkzeug, das einen ähnlichen Effekt hat)? Insbesondere ein Minifikations- / Verschleierungstool, das Variablen und Referenzen umbenennt und zusätzlichen Leerraum usw. eliminiert.

Und wenn ja - würden die Vorteile in Bezug auf die Leistung die Lesbarkeit bei der CSS / HTML / JavaScript-Verkleinerung / Verschleierung überwiegen?

    
Rion Williams 04.01.2011, 20:08
quelle

8 Antworten

10

Es ist sehr schwierig, HTML oder CSS zu "verkleinern", da alles, was sicher gespeichert werden kann, Leerraum ist (was nicht zu einer großen Einsparung führt). Wie bei der Klassenumbenennung verlieren Sie einen wichtigen Teil des Webs, der einen semantischen Code hat (der eine Bedeutung darstellt). Ich denke, die beste Option ist sicherzustellen, dass Sie die gzip-Komprimierung auf Ihrem Webserver aktiviert haben und sich darauf konzentrieren, Ihre Assets nach Möglichkeit in einer einzigen Datei zu kombinieren.

    
Kevin Sylvestre 04.01.2011, 20:13
quelle
9

HTML Muncher ist ein Python-Tool, das versucht, IDs und CSS-Klassennamen in HTML-, JavaScript- und CSS-Dateien umzubenennen. Sie können es als ersten Schritt in Ihrem Optimierungsprozess verwenden, bevor Sie die Dateien an andere Tools wie Google Closure Compiler oder YUI CSS Compressor übergeben.

    
zah 06.07.2011 20:42
quelle
2

Der YUI Compressor minimiert CSS , aber ich bin mir nicht sicher, wie groß der Gewinn sein könnte über einfache gzip-Komprimierung. Wenn Sie so viel CSS haben, könnte das ein Warnsignal für größere Probleme sein.

    
Hank Gay 04.01.2011 20:14
quelle
1

Sieh dir das an: minifycss

Was die Verschleierung betrifft, bin ich mir nicht sicher, ob das eine so gute Idee ist. Die CSS-Klassen können überall manipuliert werden. In dem Moment, in dem du das CSS änderst, verlierst du den Link zu den Klassen / IDs usw. ...

    
user425445 04.01.2011 20:19
quelle
0

Schauen Sie sich html5boilerplate.com an; speziell den neuesten Source-Code auf GitHub.

Das HTML5Boilerplate-Build-Skript kann JavaScript, CSS und HTML für Sie minimieren . Es wird Ihre CSS-Selektoren nicht umbenennen, aber es ist wahrscheinlich am nächsten zu einem automatisierten "Obfuscator", den Sie finden werden.

Wenn Sie nur einige zusätzliche Bytes von jeder Seite entfernen möchten, stellen Sie sicher, dass Sie die gzip / deflate-Komprimierung verwenden und dann versuchen, Ihre CSS-Selektoreigenschaften und die Attribute und Werte ihres HTML-Elements zu alphabetisch zu sortieren.

Lesen Sie für die detaillierten Empfehlungen von Google zur oben genannten Methode.

In einigen dynamischen Sprachen mit HTML-Helfern (wie asp.net/C#) können Sie die "ClientID" -Methode des HTML-Steuerelements als zufällige Zeichenfolge überschreiben und Ihre CSS-Selektoren dynamisch mit Ihrem HTML-Code verknüpfen (nun, auf der Serverseite) Steuerelemente, die HTML rendern). Aber das wäre für eine andere Frage völlig und ist wahrscheinlich nicht das, was Sie suchen. Es würde auch ein Wartungsalbtraum werden.

David Murdoch 04.01.2011 21:04
quelle
0

Wenn Sie Ruby verwenden, ist hier ein Ruby CSS-Minifier , den ich gut nutze. Angesichts meines bereits knappen Stils kann ich meine Dateigröße um 15% reduzieren.

Zum Beispiel wird in einem Projekt die Summe von 5 Dateien bei 32.3kB zu 1 Datei von 26.4kB (18%). Bei einem anderen Projekt werden 2 Dateien von 21,6kB zu 1 Datei mit 19,0kB (12%).

    
Phrogz 04.01.2011 21:12
quelle
-1

Es gibt viele Online-Tools, die Sie für Dinge wie CSS-Minification verwenden können. Hier ist ein Online-CSS-Minifier ! Ich habe gefunden.

Wie beim Umbenennen von CSS-Klassen würde ich versuchen, dies zu vermeiden, da Sie dadurch die Lesbarkeit aus Ihrem HTML-Code verlieren.

    
the_doc 05.04.2014 08:46
quelle
-3

Ich habe ein Tool zum Verschleiern von CSS entwickelt. Ziel ist es, Stylesheets nicht schneller oder so zu laden, sondern Ihre "wiederverwendbare" Arbeit vor Diebstahl zu schützen. Es gibt mehrere Methoden, wie man eine originale CSS-Quelle bekommen kann (aber es ist noch in der Entwicklung und bessere Methoden werden verwendet). Ich würde es HTML / CSS-Vorlagen-Verkäufern empfehlen, die Live-Demos anbieten und sich Sorgen über Diebstähle machen, und auch für Programmierer - Freelancer, die ihre Arbeit (untreuen) Kunden präsentieren wollen. Sie können es versuchen: Ссылка

    
user3720773 19.09.2014 05:33
quelle