inline hack css lower to IE9 ? (or all non CSS3 capable browsers)

Question

I need a hack to tarjet internet explorer lower to 9, or to be more specific; i need a inline CSS hack to tarjet non CSS3 capable browsers

_prop:val -> ie6
*prop:val -> ie6 & ie7
????????? -> ie8 & ie7 & ie8

I am using gradients and images for those browsers, but ie8 does not support it... so i want to load the alternate image only if necessary

( please avoid answers suggesting to use external stylesheet using conditional coments or using javascript. I know that this code would be invalid, but its just for one little thing. Plus i am curious to know if its posible :) )

Answer 1

I am using gradients in IE8 in a project. It does work !

 <style>
        #gradient {
            color: #fff;
            height: 100px;
            padding: 10px;
            /* For WebKit (Safari, Google Chrome etc) */
            background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
            /* For Mozilla/Gecko (Firefox etc) */
            background: -moz-linear-gradient(top, #00f, #fff);
            /* For Internet Explorer 5.5 - 7 */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
            /* For Internet Explorer 8 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
        }
    </style>

for box shadow there seems to be a workaround like this:

.shadow {  
    zoom: 1;  
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=0, Strength=3)  
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=45, Strength=2)  
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=90, Strength=3)  
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=180, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=225, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=260, Strength=3)  
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=305, Strength=2);  
     -moz-box-shadow: 0 0 5px #222; /*Mozilla-basierte Browser (z.B. Firefox)*/ 
     -webkit-box-shadow: 0 0 5px #222; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/ 
     box-shadow: 0 0 5px #222; /*CSS3 Standard*/ 
 } 

for border-radius there is no support until ie9, as far as I know. I'm using several jQuery plugins to achieve border-radius in IE. hope this code helped you !

Answer 2

You don't need a hack, since no current browser supports all of CSS3.

Instead, simply specify fallback properties for older browsers, like this:

#selector {
    background: url("gradient.png");
    background: gradient(...);
}

Answer 3

You need to use this:

prop: val\9

Putting \\9 directly at the end of any value will target just IE8 and below