CSS @supports

Мне бы хотелось, чтобы новые 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%.
Не смотря на то, что @supports уже поддерживается большинством браузеров, я не могу его использовать, пока он не появится во всех браузерах хотя бы в текущих версиях. Если он работает только в некоторых браузерах, то это как изъян. Наверное, это мое открытое письмо, умоляющее браузеры поддержать @supports. В тот день, когда я увижу, что все текущие версии основных браузеров поддерживают его, я буду самой счастливой.