Откат jQuery, если css не может обработать изображение

Question

В моем веб-приложении мне нужно обесцвечивать / отображать некоторые оттенки серого. Я использую следующий CSS для достижения этой цели:

.grayscale {
  filter: grayscale(100%); /* Current draft standard */
  -webkit-filter: grayscale(100%); /* New WebKit */
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  -webkit-filter: grayscale(1); /* Old WebKit */
}

Это охватывает широкий спектр браузеров. Проблема в том, что некоторые старые версии, такие как Safari 5, не подвержены этой уязвимости. Я знаю, что есть некоторые библиотеки jQuery, такие как Pixastic, которые поддерживают эти старые браузеры, но я бы хотел использовать как можно меньше jQuery, чтобы загружать мою страницу как можно быстрее. Поэтому мой вопрос таков: можно ли проверить, было ли изображение в градациях серого, а если нет, использовать для этого плагин jQuery, такой как Pixastic?

Answer 1

Вы можете использовать modernizr для обнаружения фильтров CSS: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/filters.js