zhilizhili-ui 荡平ie8910 还我前端清净地

zhilizhili-ui 给大家带来一个目前最新版本的ie8方案

特色

flexbox部分功能
vw
vh
calc部分功能
angular1.4

todo

avalon是因为无法和polyfill.js和谐共处无法使用flexbox 真可惜

webcomponent 无法在ie8 ie9上使用也就无法解决这些问题了不过cordova解决方案里会有

flexbox

flexbox 我使用的是 flexibility.js github地址作为兼容方案
那么作为一款快速开发的方案 emmet 解决方案也是会有的

我举个例子

如果想要使用一个flex row layout
就可以直接在sublime中输入zen-flex-row 变成预设语句 .layout.flex.horizontal>.layout__item*
再变成相应html代码
webcomponents 版本不太一样具体之后文章给出方案

注意

不过注意的是flexibility 无法正确计算外部长度
justify-content 全部属性可以通过测试

为什么没撑满因为设置了高度
ie8 ie9测试截图一样效果不重复截图
图片描述

align-items 全部属性可以测试通过
图片描述

这里再说一下一个注意点 flex布局item是height撑满的不是100% 注意效果一样而已如果你对item设置过高度就会按你设置的高度计算就算align-items:stretch没用

vw vh

其实后来我发现我实现的和vw vh写法上有些不同不过标准写法也会实现的
这里我要说说设计师和前端之间的配合问题

通常我们在写pc端响应式布局的时候都喜欢确认一个基准布局比如1920 高度在pc端不定其实没啥说的我个人也不推荐vh 不过还是要支持的

早期固定式设计大家都喜欢一种960的布局大家都懂就不上图了
为什么是960呢因为这时候的屏幕都在1024 1366左右
后来 1920 出现了就这样
图片描述

然后你的老板看到了
图片描述

所以这时候一般设计师就改成了这样通常是1200 为什么是1200 因为还有1440这种屏幕啊
图片描述

这时候大家通常的做法是单独的写一套css 最后在分析分析将重复可以利用的提取出来

这是正确的不过我要说的是对于这样的web app呢是否有种哭的感动不要说用100% 一路继承下去烦死了
图片描述

通常这里有两种做法rem vw 不过vw更简单些另外可能很多能人没有注意到 bootstrap 很早就提供了一个
图片描述

这个我以后说到手机端优化布局的时候会说

media 这个的确就是在特定条件下触发用于更换样式
不过rem vw这类单位可以无损适应屏幕拉伸变大 rem要做点兼容也是可以的

media query是用来做断点查询的这点很重要

pc端vw大概是个什么样子
图片描述

ie8浏览器在放大时候会有4px的边所以最大化时会有些差异

如何去实现ie8下的vw支持了首先要获取屏幕的宽高
不过值得注意的是首先要收集到浏览器的滚动条宽度

当body元素未加载时加入

window.documentElementclientWidthWithScrollBar = document.documentElement.clientWidth;

当body元素加载完成时 document的宽度会有所改变 body和html都为100%的宽度
这就说明不会含有滚动条宽度所以在pc端vw和100%效果是不太一样的这个我后面会统一一个dw单位

window.scrollBarWidth = window.documentElementclientWidthWithScrollBar - document.documentElement.clientWidth;

后面我们就可以得到滚动条的宽度

要说这个实现的方法我们要用sass或者postcss之类样式预处理工具

首先说说页面上js和css的如何通讯首先我们确定一下通讯格式 json
sass 可以讲map变成json SassyJSON github链接

然后如何将字符串放置到页面上呢我们知道浏览器在分析css时会把一些不合法的属性给扔掉
不过有哪两个属性例外 content font-family 其中font-family兼容性最好

这时候我们在页面上部署一个meta标签

<meta name="support-vw-vh" content="no">

head里的标签也可以接受font-family属性

var content = window.getComputedStyle(
    document.querySelector('meta[name="support-vw-vh"]')
).fontFamily.replace(/\/g, "").replace(/'/g, '')
content = content.slice(1, content.length - 1);

var parseobj = {};

try {
    parseobj = new Function('return (' + content + ');')();
} catch (e) {
    console.log("vw vh:没有什么要兼容的 intersting");
    return false;
}

使用getComputedStyle可以得到标签解析后的style 不过要恢复转义

ie8没有getComputedStyle 所以我们要自己写

!('getComputedStyle' in this) && (this.getComputedStyle = (function () {
    function getPixelSize(element, style, property, fontSize) {
        var
            sizeWithSuffix = style[property],
            size = parseFloat(sizeWithSuffix),
            suffix = sizeWithSuffix.split(/d/)[0],
            rootSize;

        fontSize = fontSize != null ? fontSize : /%|em/.test(suffix) && element.parentElement ? getPixelSize(element.parentElement, element.parentElement.currentStyle, 'fontSize', null) : 16;
        rootSize = property == 'fontSize' ? fontSize : /width/i.test(property) ? element.clientWidth : element.clientHeight;

        return (suffix == 'em') ? size * fontSize : (suffix == 'in') ? size * 96 : (suffix == 'pt') ? size * 96 / 72 : (suffix == '%') ? size / 100 * rootSize : size;
    }

    function setShortStyleProperty(style, property) {
        var
            borderSuffix = property == 'border' ? 'Width' : '',
            t = property + 'Top' + borderSuffix,
            r = property + 'Right' + borderSuffix,
            b = property + 'Bottom' + borderSuffix,
            l = property + 'Left' + borderSuffix;

        style[property] = (style[t] == style[r] == style[b] == style[l] ? [style[t]]
            : style[t] == style[b] && style[l] == style[r] ? [style[t], style[r]]
            : style[l] == style[r] ? [style[t], style[r], style[b]]
            : [style[t], style[r], style[b], style[l]]).join(' ');
    }

    function CSSStyleDeclaration(element) {
        var
            currentStyle = element.currentStyle,
            style = this,
            fontSize = getPixelSize(element, currentStyle, 'fontSize', null);

        for (property in currentStyle) {
            if (/width|height|margin.|padding.|border.+W/.test(property) && style[property] !== 'auto') {
                style[property] = getPixelSize(element, currentStyle, property, fontSize) + 'px';
            } else if (property === 'styleFloat') {
                style['float'] = currentStyle[property];
            } else {
                style[property] = currentStyle[property];
            }
        }

        setShortStyleProperty(style, 'margin');
        setShortStyleProperty(style, 'padding');
        setShortStyleProperty(style, 'border');

        style.fontSize = fontSize + 'px';

        return style;
    }

    CSSStyleDeclaration.prototype = {
        constructor: CSSStyleDeclaration,
        getPropertyPriority: function () {},
        getPropertyValue: function ( prop ) {
            return this[prop] || '';
        },
        item: function () {},
        removeProperty: function () {},
        setProperty: function () {},
        getPropertyCSSValue: function () {}
    };

    function getComputedStyle(element) {
        return new CSSStyleDeclaration(element);
    }

    return getComputedStyle;
})(this));

核心算法如下具体是什么我项目里看就是了

    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;
        }
    }

如何找到我们放置的style呢首先是不可以通过document.styleSheets[index]方式直接获取的
因为你无法知道她在页面中处于styleSheets哪个部分那么可以写innerHTML吗 ie8不支持head中style写innerHTML ie的CSSStyleSheet有一个owningElement属性其他可能有owningNode属性所以可以循环找拥有对应id的styleSheets了

    var sheet = false;

    for (var i = 0; i < document.styleSheets.length; i++) {
        if (document.styleSheets[i].owningElement.id == id) {
            sheet = document.styleSheets[i];
        }
    }

calc

calc 的实现方式其实和vw vh差不多就不多说了
不过值得注意的是 calc(100% - $unit)的实现不是那么完美 fallback要做好

这里说说应用

最常见的8格grid 自带
图片描述

要兼容到ie8

自适应宽度变化其实没啥必要但是咱们有vw这个单位用啊

首先说下原理

首先是代码因为要兼容必须多一层container

<div class="polyfill-grid-container">
    <div class="layout full-width ui-collection polyfill-grid">
        <div class="layout__item">1</div>
        <div class="layout__item">2</div>
        <div class="layout__item">3</div>
        <div class="layout__item">4</div>
        <div class="layout__item">5</div>
        <div class="layout__item">6</div>
    </div>
</div>

首先我们为每个layout__item加上margin-top margin-left
这时候我们要去除1 ~ 4上的margin-top

@for $i from 1 through ($numrow - 1) {
    $ret: "";
            $ret: $basesel + str-repeat(" + .layout__item", $i);
            #{$ret} {
                margin-top: 0;
            }
}
        $ret: str-repeat(" + .layout__item", $numrow);
        #{$ret} {
            @include polyfill-advance-set((
                margin-top: $gutter #vw
            ));
        }

这里我们说下 ie8 可以使用 :first-child + $class == nth-child(2)
+ $class 实际上就是 nth-child(n+2) 大家自己体会下
图片描述

现在我们只要用一个container盖住就可以了

angular

首先 avalon 是不错的可以兼容到ie8的方案不过无法和flexbox兼容方案并存这也挺遗憾的
不过这次带来的angular的版本是1.4 github地址

本文项目地址

这是一个可以使用的项目可以在ie8 ie9上运行
github地址

特色