[TYPO3-german] CSS Umfang optimieren

[Stefan Galinski]

Christoph Kuhn wrote:

> Guten morgen
> 
> Mit Schrecken musste ich feststellen, dass mir Typo3 im Ordner typo3temp
> jeweils eine CSS Datei aufbereitet, welche ~70k umfasst. Dies erhöht die
> Downloadzeit erheblich.
> 
> Wie kriege ich es zB hin, dass die CSS-Definitionen für CHC-Forum nicht in
> dieser Datei, sondern nur auf der Forum-Seite als zusätzliche Datei
> eingebunden wird?
> 
> Wie kann ich einzelne Plugins daran hindern, ihr CSS in diese Datei
> beizutragen? Wie kontrolliere ich, was in diese Datei geschrieben wird?
> 
> www.websiteoptimization.com empfiehlt ja, die Webseite in möglichst wenige
> Einzelteile (sprich JS, CSS, HTML etc möglichst jeweils nur eine Datei) zu
> zersplitten. Das heisst aber, dass alles CSS, welches auch nur auf einer
> einzigen Seite vorkommt, in diese eine Datei zu schreiben.
> Daraus resultiert eine grosse Datei, welche beim ersten Aufruf
> runtergeladen werden muss.
> Was spricht nun dagegen, CSS-Code, welcher nur in einem bestimmten Bereich
> vorkommt (eben zB CHC-Forum) in einer eigenen CSS Datei nur auf den
> entsprechenden Seiten einzubinden? Dann muss nur dieser zusätzliche Teil
> runtergeladen werden.
> 
> Erfahrungen? Meinungen?
> 
> Gruss
> 
> chris

Hi Christoph,

Um das CSS der Plugins zu trennen und nur auf den Seiten zu laden, die nötig
sind nutze ich folgenden Typoscript-Code:

z.B. tt_news

[globalVar = TSFE:id = {$plugin.tt_news.pageUID}] OR
[globalVar = TSFE:id = {$plugin.tt_news.pageUID2}]
    page.includeCSS.ttnews = fileadmin/templates/pluginCSS/ttnews.css
    page.includeCSS.ttnews.media = screen
[global]

Bei dieser Lösung ist allerdings zu berücksichtigen, dass du das Default-CSS
an die jeweiligen Gegebenheiten anpasst. Möchtest du jedoch das
Standard-CSS der Erweiterung beibehalten und auf den anderen Seiten löschen
empfiehlt sich diese Lösung:

z.B. cal

[globalVar = TSFE:id = {$plugin.tx_cal.calView}]
[else]
    plugin.tx_cal_controller._CSS_DEFAULT_STYLE >
[global]

Da die Trennung des CSS-Codes sehr viele einzelne CSS-Dateien zur Folge hat
habe ich die Extension "scriptmerger" entwickelt. Diese bündelt alle
CSS-Dateien der Seite in eine Große. Die Erweiterung wird später um weitere
Funktionen ergänzt.

--
Stefan Galinski