CSS und Javascript Dateien einbinden

Die Einbindung von Javascript und CSS Dateien in unser Template ist denkbar einfach.
Dafür gibt es im Page Object folgende Bereiche:

page.includeCSS {
    mycss = EXT: my_template/Resources/Public/Css/mycss.css
}
page.includeJSlibs {
    // Diese Javascriptdateien werden in den Seitenheader geschrieben
}
page.includeJSFooterlibs {
   // Diese werden als erstes im Footer eingebunden
}
page.includeJSFooter {
   // Diese Dateien kommen im Footer nach den JSFooterlibs
}

Externe Dateien auf Fremdservern

Wenn Ihr externe Dateien einbinden wollt, also Dateien die nicht auf eurem Server liegen, müsst ihr für diese  ein Flag setzten. TYPO3 prüft vor der Einbindung der Dateien ab, ob diese Datei auf dem Server existent ist, sonst erfolgt keine Einbindung.

Grundsätzlich bin ich mit externen Dateien immer vorsichtig, wenn der Fremdserver down oder langsam antwortet, zieht das die eigene Seite runter.

page.includeJSFooterlibs {
    jquery = https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
    jquery.external = 1
}

Komprimierung und Zusammenfassung von CSS und Javascriptdateien

TYPO3 unterstützt eine automatische Zusammenfassung und Komprimierung von Javascript und Css Dateien.

Die Voraussetzungen und Vorteile einer gzip Komprimierung habe ich ausführlich in diesem Artikel beschrieben: gzip Komprimierung mit TYPO3.

Die Funktionen werden in der Templatekonfiguration mit folgendem Eintrag aktiviert:

config {
    compressJs      = 1
    compressCss     = 1
    concatenateJs   = 1
    concatenateCss  = 1
}

Einzelne Dateien kann man von der Kompression und/oder Zusammenfassung ausschließen:

page.includeJSlibs { 
    respond = EXT:my_template/Resources/Public/JavaScript/Libs/respond.min.js
    respond.excludeFromConcatenation = 1
    respond.disableCompression = 1 
}

CSS und Javascript Dateien mit Conditions wrappen

Auf ähnlichem Wege kann man die so eingebundenen Dateien mit einem allWrap versehen, um z.B. spezielle Browser anzusprechen. Diese Dateien sollten dann immer aus dem automatischen Zusammenfassen ausgeschlossen werden:

page.includeJSlibs { 
    respond = EXT:my_template/Resources/Public/JavaScript/Libs/respond.min.js
    respond.allWrap = <!--[if IE 8 ]>|<![endif]-->
    respond.excludeFromConcatenation = 1
    respond.disableCompression = 1
}

Weitere Artikel zu diesem Thema:

Empfehlenswerte Lektüre:

TypoScript - kurz & gut

Ein kleines, aber umfassendes Nachschlagewerk aller TypoScript Funktionen das auf jedem Schreibtisch liegen sollte der sich mit TYPO3 intensiv beschäftigt. Es ist für die 6.2 Version nicht mehr ganz aktuell - aber als Referenz für die unzähligen TypoScript Funktionen das beste am Markt.

Kommentare

keine Kommentare vorhanden


Kommentar verfassen

Die Email Adresse wird nicht veröffentlicht.