Смешивание @supports с запросом @media в CSS - PullRequest
Новая
       42

Смешивание @supports с запросом @media в CSS

0 голосов
/ 25 мая 2018

Я впервые создаю сайт с помощью CSS-сетки.Поскольку не все браузеры поддерживают это, я создал набор резервных стилей и условно применяю их с @supports not (display:grid).Но я также хочу использовать это как мобильную таблицу стилей и использовать сетки CSS только на больших экранах - это может быть достигнуто простым медиа-запросом @media screen and (max-width:700px).Теперь проблема в том, что если что-то из этого верно, то есть, если браузер не поддерживает сетку CSS или , окно браузера не шире 700 пикселей, я хочу использовать мою резервную таблицу стилей.

Итак, мой вопрос - как я могу одновременно запросить у браузера @supports или @media?Вложение их не сработает, поскольку, по сути, требуется, чтобы они оба были истинными, и кажется неправильным просто скопировать всю таблицу стилей со @supports в @media.

По сути,Я хочу что-то вроде этого: 

(@supports not (display:grid)) or (@media screen and (max-width:700px)){
    /*my stylesheet*/
}

Ответы [ 3 ]

0 голосов
/ 25 мая 2018

Нет способа объединить два разных условных at-правила в одно с логикой ИЛИ (логика AND, как вы сказали, может быть сделана путем вложения, даже если строго говоря, они по-прежнему являются двумя отдельными правилами),Если у вас нет сантехники, которая может автоматически дублировать ваш CSS между двумя отдельными условными правилами, вам придется делать это вручную.

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

@supports (display: grid) {
    /* Or screen and (min-width: 701px),
       or not screen and (max-width: 700px),
       depending on your needs and preferences */
    @media screen and (min-width: 700px) {
        /* Grid styles */
    }
}

Если вы не являетесь поклонником дополнительного отступа, вы можете уменьшить его до или просто не сделать отступ вообще;)

0 голосов
/ 23 апреля 2019

Это хороший пример использования препроцессора CSS.Вы можете определить миксин, содержащий ваши мобильные / сеточные стили, а затем использовать этот миксин внутри блока @supports и @media.Таким образом, вам не нужно дублировать стили в исходном коде.

Например, в SCSS вы можете написать: 

@mixin no-grid-css {
  /* Placeholder for mobile/no-grid styles */
  .foo {
    color: #baa;
  }
  .baz::after {
    content: "qux";
  }
}

@supports not (display:grid) {
  @include no-grid-css;  
}

@media screen and (max-width:700px) {
  @include no-grid-css;
}

Когда вы компилируете это с sass styles.scss, выВы получите: 

@supports not (display: grid) {
  /* Placeholder for mobile/no-grid styles */
  .foo {
    color: #baa;
  }

  .baz::after {
    content: "qux";
  }
}
@media screen and (max-width: 700px) {
  /* Placeholder for mobile/no-grid styles */
  .foo {
    color: #baa;
  }

  .baz::after {
    content: "qux";
  }
}

Недостатком этого подхода является то, что стили все равно будут дублироваться в CSS, который отправляется в браузер пользователя.(Не ожидайте, что gzipping вашего веб-сервера также спасет вас - он не сделает много, чтобы уменьшить размер штрафа за дублирование огромного блока кода.) Так что, хотя он избавляет вас от головной боли при обслуживании дублирования кода, онне спасает вас от потери производительности.

0 голосов
/ 25 мая 2018

Существует пример вложенных условных правил at, точно так же, как вы описываете в документации Mozilla для @media правил: 

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}
...