Question

I’ve never used conditionals before (but knew I would eventually have to — I hate you IE). Basically, I have a banner at the top of my website using a css gradient:

background-image: linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -o-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -moz-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -webkit-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -ms-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.44, #2B7BB8),
    color-stop(0.72, #4394CE),
    color-stop(0.86, #58A8E1)
);

So I added a conditional statement to load a gradient image I prepared in the GIMP for all versions of IE:

<!--[if IE]> background-image:url('img/ieback.png'); <![endif]-->
<!--[if IE]> background-repeat:repeat-x; <![endif]-->

I don’t have IE on my computer (linux) so I used Adobe Browser Labs to test what my website looks like in IE. However, the image still doesn’t load. The final version of my css looks like this:

background-image: linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -o-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -moz-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -webkit-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -ms-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.44, #2B7BB8),
    color-stop(0.72, #4394CE),
    color-stop(0.86, #58A8E1)
);

<!--[if IE]> background-image:url('img/ieback.png'); <![endif]-->
<!--[if IE]> background-repeat:repeat-x; <![endif]-->

Am I doing something wrong?

Answer 1

http://www.quirksmode.org/css/condcom.html

It appears you can’t do conditional comments in the CSS file, only in the HTML file.

So if you wrapped a style element in an <!--[if IE]> <![endif]--> it should work

Having looked it up, CSS3 gradients are only supported in IE10 and conditional comments have been removed in IE10. So you can just target all versions of IE with that conditional comment.