转眼之间，自 2011年6月 开博之后，到现在已经整两年多一点。虽然只是短短两年，但是变化太大了。

博客发展过程

高考完之后，我终于轻松了，可以做自己喜欢的事情，注册了几个域名买空间，开始做网站。于是当然需要有这样一个独立博客。

刚开始的时候，写一些乱七八糟的文章，包括自己的上网经验，计算机使用技巧等等等等。而且质量、排版都很糟糕。

其中还有一段时间（大约在 2011年末 大学第一个寒假）停止了3个多月的更新，重新审视这个博客存在的必要性。

后来在 我爱水煮鱼 上看了 WordPress 主题的制作教程，结合自己的一些 HTML、CSS、PHP 基础，就开始自己做主题。之后思考了两个方向，分别是安卓开发和网页制作。

毕竟有一些网站建设的基础，我最终还是选择了网页制作这个方向。博客也恢复了生机，不断专注的写一些技术文章，制作自己使用的很丑陋的主题，并不断的升级。

由于之前有一些基础，所以学习起来非常快。在 2012年3月 就有了自己第一个小业务，帮一个电影院网站从表格变成 div + css 的，然后进行一下居中优化。

之后不断的买书学习，通过不断的升级主题来实践，在 2012年的暑假末期，我做出了第一套稍微好点的主题，也就是现在的 Qetro，当然还是非常烂的，但是对于当时的我，还是很高兴的。

国庆之后，偶然接到了一个 WordPress 整站的大单，这是第一次接到稍微正规一点的任务。帮客户从零开始，做设计然后转换成 WordPress 主题，安装到客户的网站上。第一次赚那么多钱，很激动的差点没睡着，也让我坚定了这条路。

此间也不断的在博客发表一些总结性的技术文章等，写作风格和技术都随之不断增强，这点翻翻之前的文章都可以看出来。我的人生也从此发生了改变。

后来的单子就源源不断的找上们来，都是通过博客等。

一个偶尔的相遇，让我认识了 Denis ，就是 我爱水煮鱼 的博主。我竟然有幸成为了我爱水煮鱼的兼职作者，昔日经常上去学习膜拜的网站，如今我成了它的一个作者，可以将自己写的文章发上去跟别人交流。

再到后来，各种合作等等等等，都是因为这个博客在帮助我。可以说，这个博客记录了我的人生轨迹也改变了我的人生轨迹。

停止更新并不是关闭

在高考之后，我重新申请了一套网络 ID，其中就有网名 潜行者m，这个博客就是以网名拼音作为域名的博客。

但是现在看来，这个网名并不好，无论是从国内还是国外的角度。

我爱水煮鱼 之前一直用的是 www.fairyfish.net 这个域名，这个就是 Denis 随便注册的一个拿来用，没想到后来会慢慢变成名博。越到后来，数据越多，访问量越大，越不容易更换域名。但是出于战略的考虑（推销他的 WPJAM 团队），最终还是整站 301 到 blog.wpjam.com 上了。影响还是很大的，特别是在百度这样的垃圾搜索引擎上，至今，你搜索 我爱水煮鱼 ，出现的仍然是老域名，期间也有几次被百度K掉，收录大规模减小。

而谷歌半个月之内，就全部正常了，都转移到 blog.wpjam.com 上了，但无奈国内还是用百度的多。

没错，我也是出于“战略”的考虑，特别是这个名字上的考虑。

博客未来的发展

本博的停止我也思考了一段时间，毕竟积累了一些人气和友情。不过死亡是为了更好的重生。

下一步，我会建立一个新博客，放置到我个人的名字域名上 yujiangshui.com 。但是并不会 301 转向到新博客上。这个博客的文章内容质量参差不齐，特别是早期写的一些，而且结构目录、标签层次等，经过几次修改整理都非常混乱了，所以我会建立一个全新的网站，从头开始写文章。并且每个月只会更新几篇，目的是为了文章质量，也能更好的体现我的个人水平，让更高质量的合作找上我。

但是这个博客还有非常多的保存价值，所以我不在乎每年几百块的服务器费用，还会放在这里，作为一个留念，但是不会更新文章了，如果想要继续关注本人的文章，可以到新网站去看。

至此，潜行者m 这个 ID 以后也不再会用了，以后直接像张鑫旭大神那样，用真名以及拼音。

IE10 已经出来了很久一段时间了，整理一下有关的特性，方便日后查阅使用。

IE10 的 hack

.ie{
color:red;          /* for all browsers*/
_color:green;       /* hack for IE6*/
*color:black;       /* hack for IE6 IE7*/
color:white\9;      /* hack for IE6+(IE6 IE7 IE8 IE9 IE10)*/
color:yellow\0;     /* hack for IE8+(IE8 IE9 IE10)*/
color:orange\9\0;   /* hack for IE9+(IE9 IE10)*/
}

暂时还没有比较好的 hack 方式，使用一些另类的方法可以实现，但是不太好。此外，IE10 不再支持 IE 条件注释了。也就是说，面对下面的代码，IE10 会直接像其他浏览器那样忽略：

至于为什么，可能是因为微软对 IE10 已经拥有足够的自信，可以做到跟普通正常浏览器效果差不多，不再需要单独的 hack 了吧。

详细的了解 IE10 的更多细节和特性以及新技术，可以观看 MSDN 上的 IE10 develop 部分：http://msdn.microsoft.com/en-us/ie/aa740473

（未完，会继续发现添加。。）

Emmet 的功能不仅仅局限在快速生成标记语言结构或者生成 CSS 代码，它还具有很多常用的前端相关的功能，下面就来介绍几个比较常用的功能。

生成 Lorem Ipsum

Lorem Ipsum 表示一段随机看不懂的文字。Lorem Ipsum 的文字让人看不懂，这样才能忽略内容的含义而专注内容的排版，作为测试数据填充用的。使用 Emmet 生成 Lorem Ipsum 文本非常简单，只需要使用 lorem这一条命令即可，敲击 Tab 键之后，就会生成如下一段文字：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, dolor, aperiam ab repellendus blanditiis eum exercitationem. Quae, reprehenderit repellat impedit asperiores consequatur? Illum quos magnam odit omnis recusandae natus similique.

Emmet 的 lorem 命令不仅仅只有输出这么一段文字这样一个简单的功能，它既然作为测试数据，可以加上参数指定要输出的字符数量。例如，我们如果想输出一个十个单词的 h1 标题，我们就可以使用如下命令 h1>lorem10 。但是这项功能对于使用中文的网页测试来说，好像没有多大用处，毕竟中文和英语单词的排版是不同的。

跳转编辑区域

写代码一般要用到两只手，有时候需要跳转到别的代码段等，你可以使用键盘方向键也可以使用鼠标。但是这都有缺陷，使用键盘方向键移动太慢了，而且需要按住 shift 键和方向键选中代码；使用鼠标的话，手就必须离开键盘，来回也会浪费一些时间。而 Emmet 提供了一个很实用的功能，就是整块的跳转。

为了方便理解，先看一下官方的 Demo 动画。这个功能，使用 Shift+Ctrl+. 和 Shift+Ctrl+, 分别向下或者向上移动，选取的是一整块，先从标签开始，再是整个属性，再是属性值。这样，比键盘的方向键移动高效多了。

增加图片的尺寸大小

有时候，我们需要给 <img> 标签增加对应的 width、height 属性来表示图片的大小或者给通过 background-image 属性引用的背景图片一个尺寸大小。通常的做法是看一下图片的尺寸，然后加上，而现在，你只需要将光标移动到代码段，摁下 Ctrl+U 即可让 Emmet 自动读取图片的尺寸添加上。前提条件是图片比较存在并且正确引用进来了。

如果是针对 <img> 标签的，会在后面加上 width、height 属性，如果是 background 引入的，会在下面加上 width、height 的 CSS 属性。可以看一下官方的 Demo 。但是这里有个问题，官方的 Demo 中，实现这个功能的快捷键是 Shift+Ctrl+U 但实际使用中，这个快捷键不起作用。关于 Emmet 的 Mac、Win 下的快捷键，以这个页面上的为准：https://github.com/sergeche/emmet-sublime#available-actions。

更新 CSS 的属性值

我们在写 CSS 的时候，有时候为了 hack 写很多带有前缀的属性。例如：

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);

如果我们突然想修改一下旋转的角度值，那么我们就需要依次修改或者按住 Ctrl 多个选中进行修改。使用 Emmet 的话，就方便多了，我们只需要修改其中一个，然后摁下 Shift+Ctrl+R 键即可更新其他的相关属性值。

将图片资源转换成 data url 形式

data url 图片具有很多优点，在某些情况下比较实用，但是将图片转换成 data url 格式就比较麻烦了，得使用一些工具。而在 Emmet 中，将光标移动到 background: url() 中的图片位置的地方，按下Ctrl+’ 即可将图片编码成 data url 格式。当然，前提条件是图片资源引用正确。

除此之外，Emmet 还有一些其他的诸如快速跳转、计算等等常用功能，在这里只是介绍了几个更常用的功能，有兴趣的朋友可以打开Emmet Action 的官方文档看一下 Demo，这里不再赘述。

text-overflow:ellipsis 属性通常用于隐藏超出长度的文本，并在文本最后面增加省略号。

456bereastreet 发现：如果在网页的交互等过程中，出现一个新层（例如鼠标移动到下拉菜单，弹出下拉菜单内容），在 Firefox 下，文本内容当然会被新弹出内容遮住，但是省略号并不会。它会出现在新层的上面。

可以使用 Firefox 打开 Demo 看一下具体效果。

如果你也遇到了这个问题，解决方法很简单，只需要为新弹出的覆盖层的 z-index 属性赋值为 >1 的数值即可，这样就可以解决了。你可以在上面的 Demo 中，使用 Firebug 增加一下。

Unicode 是全世界通用的最大的字符集合，包含了各国各种各样的字符。由于字符数量巨大而且各种各样，所以输入法一般无法打出很多很特殊的 Unicode 符号。搜狗输入法可以打出一些基础的符。

在网页中，有时候我们会需要一些符号，例如：倒三角 ▼。如果要让网页显示这种符号，显然用字符的方式比较好，体积小到可以忽略不计同时还可以方便用 CSS 定义样式等。但是直接把这个倒三角复制进网页中的话，虽然可以，但是不合理，这时候我们就要用到对应图标的实体字符，例如通过查询可以看到倒三角对应的 Unicode HTML 代码为 & #9660 ; 将前面代码中的空格删掉，复制进 HTML 文件中就可以看到了。

当然，这个 HTML 文件必须保存为 UTF-8 编码，如果你看不懂，推荐这篇文章《网页编码就是那点事》。那么，我该从哪里寻找自己需要的符号呢？

搜索一下就可以看到很多相关内容，但是很多只是列了一部分，或者就是维基百科那样直接给出一个又长又丑的表格。在这里推荐一个网站 Unicode Character Table ，这个网站罗列了所有的 Unicode 字符，同时做了美化，当你点击某个字符的时候，会弹出字符序号和 HTML 实体字符，是不是很方便呢？马上收藏备用吧！网址：http://unicode-table.com

在项目中，需要为顶部导航条增加滚动跟随效果。很显然，只需要为 #header 加上 position:fixed; 属性即可，但是加上之后却无效。只能用监测浏览器滚动距离然后实时的赋值到 top 属性来模拟跟随。

但是这种方法由于浏览器之间滚动的距离不同等缘故，会导致闪烁等问题，只在 Firefox 效果完美。同时会影响性能，在中低端安卓设备中效果很差。这种影响用户体验的事情，是肯定要避免的。还是得回来使用 fixed，但是从未发现过 fixed 失效的情况啊，只能挨个测试一下。

问题发现

先写了一个 div ，赋值 fixed 属性，然后在普通网页中效果正常。将其插入无效代码平级位置，结果失效。将其插入 body 标签下级，正常。说明问题出在其父属性值中。

然后使用 Firebug 依次取消父属性值，当去掉 transform 属性值之后，fixed 生效。原来问题出在 transform 上。

然后就做了个 Demo 测试一下。

这是一个坑，如果不知道的，可以记一下。因为 transform 是一个 CSS3 中比较重要的动画属性，以后的应用会越来越多。对于 position 的其他属性尚未测试，因为 fixed 比较特殊，效果比较明显。在 google 上搜索了一下，发现了一篇 Eric 写的 Un-fixing Fixed Elements with CSS Transforms ，不过没看懂，还望各位有知道的指点一下。

网页换肤是一门老技术了，老的现在都不怎么流行了。但是，有时候有些客户就是想要这个换肤功能。于是就实践做了一下网页换肤，结果遇到了很多问题。

网页换肤的基本原理

基本原理很简单，就是使用 JS 切换对应的 CSS 样式表。例如导航网站 Hao123 的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外，通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤，这样下次用户访问的时候，就可以自动使用上次用户配置的选项。

那么基本工作流程就出来了：访问网页——JS 读取 Cookie ——如果没有，使用默认皮肤——如果有，使用指定皮肤；用户点击换肤选项——JS 控制替换对应的 CSS 样式表——将皮肤选项写进 Cookie 保存。

网页换肤事先需要的准备

首先你可能要准备多套 CSS 样式表文件，当点击换肤按钮的是，使用 JS 来切换对应的 CSS 样式表。之后，就是在网页上增加一个 ul li 列表，用 CSS 修饰一下做成换肤选项。例如：

下面我们就来看具体功能代码。

实现点击切换对应 CSS 功能

首先，我们的皮肤选项的 HTML 结构是这样的

<div class="skin">
    <ul>
        <li class="skin1 hover"></li>
        <li class="skin2"></li>
        <li class="skin3"></li>
        <li class="skin4"></li>
    </ul>
</div>

然后在网页的顶部偏下的位置放上一个空的 link 标签，我们将会使用 jQuery 为这个 link 标签赋予不同的 CSS 文件实现切换效果

<link rel="stylesheet" href="" data-href="style-Teal.css" type="text/css" media="screen" class="skincsslittle" />

其中，我自定义了一个 data-href 属性来存放系统默认的皮肤，这样当页面加载完成之后，如果 JS 没有检测到 Cookie 中的皮肤信息，就会把 data-href 中的内容赋值上去。之后就是大家熟悉的 jQuery 代码：

jQuery('.skin li').click(function(){
    var currentClass = jQuery(this).attr('class');
    jQuery(this).siblings().removeClass('hover');
    jQuery(this).addClass('hover');
    var cc = currentClass.substring(0,5);
    cc = convertcsslittle(cc);
    var skincssurl = jQuery('.stylecssurl').attr('href').substring(0,jQuery('.stylecssurl').attr('href').indexOf('style')) + cc;
    jQuery('.skincsslittle').attr("href",skincssurl);

    createCookie('skin',currentClass,365);
});

大体的逻辑就是获取到当前皮肤的 class 然后截取出来 skin* 然后通过一个函数得到其对应的 CSS 文件。skincssurl 记载的是网页的非皮肤 CSS 文件，主要用来获取当前网页的 CSS 目录 URL ，最后将混合好的 CSS 皮肤文件赋值准备好的空 link 中，实现换肤。

增加 Cookie 记录皮肤功能

这里主要用到两个自定义的函数，用来创建、读取 Cookie 内容。

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return false;
}

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

你只需要把这两个函数复制到 JS 代码区域即可。在 jQuery 点击换肤的功能代码中，最后一句就创建了一个 Cookie，等网页加载完成之后，我们需要使用 JS 读取 Cookie 内容，然后使用 if 判断：

var cccc = readCookie("skin");

if (cccc){
    cccc = cccc.substring(0,5);
    jQuery('.'+cccc).addClass('hover').siblings().removeClass('hover');
    ccc = convertcsslittle(cccc);
    var skincssurl = jQuery('.stylecssurl').attr('href').substring(0,jQuery('.stylecssurl').attr('href').indexOf('style')) + ccc;
    jQuery('.skincsslittle').attr("href",skincssurl);
}else{
    var currentcss = jQuery('.skincsslittle').attr("data-href");
    var currentcssname = currentcss.substring(currentcss.indexOf('style'),currentcss.length);
    currentcssname = defaulttoclass(currentcssname);
    jQuery('.'+currentcssname).addClass('hover').siblings().removeClass('hover');
    jQuery('.skincsslittle').attr("href",jQuery('.skincsslittle').attr("data-href"));
}

不要被这么乱的代码吓晕了，实际上逻辑很简单，先获取 Cookie 的皮肤值，如果有就为对应的皮肤选项高亮并且转换得到对应的 CSS 皮肤文件赋值。如果没有 Cookie 内容，就将 data-href 属性中记录的值赋值进去。

网页换肤的闪烁问题和不完美解决方案

网页换肤中，会遇到闪烁的问题。就是当点击切换按钮的时候，更换颜色或者图片会闪烁一下。或者使用 Cookie 记录之后，用户使用了非默认的皮肤，也会闪烁一下，先出现默认的样式然后再闪烁切换成用户自己选择的样式。

这种影响用户体验的现象肯定要彻底消灭，但是一直没有找到完美的解决方法。因为浏览器默认的是优先渲染 CSS 之后再加载 JS，特别是使用 Cookie 记录的皮肤，先渲染现有的 CSS 之后，JS 才能读取然后切换到皮肤。原理是这样的，跟客户协商之后，客户给出了一个“无闪烁”的换肤效果示例，是 MG12 很早的一款主题。同样的 Cookie 记录等，但是他的作品确实没有闪烁情况。

于是我就查看了他的 JS 代码，没有发现特殊之处，后来才想明白，这种闪烁问题，在图片比较多的网页中效果尤其明显，因为切换的 CSS 需要加载图片需要更多时间。而 MG12 那款主题中，切换的 CSS 文件只是改变了几个 background 颜色，加载速度快到你眼球反应不过来就造成了不闪烁的假象。

不完美解决方案也是有的，点击切换按钮之后的闪烁情况，也是因为要加载图片等，那么我们可以在访问网页的时候，使用预加载技术将其他皮肤图片预加载或者使用 CSS Sprite 技术做成一张大图片。

至于 Cookie 记录闪烁的问题，这是浏览器渲染的硬伤，只能尽量减少换肤需要改变的地方，尽量压缩图片减小体积。然后优先加载没有任何皮肤的基础样式，之后使用 JS 加载默认样式或者读取 Cookie 获取的皮肤选项。这样处理，访问网页的时候会先显示白色或者无颜色，之后直接切换成之前选择的皮肤的颜色，而不会从默认的颜色闪烁变成另一种颜色从而提升一定的用户体验。

如果你在这方面有经验，知道更好的解决闪烁问题的方法，麻烦跟我说一下哈，先谢过了！

自 2013年5月19日晚开始着手升级到现在，已经11天了。中间的一个周末受 apemanchen 的邀请，去了北京一趟，谈了一下顺便小玩了一下。同时，蹭了 MK 一顿饭，真是好爽啊，出门在外有个朋友就是好。剩下的大部分时间，就用来升级这个主题。

距离上次 1.4 版本发布时间 2月8日，已经过去了三个多月了，这么长时间没有改动、升级主题，一个是比较忙没有太多时间，另一个是在不断深入 WordPress ，学到了不少的新东西，准备应用在主题上，一时间难以慢慢消化，所以等有时间一口气重新升级。然后就是本人的拖延症，一拖再拖拖到现在。

现在主要完成的工作

这次升级，先从界面开始，几乎又重写了 CSS 文件，而且把原有的 HTML 结构重新正规的命名了下。从极简的角度出发，专注于内容的展示，去掉了绝大部分不必要的内容，保持内容的突出和优化显示。色调进行了统一，不再像之前那样，采用四种颜色，而是使用了 蓝色系 的颜色，在后面将会做多种颜色版。使用了近期流行的响应式布局设计（具体响应式设计还未完成）。然后就是根据官方以及其他成熟主题的做法，更新了很多函数和相关的使用方法，使主题代码更加合理。高度优化边栏样式，增加了跟随滚动模块等等。然后着重编写增强了 1.4 弱爆的评论模块。

目前，2.0 主题的基本界面和功能已经完成，可以上线让大家帮忙测试。但是这仅仅完成了不到 50% 的工作。

下面还需要进一步完成的

1. 增强代码区域的显示效果和功能
2. 增加各种短代码功能
3. 完善作者介绍页面及其文章列表
4. 提供多种 Page 页面模板
5. 增加后台选项，可以配置主题相关功能
6. 增强图片显示效果以及附件页面处理
7. 增加多种 post format 的支持
8. 调整 HTML 结构，方便 Google 抓去分析
9. 增强评论模块的功能
10. 前端性能优化，压缩合并、预加载缓加载等
11. 早期浏览器和移动设备平台的兼容性
12. 回滚出现顶部导航条
13. 增加一个跟随工具块，实现一些功能（分享、向上滚动等）
14. 做出其他颜色的版本，在后台可供选择
    好吧，看了这个不完全列表，我觉得我现在只完成了不到 40% 的工作。要全部完成估计还需要一个多月的时间，甚至要到暑假了。认真的完成完善这个主题，就可以把这个主题做成模板主题，以后再做其他主题就方便多了。

我先把未完全完成版上传测试，希望大家能提提建议或者发现一些 Bug 等，如果你有好的想法和建议，下面有我的联系方式，希望能告诉我一下。测试评论模块，多说也先去掉了。

2.0 版本 Qetro 主题可能不会公开

这段时间，我也见到很多关于主题是否应该公开的讨论。有种言论说，主题一旦公开，就死掉了，版权全部被改掉什么都没了。确实有这个问题。而且做一款真正好的主题，真的很不容易，我越来越体会得到。所以，2.0 版本的主题将不会公开发布，同时 1.4 版本的主题做的太烂了，所以将会停止共享。抱歉！

如果不出意外，这套主题将会作为本人自用主题。也有可能因为我最近比较缺钱，搞出个限量版来买然后提供 VIP 服务。这些还需要等主题完全完成再说。

在前面，潜行者 m 介绍了 Emmet 的功能和如何使用 Emmet 来生成 HTML 代码，这次再来讲解一下如何使用 Emmet 提高 CSS 编写效率。

首先，Sublime Text 2 已经提供了比较强大的 CSS 样式所写方法来提高 CSS 编写效率。例如编写 position: absolute; 这一个属性，我们只需要输入 posa 这四个字母即可。它会弹出缩写样式的提示：

你不妨在编写 CSS 的时候，留意一下 ST2 提供了哪些属性的缩写方法，这样就可以提高一定的效率了。但是 Emmet 提供了更多的功能，请往下看。

简写属性和属性值

如果你想生成 width:100px; 你只需要输入 w100 就可以了，因为 Emmet 的默认设置 w 是 width 的缩写，后面紧跟的数字就是属性值。默认的属性值单位是 px ，你可以在值的后面紧跟字符生成单位，可以是任意字符。例如，w100foo 会生成 width:100foo; 这样一条语句。你同样也可以简写属性单位，如果你紧跟属性值后面的字符是 p ，那么将会生成 width:100%; 这样的语句，其中 p 表示百分比单位。与此类似的还有：e → em; x → ex。

例如 margin 这样的属性，可能并不是一个属性值，生成多个属性值需要用横杠（-）连接两个属性值，因为 Emmet 的指令中是不允许空格的。例如使用 m10-20 这条命令可以生成 margin: 10px 20px; 这样一条语句。如果你想生成负值，多加一条横杠即可。需要注意的是，如果你对每个属性都指定了单位，那么不需要使用横杠分割。例如使用 m10ff20ff 这条命令可以生成 margin: 10ff 20ff; 这条语句，如果你在 20ff 前面加了横杠的话，20ff 就会变成负值了。

如果你想一次生成多条语句，可以使用 ‘+’ 连接两条语句，例如使用 h10p+m5e 可以生成 height: 10%;margin: 5em; 这两条语句。

颜色值也是可以快速生成的，例如 c#3 → color: #333;，更复杂一点的，使用 <code>bd5#0s 可以生成 border: 5px #000 solid; 这样一句。下面是规则：

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

生成 !important 这条语句也当然很简单，只需要一个 ‘!’ 就可以了。

增加额外的选项

使用 @f 即可生成 CSS3 中的 font-face 的代码结构：

@font-face {
 font-family:;
 src:url();
 }

但是这个结构太简单，不包含一些其他的 font-face 的属性，诸如 background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等属性，我们可以在生成的时候输入 ‘+’ 生成增强的结构，例如我们可以输入 @f+ 命令，即可输出选项增强版的 font-face 结构：

@font-face {
 font-family: ‘FontName’;
 src: url(‘FileName.eot’);
 src: url(‘FileName.eot?#iefix’) format(‘embedded-opentype’),
 url(‘FileName.woff’) format(‘woff’),
 url(‘FileName.ttf’) format(‘truetype’),
 url(‘FileName.svg#FontName’) format(‘svg’);
 font-style: normal;
 font-weight: normal;
 }

增加实验性前缀（Vendor Prefixes）

CSS3 等现在还没有出正式的 W3C 规范，但是很多浏览器已经实现了对应的功能，仅作为测试只用，所以在属性前面加上自己独特的实验性前缀，不同的浏览器只会识别带有自己规定前缀的样式。然而为了实现兼容性，我们不得不编写大量的冗余代码，而且要加上对应的前缀。使用 Emmet 可以快速生成带有前缀的 CSS3 属性。

ST2 已经内置了一些常见的需要实验性前缀的 CSS3 属性，例如输入 trf 会弹出提示，然后敲击回车键即可生成。而 Emmet 增强了这个功能。在任意字符前面加上一条横杠（-），即可生成该属性的带前缀代码，例如输入 -foo-css，会生成：

-webkit-foo-css: ;
 -moz-foo-css: ;
 -ms-foo-css: ;
 -o-foo-css: ;
 foo-css: ;

虽然 foo-css 并不是什么属性，但是照样可以生成。此外，你还可以详细的控制具体生成哪几个浏览器前缀或者先后顺序，使用 -wm-trf 即可生成：

-webkit-transform: ;
 -moz-transform: ;
 transform: ;

可想而知，w 就是 webkit 前缀的缩写，m 是 moz 前缀缩写，s 是 ms 前缀缩写，o 就是 opera 浏览器前缀的缩写。如果使用 -osmw-abc 即可生成：

-o-abc: ;
 -ms-abc: ;
 -moz-abc: ;
 -webkit-abc: ;
 abc: ;

生成渐变背景

CSS3 中新增加了一条属性 linear-gradient 使用这个属性可以直接制作出渐变的效果。但是这个属性的参数比较复杂，而且需要添加实验性前缀，无疑需要生成大量代码。而在 Emmet 中使用 lg() 指令即可快速生成，例如：使用 <code>lg(left, #fff 50%, #000) 可以直接生成：

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
 background-image: -webkit-linear-gradient(left, #fff 50%, #000);
 background-image: -moz-linear-gradient(left, #fff 50%, #000);
 background-image: -o-linear-gradient(left, #fff 50%, #000);
 background-image: linear-gradient(left, #fff 50%, #000);

直接帮你生成好了浏览器前缀。

Emmet 的还有一些其他的强大功能，将在后面继续讲解介绍，尽请关注。

近期的一个任务中，客户要求增加一个附带 cookie 记录的网站换肤功能。

网站换肤是老东西了，大体的思路就是写上一些 li 作为皮肤选项，点击之后使用 JavaScript 代码，修改网页中引用的 CSS 文件，达到换肤的目的。为了提供更好的用户体验，可以增加 cookie 记录功能，记录当前用户选择的皮肤。当下次用户再访问的时候，先读取 cookie 的内容，然后根据 cookie 内容自动切换到上次选择的皮肤。

出现问题

很正常的写完了 JavaScript 代码，测试都已经通过，在 IE10 的 IE7、8、9 渲染模式下也测试通过。这时候，客户反馈在 XP 下的 IE8 有问题：初次登陆无法显示默认皮肤、点击切换刷新之后无法显示切换后的皮肤。

因为是通过 cookie 来判断是否显示默认皮肤还是上次用户选择的皮肤，所以很理所当然就想到了无法读取 cookie 。启动 VMware 虚拟机，打开 IE8 和 IE Developer ToolBar 工具进行调试，发现点击之后 cookie 已经成功的创建，但是代码无法执行，使用控制台看了一下问题，原来是不支持 console 。

XP 下的 IE 浏览器不支持 console 命令

console 命令是控制台命令，用来调试 JavaScript 代码用的，通常使用 console.log() 函数来代替 alert() 来迅速得到某变量的内容等。由于 XP 下的 IE 不支持 console，导致后续代码无法运行。

解决方法就是删掉所有调试用的语句，这时候已经可以显示默认的皮肤样式了。

XP 下的 IE 浏览器不支持某些创建 cookie 的语句

这里之所以说某些，是因为我也不知道哪句代码写的不完善。当我使用最基础的 alert(document.cookie) 返回所有的 cookie 内容时，返回值为空，使用 cookie 读取函数读取某值的时候，返回 undefined 。而在其他浏览器中都可以正常返回。

而奇怪的地方在于，我使用 IE developer toolbar 调试的时候，可以看到当前浏览器下面有 cookie 值。最初我以为是 cookie 读取函数写的有问题，因为毕竟有 cookie 的内容却读取不出来。前后换了 5 个不同写法的 cookie 读取函数。后来一想不对，因为使用 alert(document.cookie) 也无法返回任何内容，IE 不会连 document.cookie 都不支持吧？！难道是因为 cookie 生成函数？

这时候，客户给了个功能类似的示例网站，我打开测试了一下功能正常。既然别人的正常，肯定能实现。我阅读了一下它的代码，换肤功能使用的 styleswitcher.js 这个 JS 插件做出来的。由于实现步骤与现有网站不符，我无法使用这个插件整合，只能把它的生成 cookie 、读取 cookie 的函数抠下来用。代码如下：

function readCookie(name) {
  var nameEQ = name + “=”;
  var ca = document.cookie.split(‘;’);
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return false;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days2460601000));
var expires = “; expires=”+date.toGMTString();
}
else expires = “”;
document.cookie = name+”=”+value+expires+”; path=/“;
}
然后问题就解决了，仔细看了一下代码，我写的也差不多，没有看出问题在哪。日后再仔细研究一下吧，如果你遇到了这样的问题，不妨使用上面这两个函数操作 cookie ，如果你知道问题所在，还望告知！