views:

69

answers:

2

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

+1  A: 

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).

Mef
Thanks, that explains it. I was using the image using the img tag.
Yeoh Ray Mond
Please accept the answer if it was helpful ;-)
Mef
A: 

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!

toscho