说到编写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专题的订阅地址如下: