How do I make css filters work in Firefox?
I am good with HTML5 and CSS, but have never used filters before. So I applied some tweaks using JQuery and they worked fine with Chrome, however nothing happened when I tried to apply them in firefox.
JQuery code
$('#grayscale').click(function() {
$('#uploadedPhoto').css('-webkit-filter', 'grayscale(100%)');
});
$('#sepia').click(function() {
$('#uploadedPhoto').css('-webkit-filter', 'sepia(100%)');
});
These are just two examples. I searched this and found that Firefox does not support simple syntax filter:
and there is another way with URL and SVG. Could you please provide an example or link to a library of specific filter urls. For this URL method, I need to link some library first, how with JQuery?
thank
source to share
Firefox doesn't support CSS filter (yet?).
Source: http://css-tricks.com/almanac/properties/f/filter/#browser-support
EDIT (to answer a new question): I found a stackoverflow post discussing alternatives for a css filter to support firefox: What is CSS Filter for Firefox? p>
source to share
Unfortunately, you cannot use filters in firefox yet.
A workaround would be to create a filename filters.svg
with the following content:
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
<filter id="sepia">
<feColorMatrix type="matrix" values="0.343 0.669 0.119 0 0 0.249 0.626 0.130 0 0 0.172 0.334 0.111 0 0 0 0 0 1 0 "/>
</filter>
</svg>
And then use the following styles (url for svg should be relative from css file to your newly created svg file):
.greyscale {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: grayscale(100%); /* IE6-9 */
-webkit-filter: grayscale(100%); /* Google Chrome, Safari 6+ & Opera 15+ */
}
.sepia{
filter: url(filters.svg#sepia); /* Firefox 3.5+ */
filter: sepia(100%);
-webkit-filter: sepia(100%); /* Google Chrome, Safari 6+ & Opera 15+ */
}
With the following js
$('#grayscale').click(function() {
$('#uploadedPhoto').addClass('greyscale');
});
$('#sepia').click(function() {
$('#uploadedPhoto').addClass('sepia');
});
Here is a good resource showing various filter effects using svg
This answer contains a good example on how to use svg
If you want to play with colors, you will need an understanding of this lesson with matrix multiplication
source to share
-webkit-filter
contains a prefix -webkit
that is only supported by webkit-based browsers such as Safari and Chrome. The prefix for Firefox is -moz
for Mozilla, but Firefox does not support this property.
More details here: http://css-tricks.com/almanac/properties/f/filter/
source to share