New interaction features for HTML 5 & CSS 3

This picture of the title of this article is made with Phosotshop. However, in search engines you can not search it, the search engine is not strong enough to recognize the text inside the picture. And because the size of the picture is not too small, may slow Internet users in the browsing time had to patiently wait for the image refresh. So is there a new way to avoid these drawbacks?

Yes, HTML5 and CSS3 can meet your needs. Even, it can do more and better. As a designer, we should understand what they are and what they are, and thus further reflect on what we can do through HTML5 and CSS3.

What are HTML5 and CSS3

HTML and CSS are not hard to understand. HTML is the main language that makes up a Web page. In this language, we can explain to the computer page format, content, display effects, and so on. CSS is a language designed to control the display of Web pages. This time the problem comes out, why do we have to use CSS alone, HTML is not the same can control the display of Web pages? To answer this question, let me give you a simple example:

Have you found that if you describe too many things and want to describe things clearly, we have to repeat a lot of information? The same is true of the page language, in which case it is messy and difficult to get a clue. By integrating the language of control display into CSS, we can not only guarantee the simplicity of the main part of the page, but also make it easy to reuse various language collections.

HTML5 and CSS3 are the latest versions of HTML and CSS, and they are not yet standard-setting, but the new features that have been unveiled have been a thrill to us.

New for HTML 5

1. New Content Tags

The content label levels in the HTML4 are the same and cannot differentiate between parts. The content tags in the HTML5 are independent, different levels, search engines and statistical software can quickly identify the contents of each part.

2. A better tabular system

Now, you can discard JavaScript or PHP and simply define the table by HTML5. You can define the input format for each table cell, or you can define whether the unit is required and so on.

3. Audio, Video API

HTML5 not only allows you to integrate video and audio directly into your Web pages, but it also provides a rich set of APIs to control media playback, and the elements used to control media playback can be edited. As a result, HTML5 has actually been able to replace the usual flash plug-ins on video and audio levels.

4. Canvas (Canvas) API

Drawing graphics in a Web page has always been a big problem, and we have to use plug-ins such as Flash, Silverlight, and so on. However, HTML5 allows you to draw directly on a Web page, even allowing you to generate more interaction with the web, such as drawing graphics, zooming in and out, and so on. The legend is a small game made with HTML5.

5. Geographic (geolocation) API

HTML5 provides an application interface geolocation API for geo-information. Through this API, Web pages can be IP,GPS to access the user's geographic information, and users can also choose whether to turn off the feature.

6. Web page storage (Web Storage) API

HTML5 provides a web-store API that facilitates offline use of Web applications. In addition, the new API has the advantages of high security, efficiency and greater space relative to cookies.

7. Drag release (Drag and Drop) API

We can through the HTML5 drag and drop API to complete the drag-and-drop effect on the Web page, to avoid the previous Web page in the drag and drop process need to constantly modify the location of elements, code a wide range of drawbacks.

CSS3 new Features

1. RGBa

CSS3 's Rgba new features allow you to set the color and transparency of each element. The original opacity command can only set the element and its child elements.

2. Multi-column layout

CSS3 the new multiple-column layout selector generates a multiple-column layout without the HTML layout tag, while ' Number of columns ', ' column widths ', and ' column spacing ' can be defined.

3. Round Corners

The fillet function may be the most useful feature provided by CSS3. With Border-radius, you can add rounded corners to the specified HTML element without any difficulty. And you can also define the size of the fillet, and which corner is rounded, which is not rounded corners.

4. @font-face

When a Web page displays a font that is not installed by a user, the @font-face feature provided by CSS3 automatically downloads the corresponding fonts from the network silently for the user. So that designers can play more freely, regardless of whether the user's machine installed the appropriate font.

5. Other Features

In addition, CSS3 also brings us a gradient, prevents long string overflow, multiple backgrounds, and uses pictures as an element border.

Using a good CSS3, you can get more quickly in the past with a lot of plug-ins to get the effect. With the use of the elements themselves to replace most of the pictures, the speed of the Web page will be increased, which is originally a picture of the content, can also be retrieved by the search engine.

Compatibility of HTML5 and CSS3

The standards of HTML5 and CSS3 have not been formally completed, and the level of support varies from browser to store. It is essential to understand the compatibility of HTML5 and CSS3. The following connection is a specially tracked HTML5 and CSS3 compatibility site, interested friends can click to view: Http://www.findmebyip.com/litmus

Some resources you might be interested in.

http://www.apple.com/HTML5/showcase/

http://html5watch.tumblr.com/

Http://w3school.com.cn/index.html

http://www.mhtml5.com/

http://html5demos.com/

http://www.sencha.com/

http://www.findmebyip.com/litmus/

http://www.thetimes.co.uk/tto/news/

http://map.google.com/

Article Source: Baidu Commercial Product user Experience Department