Formation HTML 5

Support par les navigateurs

Tour d'horizon des navigateurs

Il existe une multitude de navigateurs HTML.
En fait beaucoup utilisent des moteurs de rendu communs.
Pour s'assurer de la compatibilité d'un navigateur il suffit de vérifier si le moteur de rendu est compatible.
Nous allons présenter ici le grandes familles de navigateurs et leurs avancées en terme de support HTML 5.

Plutôt que de nous intéresser à chaque navigateur nous passerons en revue les moteurs de rendu sous-jacents.

Association navigateur/moteur de rendu

correspondance navigateurs moteurs de rendus

	Version	Navigateurs concernés
Amaya	11.3.1	Amaya
Gecko	2.0	Firefox, SeaMonkey, Galeon, Camino, K-Meleon, Flock, Epiphany, GNU IceCat, Iceweasel, Fennec
KHTML		Konqueror
Presto	2.8.131	Opera, Nintendo DS & DSi Browser, Internet Channel
Prince	7.1	Prince XML
Tasman	IE 5.2.3 for Mac	Explorer 5+ Mac OS X
Trident	5.0 (IE 9)	Internet Explorer, Maxthon
WebKit	534.20	Google Chrome, Maxthon 3, Safari, Shiira, iCab 4, OmniWeb 5.5, Epiphany, Adobe AIR, Midori, Adobe Dreamweaver, CS4 et CS5, Android, Palm WebOS, Symbian S60, OWB, Steam, Rekonq, Arora, Flock

À la lecture du tableau précédent nous voyons que ce nombre reste malgré tout important, mais que certaines réalisations sont très peu répandues telle que celle de prince qui fait cependant un excellent travail sur des documents XML mais uniquement lors de la reproduction sur du papier ou plus généralement pour de la conversion XML vers PDF.

Compatibilité HTML 5

Code de couleurs

Valeur	signification
Oui	entièrement supporté.
Non	entièrement ignoré.
Partiel	connu mais toutes les valeurs ne sont pas interprétées.
Incorrect	connu mais mal interprété.
Expérimental	stade expérimental (potentiellement buggeé).
Enlevé	n'est plus supporté.
de ce jour	au stade expérimental avancé.
Dépendant	supporté que sur certaines plateformes.

Ce code de couleurs est à appliquer aux tableaux suivant cette page.

Compatibilité HTML 5

compatibilité moteurs de rendus

	Trident	Gecko	WebKit	Presto
section	5.0	2.0	533	2.7.70
nav
article
aside
hgroup
header
footer
time	Non	Non	Non	Non
mark	5.0	2.0	Oui	2.7.70
ruby, rt, rp	3.1	Non	533	Non

Le code de couleurs est décrit dans le tableau de la page précédente.

Nous limitons la présentation aux nouveaux éléments. Il y a également un support plus ou moins bon selon les navigateurs sur les propriétés spécifiques à HTML 5.

Compatibilité HTML 5

Suite du tableau

figcaption	5.0	2.0	Oui	2.7.70
figure	5.0	2.0	Oui	2.7.70
embed	<3.1	1.7	85	1.0
video	5.0 (Partiel)	1.9.1	525	2.5
audio
source
canvas		1.9.2	Partiel	2.0
Inline MathML	Non	2.0	De ce jour	2.1
Inline SVG	5.0	2.0	Oui	1.0
details	Non	Non	De ce jour	Non
summary		Non	De ce jour
command		Non	Non
menu		Non	Non
	Trident	Gecko	WebKit	Presto

Nous nous limiterons ici aux quatre familles de navigateurs les plus répandues.

Le versions antérieures aux versions citées ne supportent pas les nouvelles balises HTML 5.

Vérification de compatibilité navigateur

Il est aisé de réaliser un test du navigateur utilisé par les outils développés par le Web Standards Project :
- le site acid2.acidtests.org/ permet le test Acid2 qui vérifie les aspects des balises HTML, les CSS 2.1 et les images PNG.
- le site acid3.acidtests.org permet le test Acid3 qui vérifie la conformité HTML4, les CSS2.1, une partie des CSS3, le support des images SVG et la conformité au DOM2.
- le Web Standards Project étudie la mise un place d'un test Acid4 qui devrait inclure un support total des CSS3 et des espaces de nommages multiples.
Le site html5test.com/ mis en place par sights.nl assure le test de conformité HTML 5, il ne réalise pas de test de présentation CSS

Faire un test Acid2 sur InternetExplorer 6 ou InternetExplorer 7 en dit long sur le pourquoi de la difficulté des concepteurs web qui essayent de respecter la norme et d'avoir un rendu correct sur un large éventail de navigateur. Heureusement le comportement de ce test est devenu correct avec InternetExplorer 8.

Détection dans page web

Vérifier que le navigateur que l'on utilise est compatible est une chose.
Vérifier que le navigateur utilisé par les internautes visitant notre site est compatible en est une autre.
Il existe une multitude de navigateurs vétustes encore en service de nos jours.
Bloquer tout affichage sur ceux-ci est regrettable car :
- souvent les apports du HTML 5 ne concernent que le style,
- le contenu important peut apparaître sous forme brute.
Deux stratégies sont possibles :
- produire plusieurs types de pages servies en fonction du navigateur client,
- produire des pages permettant l'accès à l'information en cas de non support des nouveaux éléments.

La détection du navigateur peut se faire coté serveur par la vérification du User-Agent, mais attention : en raison du caractère abusif de certains sites à n'accepter que certains navigateurs (le plus souvent InternetExplorer) les autres navigateurs permettent de falsifier leur identité autorisant ainsi l'accès à ces sites réservés.

Détection dans page web

Les fonctions javascript permettent de vérifier ce que supporte le navigateur.

Par exemple la fonction suivante permet de détecter si la géolocalisation est supportée :

<script type="text/javascript">
<!--
  function supports_geolocation() {
    return !!navigator.geolocation;
  }
-->
</script>

Pour fonctionner il faudra que le javascript soit activé.

La détection du navigateur par le javascript est garantie car le navigateur n'exécute que les fonctions qu'il connaît.

Depuis l'avènement du web 2.0 rares sont les navigateurs sur lesquels javascript est désactivé.

Comportement alternatif

En cas d'absence de support de certaines balises un comportement alternatif peut être mis en place.
Le principe est basé sur l'ignorance des nouvelles balises par les navigateurs.
HTML 5 supporte des balises filles des nouveaux éléments et :
- reconnues par le HTML 4
- ignorées par le HTML 5.
Ainsi la balise video supporte la balise object.

L'avantage de cette technique est de permettre une migration en douceur vers le HTML 5.

Comportement alternatif

Exemple de code compatible HTML 4 et HTML 5

 <!-- ignorée en HTML 4 -->
<video width="640" height="480" controls="controls">
  <source src="video.mp4" type="video/mp4"/>
  <source src="video.ogv" type="video/ogg"/>
 <!-- ignorée en HTML 5 -->
  <object width="640" height="480"
   type="application/x-shockwave-flash" 
   data="lecteurflash.swf">
 <param name="movie" value="lecteurflash.swf"/>
 <param name="flashvars" 
   value="controlbar=over&image=ima.jpg&file=video.mp4"/>
 <img src="ima.jpg" width="640" height="480" 
   alt="Ma vidéo"
   title="Charger la vidéo"/>
  </object>
</video>

Documentation

Comparison of layout engines HTML5 : http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
Detecting html5 features : http://diveintohtml5.org/detect.html