L’idée d’associer les interfaces riches à javascript peut vous sembler banale, mais je rappelle pour certain(e)s que l’époque du web pre-Ajax n’est pas si éloignée de nous (à peine 5 ans). Bref, tout ça pour dire qu’avec les dernières générations de navigateurs (Chrome, Firefox, Safari…) les améliorations apportées aux moteurs de rendu CSS ainsi qu’au moteurs javascript remettent en cause une partie des usages de technologies RIA que l’on croyait immuables, et plus particulièrement Flash.
Autant Flash reste la technologie de référence pour tout ce qui est animation vectorielle et manipulation de vidéos / sons, autant pour des usages plus basiques la question se pose… Elle se pose notamment chez Youtube, Dailymotion et Vimeo qui expérimentent tous les trois des lecteurs vidéo en HTML5. Et ce n’est que le début !
Prenons par exemple les techniques de remplacement d’image, elles deviennent obsolètes avec @font-face : Using @font-face.
Bien évidemment nous aurons toujours besoin de Flash, Silverlight et cie pour des interfaces véritablement riches, mais pour faire de petits enrichissements « locaux », CSS3 va nous permettre de faire des choses tout à fait intéressantes comme en témoigne le dernier article de Smashing Magazine : The New Hotness: Using CSS3 Visual Effects. C’est ainsi un festival d’exemples comme ces boutons lumineux (Radioactive buttons) :
Des boutons qui flashent avec… CSS3
Mais aussi des petits effets de zoom comme ces simili polaroids :
Superbe galerie avec CSS3
Ou encore ces très beaux dégradés assortis d’animations (sliding vinyl) :
Animations et dégradés avec CSS3
Et puisque l’on parle d’animations, il serait aussi possible de les utiliser pour des menus de navigation (Nicer Navigation with CSS Transitions) ou des effets de zoom : Make An Elastic Thumbnail Menu. Plus d’exemples ici : 45 Powerful CSS/JavaScript-Techniques.
Un menu en fish-eye avec CSS3
Il serait même possible d’aller beaucoup plus loin comme nous le prouve les différentes expérimentations présentées sur Chrome Experiment dont l’incroyable jeu Crystal Galaxy :
Un shoot-them-up en javascript et HTML5
Tout ceci est très encourageant, mais ne sera viable que dans quelques années quand ces navigateurs de nouvelle génération se seront répandus. Comptez ainsi 5 à 6 ans avant qu’IE 8 et ses prédécesseurs soient sur le déclin et que le marché se sente prêt à tourner la page. Cette période étant bien sûr sujette à une petite rallonge de quelques années si Microsoft décide de ne pas intégrer HTML5 et CSS3 à IE 9 (fort probable).
Le plus surprenant dans cette histoire (navrante) c’est que nous pourrions commencer à exploiter HTML5 et CSS3 très prochainement, non pas dans le navigateur mais en dehors : Adobe AIR 2 brings Advanced CSS3 Support to the Desktop. Et oui, car la prochaine version de AIR embarquera un moteur de rendu HTML de dernière génération qui bénéficiera de toutes ces avancées.
Comme c’est ironique : Utiliser une technologie Adobe pour faire mûrir les usages d’alternatives technologiques à Flash. Méditons là-dessus…
Voir les 12 commentaires