How to Get IE to Support CSS3
Cascading Style Sheets (CSS) control the look and feel of websites, and CSS3 is the newest specification for CSS. While CSS3 adds features such as gradients, drop shadows and rounded corners, Internet Explorer (IE) versions 6 through 8 do not support CSS3 at all. Adding a poly-fill file -- an HTC file that "fills in" the support IE is missing -- to your website will allow you to use some basic CSS3 properties. Of the few CSS3 poly-fills that exist, the best one to use for adding visual effects is CSS3 PIE (Progressive Internet Explorer).
Other People Are Reading
Instructions
-
-
1
Go to CSS3pie.com and download CSS3 PIE, a poly-fill script that adds limited CSS3 support for your website when visitors load it in Internet Explorer versions 6 through 8. Unzip CSS3 PIE on your computer and upload it to your Web server if your website is already online.
-
2
Open the CSS file associated with your website. Selectors in CSS such as "#mydiv" or "tagname," together with the property-value pairs contained between their curly braces, make up style rules. Add this code to every style rule containing CSS3 properties:
behavior: URL(path/to/PIE.htc);
Change "path/to/PIE.htc" to match the location of your PIE.htc file.
-
-
3
Locate any linear gradient in the CSS file and write a new property-value pair:
-pie-background: linear-gradient(top, #ffffff, #000000);
The above pair does not replace others in your code. This is an extra pair that adds support for CSS3 PIE only. Do not use "-pie-background-image." Change any values for the gradient, such as direction or colors, to match the gradient you want to use.
-
4
Change any RGBa (Red, Green, Blue and Alpha) color code in the CSS3 to hexadecimal. The CSS3 PIE poly-fill can use the color values in RGBa but will not render the colors with any transparency. Leave an RGBa value alone if that color will not look bad when rendered opaque.
-
1
Tips & Warnings
You can achieve many CSS3 effects using JavaScript fallbacks. These fallbacks often only add one effect at a time, though.
Consider allowing your website to degrade gracefully in older browsers. This means that although some users will not see rounded corners or gradients, they can still read and use the website.
CSS3 PIE works best with regular, "static" HTML websites. When applied to templates or themes for dynamic Content Management Systems (CMSs), the poly-fill file does not always work or may behave in strange ways.
This technique will not add text-shadowing support for your website. You should check that the color of your text does not interfere with legibility when the shadow is missing.
