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.

Image may be NSFW.
Clik here to view.

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.