Quelques astuces pour intégrer du HTML5 dans votre site TYPO3
La dernière version du HTML fait de plus en plus parler d’elle. Que ce soit pour profiter des dernières fonctionnalités disponibles ou encore, pour être plus proactif, tout le monde veut y passer ! Voici quelques astuces afin de rendre vos sites TYPO3 les plus conformes possibles en HTML5.
Dans votre Typoscript « Constant », utilisez ce qui suit :
config.doctype = html5 config.xmlprologue = none
Dans votre Typoscript « Setup », utilisez ce qui suit :
page.headerData.50 = TEXT
page.headerData.50.value (
<script src="fileadmin/templates/scripts/modernizr-1.7.min.js"></script>
)
Modernizr est une librairie qui permet aux vieux navigateurs de comprendre que les nouvelles balises existent. Vous servir de cette librairie peut vous éviter bien des problèmes d’affichage (www.modernizr.com).
Pour les styles, il est important d’ajouter au minimum ce qui suit, afin de permettre de traiter les nouvelles balises un peu comme des « div » :
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
Voici un exemple d’une configuration des dates de tt_news pour HTML 5 :
plugin.tt_news {
displayLatest {
# Date en HTML5
date_stdWrap >
date_stdWrap.cObject = COA
date_stdWrap.cObject {
10 = TEXT
10.field = datetime
10.strftime = %Y-%m-%d
10.wrap = <time pubdate="pubdate" datetime="|">
20 = TEXT
20.field = datetime
20.strftime = %d %B %Y
20.wrap = |</time>
}
}
displayList {
date_stdWrap < plugin.tt_news.displayLatest.date_stdWrap
}
displaySingle {
date_stdWrap < plugin.tt_news.displayLatest.date_stdWrap
}
}
Voici un gabarit HTML d’exemples de tt_news qui respecte beaucoup mieux le nouveau balisage HTML5 :
<!-- ###TEMPLATE_LATEST### begin -->
<header>
<h1>###LATEST_HEADER###</h1>
<div>
<!--###LINK_ARCHIVE###-->###GOTOARCHIVE###<!--###LINK_ARCHIVE###-->
</div>
</header>
<!-- ###CONTENT### begin -->
<!-- ###NEWS### begin -->
<article>
<header>
###NEWS_DATE###
<h2>
<!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###-->
</h2>
</header>
###NEWS_SUBHEADER###
<p>
<!--###LINK_ITEM###-->###MORE###<!--###LINK_ITEM###-->
</p>
</article>
<!-- ###NEWS### end-->
<!-- ###CONTENT### end -->
<!-- ###TEMPLATE_LATEST### end -->
Et voilà le résultat final avec le Typoscript et le nouveau gabarit HTML :
<header>
<h1>Actualités</h1>
<div><a href="{lien}">Toutes les actualités</a></div>
</header>
<article>
<header>
<time pubdate="pubdate" datetime="2011-08-05">5 août 2011</time>
<h2><a href="{lien}" title="{titre}">{titre}</a></h2>
</header>
<p>{contenu}</p>
<p><a href="{lien}" title="{titre}">Lire la suite</a> </p>
</article>
Depuis la toute dernière version de TYPO3 (4.5.4), la balise méta-charset est maintenant en format HTML5 (si vous avez bien assigné votre doctype). Il n’est donc plus nécessaire d’utiliser des extensions telles que html5meta_t3lib_pagerenderer pour rendre votre site conforme.
Voilà ! Avec ces quelques conseils, vous avez un bon point de départ pour commencer dès maintenant votre intégration en HTML5.
Une extension qui fait parler beaucoup d’elle ces temps-ci est l’extension 
Depuis quelques jours je travail sur l’extension 
Après une petite recherche sur internet j’ai trouvé une façon très facile d’écraser n’importe quel contenu (stdWrap) en typoscript. Il existe déjà plusieurs possibilités avec la fonction « stdWrap » telles que la modification de la casse, supprimer les balises HTML, « wrapper » le stdWrap, etc. Comme ce n’est jamais assez, je me suis demandé s’il était possible d’utiliser du PHP à même le typoscript pour modifier le contenu du stdWrap.