Browser Caching von CSS Dateien

Deutsches Forum
1

Hallo,

ich würde gerne die @import-Zeilen aus der CSS-datei css/themes/base/jquery.ui.base.css in verlinkte Zeilen umwandeln für das Browser Caching.

Habe daher die Zeilen
[INDENT]
@import “jquery.ui.core.css”;

@import “jquery.ui.resizable.css”;

@import “jquery.ui.selectable.css”;

@import “jquery.ui.accordion.css”;

@import “jquery.ui.autocomplete.css”;

@import “jquery.ui.button.css”;

@import “jquery.ui.dialog.css”;

@import “jquery.ui.slider.css”;

@import “jquery.ui.tabs.css”;

@import “jquery.ui.datepicker.css”;

@import “jquery.ui.progressbar.css”;[/INDENT]

in folgende Zeilen umgewandelt:

[INDENT]<link rel=“stylesheet” type=“text/css” href="/out/azure2/src/css/themes/base/jquery.ui.core.css" />

<link rel=“stylesheet” type=“text/css” href="/out/azure2/src/css/themes/base/jquery.ui.resizable.css" />

<link rel=“stylesheet” type=“text/css” href="/out/azure2/src/css/themes/base/jquery.ui.selectable.css" />

<link rel=“stylesheet” type=“text/css” href="/out/azure2/src/css/themes/base/jquery.ui.accordion.css" />

<link rel=“stylesheet” type=“text/css” href="/out/azure2/src/css/themes/base/jquery.ui.autocomplete.css" />

<link rel=“stylesheet” type=“text/css” href="/out/azure2/src/css/themes/base/jquery.ui.button.css" />

<link rel=“stylesheet” type=“text/css” href="/out/azure2/src/css/themes/base/jquery.ui.dialog.css" />

<link rel=“stylesheet” type=“text/css” href="/out/azure2/src/css/themes/base/jquery.ui.slider.css" />

<link rel=“stylesheet” type=“text/css” href="/out/azure2/src/css/themes/base/jquery.ui.tabs.css" />

<link rel=“stylesheet” type=“text/css” href="/out/azure2/src/css/themes/base/jquery.ui.datepicker.css" />

<link rel=“stylesheet” type=“text/css” href="/out/azure2/src/css/themes/base/jquery.ui.progressbar.css" />[/INDENT]

Dies hat jedoch zur Folge, dass das Frontend nicht mehr korrekt dargestellt wird.

Jemand eine Idee, was ich vielleicht in der “Übersetzung” falsch mache?

Viele Grüße
Nicole

2

Wie genau betrifft das die Installation oder die Konfiguration des Shops?
Und warum denkst du, dass css Dateien aus @import nicht im Browser cache landen?

3

Ich bin momentan an dem Thema Pagespeed dran - beim Browser Caching werden Sie berücksichtigt, aber diese Dateien werden über @import für eine einzige css-Datei herangezogen und da der CSS @import in ein external stylesheet die Ladezeit verzögern soll, würde ich das gerne vermeiden, indem ich diese über <link einpflege und lade.

Eine Idee, warum die “Übersetzung” hier nicht zum vergleichbaren Ergebnis führt?

4

und die Dateien gibts ganz sicher im Ordner?
/out/azure2/src/css/themes/base/jquery.ui.datepicker.css

wenn die Dateien sowieso bei dir liegen, wäre es besserer sie alle zu kombinieren. So muss der Browser nur eine Datei anstatt 12 laden.

5

[QUOTE=bellanea;148452]

<link rel=“stylesheet” type=“text/css” href="/out/azure2/src/css/themes/base/jquery.ui.resizable.css" />[/QUOTE]

Der Pfad, sofern er stimmt, sollte meiner Meinung nach nur bei Seiten der ersten Ebene funktionieren.
Hast Du schon versucht das CSS so einzubinden?

[{block name="base_style"}]
        [{oxstyle include="css/reset.css"}]
        [{oxstyle include="css/oxid.css"}]
        [{oxstyle include="css/ie7.css" if="IE 7"}]
        [{oxstyle include="css/ie8.css" if="IE 8"}]
        [{oxstyle include="css/libs/jscrollpane.css"}]
       [B] [{oxstyle include="css/themes/base/jquery.ui.resizable.css"}][/B]
    [{/block}]
6

Danke an MeisterYoda!

Habe den Verweis auf css/themes/base/jquery.ui.base.css durch die “Reihe” der entsprechenden css-Dateien ersetzt und es funktioniert! :slight_smile:

Vielen Dank!