HTML5 CSS3 neue WEB-Standards und Browser-Unterstützung_HTML5-Tutorial-Fähigkeiten

Da es sich um Notizen handelt, werde ich für jeden Eintrag nur die Titel und grammatikalischen Merkmale auflisten. Ich habe vorerst keine Zeit, detaillierte Erklärungen und ausführbare Beispiele zu schreiben, aber ich werde zusätzlich zur Auflistung relevante Dokumentadressen angeben Browser, die diese Funktion bereits unterstützen, bieten auch alternative/Übergangsimplementierungen für nicht unterstützte Browser. Nun, das war ursprünglich eine Notiz, die ich privat gemacht habe. Als ich den Artikel von Lehrer Lewu das letzte Mal gesehen habe, habe ich zwar gesagt, dass mein aktuelles Alter gerade in die Hochphase des Gedächtnisses eingetreten ist ... aber mein Selbst- Selbstvertrauen braucht immer noch einen Schlag! Als ich zum Beispiel mit anderen darüber diskutierte, was der Clown dem Staatsanwalt im Krankenhaus in „The Dark Knight“ sagte, was ihn in Two-Face verwandelte, konnte ich mich an keine einzige Dialogzeile erinnern und wie die Figur hieß, als Penny Age spielte von Conan in Big Bang Theory S2? „Queen Penelope“, ich war so beeindruckt, als ich es sah, dass ich mich einen Monat später nicht einmal an die Odyssee erinnern konnte. Ich fühle mich immer wohler, wenn ich Notizen hinterlasse ... Ah, ich bin wieder vom Thema abgekommen.

In diesem Artikel wurden einige der wichtigsten (oder relativ beliebten) neuen Standards zusammengestellt. Obwohl es sich bei den meisten davon noch um Entwürfe des W3C handelt und sie sich noch am Anfang der Empfehlungsstufe befinden, sind sie in der neuen Runde sehr gefragt Browser Wars. In der Entwickler-Community sind zahlreiche verwandte Demos und API-Pakete entstanden, und einige sind in die Produktionsumgebung gelangt (z. B. die Google Mail-Offline-Anwendung auf dem iPhone. Tatsächlich denke ich, dass es im heutigen Webbereich darum geht). Der Übergang von der proprietären Technologie des Herstellers zur Produktion von Killeranwendungen wurde erheblich beschleunigt. Liegt das daran, dass die Nachfrage nach Webanwendungen jetzt zu hoch ist ... UPDATE: Als ich gerade einen weichen Artikel in Solidot veröffentlichte, dachte ich plötzlich, wie man dieses Problem ausdrückt: Tatsächlich sind viele Browserhersteller auch browserbasierte Anwendungsentwickler und Webstandardsetzer, genau wie die Ingenieure, die die Bühne bauen, auch Akteure sind Die Bühne und die Regisseure von Dance Moves scheuen keine Mühen, technische Standards zu implementieren, die der Entwicklung von Webanwendungen förderlich sind. Auch wenn es sich noch um W3C-Arbeitsentwürfe handelt, fehlt es dem IE-Team tatsächlich an Motivation. Der Planwirtschaft fehlt die Vitalität XD...

Da es sich um Notizen handelt, werde ich für jeden Eintrag nur den Titel und die grammatikalischen Merkmale auflisten. Ich habe vorerst keine Zeit, detaillierte Erklärungen und ausführbare Beispiele zu schreiben, aber ich werde die entsprechende Dokumentadresse angeben. Zusätzlich zur Auflistung der unterstützten Browser mit dieser Funktion werden auch alternative/übergangsweise Implementierungen für Browser bereitgestellt, die diese Funktion nicht unterstützen.

===================Die Trennlinie, an der der Unsinn endet====================== ==

CSS3-Medienabfragen

Medientyperkennung für die gesamte externe Link-CSS-Datei und einen Teil des CSS-Codes. Der Grund für die hohe Beliebtheit liegt offensichtlich in den mobilen Geräten...

1. <Link Medien="alle and (orientation:portrait)“ src= "screen.css" type=" Text/CSS">

1. @media alle und (Mindestfarbe: 4) { ... }

w3c-Standards: http://www.w3.org/TR/css3-mediaqueries/
MDC-Dokumentation: https://developer.mozilla.org/En/CSS/Media_queries
Opera-Dokumentation: http ://www.opera.com/docs/specs/css/

Unterstützt: Firefox 3.5, Safari 3, Opera 7

CSS3 2D-Transformationen

CSS-Verformung, einige Leute verwenden dieses JQuery-Plug-In, um Pseudo-3D-Effekte und Rotationseffekte zu erzielen

1. -moz-transform: drehen(-45Grad) schrägen(15Grad, 15Grad);

1. Sprite.Stil['-webkit-transform'] = 'rotate(' v 'rad)';

w3c-Standard: http://www.w3.org/TR/css3-2d-transforms/
MDC-Dokumentation: https://developer.mozilla.org/En/CSS/CSS_transform_functions
Webkit-Blog Einführung: http://webkit.org/blog/130/css-transforms/

Unterstützung: Firefox 3.5, Safari 3.1
Alternative/Übergang: IE5.5 Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS .85).aspx

CSS3-Übergänge und CSS-Animationen

Die mit Spannung erwartete CSS-Animation, ein vom Webkit-Team vorgeschlagener Entwurf, implementiert einfache Attributverläufe und Animation definiert komplexere Animationseffekte

1. Übergangseigenschaft: width;
2. Übergangsdauer: 1s;
4. animationsname: 'diagonal-slide';
5. Animationsdauer: 5s;
6. Animationsiterationsanzahl: 10;
7. @keyframes 'diagonal-slide' {}

w3c-Standard: http://www.w3.org/TR/css3-transitions/
w3c-Standard: http://www.w3.org/TR/css3-animations/
Webkit-Blog-Einführung : http://webkit.org/blog/138/css-animation/
Einführung von Klassenkamerad John: http://ejohn.org/blog/css-animations-and-javascript/

Unterstützung: Safari 3.1

CSS3-herunterladbare Schriftarten

Die Möglichkeit, jede beliebige Schriftart in eine Webseite einzubetten, ist der Traum eines jeden Designers...aber die einzigen hier unterstützten Schriftarten sind TrueType und OpenType

1. @font-Gesicht {}

w3c-Standard: http://www.w3.org/TR/css3-fonts/#font-resources
MSDN-Dokumentation: http://msdn.microsoft.com/en-us/library/ms530303( VS.85).aspx
MDC-Dokumentation: https://developer.mozilla.org/en/CSS/@font-face

Unterstützt: Firefox 3.5, Safari 3.1, Opera 10.0, IE4.0

Bonus: Kompatibilität mit anderen CSS3-Eigenschaften

Von ppk-Studenten gepflegte Dokumente: http://www.quirksmode.org/css/contents.html
Von css3.info gepflegte Dokumente: http://www.css3.info/modules/selector-compat/
Eine Testseite: http://westciv.com/iphonetests/

HTML5-DOM-Speicher

Einfache dauerhafte Speicherung in Form von Schlüssel-Wert-Paaren

1. window.localStorage
2. window.sessionStorage //Kann domänenübergreifend sein und wird gelöscht, wenn die Registerkarte geschlossen wird

w3c-Standard: http://www.w3.org/TR/webstorage/
Von ppk-Klassenkameraden gepflegte Kompatibilitätsliste: http://www.quirksmode.org/dom/html5.html#localstorage
MDC-Dokumentation: https://developer.mozilla.org/en/DOM/Storage
MSDN-Dokumentation: http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

Unterstützt: Firefox 3.5, Safari 4.0, IE 8.0

HTML5-Offline-Anwendungscache

Verwenden Sie eine Manifestdatei, um statische Ressourcen (Bilder, CSS, JS usw.) für die Offline-Verwendung zwischenzuspeichern, nicht strukturierte Daten

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

1. CACHE-MANIFEST
2. index.html
3. style/default.css
4. images/logo.png

w3c-Standards: http://www.w3.org/TR/offline-webapps/#offline
MDC-Dokumentation: https://developer.mozilla.org/en/Offline_resources_in_Firefox

Unterstützung: Firefox 3.5

HTML5-Datenbankspeicher

Lokale Datenbank, die SQL unterstützt, wurde zuerst von Google Gears implementiert. Der Herausgeber des aktuellen w3c-Entwurfs ist auch ein Google-Ingenieur ... Aber seltsamerweise ist die Gears-API nicht mit dem aktuellen Entwurf kompatibel, den Chrome beibehalten möchte Die mitgelieferten Gears. Die Datenbank-API hat die vom Webkit implementierte HTML5-API gelöscht... Und als Google die Gmail-Offline-Funktion auf dem iPhone implementierte, verwendete es auch die Webkit-API... Das ist wirklich verwirrend...

1. var db = window.openDatabase("Notizen", "", "Die Beispiel-Notizen-App!", 1048576) ;
2. db.transaction(function(tx) {
3. tx.executeSql('SELECT * VON Notizen', [], Funktion(tx, rs) {});
4. });

w3c-Standard: http://www.w3.org/TR/offline-webapps/#sql
Einführung in den Webkit-Blog: http://webkit.org/blog/126/webkit-does-html5- client-side-database-storage/
iphone-Dokumentation: http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3 - SW1

Unterstützung: Safari 3.1
Alternative/Übergang: Gears http://code.google.com/p/gears/wiki/Database2API

HTML5-Web-Worker

Mehrere Threads, komplexe Vorgänge im Hintergrund ausführen, DOM nicht bedienen, Kommunikation zwischen Threads über Nachrichtenereignisse

1. var myWorker = new Worker ('my_worker.js');
2. myWorker.onmessage = function(event) { Ereignis.Daten };
3. myWorker.postMessage(str);

w3c-Standard: http://www.w3.org/TR/workers/
MDC-Dokument: https://developer.mozilla.org/En/Using_web_workers

Unterstützung: Firefox 3.5
Alternative/Übergang: Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal

HTML5-Geolokalisierung

Geo-API

1. Fenster.Navigator.Geolocation

w3c-Standard: http://www.w3.org/TR/geolocation-API/
MDC-Dokumentation: https://developer.mozilla.org/En/Using_geolocation

Unterstützt: Firefox 3.5
Alternative/Übergang: Gears http://code.google.com/p/gears/wiki/GeolocationAPI

HTML5 Drag & Drop

Natives Drag-Ereignis

1. ondragstart
2. ondrag
3. hervorragend
4. //Während des Ziehvorgangs
5. ondragenter
6. ondragover
7. ondragleave
8. ondrop

w3c-Standard: http://www.w3.org/TR/html5/editing.html#dnd
MDC-Dokument: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
apple Dokumentation: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html#//apple_ref/doc/uid/30001233

Unterstützt: Firefox 3.5, Safari 2.0, Chrome 1.0, IE 5.0

HTML5-Audio und -Video

Der Vorteil der Verwendung von HTML-Tags zum Einbetten von Video und Audio liegt nicht im „Open-Source-Format“, sondern in der „Offenheit“, die es Multimedia ermöglicht, mit anderen Seitenelementen zu interagieren oder Seitentechnologie zum „Mashup“ mit dem Video zu verwenden Art einer zufälligen Kombination Die Fähigkeit, mit RIA zu interagieren, ist der Grundstein für den Wohlstand der Webtechnologie und gleichzeitig das größte Manko geschlossener RIA-Container wie Flash.

1. <Video Steuerelemente>
2. <Quelle src="Zombie. ogg“ type=“video/ogg “/>
3. <Quelle src="Zombie. mp4″ type=”Video/mp4 ″/>
4. Video>

MDC-Dokumentation: https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
Einführung in den Webkit-Blog: http://webkit.org/blog/140/html5-media-support/

Unterstützt: Firefox 3.5, Safari 3.0, Chrome 3.0
Alternative/Übergang: Verschachtelte Einbettung mit Video-Tag http://hacks.mozilla.org/2009/06/html5 - video-fallbacks-markup/

HTML5-Canvas

Mozilla wurde von Apple erfunden und erstmals in Dashboards verwendet, der aktuellen Mainstream-JS-Bildtechnologie. Darüber hinaus implementiert das IE-Team bereits viel Arbeit, um Canvas zu unterstützen. Tatsächlich ist die Canvas-API ziemlich niedrig, insbesondere in Bezug auf die Interaktion, sie ist nicht so intuitiv wie SVG, daher gibt es viele Bibliotheken, die sie kapseln

1. var ctx = $('#canvas ')[0].getContext( "2d");
2. ctx.fillStyle = "#00A308" ;
3. ctx.beginPath();
4. ctx.Bogen(220, 220, 50, 0, Mathe.PI*2, wahr);
5. ctx.closePath();
6. ctx.fill();

MDC-Dokumentation: https://developer.mozilla.org/en/Canvas_tutorial

Unterstützt: Firefox 1.5, Safari 2.0, Chrome 1.0, Opera 9.0
Alternative/Übergang: excanvas.js http://code.google.com/p/explorercanvas/

SVG

w3c-Standard: http://www.w3.org/TR/SVG12/

IBM DW-Tutorial: http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id =84896

Unterstützt: Firefox 1.5, Safari 3.0, Chrome 1.0, Opera 9.0
Alternative/Übergang: raphael.js http://raphaeljs.com/

XMLHttpRequest 2

Hauptsächlich zur Verbesserung der domänenübergreifenden Funktionen und Ereignisse während des Anfrageprozesses

w3c-Standard: http://www.w3.org/TR/XMLHttpRequest2/

MDC-Dokumentation: https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest (XDR)
MSDN-Dokumentation: http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

Unterstützt: Firefox 3.5 (teilweise implementiert), IE 8.0 (teilweise implementiert)

Zugriffskontrolle

Die lang erwartete domänenübergreifende Zugriffskontrolle. Es gibt derzeit einige Unterschiede zwischen Firefox 3.5 und IE8. Ich weiß nicht, ob das von IE8 entwickelte XDR und XDM bereit ist, zur Standardisierung an w3c übermittelt zu werden...

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

w3c-Standard: http://www.w3.org/TR/cors/
MDC-Dokument: https://developer.mozilla.org/En/HTTP_Access_Control
Cross-Document Messaging (XDM)
MSDN-Dokumentation: http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx

Unterstützt: Firefox 3.5, IE8.0

E4X (ECMA-357)

Firefox und ActionScript3 haben bereits etwas implementiert ... Aber tatsächlich scheint es jetzt, da JSON so beliebt ist, keine Rolle mehr zu spielen, ob es E4X gibt oder nicht ~ (Unsinn, eigentlich wäre es bequem zu schreiben dom-Objekte direkt im JS-Code anstelle von HTML-Strings) Eine Menge)

MDC-Dokumentation: https://developer.mozilla.org/en/E4X

Unterstützung: Firefox 1.5

ECMAScript 5 Native JSON

Native JSON-Unterstützung ist hundertmal schneller und sicherer als eval. Beachten Sie außerdem, dass json2.js von Douglas Crockford ein in js implementierter JS-Interpreter ist und daher sicherer ist

1. JSON.parse( text, übersetzen )
2. JSON.stringify( obj, übersetzen )
3. String.Prototyp.toJSON
4. Boolean.Prototyp.toJSON
5. Nummer.Prototyp.zuJSON
6. Datum.Prototyp.zuJSON

MDC-Dokumentation: http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/
MSDN-Dokumentation: http://blogs.msdn.com/ ie/archive/2008/09/10/native-json-in-ie8.aspx

Unterstützung: Firefox 3.5, IE8
Alternative/Übergang: json2.js http://www.json.org/json2.js

ECMAScript 5 Array-Extras

Die in js1.6 implementierten Array-Methoden sind hauptsächlich forEach, Map, Filter, die sehr wichtige Methoden in der funktionalen Programmierung sind, sowie Reverse-Query

1. Array.Prototyp.indexOf( str )
2. Array.Prototyp.lastIndexOf( str )
3. Array.Prototyp.jeder( fn )
4. Array.Prototyp.einige( fn )
5. Array.Prototyp.Filter( fn )
6. Array.Prototyp.forEach( fn )
7. Array.Prototyp.Karte( fn )

MDC-Dokumentation: https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras

Unterstützt: Firefox2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5
Alternative/Übergang: Alle können durch Erweiterung von Array.prototype

ECMAScript 5 isArray()

Unterscheiden Sie zwischen Arrays und Objekten

1. Array.isArray([]); // true

Unterstützung: Keine
Alternativen/Übergänge: Array.isArray = function(a){ return Object.prototype.toString.call(a) === "[object Array] ”;};

ECMAScript 5-Objekt

Um es mit den Worten der GOOGLE I/O-Vorlesung zu sagen: ein robusteres Objektsystem

1. Object.getPrototypeOf( obj )

Erklärung von Klassenkamerad John: http://ejohn.org/blog/objectgetprototypeof/

Unterstützung: Firefox3.5
Alternative/Übergang: object.__proto__ oder object.constructor.prototype

1. Objekt.erstellen( Proto, Requisiten ) //Objekt klonen oder erben
3. Objekt.Tasten( obj ) //Zuordnung der Datenstruktur
4. Object.getOwnPropertyNames( obj )
6. Object.preventExtensions( obj ) //Es können keine neuen Attribute hinzugefügt werden
7. Objekt.isExtensible( obj )
9. Objekt.Siegel( obj ) //Die Konfiguration von Attributen kann nicht gelöscht und geändert werden, und neue Attribute können nicht hinzugefügt werden
10. Objekt.isSealed( obj )
12. Objekt.einfrieren( obj ) // Die Konfiguration von Attributen kann nicht gelöscht oder geändert werden, neue Attribute können nicht hinzugefügt werden und Attribute können nicht geschrieben werden
13. Objekt.isFrozen( obj )

Erklärung von Klassenkamerad John: http://ejohn.org/blog/ecmascript-5-objects-and-properties/

Unterstützung: Keine
Ersatz/Übergang: Object.create und Object.keys können selbst implementiert werden

ECMAScript 5-Eigenschaftsdeskriptor

Zugriffskontrolle auf Objekteigenschaften

1. Object.getOwnPropertyDescriptor( obj, prop )
2. Object.defineProperty( obj, prop, desc )
3. Object.defineProperties( obj, Requisiten )
4. desc = {
5. Wert: wahr,
6. beschreibbar: false, //Ändern
7.  aufzählbar: wahr, //für in
8.  konfigurierbar: wahr, //Attribute löschen und ändern
9. get: function(){ return Name; },
10.  Set: Funktion(Wert){ Name = Wert }
11. }

Erklärung von Klassenkamerad John: http://ejohn.org/blog/ecmascript-5-objects-and-properties/

Unterstützung: Keine
Ersetzung/Übergang: Object.defineProperties entspricht tatsächlich jQuery.extend und wird zur Implementierung von Mixin verwendet

ECMAScript 5 Getter und Setter

Attributzugriffsmethoden in Python und Ruby

1. obj = {
2. get innerHTML() { zurück …; },
3. set innerHTML(newHTML) { … }
4. };

MDC-Dokumentation: https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters

Unterstützt: Firefox 2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5
Alternativen/Übergänge:

Nicht standardmäßige, alte Methode in Firefox 1.5

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

Unterstützt: Firefox 2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5

Standard

1. Object.defineProperty(document.body, "innerHTML", { get : Funktion () {} });

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

Support : IE8 (ne peut être utilisé qu'avec DOM)

Mode strict ECMAScript 5

Le mode strict d'ES5 supprime les éléments susceptibles de poser des problèmes dans l'ancienne version, et signalera explicitement les erreurs pour faciliter le débogage

1. "use strict" //Exception levée dans les circonstances suivantes
2. //Attribuer une valeur à des variables non définies
3. //L'opération est définie sur une propriété non inscriptible, non configurable ou non extensible
4. //Supprimer variables, fonctions, paramètres
5. //Définir à plusieurs reprises les attributs dans les littéraux d'objet
6. //eval est utilisé comme mot-clé et les variables sont définies dans la chaîne eval
7. //Écraser les arguments
8. //Utilisez arguments.caller et arguments.callee (les fonctions anonymes doivent être nommées pour se référencer)
9. //(function(){ ... }).call( null ); // Exception
10. //Utiliser avec

Explication de son camarade de classe John : http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

Support : Aucun
Alternatives/Transitions : ... Commencez à développer de sérieuses habitudes de programmation à partir de maintenant

Autres nouveautés d'ECMAScript 5

Lorsque vous passez une référence à une fonction, liez-la

1. Fonction.prototype.lier(thisArg, arg1, arg2....) /

Support : Aucun
Alternatives/Transitions : prototype http://www.prototypejs.org/api/function/bind

Dates au format ISO

1. Date.prototype.toISOString() // Tirages 2009-05-21T16:06:05.000TZ

Supporté : Aucun
Alternative/Transition : datejs http://code.google.com/p/datejs/

1. Chaîne.prototype.garniture()

Support : Firefox3.5
Alternative/Transition : Diverses implémentations régulières http://blog.stevenlevithan.com/archives/faster-trim-javascript


===================La ligne de démarcation où les bêtises recommencent================== = =====

En fait, j'ai posté cette chose dans l'espoir de promouvoir une atmosphère d'innovation et de faire comprendre à plus de gens que de nombreuses nouvelles technologies sont entrées dans la phase « pratique ».

Si vous souhaitez simplement créer un jeu Web expérimental ou une application qui ne peut être utilisée que sur une plate-forme spécifique (comme l'iPhone, Greasemonkey), le support du webkit Firefox3.5 est suffisant.

Si vous ne pouvez pas ignorer la plate-forme grand public, il existe de nombreuses technologies qui vous permettent de dégrader gracieusement ou de choisir différentes méthodes pour implémenter des interfaces compatibles.

Si vous ne pouvez pas attendre IE, par exemple, l'héritage et le contrôle d'accès des objets ES5 ont été modifiés, passant des mots-clés à l'ancienne de la période ES4/ActionScript3 (la classe étend le statique privé) à Object.create(p , attrs).defineProperty(o, n, attrs).defineProperties( o, attrs).freeze().getOwnPropertyNames().map(fn), ce n'est pas seulement pour la fraîcheur...

Beaucoup de gens aiment se plaindre "Je n'ai jamais eu la chance d'utiliser HTML5 de ma vie", mais tant que vous détournez le regard de la grande paume sous vos pieds et regardez ailleurs, vous constaterez que le monde est réellement en train de changer. tout le temps XD