New interactive features of HTML5 & CSS3

This picture of the title of this article is made with Phosotshop. However, in search engines you can not search for it, search engine is not strong enough to recognize the text inside the picture. And because the volume of the picture is not too small, may be slow Internet users in the browsing time have to patiently wait for the image to 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 further think about what we can do through HTML5 and CSS3.

What are HTML5 and CSS3?

HTML and CSS are not difficult to understand. HTML is the primary language that makes up a Web page. Through this language, we can explain to the computer page format, content, display effect and so on. CSS is a language designed to control the display of Web pages. At this point, 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 we have to repeat a lot of information when we describe things too much and want to describe things clearly? Page language is the same, in this case appears disorganized, very difficult to figure out the clue. By integrating the language of control display into CSS, we can not only guarantee the brevity of the main parts of the page language, 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 currently set, but the new features that have been announced have made us excited.

HTML5 's new

1. New Content Tags

The content label level in HTML4 is the same, and it is not possible to differentiate between sections. The content tags in HTML5 are independent of each other, the level is different, the search engine and statistic software can quickly identify the content of each part.

2. A better form system

Now, you can discard JavaScript or PHP and define the table only by HTML5. You can define the input format for each table cell, and you can also 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 also provides a rich set of APIs to control media playback, and the elements that control media playback can be edited as well. As a result, HTML5 has actually been able to replace popular flash plugins on video and audio levels.

4. Canvas API

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

5. Geography (geolocation) API

HTML5 provides the application interface geolocation API for geographic information. Through this API, the Web page can be Ip,gps and other ways to obtain the user's geographic information, while the user can also choose whether to turn off this feature.

6. Web Storage (Web Storage) API

HTML5 provides a web-stored API for offline use of Web applications. In addition to this, the new API has the advantages of high security, efficiency, and space as opposed to cookies.

7. Drag release (Drag and Drop) API

We can use the HTML5 drag and drop API to complete the drag-and-drop in the Web page, to avoid the previous page in the Drag and drop release process need to constantly modify the location of elements, code a variety of drawbacks.

CSS3 new Features

1. RGBa

The new RGBA feature of CSS3 allows you to set the color and transparency of each element. The original opacity command only sets the element and its child elements.

2. Multi-column layout

CSS3 the new multi-column layout selector creates multi-column layouts without the need for HTML layout tags, and the ' Number of columns ', ' column widths ', and ' column spacing ' can be defined.

3.Round Corners

The rounded corners feature is probably the most useful feature that CSS3 offers. With Border-radius, you can add rounded corners to the specified HTML element without any difficulty. You can also define the size of the fillet, and which corner is rounded and which corner is not rounded.

4. @font-face

When a Web page shows a font that a user does not have installed, the @font-face feature provided by CSS3 automatically and silently helps the user to download the appropriate font from the network. This allows designers to play more freely, regardless of whether the user's machine has the appropriate font installed.

5. Other Features

In addition, CSS3 gives us the ability to ramp up, prevent string overflow, multiple backgrounds, and use images as element borders.

With good CSS3, you can get the effect of using many plugins more quickly. With the use of the elements themselves to replace most of the images, the loading speed of the page will be improved, these are the contents of the image, can also be retrieved by the search engine.

Compatibility of HTML5 and CSS3

The standards of HTML5 and CSS3 are not formally completed, and the level of support for each browser varies. It is essential to understand the compatibility of HTML5 and CSS3. The following connection is a website dedicated to tracking HTML5 and CSS3 compatibility, and interested friends can click to view:

Http://www.findmebyip.com/litmus

New interactive features of HTML5 & CSS3