17. Dezember 2011

HTML5 Boilerplate mit TYPO3 – Türchen 17

in Extension, Tutorial, TYPO3

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.

19 Reaktionen zu “HTML5 Boilerplate mit TYPO3 – Türchen 17”

Kommentare abonnieren (RSS) oder TrackBack URL

A little bit complicated, but default typoscript:

config {
doctype(

<!–[if lt IE 7]> <![endif]–>
<!–[if IE 7]> <![endif]–>
<!–[if IE 8]> <![endif]–>
<!–[if IE 9]> <![endif]–>
<!–[if gt IE 9]>>–>
)

htmlTag_setParams = xmlns=“http://www.w3.org/1999/xhtml“ lang=“nl“ xml:lang=“nl“><!–<![endif]–

htmlTag_langKey = nl
}

Daniel Doesburg am 17. Dezember 2011 um 09:59

Please remove those comments. Can’t get it right visible.

Daniel Doesburg am 17. Dezember 2011 um 10:00

na endlich 😉 warum hab ich das nie gefunden… jetzt kann ich endlich wie bei meinen WP seiten alles sauber aufbauen

danke

Markus am 17. Dezember 2011 um 10:11

Hey Daniel…. I fix the html comments….

Tim Lochmüller am 17. Dezember 2011 um 10:48

Die Conditional Comments im <html> sind seit Version 2.0 der HTML5-Boilerplate etwas anders: https://github.com/h5bp/html5-boilerplate/blob/master/index.html

Sven Wolfermann am 17. Dezember 2011 um 11:07

Sorry Tim, there is still missing a lot of the code.

Daniel

Daniel Doesburg am 17. Dezember 2011 um 11:21

Hey,

danke für die Vorstellung der Extension. Wer Bugs / Wünsche oder ähnliches hat, würde ich euch bitten diese im Forge (http://forge.typo3.org/projects/show/extension-html5boilerplate) einzutragen.
Die Extension wird Anfang kommenden Jahres auch mal wieder auf Vordermann gebracht.

Andy am 17. Dezember 2011 um 13:07

Hey Daniel, the problem with your method is, that you can’t set the meta charset correctly (short form for html5), because you overwrite the „html5″ setting. With this extension you can simply set it in this way:

config.html5boiloerplate.metaCharsetTag = <meta charset=“|“>

Tobias Liegl am 17. Dezember 2011 um 13:26

Hey Tobias,
Your bloody right. But . . . That was not the question. AFAIK
I use this construction also in XHTML 1.0 and that’s where my example came from.

Daniel

Daniel Doesburg am 17. Dezember 2011 um 14:23

Wie ist es denn nun richtig? Und kann man diese Variante verschiedene Brwoser auch in anderen HTML5 Templates ohne Probleme einsetzen?

maddin am 17. Dezember 2011 um 16:39

@maddin:
Wenn du HTML5 verwenden möchtest und eben auch die Conditional Comments Methode beim <html> Tag, dann solltest du dir die „html5boilerplate“-Extension installieren und einfach die statischen Templates der Extension einbinden.

Du kannst aber wie im Artikel beschrieben die Angaben auch einfach selbst setzen (wenn du die Extension installiert hast) und dann z. B. auch die Anweisungen die Sven verlinkt hat benutzen.

Wie ist deine zweite Frage genau gemeint? Ob du diese Methode mit den Conditional Comments in normalen HTML Templates benutzen kannst? Klar ist das möglich, ist ja quasi „nur“ HTML.

Tobias Liegl am 17. Dezember 2011 um 16:47

@Tobias: Danke für die Antwort. Meine zweite Frage bezieht sich auf andere HTML-Templates die schon auf HTML5 laufen und diese Comments eingebaut werden sollen, wo finde ich Infos darüber wie ich diese Sachen dort einbauen kann?

maddin am 18. Dezember 2011 um 16:55

Es funktioniert übrigens NOCH einfacher wenn man Conditions benutzt, und das dann auch ohne Extension:
(die Werte sind übrigens nicht von HTML5Boilerplate…)
# default
config.htmlTag_setParams = lang=“en“
# wenn IE < 7
[browser = msie] && [version= <7]
config.htmlTag_setParams = class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"
[global]
# wenn IE = 7
[browser = msie] && [version= 7]
config.htmlTag_setParams = class="no-js lt-ie9 lt-ie8" lang="en"
[global]
# wenn IE = 8
[browser = msie] && [version= 8]
config.htmlTag_setParams = class="no-js lt-ie9" lang="en"
[global]

Grüße Patrick

Patrick am 19. Dezember 2011 um 08:51

Das Problem mit Conditions ist, dass diese IMMER überprüft / ausgeführt werden und danach erst entschieden wird ob die Seite aus dem Cache kommt (ausgeschlossen ist natürlich static_file_cache).
Des Weiteren bläht dies unnötig den Cache auf (was je nach Cache Storage engine kein kleines Problem sein kann).

Andy am 19. Dezember 2011 um 09:04

Hallo zusammen!
Gerne würde ich für meine TYPO3 Projekte mal HTML5 Boilerplate einsetzen… doch kann man das einfach eintegrieren? Und wie fängt man damit an? Kenn da jemand von euch gute Einstiegstipps???
LG
Jan

Jan am 30. Dezember 2011 um 22:22

Use this:
config.disableAllHeaderCode = 1
and build your head by hand! 🙂

Ben am 11. Januar 2012 um 12:50

Seit Typo3 4.7 steht config.htmlTag_stdWrap zur Verfügung, mit der der html-Tag (ohne Extension) beliebig erweitert werden kann. Das Government-Package enthält bspw. ein Beispiel für Boilerplate Conditions.

Illovo am 08. September 2012 um 02:25

Bei mir wird in TYPO3 6.0 leider immer am Ende das abgeschnitten und dadurch werden im IE8 die Headerfiles nicht geladen. Egal ob ich es mit der Extension oder mit config.htmlTag_stdWrap mache.

Saublöd 🙁

Oli am 18. Januar 2013 um 17:05

@Oli: Hast du eine Extension wie Sourceopt im Einsatz? Die löscht den letzten Kommentar weg wenn die Option „Kommentare entfernen“ aktiviert ist.

Christian am 06. Juni 2013 um 10:52

Kategorien

Archiv