What are the new Interaction Features of HTML 5 & amp; CSS 3?

　　

 

This image is created using Phosotshop. However, you cannot find it in the search engine, and the search engine is not powerful enough to recognize text in images. In addition, because the image size is not too small, users who may experience slow network speeds have to wait patiently for the image to refresh. Is there a new way to avoid these shortcomings?

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 features they have to further think about what we can do through HTML5 and CSS3.

　What is HTML5 and CSS3?

HTML and CSS are not hard to understand. HTML is the main language used to form a webpage. In this language, we can explain the webpage format, content, and display effect to the computer. CSS is a language specifically used to control the page display effect. At this time, the problem arises. Why should we use CSS separately? Isn't HTML able to control the Display Effect of web pages? To answer this question, let me give a simple example:

　　

 

Have you found that if you describe too many things and want to clearly describe them, we have to repeat a lot of information? The same is true for the page language. In this case, the page language is messy and difficult to understand. By integrating the language that controls the display effect into CSS, we can not only ensure the simplicity of the main part of the page language, but also easily reuse various language sets.

HTML5 and CSS3 are the latest versions of HTML and CSS. They are not yet standardized, but the new features that have been published have made us feel at ease.

　New Feature of HTML 5

1. New Content tag

　　

 

The content tag levels in HTML4 are the same and cannot be distinguished. The content tags in HTML5 are independent of each other and have different levels. Search Engines and statistical software can quickly identify each part of the content.

2. Better Table System

　　

 

Now, you can discard JavaScript or PHP and define tables only through HTML5. You can define the input format of each table unit or whether the unit is required.

3. Audio and Video APIs

　　

 

　　

 

HTML5 not only allows you to directly integrate videos and audios on webpages, but also provides a set of APIs to control media playback, the elements used to control media playback can also be edited. Therefore, HTML5 can replace common flash plug-ins in the video and audio layers.

4. Canvas API

　　

 

Drawing Images on webpages has always been a big problem. We have to use flash, silverlight, and other plug-ins. However, HTML5 allows you to draw directly on the web page, or even allow you to generate more interactions with the web page, such as drawing images, enlarging and downgrading, and so on. The legend is a small game made with HTML5.

5. Geolocation API

　　

 

HTML5 provides the Geolocation API, an application interface for geographic information. Through this API, web pages can obtain users' geographic information through IP addresses, GPS, and other methods. You can also choose whether to disable this function.

6. Web storage APIs

　　

 

HTML5 provides APIs for Web storage to facilitate offline use of Web applications. In addition, the new API has the advantages of high security, high efficiency, and greater space compared with cookies.

7. Drag and drop API

　　

 

We can use the HTML5 Drag and drop API to complete the Drag and drop release effect on the web page, avoiding the disadvantages of constantly modifying the element location during the Drag and drop release process on the web page.

　New Feature of CSS3

1. RGBa

　　

 

The new RGBa feature of CSS3 allows you to set the color and transparency of each element. The commonly used opacity command can only be used to set elements and their child elements.

2. Multi-column layout

　　

 

The multi-column layout selector provided by CSS3 can generate multi-column layout without HTML layout tags. It can also be defined by the 'number of column', 'column width', and 'column space.

3. Round corners

　　

 

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

4. @ font-face

　　

 

When a user does not have a font installed on the webpage, the @ font-face feature provided by CSS3 automatically and silently downloads the corresponding font from the Internet. In this way, designers are more free to play, without considering whether the user's machine has installed the appropriate font.

5. Other features

In addition, CSS3 also provides gradient, preventing long string overflow, multiple backgrounds, and using images as element borders.

With CSS3, you can quickly get the effects of many plug-ins in the past. Similar to the use of elements to replace most images, the loading speed of web pages will be improved. The content of these images can also be retrieved by search engines.

Compatibility between HTML5 and CSS3

HTML5 and CSS3 standards have not been formally completed, and various browsers have different levels of support for them. It is necessary to understand the compatibility between HTML5 and CSS3. The following link is a website dedicated to tracking HTML5 and CSS3 compatibility. If you are interested, click to view it:

Http://www.findmebyip.com/litmus

Resources you may 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://maps.google.com/