元旦过后又长一岁，然而活到老学到老这个道理是不变的。这几天把手上一部分WordPress网站升级到最新版4.4，就学到新东西了。发现4.4版给所有在文章内容区的图片都加上了两个属性：srcset和sizes。比如：
这俩个属性的作用是为不同显示尺寸加载不同的图片源，这样就能在图片本身做到“响应式”，而不仅仅是跟随屏幕尺寸了。 查看详细
这个问题主要发生在iOS的浏览器上，他们有时候会有一些“自作聪明”，自动把页面上的一串数字识别成电话号码，这样用户不小心点击这串数字，就拨号了。所以我们习惯给那些要在手机上访问的响应式页面增加一串meta标签，以阻止移动端浏览器的这些自动行为。
1 2 3 4 | <meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="email=no" /> <meta name="format-detection" content="address=no" /> <meta name="format-detection" content="date=no" /> |
其实之所以iOS的浏览器会自动识别页面上的数字为电话号码，就是因为它默认的format-detection中有一条telephone=yes。人为把它设置成no就阻止了这个功能。那么在我们需要真的实现点击链接播电话的时候，只要在link上用标准的“tel:”写法就可以了：
1 | <a href="tel:8602188888888">+86 021 88888888</a> |
前两天在一个商城项目中，客户希望页面上出现一个活动倒计时的效果，为了方便调用，我想到利用短代码+参数实现任意调用。实现效果是这样的：
查看详细
今天接到一个奇怪的需求，要给一个网站添加两套谷歌分析代码。按照个人对JS的感觉，直接复制粘帖两段谷歌分析给出的官方代码，会牵涉到对象的不规范重复调用，即使页面不报错，也一定会影响分析数据。既然是谷歌的问题，自然只能到谷歌去找答案。结果倒是也很快找到了。
首先，谷歌官方系统生成的统计代码是这样的，其中UA-×××××××-×是你自己的谷歌分析账号：
1 2 3 4 5 6 7 8 9 | <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-×××××××-×', 'auto'); ga('send', 'pageview'); </script> |
稍微有点经验的前端应该知道IE7-有一个经典的渲染问题，表现在对display为inline-block的元素的不友好上。我们也知道只要重新给这个元素单独宣布一条display:inline，就能解决问题。但今天我要说的不是这个，最近新完成的一个网站，在IE7下浏览，就有包括导航和热图这样的大块元素没有正常显示：
经过检查，发现这些没有正常显示的元素，都有一个共同的CSS属性- position:relative，导致这些元素在IE7中没有被正常的渲染到，就没有显示出来。百度了一下，这个问题归类为-IE重绘问题。当然并非所有position为relative的元素都不能在IE7中正常显示，实际情况要比我这里所指的复杂的多。由于布局的硬性需要（比如滚动图片的移动效果），使我没有办法不用relative属性，所以要解决在IE7中的渲染问题，就必须另外想办法。 查看详细
EDM邮件的优化中有一个颇为重要的小东西很容易被忽略，那就是邮件在邮箱列表中所显示的摘要(preheader)。下面是QQ邮箱邮件列表中摘要的表现形式（灰色文字）：
查看详细
瀑布流主要应用在图片展示页面上。如果有一大批图片需要展示，原始图片尺寸不一致，又希望每张图片都能不剪裁，完整显示，那么就要给图片规定一个宽度，解放它们的高度。利用网页高度不限这个特性，充分利用页面的空间，尽可能的展示多的图片。瀑布流的实现方法挺多，但能做到响应式列数变化，自由布局的并不多。这次自己开发了一个作品集页面，正好研究一下响应式瀑布流的实现方法。
1. 响应式多列：960px宽以上呈4列，750-960呈3列，400-750呈2列，400宽以下变成1列；
2. 由于需要做响应式，那么每块的宽度就不固定，导致高度更加不可能固定。后端输出的时候，图片（块）的高度本来就是未知的，要用JS实时取到它们的高度，以便调整布局。
3. 异步加载：页面拖到最低端的时候加载更多，这个很常见。 查看详细
最近公司的几个WordPress网站从AWS搬家到Windows Azure环境下，又折腾了好一阵子。今天新鲜出炉一个新的问题，发现网站上的woff字体又报404了。在确认文件已经上传到正确路径下后，再回想一下之前碰到的IIS环境下找不到字体文件的问题，感觉应该又是没有给字体文件添加MIME类型的原因。Windows Azure并非虚拟主机，所以也不会给我一个IIS让我配置，只能想其他办法。 查看详细
CSS中一提到单词断行，最先映入脑海的肯定是word-break和word-wrap这两条属性。但对于这两条属性到底有什么区别，兼容性如何，我一直都概念模糊。今天抽空把它们以及CSS3中新加入的断行属性之间的区别和作用理理清楚，做一下笔记。
在英文段落中有时会碰到一些很长的单词，这些单词的长度超出容器宽度。在默认的页面文档中，如果单词长度超出了单行，会被自动移到下一行中，图中puzzling!就被自动换行了；而如果单词本身的长度已经超出容器宽度，常规的文档对此就没有约束力了，图中dddddd…这个单词就这么溢出了 查看详细
标题起的比较诡异，部署网站的字体和服务器IIS有什么关系？如果你的职责只限于一名前端开发，那么你可能很“幸福”地与这些问题擦肩而过，浑然不觉。可是本人一直都是孤军奋战，连开发环境都要自己搭建，这次又踩了新的坑，发现网站所用的woff、svg等字体压根就没被页面加载。反复排摸都不得其解，用浏览器访问服务器上的这些字体url，全都报404错误，只有ttf的字体能被访问到…
事情还得起源于Google被墙这事，在几个月前我改用了360提供的字体库，一直也运行稳定。今天发现360的字体库失效了，网站字体又变回系统字体，而且一直在尝试加载360的字体库，页面变得很慢，和当初加载不到Google字库的时候一个德性…看来没有永远靠得住的服务啊，要想用字体，还得靠自己… 查看详细