Erfahre welche gebräuchlichen Möglichkeiten bestehen, Cascading Style Sheets in TYPO3 CMS Websites einzubinden.
Variante 1: page.includeCSS.[string-array]
Die wohl bekannteste Methode CSS einzubinden ist includeCSS. Damit kann man zig CSS-Dateien im <head> der Website einbinden.
Es sei auch noch erwähnt, dass bei dieser Methode auch darauf geachtet wird - sofern man für das Einbinden von Javascript includeJS (was übrigens auf die selbe Art funktioniert) verwendet - CSS Dateien vor Javascripts im <head> eingebunden werden. Es wird grundsätzlich dazu geraten CSS-Dateien vor JS-Dateien einzubinden. In der Praxis konnte ich noch keine Probleme feststellen, sollten die nach Javascriptdateien eingebunden sein.
// TypoScript Setup
// Einbinden zweier CSS Dateien
page.includeCSS {
file1 = fileadmin/templates/css/cssdatei.css
file2 = fileadmin/templates/css/nocheinecssdatei.css
file3 = EXT:framework/Resources/Public/Css/Sitemap.css
}
//Möchte man eine bestimmte CSS Datei nur für einen Teil des Seitenbaums einbinden, so verwende ich die selbige Syntax und füge Conditions drum rum:
[PIDInRootline = 5]
// TypoScript welches nur für die angegebene Seite (PID5) und dessen Unterseiten ausgeführt wird
page.includeCSS {
zusaetzlichesCss = fileadmin/templates/css/special.css
}
[global]
// Seit TYPO3 CMS 4.6 kommt mit T3 ein onboard-Compressor für CSS und JS mit. Möchte man eine CSS bei Aktiviertem Compressor ausnehmen so stehen folgende Möglichkeiten zur Verfügung:
page.includeCSS {
file1 = fileadmin/templates/css/cssdatei.css
file1.disableCompression = 1
file1.excludeFromConcatenation = 1
// Möchte man mittels dieser Methode Dateien einbinden
// die außerhalb der erlaubten Pfade liegen, so kann man mit
// folgender Einstellung die Überprüfung auf Bestehen der Datei
// deaktivieren und jeglichen Pfad erlauben:
file666 = http://www.example.com/dateien/aufanderemserver.css
file666.external = 1
}
Variante 2: page.cssInline.[integer-array]
Hier beschreibe ich die Möglichkeiten, CSS direkt in den <head> zu schreiben, sprich inline.
// TypoScript Setup
// dieses Feature ist seit TYPO3 CMS 4.3 implementiert:
page.cssInline {
133 = TEXT
133.value (
div.sitemap {
padding: 1em 1em;
line-height: 20px;
}
div.sitemap ul {
padding: 0 0 0 24px;
margin: 0 0;
list-style-type: none;
}
)
}
// Interessant wird es, wenn man das CSS teilweise dynamisch erstellen lässt - um z.B. im Constants Bereich Variablen dafür zu haben, welche dann das CSS gewünscht ausgeben (die Grenzen sind hier nur durch den Benutzer gegeben):
page.cssInline {
133 = TEXT
133.value (
div.{$fw.menu.sitemap.wrap} {
padding: 1em 1em;
line-height: {$fw.menu.sitemap.lineHeight};
}
div.{$fw.menu.sitemap.wrap} ul {
padding: 0 0 0 24px;
margin: 0 0;
list-style-type: none;
color: {$fw.menu.sitemap.textColor};
}
)
}
//
// Sollen umfangreichere CSS-Dateien mit TYPO3 CMS "erstellt" werden, dann empfehle ich das ganze über ein eigenes PAGE-Objekt/typeNum zu realisieren!
// Möchte man außerdem Inline-CSS-Code im in Dateien auslagern, so bringt auch hierfür TYPO3 CMS eine Lösung mit:
config.inlineStyle2TempFile = 1
## Variante 3: page.headerData.[integer-array]
Eine weitere Möglichkeit besteht darin, eine Funktion in TYPO3 CMS zu nutzen, die für jegliche Art von Daten bestimmt ist, welche in den `` geschrieben werden sollen.
// TypoScript Setup
// mit headerData.[integer-array] ist es möglich, wie man sieht, auch MSIE Conditional Comments und JS und CSS gleichzeitig einzufügen. Ein bedeutender Nachteil ist meiner Meinung der, dass über diese Methode eingefügte "Header Daten" nicht in der Reihenfolge kontrolliert werden können in Verbindung mit der dafür angedachten page.includeCSS (Variante 1). Eine Möglichkeit wäre es also, alles über headerData zu realisieren. Ich bin mir nicht sicher, wie sich damit der in TYPO3 CMS 4.6 integrierte Compressor und Minifier verhält.
page.headerData.777 = HTML
page.headerData.777.value (
)
## Variante 4: page.CSS_inlineStyle
Diese Variante ist in den meisten Fällen nicht sinnvoll, sobald man mehr als nur einmal inline CSS einbinden möchten. Diese Eigenschaft erlaubt es einem nämlich nur einen einfachen String zu übergeben, welche dann direkt auf der generierten Seite in `
