西红柿爱番茄

这几天接到北京提出的iphone网站开发项目，看到视觉稿，也确实够晕的。仔细想想，需要使用到很多css3圆角和背景技术，从这点来说，玩玩css3，也确实不错。

上面列出的部分视觉稿中，按钮的样式、导航的渐变背景，以及带有icon前缀修饰的按钮，渐变背景和圆角都是用了css3的-khtml-border-radius，background:-webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#d8d8d9))。css3，玩起来还是不错的，在这里我不想讨论css3的使用技巧，只是想把在做的过程中遇到的一些问题，亮出来晒晒。

1. HTML的head标签内需要显示声明meta属性：<meta name=”viewport” content=”width=device-width; minimum-scale=1.0; maximum-scale=1″ />，minimum-scale和maximum-scale主要作用是控制内容的显示比例。
2. iphone在使用css3的时候，要通过-khtml为前缀的方式，-webkit的方式不管用。比如：-khtml-border-radius
3. iphone不支持css的inline-block属性
4. iphone没有:hover状态，不过可以通过iphone的ontouchstart和ontouchend两个js事件来模拟触屏特效，比如上面展示了搜索结果展示的list和按钮样式变化的情形，我都是用js来实现的。不过这也有个不可避免的问题，就是iphone默认有这么个触屏效果，虽然可以在ontouchstart和ontouchend事件中通过return false可是实现，但是这取消了链接或者按钮默认的功能，这个需要衡量。(javascript示例代码如下）
5. iphone在横屏和竖屏的情况下，字体会发生变化。这可以通过在html中用css的属性：-webkit-text-size-adjust:none;声明一下，就可以防止横竖屏切换的时候字体发生的变化，导致其他样式连锁变化。
6. iphone支持大多数的css3属性：我使用到的就有:last-child,:first-child,nth-child(n),:last-of-type,:first-of-type等等，通过只用这些css属性，可是节省很多麻烦。
7. iphone同时也好支持几个class类做判断的功能，比如：<div class=”test1 test2″></div>，编写这样的css规则用于判断div是有两个class类：.test1.test2{background:#f00;}。只有div的class中同时包含了test1和test2这两个类，上面的css规则才生效。

[javascript]
var addListener=function(el,type,fn){
el.addEventListener(type,fn,false);
}
var $=function(id){
return document.getElementById(id);
}
addListener($("nav-next"),"touchstart",function(e){
this.className=this.className+" nav-next-touch";
});
addListener($("nav-next"),"touchend",function(e){
this.className=this.className.replace(" nav-next-touch","");
});
[/javascript]

通过这次iphone wap网站的开发，感受也是颇深的。css3、html5能极大的简化我们前端目前所做的工作。

更多详情参考：
《10条小代码开发 iPhone友好的网站》，《CSS3 Previews》，《iPhone CSS—tips for building iPhone websites》，《iPhone & iPod Detection Using JavaScript》，《Tutorial: Building a website for the iPhone》

附录：

在wap网站某个页面中，需要设计一个星级的样式，示例图如下所示：

起初是想这样设计的：把红色和白色的五个星一起截下来，使用两个span标签（或者其他行内标签也成），外面的span使用五个白色的标签做背景，里面的span使用红色的五个星做背景，之后根据需要来设定里面的span的宽度。

可是再想想，可以利用background的repeat来实现背景的扩展，这一样就只需要使用一个白色星号和一个红色星号就ok了。

《演示页面》