关于团队合作的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汗~~欢迎大家多多拍砖~~：）

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

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