Using Media Queries
This technique gives a possible implementation for the CategoryContentAdaptation using CSS Media Queries.
Media Queries allow you to test for various characteristics of the user agent, and set presentation rules accordingly.
Pre-requesites:
- A browser that supports them - Opera does, don't know about others.
Otherwise you have to write your style sheet to ensure a sensible default. You might want to combine this technique with using MediaHandheld to make a mobile-specific style sheet as in the example below.
Code sample 1
This example tests the screen size, and selects pictures accordingly. Since some browsers won't download resources that are set as display:none it drops things that are undesirable.
@@To be safe from mistakes, maybe this should default to display none, then set display where the query is met...
@@ Done that (now it requires XHTML full, not Basic) -- Cedric
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Demo - CSS Media Queries</title> <style type="text/css"><[CDATA[ @media handheld and (max-device-width:200px) and (min-device-width:100px) { img.med {display:inline !important} img.tiny {display:none !important} } @media handheld and (max-device-width:400px) and (min-device-width:200px) { img.big {display:inline !important} img.tiny {display:none !important} } @media handheld and (max-device-width:100px){ img.tiny {display:inline !important} } ]]></style></head> <body><h1>CSS Media queries in action</h1> <p><img class="big" src="big.png" alt="big" width="350" height="120" style="display: none;" /><img class="med" src="med.png" alt="medium" width="150" height="90" style="display: none;" /><img class="tiny" src="tiny.png" alt="tiny" width="50" height="40" /></p> </body></html>