Jason Grigsby demos what I think is a pretty cool feature in CSS3: the ability to include orientation declarations in stylesheets. You can either put them in your link element like so:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
or directly in your stylesheets:
@media all and (orientation:landscape) {
[styles for landscape orientation]
}
@media all and (orientation:portrait) {
[styles for portrait orientation]
}
Jason's post just refers to the iPad's support for this declaration (and the iPhone's lack of support), but I've found that Google's Webkit-based browser on Android supports it, too. Sadly, Opera Mini for Android does not. I've taken his original demo and modified it to demonstrate the use of the inline, single-stylesheet method.
Neat idea, though, and one that I think will be more and more useful as mobile device use continues to increase. I can see people using this to create HTML5 web apps that can serve either computers or mobile devices with the same codebase.
Post a comment