Puisqu'il s'agit de notes, je listerai uniquement le titre et les caractéristiques grammaticales de chaque entrée. Je n'ai pas le temps d'écrire des explications détaillées et des exemples exécutables pour le moment, mais je donnerai les adresses des documents pertinents. ceux qui prennent déjà en charge cette fonctionnalité. Les navigateurs fourniront également des implémentations alternatives/transitoires pour les navigateurs non pris en charge. Eh bien, c'était à l'origine une note que j'ai prise en privé. J'aime particulièrement prendre des notes sur Evernote. Bien que la dernière fois que j'ai vu l'article du professeur Lewu, j'ai dit que mon âge actuel venait d'entrer dans la période de pointe de la mémoire... mais moi-même. la confiance en prend encore un coup ! Par exemple, lorsque je discutais avec d'autres de ce que le clown avait dit au procureur de l'hôpital dans The Dark Knight qui l'avait transformé en Two-Face, je ne me souvenais pas d'une seule ligne de dialogue et quel était le nom du personnage lorsque Penny jouait Age. de Conan dans Big Bang Theory S2 ? "Queen Penelope", j'ai été tellement impressionné quand je l'ai vu que je ne me souvenais même pas de l'Odyssée un mois plus tard. Je me sens toujours plus à l'aise lorsque je laisse des notes... Ah, je suis encore hors sujet.
Cet article a compilé certaines des nouvelles normes les plus importantes (ou relativement populaires). Bien que la plupart d'entre elles soient encore des ébauches du w3c et soient encore au début du niveau Recommandation, elles sont devenues très recherchées dans la nouvelle série de normes. Dans la guerre des navigateurs Celebrity, un grand nombre de démos et de packages API associés ont émergé dans la communauté des développeurs, et certains sont entrés dans l'environnement de production (comme l'application hors ligne Gmail de Google sur iPhone. En fait, je pense que dans le domaine du Web d'aujourd'hui). la transition de la technologie propriétaire du fabricant au cycle de conversion des normes du comité en technologies à usage général pour produire des applications tueuses a été considérablement accélérée. Est-ce parce que la demande d'applications Web est trop élevée maintenant... MISE À JOUR : . J'ai soudainement pensé en publiant un article doux sur solidot tout à l'heure. Comprendre comment exprimer ce problème : en fait, de nombreux fabricants de navigateurs sont également des développeurs d'applications basées sur les navigateurs et des normalisateurs du Web, tout comme les ingénieurs qui construisent la scène sont également des acteurs sur la scène et les metteurs en scène des mouvements de danse, alors Google, Mozilla et Apple ne ménagent aucun effort pour mettre en œuvre des standards techniques propices au développement d'applications web. Même s'ils sont encore au stade de travail du W3C, l'équipe d'IE manque effectivement de motivation. l'économie planifiée manque de vitalité XD...
Comme il est dérivé de notes, je listerai uniquement le titre et les caractéristiques grammaticales de chaque entrée. Je n'ai pas le temps d'écrire des explications détaillées et des exemples exécutables pour le moment, mais je donnerai l'adresse du document concerné. En plus de répertorier les navigateurs pris en charge avec cette fonctionnalité, elle fournira également des implémentations alternatives/transitoires pour les navigateurs qui ne la prennent pas en charge.
===================La ligne de démarcation où se termine l'absurdité======================= ==
Détection du type de média pour l'intégralité du fichier CSS du lien externe et une partie du code CSS La raison de sa grande popularité est évidemment due aux appareils mobiles...
Standards w3c : http://www.w3.org/TR/css3-mediaqueries/
Documentation MDC : https://developer.mozilla.org/En/CSS/Media_queries
Documentation Opera : http https://www.opera.com/docs/specs/css/
Prend en charge : Firefox 3.5, Safari 3, Opera 7
déformation CSS, certaines personnes utilisent ce plug-in jquery pour obtenir un effet pseudo 3D et un effet de rotation
Standard w3c : http://www.w3.org/TR/css3-2d-transforms/
Documentation MDC : https://developer.mozilla.org/En/CSS/CSS_transform_functions
blog webkit Introduction : http://webkit.org/blog/130/css-transforms/
Support : Firefox 3.5, Safari 3.1
Alternative/Transition : Filtre matriciel IE5.5 http://msdn.microsoft.com/en-us/library/ms533014(VS .85).aspx
L'animation CSS très attendue, une ébauche proposée par l'équipe du webkit, la transition implémente des dégradés d'attributs simples et l'animation définit des effets d'animation plus complexes
Standard w3c : http://www.w3.org/TR/css3-transitions/
Standard w3c : http://www.w3.org/TR/css3-animations/
blog webkit Introduction : http://webkit.org/blog/138/css-animation/
Introduction de son camarade de classe John : http://ejohn.org/blog/css-animations-and-javascript/
Support : Safari 3.1
Pouvoir intégrer n'importe quelle police dans une page Web est le rêve de tout concepteur... mais les seules polices prises en charge ici sont truetype et opentype
Norme w3c : http://www.w3.org/TR/css3-fonts/#font-resources
Documentation MSDN : http://msdn.microsoft.com/en-us/library/ms530303( VS.85).aspx
Documentation MDC : https://developer.mozilla.org/en/CSS/@font-face
Prend en charge : Firefox 3.5, Safari 3.1, Opera 10.0, IE4.0
Documents maintenus par les étudiants ppk : http://www.quirksmode.org/css/contents.html
Documents maintenus par css3.info : http://www.css3.info/modules/selector-compat/
Une page de test : http://westciv.com/iphonetests/
Stockage persistant simple sous forme de paires clé-valeur
Standard w3c : http://www.w3.org/TR/webstorage/
Liste de compatibilité maintenue par les camarades de classe ppk : http://www.quirksmode.org/dom/html5.html#localstorage
Documentation MDC : https://developer.mozilla.org/en/DOM/Storage
Documentation MSDN : http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx
Prend en charge : Firefox 3.5, Safari 4.0, IE 8.0
Utilisez un fichier manifeste pour mettre en cache les ressources statiques (images, CSS, js, etc.) pour une utilisation hors ligne et des données non structurées
Standards w3c : http://www.w3.org/TR/offline-webapps/#offline
Documentation MDC : https://developer.mozilla.org/en/Offline_resources_in_Firefox
Support : Firefox 3.5
La base de données locale, prenant en charge SQL, a été implémentée pour la première fois par Google Gears. L'éditeur du brouillon actuel du w3c est également un ingénieur de Google... Mais étrangement, l'API Gears n'est même pas compatible avec le brouillon actuel. le Gears fourni. L'API de la base de données a supprimé l'API html5 implémentée par webkit... Et lorsque Google a implémenté la fonction gmail hors ligne sur l'iPhone, il a également utilisé l'API webkit... C'est vraiment déroutant...
Standard w3c : http://www.w3.org/TR/offline-webapps/#sql
Introduction au blog webkit : http://webkit.org/blog/126/webkit-does-html5- client-side-database-storage/
documentation iPhone : http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3 - SW1
Prise en charge : Safari 3.1
Alternative/Transitionnelle : Gears http://code.google.com/p/gears/wiki/Database2API
Plusieurs threads, effectuent des opérations complexes en arrière-plan, ne peuvent pas faire fonctionner DOM, communiquent entre les threads via des événements de message
Norme w3c : http://www.w3.org/TR/workers/
Document MDC : https://developer.mozilla.org/En/Using_web_workers
Support : Firefox 3.5
Alternative/Transitionnelle : Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal
API Géo
Norme w3c : http://www.w3.org/TR/geolocation-API/
Documentation MDC : https://developer.mozilla.org/En/Using_geolocation
Supporté : Firefox 3.5
Alternative/Transitionnelle : Gears http://code.google.com/p/gears/wiki/GeolocationAPI
Événement de drag natif
Norme w3c : http://www.w3.org/TR/html5/editing.html#dnd
Document MDC : https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
apple Documentation : http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html#//apple_ref/doc/uid/30001233
Prend en charge : Firefox 3.5, Safari 2.0, Chrome 1.0, IE 5.0
L'avantage de l'utilisation de balises HTML pour intégrer de la vidéo et de l'audio n'est pas le "format open source", mais "l'ouverture", qui permet au multimédia d'interagir avec d'autres éléments de la page, ou d'utiliser la technologie des pages pour "mashup" avec la vidéo. sorte de combinaison aléatoire La capacité d'interagir avec RIA est la pierre angulaire de la prospérité de la technologie Web, et c'est aussi la plus grande lacune des conteneurs RIA fermés comme Flash.
Documentation MDC : https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
Introduction au blog Webkit : http://webkit.org/blog/140/html5-media-support/
Prise en charge : Firefox 3.5, Safari 3.0, Chrome 3.0
Alternative/Transition : intégration imbriquée avec balise vidéo http://hacks.mozilla.org/2009/06/html5 - vidéo-fallbacks-markup/
Inventé par Apple et utilisé pour la première fois dans les tableaux de bord, actuellement la technologie d'image js grand public, Mozilla implémente déjà la norme OpenGL ES Canvas 3D. De plus, on dit que l'équipe IE a fait beaucoup de travail pour prendre en charge Canvas. . En fait, l'API Canvas est assez bas niveau Surtout en termes d'interaction, elle n'est pas aussi intuitive que SVG, donc il existe de nombreuses bibliothèques qui l'encapsulent
.Documentation MDC : https://developer.mozilla.org/en/Canvas_tutorial
Prise en charge : Firefox 1.5, Safari 2.0, Chrome 1.0, Opera 9.0
Alternative/Transition : excanvas.js http://code.google.com/p/explorercanvas/
Standard w3c : http://www.w3.org/TR/SVG12/
Tutoriel IBM DW : http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id =84896
Supports : Firefox 1.5, Safari 3.0, Chrome 1.0, Opera 9.0
Alternative/Transition : raphael.js http://raphaeljs.com/
Principalement pour augmenter les capacités et les événements inter-domaines pendant le processus de demande
Standard w3c : http://www.w3.org/TR/XMLHttpRequest2/
Documentation MDC : https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest (XDR)
Documentation MSDN : http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx
Prise en charge : Firefox 3.5 (partiellement implémenté), IE 8.0 (partiellement implémenté)
Le contrôle d'accès inter-domaines tant attendu. Il existe actuellement quelques différences entre Firefox 3.5 et IE8. Je ne sais pas si les XDR et XDM développés par IE8 sont prêts à être soumis au w3c pour normalisation...
Norme w3c : http://www.w3.org/TR/cors/
Document MDC : https://developer.mozilla.org/En/HTTP_Access_Control
Messagerie multidocument (XDM)
Documentation MSDN : http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx
Prise en charge : Firefox 3.5, IE8.0
Firefox et ActionScript3 ont déjà implémenté quelque chose... Mais en fait, maintenant que json est si populaire, peu importe qu'il y ait E4X ou non ~ (c'est absurde, en fait, ce serait pratique d'écrire objets dom directement dans le code js au lieu de chaînes html) Beaucoup)
Documentation MDC : https://developer.mozilla.org/en/E4X
Support : Firefox 1.5
La prise en charge native de JSON est cent fois plus rapide et plus sûre que eval. Notez également que json2.js de Douglas Crockford est un interpréteur js implémenté en js, il est donc plus sécurisé
.Documentation MDC : http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/
Documentation MSDN : http://blogs.msdn.com/ c'est à dire/archive/2008/09/10/native-json-in-ie8.aspx
Support : Firefox 3.5, IE8
Alternative/Transition : json2.js http://www.json.org/json2.js
Les méthodes de tableau implémentées dans js1.6 sont principalement forEach, map, filter, qui sont des méthodes très importantes en programmation fonctionnelle, ainsi que les requêtes inversées
Documentation MDC : https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras
Supports : Firefox2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5
Alternative/Transition : Tous peuvent être simulés en étendant Array.prototype
Différencier les tableaux et les objets
Support : Aucun
Alternatives/Transitions : Array.isArray = function(a){ return Object.prototype.toString.call(a) === "[object Array] »;};
Pour reprendre les mots de la conférence GOOGLE I/O : un système d'objets plus robuste
Explication de son camarade de classe John : http://ejohn.org/blog/objectgetprototypeof/
Support : Firefox3.5
Alternative/Transition : object.__proto__ ou object.constructor.prototype
Explication de son camarade de classe John : http://ejohn.org/blog/ecmascript-5-objects-and-properties/
Support : Aucun
Remplacement/Transition : Object.create et Object.keys peuvent être implémentés par vous-même
Contrôle d'accès aux propriétés des objets
Explication de son camarade de classe John : http://ejohn.org/blog/ecmascript-5-objects-and-properties/
Support : Aucun
Remplacement/Transition : Object.defineProperties est en fait équivalent à jQuery.extend, utilisé pour implémenter Mixin
Méthodes d'accès aux attributs en Python et Ruby
Documentation MDC : https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters
Supports : Firefox 2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5
Alternatives/Transitions :
Ancienne méthode non standard dans Firefox 1.5
Prise en charge : Firefox 2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5
Standard
MSDN文件：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx
支援：IE8 (只能對DOM使用)
ES5的嚴格模式，刪除了舊版本中容易引起問題的元素，並且會顯式的報錯，方便調試
約翰同學的解說：http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
支援：無
....
)
/
toISOString
(>toISOString
支援：Firefox3.5
替代/過渡：各種正規實作http://blog.stevenlevithan.com/archives/faster-trim-javascript
===================廢話又開始的分割線================== =====
其實我把這個東西發出來是希望能促進創新的氛圍，讓更多人認識到很多新技術已經進入到「實用」階段。
如果只是想做個實驗性的webgame，或是只能用於特定平台的應用（例如iphone，greasemonkey），firefox3.5 webkit的支援就已經足夠罷。
如果不能無視主流平台，有很多技術能讓你gracefully degrade（優雅的退化）或選取不同的方法實作相容的介面。
如果你等不及IE x在若干年後實現xx，希望提前享受福利，有些技術的設計原則就是讓你能在沒有native支持的情況下可以自己實現一模一樣的功能或語法糖（syntactic sugar） ，例如ES5物件的繼承和存取控制，從ES4/ActionScript3時期那些老土的關鍵字（class extands private static）改成了Object.create(p, attrs).defineProperty(o, n, attrs).defineProperties( o, attrs).freeze().getOwnPropertyNames().map(fn)，不會只是為了酷炫罷手…
很多人都喜歡抱怨“我這輩子都沒機會用HTML5”，但是只要把視線從自己腳下那巴掌大塊地移開看看別處，會發現世界其實一直都在改變喔XD
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
