Wer sich mit Frontend-Entwicklung beschäftigt, stolpert früher oder später über HTML5 Boilerplate und die Konzepte die damit einhergehen. Der auffälligste Teil beim Betrachten des Quellcodes einer mit HTML5 Boilerplate umgesetzten Webseite, dürften die Conditional Comments um den <html> Tag sein. Das sieht dann ungefähr so aus:
<!--[if lt IE 7]> <html lang="de" class="no-js ie6"> <![endif]--> <!--[if IE 7]> <html lang="de" class="no-js ie7"> <![endif]--> <!--[if IE 8]> <html lang="de" class="no-js ie8"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="de" class="no-js"> <!--<![endif]-->
Je nach eingesetztem Browser hat man also zusätzliche CSS-Klassen im <html> Tag, anhand derer man seine Seite für verschiedene IE-Browser-Versionen anpassen kann. Dieser Ansatz hat den Vorteil, dass man alle CSS-Angaben in einer CSS-Datei machen kann und dazu keine CSS-Hacks benötigt, um die unterschiedlichen IEs anzusprechen. Und da das alles in einer Datei machbar ist, spart man sich auch noch ein paar HTTP-Requests – im Vergleich zur Einbindung von versionsspezifischen Stylesheets per Conditional Comment.
Aber wie bekommt man das jetzt in eine TYPO3-Seite?
Nur mit der Angabe von „config.doctype = html5“ ist es hier natürlich nicht getan. Es gibt meines Wissens auch keine Standard-Typoscript-Anweisung, mit der man den obigen Code in die Webseite bekommt. Aber für solche Fälle gibt es ja Extensions! Und hier hilft die Extension „html5boilerplate„. Nach der Installation dieser Extension lässt sich der obige Code wie folgt einfügen:
config.html5boilerplate { htmlTag ( <!--[if lt IE 7]> <html lang="de" class="no-js ie6"> <![endif]--> <!--[if IE 7]> <html lang="de" class="no-js ie7"> <![endif]--> <!--[if IE 8]> <html lang="de" class="no-js ie8"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="de" class="no-js"> <!--<![endif]--> ) }
Somit hätte man den kompliziertesten Teil der HTML5 Boilerplate in TYPO3 integriert. Alles andere lässt sich im Prinzip mit hinlänglich bekannten TYPO3-Boardmitteln erledigen.
Die Extension liefert dazu auch Statische Templates (Typoscript) zum Einbinden mit, in denen neben dem obigen Snippet auch viele andere Anweisungen definiert sind. Es wird z. B. Modernizr im <head> eingebunden und alle anderen Skripte per „page.includeJSFooter“ in den Footer geladen. Es lohnt sich also, einen Blick in die TS-Templates zu werfen, selbst wenn man die Extension eigtl. nur für das Setzen des HTML-Tags verwenden möchte.
Einer Webseite nach HTML5 Boilerplate Prinzipien steht dank dieser Extension nichts im Wege.