编写 iPhone Friendly 的 Web 应用程序 (Part 4 - CSS)
2007-12-27 14:54 Cat Chen 阅读(3729) 评论(4) 编辑 收藏 举报说到编写CSS，大家的第一反应肯定是——有没有选择性CSS。有！我们可以设计一个CSS，使得只有iPhone上的Safari会采用它，其他浏览器都会无视它，这样我们就可能可以复用现有的XHTML页面代码，仅仅为它们引入新的CSS就能够适用于iPhone，无须重新编写页面。这个选择性CSS链接语句如下：
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet" />
Safari是支持media选择的，only screen声明该CSS仅用于屏幕显示（不用于打印），同时Safari还支持max-device-width这样的选项，限定屏幕宽度小于480的设备才采用该样式表，这就把iPhone与桌面浏览器划分开来了。
另一个做法是在服务器端就判断当前浏览器是否是iPhone上的Safari，从而选择返回哪个CSS文件，这可以通过user-agent进行判断，iPhone的如下：
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3
判断了浏览器之后，就可以开始针对Safari编写CSS了。Safari比较爽的一点是对CSS3的支持，设计PC端网页时总是要兼顾那个“后进”的IE，从而避免使用CSS3，或者需要确保IE在无视CSS3规则后仍然正确显示，现在不用为此而头痛啦，只要是Safari支持的就能用，针对一个浏览器设计就是比针对一堆浏览器设计要爽！
CSS3
接下来我们就列举一下Safari支持的CSS3属性吧：
边框
- -webkit-border-image - 让边框支持图片（iPhone上支持存在bug）
- -webkit-border-radius - 让边框支持远角
- -webkit-box-shadow - 让盒区域支持阴影（iPhone上不支持）
背景
- -webkit-background-origin / -webkit-background-clip - 控制背景的定位与剪裁
- -webkit-background-size - 控制背景的大小
- background - 多背景，如同单背景一样定义一个背景图片，多个图片定义之间用逗号分隔（未经测试）
色彩
文本特效
- text-shadow - 让文本支持阴影
- text-overflow - 控制文本溢出时的裁剪与视觉反馈
- word-wrap - 控制长单词换行
用户界面
- -webkit-box-sizing - 可以让盒模型变得基于边框而非内容
- resize - 让用户可以更改盒的大小（iPhone上不支持）
- outline - 设置盒的外边框
选择器
Safari支持大部分的CSS3选择器，你可以自己使用桌面端或iPhone上的Safari打开CSS Selectors Test进行测试，桌面端与iPhone上的Safari测试结果是一致的。Safari完全通过测试的CSS3选择器包括：
*, E, .class, #id, E F, E > F, E + F, E[attribute], :link, :visited, :before, ::before, :after, ::after, :first-letter, ::first-letter, :first-line, ::first-line, E - F, :root, :not(), :target, :enabled, :disabled, :checked
其它
- media - 根据media选择性加载CSS
- multi-column - 内容分栏支持（iPhone上不支持）
还有一些Safari自己做的CSS扩展没有列举出来。Safari完整的CSS属性支持列表请看这里：Supported CSS Properties。
表单
Safari支持对<input />元素比较高自由度的CSS定义，例如这样的：
实现所需的CSS属性上面已经列举了，所以不再详细说明，灵活运用就是了。值得注意的是，某些<input />的默认背景并非纯白色的，而是半透明的，这使得这些元素能够更好地和不同的背景颜色进行颜色混合。为了说明这一点，请先看白色背景下的示例：
然后再看看蓝色背景下的：
小结
CSS相关的话题也说完了，很简单是不是？大部分针对桌面浏览器进行符合Web Standards页面设计的设计师都能轻易掌握这部分内容，然而这只是实现设计的手段，到底如何设计一个界面，在iPhone上才算是拥有高度易用性的，这才是真正的问题。这个问题我们将在以后探讨，至少现在你能够将你自己的设计在iPhone上准确无误的实现出来了，那么我们下一步就进入JavaScript的讨论环节了。
本iPhone Friendly专题的订阅地址如下：
