CSS: метод supports()

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с января 2020 года.

Статический метод CSS.supports() возвращает логическое значение, указывающее, поддерживает ли браузер заданный CSS-функционал или нет.

Синтаксис

CSS.supports(propertyName, value)
CSS.supports(supportCondition)

Параметры

Существует два различных набора параметров. Первый позволяет проверить поддержку пары свойство-значение:

propertyName: Строка, содержащая имя проверяемого CSS-свойства.
value: Строка, содержащая значение проверяемого CSS-свойства.

Второй синтаксис принимает один параметр, соответствующий условию @supports:

supportCondition: Строка, содержащая условие для проверки.

Возвращаемое значение

true если браузер поддерживает правило, в противном случае false.

Примеры

В следующих примерах result — это логическое значение, указывающее, поддерживает ли браузер заданный CSS-функционал.

result = CSS.supports("text-decoration-style", "blink");
result = CSS.supports("display: flex");
result = CSS.supports("(--foo: red)");
result = CSS.supports("selector(:has(a))");
result = CSS.supports(
  "(transform-style: preserve) or (-moz-transform-style: preserve) or (-webkit-transform-style: preserve)",
);

Для получения дополнительных примеров и функций синтаксиса см. @supports правило.

Спецификации

Спецификация
CSS Conditional Rules Module Level 3 # ref-for-dom-css-supports

Совместимость с браузерами

	Рабочий стол					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`supports_static`	28	12	22	15	9	28	22	15	9	1.5	4.4
`optional_parens`	61	79	55	48	11	61	55	45	11	8.0	61

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports_static