Hack 兼容

内核

目前主流浏览器内核包括Webkit、Blink、Gecko、EdgeHTML和Trident，具体分布如下：

浏览器内核	代表浏览器	最新版本	检测时间	备注
Webkit	Safari v13.1.1	Webkit 602.4	20210417	仅此一家支持
Blink	Chrome v90.0.4430.72	Blink 537.36	20210417	从Webkit中Fork而来；Opera、360等也使用该内核
Gecko	Firefox v87.0	Gecko 87.0	20210417	仅此一家支持
EdgeHTML	Edge v44.18362.387.0	EdgeHTML 18.18363	20210417	仅此一家支持
Trident	IE11 v11.418.18362.0	Trident 7.0	20210417	IE6~11均使用

HACK

虽然现代浏览器普遍支持H5和CSS3，但是对于某些属性依然无法达到统一效果，这时不得不使用HACK方法进行兼容适配。所谓HACK是利用各家内核对某类写法特殊支持的特性而开发出来的专属兼容方法，通过HACK技术可使得某个属性能统一效果。除了少量win8和8.1用户，目前大众主要使用win10和IOS操作系统，win7以及winXP已经不是我们的HACK范围，而微软2020年宣布，从2021年8月，微软将全面停止对IE11浏览器的支持，故主要的浏览器分别是Safari、Chrome、Firefox和Edge，另外为了保障我们产品的覆盖面也适当兼顾IE11。对于常用浏览器我们了列举常用的HACK方法：

浏览器	写法举例
通用写法	.color{color:red;}
Safari 7.1+	_::-webkit-full-page-media, _:future, :root .color { color:blue;}
Chrome 29+	@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) { .color { color:red; } }
Chrome 35+	_::content, _:future, .color:not(*:root) { color:red; }
Chrome 26+, Safari 6.1+	_:past, .color:not(*:root) { color:red; }
Chrome 22+, Safari 6.1+	@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm), screen and(-webkit-min-device-pixel-ratio:0){ .color { color:red; } }
Firefox	@-moz-document url-prefix() { .color {color:blue;} }
IE10,IE11,Edge	_:-ms-lang(x), .color {color:green;}
IE11	_:-ms-fullscreen,:root .color {color:green;}

推荐以下顺序写HACK：

<style type="text/css">
    /*常规*/
    .color{color:red;}
    /*safari hack*/
    _::-webkit-full-page-media, _:future, :root .color { color:black;}
    /*firefox hack*/
    @-moz-document url-prefix() {
        .color {color:blue;}
    }
    /*ie10,ie11,edge hack*/
    _:-ms-lang(x),.color {color:green;}
</style>

浏览器颜色测试

记录

记录开发AXUI框架中遇到的一些HACK事项和解决办法。

浏览器	问题描述	解决方法	处理时间
IE11/Edge	在@keyframes关键帧动画中不支持calc方法，bottom: calc(14px - 8px)无效	注释掉bottom值，使用transform:translateY(14px) translateY(-8px)代替	20210418
IE11	如果父层使用了justify-content:flex-end或者justify-content:center，子元素使用margin:0 auto将向右偏移	使用_:-ms-fullscreen,:root .selector {justify-content:flex-start;}方法覆盖	20210418
IE11/Edge	由于24等分无法除尽导致IE和Edge的Grid换行，比如.ax-col-1{width:calc((100%/24)*1);}，其他类似情况还有.ax-col-3、.ax-col-4、.ax-col-7、.ax-col-6-avg、.ax-col-7-avg、.ax-col-8-avg、.ax-col-9-avg、.ax-col-11-avg	使用_:-ms-lang(x), .ax-col-1 {width:4.166666%;}方法覆盖	20210418