Study Hard HTML5 (4)--the support of the browser to semantic elements

Source: Internet
Author: User

After learning from the previous section, we have built a well-structured page that could not be displayed if browsing in an older version of IE browser.

After all, these semantic elements do nothing to support them, just let the browser treat them as normal <div> elements. So what we're going to do is add a point style rule to them. You can then get a super-reliable semantic element, even if you use a browser 10 years ago.

Add a style to a semantic element

When browsers encounter elements that they do not know, they are treated as inline elements. Most HTML5 semantic elements are block-level elements.

So we add a super rule that applies block-level display formatting rules for 9 HTML5 elements:

article, aside, figure, figcaption, footer, header, Main, nav, section, summary {    display: block;}

Let IE browser support HTML5 standard

For earlier versions of IE, there were problems with the above techniques, which refused to add styles to unrecognized elements.

Fortunately, there is a workaround to create elements through JavaScript, you can cheat IE, let it recognize foreign elements, such as the following code:

Document.createelement (' header ');

In fact, there is already a ready-made script to solve this problem, just need the browser to process the rest of the page before running.

To avoid unnecessarily loading JavaScript scripts, you can put the reference script in the IE conditional comment as follows:

<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head>  <MetaCharSet= "Utf-8">  <!--saved from url= (0014) about:internet -  <title>Apocalypse Now</title> <!--  Patch to make semantic elements work in IE8 and below.  - <!--  [If Lt IE 9]> <script src= "Html5shiv.js" ></script> <![ ENDIF]  -  <Linkrel= "stylesheet"href= "Apocalypsepage_revised.css"></Head>

The above code will only run in IE browser, it is also important to note that in the page call Html5shiv.js file must be added in the page

Html5shiv.js files can be viewed from the https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js download, You can simply download the Html5shiv JS file and let it be uploaded to your own server for a separate call.

Maybe GitHub is slow to open, here's a local download link for html5shiv.js: Html5shiv.rar

Study Hard HTML5 (4)--the support of the browser to semantic elements

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.