iPad-Specific CSS
Continuing with my enthusiasm about Apple's iPad, I checked out what Apple has done to update Safari for the iPad. In general, not too much. People have been complaining about poor rendering of certain websites, etc. However, Apple has implemented some new CSS media queries to allow designers to make sites that work more dynamically with iPads.
Specifically, there are now media queries that let the iPad select CSS files based on whether it is currently in a landscape or portrait orientation. For example:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
This bit of code will select portrait.css if the iPad is held vertically, and landscape.css if held in landscape. I really don't expect many web developers to be iPad optimizing their sites in this manner, but for those who want to create immersive iPad web apps, this will be a good addition to their toolbox.
If you're curious, this media query also works in newer versions of Firefox and Safari, selecting portrait if the height of the visible screen is greater than the width and vice versa for landscape. Check out this demo page if you'd like to try it for yourself.
Comments