Question

I’ve been reading about the ‘only’ keyword but can’t find a definitive answer to this.

I’m interested to know if there’s a way, using only CSS (not Javascript), to avoid all older browsers that don’t understand media queries (e.g. old mobiles) and modern browsers that do understand media queries but that return false for them (e.g. smartphones looking at min-device-width of 740px) reading linked CSS files and downloading associated large background images. I’m concerned about loading times and bandwidth.

If this isn’t possible, I’m thinking I’ll use http://www.handsetdetection.com/features/mobile-browser-detection or http://www.hand-interactive.com/resources/detect-mobile-php.htm (server side solutions) to conditionally serve “full fat” stylesheets that contain perhaps larger images only to device widths of 740px and above, for example.

Answer 1

I’m pretty sure you either have to use server side script for detection, or javascript. But if you do server side, you can display out your own style sheets according to what you do or don’t want.

http://code.google.com/p/php-mobile-detect/

That might be good place to start for php prebuilt library.