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

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

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

TAT.sheran 关于团队合作的 css 命名规范
In CSS3 on 2011年10月28日 by view: 37,402
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” 即可。