有效的PhoneGap CSS: WebKit Tap Highlight Color

原文链接：文章1：http://phonegap-tips.com/articles/essential-phonegap-css-webkit-tap-highlight-color.html(此文非直译)

因为文章2：http://www.mobify.com/blog/beginners-guide-to-perceived-performance/ 这篇文章提供了四种方法，让你的移动web提升“感知性能”，看起来更像是原生app。

这四种方法中第一种是给button增加触摸状态，“为了让你的网站看起来更快，你需要让你的button在用户触摸以后立即反应，这样会让用户觉得发生了什么，而不是在等待。”

利用的方法也就是CSS3的新属性：-webkit-tap-highlight-color

在PC的web上，会有鼠标悬停在页面上，按下鼠标以后也会有反馈。而在移动设备上，利用手指点击，目标小，手指触摸以后，如果目标没有反馈，用户会不知道是否点击了相应的地方，是应该等待，还是应该再次点击。

假设在你的移动web页面上有这样的代码：

<a class="html5logo" href="javascript:void(0);"></a>

css如下：

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
}

这个链接会有默认的点击连接样式,如下图：

在phonegap中希望把这个灰色的默认高亮色去掉。实际上，当我们利用命令行创建phonegap项目的时候，默认的tap高亮颜色就已经自动帮我们去掉了。

简单的利用-webkit-tap-highlight-color 属性就可以实现透明的颜色

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}

因为是CSS，所以可以利用它去掉整个项目的tap颜色高亮，也可以只单独的使用在需要去掉颜色的元素上。去掉颜色以后，当然也需要给用户以反馈，所以我们考虑了用:active伪元素来实现。

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}

当使用上面的CSS在ios/android的浏览器上时，是没有任何反应的，还需要在html上动点小手脚。

<a class="html5logo"
  href="javascript:void(0);"
  ontouchstart="return true;"></a>

需要使用ontouchstart事件绑定来是的:active属性生效。

--------------------------------------------------------------------------------------------------------------------------------------

 

 

转载于:https://www.cnblogs.com/lilyimage/p/3363632.html