Useful CSS3 support targeting iPhone and perhaps mobile opera? 1
Just discovered this article about Media queries in CSS3 on the very cool CSS3 Info Site
This is a css selector for targeting specific information about the browser. This is supposedly supported in Safari3 and therefore hopefully the iPhone Safari browser.
The example they give is about using min-width and max-width within selectors. This could therefore be used to target iPhone and more specifically vertical and horizontal viewing:
/* vertical */
@media handheld and (max-width: 320px) {
div#sidebar {
display:none;
}
div#main {
width:100%;
}
}
/* horizontal */
@media handheld and (max-width: 480px) and (min-width: 400px) {
div#sidebar {
width:30%;
}
div#main {
width:70%;
}
}
}This is obviously a completely invented example. And will likely not work at all. For example the pixel amounts I’m using are probably not correct.
The other interesting thing is that Opera supports this, I hope their mobile browsers also support it and further more that Nokia’s own webkit browser supports it.
Trackbacks
Use the following link to trackback from your own site:
http://stakeventures.com/articles/trackback/238
Apple doesn’t support the handheld profile, as it tries to emulate a “desktop class” browser without the limitations of most handheld browsers today.
So instead of using the handheld profile as you propose in your blog, Apple recommends to use the following instead. Also, it includes a trick so that CSS2 mediaqueries will still work right:
<link rel=”stylesheet” media=”only screen and (max-device-width:480px)” href=”small-devices.css” type=”text/css” />
<link rel=”stylesheet” media=”screen and (min-device-width:481 px)” href=”not-small device.css”>
The other trick you can do, useful if your font size isn’t working quite right on the iPhone, is to use the special style -webkit-text-size-adjust.
<tag style=”-webkit-text-size-adjust:none”> <tag style=”-webkit-text-size-adjust:auto”> (this is the default) <tag style=”-webkit-text-size-adjust:200%”>
There may be some other -webkit styles that we will learn about once docs are out.
My personal belief is that web developers should first attempt to see if they can get iPhone specific pages by create two different CSS files and/or -webkit style changes using the methods above, before going so far as to to use user agent checking to deliver different html files.