努力加强ie8到ie9 polyfill水平 彻底抛弃老旧浏览器ie8

不知道大家对ie8有什么看法

很多人在说ie8要兼容的理由的时候总是用百度的调查指数 其实有一个问题 百度中ie8有很大一部分可能是360这类的浏览器

ie8必须退出历史舞台 并且我们还要和设计做出表态 不能无限制搞出新设计

长久以来web 有 展示页面 也有企业应用页面 但是都有一个问题 被限制了加载资源总数
有的时候我在想web开发者真牛 用比别人少得资源完成比别人多的功能
不要说android swift难

你是说那个不停拖控件 不停加第三方服务 不用考虑安装大小的开发吗

这个模板随时会改

    <!-- 总共35k 提供了dom3 es5 大部分功能 -->
    <!--[if IE 8]>
    <script src="../../public/js/ie8-support/es5-shim.min.js"></script>
    <script src="../../public/js/ie8-support/es5-sham.min.js"></script>
    <script src="../../public/js/ie8-support/ie8.min.js"></script>
    <![endif]-->
    <!-- dom4级 功能 -->
    <script src="../../public/js/modren-browser/dom4.min.js"></script>

ie8 js加强的问题

es5

es5-shim
es5-sham

必须的

ie8 dom

感谢 webreflection

ie8
dom4

dom4中classlist必须啊

ie8 document.querySelector

ie8 document.querySelector 无法使用css3 selector
为了提供css :last-of-type 支持 其实css3大部分都可以改写方法支持 不过没必要

我写了个polyfill 用来支持 :last-of-type

我可以保证绝对没测试过 目前只确保我用的几个格式可以 只是提供思路

(function () {
    'use strict';
    var _querySelector = document.querySelector;

    try {
        // Can't be used with css3 selector in IE < 9
        _querySelector.call(document, "head *:last-child");
    } catch (e) { // Fails in IE < 9
        var preSelector = "";
        var afterSelector = "";
        document.querySelector = function(selector) {
            var par = ":last-of-type";
            if (selector.indexOf(par) > -1) {
                var selRex = new RegExp('([\\w\\s.#])+(?='+par+')', 'g');
                preSelector = selector.match(selRex);

                if (!preSelector) {
                    return null;
                }
                var allList = document.querySelectorAll(preSelector);
                if (!allList || allList.length < 1) {
                    return null;
                }
                var lastEle = allList.item(allList.length - 1);

                afterSelector = selector.replace(preSelector, "").replace(par, "").trim();
                if (afterSelector != "") {
                    return lastEle.querySelector(afterSelector);
                }
                return lastEle;
            }
            return _querySelector.call(document, selector);
        }
    }
}());

ie8 css加强问题

如果你有个css预处理器 完全可以在处理的时候 把内容以json字符串的格式统一放到一个元素的font-family里吗

postcss 还是实现简单点 sass有点玩的花了 然而postcss没时间写具体实现

比如我喜欢使用sass

我自己就用这种方案解决了vw vh的问题 而且几乎不用什么等待 只会闪一下

$polyfill: () !global;

@mixin set-value($selector, $map: ()) {
    $polyfill: map-deep-set($polyfill, $selector, $map) !global;
    @each $key, $value in $map {
        #{$key}: #{$value}
    }
}

@mixin easy-set($map) {
    @include set-value("#{&}", $map);
}

$setUnit-debug: false !global;

@function setUnit($val, $parentWidth, $unit) {
    @if $setUnit-debug {
        @return $val + px;
    } @else {
        @return ($val / $parentWidth) * 100 + $unit;
    }
}

@function vw($unit) {
    @return setUnit($unit, $designWidth, vw);
}

@function vh($unit) {
    @return setUnit($unit, $designHeight, vh);
}

@mixin polyfill() {
    .item14 {
        .p {
            @include easy-set((
                    padding-left: vw(91),
                    padding-right: vw(91),
                    margin-bottom: vh(69)
            ));
        }
        .intro1 {
            @include easy-set((
                    margin-top: vh(201)
            ));
        }
        input {
            @include easy-set((
                    height: vw(80),
                    line-height: vw(80),
                    font-size: vw(33),
                    padding: vw(20),
                    border-radius: vw(20)
            ));
        }
        textarea {
            @include easy-set((
                    height: vw(220),
                    line-height: vw(60),
                    font-size: vw(33),
                    padding: vw(20),
                    border-radius: vw(20)
            ));
        }
        .btn {
            @include easy-set((
                    width: vw(306),
                    height: vw(83),
                    font-size: vw(40),
                    border-radius: vw(20),
                    margin-top: vh(136)
            ));
        }
    }
}

@include polyfill();

@include json-encode($polyfill);

大概思路就是使用sass将需要更改的selector信息组成json字符串放置到head font-family里
这样可以随时保持更新 加快速度 js读取相关json 再一个一个添加上去 不限定什么selector 目前我使用querySelectorAll 速度还是有点慢 不过只需要一闪一下就可以转变

        var content = window.getComputedStyle(
                document.querySelector('head')
        ).fontFamily.replace(/\\/g, "").replace(/'/g, '');

        var viewportwidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        var viewportheight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

        function rel(propval, unit) {
            return parseFloat(propval.replace(unit, ""));
        }

        function cal(propval) {
            if (typeof propval != "string") {
                return propval;
            }

            if (propval.indexOf('vw') > -1) {
                return viewportwidth * rel(propval, "vw") / 100 + "px";
            } else if (propval.indexOf('vh') > -1) {
                return viewportheight * rel(propval, "vh") / 100 + "px";
            } else {
                return propval;
            }
        }

        function setVwStyle(ele, cssprops) {
            for (var csspropkey in cssprops) {
                ele.style[csspropkey] = cal(cssprops[csspropkey]);
            }
        }

        var parseobj = ( new Function( 'return (' + content + ');' ) )();

        for (var key in parseobj) {
            var elements = Array.prototype.slice.call(document.querySelectorAll(key));
            if (elements) {
                for (var i = 0; i < elements.length; i++) {
                    console.dir(elements[i]);
                    setVwStyle(elements[i], parseobj[key]);
                }
            }
        }