优雅降级元(CSS JS)

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

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

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

rem为CSS3新的长度单位,为HTML根长度,但不是所有的浏览器都能很好的支持,如上写法,如果浏览器不支持rem,也不会报错,只会忽略1rem这个值,而设置了16px;如果浏览器支持rem,则读取了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, 如果你发现你的鼠标定位偏离了你的想象,请不要奇怪,这是再正常不过的事情。

原文地址:https://www.cnblogs.com/zhu-shixin/p/6384463.html