Let Ie6/ie7/ie8 browser support CSS3 Properties

First, download

You can click here: IE-CSS3.HTC, this gadget is to let IE browser support CSS3 performance of the key stuff.

Second, what's on the top?

First of all, say. htc file,. htc file is a script file, I personally think that with the JS file belongs to the same goods, but, it seems that HTC is an Internet Explorer (IE) bastard, only IE to recognize it. HTC files can be used to describe web behavior, and Web behavior allows programmers to "connect" custom functionality to existing elements and controls, rather than having to let users download binaries (such as ActiveX controls) to do this. stop! Don't fork away, donuts. If you are interested in HTC files, see here.

This IE-CSS3.HTC file of this article look at the name, look at the appearance of what it is to do, let IE browser support CSS3 some of the properties. Yes, it is through the script for IE browser to add some of the CSS3 standard behavior (more popular several). The first major script for this HTC is as follows:

function supportsvml () {    if (typeof supportsvml.supported = = "undefined") {        var a = Document.body.appendChild ( Document.createelement (' div '));        a.innerhtml = ' <v:shape id= "Vml_flag1" adj= "1"/> ";        var b = a.firstchild;        b.style.behavior = "url (#default #vml)";        supportsvml.supported = b? typeof B.adj = = "Object": true;        A.parentnode.removechild (a);    }    Return supportsvml.supported}

Sensible understand basically know, this does not with JS script a mold out of. In other words, HTC is just a JS script to South Korea to complete a capacity, for a pair of vest only.

Third, how to work

To say the principle of work, there must be a new role, that is, "VML." VML is the abbreviation for the vector Markup Language (vectorial Markup Language). The markup language used by VML to vectorize graphics data. This is a language based on XML syntax that is presented to the company by AutoDesk, Macromedia, and Microsoft and HP. VML is equivalent to the brush inside IE, can achieve the graphics you want, and combined with the script, you can make the graphic dynamic effect. VML was released by Microsoft September 1999 with IE5.0 ... For more information on VML, you can click here: VML Encyclopedia

If you want me to say, I think it is IE browser's Queen's paintbrush, specifically for IE painting. So, ie illegitimate children HTC plus ie private brush VML can realize some IE proprietary graphics and performance, just can achieve some of the CSS3 effect IE does not support.

Iv. How to use

It is easy to use, see the following sample code:

. box {  -moz-border-radius:15px;/* Firefox *  /-webkit-border-radius:15px;/* Safari and Chrome */  Border-radi us:15px;  /* Opera 10.5+, as well as using IE-CSS3 's IE browser */  -moz-box-shadow:10px 10px 20px #000;/* Firefox */  -webkit-box-shadow:10px 10px 20px #000; /* Safari and Chrome */  box-shadow:10px 10px 20px #000,/* Opera 10.5+, and IE browser using IE-CSS3 *  /Behavior:url (IE-CSS3 . HTC); /* Notify IE Browser invoke script to act on ' box ' class */}

As you can see, in addition to the last addition of behavior, the CSS3 attribute is the CSS3 attribute, which does not require makeup, retouching, or incarnation as a transformer, which is the advantage of this approach.

V. Questions and necessary explanations

After all, not the browser's own properties, the use of the problem is unavoidable, here are some considerations, it can be said that the limitations of the method:

1. The current element must have a positional property, such as a position:relative or Position:absolute attribute.
2. Z-index value must be higher than the surrounding elements, otherwise ... can only say sorry ~ ~

Vi. supported styles and status descriptions

See the table below:

style	effective	Invalid
Border-radius	Set fillet properties for element Four Corners Element border	Just set a corner of the fillet property
Box-shadow	Blur size parameter Offset value	Colors other than black (#000) are not supported
Text-shadow	Blur size parameter Offset value Color values	The performance of IE and firefox/safari/chrome have a little difference, the reason is unknown

Vii. Examples and demonstrations

I made a demo page myself, the effect is CSS3 fillet and projection effect, you can ruthlessly click here: IE support CSS3 demo

The following are the effects under the IE6 browser:

Viii. Conclusion

This HTC file is written by a foreigner, so if you encounter an unknown problem, you can ask me, but I can't guarantee a satisfactory answer. That's all, good luck to you.

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=783

Let Ie6/ie7/ie8 browser support CSS3 Properties