Add support for CSS3 property "filter" and "appearance"

[laukstein]

Add support for CSS3 property "filter" and "appearance"

Resources:

• property "filter", currently works on Chrome 19 canary
  https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
  https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
  demos http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/
• property "appearance"
  http://www.w3schools.com/cssref/css3_pr_appearance.asp
  https://developer.mozilla.org/en/CSS/-moz-appearance

W3C had dropped CSS3 "appearance" http://wiki.csswg.org/spec/css4-ui#dropped-css3-features, but Gecko and WebKit still supports this property. So for now - expected -prefix-free support for it.

[LeaVerou]

appearance should work, since -prefix-free doesn't use a predefined list for properties.

filter is almost impossible to add, since both prefixed and unprefixed versions are supported (the unprefixed one supports only SVG), so it's very hard to know which one you are trying to use without parsing the CSS to see its value.

[laukstein]

IE Filters is deprecated on IE9, http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx
Its value always begins with progid:DXImageTransform.Microsoft. so you are able to detect it and leave it untouched.

[LeaVerou]

Oh, I thought you were referring to the new CSS filters (CSS filter effects), not IE filters.
Why would you need this for IE Filters? They only have one prefix, and it's not even necessary.
Also, they're proprietary, which I try to avoid in -prefix-free. But that's the least important reason here.

[laukstein]

@LeaVerou I was referring to CSS Filter Effects. I did not notice SVG filter possible conflict. Just though how to pass filter support on IE when it might support filter W3C standard value and MS value progid:DXImageTransform.Microsoft.* at the same time.

[LeaVerou]

The problem is that I would have to change how -prefix-free works, just for this property. Currently, PF goes through the list of supported properties, and when it finds one that is ONLY supported with a prefix, it remembers to prefix it in the CSS.
In this case, any browser that supports CSS filters, also supports the filter property for SVG. So, that wouldn't work and I can't see any way around it except special casing (which I'd prefer to avoid unless really needed).