Я успешно создал макет CSS Grid. Однако теперь я хочу добавить поддержку или запасной вариант для не поддерживаемых или плохо поддерживаемых браузеров, в частности IE11.
Я добавил браузерные префиксы и прочитал миллион статей о добавлении чисел с плавающей запятой и т. Д. Я создал блок кода, который должен работать, но я не могу заставить его отображаться при тестировании в IE11 (у меня Mac ноутбук без доступа к ПК).
// 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?
EDIT:
Это пример того, как он выглядит во всех современных браузерах, и как я бы хотел, чтобы он выглядел после отката 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>