Ce sera le dernier article de notre série sur HTML5. Nous allons maintenant examiner brièvement les nouvelles technologies HTML5 prises en charge par les principaux navigateurs et passer en revue certaines techniques que vous pouvez utiliser pour tirer parti des nouveaux éléments de votre code actuel. Enfin, nous verrons comment vous devriez commencer à vous préparer à prendre en charge HTML5 sur tous les sites que vous créez à partir de maintenant.
Quelles fonctionnalités sont supportées officiellement par les principaux navigateurs?
Pour les besoins de cet article, nous allons définir? Support officiel? comme indiqué dans la documentation du développeur du navigateur. Cela garantira qu'aucune astuce ni aucun truc n'est requis pour utiliser les nouvelles fonctionnalités et se concentrera plutôt sur une implémentation native directement à partir de la source (n'hésitez pas à ajouter vos propres commentaires basés sur les résultats de vos propres tests!). Dans cet esprit, jetons un coup d’œil aux itérations actuelles de quelques grands navigateurs.
Firefox 3.5
Rendez-vous sur la page de développement de Firefox et vous verrez une brève description du support HTML5. Voici une liste des fonctionnalités prises en charge:
- élément audio
- élément vidéo
- élément de toile
- Spécification de ressource hors ligne
- API glisser-déposer
Safari 4
La liste des fonctionnalités de Safari 4 mentionne la prise en charge des fonctionnalités suivantes:
- éléments audio et vidéo (et API associée)
- élément canvas (créé par Apple pour Dashboard)
- Assistance aux applications hors ligne
Internet Explorer 8
Bien que le Centre des développeurs d’Internet Explorer revendique un support solide? pour HTML5, il ne semble pas y avoir de prise en charge de l'élément de zone de dessin (probablement en raison de Silverlight), d'éléments audio / vidéo ou de l'API d'application en mode hors connexion. Voici une liste complète des éléments pris en charge par IE 8, dont aucun ne semble provenir exclusivement de HTML5. Cependant, j'ai trouvé mention de la prise en charge de la nouvelle API de messagerie inter-documents. N'hésitez pas à partager vos ressources sur la prise en charge de HTML5 dans IE 8 à l'aide des commentaires ci-dessous.
Opera 10
Le site des développeurs d’Opera a publié en janvier un article sur HTML5 contenant le support existant. Voici les fonctionnalités que l'article répertorie comme actuellement prises en charge par Opera 10:
- élément vidéo
- élément de toile
- Messagerie entre documents
- Événements envoyés par le serveur
- Formulaires Web 2.0
De plus, voici un rapport sur les spécifications Web actuelles prises en charge dans Opera Presto 2.3 (moteur de rendu d'Opera).
Google Chrome
Incapable de trouver une liste officielle directement de Google, j'ai été obligé de consulter un article d'O'reilly décrivant un discours prononcé par le vice-président de l'ingénierie de Google sur HTML5 et l'avenir des technologies Web. Dans son discours, Vic Gundotra a indiqué que ces fonctionnalités étaient prises en charge par Google Chrome (ainsi que par Firefox, Safari et Opera):
- élément vidéo
- élément de toile
- API de géolocalisation
- Cache d'application (API d'application wep hors ligne)
- API de base de données
- Web Workers (traitement des threads en arrière-plan)
La triche
Comme vous pouvez le constater, même les navigateurs qui prennent en charge le plus souvent le format HTML5 ne prennent toujours pas en charge, même de manière native, la moitié des nouvelles fonctionnalités et éléments décrits dans les articles récents. Ce qui signifie que l'utilisation de HTML5 aujourd'hui ne sera pas aussi simple que d'introduire les changements sémantiques que vous avez appris. Ce dont nous aurons besoin, c'est d'un moyen de créer les nouveaux éléments en HTML5 en utilisant uniquement les technologies Web largement utilisées et prises en charge. Il s’avère que JavaScript offre une méthode simple et native pour faire exactement cela! En utilisant document.createElement, nous pouvons créer nos propres éléments personnalisés conformes aux spécifications de ceux pris en charge en HTML5. C’est certes un peu un bidouillage, mais c’est la chose la plus proche que vous aurez pour mettre la main sur tous les nouveaux éléments dans un proche avenir. Utilisons l'exemple de notre article précédent pour voir à quoi cela ressemblerait.
Comme vous pouvez le constater, cette page utilise l'en-tête, le pied de page, l'article, l'aile, la navigation et la section des éléments exclusivement HTML5. Tout ce que nous avons à faire pour que cela fonctionne est de créer ces éléments en JavaScript:
Voila! Vous pouvez maintenant cibler ces éléments en CSS comme s'il s'agissait d'éléments natifs. Attention: cette méthode peut produire des résultats très variés et vous devez l’utiliser à vos risques et périls. Si quelqu'un visite votre site avec JavaScript désactivé, votre CSS ne résistera pas et votre joli et joli site HTML5 ressemblera à une attaque de Godzilla. Cependant, cette méthode est idéale pour vos propres expériences et devrait fonctionner avec tous les principaux navigateurs.
D'autres tests
Lors de mes propres tests, Safari et Firefox semblaient gérer tous les nouveaux éléments énumérés ci-dessus sans JavaScript. Si vous examinez le code, vous constaterez que la page de Safari 4 d’Apple utilise plusieurs nouveaux éléments HTML5 et n’implémente JavaScript que dans le cas d’Internet Explorer. Essayez ceci sur votre navigateur et faites-nous savoir ce que vous proposez!
Préparation pour HTML5
Jon Tangerine suggère sur son site que nous devrions commencer à nous préparer pour HTML5 en nous habituant à la structure inhérente aux changements sémantiques. Ce que cela signifie en pratique est assez simple: utilisez des classes pour imiter la structure d'une page HTML5.Cette méthode n'est pas spécifique au navigateur, respecte toutes les normes actuellement en vigueur, ne repose pas sur des scripts et est extrêmement facile à mettre en œuvre. Par exemple, nous prendrions toutes les balises d’entête dans le code ci-dessus et les convertirions en
Maintenant, si vous voulez vraiment vous préparer correctement à HTML5, ne vous contentez pas de lancer les termes en-tête, pied de page, section, etc. Forcez-vous à utiliser ces termes sémantiquement, comme s’ils étaient les éléments réels de HTML5. Tout d’abord, cela signifie utiliser classe au lieu de identifiant le cas échéant. Cela signifie également adhérer aux directives strictes de HTML5 en place pour chaque élément (décrites dans l'article précédent). Un exemple de ceci serait de n'utiliser qu'un nav classe sur les principales zones de navigation d’une page et non sur les liens de navigation mineurs tels que ceux trouvés dans un pied de page.
5 sites utilisant HTML5
Bien que mon avis officiel soit que HTML5 ne sera pas prêt à être utilisé avant un certain temps, je dois admirer les sites qui prennent l'initiative d'inaugurer l'avenir du développement Web en utilisant HTML5 aujourd'hui. Voici cinq sites qui font exactement cela. Il suffit de cliquer sur une photo pour voir le site. Veillez à consulter le code utilisé par chaque développeur pour avoir une idée de la structure de quelques exemples réels de HTML5. De plus, si vous avez développé un site en HTML5, nous voulons le voir! Laissez une URL dans les commentaires afin que nous puissions y accéder.
Conclusion
Voilà qui conclut notre série en quatre parties sur HTML5. Nous avons passé en revue les bases, comment utiliser quelques nouveaux éléments sélectionnés, les modifications sémantiques majeures, et comment implémenter HTML5 dès maintenant. J'espère que vous en avez appris beaucoup et que vous êtes maintenant plus excité et moins inquiet pour l'avenir du langage HTML. Vos commentaires sont déterminants pour les articles que nous avons choisis d’écrire, alors dites-nous ce que vous avez pensé de la série et ce que vous aimeriez que nous examinions plus tard.