TYPO3, TemplaVoila & HTML5

Ich liebe TYPO3. Und (ja) ich liebe TemplaVoila. In den letzten Monaten habe ich zwar vermehrt gelesen, dass TemplaVoila aufgrund der vielen Updates und neuen Features in TYPO3 bereits Altbrot sei, ich mag es trotzdem noch. Das mag an meiner Eingewöhnungszeit bei diesem CMS liegen oder an meiner Bequemlichkeit – wie auch immer. Außerdem – gab es nicht auch mal Pläne, TV ganz  in den Core von TYPO3 zu integrieren? Ich meine so etwas war mal im Gespräch.

Ich möchte hier über die aktuelle Version 4.7 von TYPO3 schreiben und wie man sehr einfach HTML5 anwenden kann. Von Hause aus ist TYPO3, CSS-Styled-Content und TV (seit Version 1.5) bereits darauf vorbereitet, mit HTML5 umgehen zu können. Trotzdem muss man dem System über Typoskript noch ein paar Dinge beibringen, damit alles klappt.

1. Der Doctype!

Oja – so oft hat man schon gegrübelt, warum die Formatierung einfach nicht funktionieren will – und so oft hat es dann am falschen oder am fehlenden Doctype gelegen. Mit HTML5 wird es noch wichtiger den richtigen Doctype anzugeben, dafür aber auch viel leichter: <!DOCTYPE html> mehr muss da nicht rein! Mit dieser Zeile Typoskript teile ich dem System mit, dass dieser Doctype verwendet werden soll:

config.doctype = html5
config.xmlprologue = none

Die zweite Zeile bewirkt, dass kein XML-Prolog ausgegeben wird, weil es den in HTML5 nicht mehr gibt.

2. Charset

Der Charset ist in der aktuellen Version 4.7 bereits auf utf-8 festgelegt. Sollte der metatag trotzdem nicht automatisch eingefügt werden, könnt ihr mit config.metaCharset = utf-8 nachhelfen.

3. TemplaVoila und die richtigen Wraps

TV wrapt üblicherweise um jedes Element einen Div-Tag mit der ID der aktuellen Inhaltselements. In HTML5 wird nicht ein Div-Tag um einen Inhaltsabschnitt gelegt, sondern ein Section-Tag. Es gibt einige Skriptbeispiele, die beschreiben wie man diesen Div-Tag ganz entfernen kann. Ich habe ein solches Skript mal umgeschrieben, um das gewünschte Ergebnis zu erzeugen:

# Change <div id=”c#”> in <section id=”c#”>
10= RECORDS
10.conf.tt_content.stdWrap.innerWrap.cObject.default = TEXT
10.conf.tt_content.stdWrap.innerWrap.cObject.default.insertData = 1
10.conf.tt_content.stdWrap.innerWrap.cObject.default.value = <section id=”c{field:uid}”>|</section>
10.source.current=1
10.tables = tt_content

4. Abwärtskompatibel bleiben

Natürlich hätten wir es gerne, wenn unsere User sich unsere Seiten mit Chrome oder Firefox anschauen, damit alle Features auch so funktionieren, wie sie sein sollen. Leider sieht die Realität hässlicher aus und es gibt immer noch Leute, die mit einem uralten IE7 oder so unterwegs sind. Damit auch diese Leute ein wenig unterstützt werden, füge ich noch ein Javascript ein, welches diese Mängel ein bisschen auffängt:

# Insert HTML5 compatibility for older browsers
[browser = msie]&&[version = <9]
page.includeJS {
file1 = http://html5shiv.googlecode.com/svn/trunk/html5.js
file1.external = 1
}
[end]

Ich hoffe, der ein oder andere unter euch Lesern findet hier ein paar nützliche Hinweise – Viel Spaß bei Coden :)

Kommentare

Kommentar schreiben





− 1 = vier