Comment utiliser HTML5 sur votre site maintenant

De nombreux articles ont été publiés sur HTML5, tels que « À quoi s'attendre du HTML5 ? » » et « Comment HTML5 va-t-il changer le Web ? » et ainsi de suite, mais pour les développeurs Web, la principale chose à savoir est : que puis-je faire avec HTML5 maintenant et comment commencer à l'utiliser ? La bonne nouvelle est qu’il existe déjà beaucoup de choses disponibles en HTML5.

Cependant, il y a une chose que vous devez comprendre au début : vous devez connaître votre public, sinon vous ne devriez pas utiliser HTML5. Si la plupart des personnes visitant votre site utilisent IE6, vous n’avez absolument aucune raison d’utiliser HTML5. D’un autre côté, si les visiteurs de votre site utilisent tous des navigateurs mobiles, tels que les iPhones et les iPads, alors qu’attendez-vous ? Vous pouvez commencer maintenant ! Attendez, voici quelques lignes directrices, il n'est pas trop tard pour commencer après les avoir lues.

Quelles fonctionnalités HTML5 pouvez-vous utiliser maintenant ?

Bien que la norme HTML5 soit encore une ébauche et soit encore en cours de discussion entre les mains des organismes de normalisation, des parties importantes ont été implémentées par de nombreux navigateurs modernes. Apple Safari, Google Chrome, Mozilla Firefox, Opera et Microsoft IE9 prennent tous déjà en charge certaines fonctionnalités de HTML5.

Jetons d'abord un coup d'œil aux scores de chaque navigateur sur le site Web HTML5 TEST :

*Apple Safari 5.0 : 208

* Google Chrome 5.03 : 197

*Microsoft IE7 : 12

*Microsoft IE8 : 27

*Mozilla Firefox 3.66 : 139

* Opéra 10.6 : 159

Il semble évident que la plupart des navigateurs grand public qui ne sont pas le noyau d'IE prennent bien en charge HTML5 et peuvent très bien faire fonctionner les "sites Web qui utilisent le brouillon HTML5".

Revenons au début, vous pouvez désormais utiliser le doctype HTML5, il n'y a aucune raison de ne pas l'utiliser, vous pouvez même interroger et remplacer sur tout le site :

devient :

Le code suivant semble plus propre et plus simple, n'est-ce pas ? Si les navigateurs rendaient vos pages Web conformément aux normes, ils le feraient toujours.

Parlons de la vidéo. De nombreuses publications sur HTML5 mentionneront les concurrents actuels, quatre au total : Flash, H.264, OGG et WebM. Tous ces éléments pourraient devenir un format standard à l'avenir, et aucun d'entre eux ne sera lu correctement dans tous les navigateurs sur toutes les plates-formes. Malheureusement, il semble que les sponsors des navigateurs n'en aient pas préparé de sitôt pour cette fonctionnalité.

Il est donc évident que la balise Vidéo n’a pas encore atteint le stade où elle peut être appliquée. Mais attendez, il faut s'attendre à ce que la balise vidéo HTML5 soit indépendante du format. En fait, puisqu’une vidéo peut contenir plusieurs balises Source, elle doit fonctionner de cette façon. Si votre navigateur ne prend pas en charge la première option, il essaiera la deuxième, puis la troisième, la quatrième, la cinquième...

HTML pour gérer des situations comme celle-ci est un projet open source qui prend en charge la vidéo basée sur le Web sans utiliser de scripts ni de détection de navigateur et peut être trouvé ici .

Sémantiquement parlant, un grand changement dans HTML5 concerne ces balises avec une sémantique claire. Le changement que vous pouvez constater est que votre site est désormais rempli d'un code similaire à celui-ci :

En HTML5, vous pouvez l'exprimer ainsi :

La sémantique est-elle plus claire ? Bien entendu, nous devons toujours utiliser des CSS [Cascading Style Sheets] pour formater ces éléments. Mais attendez, aucune version d’IE ne prend en charge ces balises ! C'est un énorme problème pour les gens ! Sommes-nous vraiment si malchanceux ? Heureusement, nous avons une solution : il vous suffit de coller le code suivant dans la balise HEAD de votre page :

HTML5 Shiv est un projet open source basé sur une découverte simple : si vous créez un élément DOM dans IE, vous pouvez utiliser ce nom dans les styles. Par exemple, si vous utilisez

Créez un élément DOM, vous pourrez ensuite ajouter n'importe quel nombre de balises foo à la page actuelle et IE les formatera. HTML5 Shiv contient certains éléments HTML5 que IE ne peut pas reconnaître, puis les crée un par un. De cette façon, vous pouvez utiliser ces balises HTML5, par exemple :

Smart Forms, une autre fonctionnalité qui rend HTML5 plus intelligent. Si vous en avez assez d'écrire à chaque fois le même script pour vérifier la validité d'une adresse e-mail ou quelque chose comme un numéro de téléphone, une adresse Internet, etc., vous n'êtes pas seul ! Il y a une raison pour laisser le navigateur faire tout ce travail ennuyeux, n'est-ce pas ? Tout à fait vrai.

Voici la syntaxe :

Que feront ces anciens navigateurs ? La partie la plus intelligente : s'ils voient un attribut TYPE avec une valeur qu'ils ne reconnaissent pas, ils restitueront l'élément avec la valeur par défaut de Text, ce qui est exactement le résultat de compatibilité ascendante que nous attendons. Les navigateurs prenant en charge HTML5 vérifieront automatiquement ce type de champ, mais vous feriez mieux de ne pas jeter vos scripts précédents, du moins pas jusqu'à ce qu'IE9 devienne populaire.

Si vous vous demandez ce que font les navigateurs prenant en charge ces types d'actions au-delà de la validation, vous pouvez essayer ces formulaires sur votre iPhone. Vous remarquerez que le type de clavier associé au formulaire change. Parfois, il est numérique, parfois alphanumérique avec un symbole @ ajouté, et certains ont même directement une clé.com. C'est ce que sont ces éléments. Tout ce que vous avez à faire est de modifier la valeur de l'attribut type.

Cela peut aussi être un peu plus intelligent, voici un nouvel attribut :

Cette valeur peut simplement spécifier un morceau de texte, un effet que l'on voit souvent sur Internet. Ce texte s'affiche lorsqu'il n'y a pas de valeur. Lorsque vous cliquez, la valeur devient vide, et elle revient au texte lorsque vous la laissez. Dans le passé, Javascript était utilisé pour le traiter, mais désormais, le navigateur le fera pour vous.

Quelles fonctionnalités HTML5 pouvez-vous utiliser immédiatement ?

Tous les éléments HTML5 ne sont pas encore prêts à l'emploi, pour diverses raisons (dont aucune n'est abrégée par IE), la prise en charge des navigateurs sera bientôt disponible et, dans un avenir pas si lointain, vous disposerez immédiatement de deux éléments prêts à l'emploi.

Polices magiques, chaque concepteur a un rêve, en espérant que tous les visiteurs du site installeront les polices dont ils ont besoin lors de la conception. Pour ce faire, il existait autrefois diverses méthodes, notamment les images, Flash, etc., mais maintenant, elles le sont. avez ce droit et vous pouvez forcer vos visiteurs à installer les polices que vous spécifiez. C'est ce que CSS3 prend en charge : l'attribut @font-face. Les versions de Firefox antérieures à 3.5 et les versions mobiles de Safari (avant iOS 4) ne prennent pas en charge cet attribut. Si votre site reçoit de nombreuses visites similaires, vous devrez peut-être attendre.

Quoi qu’il en soit, il n’y a aucune raison réelle pour que tous les navigateurs utilisent la même police. Si vous souhaitez fournir des polices personnalisées aux navigateurs qui prennent en charge cet attribut, puis fournir une police alternative aux navigateurs qui ne prennent pas en charge cet attribut, c'est également une bonne solution pour le moment, http://www.fontsquirrel com/. fontface/generator est un bon endroit où aller.

Les ombres et les coins arrondis font le bonheur de nombreux concepteurs. Les ombres de texte, les ombres de bloc, les coins arrondis de bloc, etc. sont désormais des normes prises en charge par CSS3. Encore une fois, si vous ne souhaitez pas mesurer le rendu dans différents navigateurs en fonction de la perfection des pixels, vous pouvez commencer à utiliser ces fonctionnalités dès maintenant. Les générateurs CSS3 vous aideront à le faire.

Quelles fonctionnalités pourriez-vous utiliser un jour ?

Ce catalogue contient des fonctionnalités auxquelles les développeurs et les concepteurs réfléchissent depuis des années. Malheureusement, il faudra peut-être encore plusieurs années avant de pouvoir les utiliser dans le monde réel.

Les formulaires intelligents ont déjà été mentionnés, mais en fait, il existe de nombreux autres éléments utiles qui n'ont pas été mentionnés, mais avant une prise en charge plus large, il n'y a aucun moyen de les utiliser.

Sélecteur coulissant :

Sélecteur de couleurs :

Sélecteur de dates :

Zone de saisie avec validation régulière :

Champs de saisie obligatoires :

Aucune de ces balises ne prend en charge plusieurs navigateurs ou plusieurs plates-formes, mais le moment venu, vous aurez certainement hâte d'utiliser ces balises.

Les mises en page imprimées, une autre fonctionnalité CSS3, prendront encore des années avant d'être pleinement mises en œuvre. Fournit aux concepteurs des fonctionnalités de mise en page multi-colonnes. Actuellement, il ne peut être implémenté que dans les cas de test de Firefox et Safari.

Détection de géolocalisation, avec la croissance des services de localisation tels que Gowalla et Foursquare, il est utile pour les navigateurs de savoir où se trouve l'utilisateur. Il n’est donc pas surprenant que les navigateurs mobiles basés sur les téléphones mobiles soient les premiers à implémenter cette fonctionnalité. Firefxo 3.5 et Safari 5 ont déjà commencé à prendre en charge la géolocalisation. (Un service similaire de Chrome est implémenté via Gears, mais il migre progressivement vers HTML5).

Travaillez hors ligne et stockez localement Le stockage des données dans le cloud est une excellente idée lorsque vous ne réalisez pas que vous n'avez pas de connexion Internet ou que vous disposez d'une application qui doit traiter de grandes quantités de données et doit s'exécuter fréquemment sur le cloud. serveur. La communication avec les clients est plus facile que vous ne le pensez. Comme si vous en aviez plus ; ou peut-être que vos données mobiles sont limitées et que vous souhaitez stocker plus de données sur votre téléphone pour éviter trop de perte de données, la solution pour le moment est d'utiliser le stockage local pour faire fonctionner l'application hors ligne. au cloud une fois connecté.

Les navigateurs prenant en charge cette fonctionnalité sont : Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+.

Plans de travail, animations et effets de transformation, l'une des promesses du HTML5 peut être réalisée en utilisant l'élément Canvas et certaines propriétés CSS3 pour réaliser un site Web entièrement illustré et entièrement animé. Il s'agit de la norme du 12 juillet 2010.

Vert = atteint, rouge = non prévu

Raccourcis vers HTML5 de pointe

Si vous ne pouvez pas attendre la mort d'IE8, il existe de nombreuses façons de l'ignorer et de passer à autre chose - encore une fois, tout dépend de vos visiteurs. Jetez un œil aux journaux d'accès de votre site pour voir quels en-têtes de navigateur sont les plus visités. Une façon de procéder consiste, par exemple, à utiliser Chrome Frame de Google pour intégrer une instance Chrome dans IE. Si vous comprenez que les visiteurs de votre site peuvent avoir installé GCF [Google Chrome Frame], vous pouvez l'ajouter à votre HEAD. La balise META sur la ligne précédente oblige IE à utiliser GCF pour afficher votre site Web :

[Éditeur : Mais je voudrais vous rappeler que cela invalidera le mode de compatibilité IE7 d'origine de IE=7. Veuillez le peser vous-même si vous le souhaitez. ]

Couplé à un court script fourni par Google, qui permet aux utilisateurs qui n'ont pas installé GCF d'accéder à la page d'installation de GCF, vous pourrez peut-être ignorer les restrictions d'IE. [Editeur : je suis fou, cela ressemble à de la publicité gratuite pour GCF pour générer du trafic gratuit...]

Les éléments répertoriés dans cet article ne représentent qu'une petite partie des brouillons HTML5 et CSS3 actuels. Si vous devez utiliser certaines des nouvelles fonctionnalités, il est nécessaire de vérifier les projets open source existants afin de pouvoir minimiser les problèmes de compatibilité du serveur. .

Lorsqu'ils parlent du HTML, de nombreux médias se concentrent sur sa position, comme "pas avant 2022" et "Flash killer". La réalité est que HTML5 est une mise à jour très attendue et complètement nouvelle du HTML4 tant attendu - vous pouvez donc commencer à l'utiliser dès aujourd'hui.