jQuery fallback if css fails to process image

Question

In my web app, I need to desaturate/grayscale some pictures. I am using the following CSS to achieve that:

.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 */
}

This covers a wide array of browser. The problem is that some older ones like Safari 5 are not affected by it. I know there are some jQuery libraries like Pixastic that do support those older browsers but I would like to use as less jQuery as possible to make my page load as fast as possible. Therefore, my question is: it possible to check if the image was grayscaled and if not, use a jQuery plugin like Pixastic to do so?

possible duplicate of modernizr check for grayscale filters IE 10 -- different question, but the same solution. — Brigand
– Brigand, Commented Aug 5, 2013 at 1:09

Matej Chrenko · Accepted Answer · 2013-08-05 03:00:10Z

2

you can use modernizr to detect css filters: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/filters.js

answered Aug 5, 2013 at 3:00

Matej Chrenko

18811 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

amb110395 Over a year ago

Thank you. The few tests I made show that Modernizr is working

Collectives™ on Stack Overflow

jQuery fallback if css fails to process image

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related