Name: text-overflow-mode
Value: clip | ellipsis | ellipsis-word

clip : 　不显示省略标记（…），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
ellipsis-word : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

至于为什么一开始我说text-overflow是一个比较特殊的样式呢？因为我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了（表现上是超出部分显示省略标记…）。

text-overflow: ellipsis属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。Via.

那么，如果我们要给p标签定义text-overflow:ellipsis就可以这么写：

p {
      white-space: nowrap;
      width: 100%;                  /* IE6 需要定义宽度 */
      overflow: hidden;             
 
      -o-text-overflow: ellipsis;    /* Opera */
      text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
   }

使用样式前：

我是一段测试文字，请分别用IE，Safari，chrome，opera浏览器查看我哦！

使用样式后：

我是一段加长过的测试文字，请分别用IE，Safari，chrome，opera浏览器查看我哦！哈哈哈，看到省略号了么？

浏览器兼容状况

OH,FML!Firefox不支持这个属性！这回，Firefox你也太另类了吧！还有别的办法么，当然有，方法还挺多的。
比如Mozilla developer center推荐的-moz-binding CSS属性。Mozilla developer center给出的理由是text-overflow没有W3C的规范…但是因为Firefox支持XUL，一种XML的用户界面语言。并且Firefox还支持XBL，一种XML绑定语言，这样我们就可以使用Mozilla developer center推荐的-moz-binding CSS属性来绑定XUL里的ellipsis属性了。

1.XUL方式

首先，我们创建XUL，它应该被保存为ellipsis.xml：

<?xml version="1.0"?>  
<bindings   
  xmlns="http://www.mozilla.org/xbl"  
  xmlns:xbl="http://www.mozilla.org/xbl"  
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"  
>  
    <binding id="ellipsis">  
        <content>  
            <xul:window>  
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>  
            </xul:window>  
        </content>  
    </binding>  
</bindings>

然后我们需要把这个xml文件放到一个目录，原来的css需要加一条，变成这样

p {
      white-space: nowrap;
      width: 100%;                  /* IE6 需要定义宽度 */
      overflow: hidden;             
 
      -o-text-overflow: ellipsis;    /* Opera */
      text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
      -moz-binding: url('ellipsis.xml#ellipsis');    /* Firefox */
   }

虽然Firefox通过XUL的方式实现了ellipsis，但是还是需要注意以下这些问题：
1.经过XUL处理过的文本你将不能被选中，按理说-moz-user-select: text; 属性将允许文本被选中，但是我没有试验成功。
2.如果你给父元素绑定了XUL，那么子元素的内容将变得不可见。例如：

It is a longhaha long long long long text!

如果你只是给p节点绑定了XUL，那么在Firefox下你将看不到haha这个内容。
它的源代码实际上是：

<p>It is a long<em> haha</em> long long long long text!</p>

参考资料:

http://www.w3.org/TR/2003/CR-css3-text-20030514/

http://www.quirksmode.org/css/contents.html

https://bugzilla.mozilla.org/show_bug.cgi?id=312156

https://developer.mozilla.org/En/XUL

https://developer.mozilla.org/En/XUL/Description

http://www.rikkertkoppes.com/thoughts/2008/6/

http://www.w3.org/TR/xbl/

http://www.w3.org/TR/css3-text/

2.Javascript方式

既然XUL无法完美解决Firefox下文字溢出显示…，那么我们就求助javascript吧，当然，并不是古老的截取一定数目的字符来实现。
这里以jQuery为例，代码如下：

(function($) {
	$.fn.ellipsis = function(enableUpdating){
		var s = document.documentElement.style;
		if (!('textOverflow' in s || 'OTextOverflow' in s)) {
			return this.each(function(){
				var el = $(this);
				if(el.css("overflow") == "hidden"){
					var originalText = el.html();
					var w = el.width();
 
					var t = $(this.cloneNode(true)).hide().css({
                        'position': 'absolute',
                        'width': 'auto',
                        'overflow': 'visible',
                        'max-width': 'inherit'
                    });
					el.after(t);
 
					var text = originalText;
					while(text.length > 0 && t.width() > el.width()){
						text = text.substr(0, text.length - 1);
						t.html(text + "...");
					}
					el.html(t.html());
 
					t.remove();
 
					if(enableUpdating == true){
						var oldW = el.width();
						setInterval(function(){
							if(el.width() != oldW){
								oldW = el.width();
								el.html(originalText);
								el.ellipsis();
							}
						}, 200);
					}
				}
			});
		} else return this;
	};
})(jQuery);

这段js的原理很简单，就是通过不断的比较宽度值，然后逐个缩短字符宽度，当最后宽度合适的时候，停止循环，就实现了文字溢出显示…的效果。
这段js还需要一段css来配合。

.overflow {
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

js里有个判断就是当样式里出现text-overflow或者-o-text-overflow的时候，便不会执行这段js。因为支持这两个属性的浏览器可以自己实现ellipsis效果。

这两种方法都可以实现Firefox下ellipsis的效果，如何取舍使用，具体还得根据你要运用到的项目的具体情况来具体分析，XUL实现的方法的不足之处在以上已经很详尽地列举了，如果你可以避免或者说这些无关你项目的大问题，那么XUL不失一个好方法。

至于其他的一些方法你可能在网上也有看到，比如用:after伪类来实现等，个人不推荐，所以我这里也不细说了，如果你有更好的方法，也希望能与我分享，谢谢观看！

本文地址:http://leeiio.me/text-overflow-ellipsis/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 年度曖昧文章

设计稿

谢谢观赏！

PS:杯具的是农历年应该是丁卯年而不是一九八七年…

本文地址:http://leeiio.me/a-birthday-cup/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 年度曖昧文章

具体细节大家可以查看我去年的文章《拥抱 CSS 裸奔节，用 JavaScript 强制脱衣》。当然方法有很多，你想怎么裸就怎么裸。

祝大家裸奔愉快！羞。

本文地址:http://leeiio.me/2010-css-naked-day/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 拥抱 CSS 裸奔节，用 JavaScript 强制脱衣 (26)

This module previously defined a ‘box-shadow’ property. This feature has been removed from this module for further discussion, and should reappear in another CSS module (or a later version of this module) in the near future.
以前这个模块定义了一个‘box-shadow’属性。这个特性目前已从这个模块中移除以做进一步的讨论，并将会出现在别的 CSS 模块中(或者更高版本的此模块)在不久的将来。

你知道，在css3中box-shadow是一个非常好玩的属性，被用得最广泛的地方莫过于:focus后的input或者textarea，诸如本站的input和留言区域的textarea，你会发现在:focus的状态时是加了box-shadow属性的。如图：
未激活状态的textarea

激活状态的textarea


当然在没看W3C的文档之前，我在别人的blog里看到的对于box-shadow的介绍发现内容都十分的陈旧了，大部分的对于shadow的定义都只是inset || [ <length> <length> <length>? || <color> ]而实际上其实是inset || [ <length> <length> <length>? <length>? || <color> ]。也就是有四个length可以定义。

在box-shadow没被移除前的最近一个CSS3草案文档(http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-box-shadow)中是这样定义的：

none | <shadow> [ <shadow> ]*

这里被定义为：

<shadow> = inset? && [ <length>{2,4} && <color>? ]

前面两个length长度取值对应着阴影在水平和竖直方向的位移。第三个length长度取值是模糊半径。第四个length长度取值是传播半径，使用正数表示阴影扩大，使用负数表示影子缩小，而这个长度是相对于父元素的大小而言的。
而inset就是把原本投射在box外部的阴影投射到box里面而实现的内阴影，用过一些作图软件的对于内阴影应该不陌生吧。

box-shadow属性在不支持的浏览器上会优雅的降级。例如，在微软IE8以下浏览器上看起来都是平淡无奇的盒子而没有任何阴影效果。

当然前文介绍的《两个 CSS3样式可视化生成工具：CSS3 Please & CSS3 Generator》可以帮你更直观的理解box-shadow这个属性。

如果你希望更多的了解这个目前已经被W3C移除的属性，可以继续阅读以下列表的文章：

• http://fredericiana.com/2009/06/12/shadow-boxing-with-moz-box-shadow/
• https://developer.mozilla.org/en/CSS/-moz-box-shadow
• http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-box-shadow

不知道何时，W3C才会发布正式版的CSS3啊…

View Demo CSS3 box-shadow Demo

本文地址:http://leeiio.me/css3-box-shadow-removed/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 两个CSS3样式可视化生成工具：CSS3 Please & CSS3 Generator (12)
• 浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer (28)
• CSS 改变选取文字的颜色(CSS3 – 目前 Firefox/Safari only) (14)

不过CSS3本身W3C也并未有正式版发布，现在还只是草案。下面我推荐两个很直观的，可视化的，自动生成CSS3样式代码的工具网站给大家。

1.CSS3 Generator

选择自己想要的CSS3属性，然后填写数值，右边便可直观的展示出效果了，然后你复制生成的样式代码即可。并且还列出了兼容这些样式的浏览器。可谓十分的方便。
http://www.css3generator.com/

2.CSS3, please!

这个看起来就更加的直观了，就像做填空题一样，在网页上填写相应的数值，右上角的元素就会呈现出相应的样式。如果你不需要组合这么多效果的话，关闭掉某一些样式属性即可。可以点击“{toggle rule on} ”或者“{toggle rule off} ”来开启单项属性或者关闭。
http://css3please.com/

正如前面所说，CSS3目前还是个草案，并且因为浏览器的关系，目前只有非主流浏览器支持，你知道的，所谓的主流浏览器就是占据了半壁多江山的IE系列了。IE系列目前只有IE8支持很少一部分的CSS3，未来的IE9倒是或许值得期待。

CSS3组合的好用的恰当确实可以使页面显示的很美观，可是如果只是为了CSS3而CSS3，诸如乱用text-shadow只是为了文字阴影而阴影个人觉得使完全没有必要的。

祝大家CSS3使用愉快。呃。

本文地址:http://leeiio.me/css3-generator-tools/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 消失的CSS3 box-shadow 属性? (12)
• 浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer (28)
• CSS 改变选取文字的颜色(CSS3 – 目前 Firefox/Safari only) (14)

1.安装 Git

首先，你需要安装带有 git-svn 的 Git(git-svn 可以让你 SVN 和 Git并用，如果你打算使用 Git 又不想转变你的 SVN版本库，这会是一种很好的解决方案，不过本文只是利用git-svn来一次性转换你的 SVN版本库 为 Git。)

你可以在这里下载安装Git：http://git-scm.com/download。最新版似乎都有集成git-svn，至少我安装完以上地址提供的编译好的版本，在 Terminal 里输入 git svn会有提示”Not a git repository”。

如果你正在使用MAC OS X，你应该已经用过 MacPorts了吧，那么：

prompt> sudo port install git-core +svn

Ubuntu 或者 Debian Linux用户:

prompt> sudo apt-get install git-svn

2.创建作者文件

下一步，创建一个文本文件来映射 Subversion 的提交者到 Git 的作者使历史记录里的名字和email地址正确显示。保存成authors.txt：

guaniu = Leeiio <xxx@xxx.com>

3.克隆(clone)版本库

现在来运行命令导入你的svn版本库为一个本地的Git版本库。
我假定你的 svn 版本库有标准的 /trunk,/tags 以及/branches。

prompt> git svn clone <SVN版本库地址> --no-metadata -A authors.txt -t tags -b branches -T trunk <转换的目的目录名>

比如以我的google code上的svn为例：

prompt> git svn clone http://leeiio.googlecode.com/svn/ --no-metadata -A authors.txt -t tags -b branches -T trunk Leeiio

现在，你可以运行 git log 命令，你将会看到你全部的提交历史记录以及正确显示的提交者作者名。

4.转换branches 为 tags

现在还需要做一步处理。目前你全部的 tags 在 Git 的版本库里都成了 branches(分支)，并不是 tags。所以你需要手动转换它们。对于每一个 svn 的 tag你都将转换为 Git 的 tag，然后删除全部的 branch。用以下的命令列出：

promp> git branch -r

然后列出所有的tag：

prompt> git tag tagname tags/tagname
prompt> git branch -r -d tags/tagname

现在，你就有了一个本地的 Git 版本库了，包含了所有的历史记录以及 tags。

5.Push(推送)到一个公共的版本库

当然如果你并不想在网上分享你的 Git 版本库，这一步的操作你大可不必了。
以 github 为例：

prompt> git remote add origin git@github.com:userid/project.git
prompt> git push origin master --tags

Well Done!一切搞定了。开始你的 Git 之旅吧。

最后，附送一个为 SVN用户过渡到Git的使用手册。

Via. How to convert from Subversion to Git

本文地址:http://leeiio.me/convert-subversion-to-git/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 在 Bluehost 主机上安装 Subversion(SVN),支持 64 位主机 (14)
• 在Google Code上用 Mercurial 取代 Subversion 管理你的项目 (11)

接下来回到本文的正题。本文的起因是Google Code在早前除了支持SVN托管代码外，更支持了分布式版本控制Mercurial(Hg)来管理你托管在Google Code上的项目。至于Google为什么在这么多种的分布式版本控制工具中选择了Mercurial而不是Git，这里有一篇文章，推荐阅读一下《Git 與 Mercurial 的分析》，原文《Analysis of Git and Mercurial》。

下面，就教大家怎么让Google Code用Mercurial替代Subversion来管理你的项目。原文 http://code.google.com/p/support/wiki/ConvertingSvnToHg。

在Google Code里设置由Mercurial来管理项目

1. 访问你已经存在的google code项目页面，选择 “Administer” 选项页,然后选择下级分类选项页 “Source”。
2. 改变第一项Repository type为Mercurial。
3. 参照下文介绍的“如何转换Google Code里Subversion的历史记录到Mercurial中”，导入你的代码到 Hg 代码库中
4. 以同样的导入代码的方式，导入你的wiki到Hg wiki库中。确认你使用的subversion代码库的wiki路径(例如 http://projectname.googlecode.com/svn/wiki) 以及 Hg 代码库的wiki路径(http://wiki.projectname.googlecode.com/hg/)

在你切换你的项目使用Mercurial管理后，你的旧Subversion项目仍然可以访问，所以在你切换之前你不需要备份你的代码库。你的Subversion版本库将会保持访问: https://projectname.googlecode.com/svn/

如何转换Google Code里Subversion的历史记录到Mercurial中

第一种方式：简要截取
如果你不在乎你原来项目的历史记录，那么你可以简单地从Subversion里的主干代码或者wiki中提取最新的代码然后放到你的Mercurial中。假设你googlecode里的 Mercurial代码库是空的，那么可以这样操作：

 $ hg clone https://projectname.googlecode.com/hg hg-client
 $ cd hg-client
 $ svn export --force http://projectname.googlecode.com/svn/trunk .
 $ hg add .
 $ hg commit -m "Initial import of source."
 $ hg push

接着转换你的wiki：

 $ hg clone https://wiki.projectname.googlecode.com/hg hg-client-wiki
 $ cd hg-client-wiki
 $ svn export --force http://projectname.googlecode.com/svn/wiki .
 $ hg add .
 $ hg commit -m "Initial import of wiki."
 $ hg push

第二种方式：完整历史记录转换
如果你要迁移你整个的历史记录，整个过程可能要你更多的参与了。你将会需要先安装一些特殊的工具程序。
安装工具

• ‘hg convert’扩展模块。最新版本的Mercurial已经包含这个模块，请确保你的hg版本为1.1 或者 1.2 或者更高版本。 (可用”hg –version”命令查看) 然后在你的.hgrc里面添加如下代码启用该扩展模块:

  [extensions]
  hgext.convert=

• Subversion的swig-python绑定。请确保您有最近的Subversion安装（1.5或1.6）。绝大部分的Subversion衍生版本都有与python的绑定，或者提供他们额外的二进制包。你可以运行如下代码检查你的svn – python的绑定是否正常：

  $ python -c "import svn.core; print svn.core.SVN_VER_MINOR"
          5

  如果失败，或返回的版本低于5，则肯定是不对的。如果你没有二进制软件包，你可以从Subversion自己的源代码树中建立：

  $ svn checkout http://svn.collab.net/repos/svn/tags/1.6.0 svn
  $ cd svn
  $ ./autogen.sh && ./configure
  $ make
  $ sudo make install
  $ make swig-py  # make sure you have swig 1.3 installed already
  $ make check-swig-py
  $ sudo make install-swig-py

  如果你在Ubuntu的Hardy版本，你可以在hardy-backports里找到1.5版的python-subversion: http://packages.ubuntu.com/hardy-backports/python-subversion
  这可能还需要安装backports里的libsvn1, subversion, mercurial-common, 和mercurial 包。

开始转换
现在我们开始转换– branches(分支), tags(标签)以及其他全部:

$ mkdir hg-client
$ hg convert http://projectname.googlecode.com/svn hg-client

一旦完成转换，你就可以push你最新的历史记录到你的Google Code项目中(前提是你有了一个空的Mercurial版本库):

$ cd hg-client
$ hg push https://projectname.googlecode.com/hg

至此，大功告成。

本文地址:http://leeiio.me/googlecode-converting-svn-to-hg/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 转换你的 Subversion 到 Git (9)
• 在 Bluehost 主机上安装 Subversion(SVN),支持 64 位主机 (14)

ZenCoding.vim插件提供的默认展开代码的快捷键是,也就是Ctrl + y and Comma。例如输入html:5_(_为光标的位置)，然后输入“<c-y>,”，就会展开成

<!DOCTYPE HTML> 
 <html lang="en"> 
<head> 
    <title></title> 
    <meta charset="UTF-8"> 
</head> 
<body> 
      _ 
</body> 
</html>

输入div#foo$*2>div.bar，然后输入“<c-y>,”就会展开成

<div id="foo1"> 
   <div class="bar">_</div> 
</div> 
<div id="foo2"> 
    <div class="bar"></div> 
</div>

当然，你也可以根据自己的习惯设置展开代码的快捷键，你可以通过在你的vimrc配置文件里写入以下配置来覆盖zencoding.vim插件的默认设置。

let g:user_zen_settings = { 
  \  'indentation' : '  ', 
  \  'perl' : { 
  \    'aliases' : { 
  \      'req' : 'require ' 
  \    }, 
  \    'snippets' : { 
  \      'use' : "use strict\nuse warnings\n\n", 
  \      'warn' : "warn \"|\";", 
  \    } 
  \  } 
  \} 
 
  let g:user_zen_expandabbr_key = '<c-e>'    "设置为ctrl+e展开
 
  let g:use_zen_complete_tag = 1

截图中的例子：
如果你在这段文本外面包裹这段缩写div#header>ul#navigation>li.item$*>a>span:

About Us
Products
News
Blog
Contact Up

你将会得到以下结果：

<div id="header">
	<ul id="navigation">
		<li class="item1"><a href=""><span>About Us</span></a></li>
		<li class="item2"><a href=""><span>Products</span></a></li>
		<li class="item3"><a href=""><span>News</span></a></li>
		<li class="item4"><a href=""><span>Blog</span></a></li>
		<li class="item5"><a href=""><span>Contact Up</span></a></li>
	</ul>
</div>

目前就目前我对zencoding.vim 0.27版的测试来说，选中文字用div#header>ul#navigation>li.item$*>a>span包括的时候出现了文本内容插入到错误的位置的问题，提交bug给作者了。
2010/03/08 22:11 更新：作者回复说修复了。在0.28版本中增加了更多的快捷键操作，所以下面的自定义快捷键配置无法生效了。可前往http://github.com/mattn/zencoding-vim获取最新版本。
2010/03/09 20:05 更新：经过和作者的探讨，原来的快捷键已经改为，不会和撤销冲突，另外上条更新所说的自定义快捷键重新可用了。

zencoding.vim更新十分频繁，大家可以关注下。
VIM官方插件地址：ZenCoding.vim
zencoding.vim在Github的地址：http://github.com/mattn/zencoding-vim
Zen Coding官方地址：http://code.google.com/p/zen-coding/
Zen Coding官方提供的速查手册(PDF)：http://zen-coding.googlecode.com/files/ZenCodingCheatSheet.pdf

本文地址:http://leeiio.me/zen-coding-in-vim/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• Vim 新手上路 (56)

虽然我很out了，但是我想还是有很多Vim初学者徘徊在门外，抱着窥一窥的态度。我也就作为一个菜鸟，谈谈我的上路之旅吧。

1.Vim安装

官网http://www.vim.org/download.php处下载适合的版本即可，因为我的公司工作平台是Win XP，所以我下的是GUI executable版本图形化界面的版本gvim72.zip。

2.多语言乱码问题

安装好之后，我想第一要解决的问题是编码问题。和所有的流行文本编辑器一样，Vim 可以很好的编辑各种字符编码的文件，这当然包括 UCS-2、UTF-8 等流行的 Unicode 编码方式。然而不幸的是，和很多来自 Linux 世界的软件一样，这需要你自己动手设置。一般的，vim打开中文文件时会出现乱码，原因比较复杂，这里不罗嗦了。就说说我的配置吧。Vim的配置问题存在于安装路径的根目录，比如我安装在D:\Program Files\Vim，_vimrc文件就是它的配置文件，以下所描述的配置信息皆写到这个文件里。

"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => 配置多语言环境
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
if has("multi_byte")
    set encoding=utf-8
    set termencoding=utf-8
    set formatoptions+=mM
    set fencs=utf-8,gbk
 
    if v:lang =~? '^\(zh\)\|\(ja\)\|\(ko\)'
        set ambiwidth=double
    endif
 
    if has("win32")
	"处理菜单及右键菜单乱码
        source $VIMRUNTIME/delmenu.vim
        source $VIMRUNTIME/menu.vim
        source $VIMRUNTIME/mswin.vim
        behave mswin
        language messages zh_CN.utf-8 "处理consle输出乱码
    endif
else
    echoerr "Sorry, this version of (g)vim was not compiled with +multi_byte"
endif

Vim配置文件里面半角的”是注释。多语言环境编码的配置取自明城的Vim的配置。

3.字体的设置

写代码，好看的字体很重要。不管是什么，好看的东西都很重要。好看，能带给人愉悦感，写代码也不例外。我用的是大名鼎鼎的Yahei Consolas Hybrid修改字体，中文字体是雅黑，代码字体么自然是Consolas。 Consolas字体原本是微软为 Visual Studio 2005和2008用户提供的，原版只是单独的英文字体，不含中文。因此在中文环境下显示会是“宋体”+Consolas 的组合，难看至极。而这个修改版替换了雅黑作为中文字体，美观度自然是宋体有所提高，当然也是因人而异。要下载字体可以戳这里下载。
然后在配置里加入以下代码来指定字体

set guifont=YaHei_Consolas_Hybrid:h12:cANSI "h12表示的是字号大小

3.配色方案

在用notepad++的时候，我一直最中意monokai这个配色，在Vim下叫molokai，这是一款很知名的配色，至少我很喜欢，就是最顶端的那个截图里的配色啦。这款配色同样可以戳这里获得。
然后你可以在配置里写入以下代码来指定你的界面为该配色

colorscheme molokai

4.一些插件和扩展

也许你同样注意到了截图中的那些花花绿绿背景色的东西，这个叫CSS color preview的扩展可以使css里面的那些颜色具体化也就是表现出来，十分直观。继续戳这里下载。
而代码提示插件用的是AutoComplPop，还在使用DW或者aptana等一些工具的朋友们肯定对代码弹出提示情有独钟，这款插件的功能可以说是有过之而无不及啊，当然如果你不喜欢这种自动的代码提示的话可以不用装。需要的朋友还是戳这里下载。

Vim的强大之处当然不止本文说的这么些皮毛，丰富的扩展插件让其光芒不减。我还涉谷未深，这种新上上路的文章希望能给每个想加入Vim阵营的朋友们以帮助。今后会有更多的关于Vim的分享。欢迎收看！

本文地址:http://leeiio.me/vim-novice/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 在Vim里玩Zen Coding (25)

你知道，IE是个脑残儿浏览器，不管是什么版本，纵使版本号越来越大，可总是让人觉得这玩意儿跟标准老是扯不上暧昧。可是，你知道，只要世上还有 windows 操作系统，IE就永生不灭，阿门。对于代码工作者来说，自然是苦不堪言，为了考虑IE的兼容问题，不管是写 CSS 还是 JS，往往都要对 IE 特别对待，这就少不了做些判断。本文不讨论如何区分 IE 的样式，仅是 JS 判定 IE 浏览器。

这个目前世界上最短的 Javascript 判定 IE 浏览器的方法来自一个俄人,又是俄人！它已经在各版本的 IE 以及目前其他流行的浏览器上经过测试，基于 IE 的 Bug，微软虽然已经意识到，但是从来没有纠正过。

<script type='text/javascript'>
var ie = !-[1,];
alert(ie);
</script>

以上代码运行结果：IE 下返回true，其他标准浏览器返回false。!-[1,]，仅仅只有 6 bytes！

不过如果反过来判断，标准浏览器返回 true 而 IE 返回 false的话，则可以再缩短一个byte。

<script type='text/javascript'>
notIe = -[1,];
 
if(-[1,]){
// 标准浏览器代码
}else{
// IE Only的代码
}
</script>

看完了这些，你们是不是很好奇这些是怎么运行的？请继续看下文。

这个 Bug 产生的原因是 IE 会添加一个空数组元素到数组元素的总数里。

[1,]. Length

标准浏览器会返回 1 (基于标准的 ECMAscript ，在数组最后的逗号”,”会被忽略，这是为了方便在一列里显示以及自动生成等)，但是 IE 会返回 2。当你打印这个数组的时候 IE 将会返回 “1, “，也就是两个元素，而其他标准浏览器将会返回 “1″。

这很容易验证，比如在 IE 和 FF中运行以下代码：

<script type='text/javascript'>
alert([,]==',');
//这是8个字符判定IE
</script>

[1,]实际上浏览器的操作是toString()转换成字符串的操作，-[1,]是将字符串强制转换为数字。而 IE 将会返回 NaN，但是遗憾的是 NaN 并不是一个数字，因为[1,]转换成字符串后的”1,”里面带有逗号。而其他标准浏览器会返回 -1，这是一个非 0 的数字。

你知道，NaN 转换成 Boolean 型将返回 false，所以-[1,]在 IE 下将返回 false。而任何非 0 的数字转换成 Boolean 型(例如-1)，在 标准浏览器下都将返回 true。所以我们得到了一个判定结果，!-[1,]在 IE 下返回true，而在其他标准浏览器下返回 false。也就达到了区分判定 IE 浏览器的目的。

当然，如前文所说，这个 Bug 其实微软很早就已经知道，但是却一直没有去修复它，所以在未来的 > IE8 的 IE 浏览器也就不确定是否依旧可以，不过基本上这么多代的 IE 都没有修复，未来的 IE 也不太会去修复的样子。

以下是其他的一些区分判定 IE 浏览器的代码，也可以参考下:

<script type='text/javascript'>
// Option from Dean Edwards:
var ie = /*@cc_on!@*/false;
 
// Use the commented line:
var ie//@cc_on=1;
 
// Variation (shorter variable):
var ie = '\v'=='v';
 
/ / Option to Gareth Hayes (former record-holder):
var ie = !+"\v1";
</ script>

参考文章：
Самое короткое определение IE
32 bytes, ehr … 9, ehr … 7!!! to know if your browser is IE

本文地址:http://leeiio.me/ie_detection_in_5_bytes/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 年度曖昧文章