La question avait déjà été traitée lors de la première saison du tweetup (2010-2011), mais celle-ci était souvent revenue pendant ces derniers mois. J’en profite aujourd’hui pour vous proposer un “petit guide HTML5/CSS3” afin de bien débuter vos intégrations, parce que oui, bien que les spécifications des deux langages ne soient pas totalement fixées, la plupart des navigateurs actuels interprètent parfaitement les nouvelles balises et règles introduites par HTML5 et CSS3.
Qu’est-ce qui change en HTML5 ?
Ce qu’il faut d’abord savoir, c’est que HTML5 est l’évolution de HTML4 (facile) mais aussi de XHTML, dont la version 2 a très vite été “ajoutée” à la définition de HTML5, ainsi les intégrateurs ayant pris l’habitude d’écrire leur markup à la sauce XHTML ne seront pas perdus : bien que le langage soit très permissif au niveau de la syntaxe (comme HTML4), il est tout à fait possible de faire du “XHTML5”.
Le doctype
HTML5 se veut plus simple. Jusqu’à HTML5 on devait choisir entre plusieurs doctypes (strict, transitional, frameset) pour HTML4 et XHTML. Avec HTML5, un doctype unique et très court :
<!doctype html>
plutôt qu’un doctype à rallonge :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Les nouvelles balises
HTML5 se voulant beaucoup plus structuré, de nouvelles balises sont apparues afin de hiérarchiser le contenu publié en lui donnant une valeur beaucoup plus sémantique.
En-tête et pied de page
La balise header permet, par exemple, de définir un contenu comme en-tête de page, d’article ou de section. footer, quand à elle permet de déclarer un pied de page, d’article ou de section (mentions légales, informations sur l’article, etc.).
Structurer l’information
La balise article, permet de signaler le contenu présent dans cette balise comme étant un article, ou plus généralement, le contenu principale de la page (utile lorsqu’on utilise le mode “Lecteur” de Safari et Safari Mobile, par exemple).
Un article peut être découpé en plusieurs sections, pouvant elles-mêmes contenir un header, un footer et un article.
Enfin, la balise aside, permet d’ajouter des informations complémentaires à un article afin d’agrémenter le contenu de celui-ci.
Naviguer à travers les pages
Jusqu’à l’arrivée de HTML5, nos menus de navigation étaient, la plupart du temps, construits grâce à une liste d’éléments non ordonnés :
<ul id=”nav”>
<li><a href=”accueil.html”>Accueil</a></li>
<li><a href=”lorem.html”>Lorem</a></li>
<li><a href=”ipsum.html”>Ipsum</a></li>
<li><a href=”dolor.html”>Dolor</a></li>
</ul>Avec HTML5, on peut soit remplacer totalement cette liste par des simples ancres inclues dans l’élément nav :
<nav>
<a href=”accueil.html”>Accueil</a>
<a href=”lorem.html”>Lorem</a>
<a href=”ipsum.html”>Ipsum</a>
<a href=”dolor.html”>Dolor</a>
</nav>Ou bien, garder cette notion de liste et l’encapsuler dans nav :
<nav>
<ul>
<li><a href=”accueil.html”>Accueil</a></li>
<li><a href=”lorem.html”>Lorem</a></li>
<li><a href=”ipsum.html”>Ipsum</a></li>
<li><a href=”dolor.html”>Dolor</a></li>
</ul>
</nav>D’autres balises, en vrac
HTML5 introduit entre autre les balises suivantes :
canvas, qui permet par exemple de définir une zone dans laquelle on pourra dessiner,figureetfigcaption, utiles pour légender une photographie,audioetvideo, permettant de proposer des contenus multimédia adaptés selon le navigateur Web utilisé,summaryetdetails, permettant par exemple de proposer des informations résumées ou développéesdatalist, permet de suggérer des valeurs possibles à uninputou unselect
HTML5 : structure de base d’un document
Pour en finir avec HTML5, voici un exemple très simple de document HTML5.
<!doctype html>
<html lang=”fr”>
<head>
<title>Ma première page HTML5</title>
<meta charset=”utf-8” />
</head>
<body>
<div id=”container”>
<header>
<h1>Webdesign Friday</h1>
<p>La communauté des Webdesigners francophones</p>
<nav>
<ul>
<li><a href=”#”>Accueil</a></li>
<li><a href=”#”>Lorem</a></li>
<li><a href=”#”>Ipsum</a></li>
<li><a href=”#”>Dolor</a></li>
</ul>
</nav>
</header>
<article>
<section>
<header>
<h1>Titre de la section</h1>
</header>
<p>Lorem ipsum dolor sit amet...</p>
<aside>Lorem ipsum dolor sit amet...</aside>
</section>
<section>
<header>
<h1>Titre de la section</h1>
</header>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</section>
</article>
<footer>
<small>copyrights et tout et tout...</small>
</footer>
</div>
</body>
</html>Peut-on utiliser CSS3 dès maintenant ?
CSS3 c’est avant tout CSS2 et en tant que tel, cette nouvelle spécification est déjà utilisable. Bien sûr, toutes les nouveautés apportées par CSS3 ne sont pas totalement supportées par les différents navigateurs. Comme le conseille Dan Cederholm dans CSS3 for Web Designers, s’il l’on souhaite utiliser les nouvelles propriétés CSS3 à l’heure actuelle, mieux vaut se concentrer sur :
- les récompenses visuelles (ou dégradations gracieuses),
- les différents états d’un élément (hover, focus, active),
- les animations
Les préfixes vendeurs
Depuis ces derniers mois et grâce aux fréquentes mises à jours des navigateurs actuels, les préfixes vendeurs tendent à disparaître, mais il est tout de même préférable de les implémenter dans vos feuilles de styles, pour ne pas laisser de côté les navigateurs moins récents (Firefox 3 par exemple) qui savent interpréter ces nouvelles propriétés, si on les aide.
Pour rappel, les préfixes vendeurs sont les suivants :
-webkit-pour Chrome et Safari-moz-pour Firefox,-o-pour Opera,-ms-pour Internet Explorer
Les nouvelles propriétés que tout le monde aime
L’adoption par les navigateurs Web actuels de la quasi-totalité des propriétés CSS3 exclusivement réservées à l’aspect graphique permet de réaliser de nombreux effets sans même lancer notre logiciel de graphisme préféré.
En effet, avec des propriétés comme border-radius, box-shadow, il est désormais possible de réaliser des bords arrondis et des ombres sans s’arracher les cheveux devant une pelletée de divs (inutiles) imbriqués les uns dans les autres dans le seul but de réaliser l’effet voulu.
Geoffrey Crofte a d’ailleurs écrit un très bon tutoriel sur la création d’ombres avancées en CSS3.
Les effets de dégradés, ne sont pas non plus en reste bien que ceux-ci ne soient pas encore compris par Internet Explorer 9. Il faudra malgré tout utiliser les préfixes vendeurs pour s’assurer une bonne compatibilité avec les différentes versions des différents navigateurs.
Et la compatibilité avec les différents navigateurs ?
À l’heure actuelle, le couple HTML5/CSS3 est plus ou moins bien supporté par tous les navigateurs Web récent : IE 8+, Firefox 4+, Chrome 11+, Safari 4+ et Opera 11+. Le grand vainqueur étant Chrome avec une compatibilité de 90% depuis sa version 15.0.
Pour combler les manques de certains navigateurs, comme Internet Explorer 6-8 pour ne pas le citer, des solutions Javascript existent comme le très célèbre Modernizr qui permet de combler leurs lacunes à la fois en CSS3 et en HTML5.
Quelques outils pour bien commencer
- HTML5 Boilerplate, l’arme ultime : incontournable pour bien débuter un nouveau projet.
- html5shiv, donnez les moyens à IE de reconnaître les nouvelles balises HTML5
- CSS3Pie, vos styles CSS3 interprétés par IE 6-9
- Modernizr, équivalent de html5shiv + CSS3Pie. Et plus.
- Respond.js, les media queries pour les vieux navigateurs
- HTML5 Please, quelles fonctionnalités HTML5 et CSS3 sont utilisables et comment
- When Can I use, tableau de compatibilité du support de HTML5/CSS3 des différents navigateurs
- HTML5 pour les Web designers par Jeremy Keith
- CSS3 pour les Web designers par Dan Cederholm
- CSS avancées, vers HTML5 et CSS3 par Raphaël Goetter