Home > Developer > JavaScript

To enable ie9 or earlier versions to support mainstream html5 technologies such as canvas and css3, ie9html5

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

To enable ie9 or earlier versions to support mainstream html5 technologies such as canvas and css3, ie9html5
1. preface. 
Ie6, 7, and 8 support html5, which seems difficult. In fact, there is a common method, namely introducing js and css. This pluggable introduction is very helpful for development. For example, the following example shows how to enable the webpage to support canvas and css3.
2. Example. 
The following is an example of html that shows a red ball in the canvas.
Java code

  1. <! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> fewfwe </TITLE>
  5. <Head>
  7. <Style type = "text/css">
  8. Body {
  9. Background: #444;
  10. Color: # FFF;
  11. Font-family: Helvetica, Arial, sans-serif;
  12. Text-align: center;
  13. }
  15. # Cv {
  16. Width: 600px; height: 400px;
  17. Background: #000;
  18. Border-radius: 20px;
  19. Padding: 20px;
  20. Margin: 20px auto;
  21. Box-shadow: 0 040px #222;
  22. Behavior: url (public/ie-css3.htc );
  24. }
  25. </Style>
  27. <Script type = "text/javascript">
  28. Function test (){
  29. Var ctx = document. getElementById ("cv"). getContext ("2d ");
  31. Ctx. fillStyle = "# aa0000 ";
  32. Ctx. beginPath ();
  33. Ctx. arc (100,100, 25, 0, Math. PI * 2, true );
  34. Ctx. closePath ();
  35. Ctx. fill ();
  36. }
  38. Window. onload = test;
  39. </Script>
  41. </Head>
  42. <Body>
  43. <! -- [If IE]>
  44. <Script src = "public/html5.js" type = "text/javascript"> </script>
  45. <Script type = "text/javascript" src = "public/excanvas. compiled. js"> </script>
  46. <! [Endif] -->
  47. <Canvas id = "cv"> </canvas>
  48. </Body>

This example cannot run in ie8, but Firefox can. If you want it to run in ie6, 7, and 8, you need to do two things.
2.1 Add an html5 ie auxiliary js file and a canvas compatible js File 
This file can be named html5.js. It is an open source js file and can be used with confidence. It mainly solves the problem of html5-compatible js in versions 6, 7, and 8. The canvas compatibility file is named excanvas. compiled. js. I have packed all the files in the demo. Yes.
2. Add a css file and reference it on the page. 
The css file is named ie-css3.htc, which solves the problem of ie6, compatible with css3.
3. Download the demo. 
See the attachment.
4. example running result 
See the image below. It is a red circle displayed on the Black canvas.

5. Summary 
Ie6, 7, and 8 are compatible with other html5 technologies. In fact, they can all follow the example of js and css. In this way, html5 is galloping on the Mobile End, clearing the last obstacle.

  • Test21.rar (13.6 KB)

How can I make IE9 or earlier versions support Html5 and Css30?

Html5.js is used to allow IE to recognize html5 elements (the principle is to generate related html5 elements on the page and tell IE that such elements are useful, otherwise they will be filtered out by IE ), therefore, it cannot support Css3.0 for versions earlier than IE9, because the underlying browser (rendering engine) is supported and has nothing to do with js.

Html5 css compatibility with IE 9 browsers

Use this js Code for compatibility
<Script type = "text/javascript">
(Function (){
Var html5elmeents = "address | article | aside | audio | canvas | command | datalist | details | diils | figure | figcaption | footer | header | hgroup | keygen | mark | meter | menu | nav | progress | ruby | section | time | video ". split ('| ');
For (var I = 0; I Document. createElement (html5elmeents [I]);
}
})();
</Script>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
html5 and css3 video tutorials features of html5 and css3 html5 and css3 website tutorial html5 canvas drag and drop fopen failed to open stream no such file or directory update ie8 to ie9 what s new in html5 and css3
Related Article
JavaScript solution to the eight Queens Problem method summar...
Ajax and 302 response code test_javascript-js tutorial

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More