Filters are not cross-browser

[Hypher]

Eg:

.grayscale(@amount) {
    -webkit-filter: grayscale(@arguments);
    -moz-filter: grayscale(@arguments);
    -ms-filter: grayscale(@arguments);
    filter: grayscale(@arguments);
}

There is no -moz- or -ms- prefix. But should use inline svg for Firefox and others that does not support the -webkit- bare one.

Could be filter: gray on IE9- (does not support @amount), and for IE10+... it seems like https://github.com/kununu/gray does a fucking hack. I didn't dug further, but this project exposes the following CSS:

.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<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></svg>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /*
  Chrome 19+,
  Safari 6+,
  Safari 6+ iOS,
  Opera 15+
  */
  -webkit-filter: grayscale(100%);
}