Revealing HTML5 and CSS3 "Pearl milk Tea Gang"

Share people: Geese

The development of the Internet has always been the emergence of new technologies, and HTML5 and CSS3 have been discussed recently, for every Internet developer, especially front-end developers, are full of curiosity and desire. So what are the things that HTML5 and CSS3 that brighten our eyes? I in the webrebuild Beijing exchange and pearl milk tea to help you share the "secret HTML5 and CSS3", PPT here:
Http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

The predecessor of the HTML 5 draft, named Web Applications 1.0, was presented by WHATWG in 2004 and was accepted by the consortium in 2007, and a new HTML team was set up. On January 22, 2008, the first official draft was issued. HTML 5 is the most significant leap in web development standards in nearly a decade. Unlike previous versions, HTML 5 is not just for Web content, its new mission is to bring the Web into a sophisticated application platform, where video, audio, graphics, animations, and interactions with computers are standardized on the HTML 5 platform. So let's take a look at the technical overview of HTML5:

HTML5 new and removed elements

HTML5 added a lot of multimedia and interactive elements such as video, audio, in the HTML4 if you want to embed a visual or audio words need to introduce a large section of code, and compatible with each browser, and HTML5 only by introducing a tag can be as convenient as the IMG tag. In terms of page layout and content implementation HTML5 adds a lot of structured tag elements as well as block-level and semantic elements, and if you want to use HTML to represent a file's upload progress bar, you can use the progress element in HTML5 to represent It has a Value property that describes how many tasks have been completed, and a property Max describes how much of the task is required, as well as the position attribute (read-only) of the progress bar through the DOM interface, which is the percentage of task completion. YouTube has made an attempt at HTML5 technology, HTTP://WWW.YOUTUBE.COM/HTML5 (need to flip the wall) is a demo with HTML5, from the whole page source code, very concise. Of course, HTML5 also added some attributes to some elements, such as input and textarea placeholder properties, equivalent to the input box prompts, script has a async property can affect the loading and execution of the script. For all the properties that are common to all HTML, we usually call it "global properties", such as class, ID, TabIndex, TITLE,HTML5 also add some global properties, such as contenteditable, ContextMenu, hidden, and so on. HTML5 also adds support for micro-data, such as HTML5 new item, Itempro, subject, and more.

Of course, HTML5 also removed some of the elements of the presentation page, such as font, center, strike, etc., which should be CSS to do, so it is very good to understand, but also to remove some of the impact of Web site accessibility elements such as frame, frameset, Noframe and some of the less commonly used elements such as acronym, but using ABBR to represent abbreviations. HTML5 also removes some familiarity with HTML that affects client-side compatibility, such as Link's Rev attribute, TD's scope property; HTML5 also removes some properties that represent the page presentation, such as the align,bgcolor properties of some elements.

HTML5 support for a form

HTML5 provides powerful control types such as URLs, emails, date, tel, etc., powerful constraint attributes, such as required representing required, file upload accept attributes, and some form repeating element model support, HTML5 can also set up submissions in the form of XML submissions, so that the data that the server receives will be in XML format, and the HTML5 form is defined as "Web Forms 2.0", and opera9.5+ support for Web Forms 2.0 is now perfect.

Click here to view the Web Forms 2.0 DEMO, which requires opera9.5+

HTML5 Dom Change

HTML5 many of the DOM level 2 HTML are inherited from HTMLDocument interfaces, and of course HTML5 has some notable new members on the DOM, such as: Support Getelementsbyclassname, You can select an element based on its class name, and GetSelection () will return the currently selected object, with two methods on the selector queryselector and Queryselectorall can get the elements to query based on the CSS selector. Equivalent to the Y.one and Y.all in YUI3.

JavaScript APIs for HTML5

What APIs do HTML5 add to JavaScript?

• VIDEO/AUDIO:HTML5 provides APIs for video and Audio to allow developers to control their own user interface, such as playing or pausing media content.
• Canvas:canvas is a new HTML element that can be used by the script language (usually JavaScript) to draw graphics. For example, you can use it to paint, synthesize images, or do simple (and not so simple) animations. Canvas is a magical thing, it gives me the first feeling is like using Photoshop, each of its methods is similar to Photoshop, through Canvas.getcontext (' 2d ') can get the canvas API, You can set its fill color by fillstyle or set its stroke color by strokestyle, and even the operation of its path will coincide with Photoshop's pen operation. Canvas has already been applied in many websites, such as Firefox's real-time download status statistics, and can even write Web Game with canvas.
• Drag&drop: In the visual media that indicates the device, the action of "Drag" is the event that the mouse is pressed (MouseDown) and is accompanied by mouse movement (MouseMove), and "Drop" is the event that is triggered when the mouse is released. The dataevent and DataTransfer interfaces are defined in the Drag&drop, and events such as DragStart, DragEnter, DragLeave, drop, and dragend are triggered when the drag operation occurs.
• Web workers: JavaScript multithreading allows you to do a lot of work in the background without blocking the current browser operation.
• Geolocation: Location, run navigator.geolocation.getCurrentPosition (success,error) This method when the browser will be prompted whether to share your geographic location, if you choose to share, The success function is recalled, and the success function has a parameter that is a position object, the Position object has a Coords object, and the Coords object contains many geographic information such as latitude (dimension) and longitude (longitude) , so you can know where you are, and this feature has been widely used in some mobile phones such as the iphone.
• Application cache: This is HTML5 support for offline applications, by adding a property manifest to the HTML element, the browser prompts you to cache the data to the client, if the user chooses to allow the The files you need are cached according to the specified manifest file list, and you can still use this application when your network is unavailable. Google has also developed Google Gears Browser extensions for offline applications, but finally Google's HTML5 may also have seen the advantages of HTML5 storage and offline applications.
• Storage:webkit has implemented the database Storage, you can query the data and perform some operations like back-end operations. There is also a store of key-value pairs, such as sessionstorage and localstorage, that can be stored and fetched through SetItem and GetItem, which are much larger than the storage of cookies.
• X-document Messaging: Browsers prevent the communication of documents between different domains for security and privacy reasons, although this is a security limitation, but there are many problems with document communications in different domains that are not compromised, but HTML5 can implement this cross document communication, Let's not be able to control where the source domain comes from, while preventing script attacks.

Did HTML5 make you heartbeat? So when will HTML5 be standard? It is said to wait until 2022, there is a very interesting website http://ishtml5readyyet.com/tell you how many days HTML5 will really come.

Click to view HTML5 DEMO, you need firefox3.5+/safari4.0+

CSS3

CSS3 is not only a novel technology for our web developers, but more importantly, these new concepts of Web applications to bring us more unlimited possibilities, but also greatly improve our development efficiency. We will no longer have to rely on pictures or JavaScript to do the same with rounded corners, backgrounds, user-defined fonts, 3D animations, gradients, Box shadows, text shadows, transparency, and so on to improve the quality of web design features.

CSS3 Support on the selector

With the property selector we can easily select an element based on the beginning or end of the property value. Using the sibling selector, you can select a sibling node or an element adjacent to the next node, using a pseudo class selector to select a certain element, and CSS3 's rich support on the selector allows us to control the style flexibly, Instead of adding a class name such as "odd" or "even" to them in order to select some elements.

CSS3 Support in style

There is a survey that developers are looking forward to the most CSS3 features, the final number of votes is the most "rounded", yes, rounded corners this function can give us the front-end engineers save a lot of time and energy to cut the map piece a rounded corner. CSS3 also supports shadows, Box shadows, and Text shadows, gradients, which you may have seen before via IE filters, in fact CSS3 is more convenient to implement. @font-face can customize the font, if in the traditional way, VD a special text with a design map to you to enable you to achieve it you may be made into a picture, and through the CSS3 with @font-face on it. CSS3 for continuous text wrapping also added a property word-wrap, you can set it as normal (no line) or Break-word (line), which solves the problem of page dislocation of consecutive English characters, and does not need to intercept the sequential characters. Using CSS3 You can also add a background to the border, which is also an example of an application on the iphone. CSS3 supports background resizing on the background, such as when you use a large image to make a small background of the element, you can adjust the size of the background image by background-size to fit this element. The difference between CSS3 support opacity, RGBA and hsl/a, opacity and RGBA is that the transparency of opacity settings also has an impact on its content, and RGBA only affects the elements you apply. CSS3 provides support for the box model in the layout, can be set box-sizing to Content-box or Border-box, the application of Content-box is the normal mode, The box model applied to Border-box and IE5.5 is very similar, that is, the width of the elements including border and padding, this may be more convenient in the layout, without going to the end of this element will occupy how much width, and content-box also need to manually calculate the actual width of this element.

CSS3 Support for animations

The types of animations supported by CSS3 are: Transform (transforms), transition (transitions), and animation (animations). You can set Transition,transiton and animation for specific properties, animation animations are defined by themselves, and more often than not, scripting developers are more complex.

To use most of the CSS3 features, we have to use the manufacturer's proprietary extensions with the original attributes. The reason is that until now, most browsers support only some of the CSS3 properties. The most common private properties are used for WebKit core browsers (Safari, for example), starting with-webkit-and Gecko core browsers (for example, Firefox), starting with-moz-, and Konqueror (-khtml-), Opera (-o-) and Internet Explorer (-ms-) have their own property extensions (currently only IE8 support-ms-prefixes)

So how are we going to use CSS3 in development?

I think the first is to follow the principle of graceful demotion, such as the rounded corners mentioned above, we can apply the CSS fillet to browsers that support fillet, such as Firefox and Safari, while browsers that do not support CSS rounded corners are displayed at right angles. The second is for browsers that do not support CSS3 can use JavaScript to implement, such as CSS3 any element support: hover pseudo class, we can only support links: hover IE6 with JS to achieve. The last is to promote the new technology to users or bosses while also pay attention to their goals and feasibility, not for technology and technology.

Click to view CSS3 DEMO, you need firefox3.5+/safari4.0+