Text-Shadow IE-9

Question

I've a CSS3 text-shadow attribute that works for IE11, Google Chrome, Safari and Firefox. Is it possible to convert the text-shadow value to IE9 "compatible"? I want to have IE9 to have the same effect as IE11, Google Chrome, Safari and Firefox

.title {
    text-shadow: 0 1px 0 #ccc, 
    0 2px 0 #c9c9c9, 0 3px 0 #bbb,
    0 4px 0 #b9b9b9, 0 5px 0 #aaa,
    0 6px 1px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.2),
    0 20px 20px rgba(0, 0, 0, 0.15);
}

Answer 1

this is explained here: https://stackoverflow.com/a/6905713/1165121 IE 6-9 uses their own proprietary filter method.

you should rethink about looking webpages exactly the same in every browser, which is a bit obsolete nowadays.

Answer 2

I think you can try http://css3pie.com/ which is basically a compativility layer for CSS3 on older IE versions. For example:

.title {
    text-shadow: <whatever>;
    behavior: url(path/to/pie_files/PIE.htc);
}

Answer 3

Here are some of the alternatives you have:

• Write another nice looking css layout that is supported by older browsers.

• Use images. There are a few text to image converters out there, also autmated prozesses are possible (with a bit amount of work)

• You can try to find a JS-SVG library with VML support and use it to create images on the fly. VML is a built-in vector graphics format of old-ies which is similar to svg.