Виявляємо підтримку CSS за допомогою CSS та JavaScript

За допомогою CSS3

CSS3 має @supports для перевірки підтримки CSS властивостей. Розглянемо декілька прикладів використання:

See the Pen pxhAv by Codeguida (@codeguida) on CodePen.

За допомогою JavaScript

Існує два способи виявлення підтримки властивостей CSS за допомогою JavaScript.

Класичний метод:

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

See the Pen xEkFn by Codeguida (@codeguida) on CodePen.

CSS.supports

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

See the Pen GvBeq by Codeguida (@codeguida) on CodePen.

Офіційна документація правила @support.

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

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

if(CSS.supports)
{
    console.log("Supported");
}