Can a stylesheet for handhelds skip loading images

Question

I have a stylesheet for desktops, and another for handhelds. The web page displays some images when displayed on the desktop, but hides those images when displayed on handhelds. The page appears as designed for both desktops and handhelds.

When I check the server logs, I find that the handheld is actually still loading the images, just not displaying them. Is there a way to stop the handheld from loading the images entirely, since it doesn't need them, without having to maintain two sets of web pages? Can it be done using just stylesheets?

Thanks in advance.

Ray Mond

Answer 1

Include the images you don't want to display on the mobile devices as background image. In the browser stylesheet you then can use

.element { 
    background: #FFF url('image.png') no-repeat left top; /* or whatever */
}

while in the handheld stylesheet you just don't set a background image, so, depending on the exact usage, you could use

.element {
    display: none;
}

or

.element { 
    background: #FFF;
}

However, it won't be possible to remove images you include with <img src="" /> afterwards through CSS rules (just display: none etc, but that wouldn't stop them from loading, as you noticed).

Answer 2

Send your stylesheet per HTTP header before the markup:

Link: <compact.css>; rel="stylesheet"; media="handheld"

Then the most used handheld browser – Opera – won’t load the images. WebKit (Safari) still does, however – even background images for hidden elements!