What are the new features and elements removed from HTML5\CSS3? How do I handle browser compatibility issues with HTML5 new tags? How do I differentiate between HTML and HTML5?

Source: Internet
Author: User

(1) HTML5 is now not a subset of SGML, it is mainly about the image, location, storage, geographical location and other functions of the increase.

    • Painting canvas elements;

    • Video and audio elements for media playback;

    • Local offline storage Localstorage long-term storage data, the browser is closed after the data is not lost, sessionstorage data is automatically deleted after the browser is closed;

    • Semantically better content elements, such as article, footer, header, nav, section;

    • form controls, calendar, date, time, email, url, search;

    • The new technology Webworker,websockt and geolocation.

(2) CSS3 new features:

    • Achieve rounded corners (Border-radius), Shadows (Box-shadow), Border picture (border-image);
    • Add effects to Text (Text-shadow), Force text Wrapping (word-wrap), linear gradient (linear-gradient);
    • Achieve rotation transform:rotate (90deg), zoom scale (0.85,0.90), translate (0px,-30px) positioning, tilt skew ( -9deg,0deg);
    • Added more CSS selectors, multi-background, RGBA ();
    • The only pseudo-elements introduced are:: Selection;
    • Implement media Query (@media), Multi-column layout (flex).

(3) The removed element

    • Elements of pure expression: basefont,big,center,font,s,strike,tt,u;
    • Elements that have a negative impact on usability: frame,frameset,noframes;

(4) HTML5 new label browser compatibility problem is that the browser does not recognize the HTML5 new label and can not be used, there are two ways to solve:

    • Method 1: Implement the label is recognized

The Document.createelement (TagName) method allows the browser to recognize new tags, and after the browser supports new tags, you can also add CSS styles to the new tags.

    • Method 2:javascript Solution

A) Use Html5shim:

Call the following code in

<!--[If Lt IE 9]>

<script> src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" </script>

<! [endif]-->

You can also download the file directly to your website, but this file must be called in the head tag.

B) using the Kill IE6

Call the following code before </body>:

<!--if LTE IE 6]>

<script src= "Http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js" ></script>

<! [endif]-->

(5) distinguish between HTML and HTML5:

    • DOCTYPE statement
    • New elements

What are the new features and elements removed from HTML5\CSS3? How do I handle browser compatibility issues with HTML5 new tags? How do I differentiate between HTML and HTML5?

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.