CSS: are images requested if stated in CSS but later over-ridden?

Question

I'm building a web site that uses a fair amount of drop shadows and gradients. I can accomplish a lot of this via CSS's box-shadow properties.

Alas, we're still supporting IE, so we need to add background images in those situations.

I could be lazy and just give everyone the background images, but I'm trying to streamline things for those that are using the modern browsers. Ideally, I'd like to have those users not have to request the images.

So, I'm adding an extra class via javascript if the browser supports the box shadow (box-shadowSupport) and my CSS ends up looking like this:

.box {
    background: url('myImage.jpg');
}

.box-shadowSupport {
    background: none;
    [box shadow properties go here] 
}

If the HTML ends up looking like this:

<div class="box box-shadowSupport"></div>

Will the image be requested? Or does the browser understand that it isn't needed due to the second style over-riding the background image property?

If the image is requested, I need to rearrange my CSS and javascript so instead of over-riding a style via the cascade, I'll have to swap out the classes so the first isn't even referenced in the HTML.

Answer 1

I believe every web browser will treat this in it's own way - as usual :) My suggestion is to use a web proxy like Charles and see, if the image has been requested or not. And of course, test this in the different browsers.

Answer 2

What you might want to consider is defining the IE specific styles in a separate sheet and loading it with conditional comments, like this:

<!--[if IE]>
<link rel="stylesheet" id="ie-css" href="ie-specific.css"
    type="text/css" media="all" />
<![endif]-->

This will only load the sheet with IE-specific settings and you can override the other classes with !important markers. Conditional comments have been around since IE5, and any other browser will ignore the block above.

Answer 3

I would recommend just to skip the shadows in IE.

Most people use only one browser and they won't know that there have to be shadows. It isn't a big deal if the site looks different in different browsers as long they look normal (that means not glitchy).

Otherwise use with a if tag for ie specific css, and you can do drop-shadow there with:

.box {
    filter: progid: DXImageTransform.Microsoft.dropShadow(
            color=#818181,
            offX=5, offY=5, 
            positive=true);
}

For more about that see here.

Answer 4

I am pretty sure that all modern browsers will load 'myImage.jpg'. Actually, the code you provided described the pure CSS way of preloading images without using javascript :)