CSS @supports

Автор: Ire Aderinokun Источник: bitsofco.de

01.02.2017

604

Мне бы хотелось, чтобы новые CSS свойства поддерживались лучше.

Переменные
Flexbox
Transforms
Animations

Список можно продолжать. Однако среди них есть одно свойство, для которого я уже не могу дождаться поддержки во всех или хотя бы в текущих версиях основных браузеров. Это @supports.

Магия @supports

@supports - это условная группа правил, как media queries, но для проверки, поддерживает ли браузер определенные CSS свойства. Так же как и в media queries, если утверждение получает значение true, то правила внутри группы применяются.

@supports предлагает 4 варианта проверки:

1. Проверка одной пары

Самый простой способ использования – это проверка одной пары «свойство-значение». Например, если мы хотим проверить, поддерживается ли новый синтаксис flexbox, мы можем написать:

@supports ( display: flex ) {
  .foo { display: flex; }
}

Для таких браузеров как Internet Explorer 9 все, что внутри блока, будет проигнорировано.

2. Проверка нескольких пар

Иногда нужно использовать комбинацию свойств. С помощью правила «and», можно проверить на поддержку сразу несколько пар «свойство-значение».

@supports ( ( font-kerning: normal ) and
            ( font-feature-settings: "kern" 1 ) ) {
  .foo { 
    font-kerning: normal;
    font-feature-settings: "kern" 1;
  }
}

3. Проверка одной из нескольких пар

Так же мы можем узнать, поддерживается ли хоть одна пара из списка. Это может быть полезно, если нужно определить, какая версия свойства, с префиксом или без, поддерживается браузером.

@supports ( ( tranform: translate(-50%, -50%) ) or
            ( -webkit-tranform: translate(-50%, -50%) ) ) {
  .foo {
    -webkit-tranform: translate(-50%, -50%);
    tranform: translate(-50%, -50%);
  }
}

4. Не поддерживается

Знать, поддерживается ли свойство – очень полезно, но иногда знать, что оно не поддерживается – еще полезнее. Для этого можно использовать правило «not»:

@supports not ( display: flex ) {
  .foo { display: table; }
}

Мы даже можем определить, что одно свойство поддерживается, а другое – нет. Пример для браузеров, поддерживающих только старый синтаксис flexbox:

@supports ( display: flexbox ) 
          and 
          ( not ( display: flex ) ) {
  .foo { display: flexbox; }
}

Почему @supports?

Причина, по которой я хочу это свойство больше, чем все остальные прикольные\безумные\крутые CSS свойства в том, что на данный момент я не могу использовать все эти прикольные\безумные\крутые свойства.

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

@supports позволит мне получить и то и другое – я смогу использовать крутые, новые штуки в браузерах, которые их поддерживают, и в то же время писать старый, проверенный код для всех остальных браузеров.

Поддержка @supports

На данный момент @supports поддерживается на 80%.

Can I Use css-featurequeries? Data on support for the css-featurequeries feature across the major browsers from caniuse.com.

Не смотря на то, что @supports уже поддерживается большинством браузеров, я не могу его использовать, пока он не появится во всех браузерах хотя бы в текущих версиях. Если он работает только в некоторых браузерах, то это как изъян. Наверное, это мое открытое письмо, умоляющее браузеры поддержать @supports. В тот день, когда я увижу, что все текущие версии основных браузеров поддерживают его, я буду самой счастливой.