TAT.melody ie6 position fixed
In CSS3,Web开发 on 2011年11月21日 by view: 1,856
0

Html5音乐播放器(一)
In JavaScript,Web开发 on 2011年10月31日 by view: 6,030
1

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

TAT.sheran 关于团队合作的css命名规范
In CSS3 on 2011年10月28日 by view: 25,739
18

关于团队合作的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”即可。