2007年12月26日星期三

编写 iPhone Friendly 的 Web 应用程序 (Part 4 - CSS)

说到编写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属性吧:

边框

背景

色彩

  • HSL - HSL色彩
  • HSLA - 带Alpha通道的HSL色彩
  • opacity - 透明度
  • RGBA - 带Alpha通道的RGB色彩

文本特效

用户界面

  • -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专题的订阅地址如下:

4 条评论:

  1. 您好~
    我寫了一個可以同時相容於Firefox與iPhone Safari的網頁
    可是卻一直遇到CSS衝突的問題
    可以請你幫我看看是什麼原因嗎?
    http://www.applework.com/test.htm

    同一個Style在Firefox上看到的連結是一樣大小
    可是在iPhone Safari卻會有兩種不同的大小
    這是什麼原因造成的呢?

    回复删除
  2. 您好~
    我寫了一個可以同時相容於Firefox與iPhone Safari的網頁
    可是卻一直遇到CSS衝突的問題
    可以請你幫我看看是什麼原因嗎?
    http://www.applework.com/test.htm

    同一個Style在Firefox上看到的連結是一樣大小
    可是在iPhone Safari卻會有兩種不同的大小
    這是什麼原因造成的呢?

    回复删除
  3. 我没办法打开该地址。

    回复删除
  4. 可能是我剛剛在修改的緣故?
    還是你無法開啟香港的網頁連結呢?

    回复删除