Un bon moment maintenant qu'on en parle d' HTML 5 ! Révolution pour certains, effet d'annonce pour d'autres ; quelques soient les avis on est encore loin du tout HTML5. Mais pourquoi en parler autant si c'est pour ne pas l'utiliser ? C'est une question qu'on s'est posé, puisque nous faisons partie des agences qui n'y sont pas [encore] à 100% :
Un bon moment maintenant qu'on en parle d' HTML 5 ! Révolution pour certains, effet d'annonce pour d'autres ; quelques soient les avis on est encore loin du tout HTML5. Mais pourquoi en parler autant si c'est pour ne pas l'utiliser ? C'est une question qu'on s'est posé, puisque nous faisons partie des agences qui n'y sont pas [encore] à 100% :
Doit-on passer tous nos développements en html 5 ?
La réponse de nos experts à l'agence, qu'ils soient experts Drupal, experts intégration, experts R&D, etc. est OUI.
OUI il serait bon incessamment sous peu de n'utiliser que l'HTML 5, et ce pour les raisons suivantes :
- HTML5 est le nouveau standard, donc c'est LA bonne pratique que de s'y conformer.
- Il offre de nouvelles fonctionnalités qu'il serait dommage de rater :
http://www.html5rocks.com
http://www.html5rocks.com/en/why
(avec CSS3 et Javascript)
Et si on est tellement convaincu, il est tout de même bon de reconnaître qu'il y a quelques contraintes au tout html5 ; listons les principales et, surtout, voyons comment les contourner
Compatibilité avec les navigateurs
HTML5 c'est une nouvelle variante de la syntaxe. Mais à partir du moment où l'on a déclaré le doctype HTML5 et que l'on continue à écrire en Xhtml, ça ne pose pas de problèmes. En fait, on ne change rien, mais techniquement on fait du HTML5.
Le problème est toujours du côté d'Internet Explorer (6 à 9 inclus). Le navigateur ne reconnait pas les nouvelles balises (header, footer, section, article, aside, navigation) introduites par HTML5. Il existe cependant un script js très simple à mettre en place (et inclus dans la plupart des thèmes HTML5) http://code.google.com/p/html5shiv/ et le tour est joué.
Malheureusement, le degré d'adoption d'HTML5 (et CSS3) d'un navigateur à l'autre n'est pas le même. Ce n'est pas 0 ou 100% mais entre les 2. Et sans surprise, Chrome et Firefox s'en sortent généralement mieux que les autres.
Quelques ressources pour y voir plus clair :
http://caniuse.com/
http://html5readiness.com/
Donc pragmatiquement, il ne faut pas tout vouloir utiliser, mais se limiter à un ensemble de fonctionnalités qui sont majoritairement compatibles.
En fait c'est surtout CSS3 qui pose problème notamment avec les "rounded-corners", les dégradés, les ombres et les media-queries. Toutes ces choses qui sont superbes et pratiques pour le design, mais qui deviennent vite un cauchemar en theming.
Mais encore une fois ; là où il y a problème il y a solutions.
1. Il y a un script pour ça
C'est un peu une solution de facilité, mais elle a le mérite de fonctionner. Il existe en effet des scripts qui permettent en javascript de « simuler » certaines propriétés CSS3 pour les anciennes versions de IE.
Ex : http://css3pie.com/
Seule limitation et non des moindre, tout cela nécessite d'avoir Javascript activé sur son navigateur. Mais à l'agence nous pensons qu'il faut arrêter d'avoir peur de cela :
=> Parce que nous essayons au maximum d'utiliser javascript de façon non intrusive, pour disposer des mêmes fonctionnalités avec ou sans js ; le reste étant cosmétique
=> Parce que (à la louche) 99% des internautes ont activé javascript
=> Parce que le 1% restant, qui a su le désactiver sur son ordinateur, sait à quoi cela sert et ne vous en tiendra pas rigueur si l'ombre portée a disparu sur Internet Explorer 7 (et vous en connaissez beaucoup des geeks qui utilisent IE7 hein ???)
2. On détecte et on adapte
Le principe : utiliser une bibliothèque JS (ex : http://modernizr.com/) pour tester les fonctionnalités supportées par le navigateur en cours.
Généralement ça rajoute une balise <class> avec les fonctionnalités permises sur la balise <body>.
On peut ensuite modifier la feuille de style CSS en fonction.
Par exemple, si Gradient est supporté, on génère un dégradé en fond avec les CSS et, le cas échéant, on utilise une image.
Autre possibilité : on utilise les coins arrondis sur Firefox et Chrome et on laisse normal sous Internet Explorer.
C'est le principe du « progressive enhancement » ou « amélioration progressive ».
Pour aller plus loin sur ce point c'est ici.
Cette solution permet de ne laisser aucun navigateur, même ceux engendrant le plus de crises de nerfs, sur le bord de la route.
C'est cependant très coûteux en temps de développement, détail non négligeable lorsque l'on travaille en agence.
Autres ressources :
- Il y enfin ce site qui permet de bien démarrer avec du code HTML5 : http://html5boilerplate.com
- ou encore le thème Drupal qui s'en inspire : http://drupal.org/project/boilerplate
Emploi Natif dans Drupal
Le thème de base Drupal 7 n'utilise pas HTML5. Drupal 8 le fera très certainement. Ceci explique pourquoi on n'utilise pas par défaut l'HTML 5.
Une option dans le thème Omega existe afin d'utiliser HTML5. L'agence active actuellement cette option sur tous ses nouveaux développements.
Cependant et nous conclurons avec ce sur quoi nous avions commencé : cette option permet seulement de déclarer un doctype. À l'intégrateur ensuite de choisir d'utiliser, ou non, les nouvelles fonctionnalités HTML5 dans son thème.
