How to Support CSS3 in IE and other IE Related Tips.

The main problem of use CSS3 in website is IE6 to IE8 does not support CSS3 property.But now I will give some tips so that CSS3 will work fine in IE browsers.

TIP 1 : (Support CSS3 in IE)

Go to this website and download the package. (www.css3pie.com)

Here is a small example to quickly apply css3 border-radius properties,

Add the PIE.htc in the css folder,Apply the following styles to your class.

CSS3 and IE

.rounded-corners {     

   -moz-border-radius: 20px;

   -webkit-border-radius: 20px;    

   border-radius: 20px;    

   behavior: url(css/PIE.htc);

}

After the inclusion of this behaviour property CSS3 tags will work on IE6, IE7, IE8.

For more details you can visit www.css3pie.com for detailed examplesand documentation.

TIP 2: (Support Rounded Corner in IE )

We can include a java script file for rounded corner support in IE.The javascript file name is curvycorners.js .

This javascript file will work for those browsers which are not supporting 'border-radius' and will automatically make the divs rounded corner.

Example of the CSS is

#Rounded_Corner {

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    border-radius: 10px;

}

But to make it working in IE, you have to include 'curvycorners.js' file in your html page.

<script type="text/javascript" src="curvycorners.js">

TIP 3: (Support Blink text in IE)

IE don't support <blink> tag,Javascript function blink() or text-decoration:blink.

So it's very difficult to add blink text in IE browser.

But I am shareing some tips for add blink text in IE browser.For that you have to add a javascript inside of head tag and then write the text inside of <blink> markup.

Code :

Add the following javascript inside head tag.

function Blink() {

 var blink = document.all.tags("blink");

 for (var count=0; count<blink.length; count++)

 blink[count].style.visibility = blink[count].style.visibility == "" ? "hidden" : ""

}

function BlinkStart() {

 if (document.all)

 setInterval("Blink()",500)//The speed of the blink is 500

}

And in HTML we have write text inside a blink markup.Like -

<blink>This text will blink.</blink>

If we want we want to change the blink markup to anything else.For that in javascript we have write that tag name.Like

var blink = document.all.tags("yourTagName");

Then in HTML

<yourTagName>This text will blink.</yourTagName>

Thanks for reading this blog.Hope you enjoy it.Follow this blog to get updated about design stuff.