Как я могу определить фильтры CSS?

Ответ 1

Так называется ОБНОВЛЕНО ответ:

Поскольку OP упомянул хорошую точку, я обновляю ответ, но это не имеет ничего связанного или противоречащего моему предыдущему ответу, это просто обнаружение браузера.

Алан Х. упомянул об этом IE до 10-го. версии, поддерживает filter свойство css, но не так, как мы все знаем об этом (CSS3 filter Я имел в виду).

Итак, если мы хотим использовать только обнаружение CSS3 filter, мы должны пойти дальше и использовать небольшое обнаружение браузера. Как я упоминал в моих комментариях.

Используя свойство documentMode и объединяя его с нашим простым обнаружением функции, мы можем исключить так называемые ложные срабатывания в IE.

function css3FilterFeatureDetect(enableWebkit) {
    //As I mentioned in my comments, the only render engine which truly supports
    //CSS3 filter is webkit. so here we fill webkit detection arg with its default
    if(enableWebkit === undefined) {
        enableWebkit = false;
    }
    //creating an element dynamically
    el = document.createElement('div');
    //adding filter-blur property to it
    el.style.cssText = (enableWebkit?'-webkit-':'') + 'filter: blur(2px)';
    //checking whether the style is computed or ignored
    //And this is not because I don't understand the !! operator
    //This is because !! is so obscure for learning purposes! :D
    test1 = (el.style.length != 0);
    //checking for false positives of IE
    //I prefer Modernizr smart method of browser detection
    test2 = (
        document.documentMode === undefined //non-IE browsers, including ancient IEs
        || document.documentMode > 9 //IE compatibility moe
    );
    //combining test results
    return test1 && test2;
}

Оригинальный источник Modernizr

if(document.body.style.webkitFilter !== undefined)

или

if(document.body.style.filter !== undefined)

Дополнительная информация:

Для простого определения функции используйте мои коды выше. Список поддерживаемых функций см. Здесь:

• Filter Effects 1.0
• Функции фильтра эффектов 1.0

Для живой демонстрации filter в Chrome, посмотрите здесь:

• Эффекты фильтра CSS

И еще 2 ресурса для вас:

• Эффекты фильтра CSS-фильтра Посадка в WebKit
• Когда я могу использовать эффекты фильтра CSS?

Когда я пишу этот ответ, вы должны использовать префикс поставщика webkit, чтобы он работал.

Ответ 2

Чтобы построить ответ @Sepehr, но немного его модернизировать и убрать лишние строки:

var supportsFilters = (function() {
  var filterEl = document.createElement('div');
  filterEl.style.cssText = 'filter:blur(2px)';
  return filterEl.style.length != 0 && (document.documentMode === undefined || document.documentMode > 9);
})();

Ответ 3

Теперь вы можете использовать встроенную в @support для условного применения стилей. Обратите внимание, что поддержка @support в браузере хороша, но не идеальна. Это хорошая статья, объясняющая, как это работает, на нескольких примерах: https://iamsteve.me/blog/entry/feature-detection-with-css

Например, вы можете сделать что-то вроде этого (посмотреть вживую):

@supports (filter: grayscale(1)) or (-webkit-filter: grayscale(1)) {
  h3 {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
  }
}

@supports not (filter: grayscale(1)) and not not (-webkit-filter: grayscale(1)) {
  h3 {
    color: #808080;
  }
}