TYPO3: CSS und JS mit Conditional Comments einbinden

TYPO3

Heute möchte ich euch einen kleinen Tipp geben, wie ihr CSS und JavaScript mit Conditional Comments via TypoScript einbinden könnt.

JS und CSS via TypoScript einbinden

Es gibt verschiedene Wege um JavaScript- und CSS-Dateien via TS einzubinden. Auch das einbinden von JavaScript direkt im Markup ist möglich, aber darum soll es in diesem Artikel nicht gehen.

includeJSlibs

Bindet eine oder mehrere JavaScript-Dateien im Head-Bereich ein.

1
2
3
page.includeJSlibs {
  jquery = fileadmin/js/jquery.min.js
}

includeJSFooterlibs

Entspricht includeJSlibs, bindet die Dateien allerdings vor dem schließenden body-Tag ein.

1
2
3
page.includeJSFooterlibs {
  jquery = fileadmin/js/jquery.min.js
}

includeJS

Bindet eine ode rmehrere JavaScript-Dateien im Head-Bereich ein. Diese werden später eingebunden und würden dann unterhalb der Dateien von includeJSlibs auftauchen.

1
2
3
page.includeJS {
  file1 = fileadmin/js/jquery.min.js
}

includeJSFooter

Entspricht includeJS, bindet die Datei allerdings vor dem schließenden Body-Tag ein.

1
2
3
page.includeJSFooter {
  file1 = fileadmin/js/jquery.min.js
}

includeCSS

Bindet eine oder mehrere CSS-Dateien in den Head-Bereich ein.

1
2
3
page.includeCSS {
    file1 = fileadmin/css/style.css
}

Conditional Comments

Nun aber zum eigentlichen Tipp. Das Schöne ist nämlich, das alle oben genannten Möglichkeiten der Einbindung zusätzlich mit einem Wrap versehen werden können.

1
2
3
4
5
page.includeCSS {
    file1 = fileadmin/css/style.css
    file2 = fileadmin/css/ie.css
    file2.allWrap = <!--[if lte IE 7]>|<![endif]-->
}

Natürlich gibt es noch weitere Parameter für z.B. das media-Attribut oder den MIME-Type. Schaut einfach mal in die Dokumentation.

Ich hoffe dem ein oder anderen hat dieser Tipp geholfen. Wie bindet ihr CSS und JS ein? Feedback ist wie immer erwünscht.

FacebookRSS Feeds

3 Kommentare zu “TYPO3: CSS und JS mit Conditional Comments einbinden”

  1. Björn

    21. September 2011 um 14:10

    Danke für diesen Beitrag. Besonders hat mich die Conditional Comments Möglichkeit mit includeCSS interessiert. Ich habe das Ganze einmal geprüft, musste aber feststellen, dass das nicht klappt. file2.allWrap wird m.E. nicht interpretiert. Was mache ich falsch?

  2. Marcel

    21. September 2011 um 14:47

    Das ist eine gute Frage, die ich nicht nachvollziehen kann. Wenn du alles wie oben beschrieben gemacht hast, sollte es da keine Probleme geben.

    Du findest einen fast identischen TS-Auszug auch in der TSref.

    Gruß Marcel

  3. TYPO3: Slideshow mit Bildern aus den Seiteneigenschaften » Nikonierer

    1. März 2012 um 14:35

    […] Wie ihr JavaScript und CSS richtig via TypoScript einbindet, habe ich übrigens vor einiger Zeit schon mal in einem Artikel zusammengefasst. […]