Обнаружение функций в CSS с помощью supports

15 июля, 2022 11:12 дп 3 views | Комментариев нет

| | Комментировать запись

В CSS есть очень удобное правило @supports, которое позволяет легко выяснить, доступна ли определенная функция CSS в браузере посетителя. Таким образом, вы можете использовать функции только для тех браузеров, которые их поддерживают, а также задавать определенные правила для браузеров, которые их не поддерживают (другие браузеры будут их игнорировать). Правило @supports — это простой способ заменить инструмент Modernizr чистым CSS. @supports позволяет тестировать как поддержку функции, так и ее отсутствие:

@supports (column-count: 3) {
  div { column-count: 3; }
}

Отсутствие поддержки

Протестировать функцию и применить определенные правила, если она не поддерживается, можно так:

@supports not (display: flex) {
  .sidebar { float: left; }
}

Цепочки функций

Операторы and и or позволяют соединять функции CSS в цепочки:

@supports (display: flex)
or (display: -webkit-box)
or (display: -webkit-flex)
or (display: -ms-flexbox) {
 .menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
 }
}

Предупреждение

Важный и серьезный недостаток правила @supports заключается в том, что оно само по себе не поддерживается всеми браузерами. К примеру, оно вообще не поддерживается в Internet Explorer, даже в версии 11. Оно надежно поддерживается только в Safari для iOS, начиная с версии 9.2. Дополнительную информацию о поддержке вы найдете здесь.

Учитывая все вышесказанное, возможно, более практичным решением будет продолжать использовать инструмент Modernizr в течение некоторого времени, пока большинство пользователей IE не перейдут на Edge.

@supports также предлагает удобный JavaScript API, который можно использовать для обнаружения функций в JS.

Читайте также: Грид-разметка CSS: модуль CSS Grid Layout

Tags:

Добавить комментарий