时间戳

首页 > 解决方案 > 是否有用于将 css flex 简写转换为简写以支持 IE11 的 polyfill？

css - 是否有用于将 css flex 简写转换为简写以支持 IE11 的 polyfill？

问题描述

是否有用于将 Flexbox flex:速记属性转换为可比较的速记属性以支持 IE11 的 polyfill？

在做了一些研究之后，我发现了一些 flexbox polyfill，但它们都不支持 flex: 速记属性。

如果没有支持 flex 速记的 polyfill，我将不得不手动将它们全部替换为速记版本。

任何意见是极大的赞赏！

目前我创建了这个 mixin 来提供一个后备：

/*

 Mixin for IE11 fallback for shorthand flex property.

 EXAMPLE USAGE:

    .grid {
       flex: 1 0 100%; // todo: replace this with below
    }

    .grid {
      @include flexIEFallback(1 0 100%);
    }

    OUTPUT:

    .grid {
       flex-grow: 1;
       flex-shrink: 0;
       flex-basis: 100%;
    }

*/
@mixin flexIEFallback($flex-list) {
  // this is the shorthand
  //  flex: $flex-list;

  // IE11 fallback for shorthand prop flex
  @if length($flex-list) == 1 {
    @if $flex-list == (auto) {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto;
    }
    @if $flex-list == (initial) {
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: auto;
    }
    @if $flex-list == (none) {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: auto;
    }
    @if $flex-list == (unset) {
      flex-grow: unset;
      flex-shrink: unset;
      flex-basis: unset;
    }
    @if $flex-list == (inherit) {
      flex-grow: inherit;
      flex-shrink: inherit;
      flex-basis: inherit;
    } @else {
      flex-grow: $flex-list;
    }
  }

  @if length($flex-list) > 1 {
    @for $item from 1 through length($flex-list) {
      $index: index($flex-list, $item);

      @if $index == 1 {
        flex-grow: $item;
      }

      @if $index == 2 {
        flex-shrink: $item;
      }

      @if $index == 3 {
        flex-basis: $item;
      }
    }
  }
}

标签： cssflexboxcross-browserinternet-explorer-11polyfills

解决方案

看看这个 ponyfill 而不是走 polyfill 路线。

https://github.com/jhildenbiddle/css-vars-ponyfill

自添加示例以来，它可能不符合您的确切需求，但我之前已将其用于类似情况，以允许为 css 类定义速记属性并保持与不支持 css 速记语法的旧浏览器的兼容性。

推荐阅读