这个工具的实现，是我长久以来的一个愿望，缘于之前看到的蓝色理想上的一个代码捕捉器。当时我下下来用了一下，没仔细研究，只觉得很难用，于是心底就有了一颗种子，希望有一天自己能开发出这样的工具。感谢伟大的谷歌，给了我一种优雅的实现方式——谷歌插件。

下面说说技术部分：

一开始用的是浏览器原生的css rules，可是后来发现谷歌的css rules是经过解析的，而ie的不是。由于对谷歌的偏爱，所以不得不另辟蹊径。凑巧之前又看到了谷歌的另一个插件——Web Developer，可以把页面引用到的css文件内容都显示出来。于是，在控制台把代码复制了下来，考到了我的js里面。它的实现原理是用ajax请求把所有css文件内容给抓下来，这涉及到一个跨域问题。不过不用怕，我们是插件嘛，当然有特殊的权利——跨域ajax请求。

过去在网页上播放声音一般使用wmp（windows media player）控件，但是wmp控件提供的js接口非常有限，更致命的是IE only。如果不想接受wmp的界面，又或者想要跨平台，只能借助于flash了。现在html5标准已经原生支持音频播放，并且各大浏览器都不同程度地实现了。

关于团队合作的css命名规范

常用的css命名规则：

• 头：header
• 内容：content/container
• 尾：footer
• 导航：nav
• 侧栏：sidebar
• 栏目：column

文本溢出展示省略号的需求经常都会用到，而对于新式的浏览器，这完全不是问题，因为css3里面已经有实现text-overflow：ellipsis，但是最新w3c文档中却移除了这个属性，即使这样，也有不少浏览器实现了这个特性。其浏览器支持情况如下：

可以看到，只有firefox和opera11一下的版本不支持这个浏览器，以此也可以放心大胆的用了。但是遇到要求高的产品经理时（╮(╯_╰)╭），就不得不考虑firefox等不支持的浏览器了，唯有使用js进行字符截断。

比较简单的截断方式就是按字符个数截断，以一个中文宽度等于两个英文宽度为前提，根据给定字符个数进行截取。但是字符在页面显示的时候，其宽度并不是一定的，会根据不同的字体和字体大小的不同而不同，更何况字母i和A的宽度是不一样的，存在bug且不够精确。

现在css3出来了， 添加了许多新特性，但由于并未全部浏览器都实现了这些特性，使用起来不太顺畅。因此，就想在使用的时候进行判断，如果有这个属性并且支持这种值，就css实现， 否者就用js实现。

比较明显的例子就是text-overflow这个属性，text-flow：clip是大部分浏览器都支持的，而text-flow：ellipsis则在firefox和10.6版本以下opera上工作不了，让人相当头疼。

废话少说，判断的代码如下：

这个判断的原理是：创建一个节点，判断其的style属性是否含有textOverflow属性，有则进一步判断是否支持ellipsis这个值。

判断是否支持ellipsis值依靠的是浏览器对于非法style值的处理，当遇到不支持的属性值时，浏览器会直接把这个值抛弃。因此这里就可以先给textOverflow赋值“ellipsis”，如果不支持，则其值肯定为空或者其它不等于“ellipsis”的值。因此只要判断赋值后的textOverflow是否等于“ellipsis”即可。

Hello，everyone~ Tencent Alloy Team博客正式开通咯（鼓掌，撒花，转圈），博客的第一篇文章，好紧张！！~~~·⊙﹏⊙b汗~~欢迎大家多多拍砖~~：）

首先，我们为什么要建设这个博客呢

• 第一，当然是为了我们的团队让更多的人知道我们了：）
• 第二，是通过写博客和分享提高我们团队在项目建设上的整体实力：）
• 第三，通过写博客与同行者进行交流互动，认识更多业界的人：）
• 第四，通过分享我们的经历，分享我们的技术，帮助到更多需要的人，为推动业界的发展做出一点贡献：）
• 第五，是凝聚团队向心力，提高团队使命感，发展团队文化。在这里可以自由施展，这里可以学习进步！这里就是你的家~~~