css - 如何修复我的 CSS 网格布局的跨浏览器兼容性？

Question

我已经成功地创建了一个 CSS 网格布局。但是，现在我想为不支持或支持不佳的浏览器添加支持或回退，特别是 IE11。

我已经添加了浏览器前缀并阅读了一百万篇关于添加 float 等的文章。我创建了一个应该可以工作的代码块，但我无法在 IE11 上测试时让它呈现(我有一台 Mac无法访问 PC 的笔记本电脑)。

// sass-lint:disable no-important no-vendor-prefixes no-duplicate-properties final-newline

// Grid Variables
$cols: 12 !default;
$gutter: 50px !default;

// Breakpoints
$lg: 1199.98px;
$md: 991.98px;
$sm: 767.98px;
$xs: 575.98px;

$breakpoints: (
  (l, $lg, 100%, 1),
  (m, $md, 100%, 2),
  (s, $sm, 100%, 2),
  (x, $xs, 100%, 3),
  (no, 0, 100%, 3)
) !default;

// Typography
$font-size: 20px;
$font-family: 'BrokenEn', serif;
$line-height: 1.4;

// Animations
$grid-animation: all .15s ease-in-out;
$grid-animation-slow: all .3s ease-in-out;

// Globals

*,
*::after,
*::before {
  backface-visibility: hidden;
}

html {
  box-sizing: border-box;
  margin: 0;
  overscroll-behavior: none;
  padding: 0;
}

body {
  background-color: #fff;
  border: 0;
  box-sizing: inherit;
  color: #000;
  font: normal 1rem $font-family;
  height: 100%;
  left: 0;
  line-height: 1;
  margin: 0;
  overflow-x: hidden;
  padding: 0;
  position: relative;
}

// Grid
header,
main,
footer {
  background-color: #f5f5dc;
  width: 100%;
}

.r {
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  background-color: #7fffd4;
  display: -ms-grid !important;
  display: grid !important;
  grid-gap: $gutter;
  grid-template-columns: repeat($cols, 1fr);
  position: relative;
  transition: $grid-animation;
}

[class*='c-'] {
  -ms-grid-column-span: $cols;
  background-color: #faebd7;
  grid-column: span $cols;
  position: relative;

  &.nest {
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    background-color: #7fffd4;
    display: -ms-grid !important;
    display: grid !important;
    grid-gap: $gutter;
    grid-template-columns: repeat($cols, 1fr);
    position: relative;
  }

  &.contain-auto {
    margin-left: $gutter;
    margin-right: $gutter;
  }

  &.contain-fixed {
    margin-left: auto;
    margin-right: auto;
    width: $lg;
  }
}

.col-wrap {
  display: inline-block;
  padding: 0 $gutter;
  width: 100%;
}

.no-c-gap {
  grid-column-gap: 0 !important;
}

@for $i from 1 through $cols {
  .c-#{$i} {
    -ms-grid-column-span: $i;
    grid-column: span $i;
  }
}

@each $name, $size, $container, $divide in $breakpoints {
  @media only screen and (max-width: $size) {
    .r {
      grid-gap: $gutter / $divide;
    }

    [class*='c-'] {
      &.nest {
        grid-gap: $gutter / $divide;
      }

      &.contain-auto {
        margin-left: $gutter / $divide;
        margin-right: $gutter / $divide;
      }
    }

    @for $i from 1 through $cols {
      .#{$name}#{$i} {
        -ms-grid-column-span: $i;
        grid-column: span $i;
      }
    }
  }
}

@supports not (display: grid) {
  .r {
    display: inline-block !important;
    width: 100% !important;

    ::after {
      content: ' ';
      display: block;
      width: 100%;
    }

    [class*='c-'] {
      display: block !important;
      float: left !important;
      margin: 0 $gutter $gutter 0;
    }
  }

  @for $i from 1 through $cols {
    .c-#{$i} {
      width: calc((100% / #{$cols} * #{$i}) - #{$gutter}) !important;
    }
  }

  @each $name, $size, $container, $divide in $breakpoints {
    @media only screen and (max-width: $size) {
      @for $i from 1 through $cols {
        .#{$name}#{$i} {
          width: calc((100% / #{$cols} * #{$i}) - #{$gutter}) !important;
        }
      }
    }
  }
}

// If @support not supported by browser.
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .r {
    display: inline-block !important;
    width: 100% !important;

    ::after {
      content: ' ';
      display: block;
      width: 100%;
    }

    [class*='c-'] {
      display: block !important;
      float: left !important;
      margin: 0 $gutter $gutter 0;
    }
  }

  @for $i from 1 through $cols {
    .c-#{$i} {
      width: calc((100% / #{$cols} * #{$i}) - #{$gutter}) !important;
    }
  }

  @each $name, $size, $container, $divide in $breakpoints {
    @media only screen and (max-width: $size) {
      @for $i from 1 through $cols {
        .#{$name}#{$i} {
          width: calc((100% / #{$cols} * #{$i}) - #{$gutter}) !important;
        }
      }
    }
  }
}

谁能帮我查看代码并告诉我如何 (1) 改进我的网格，(2) 让“@supports not (display: grid)”代码在 IE11 中工作？

编辑:

这将是一个示例，说明它在所有现代浏览器中的外观，以及我希望它如何处理 IE 后备启动。

<body>
    <header class="r">Header</header>
    <main class="r">
        <section class="c-12 nest ratio-4-3">
            <div class="c-6">
                <div class="wrap">Div Left</div>
            </div>
            <div class="c-6">
                <div class="wrap">Div Left</div>
            </div>
        </section>
        <section class="c-12 nest no-c-gap ratio-4-3">
            <div class="c-6">
                <div class="wrap">Div Left</div>
            </div>
            <div class="c-6">
                <div class="wrap">Div Left</div>
            </div>
        </section>
    </main>
    <footer class="r">Footer</footer>
</body>

Answer 1

1. @supports 不是 supported in IE因此，您必须为支持网格的浏览器放置代码。它应该覆盖您的非网格代码。 (去掉“不”)。

2. 网格只有partly supported在 IE 中，所以你最好使用 polyfill以支持浏览器中的部分选项。

3. 如果您需要进行大量的跨浏览器测试，请查看类似 BrowserStack 的工具.

---

编辑:建议行动方案。

我建议采用这种方法。

使用 CSS Grid 以外的布局技术重写所有内容。多年来，人们一直在制作跨浏览器、高性能、响应式的布局，而无需使用网格。这可能适用于您所有的目标浏览器。如果在这一点上，您通过使用 CSS Grid 获得了更好的效果，请将其用作渐进式增强。

原因，我建议这是一种不同的布局技术，可能需要额外的容器/包装器来强制更改标记。很难添加这些，只有“当网格不起作用时”。