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 获取的皮肤选项。这样处理，访问网页的时候会先显示白色或者无颜色，之后直接切换成之前选择的皮肤的颜色，而不会从默认的颜色闪烁变成另一种颜色从而提升一定的用户体验。

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