HTML5 CSS3 new WEB standards and browser support_html5 tutorial skills

Since it comes from notes, I will only list the title and grammatical features for each entry. I don’t have time to write detailed explanations and executable examples for the time being, but I will give relevant document addresses. In addition to listing the ones that already support this feature Browsers will also provide alternative/transitional implementations for unsupported browsers. Well, this was originally a note I took privately. I especially like taking notes on Evernote. Although the last time I saw Teacher Lewu’s article, I said that my current age has just entered the peak period of memory... but My self-confidence still takes a beating! For example, when discussing with others what the clown said to the prosecutor in the hospital in The Dark Knight that turned him into Two-Face, I couldn't remember a single line of dialogue, and what was the character's name when Penny played Age of Conan in Big Bang Theory S2? "Queen Penelope", I was so impressed when I saw it that I couldn't even remember the Odyssey a month later. I always feel more at ease when I leave notes... Ah, I'm off topic again.

This article has compiled some of the most important (or relatively popular) new standards. Although most of them are still drafts of the w3c and are still early in the Recommendation level, they have become highly sought after in the new round of browser wars. Celebrity, a large number of related demos and API packages have emerged in the developer community, and some have entered the production environment (such as Google's gmail offline application on the iPhone). In fact, I think in today's web field, the transition from manufacturer's proprietary technology to The cycle of converting committee standards into general-purpose technologies to produce killer applications has been significantly accelerated. Is it because the demand for web applications is too high now... UPDATE: I suddenly thought when I posted a soft article in solidot just now Understand how to express this problem: In fact, many browser manufacturers are also browser-based application developers and web standard setters, just like the engineers who build the stage are also actors on the stage and directors of dance moves, so Google, Mozilla and Apple are sparing no effort to implement technical standards that are conducive to the development of web applications. Even though they are still W3C Working Draft, the IE team lacks motivation. Sure enough, the planned economy lacks vitality XD...

Since it is derived from notes, I will only list the title and grammatical features for each entry. I don’t have time to write detailed explanations and executable examples for the time being, but I will give the relevant document address. In addition to listing the supported Browsers with this feature will also provide alternative/transitional implementations for browsers that do not support it.

===================The dividing line where nonsense ends========================

CSS3 Media queries

Media type detection for the entire external link css file and part of the css code. The reason for its high popularity is obviously because of mobile devices...

1. <link media="all and (orientation:portrait)” src= "screen.css" type=" text/css">

1. @media all and (min-color: 4) { ... }

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

Supports: Firefox 3.5, Safari 3, Opera 7

CSS3 2D Transforms

css deformation, some people use this jquery plug-in to achieve pseudo 3D effect and rotation effect

1. -moz-transform: rotate(-45deg) skew(15deg, 15deg);

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

w3c standard: http://www.w3.org/TR/css3-2d-transforms/
MDC documentation: https://developer.mozilla.org/En/CSS/CSS_transform_functions
webkit blog Introduction: http://webkit.org/blog/130/css-transforms/

Support: Firefox 3.5, Safari 3.1
Alternative/Transition: IE5.5 Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS .85).aspx

CSS3 Transitions and CSS Animations

The highly anticipated CSS animation, a draft proposed by the webkit team, transition implements simple attribute gradients, and animation defines more complex animation effects

1. transition-property: width;
2. transition-duration: 1s;
4. animation-name: 'diagonal-slide';
5. animation-duration: 5s;
6. animation-iteration-count: 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 Introduction: http://webkit.org/blog/138/css-animation/
Introduction from classmate John: http://ejohn.org/blog/css-animations-and-javascript/

Support: Safari 3.1

CSS3 Downloadable fonts

Being able to embed any font in a web page is a designer’s dream...but the only ones supported here are truetype and opentype

1. @font-face {}

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

Supports: Firefox 3.5, Safari 3.1, Opera 10.0, IE4.0

Bonus: Compatibility with other CSS3 properties

Documents maintained by ppk students: http://www.quirksmode.org/css/contents.html
Documents maintained by css3.info: http://www.css3.info/modules/selector-compat/
A test page: http://westciv.com/iphonetests/

HTML5 DOM Storage

Simple persistent storage in the form of key-value pairs

1. window.localStorage
2. window.sessionStorage //Can be cross-domain, cleared when the tab is closed

w3c standard: http://www.w3.org/TR/webstorage/
Compatibility list maintained by ppk classmates: http://www.quirksmode.org/dom/html5.html#localstorage
MDC documentation: https://developer.mozilla.org/en/DOM/Storage
MSDN documentation: http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

Supports: Firefox 3.5, Safari 4.0, IE 8.0

HTML5 Offline Application Cache

Use a manifest file to cache static resources (images, css, js, etc.) for use offline, not structured data

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 documentation: https://developer.mozilla.org/en/Offline_resources_in_Firefox

Support: Firefox 3.5

HTML5 Database Storage

Local database, supporting SQL, was first implemented by Google Gears. The editor of the current w3c draft is also a Google engineer... But strangely, the Gears API is not compatible with the current draft. Chrome even wants to retain the bundled Gears. The database api has deleted the html5 api implemented by webkit... And when Google implemented the gmail offline function on the iPhone, it also used the webkit api... It's really confusing...

1. var db = window.openDatabase("notes", "", "The Example Notes App!", 1048576) ;
2. db.transaction(function(tx) {
3. tx.executeSql('SELECT * FROM Notes', [], function(tx, rs) {});
4. });

w3c standard: http://www.w3.org/TR/offline-webapps/#sql
Introduction to webkit blog: http://webkit.org/blog/126/webkit-does-html5- client-side-database-storage/
iphone documentation: http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3 -SW1

Support: Safari 3.1
Alternative/Transitional: Gears http://code.google.com/p/gears/wiki/Database2API

HTML5 Web Workers

Multiple threads, perform complex operations in the background, cannot operate DOM, communicate between threads through message events

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

w3c standard: http://www.w3.org/TR/workers/
MDC document: https://developer.mozilla.org/En/Using_web_workers

Support: Firefox 3.5
Alternative/Transitional: Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal

HTML5 Geolocation

Geo API

1. window.navigator.geolocation

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

Supported: Firefox 3.5
Alternative/Transitional: Gears http://code.google.com/p/gears/wiki/GeolocationAPI

HTML5 Drag and Drop

Native drag event

1. ondragstart
2. ondrag
3. ondragend
4. //During dragging process
5. ondragenter
6. ondragover
7. ondragleave
8. ondrop

w3c standard: http://www.w3.org/TR/html5/editing.html#dnd
MDC document: 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

Supports: Firefox 3.5, Safari 2.0, Chrome 1.0, IE 5.0

HTML5 Audio and Video

The advantage of using html tags to embed video and audio is not "open source format", but "openness", which allows multimedia to interact with other page elements, or use page technology to "mashup" with the video. This kind of random combination The ability to interact with RIA is the cornerstone of the prosperity of web technology, and it is also the biggest shortcoming of closed RIA containers like flash.

1. <video controls>
2. <source src="zombie. ogg” type=”video/ogg ”/>
3. <source src="zombie. mp4″ type=”video/mp4 ″/>
4. video>

MDC documentation: https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
Introduction to webkit blog: http://webkit.org/blog/140/html5-media-support/

Supports: Firefox 3.5, Safari 3.0, Chrome 3.0
Alternative/Transition: Nested embed with video tag http://hacks.mozilla.org/2009/06/html5 -video-fallbacks-markup/

HTML5 Canvas

Invented by Apple and first used in dashboards, currently the mainstream js image technology, mozilla is already implementing OpenGL ES standard Canvas 3D. In addition, it is said that the IE team has done a lot of work to support canvas... In fact, the canvas api is quite low-level. Especially in terms of interaction, it is not as intuitive as svg, so there are many libraries that encapsulate it

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

MDC documentation: https://developer.mozilla.org/en/Canvas_tutorial

Supports: Firefox 1.5, Safari 2.0, Chrome 1.0, Opera 9.0
Alternative/Transition: 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

Supports: Firefox 1.5, Safari 3.0, Chrome 1.0, Opera 9.0
Alternative/Transition: raphael.js http://raphaeljs.com/

XMLHttpRequest 2

Mainly to increase cross-domain capabilities and events during the request process

w3c standard: http://www.w3.org/TR/XMLHttpRequest2/
MDC documentation: https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest (XDR)
MSDN documentation: http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

Supports: Firefox 3.5 (partially implemented), IE 8.0 (partially implemented)

Access Control

The long-awaited cross-domain access control. There are currently some differences between Firefox 3.5 and IE8. I don’t know if the XDR and XDM developed by IE8 are ready to be submitted to w3c for standardization...

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

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

Supports: Firefox 3.5, IE8.0

E4X (ECMA-357)

Firefox and ActionScript3 have already implemented something... But in fact, now that json is so popular, it doesn’t seem to matter whether there is E4X or not ~ (nonsense, in fact, it would be convenient to write dom objects directly in js code instead of html strings) A lot)

MDC documentation: https://developer.mozilla.org/en/E4X

Support: Firefox 1.5

ECMAScript 5 Native JSON

Native JSON support is a hundred times faster and safer than eval. Also note that Douglas Crockford’s json2.js is a js interpreter implemented in js, so it is more secure

1. JSON.parse( text, translate )
2. JSON.stringify( obj, translate )
3. String.prototype.toJSON
4. Boolean.prototype.toJSON
5. Number.prototype.toJSON
6. Date.prototype.toJSON

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

Support: Firefox 3.5, IE8
Alternative/Transition: json2.js http://www.json.org/json2.js

ECMAScript 5 Array Extras

The array methods implemented in js1.6 are mainly forEach, map, filter, which are very important methods in functional programming, as well as reverse query

1. Array.prototype.indexOf( str )
2. Array.prototype.lastIndexOf( str )
3. Array.prototype.every( fn )
4. Array.prototype.some( fn )
5. Array.prototype.filter( fn )
6. Array.prototype.forEach( fn )
7. Array.prototype.map( fn )

MDC documentation: 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: All can be simulated by extending Array.prototype

ECMAScript 5 isArray()

Differentiate between arrays and objects

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

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

ECMAScript 5 Object

In the words of the GOOGLE I/O lecture: a more robust object system

1. Object.getPrototypeOf( obj )

Classmate John’s explanation: http://ejohn.org/blog/objectgetprototypeof/

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

1. Object.create( proto, props ) //Clone or inherit object
3. Object.keys( obj ) //Mapping of data structure
4. Object.getOwnPropertyNames( obj )
6. Object.preventExtensions( obj ) //Cannot add new attributes
7. Object.isExtensible( obj )
9. Object.seal( obj ) //The configuration of attributes cannot be deleted and modified, and new attributes cannot be added
10. Object.isSealed( obj )
12. Object.freeze( obj ) //The configuration of attributes cannot be deleted or modified, new attributes cannot be added, and attributes cannot be written
13. Object.isFrozen( obj )

Classmate John’s explanation: http://ejohn.org/blog/ecmascript-5-objects-and-properties/

Support: None
Replacement/Transition: Object.create and Object.keys can be implemented by yourself

ECMAScript 5 Property Descriptor

Access control of object properties

1. Object.getOwnPropertyDescriptor( obj, prop )
2. Object.defineProperty( obj, prop, desc )
3. Object.defineProperties( obj, props )
4. desc = {
5. value: true,
6. writable: false, //Modify
7.  enumerable: true, //for in
8.  configurable: true, //Delete and modify attributes
9. get: function(){ return name; },
10.  set: function(value){ name = value; }
11. }

Classmate John’s explanation: http://ejohn.org/blog/ecmascript-5-objects-and-properties/

Support: None
Replacement/Transition: Object.defineProperties is actually equivalent to jQuery.extend, used to implement Mixin

ECMAScript 5 Getters and Setters

Attribute access methods in both python and ruby

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

MDC documentation: 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:

Non-standard, old method in Firefox 1.5

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

Supports: Firefox 2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5

Standard

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

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

Support: IE8 (can only be used with DOM)

ECMAScript 5 Strict Mode

The strict mode of ES5 deletes elements that are likely to cause problems in the old version, and will explicitly report errors to facilitate debugging

1. "use strict"; //Exception thrown under the following circumstances
2. //Assign value to undefined variables
3. //The operation is set to a non-writable, non-configurable or non-expandable property
4. //Delete variables, functions, parameters
5. //Repeatedly define attributes in object literals
6. //eval is used as a keyword, and variables are defined in the eval string
7. //Overwrite arguments
8. //Use arguments.caller and arguments.callee (anonymous functions must be named to reference themselves)
9. //(function(){ ... }).call( null ); // Exception
10. //Use with

Classmate John’s explanation: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

Support: None
Alternatives/Transitions: ... Start developing serious programming habits from now on

Other new features of ECMAScript 5

When passing a reference to a function, bind this

1. Function.prototype.bind(thisArg, arg1, arg2....) /

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

ISO-formatted dates

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

Supported: None
Alternative/Transition: datejs http://code.google.com/p/datejs/

1. String.prototype.trim()

Support: Firefox3.5
Alternative/Transition: Various regular implementations http://blog.stevenlevithan.com/archives/faster-trim-javascript


===================The dividing line where the nonsense starts again================== =====

Actually, I posted this thing in the hope of promoting an atmosphere of innovation and making more people realize that many new technologies have entered the "practical" stage.

If you just want to make an experimental webgame, or an application that can only be used on a specific platform (such as iPhone, greasemonkey), the support of firefox3.5 webkit is enough.

If you cannot ignore the mainstream platform, there are many technologies that allow you to gracefully degrade or choose different methods to implement compatible interfaces.

If you can’t wait for IE , for example, the inheritance and access control of ES5 objects have been changed from the old-fashioned keywords in the ES4/ActionScript3 period (class extands private static) to Object.create(p, attrs).defineProperty(o, n, attrs).defineProperties( o, attrs).freeze().getOwnPropertyNames().map(fn), it’s not just for coolness...

Many people like to complain "I have never had the chance to use HTML5 in my life", but as long as you look away from the big palm under your feet and look elsewhere, you will find that the world is actually changing all the time XD