iOS6 Safari 带来的前端体验改进

1.远程调试

这个应该是最期待的功能,以前介绍过两三种调试方法,但原生的会更加方便,效率也更高。

使用方法:

  1. 首先要在 Mobile Safari 中开启 Web Inspector,设置 > Safari > 高级 > 调试控制台;
  2. 然后在 Mobile Safari 中打开需要调试的页面;
  3. 最后在桌面 Safari 中选择 开发 > iPhone Simulator > 选择调试页面 即可。

Continue reading

Web模板引擎——Mustache

Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档。当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hogan 、ASP 下的 aspTemplate、以及 PHP 下的 Smarty,这里主要介绍基于 Javascript 语言的模板引擎,目前流行有 Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等,jsperf.com 上可以看到它们的性能对比,首先先介绍下 Mustache
Continue reading

CSS icon 拼装指南

一、必要的CSS属性

1.伪类 ::before & ::after
我们知道可以给 HTML标签添加伪元素,其中::before、::after能够应用几乎所有的 CSS 属性,也就是说可以通过添加伪元素让一个HTML标签实现3个标签的样式效果,这样可以减少在复杂的 CSS icon 中的标签数量,让HTML结构更简洁。

div

Continue reading

Retina时代的前端视觉优化

随着New iPad的发布,平板也将逐渐进入Retina时代,在高分辨率设备里图片的显示效果通常不尽人意,为了达到最佳的显示效果就需要对图片进行优化,这里介绍一些优化方法:

一、用CSS替代图片

这一点在任何时候都适用;只是在当前我们可以更多的使用样式表来制作出设计效果,CSS3的圆角、渐变、模盒阴影、字体阴影能帮助我们处理绝大多数视觉效果,并且在各种分辨率下都有良好的表现。
Continue reading