一个需要兼容到IE8的项目

2018-10-10 本文已影响0人 Yuxin_Liu

从未兼容过IE8的girl，在看到自己满心欢喜写的页面在IE8里打开的时候，是崩溃的。
兼容的过程经历下来有一种洗心革面、破茧成蝶的感觉（尴尬而不失礼貌的微笑脸）。

1.html中的注释怎么判断IE8/非IE8

<!--[if lte IE 8 ]><html class="ie" lang="zh-cn"><![endif]-->
<!--[if (gt IE 8)|!(IE)]><!-->
<html class="modern"
  lang="zh-cmn-Hans">
<!--<![endif]-->

如上，[if lt IE 8]的意思是：小于或等于。[if (gt IE 8)|!(IE)]的意思是：大于（切不包含）IE8，或，非IE8。至于lte、gt都是什么意思呢？

gt: greater than，选择条件版本以上版本，不包含条件版本
lt: less than，选择条件版本以下版本，不包含条件版本
gte : greater than or equal，选择条件版本以上版本，包含条件版本
lte : less than or equal，选择条件版本以下版本，包含条件版本
! : 选择条件版本以外所有版本，无论高低
&：并
|：或
()：子表达式

在这里留个问题给今后的自己（偏偏在问了俊哥的时候豁然开朗）：
为什么有些注释是这种写法

<!--[if (gt IE 8)|!(IE)]><!-->
something doesn't show in ie
<!--<![endif]-->

而有些确是

<!--[if lte IE 8 ]>
  something you want to show in ie
<![endif]-->

2. 一个关于meta的故事

对于360浏览器来说，<meta name="renderer" content="webkit">意味着在360浏览器中启用极速模式（页面默认用极速核），取之的有IE兼容内核：<meta name="renderer" content="ie-comp">和IE标准内核：<meta name="renderer" content="ie-stand">

3. 学会观察控制台中的render

故事的起因是这样的：
前提：页面有一个每秒一次的定时器。
我呢用了一个外引得超细字体，发现这些字体每秒都会闪一下（文字粗细颜色深浅来回转换）。这个现象被文博一眼看透，他说“闪烁，说明浏览器每秒都在渲染这个区域，看下rendering吧...”

两步：

找到控制台中的Rendering
勾选上Paint flashing之类的
Rendering
Paint flashing
勾选上了paint flashing之后会发现，那个定时器造成了几乎整个页面的每秒渲染一次。这个时候那个神奇的要使用will-change的原理就浮出水面了。所以解决办法之一，就是在定时器作用的<span>上加上will-change: transform

4. 不要高估IE8/9对伪元素的渲染能力

为什么这么说呢？
用伪元素span::before的transform:translateY()模拟数字滚轮（当然在IE8/9中，我乖乖地把transform改为了top）：
发现在IE11的模拟器下模拟IE8/9的时候，浏览器可以准时并精准地把某一时刻::before的top位置渲染出来。然而在真实的浏览器中，IE8卡！住！了！（IE9甚至渲染找不到top位置，一次都赋值不上！）就连强制执行$targetElem.offsetLeft以求强制render，也是没有任何效果的。
无奈之下，只能在IE8/9中放弃伪元素，直接把数字innerHTML到相应的span中。
所以结论是，如果想要页面兼容IE8/9并且带有动画的话，慎用伪元素的定位变化。

5. a标签中的rel="noopener noreferrer"

vscode中一些插件(如HTML Snippets)已经把a:blank的补全自动加上了该属性。
可以看下此文的解释：
当给a标签加上target="_blank"的时候，待跳转的页面是可以通过window.opener获取到当前页面的部分访问的。所以，新开的tab页也就能够再用window.opener.location跳转到其他（比如某个钓鱼的）网页，或者代表当前页面执行一些JS操作。而用户往往是信任从当前页跳转的新tab页的。
比如，用一个萌猫的图片吸引你分享到facebook，然而当你在分享前需要登录的时候，却是一个fake的facebook登录页。如果你分不清的话，就是会乖乖地输入你的账号和密码的。
那么解决方式呢。。。
就是在target="_blank"的a标签中加上rel="noopener"，鉴于FF是不认noopener的，所以还要为了FF加上noreferer，所以完整写来就是：rel="noopener noreferer"
举个例子实践一下：
new page a、page b。page a 中有一个target="_blank"的a标签，link到了page b，当点击链接打开新标签也就是page b的时候：

console in page b.png
试着在page b的console中输入window.opener.location，能够看到原页面page a的地址。然后，将window.opener.location设置为其他页面地址的时候，page a就乖乖跳转了：

page a的location发生了变化.png
在我们加上了noopener之后，新打开的page b中就无法访问到window.opener当中的属性了。

after set noopener.png
值得注意的是，用JS实现新建标签打开页面，也伴有同样的问题，所以我们不要直接用window.open('http://www.google.com')，而是要像这样：

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;

6. 渐变的文字

所有的IE都不支持文字的渐变
优雅降级的处理方式是：-webkit内核者，渐变；IE核，纯色。
文字的渐变实际上是依靠背景的渐变来实现的：

background-image: linear-gradient(to right,#ffd823 30%,#0f9);：给文字设置一个渐变的背景
-webkit-background-clip: text;：文字以外的部分都cut掉
-webkit-text-fill-color: transparent;：文字部分设置为透明，以此来把背景部分透露出来。

不难看出，基本原理还是靠操作背景。所以不仅是文字渐变，镂空的文字也可以通过background: whatever;再加上-webkit-text-fill-color: transparent;-webkit-background-clip: text;来实现。
有关knockout text的实现可参考css-tricks上的这篇。

7. 帧动画的实现

帧动画，也就是把动画分解，每一帧做成一张图片，再把所有帧图拼成一个长图。最后利用改变background-position来实现动画。
举例：

animation: lightning 2s steps(20) infinite;

在animation中写下自定义的动画名lightning之后，设置一个steps(20)（表示一共执行20步，每一步的时间被2s平均分配）就可以了。

@keyframes lightning {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -3350px;
  }
}

ps: 开发一定要和动效师确认好每一帧的停留时间（一般来说是40ms）。