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>