Search the FirstSpirit Knowledge Base
Hallo werte Community,
wir binden derzeit eine extern gepflegte css-Datei mittels <link rel="stylesheet" type="text/css" href="https://community.e-spirit.com/assets/internet/css/example.css" media="screen" /> in unsere Seitenvorlage ein. Im SiteArchitect haben wir als Browser-Engine IE eingestellt.
Nun ist uns aufgefallen, dass wenn wir Änderungen an der css-Datei vornehmen, diese nicht in der internen Preview vom SiteArchitect angezeigt werden. Kopieren wir uns jedoch den PreviewLink und lassen uns die Preview in einen separaten Browser anzeigen, sind alle Änderungen zu sehen. Dieses Phänoment tritt jedoch nur bei der IE-Engine auf. Die Firefox-Engine zeigt alle Änderungen an der externen css-Datei sofort an.
Abhilfe können wir uns derzeit schaffen, indem wir kurz die BrowserEngine wechseln, nachdem Änderungen an den css-Dateien vorgenommen wurden (IE -> FF -> IE). Dann sind auch alle Änderungen in der IE-Preview zu sehen.
Ist Euch dieses Phänomen auch schon aufgefallen? Fall ja, wie seid Ihr damit umgegangen bzw. welche Lösung gibt es?
Ich habe bereits im Adminhandbuch den Abschnitt zur Konfiguration der Preview über die fs-server.conf gelesen. Der Parameter preview.enforceDelivery=css hat mit leider keine Abhilfe geschaffen. Auch das verringern des preview.cacheTimeout auf 60 Sekunden bringt keine Abhilfe, da die styles anscheinend in der BrowserEngine selbst vorgehalten werden.
Für eine Rückmeldung wäre ich sehr dankbar.
Freundliche Grüße
Carsten Noetzel
Hallo Carsten,
hilft es wenn Du den Aktualisieren-Button drückst bzw. den SHIFT + Aktualisierungs-Button?
Viele Grüße
Rene
Hallo Rene,
nein leider hilft das nicht. Die Übernahme ist nur durch den Wechsel der Browser-Engine möglich, wobei das auch nicht immer zuverlässig funktioniert.
Grüße
Carsten
Hi Carsten,
ggf. musst Du auf der Seite einmal den Bearbeitungsmodus aktivieren und wieder beenden.
Oder ggf. reicht es auch einen Timestamp/Änderungsdatum der CSS-Datei hinter die CSS-Datei im Link-Tag zu setzen?
Viele Grüße,
Phillip.
Hallo Phillip,
leider bringt auch der Bearbeitungsmodus nicht den gewünschten Effekt.
Wenn ich im Link-Tag für das css beispielsweise eine Versions-Nummer einführe, funktioniert es einmalig, ich muss dann jedoch bei jeder Änderung der css-Datei die Versionsnummer hochzählen, was ich ander nicht möchte.
<link rel="stylesheet" type="text/css" href="https://community.e-spirit.com/assets/internet/css/example.css?version=1.0" media="screen" />
Ein Lösung die ich derzeit sehe, ist für die Preview einen Timestamp zu benutzen, wie du bereits angedeutet hast. Dieser müsste sich jedoch auf Basis der aktuellen Zeit ständig verändern, damit ich nicht ständig von Hand eingreifen muss.
<link rel="stylesheet" type="text/css" href="https://community.e-spirit.com/assets/internet/css/example.css?$CMS_VALUE(#global.now.getTime())$" media="screen" />
Es muss in irgendeiner Form mit der IE-Engine zusammenhängen, da es mit der Firefox-Engine wunderbar funktioniert. Die Übernahme des aktuellen css durch den Wechsel der Engine schein nur zu funktionieren, wenn zur Preview der interne Jetty-Server verwendet wird. Bei einem externen Preview Server (Tomcat) bringt der Wechsel der Browser-Engine nichts.
Grüße
Carsten
Hallo,
ich habe es jetzt mal mit <link rel="stylesheet" type="text/css" href="https://community.e-spirit.com/assets/internet/css/example.css?$CMS_VALUE(#global.now.format("dd.MM.yyyy_hh:mm:ss"))$" media="screen" /> getestet.
Es ist jetzt so, dass wenn eine neue Seite, die zuvor noch nicht in der Vorschau angezeigt wurde, ausgewählt wird, die aktualisierte CSS-Datei greift und Änderungen angezeigt werden. Da sich der Timestamp jedoch nur bei Generierung der Vorschauseite ändert, bleiben Seiten die zuvor schon generiert wurden, von der Änderung der CSS-Datei unbehelligt.
Die Lösung ist daher auch eher mäßig, da so bei einigen Seiten die aktuelle CSS-Datei und bei anderen Seiten die alte CSS-Datei verwendet wird.
Grüße
Carsten