dimanche 8 août 2010

Utilisez dès à présent HTML5 et CSS3

Après une assez longue absence, me revoilà pour un billet qui, je l'espère, servira à certains.
Depuis que j'ai eu l'occasion de lire les premières informations à propos de HTML5 et de CSS3, j'ai eu envie de tester tout ça. Le problème reste évidemment que certains navigateurs ne prennent toujours pas en compte ces nouvelles technologies (et je pense que je n'ai pas besoin de les citer...). J'ai donc trouvé des scripts JavaScript permettant d'ajouter au DOM les nouveaux éléments sémantiques de HTML5 pour IE, mais la plupart des fonctionnalités restaient quand même inutilisable. Idem pour le CSS3, pas de solution.
Il y a peu de temps, je me suis lancé le défi de concevoir un site en HTML5 et CSS3, complètement animé grâce à jQuery (façon site Flash en gros), et donc full Ajax. Je voulais que ce site soit accessible même sur de vieux navigateurs, et qu'il fonctionne également si le JavaScript était désactivé. J'ai donc entrepris quelques recherches et voilà les solutions que j'ai pu trouver...


  • HTML5 et CSS3 pour tous

Le script Modernizr vous aidera pour ça. Il permet en effet d'ajouter les nouveaux éléments au DOM pour les navigateurs qui ne les supportent pas, mais il ne fait pas que ça. Il teste en fait la prise en charge de toutes les nouvelles fonctionnalités sur le navigateur. Ensuite, il propose des fonctions JavaScript et des classes CSS qui permettent de fournir une alternative. En bref, imaginons que vous vouliez un DIV avec des coins arrondis par CSS. Sur la plupart des navigateurs modernes, aucun problème. Par contre, sur IE, ça ne passe pas...
Modernizr teste cela au chargement de la page et ajoute une classe .no-borderradius à votre élément. Il vous suffit donc de faire le nécessaire (background-image par exemple) dans votre CSS pour corriger le tir !
Même chose pour les fonctionnalités HTML5 propres. Imaginons cette fois que vous ayez un champ <input type="date" /> qui est censé ajouter un "datepicker" automatiquement dans les navigateurs compatible. Modernizr.inputtypes.date est un booléen qui vaudra false si le navigateur ne supporte pas cela. Il vous suffit donc d'écrire une fonction testant cette valeur et proposant une alternative (comme un datepicker jQuery UI par exemple).

Certes cela représente du travail supplémentaire, mais les bénéfices sont bien réels !
Le site que j'ai réalisé est composé de plusieurs divs à coins arrondis, de fonds en dégradés radiaux et linéaires, etc... Cela représente plusieurs centaines de Ko d'images. Grâce au CSS3, le site entier ne pèse que 65Ko dans un navigateur compatible...

  • Site Ajax qui fonctionne sans JS, et donc Search Engine Friendly
Comme je le disais, le site que j'ai réalisé était complètement animé en JavaScript et le contenu était rapatrié via des requêtes Ajax. Le problème majeur est que les moteurs de recherches n'indexe pas le contenu de cette façon. Il fallait donc trouver une alternative. De plus, si le JavaScript est désactivé sur un navigateur, tout ce que j'ai expliqué plus haut ne vaut plus. Et dans mon cas, j'avais un problème supplémentaire car les deux panneaux servant à afficher le contenu était en position "rentrés" au démarrage du site, et glissait pour sortir via une animation JavaScript...
La solution la plus simple que j'ai pu trouvé est l'utilisation de la balise <noscript></noscript> pour inclure un fichier CSS supplémentaire au cas où le JavaScript était désactivé. J'ai donc pu corriger tous les problèmes d'affichage grâce à ça.

Pour le contenu Ajax, c'est une autre paire de manche... Et pourtant, ce n'est pas non plus très compliqué. Il suffit en fait de créer les différentes pages comme pour un site "normal", sans Ajax. Ensuite, vous créez les liens de votre menu tout à fait normalement. Et pour finir, grâce à jQuery, vous pouvez écrire des fonctions "handler" pour les évènements "click" sur les liens. Dans ces fonctions, vous récupérez le contenu via Ajax et le placez là où il doit être. L'important, c'est que votre fonction retourne false quoi qu'il arrive. De cette façon, si le JavaScript est activé, le navigateur lancera la fonction mais ne suivra pas le lien. Par contre, il le suivra s'il n'y a pas de JavaScript et affichera donc votre page "classique" !

Voilà qui clôture cet article... N'hésitez pas à me contacter si vous pensez à autre chose, ou si je n'ai pas été assez clair dans mes explications !

Aucun commentaire:

Enregistrer un commentaire