TYPO3 bietet von Hause aus die nötigen TypoScript Funktionen, die die Einbindung von CSS Dateien ermöglichen. Hier wird erläutert, wie sich mittels TypoScript CSS Dateien in den Quelltext integrieren lassen. Das kann auf zwei verschiedene Arten oder als Kombination erfolgen.
Externe CSS Dateien einbinden
Die TypoScript Funktionen includeCSS und includeCSSLibs sind zur Einbindung externer CSS Dateien gedacht und bieten verschiedene Möglichkeiten zur Konfiguration. Die komplette Liste der Paramter zur Konfiguration findet sich hier.
page.includeCSS {
// Pfad zur CSS Datei
file_01 = fileadmin/css/global.css
file_01 {
// Die wichtigsten Parameter zur CSS Einbindung
// Der media Paramter: screen, print, all
// Weiter Infos hier: https://wiki.selfhtml.org/wiki/CSS/Media_Queries
media = screen
// Diese CSS Datei an erster Stelle laden 0 / 1
forceOnTop = 1
// Diese CSS Datei von der Kompression ausschließen
// TypoScript: config.compressCss
disableCompression = 1
// Diese CSS Datei von der Zusammenfügen mit anderen Dateien ausschließen
// TypoScript: config.concatenateCss
excludeFromConcatenation = 1
}
// Eine weitere CSS Datei
file_02 = fileadmin/css/style.css
file_02.media = screen
// CSS Datei zur Druckausgabe
file_03 = fileadmin/css/print.css
file_03.media = print
// Externe CSS Datei von anderem Server einbinden
file_04 = http : // www.seite.tdl / css / share.css
// Der external Parameter ermöglicht die Einbindung der CSS Datei
// ohne Prüfung, ob diese existiert
file_04.external = 1
file_04.media = screen
}CSS Styles inline abrufen
Die TypoScript Funktion cssInline schreibt, wie der Name bereits verrät, den CSS Code als Styleangabe direkt, also inline, in den Quelltext.
page.cssInline {
10 = TEXT
10.value = h1 {font-size:30px;}
20 = TEXT
20.value = h2 {text-decoration:underline;}
}
// Die Konfiguration inlineStyle2TempFile auf Null sezten,
// damit TYPO3 den CSS Code nicht in eine externe Datei auslagert
config.inlineStyle2TempFile = 0
