CSS Mehrere Dateien zusammenfassen

[ThaDafinser]

Hallo,

man soll ja wenn möglich so wenig wie möglich HTTP Request pro Seitenaufruf verwenden, weshalb man ja Icons z.B. auf einem Bild zusammenfasst.

Bei CSS habe ich jetzt das Problem wenn ich alle CSS Dateien per PHP auf dem Server zusammenziehe, stimmen die relativen Pfade der Externen Librarys nicht mehr, da die CSS Datei ja nicht mehr von ihrem Ordner geladen wird, sondern indirekt von einem PHP File.

Gibt es eine möglichkeit, diese Pfade einfach zu "reparieren" bzw. gibt es da einen Workaround?

[wahsaga]

Pfade beim "Zusammenfassen" entsprechend anpassen.
Oder gleich Pfadangaben absolut zum Basis-URI machen. (Vermeidet auch andere "Probleme", wenn dann bspw. URL-Rewriting hinzukommt.)

[AmicaNoctis]

Hallo,

vielleicht reicht es ja auch, jeweils alle CSS-Dateien eines Verzeichnisses zusammenzufassen und nicht gleich verzeichnisübergreifend. Das mit der Anpassung der Pfade scheint mir etwas zu fehleranfällig, auch wenn es auf den ersten Blick simpel erscheint.

Gruß,

Amica

[piratos]

Suchen und Tauschen - hat bei mir immer geklappt, eine CSS Datei nach der anderen und dann zusammen führen.

Die Zusammenfassung ist aber nur ein Teil - Thema wäre dann CSS Sprites.

[combie]

Naja, ob das Optimierung am richtigen Ende ist?

Klar kann man CSS Dateien zusammenfassen... mag sogar einen Hauch bringen. Und das PATH Problem könne man auch durch verwenden von kompletten URLs umschiffen.

Dem Browser und den Proxies das Cachen der Dateien explizit zu erlauben, dürfte mehr bringen. Und auch das ETag Gedöns für CSS abschalten.

[PHP-Desaster]

Gibt es eine möglichkeit, diese Pfade einfach zu "reparieren" bzw. gibt es da einen Workaround?

Du solltest deine CSS-Dateien direkt vernünftig zusammenpacken, dann hast du das Problem nicht. Ich nutze immer folgende Struktur und fahre damit sehr gut:

+ webroot
|-+ resources
| |- css
| `- images
|-- index.php
|-- ...

Referenzierung auf Bilder dann im CSS immer über url(../images/...). So kann ich im Buildvorgang einfach alle CSS-Dateien zusammenfassen ohne irgendwelche Pfade anfassen zu müssen.
Solltest du vielleicht drüber nachdenken

[Kropff]

Ich nutze immer folgende Struktur und fahre damit sehr gut: ...

Meine Meinung. Ich habe noch nie was von absoluten Pfaden gehalten. Bei einer sauberen Struktur kann man das wunderbar auch über relative Angaben lösen. Ist nur eine Frage der Organisation.

Peter

[ThaDafinser]

Naja, ob das Optimierung am richtigen Ende ist?

Dem Browser und den Proxies das Cachen der Dateien explizit zu erlauben, dürfte mehr bringen.

Schließt das eine, das andere aus? Ich hab niemals gesagt, das ich das nicht mache ;-)

Nur wenn man das eine schon optimiert hat, muss man wo anderst weitermachen....

Da es sich nicht um eine klassische Website, sondern um eine Applikation handelt, sollte man jede Möglichkeit ausnutzen, da im optimalsten Falle die Applikation so schnell läuft, dass der User nicht einmal mehr merkt, das er im Web unterwegs ist.

Für diejenigen die es villeicht noch nicht kennen:
- YSlow
- YUI Compressor Online YUI Compressor
- JSlint
- Google Page Speed
...ist ein Anfang.

[ThaDafinser]

Du solltest deine CSS-Dateien direkt vernünftig zusammenpacken, dann hast du das Problem nicht. Ich nutze immer folgende Struktur und fahre damit sehr gut:

+ webroot
|-+ resources
| |- css
| `- images
|-- index.php
|-- ...

Referenzierung auf Bilder dann im CSS immer über url(../images/...). So kann ich im Buildvorgang einfach alle CSS-Dateien zusammenfassen ohne irgendwelche Pfade anfassen zu müssen.
Solltest du vielleicht drüber nachdenken

Die Idee klingt ja logisch, aber es sind ja nicht die eigenen CSS Files die mir Probleme bereiten, sondern die Externen Libs.

Eigenen Code in Externe Libs einbauen ist immer so eine Sache....hab teilweise in Libs schon genügend solcher "basteleien" gehabt, die einem bei jedem Update wieder Kopfschmerzen bereiten. Da man jede Stelle wieder suchen muss und tauschen. Wie es teilweise bei Open Source Projekten auch ist, sind diese Updates teilweise sehr radikal und dann passt deine Lösung auch schon nicht mehr...

[PHP-Desaster]

Eigenen Code in Externe Libs einbauen ist immer so eine Sache....hab teilweise in Libs schon genügend solcher "basteleien" gehabt, die einem bei jedem Update wieder Kopfschmerzen bereiten. Da man jede Stelle wieder suchen muss und tauschen. Wie es teilweise bei Open Source Projekten auch ist, sind diese Updates teilweise sehr radikal und dann passt deine Lösung auch schon nicht mehr...

Klar, wenn du was externes nutzt musst du dich mit deren Macken natürlich rumschlagen. Das ist dann so, da hilft mein Ansatz in der Tat nicht Out-Of-The-Box.
Je nach Art der Applikation bietet sich auch ein kleiner Ladeschirm. Ein DIV mit voller Breite und Höhe und einem kleinen Hinweis, dass die Anwendung geladen wird. So fängt der User wenigstens nicht schon zu früh an herumzuklicken.