优雅降级元（CSS JS）

 原来在自学前端的时候，听到过一个词叫做“优雅降级”，原来也没怎么弄懂什么意思，现开窍分享如下：

因某些新发布的CSS样式或HTML标签在老的浏览器上不兼容，而在写代码时做的了一定的处理，确保在浏览器不兼容时，也能够达到原效果或部分原效果，例如：

.width{
width:16px;
width:1rem;
}

rem为CSS3新的长度单位，为HTML根长度，但不是所有的浏览器都能很好的支持，如上写法，如果浏览器不支持rem，也不会报错，只会忽略width:1rem这个值，而设置了width:16px;如果浏览器支持rem，则读取了width:1rem这个值；

如HTML5标签：

<object width="100%" height="100%" type="video/x-ms-asf" url="3d.wmv" data="3d.wmv" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" aurostart="ture" showcontrols="true" pluginspage="http://www.microsoft.com/Windos/MediaPlayer/"></embed>
</object>

这里面有三个嵌入标签<object>+<parem>、<embed>
<object>+<parem>是为IE准备的，因为IE用自身的ActiveX控件处理多媒体插入等。

<embed>是为标准浏览器像FF或没有该IE插件的浏览器准备的，因为他们不会识别object标签。

这样不识别最外层object的浏览器， 会识别embed标签，保证视频的播放

如js，其实我们经常用的“或” “||”也是这个思想

var beforeScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop,

document.documentElement.scrollTop   获取当前页面的滚动条纵坐标

网页被卷去的高： document.body.scrollTop;
在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;
如果你想定位鼠标相对于页面的绝对位置时，你会发现google里面1000篇文章里面有999.99篇会让你使用 event.clientX+document.body.scrollLeft，event.clientY+document.body.scrollTop， 如果你发现你的鼠标定位偏离了你的想象，请不要奇怪，这是再正常不过的事情。

优雅降级元（CSS JS）

原文：http://www.cnblogs.com/zhu-shixin/p/6384463.html