Визначення підтримки властивості CSS за допомогою CSS і JavaScript

1

Від автора: У цій статті я покажу вам різні методи визначення підтримки браузером властивостей CSS за допомогою CSS і JavaScript’а.

Визначення за допомогою CSS3

У CSS3 для перевірки підтримки якого-небудь властивості CSS передбачено умовне правило @supports. Давайте розглянемо приклад його використання

Визначення за допомогою JavaScript’а

З допомогою JavaScript’а підтримка властивості CSS визначається двома методами. Класичним:

При якому розробник користується оператором in для визначення того, підтримується дана властивість CSS чи ні.

І CSS.supports.

CSS.supports – це функція, підпорядкована специфікації правила CSS3 @support. Будь-браузер, що підтримує правило @support, буде підтримувати цю функцію.

Крім того, для функції CSS.supports існує полифил. Офіційна документація правила CSS3 @support.

Визначення підтримки правила @supports з допомогою JavaScript’а

Раніше вже згадувалося, що будь-який браузер, що підтримує CSS @supports, також підтримує функцію CSS.supports. Отже, просто перевірте, підтримується CSS.supports чи ні.

Якщо ви переписали функцію з допомогою вищезгаданого полифила, то потім можна перевірити, чи містить функція вихідний код. Якщо містить, то підтримується, або навпаки. Прочитайте цю статтю і дізнаєтесь, як виявити, чи має функція вихідний код.