CSS und Javascript 

Page Object includeCSS / includeJS

02.02.2016 1190

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.includeCSSLibs {
    mycss = EXT: my_template/Resources/Public/Css/globallib.css
}
page.includeCSS {
    mycss = EXT: my_template/Resources/Public/Css/mycss.css
}
page.includeJSlibs {
    // Diese Javascriptdateien werden in den Seitenheader geschrieben
}
page.includeJS {
    // 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
}
Die nachfolgenden Optionen gelten sofern nicht anders angegeben für alle include Varianten.

Externe Dateien einbinden

TYPO3 prüft vor der Einbindung der Dateien, ob die Datei auf dem Server überhaupt existent ist, sonst erfolgt keine Einbindung. Wenn Ihr externe Dateien einbinden wollt, also Dateien die nicht auf eurem Server liegen, müsst ihr für diese  ein Flag setzten.
page.includeJSFooterlibs {
    jquery = https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
    jquery.external = 1
}
Subresource Integrity (SRI)
Mit SRI werden die Resourcen mit einem Hash versehen und nur dann ausgeführt, wenn der Hash
aus dem Dateilink mit dem Hash der tatsächlichen Datei übereinstimmt.
page.includeJSFooterlibs {
    jquery = https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
    jquery.external = 1
jquery.integrity = 57132f35dcfe677cbd90014e3f0862278bc...
}
Asynchrones Laden (nur für js includes)
page.includeJSlibs {
    myscript = EXT: my_template/Resources/Public/JavaScript/myscript.js
    myscript.async = true
}

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
}

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
}

Praxisbeispiel: CSS und JavaScript in ein TYPO3 Template einbinden

page {
    includeCSSLibs {
        bootstrap = EXT:my_extension/Resources/Public/Css/bootstrap.min.css
    }
    includeCSS {
        theme  = EXT:my_extension/Resources/Public/Css/bootstrap-theme.min.css
        layout = EXT:my_extension/Resources/Public/Css/layout.css
        print  = EXT:my_extension/Resources/Public/Css/print.css
        print.media = print
   }
    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 
    }
    includeJSFooterlibs {
        jquery                          = https://code.jquery.com/jquery-1.12.4.min.js
        jquery.external                 = 1
        jquery.integrity                = sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=
        jquery.forceOnTop               = 1
        jquery.disableCompression       = 1 
        jquery.excludeFromConcatenation = 1 

        bootstrap = EXT:my_Extension/Resources/Public/JavaScript/bootstrap.js
    }
    includeJSFooter {
        myscript = EXT:my_Extension/Resources/Public/JavaScript/meintollesscrip.js
    }
}

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