Html5 mais votre navigateur ne le prend pas en charge. Qui est le moteur du HTML5 ? HTML5 va-t-il supplanter Adobe Flash ?

Après tout ce qui a été dit, vous vous poserez sûrement la question « comment puis-je savoir si mon navigateur prend en charge la nouvelle version ?HTML? C'est une bonne question qui nécessite une réponse rapide. Après tout, avant de tester de nouvelles fonctionnalités et d’envisager de nouvelles balises, vous devez d’abord savoir si cela est possible. Par exemple, HTML 5 prend en charge la vidéo ou les graphiques. Cependant, cela ne sert à rien d’essayer d’intégrer une vidéo dans une page si elle n’est pas prise en charge par programme.

Heureusement, il existe une bonne ressource sur Internet -HTML 5 test. com ce qui vous aidera dans cette situation. Il analysera les données de votre navigateur et vous indiquera quelles sont les nouvelles balises de version.HTML5 pris en charge par le navigateur et lesquels ne le sont pas. Ici, vous pouvez également consulter de brèves informations sur d'autres navigateurs, comparer les données et tirer les conclusions appropriées.

Par exemple, lors du test d'un navigateurMozillaFirefox 8.0 pour le système d'exploitation UbuntuCanonique 1.0 via le site Web www.HTML 5 test. com le nombre total de points était de 330 (+ 9 points bonus) sur 475 (tableau 8.1).

Ce n'est pas grand chose comparé au navigateurGoogleChrome16.0, qui compte 373 points (+15 points bonus). Mais beaucoup par rapport au navigateurMicrosoftInternetExplorateur9, qui totalise 141 points (+ 5 points bonus) (Tableau 8.2).

Dans le tableau 8.1. des exemples de ces innovations qui présentent des lacunes sont donnés. Les technologies présentées en anglais sont en cours de développement ou ont été développées par W 3C. Le site Web de l'analyseur contient également des liens vers des pages pertinentes. Tous les autres points introduits dans HTML 5 sont entièrement pris en charge par le navigateur ci-dessus.

Tableau 8.1

Données du navigateur Mozilla Firefox 8.0

Tableau 8.2

Données du navigateur

Dans le tableau 8.2 affiche les données des navigateurs des ordinateurs personnels. Mais n'oubliez pas les tablettes, les navigateurs sur téléphones mobiles et les anciens navigateurs que les gens peuvent également utiliser. Des informations les concernant sont également fournies sur le site ci-dessus.

D'une manière ou d'une autre, un vrai développeur Web n'écrira jamais de programme pour un navigateur spécifique, sachant que son idée ne fonctionnera pas dans d'autres. Sauf bien entendu indication contraire dans les termes de référence, et si vous souhaitez que l’œuvre soit visible par tous.

C'est pourquoi, Si vous décidez de créer quelque chose d'incroyable, assurez-vous de répondre à la question « dans quels navigateurs cela fonctionnera-t-il ? et alors seulement, après avoir pesé le pour et le contre, se mettre au travail.

Maintenant, Maintenant que vous avez compris l'importance de vérifier la compatibilité de votre navigateur avec le nouveau standard HTML 5, examinons quelques nouvelles fonctionnalités, à savoir l'interaction avec les informations vidéo et audio.

Beaucoup d'entre vous savent qu'Internet se remplit rapidement de sites, blogs et autres ressources créés sur la base de HTML5, même si HTML5 lui-même est encore au stade de développement, la spécification n'a pas encore été approuvée et on ne sait pas exactement quand cela va arriver. Eh bien, puisque c’est le cas, cela ne ferait pas de mal de savoir dans quelle mesure les navigateurs les plus courants et les plus populaires prennent actuellement en charge HTML5.


Partant du fait que les navigateurs les plus populaires ou simplement fréquemment utilisés à l'heure actuelle sont Internet Explorer, Google Chrome, Mozlilla Firefox, Opera, Safari et plus encore... Maxthon, évaluons le niveau Prise en charge HTML5 ces navigateurs populaires. Pour évaluer et attribuer une note, nous utiliserons le service le plus simple, le plus pratique et gratuit, le test HTML5. Ce service évalue la prise en charge du navigateur pour HTML5 en points et points bonus. Le score maximum est de 500 et les points bonus sont de 15. À l'avenir, si de nombreux nouveaux tests sont ajoutés, ces valeurs pourront être augmentées. Remarque : les points bonus sont attribués pour la prise en charge des éléments audio et vidéo, ainsi que pour la prise en charge de SVG et MathML, et les points bonus ne sont pas ajoutés au total des points.

Eh bien, commençons par l'examen. Les navigateurs seront classés par ordre décroissant.

1 - Maxthon

La première place, aussi étrange que cela puisse paraître pour certains, revient à... oui, le navigateur multiplateforme Maxthon (version 4.0.6) !
Il obtient 476 points et un maximum de 15 points bonus !

Maxthon a reçu des points bonus pour : l'analyse SVG et MathML (+2), la prise en charge des codecs vidéo (+8) et des codecs audio (+5).

Si vous n'êtes toujours pas familier avec le navigateur Maxthon, il est temps de l'essayer. Il fonctionne sous Windows, Android, Mac, iPhone et iPad, il existe une interface parfaitement russifiée, tant du navigateur Maxthron lui-même que de son site Internet). Vous ne le regretterez certainement pas même si ce navigateur n'est pas votre navigateur principal, et vous aurez plus de respect pour les Chinois, ses créateurs :)

2 - Google Chrome

La deuxième place avec un très petit écart par rapport au leader revient à Google Chrome (version 27.0) !
Il obtient 463 points et 13 points bonus.

Google Chrome a reçu des points bonus pour : l'analyse SVG et MathML (+2), la prise en charge des codecs vidéo (+6) et des codecs audio (+5).

Contrairement à Maxthon, il prend en charge les sous-titres, mais ne prend pas en charge les attributs de microdonnées dans les balises.

3 - Opéra

En troisième position se trouve le navigateur suédois, apprécié par de nombreux habitants de l'espace post-soviétique, Opera (version 12.15).
Il obtient 404 points et 9 points bonus.

Points bonus attribués à Opera pour : l'analyse SVG et MathML (+2), la prise en charge des codecs vidéo (+4) et des codecs audio (+3).

Contrairement à Google Chrome et Maxthon par exemple, Opera ne prend pas en charge le format audio MP3.

4 - Mozilla Firefox

Mozilla Firefox (version 21.0) occupe la quatrième place. C'est dommage qu'il soit encore en retard sur Opera, ne serait-ce que de 5 points environ, car c'est mon navigateur principal avec lequel je travaille et me détends. Même s'il compense son retard en points bonus.
Il obtient 399 points et 14 points bonus.

Points bonus attribués à Mozilla Firefox pour : l'analyse SVG et MathML (+2), la prise en charge des codecs vidéo (+6) et des codecs audio (+6).

Comme Opera, il ne prend malheureusement pas encore en charge le format audio MP3 populaire.

5 - Microsoft Internet Explorer

À la cinquième place, avec un énorme retard par rapport aux sommets, se trouve Internet Explorer (version 10.0). Par exemple, pour moi ce n'est pas étrange, au contraire, c'est plus étrange qu'il ne soit pas à la dernière place :)
Il obtient 320 points et 6 points bonus.

Pour IE 10, des points bonus sont attribués pour : l'analyse SVG et MathML (+2) et faible, mais toujours au moins une certaine prise en charge des codecs vidéo (+2) et des codecs audio (+2).

6 - Safaris

À la dernière sixième place de notre revue, avec un énorme retard par rapport aux sommets, et même par rapport à IE 10, se trouve Safari (version 5.1.7). Je n'avais encore rien de MAC OS sous la main, j'ai donc vérifié uniquement la dernière version de Safari pour Windows.
Il obtient 278 points et 2 points bonus.

Les points bonus sont attribués uniquement pour l'analyse de SVG et MathML (+2).

Pour la vidéo et l'audio, Safari n'a aucun support (du moins pour cela, la dernière version de Windows). Associé à IE10, ce Safari ne prend pas du tout en charge l'accès à la webcam, mais les 4 meilleurs navigateurs de cette revue offrent une telle prise en charge.

Épilogue

Il s'agit du classement de la prise en charge de HTML5 parmi les navigateurs fréquemment utilisés ou les plus populaires. Bien sûr, quelque chose pourrait changer dans un avenir proche. Les navigateurs sont périodiquement améliorés et de nouvelles versions sont publiées. Certes, à mon humble avis, vous ne devriez pas vous fier à IE et Safari, compte tenu de leurs «tentatives» actuellement inutiles. Et pourquoi, parce que le TOP 4 sont d’excellents navigateurs multiplateformes gratuits. C'est probablement dommage pour les fans d'Opera qu'il ait pratiquement arrêté de développer son moteur pour Windows.

Sur le site html5test.com (auteur : Niels Leenheer) vous pouvez à tout moment tester presque tous les navigateurs (et différentes versions), même « faits maison », pour leur support HTML5. Vous y verrez également des rapports et des tableaux plus détaillés avec les évaluations des navigateurs que vous n'avez pas, ou des versions déjà obsolètes ou non prises en charge par votre système d'exploitation (cela s'applique dans une plus grande mesure à IE, qui s'est accroché à Windows). comme une coche, et qui sans mises à jour du système lui-même ne peut apparemment pas être « promu »).

Les commentaires dans les commentaires sur les navigateurs présentés dans cette note sont les bienvenus !

Dernièrement, j'ai commencé à recevoir des questions avec une régularité enviable qui se résument à une chose : " ". De plus, j'ai commencé à voir un grand nombre de clients de mise en page qui exigent que tout soit écrit en HTML5. Et pour qu'il y ait moins de telles questions et qu'il n'y ait pas de clients illettrés (dont se réjouissent toujours toutes sortes d'escrocs indépendants, se rendant compte que le client ne comprend rien), j'ai décidé de répondre à la question, pourquoi HTML5 ne fonctionne pas.

Tout est très, très simple. Depuis HTML est un langage client, il est donc exécuté par le navigateur. Mais les développeurs de navigateurs ne peuvent pas ajouter immédiatement toutes les nouvelles balises et fonctionnalités ; cela prend beaucoup de temps, voire beaucoup.

De ce qui précède, il résulte que HTML5 ne fonctionne pas car il n'est tout simplement pas encore pris en charge par les navigateurs. Mais cette technologie est introduite progressivement et de nombreuses balises peuvent déjà être utilisées. Vous pouvez vérifier le niveau d'avancement de votre navigateur HTML5, ici : tester le navigateur pour la prise en charge HTML5. Mon navigateur ( Firefox 15.0.1) tapé 346 points, ce qui, bien entendu, est très loin d’être pleinement soutenu. Et j'ai la dernière version Firefox. Je pense que la situation n'est pas meilleure dans les autres navigateurs modernes.

N'oubliez pas non plus que même dans quelques années, tous les navigateurs modernes prendront entièrement en charge HTML5, il y aura encore une très grande proportion de personnes qui utiliseront des navigateurs plus anciens. Que faire avec eux ? Pour réduire le nombre de victimes, environ HTML5 Je vais devoir l'oublier pendant encore quelques années. Et ce n’est qu’alors qu’il sera possible de réaliser une mise en page en utilisant cette technologie.

J'espère que vous comprenez maintenant que vous pouvez bien sûr étudier HTML5, mais vous ne pourrez pas l’utiliser à son plein potentiel ni comme formation ni pour une utilisation pratique.

J'espère vraiment que le nombre de victimes d'escrocs en freelance va diminuer (c'est trop écrit dans le portfolio de beaucoup d'entre eux" Mise en page en HTML5 pur", ce qui est faux).

Ceci n’est pas un article destiné aux super gourous des webmasters. Et même pas pour les développeurs Web débutants. Cet article était destiné à rappeler HTML5 aux journalistes et aux analystes.

Ici, les journalistes, rédacteurs et autres non-spécialistes dans le domaine de la conception Web trouveront des réponses à leurs questions urgentes, qui ont simplement besoin de connaître les principes de HTML5 pour travailler, mais n'ont pas la possibilité d'approfondir les détails techniques de son utilisation. langue merveilleuse.

Il est également important de ne pas oublier que le soi-disant « HTML de démonstration » n'a absolument rien de commun avec le HTML5 lui-même. Par exemple, de nombreux Google Doodles utilisent la technologie DHTML - HTML 4 du début des années 2000.

Pourquoi HTML5 a-t-il été inventé ?

HTML4 était plein à craquer sous la pression de nouveaux types d'applications. De nombreuses choses n'étaient tout simplement pas disponibles et nécessitaient des plugins comme Adobe Flash ou Microsoft Silverlight. Il fallait recourir à toutes sortes de trucs et astuces, utiliser des techniques non standards et non documentées, ce qui n'était pas une base très fiable pour les sites créés pour gagner de l'argent.

Combien de navigateurs prennent en charge HTML5 ?

Cela dépend de la façon dont vous le regardez. Si nous supposons que HTML5 a évolué à partir de HTML4, alors tous les navigateurs prennent en charge certaines propriétés HTML5.

En revanche, si vous souhaitez savoir quels navigateurs contiennent toutes les propriétés du noyau HTML5, alors aucun. Ils implémentent tous certaines parties de la spécification (qui fait plus de 700 pages), mais aucun ne prend en charge tout en même temps.

Si nous ignorons tous les éléments non essentiels, alors tous les navigateurs modernes prennent en charge HTML5 à peu près de la même manière, bien qu'ils ajoutent la prise en charge de certaines propriétés à des moments différents.

Qui est le moteur du HTML5 ?

Tout a commencé en 2004, à Opera, sous la direction de Ian Hickson. Petit à petit, d’autres navigateurs se sont joints à nous. Hickson a quitté Opera pour Google, où il continue de travailler sur la spécification.

Il est juste de dire que les fournisseurs de navigateurs coordonnent le travail sur la spécification, tout comme le W3C et de nombreuses autres organisations et individus. De manière générale, le processus dépend des besoins des développeurs Web.

Qui utilise HTML5 ?

De nombreuses personnes et entreprises : le journal Boston Globe ; Nationwide Building Society, Yell.com et des centaines d’autres. HTML5gallery.com contient de nombreux sites utilisant les technologies HTML5.

Quand le HTML5 sera-t-il terminé ?

Peut-être en 2012. Ou peut-être en 2022. Ce n’est pas si important, une autre chose est importante : il est déjà pris en charge par les navigateurs aujourd’hui et, par conséquent, nous pouvons l’utiliser aujourd’hui.

Dire que nous ne pouvons pas utiliser HTML5 parce que son développement n’est pas terminé revient à dire que nous ne pouvons pas parler russe parce qu’il est encore en développement.

Est-il vrai que HTML5 est incompatible avec Internet Explorer ?

Un non-sens absolu. IE9 prend bien en charge HTML5. Les navigateurs plus anciens peuvent ajouter la prise en charge de certaines API à l'aide des plugins JavaScript polyfilling, Flash et Silverlight. L'élément canvas peut ne pas fonctionner correctement dans les versions d'IE inférieures à 9. Le problème dans les navigateurs plus anciens est principalement dû à la lenteur du moteur JavaScript. Pour afficher la vidéo dans les anciens navigateurs, vous pouvez utiliser l'option de sauvegarde Flash.

Il convient de noter que de nombreuses fonctionnalités HTML5, telles que l'attribut contenteditable, qui permet à l'utilisateur de modifier le contenu d'un objet, ont été inventées par Microsoft et incluses dans IE5.

Est-il vrai que HTML5 est conçu pour les appareils mobiles ?

Absolument pas. HTML5 repose sur certains principes de développement, dont l'un affirme son utilisation généralisée :

"Les éléments doivent être conçus pour une utilisation omniprésente... Les éléments doivent, dans la mesure du possible, fonctionner sur toutes les plates-formes, appareils et médias."

D’un autre côté, certaines fonctionnalités du HTML5 sont particulièrement utiles compte tenu de l’utilisation des appareils mobiles. Si l’on considère le « vrai » HTML5, il sera très utile, par exemple, de pouvoir continuer à travailler avec le site hors ligne grâce à la technologie Application Cache (« Appcache »).

Un autre avantage est la possibilité d'utiliser l'élément canvas pour afficher une animation sur des appareils qui, pour une raison ou une autre, ne peuvent pas utiliser Flash.

Si l’on considère HTML5 dans le sens des « nouvelles technologies du super-web », alors la géolocalisation constitue un énorme avantage.

HTML5 va-t-il supplanter Adobe Flash ?

Non, du moins je l'espère. Pendant de nombreuses années, Flash est resté la seule option permettant d'intégrer une vidéo sur une page. Aujourd’hui, avec l’avènement du HTML5, il existe une rivalité entre les deux technologies, ce qui est formidable pour les développeurs.

Apple a décidé de ne pas activer le support Flash sur ses appareils iOS, ce qui donne un énorme coup de pouce à la vidéo HTML5. Cependant, il convient de noter qu’iOS n’est pas la meilleure plateforme pour HTML5.

Flash reste dans tous les cas un outil multi-navigateurs utile. De plus, vous devez comprendre que Flash est bien plus qu’une simple vidéo. Certaines de ses fonctions simples utilisées dans les jeux sont interceptées par le canevas HTML5, et certaines des animations primitives pour lesquelles il était auparavant utilisé ont migré vers CSS3. Cependant, pour des raisons de commodité pour les créateurs d'animations fines utilisées dans les jeux et les dessins animés, il est bien entendu préférable d'utiliser Flash, qui possède une interface beaucoup plus pratique qui simplifie de nombreux moments de travail pour les développeurs. Au fil du temps, lorsque des coques pratiques pour travailler avec la toile seront développées, cela changera, mais pas aujourd'hui ni demain.

Commentaires

1. Emelia
   4 octobre 2011 à 22h29

   html1 *POUCE LEVÉ*

   Réponse d'Olga :
   5 octobre 2011 à 11h26

   Réponse de Wdtime.ru :
   20 février 2016 à 22h32

   Liste complète des balises structurelles HTML 5 - wdtime.ru/blog/strukturnye-tegi-html-5

2. margarita
   5 octobre 2011 à 14h01

   Emelya est une idiote, tu n'as pas lu des contes de fées ? :-D

3. Bagels
   25 novembre 2011 à 14h47

   C'est dommage que certains utilisateurs ne comprennent pas qu'il existe de meilleurs navigateurs qu'Internet Explorer :(

   Réponse d'Olga :
   25 novembre 2011 à 16h03

   À propos, ie a récemment fait de très bons progrès en termes de prise en charge de nouvelles spécifications. Apparemment, ils se sont pris la tête après que les utilisateurs de Windows aient eu le choix entre plusieurs navigateurs :-D

   Réponse de Bagel :
   25 novembre 2011 à 16h11

Avant d'apprendre de nouvelles balises, vous devez vous familiariser avec les outils de prise en charge des balises du navigateur. Pour vérifier la balise, vous pouvez utiliser un htmlbook avec des illustrations :

Prise en charge de la balise centrale dans les spécifications HTML

Il est clair que l'étiquette

dans la spécification 5.0, il n'est pas pris en charge (rose) et dans la spécification 4.01, il était partiellement pris en charge (jaune). À propos, vous devez maintenant utiliser CSS pour aligner les blocs et les images.

Recommandation de ne pas utiliser la balise center dans le code html5

Ainsi, en utilisant ces ressources, vous pouvez naviguer dans l'utilisation correcte des balises et leur prise en charge depuis les navigateurs.

Regardons les nouveaux éléments introduits.

Balise audio

Étiqueter

Si la balise n'est pas prise en charge, un message s'affichera à l'intérieur de la balise vous demandant de télécharger directement le fichier.

Téléchargez de la musique. La balise audio n'est pas prise en charge par votre navigateur..

Télécharger de la musique

• Les attributs décrits dans l'exemple :
• commandes – afficher le lecteur. Si vous ne les précisez pas, nous jouerons de la musique sans pouvoir l'éteindre
• autoplay – lecture automatique après le chargement, n’utilisez pas cet attribut sauf en cas d’absolue nécessité

boucle – lecture en boucle

Veuillez noter que l'apparence du lecteur varie d'un navigateur à l'autre.

Balise vidéo

La balise vidéo n'est pas prise en charge par votre navigateur. Téléchargez la vidéo.> "video/ogg; codecs="theora, vorbis""> "vidéo/mp4; codecs="avc1.42E01E, mp4a.40.2""> "vidéo/webm; codecs="vp8, vorbis""

La balise vidéo n'est pas prise en charge par votre navigateur. Téléchargez la vidéo.

Les attributs sont similaires à une balise

Cette balise est utilisée pour créer des blocs avec de la vidéo en arrière-plan.

Utilisé pour dessiner en HTML5. L'utilisation du canevas a permis d'abandonner la technologie Flash. Le dessin est réalisé à l'aide de JavaScript. Utilisation des balises vous apprendrez dans les leçons JS.

Votre navigateur ne prend pas en charge le dessin.

Votre navigateur ne prend pas en charge le dessin.

Balise de liste de données

Utilisé pour créer des listes déroulantes intelligentes. Duplique la fonctionnalité de la liste déroulante, mais y ajoute la possibilité de rechercher des éléments par les lettres incluses dans les mots et de saisir votre propre option. Idéal pour une utilisation sur des listes dont les éléments sont connus à l’avance.

Malheureusement, la prise en charge du navigateur est très limitée. De plus, les navigateurs d’aujourd’hui démontrent un comportement complètement différent avec cet élément. Pour l’instant, vous devriez vous abstenir de l’utiliser.

Balise de détails

Permet de créer un bloc qui s'ouvre lorsque vous cliquez dessus. Utilisé conjointement avec une balise

, qui spécifie l'élément déroulant.

Informations sur l'auteur Bender Rodriguez

La prise en charge de cette balise est partielle, de ce fait, à ce stade il est préférable d'utiliser des solutions basées sur JS ou jQuery.

Compteur d'étiquettes

Utilisé pour visualiser des plages de valeurs. Exemple d'application :

Faible Normale chaudEau bouillante

Vous permet de définir la valeur minimale et maximale de la plage, les valeurs considérées comme faibles et élevées et la valeur actuelle. Peut être contrôlé à l’aide de JS. Un bon outil pour une visualisation simple.

balise de navigation

La balise sert à indiquer la navigation principale du site. Contient une liste à l’intérieur de lui-même (bien qu’il puisse y avoir d’autres éléments). Exemple: