HTML5 et CSS3 : ce n’est pas de la science fiction

CSS3, html5, c’est bein beau tout ça, on en entend parler depuis un bout de temps mais au final, qu’est-ce que ça va changer ?

Déjà, la question n’est pas qu’est ce que ça va changer mais qu’est ce que ça change ?. En effet, pas besoin d’attendre 2012 pour utiliser html5 et css3, ces techno sont déjà là. Pas supportées par tous les navigateurs certes mais pour peu que vous utilisiez un Firefox à jour (une version 3.5 par exemple) ou encore mieux un Safari dernière mouture (allez je suis pas sectaire, il y a Opera aussi), html5 et css3 sont disponibles.

HTML 5 , de nouveaux tags…

Qu’est-ce que ça change html 5 ? Pas grand chose à première vue. Quelques tags un peu plus sémantiques, un <section>, un tag <article>, un tag <nav>… Pas de quoi grimper aux rideaux sur ce coup là. Par contre, les tags <video> et <audio> sont autrement plus intéressants. Avec ces tags on peut insérer des vidéos ou des fichiers audio au format .ogg (ou mp3 pour safari) sans avoir besoin de player externe type quicktime ou flash. Oui, vous avez bien lu, on peut pourra peut lire des vidéos ou de l’audio en natifs dans un navigateur. Et si vous ne me croyez pas, allez faire un tour chez dailymotion openvideo.

HTML5, de nouvelles fonctionnalités

Html 5 propose également une api de géolocalisation, déjà opérationnelle dans Firefox 3.5 et Safari . Évidemment ce genre d’outil prend tout son sens sur plate forme mobiles. Ça tombe bien puisque Firefox mobile (ex Fennec) et Safari mobile ont déjà implémenté cette API.

Mise à jour : à ce jour, après vérifications, seul Firefox 3.5 desktop intègre en standard cette nouvelle api de géolocalisation. Seule la version mobile de Safari l’intègre. La dernière beta de Chrome intègre également cette api.

Html5 arrive également tout un lot de fonctionnalités destinées aux applications en ligne : nouveaux éléments de formulaires, enregistrement de données en local, gestion de cache… Bref, tout ce qu’il faut pour réaliser de vrais applications.

CSS 3

Côté css3, c’est tout aussi intéressant. On va enfin pouvoir utiliser de vrais typos avec la nouvelle règle @fontface, réaliser des mises en page en grille simplement grâce au module muti columns et cerise sur le (déjà gros) gâteau, animer des éléments en 2D et même 3D. A ce sujet, je vous invite à regarder cette vidéo de démo de transformations css 3D sur Safari :

Si vous avez safari sur snow léopard, vous pouvez la tester  directement dans votre navigateur.

Et tout ça n’est pas de la science fiction. Dès aujourd’hui, on peut utiliser html5 et css3 si on s’y prend intelligemment. Intelligemment, ça veut dire réaliser un site accessible à tous mais qui déchire pour ceux qui ont Firefox 3 .5 et ou Safari 4.0.4 (ou encore une fois, ne soyons pas sectaires, Opera 10.5). Ça s’appelle l’amélioration progressive – en anglais progressive enhancement.

Bientôt sur vos écrans

D’ailleurs la très prochaine version de ce blog sera réalisée en html5 et css3 et permettra de faire profiter ceux qui utilisent un navigateur récent des dernières innovations des technos front. Les autres, ceux qui utilisent encore pour des raisons qui leur sont propres (et qu’il nous faut respecter) un vieux bouzin d’internet explorer 6, 7 et même 8 (qui est extrêmement naze également, ne nous voilons pas la face), auront également accès au contenu de ce blog, mais dans une version dégradée. Pas de belles typo, pas de mise en page chiadée, pas de mutiples images de fond, mais au moins,  un contenu lisible.

Nouvelle version ici prévue pour mi-mars. Avec l’arrivée du printemps tiens.
Et comme on parle de web, il faut compter 15 jours de retard. Donc fin mars.