CSS: отображение: сетка и/или -ms-сетка

Есть ли способ использовать оба или display: grid / -ms-grid в одну таблицу стилей, или мне нужно использовать HTML-хак или JavaScript, чтобы запросить, какой тип браузера просматривается страница с сеткой?

Пример:

Следующее моделирование не работает

.container {
  display: grid -ms-grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(150px, 50px);
  grid-gap: 1vw;
  -ms-grid-columns: repeat(4, 1fr);
  -ms-grid-rows: repeat(150px, 50px);
  -ms-grid-gap: 1vw;
}

Ответ 1

Преобразование нового синтаксиса макета CSS Grid в устаревший IE - действительно сложная задача. Это не просто вопрос добавления префиксов поставщиков.

IE имеет очень ограниченную поддержку того, что присутствует в новой версии CSS Grid Layout. IE не поддерживает

  • автоматическое размещение и выбор его потока (CSS-свойство grid-auto-flow);
  • повторяющиеся столбцы/строки (функция repeat и некоторые специальные значения, такие как auto-fill и auto-fit). В некоторых случаях это означает, что вам просто нужно заменить явными значениями, как в вашем случае, вы можете заменить grid-template-columns: repeat(4, 1fr) на -ms-grid-columns: 1fr 1fr 1fr 1fr, и это будет работать отлично. Но если у вас есть что-то вроде grid-template-columns: repeat(auto-fill, 1fr), это невозможно реализовать в IE;
  • пробелы в ячейках сетки (свойства CSS grid-row-gap, grid-column-gap, grid-gap). Пробелы можно подделать, используя дополнительные дорожки сетки;
  • автоматически генерируемые треки (свойства CSS grid-auto-columns, grid-auto-rows);
  • именованные области сетки (свойства grid-area, grid-template-areas CSS).

Вы просто должны забыть об этой возможности для IE.

Также некоторые значения поддерживаемых свойств IE не поддерживаются

Autoplacement

В реализации IE нет поведения автоматического размещения. Это означает, что вы должны располагать все, а не использовать возможность автоматического размещения сетки.

Если вы не разместите элементы, они будут складываться в первой ячейке сетки. Это означает, что вы должны явно установить позицию для каждого элемента сетки, или она будет находиться в первой ячейке. Если у вас есть такая разметка:

.wrapper {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 50px 50px;
  grid-template-columns: 50px 50px;
  -ms-grid-rows: 50px 50px;
  grid-template-rows: 50px 50px;
  background-color: #fff;
  color: #444;
}

.box {
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

Ответ 2

Ваше правило display должно быть правильно структурировано. То, что у вас есть, недействительно.

display: grid -ms-grid;

Кроме того, ваше правило grid-template-rows недопустимо. Предполагается, что первым аргументом будет целое число, которое определяет количество повторений.

grid-template-rows: repeat(150px, 50px);

Кроме того, я не верю, что нотация repeat() существовала в более старых спецификациях. Похоже, что это было введено в текущей спецификации, поэтому IE не будет поддерживать его.

-ms-grid-columns: repeat(4, 1fr);
-ms-grid-rows: repeat(150px, 50px);

Наконец, лучше всего ставить официальные (W3C) свойства после префиксных версий, чтобы они имели приоритет в каскаде (более подробно).

Попробуй это:

.container {
  display: -ms-grid; 
  display: grid;

  -ms-grid-columns: 1fr 1fr 1fr 1fr;           
  grid-template-columns: repeat(4, 1fr);

  -ms-grid-rows: 150px 50px;
  grid-template-rows: 150px 50px;

  -ms-grid-gap: 1vw;
  grid-gap: 1vw;
}

Ответ 3

Ответ Вадима в значительной степени то, что вы должны сделать. Но есть еще несколько хитростей CSS, которые вы можете использовать, чтобы облегчить вашу боль.

0 Обязательно прочитайте этот пост в блоге, чтобы решить, хотите ли вы использовать сетки для веб-сайтов, которые поддерживают IE: https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the -ie-реализация-оф-CSS-сетка-макет/

Если ваш ответ на предыдущий вопрос "Да", читайте дальше:

  1. Используйте авторефиксер. Он заменит некоторые свойства CSS-сетки на их эквивалент IE. Но учитывая, насколько сложными могут быть свойства сетки (повторы, минимальные значения, интервалы и т.д.), Авторефиксатор не может охватить все случаи.
  2. Очень надежный компаньон в тех случаях, когда вы хотите написать CSS, совместимый со спецификацией, но при этом поддерживать IE - это @supports() at-rule. Я использую его, чтобы использовать более продвинутые свойства сетки, такие как grid-gaps в grid-gaps и т.д.:

    .card-list {
      grid-row: 4;
      grid-column: 1 / 3;
      padding: 1.5vh 1vh;
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
    }
    .card {
      margin-bottom: 1vh;
    }
    .card:nth-of-type(odd) {  /* takes care of IE */
      margin-right: 1vh;
      grid-column: 1;
    }
    .card:nth-of-type(even) {
      grid-column: 2;
    }
    
    @supports(grid-gap: 1vh) { /* still using standard code! */
      .card-list {
        grid-gap: 1vh;
      }
      .card {
        margin-right: 0;
        margin-bottom: 0;
      }
    }