it-swarm.com.ru

CSS: display: grid и/или -ms-grid

Есть ли способ использовать оба или 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;
}
10
Mr. Bean

Преобразование нового синтаксиса макета CSS Grid в устаревшие IE/Edge действительно является проблемой. Дело не только в добавлении префиксов некоторых поставщиков.

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

  • автоматическое размещение и выбор его потока (свойство grid-auto-flow CSS);
  • повторяющиеся столбцы/строки (функция 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/Edge;
  • пробелы в ячейках сетки (свойства grid-row-gap, grid-column-gap, grid-gap CSS). Пробелы можно подделать, используя дополнительные дорожки сетки;
  • автоматически генерируемые треки (свойства grid-auto-columns, grid-auto-rows CSS);
  • именованные области сетки (свойства grid-area, grid-template-areas CSS).

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

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

Autoplacement

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

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

.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>

Вы увидите что-то подобное в IE/Edge

 IE grid demo


Таким образом, в основном у вас есть два варианта (методологии) при разработке CSS Grid для IE/Edge (если вы знаете, что макет в вашем случае может быть преобразован):

  • Создайте разную разметку для браузера IE/Edge и других браузеров. В этом случае вас не волнует сходство разметки (кстати, ваше значение grid-template-rows: repeat(150px, 50px) недопустимо, поэтому я предполагаю, что вы хотели grid-template-rows: 150px 50px). Демо для вашего случая

    .container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 150px 50px;
      grid-gap: 1vw;
      
      display: -ms-grid;
      /* also faking 1vw grid-gap */
      -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
      /* also faking 1vw grid-gap */
      -ms-grid-rows: 150px 1vw 50px;
    }
    
    .grid-item {
      /* style just for demo */
      background-color: yellow;
    }
    
    /* Explicit placement for IE/Edge */
    /* Omitting default value of -ms-grid-column: 1 and -ms-grid-row: 1 where possible */
    .grid-item:nth-child(2) {
      -ms-grid-column: 3;
    }
    
    .grid-item:nth-child(3) {
      -ms-grid-column: 5;
    }
    
    .grid-item:nth-child(4) {
      -ms-grid-column: 7;
    }
    
    .grid-item:nth-child(5) {
      -ms-grid-row: 3;
    }
    
    .grid-item:nth-child(6) {
      -ms-grid-row: 3;
      -ms-grid-column: 3;
    }
    
    .grid-item:nth-child(7) {
      -ms-grid-row: 3;
      -ms-grid-column: 5;
    }
    
    .grid-item:nth-child(8) {
      -ms-grid-row: 3;
      -ms-grid-column: 7;
    }
    <div class="container">
      <div class="grid-item">1,1</div>
      <div class="grid-item">1,2</div>
      <div class="grid-item">1,3</div>
      <div class="grid-item">1,4</div>
      <div class="grid-item">2,1</div>
      <div class="grid-item">2,2</div>
      <div class="grid-item">2,3</div>
      <div class="grid-item">2,4</div>
    </div>

  • Создайте очень похожую разметку для браузеров IE/Edge. В этом случае разметка для всех браузеров будет выглядеть очень похоже. Это может быть более приемлемым, потому что вы не должны заботиться о различных подходах. Демо для вашего случая:

    .container {
      display: -ms-grid;
      display: grid;
      /* also faking 1vw grid-gap */
      -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
      grid-template-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
      /* also faking 1vw grid-gap */
      -ms-grid-rows: 150px 1vw 50px;
      grid-template-rows: 150px 1vw 50px;
    }
    
    .grid-item {
      /* style just for demo */
      background-color: yellow;
    }
    
    .grid-item:nth-child(2) {
      -ms-grid-column: 3;
      grid-column: 3;
    }
    
    .grid-item:nth-child(3) {
      -ms-grid-column: 5;
      grid-column: 5;
    }
    
    .grid-item:nth-child(4) {
      -ms-grid-column: 7;
      grid-column: 7;
    }
    
    .grid-item:nth-child(5) {
      -ms-grid-row: 3;
      grid-row: 3;
    }
    
    .grid-item:nth-child(6) {
      -ms-grid-row: 3;
      grid-row: 3;
      -ms-grid-column: 3;
      grid-column: 3;
    }
    
    .grid-item:nth-child(7) {
      -ms-grid-row: 3;
      grid-row: 3;
      -ms-grid-column: 5;
      grid-column: 5;
    }
    
    .grid-item:nth-child(8) {
      -ms-grid-row: 3;
      grid-row: 3;
      -ms-grid-column: 7;
      grid-column: 7;
    }
    <div class="container">
      <div class="grid-item">1,1</div>
      <div class="grid-item">1,2</div>
      <div class="grid-item">1,3</div>
      <div class="grid-item">1,4</div>
      <div class="grid-item">2,1</div>
      <div class="grid-item">2,2</div>
      <div class="grid-item">2,3</div>
      <div class="grid-item">2,4</div>
    </div>

19
Vadim Ovchinnikov

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

display: grid -ms-grid;

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

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

Кроме того, я не верю, что нотация repeat() существовала в более старых спецификациях . Похоже, что он был введен в current spec , поэтому 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;
}
6
Michael_B

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

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

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

  1. Используйте авторефиксер. Он заменит некоторые свойства CSS-сетки на их IE эквивалент. Но учитывая, насколько сложными могут быть свойства сетки (повторы, минимальные значения, интервалы и т.д.), Авторефиксатор не может охватить все случаи.
  2. Очень надежным компаньоном в тех случаях, когда вы хотите написать CSS, совместимый со спецификацией, но при этом поддерживать IE, это правило @supports(). Я использую его для использования более сложных свойств сетки, таких как 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;
      }
    }
    
0
kumar_harsh