@supports

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Директива @supports позволяет проверить, поддерживает ли браузер свойство, правило, селектор CSS. Если условие срабатывает, то будет выполнен CSS-код, написанный внутри фигурных скобок.

Пример

Секция статьи "Пример"

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

        
          
          @supports (transform: perspective(150px)) {  div {    transform: perspective(150px);  }}
          @supports (transform: perspective(150px)) {
  div {
    transform: perspective(150px);
  }
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Проверка правила

Секция статьи "Проверка правила"

В круглых скобках после @supports пишется свойство и его значение, которые нужно проверить:

        
          
          @supports (--foo: bar) {  .block {    color: var(--color);  }}
          @supports (--foo: bar) {
  .block {
    color: var(--color);
  }
}

        
        
          
        
      

Проверка селектора

Секция статьи "Проверка селектора"

Если нужно проверить селектор, используется функция selector():

        
          
          :is(ul, ol) > li {  color: red;}@supports not selector(:is(a, b)) {  ul > li,  ol > li {    color: red;  }}
          :is(ul, ol) > li {
  color: red;
}

@supports not selector(:is(a, b)) {
  ul > li,
  ol > li {
    color: red;
  }
}

        
        
          
        
      

Оператор not

Секция статьи "Оператор not"

После директивы пишется ключевое слово not и в скобках условие проверки. Код внутри фигурных скобок будет выполнен, если указанное в скобках условие не поддерживается браузером:

        
          
          @supports not (transform: perspective(150px)) {  div {    color: red;  }}
          @supports not (transform: perspective(150px)) {
  div {
    color: red;
  }
}

        
        
          
        
      

Оператор and

Секция статьи "Оператор and"

Ключевое слово and позволяет проверить несколько условий друг за другом. Код внутри фигурных скобок будет выполнен, если все условия верны:

        
          
          @supports (transform: perspective(150px)) and (display: grid) {  div {    display: grid;    transform: perspective(150px);  }}
          @supports (transform: perspective(150px)) and (display: grid) {
  div {
    display: grid;
    transform: perspective(150px);
  }
}

        
        
          
        
      

Оператор or

Секция статьи "Оператор or"

Ключевое слово or позволяет проверить несколько условий друг за другом. Код внутри фигурных скобок будет выполнен, если хотя бы одно из условий верно:

        
          
          @supports (transform: perspective(150px)) or (display: grid) {  div {    color: #00DD00;  }}
          @supports (transform: perspective(150px)) or (display: grid) {
  div {
    color: #00DD00;
  }
}