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

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)大家自己体会下