HTML5 CSS3 nouvelles normes WEB et compétences du tutoriel support_html5 du navigateur

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é======================= ==

Requêtes média CSS3

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...

1. <lien médias="tous et (orientation:portrait) » src= "screen.css" type=" texte/css">

1. @media tous et (min-couleur : 4) { ... }

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

Transformations CSS3 2D

déformation CSS, certaines personnes utilisent ce plug-in jquery pour obtenir un effet pseudo 3D et un effet de rotation

1. -moz-transform : rotation(-45deg) inclinaison(15degrés, 15degrés);

1. sprite.style['-webkit-transform'] = 'rotation(' v 'rad)';

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

Transitions CSS3 et animations CSS

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

1. propriété de transition : largeur;
2. durée de transition : 1s;
4. nom-animation : 'diapositive-diagonale';
5. animation-durée : 5s;
6. nombre d'itérations d'animation : 10 ;
7. @keyframes 'diapositive diagonale' {}

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

Polices téléchargeables CSS3

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

1. @font-visage {}

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

Bonus : Compatibilité avec d'autres propriétés CSS3

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 DOM HTML5

Stockage persistant simple sous forme de paires clé-valeur

1. window.localStorage
2. window.sessionStorage //Peut être inter-domaines, effacé lorsque l'onglet est fermé

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

Cache d'application hors ligne HTML5

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

1. <html manifeste="foo. manifeste">

1. MANIFESTE DE CACHE
2. index.html
3. style/default.css
4. images/logo.png

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

Stockage de base de données HTML5

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...

1. var db = fenêtre.openDatabase("notes", "", "L'exemple d'application Notes !", 1048576) ;
2. db.transaction(fonction(tx) {
3. tx.executeSql('SELECT * DE Notes', [], fonction(tx, rs) {});
4. });

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

Travailleurs du Web HTML5

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

1. var monTravailleur = nouveau Travailleur ('my_worker.js');
2. myWorker.onmessage = fonction(événement) { événement.données };
3. monTravailleur.postMessage(str);

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

Géolocalisation HTML5

API Géo

1. fenêtre.navigateur.géolocalisation

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

Glisser-Déposer HTML5

Événement de drag natif

1. ondragstart
2. ondrag
3. ondragende
4. //Pendant le processus de glissement
5. ondragenter
6. ondragover
7. ondragleave
8. ondrop

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

Audio et vidéo HTML5

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.

1. <vidéo contrôles>
2. <source src="zombie. ogg” type=”vidéo/ogg ”/>
3. <source src="zombie. mp4″ type=”vidéo/mp4 ″/>
4. vidéo>

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/

Toile HTML5

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

.

1. var ctx = $('#canvas ')[0].getContext( "2j");
2. ctx.fillStyle = "#00A308" ;
3. ctx.beginPath();
4. ctx.arc(220, 220, 50, 0, Mathématiques.PI*2, vrai);
5. ctx.closePath();
6. ctx.fill();

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/

SVG

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/

XMLHttpRequest 2

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é)

Contrôle d'accès

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...

1. Access-Control-Allow-Origin : http://foo.example

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

E4X (ECMA-357)

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

ECMAScript 5 JSON natif

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é

.

1. JSON.parse( texte, traduire )
2. JSON.stringify( obj, traduire )
3. Chaîne.prototype.vers JSON
4. Booléen.prototype.vers JSON
5. Numéro.prototype.vers JSON
6. Date.prototype.vers JSON

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

Extras du tableau ECMAScript 5

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

1. Array.prototype.indexOf( str )
2. Array.prototype.lastIndexOf( str )
3. Matrice.prototype.chaque( fn )
4. Array.prototype.certains( fn )
5. Array.prototype.filtre( fn )
6. Tableau.prototype.forEach( fn )
7. Tableau.prototype.carte( fn )

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

ECMAScript 5 isArray()

Différencier les tableaux et les objets

1. Array.isArray([]) // vrai

Support : Aucun
Alternatives/Transitions : Array.isArray = function(a){ return Object.prototype.toString.call(a) === "[object Array] »;};

Objet ECMAScript 5

Pour reprendre les mots de la conférence GOOGLE I/O : un système d'objets plus robuste

1. Objet.getPrototypeOf( obj )

Explication de son camarade de classe John : http://ejohn.org/blog/objectgetprototypeof/

Support : Firefox3.5
Alternative/Transition : object.__proto__ ou object.constructor.prototype

1. Objet.créer( proto, accessoires ) //Cloner ou hériter d'un objet
3. Objet.clés( obj ) //Mappage de la structure des données
4. Objet.getOwnPropertyNames( obj )
6. Objet.preventExtensions( obj ) //Impossible d'ajouter de nouveaux attributs
7. Objet.isExtensible( obj )
9. Objet.sceau( obj ) //La configuration des attributs ne peut pas être supprimée et modifiée, et de nouveaux attributs ne peuvent pas être ajoutés
10. Objet.estScellé( obj )
12. Objet.geler( obj ) //La configuration des attributs ne peut pas être supprimée ou modifiée, de nouveaux attributs ne peuvent pas être ajoutés et les attributs ne peuvent pas être écrits
13. Objet.isFrozen( obj )

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

Descripteur de propriété ECMAScript 5

Contrôle d'accès aux propriétés des objets

1. Objet.getOwnPropertyDescriptor( obj, accessoire )
2. Objet.defineProperty( obj, prop, desc )
3. Objet.defineProperties( obj, accessoires )
4. desc = {
5. valeur : vrai,
6. inscriptible : faux, //Modifier
7.  énumérable : vrai, //pour dans
8.  configurable : true, //Supprimer et modifier les attributs
9. obtenir : fonction(){ retour nom },
10.  ensemble : fonction(valeur){ nom = valeur }
;
11. }

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

ECMAScript 5 Getters et Setters

Méthodes d'accès aux attributs en Python et Ruby

1. obj = {
2. obtenir innerHTML() { retour …; },
3. ensemble innerHTML(newHTML) { … }
4. };

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

1. HTMLElement.prototype.__defineGetter__("innerHTML", fonction () {});
2. HTMLElement.prototype.__defineSetter__("innerHTML", fonction (val ) {});

Prise en charge : Firefox 2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5

Standard

1. Objet.defineProperty(document.corps, "innerHTML", { obtenir : fonction () {} });

MSDN文件：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

支援：IE8 (只能對DOM使用)

ECMAScript 5 Strict Mode

ES5的嚴格模式，刪除了舊版本中容易引起問題的元素，並且會顯式的報錯，方便調試

1. "use strict"; //以下情況下拋出異常
2. //以下情況下拋出異常
3. //對未定義的變數賦值
4. //操作被設定為不可寫，不可配置或不可擴充的屬性
5. //刪除變量，函數，參數
6. //在物件直接量裡重複定義屬性
7. //eval做關鍵字，在eval的字串裡定義變數
8. //覆蓋arguments
9. //使用arguments.caller和arguments.callee（匿名函式必須具名才能引用自己）
10. //(function(){ ... }).call( null ); // Exception

//使用with

約翰同學的解說：http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
支援：無

替代/過渡：…從現在開始養成嚴謹的程式設計習慣

ECMAScript 5 其他新特性

1. 傳遞函數的參考時，綁定this Function.prototype.bind.bind(bind(bind( 🎜>, arg1
,

arg2

....
)

/

1. 支援：無替代/轉換：prototype http://www.prototypejs.org/api/function/bind ISO-formatted dates Date.
prototype

.

toISOString
(>toISOString

// Prints 2009-05-21T16:06:05.000TZ

1. 支援：無替代/過渡：datejs http://code.google.com/p/datejs/
String

.prototype.trim()trim()trim()

支援：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