dynamicinternet Webdesign

Das Blog

Themen, Tutorials sowie Tipps & Tricks über Webdesign, (X)HTML und CSS, Programmierung, WordPress und was uns sonst noch bewegt.

RSS abonnieren

Mein Stylesheet Kompressor läuft

Gerade habe ich mir eine Theme-Option Seite für dieses Blog erstellt und ein paar Sachen eingebaut, die mir das Leben etwas erleichtern. Dazu gehört der Stylesheet Kompressor aus meinem Projekt-X Theme. Er liest alle Stylesheets ein, entfernt Tabs, Zeilenumbrüche und Kommentare, sowie noch ein bischen zusäztlichen Whitespace. Ich habe es dabei nicht übertrieben, um noch das letzte Quentchen herauszuquetschen, das ist mir zu gefährlich.

Zum Schluß wird das komprimierte Stylesheet geschrieben. Damit wurde der erste Livetest bestanden. Im Themeordner muß der Outputordner chmod 0666 haben, damit es funktioniert. Das komprimierte Stylesheet hat jetzt 15750 bytes, was aber viel wichtiger ist, nur noch 1 Request an den Webserver statt 5.

Stelle ich die Option auf nicht komprimieren, wird das Stylesheet mit den @import Regeln versehen und ebenfalls neu geschrieben. Wichtig war bei der Entwicklung, daß sich die Stylesheets immer auf der selben Ebene befinden (nicht unbedingt im selben Ordner), sonst funtioniert es mit den Bildpfaden nicht.

Das Stylesheet von dem Plugin WP-Syntax habe ich per remove_action entfernt, da es mit einigen Styles Probleme gab.

5 Kommentare
  1. Sehr gut! Ich liebe es, CSS und Javascript zu komprimieren. Auch das ist meine Leidenschaft. Kennst du eigentlich meinen Online-Compressor?

    Komprimiere meine Dateien immer noch so: Einzelne Dateien durch den Compressor jagen und in eine separate Datei packen, die letztendlich vom Browser aufgerufen wird. Das gleiche wie dein Script, nur manuell.

  2. Micha sagt:

    Ja, ich kenne deinen Kompressor. Ich bin darauf gestoßen, als ich ein bischen gesucht habe (csstidy ist zu heftig). Ich wollte dich nur nicht fragen, weil du sonst gedacht hättest, warum macht es die Pfeiffe nicht selber ;)

  3. Olaf sagt:

    Hm, bastelst du gerad dran?

    Ich seh im FF nur schwarz. Mehrmals F5 und Strg+F5 hat auch nicht geholfen :(

    Im IE hab ich komischerweise das Problem nicht.

    Wie ich’s auch drehe, Console und Edit-Css zeigt mir 2x die /jquery.lightbox.packed.css an.

    pagead2.googlesyndication.com/pagead/show_ads.js ist gar 3x eingebunden.

    Haste was übersehen oder spinnt mein FF?

  4. Micha sagt:

    Danke Olaf.
    Sehr merkwürdig. Ich hatte die jQuery-Lightbox 1x in den head eingebunden, wie die nochmal in den Footer kommt, ist mir ein Rätsel. Ich habe sie erstmal wieder entfernt. Hat aber nichts mit dem komprimierten Stylesheet zu tun.

  5. Ach was, Micha. So was würde mir doch nie in den Sinn kommen.

Einen Kommentar schreiben