HTML 5, CSS 3 : les standards du web contre Flash ?

Projetés sur le devant de la scène depuis les dernières passes d'armes entre Apple et Adobe, les standards tels que HTML 5, CSS ou JavaScript peuvent-ils remplacer les technologies propriétaires comme Flash ou Silverlight afin de réaliser des sites web riches en interactions et en contenu multimédia ? Tentons de voir plus clair dans cette bataille un peu caricaturée par les deux « camps »...

0000009602643012-photo-html-logo.jpg
Ca n'aura échappé à personne : la guerre entre Apple et Adobe semble déclarée. La raison ? La sortie de l'iPad, une tablette dénuée, comme l'iPhone et l'iPod Touch, de toute prise en charge de Flash. Derrière cette bataille rangée essentiellement commerciale, dans laquelle les deux camps font preuve d'une certaine mauvaise foi sur certains points, se cache un combat plus intéressant : celui des standards modernes du web contre les technologies propriétaires nécessitant des plug-ins, dont Flash ou le Silverlight de Microsoft.

Les dernières avancées, tant au niveau des spécifications HTML, CSS, que des langages de programmation du web ou des performances des navigateurs, permettent aujourd'hui de créer, sans plug-in, des contenus assez riches sur le web. Le développement de l'Ajax avait déjà permis d'effectuer un bond en avant dans l'interactivité des sites web, ouvrant la voie à des applications presque aussi réactives et fonctionnelles que leurs équivalents desktop... ou Flash. L'intégration, encore balbutiante de HTML 5 et des balises Video et Audio, brisent une autre barrière : la publication de vidéos, chasse gardée des plug-ins, dont Flash ou Silverlight, jusqu'ici.

D'où la question : s'il est possible de créer, sans Flash, des sites web proposant un degré d'interactivité proche d'une application traditionnelle et des contenus vidéo à l'image d'un YouTube, pourquoi passer par des technologies comme Flash ? La question se pose d'autant plus que Flash a indéniablement du retard sur les appareils mobiles, qui prennent de plus en plus d'importance. Voyons donc ce qu'il en est réellement, tant au niveau des possibilités offertes par les standards, que de leur implémentation dans les navigateurs disponibles, en tentant de vulgariser des concepts abscons pour les utilisateurs de sites web au quotidien.

Qu'est ce qu'un standard ?

0000006401946224-photo-mike-safarilogo.jpg
Avant de plonger dans le détail de ces technologies, il convient de rappeler ce que l'on entend par standard du web. Qu'est ce qu'un standard ? Est-ce une technologie ou un logiciel largement utilisé comme Flash ou Internet Explorer ? On pourrait utiliser le terme de manière abusive, mais par standard, on induit ici une technologie qui fait partie des spécifications établies par le W3C, l'organisation internationale fondée en 1994 pour régir les règles du World Wide Web. En ce qui concerne HTML, plusieurs versions de ces spécifications ont déjà vu le jour, dont les plus récentes, XHTML et HTML5, dont il faut préciser d'emblée qu'elle n'est pas définitive. Le W3C estime sa généralisation dans 5 ou 7 ans, alors qu'à l'heure actuelle, les utilisateurs de navigateurs compatibles HTML5 sont encore minoritaires.

0000006401986324-photo-internet-explorer-8-final-logo-clubic.jpg
On se retrouve donc avec une situation paradoxale : on parle de standards du web alors que le navigateur le plus utilisé, qui reste Internet Explorer, ne les prend en charge que très partiellement. La donne devrait néanmoins changer avec Internet Explorer 9, dont Microsoft semble déterminé à améliorer sa conformité avec les standards du W3C, et notamment HTML5. A l'heure actuelle, cependant, il faut rester dans un cadre théorique : le W3C n'est pas un organisme qui dicte sa loi, et auxquels les éditeurs des différents navigateurs sont contraints de se plier. Il émet des spécifications et encourage leur utilisation dans le but d'une plus grande standardisation.

Pourquoi a-t-on besoin de technologies comme Flash ?

0000009601144434-photo-logo-flash-adobe.jpg
Pour expliquer l'importance qu'a pu prendre Flash depuis son développement, il faut rappeler quelles sont les limitations d'un site web « traditionnel » tel qu'on l'entendait il y a encore pas si longtemps. Celles-ci concernent principalement le côté visuel et l'interactivité. Le web n'a pas été pensé à la base pour faire de la mise en page inspirée des médias « print » ou de la vidéo. Utiliser une technologie comme Flash, c'est s'affranchir de ces limites : on peut alors utiliser des typographies non standard, agrémenter les pages d'animations impossibles à rendre avec du HTML « basique ».

Les technologies comme Flash ou Silverlight permettent également des interactions poussées qui ont longtemps été impossibles avec des technologies web classiques : le web a été conçu pour afficher des documents avec des liens hypertexte, pas pour reproduire le comportement d'une application « desktop » dans un navigateur. Les technologies comme Flash, au contraire, permettaient de s'approcher de ce niveau d'interaction et donc de proposer à la fois des sites web enrichis ayant le comportement d'applications telles qu'on les conçoit habituellement, mais également de jeux assez réussis techniquement.

0190000003340398-photo-html5-exemple-de-site-flash.jpg


Enfin, l'arrivée de la vidéo Flash a révolutionné le web avec la popularité de sites comme YouTube, Dailymotion ou Vimeo. Tous ces sites utilisent traditionnellement Flash, qui permet de lire des vidéos sur un navigateur web sans avoir installé de lecteur vidéo agrémenté d'un plug-in tel que QuickTime ou RealPlayer.

0190000003340400-photo-html5-youtube.jpg


Là où ça coince...

Le problème de technologies comme Silverlight ou Flash réside dans le fait qu'il s'agit malgré tout de plug-ins qu'il faut installer sur son poste client. Accédez à une page web utilisant la technologie sans le plug-in correspondant et vous aurez au mieux une page pleine de trous, au pire un message vous indiquant que le site ne peut pas être visionné sans le plug-in. Soit, me direz-vous, il suffit alors de l'installer : Flash comme Silverlight sont disponibles sur Windows, Mac OS X et Linux (pour ce dernier la prise en charge de Silverlight n'est pas officielle).

0190000003340554-photo-html5-ipad-no-flash.jpg


Certes, mais ce qui est vrai pour le desktop l'est beaucoup moins pour les appareils mobiles pour lesquels on trouve deux cas de figure : soit la technologie existe, mais elle n'est pas encore assez mûre (avec des progrès tout de même, voir le tandem Android 2.2 / Flash 10.1), soit la technologie est bloquée à la source par le constructeur. C'est le cas d'Apple qui refuse de permettre à Adobe de développer une version iOS (iPhone, iPod Touch, iPad) de son lecteur Flash. Conséquence : les sites utilisant Flash (ou Silverlight qui est exactement dans le même cas) sont illisibles sur les appareils frappés d'une pomme. Conséquence fâcheuse puisque la part de marché d'iOS croît, et l'iPhone mène la marche en ce qui concerne le surf sur appareil mobile. Résultat : un pourcentage grandissant d'utilisateurs n'a pas accès à de nombreux contenus disponibles sur le web. Apple justifie sa position par plusieurs reproches imputables à la technologie : Flash est gourmand en ressources, très limitées sur un appareil mobile, et manque en outre de stabilité et de sécurisation. Pour Steve Jobs, comme il l'a écrit dans sa lettre ouverte, la solution a un nom : HTML5 ! Pas si simple en réalité, mais voyons de quoi il en retourne !

HTML5 : la solution miracle ?

Avant toute chose, démontons d'emblée un préjugé sur HTML5. L'affaire Apple vs Adobe a probablement contribué à un raccourci qui consiste à faire de HTML5 une sorte de révolution technologique qui permettrait de s'affranchir de Flash ou de Silverlight. Il n'en est rien ! Déjà, HTML5 n'a pas été conçu dans le but de rendre Flash ou Silverlight obsolète. En réalité, quand on parle de HTML5 pour remplacer Flash, on parle de l'utilisation de certaines nouvelles propriétés de HTML5, associées à des technologies existantes comme JavaScript, et à de nouvelles propriétés offertes par les feuilles de style CSS, notamment dans leur version 3.

Les balises < audio > et < video >

En fait, l'engouement autour de HTML5 tourne principalement autour de deux nouvelles balises : audio et vidéo. Celles-ci permettent comme leur nom l'indique, d'insérer dans une page web un fichier audio ou vidéo et de le lire sans plug-in. On voit d'emblée l'intérêt : en théorie, cela permet à un site comme YouTube de se passer entièrement de Flash. En pratique, la situation est plus compliquée. Car pour lire la vidéo, il faut un codec. Et si la majorité des navigateurs web interprètent la balise vidéo, ils n'ont pas encore réussi à se mettre d'accord sur le codec à utiliser pour cela.

Du côté d'Apple, on pousse évidemment le format H264, déjà largement utilisé dans de nombreux produits et logiciels de la marque. Les vidéos H264 intégrées dans des pages web sont donc lues par toutes les versions de Safari : Mac, Windows, iPhone/iPod Touch et iPad. Le format H264 sera également pris en charge par Microsoft pour Internet Explorer 9.

0190000003340424-photo-html5-vid-o-safari.jpg


De son côté, Google propose également son propre format, VP8, dont les spécifications sont ouvertes. Le format sera géré par la prochaine version de Chrome, et Opera le rejoindra également avec la version 10.6 de son navigateur. Pour l'heure, Opera ne prend en charge que le format libre Ogg Theora, tout comme Mozilla Firefox ! Quant à Internet Explorer 8, il est tout simplement incapable de prendre en charge les deux balises...

0190000003340434-photo-html5-dailymotion.jpg


Comment réagissent les fournisseurs de contenu ? En pratique, depuis la sortie de l'iPad notamment, on trouve de plus en plus de sites d'actualité ou de vidéos communautaires proposant une option HTML5/H264 alternative. Apple en fait la promotion sur son site, où l'on trouve une section spéciale iPad que des grands noms viennent régulièrement grossir : New York Times, Time Magazine, Reuters, ESPN, CNN ou encore ABC et Netflix sont déjà prêts à s'affranchir de Flash (du moins en ce qui concerne les appareils incompatibles). Testés en pratique sur un iPad, les sites sont effectivement conçus de manière à faire totalement oublier l'absence de Flash sur l'appareil : les vidéos intègrent le lecteur HTML5 de l'iPad, et l'intégration est même assez sympathique. On passe en plein écran total d'un tapotement sur l'icône correspondante avec un petit effet de zoom avant/arrière du meilleur effet.

012C000003340556-photo-html5-ipad-cnn.jpg
012C000003340558-photo-html5-ipad-vimeo.jpg

Quid des sites de vidéo communautaires ? YouTube diffuse des vidéos au format H264, mais propose également la prise en charge du format VP8. Chez Vimeo, le H264 est également de la partie. Enfin, le format libre Ogg est utilisé notamment par Dailymotion, mais son avenir demeure plus incertain (d'ailleurs, DailyMotion propose également ses vidéos au format H264 pour les utilisateurs d'iPhone ou d'iPad). Bref, si le fait d'avoir des balises dédiées pour l'ajout de vidéos est une avancée certaine, la bataille qui se livre sur le plan des codecs risque d'être, dans un premier temps, nuisible à la standardisation promise, même si actuellement, le H264 semble s'imposer et dispose de soutiens certains (Apple, Microsoft...).

CSS : animations et typographie

Si les vidéos font partie des éléments pouvant rendre une page HTML moins statique, l'intérêt de technologies comme Flash ne se limite pas, loin de là, à l'affichage de vidéos. En remontant dans le temps, qu'est-ce qui a réellement contribué au développement de Flash ? Sans doute sa filiation nettement plus rapprochée avec les techniques existantes dans d'autres formes de publication visuelle. Tant au niveau de la typographie ou de la mise en page, que de l'animation des contenus, Flash permet beaucoup plus de liberté aux créatifs qui se retrouvent avec des possibilités plus proches de ce à quoi ils sont habitués dans les domaines de la publication « print » ou de la vidéo. Une page web, à la base, est statique. Elle obéit en outre à des contraintes en terme de typographie (nécessité de recourir à des polices standard), de mise en page (peu de fantaisies permises avec le texte) ou d'animation des contenus (transitions, alpha, balayages...). Ces limitations se sont progressivement réduites avec les progrès réalisés par les feuilles de style CSS. Conçues pour différencier le contenu sémantique d'une page de sa mise en forme, les CSS permettent aujourd'hui de réaliser des mises en page complexes sans avoir recours à des artifices tels que les tableaux détournés de leur fonction d'origine.

Les dernières versions des CSS introduisent de nouvelles possibilités intéressantes. Il est ainsi possible de charger une police de caractères personnalisée dans une page pour l'utiliser, même si elle n'est pas installée sur le poste client qui exécute le navigateur. Cette propriété est en réalité antérieure à la version 3, mais elle est aujourd'hui prise en charge par l'ensemble des navigateurs web actuels... à l'exception d'Internet Explorer 8. À l'heure où nous écrivons ces lignes, la 3e Technology Preview d'Internet Explorer 9 n'est pas mieux lotie : les sites testés cherchent toujours leur police...

012C000003340436-photo-html5-css3-fonts.jpg
012C000003340438-photo-html5-css3-fonts-2.jpg


Les CSS offrent également des propriétés plus avancées en ce qui concerne les formes, et notamment l'affichage des boites dont les angles peuvent être arrondis, et le remplissage qui gère les dégradés, voire même de gérer des animations. Et c'est là que le bât blesse : les navigateurs web actuels offrent des niveaux de compatibilité TRÈS variés sur certaines propriétés. En clair : les navigateurs utilisant le moteur Webkit (Safari, Chrome) sont très en avance sur ce plan et pour cause : la plupart de ces possibilités utilisent des propriétés... propres à Webkit, précédées du préfixe « -webkit ». On comptera parmi elles les transitions, permettant de créer des animations entre deux états (position, opacité...), la gestion de la rotation du texte, ou encore l'ajout de reflets. Il était évidemment possible d'arriver à certains de ces effets en utilisant Javascript, mais le fait de pouvoir les intégrer directement via des propriétés CSS facilite considérablement leur implémentation.

0190000003340440-photo-html5-css3-gradient.jpg


Concrètement, on trouve des exemples de l'intérêt de ces transitions et animations dans plusieurs démos technologiques, notamment celles postées par les développeurs de Safari. On peut citer par exemple leur jeu de dames, qui utilise les transitions CSS pour l'animation des pions, ou une interface rappelant largement celle de leur « media center » Front Row. Visualisée sur un Mac équipé de Safari, la démonstration est assez convaincante : les animations dans les menus, les reflets sur les affiches, tout est là ! Pour un néophyte peu au fait des technologies du web, difficile de savoir que l'on n'est pas dans un site Flash.

012C000003340442-photo-html5-dames.jpg
012C000003340444-photo-html5-trailers.jpg


Néanmoins, le fait que ces animations ne soient visibles, actuellement, qu'avec Safari ou Chrome peut alors inciter à se demander quel est l'intérêt de développer des standards si certaines balises ne fonctionnent que sur des navigateurs spécifiques. La situation est en fait plus complexe qu'elle en a l'air. Contrairement à l'époque de la guerre IE/Netscape, où certaines balises propriétaires étaient incompatibles et perturbaient l'affichage des pages, le fait d'utiliser des propriétés CSS labellisées pour un certain navigateur permet justement d'éviter les incompatibilités en précisant le navigateur qu'elles concernent. Si vous exécutez un autre navigateur, ces balises seront ignorées, mais si le site est correctement codé, cela ne doit pas, en théorie, le rendre inutilisable. Il ne faut pas oublier que ces spécifications ne sont pas encore finalisées !

En revanche, dans le cadre de démos technologiques, on risque vite de se trouver face à un mur, et c'est effectivement ce qui se passe lorsque l'on confronte différents navigateurs aux exemples donnés par Google avec son site HTML5 Rocks : la plupart des propriétés CSS évoquées sont réservées aux navigateurs Webkit : les exécuter avec Opera ou Firefox, même avec des builds récentes (Firefox 3.7 Alpha et Opera 10.6 beta) résulte le plus souvent dans une ignorance totale des propriétés. C'est encore pire sur les démos diffusées par Apple, qui refusent tout simplement de se lancer avec un navigateur autre que Safari (même Google Chrome, qui utilise pourtant Webkit !) À terme, Firefox devrait intégrer le support des transitions dans sa version 4.0, mais dans la mesure où la plupart des démos disponibles actuellement utilisent spécifiquement les propriétés -webkit, il est impossible de tester le résultat sur un navigateur utilisant un autre moteur.

Canvas

Quid des graphismes ? Jusqu'ici, nous avons vu que HTML5 pouvait être utilisé pour insérer des vidéos, et que les CSS3, notamment sous les navigateurs utilisant le moteur Webkit, permettaient d'agrémenter les pages de transitions et d'effets graphiques. Néanmoins, Flash, et c'est même son utilisation première avant qu'il ne devienne la solution complète qu'il est aujourd'hui, était destiné à agrémenter les sites web de graphismes et d'animations vectorielles.

Que trouve-t-on du côté des standards du web ? On peut citer deux technologies. La première, Canvas, est une technologie là encore initiée par Webkit, mais reprise par tous les navigateurs depuis. Canvas permet d'insérer via une balise HTML une zone permettant d'afficher des graphismes bitmap ou vectoriels. L'intérêt est de pouvoir interagir avec cette zone via JavaScript. Cela permet ainsi de réaliser des applications interactives, ou des jeux, sans avoir recours à un plug-in, du moins sur le papier.

012C000003340490-photo-html5-canvas-amazon-shelf.jpg
012C000003340492-photo-html5-canvas-fishie-tank.jpg


Intégré à HTML5, Canvas est notamment mis en avant par Microsoft (là où Apple met plutôt l'accent sur les transitions et animations CSS dans ses démos). Internet Explorer 9, pour lequel Microsoft semble faire de gros efforts pour pousser l'usage des standards, bénéficiera d'accélérations matérielles profitant notamment aux éléments Canvas. La firme de Redmond propose déjà une Technology Preview de son futur navigateur, associé à de nombreuses démonstrations, dont plusieurs utilisent ces éléments. On trouve ainsi une bibliothèque interactive affichant les best-sellers d'Amazon et diverses animations mettant en scène des éléments bitmap (aquarium, champ d'astéroïdes...). En exécutant ces démonstrations sur les 5 navigateurs en version finale et en version de développement, on remarque effectivement que tous exécutent sans problème le code, mais avec des résultats très variables quant aux performances, les plus performants, derrière la preview d'Internet Explorer 9 (accélérée et logiquement loin devant), sont Opera et Firefox, avec un léger avantage pour leurs versions de développement par rapport aux versions stables actuelles.

SVG

Autre technologie standard, le SVG permet comme ce dernier d'afficher des éléments graphiques vectoriels, là où on utilisera plutôt Canvas pour le bitmap. Là encore, on peut l'utiliser pour afficher des objets statiques, mais aussi dynamiques, animés ou interactifs. Un des usages permis par l'utilisation d'éléments SVG réside par exemple dans l'insertion de graphiques dans une page web. Quelle technologie utiliser ? Certains se sont penchés sur le sujet, comme l'auteur du blog Electriq qui a tenté de développer la même application, un spirographe interactif, en utilisant HTML5 (avec possibilité de switcher entre SVG et Canvas pour le rendu) d'un côté et Flash de l'autre. Le verdict est sans appel : selon lui, la version Flash est infiniment plus réactive. En revanche, Canvas se montre plus véloce que SVG sur les navigateurs compatibles. Dans tous les cas, il semble que HTML5 ait encore du pain sur la planche à ce niveau...

0190000003340500-photo-html5-svg.jpg


Quoi d'autre ?

Nous avons évoqué dans ce tour d'horizon quelques possibilités offertes par HTML5 et les CSS 3, mais ce ne sont pas les seules. Ainsi, HTML5 permet notamment de gérer la mise en cache d'éléments ou l'envoi de notifications, ce qui ouvre des possibilités intéressantes dans les applications de messagerie, par exemple. La géolocalisation, la gestion du glisser/déposer ou encore la prise en charge de nouvelles possibilités pour les formulaires (curseurs, champ de recherche, validation de types de données spécifiques tels que les couleurs, les adresses mail...) font également partie des nouveautés.

Conclusion

La notion de standards du web est en perpétuelle évolution. Lorsqu'Apple a sorti, certes de manière assez opportuniste, une page de démonstrations technologiques vantant les mérites de HTML5 et des CSS3, plusieurs blogueurs et défenseurs de navigateurs concurrents se sont émus de l'impossibilité de lancer ces démonstrations sur des navigateurs concurrents. Le problème réside dans l'absence de finalisation de ces standards. Apple a envoyé un message confus, faisant croire que Safari était un navigateur plus respectueux des standards du web que ses concurrents. En fait, la plupart de ces démonstrations n'auraient même pas pu se lancer sur un navigateur concurrent.

0190000003340710-photo-html5-safari-demos-sur-firefox.jpg


Le risque est alors le suivant : va-t-on se retrouver avec une situation similaire à la guerre Netscape/Internet Explorer, alors que les standards du web sont justement censés uniformiser le rendu des pages web entre les navigateurs ? Le risque existe, notamment en raison de l'usage que des sociétés comme Apple font de ces standards. On a compris que le but d'Apple est de tuer Flash, et de prouver son obsolescence alors que l'on peut aujourd'hui réaliser des pages web complexes, visuellement très riches, sans avoir recours à des technologies comme Silverlight ou Flash. Néanmoins, à trop vouloir mettre en avant des standards qui ne sont pas finalisés, et sur lesquels les différents acteurs ne sont pas sur la même longueur d'onde, on risque effectivement de se retrouver avec des sites utilisant des codecs différents pour leurs vidéos, ou ayant recours à des propriétés incompatibles avec certains navigateurs web.

0190000003340554-photo-html5-ipad-no-flash.jpg


Cette situation peut au contraire donner du grain à moudre à Adobe, qui pourra toujours prétexter qu'un site utilisant Flash bénéficie du même rendu, que l'on soit sous Mac OS X, Windows ou Linux, et quelque soit le navigateur utilisé. L'éditeur de la Creative Suite peut également faire valoir la puissance et la simplicité d'utilisation de ses outils : Flash offre aujourd'hui une ergonomie et un fonctionnement passés dans les mœurs des créatifs, là où passer par les standards du web peut nécessiter un réapprentissage. La version 5 de la suite propose en outre des ponts intéressants entre ses outils « print » tels que Photoshop et InDesign, et Flash via des outils de conversion, comme le nouveau Flash Catalyst qui permet de transformer une maquette réalisée sous Photoshop en un site interactif sans saisir une ligne de code.

Au final, les standards du web sont en progrès, et permettent de réaliser des sites de plus en plus attractifs visuellement, et désormais enrichis de contenus multimédias sans passer par un plug-in. C'est une excellente nouvelle ! Que des sociétés comme Apple contribuent à ce développement en maintenant une avance technologique qui bénéficie à un projet open source comme Webkit l'est tout autant ! Mais il serait souhaitable que les développeurs des différents navigateurs web accordent désormais leurs violons, afin de ne pas revivre un remake des années 90 où un navigateur dominant dictait la manière de réaliser des sites web...
Modifié le 01/06/2018 à 15h36
Soyez toujours courtois dans vos commentaires.
Respectez le réglement de la communauté.
0
0

Actualités du moment

Députés : pas de Twitter pendant une audition à huis-clos ?
mSpot : faites vous votre petit Deezer personnel
L'Europe lance sa consultation sur la neutralité du Net
Fin de parcours pour le Kin, le téléphone pour jeunes de Microsoft
Les FAI jugés pour leurs services
Les
Sony déploie une mise à jour pour deux de ses Vaio
Fabrice Robert, Jobintree
Chrome bloquera les plugins non mis à jour
Asus Eee PC 1215N : un mini portable à Atom double cœur et Ion 2
Haut de page