Блог

Работает ли установка более современного CSS после резервного кода без каких-либо других дополнений?

Например:

     display: flex;
    flex-flow: row wrap;
    display: grid;
    grid-template-columns: repeat(3, 33rem);
    justify-content: space-between;
    justify-content: space-evenly;
  

Будет ли использоваться grid, если поддерживается, и flex, если нет, с элементами, расположенными равномерно с пробелом между ними, в качестве запасного варианта? Я просто хочу убедиться, что повторяющиеся атрибуты игнорируются, а не полностью аннулируются.

Извините, если это кажется простым, но я не смог найти очевидный способ проверить это самостоятельно в браузере!

Спасибо

Как правило, эти способы обеспечивают поддержку, когда дело доходит до CSS.

Способ 1: напишите резервный код. Перезаписать резервный код.

 .selector {
  property: fallback-value;
  property: actual-value;
}
  

Способ 2: напишите резервный код. Перезаписать резервный код в запросах функций CSS (@supports) . Сбросьте свойства внутри @supports , если вам нужно.

 .selector {
  property: fallback-value;
}

@supports (display: grid) {
  property: actual-value;
}
  

Это означает, что запись всего в @supports является самой простой из трех.

Пример:

SCSS :

 .grid-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  @supports (display: grid) {
    display: grid;  
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  }
}