CSS.supports в Edge некорректно возвращает элементы, которые поддерживаются

Question

CSS.supports () в Edge некорректно возвращает свойства, которые явно поддерживаются.

console.log(CSS.supports("( filter: blur(20px) )"));
console.log(CSS.supports("filter", "blur(20px)"));
console.log(CSS.supports("( backdrop-filter: blur(20px) )"));
console.log(CSS.supports("backdrop-filter", "blur(20px)"));

Журналы:

true
true
false
false

Последние два неверны, так как backdrop-filter действительно работает в Edge.

Однако это работает, как и ожидалось:

@supports (backdrop-filter: blur(20px)) {
    body { border: 20px solid red; }
}

Я что-то упустил или CSS.supports не работает вКрай?И как я могу обнаружить поддержку backdrop-filter?

Answer 1

Microsoft Edge не поддерживает свойство без префикса backdrop-filter;он поддерживает только -webkit-backdrop-filter.

. Если ваш CSS работает, то во время выполнения он либо префиксируется скриптом, например -prefix-free (хотя сам по себе -prefix-free не поддерживает backdrop-filter), либопостобработан чем-то вроде Autoprefixer, тихо добавив префикс -webkit- для вас.

Answer 2

Согласно приведенной ниже документации, в настоящее время CSS-фоновый фильтр поддерживается только с префиксом -webkit- (не -ms-) в браузере MS Edge.

CSS-фоновый фильтр

По этой причине возвращается false.