Alternative for -webkit-filter in Mozilla Firefox

Question

I was reading this page on stackoverflow: Change color of PNG image via CSS?. I was reading the reply by ravitadi, and he said you could change your pictures color with -webkit-filter.

My question is how could I use -webkit-filter in Mozilla Firefox. As you know -webkit-filter would not work there, so is there a alternative CSS property to use instead? I know this works in Chrome, but I need this to work in all browsers! :)

Check this: http://stackoverflow.com/questions/156116/whats-the-css-filter-alternative-for-firefox — G.L.P, Feb 17 '15 at 03:48
@Etash That question is asking about the now-obsolete non-standard `filter` property that was in IE. Same name, but no the same thing. — Alexander O'Mara, Feb 17 '15 at 03:59

score 4 · Accepted Answer · answered Feb 17 '15 at 03:48

4

Just use filter, without the -webkit- prefix. It will work in Firefox 35 and up. If you need support for older Firefox versions, look into SVG filters. MDN has an article entitled Applying SVG effects to HTML content on the issue.

answered Feb 17 '15 at 03:48

Alexander O'Mara

58,688
18
163
171

Thank You! :) I did not know there was Filter – michael jones Feb 17 '15 at 03:49
I forgot to ask, does this support Internet Explorer aswell? – michael jones Feb 17 '15 at 03:52
@michaeljones No, IE does not support the standard `filter` property. It used to support a non-standard and completely different property by the same name, but it was not the same and was removed. I don't believe it's possible to use SVG filters for DOM elements in IE either. – Alexander O'Mara Feb 17 '15 at 03:55
Hmm ok! :) Any idea on what to use for IE? – michael jones Feb 17 '15 at 03:59
@michaeljones Depends on what you are doing. If it's only being applied to images, canvas might be an option. You could also possibly wrap the image in an SVG with the filter. – Alexander O'Mara Feb 17 '15 at 04:01

Alternative for -webkit-filter in Mozilla Firefox

1 Answers1