CSS3 filter grayscale

Als ich am Wochenende gelesen hatte, dass die Filter Effects 1.0 jetzt den Status Editor’s Draft haben und am 26.03.2013 aktualisiert wurden, dachte ich mir, es sei jetzt bestimmt eine gute Zeit, einen alten Gedanken aufzugreifen, und die „CSS-Eigenschaft“ „filter: grayscale()“ nocheinmal auszuprobieren. Die allgemeine Unterstützung sollte heute doch besser sein?

Eine ganze Zeit lang hatte ich (meist auf Startseiten, Single-Site-Domains) ein kleines Set an schwarz-weiss-images auf einer Seite. Bei „mouseover“ wurde dann das betroffene Fotos geswitched zur Farbvariante. Sah ganz schick aus, fand ich, war aber sehr aufwendig, weil ich a) jeweils 2 Varianten des Fotos erstellen musste, und b) (meist) die Farbversion dann noch mit vorausladen musste …

Hier eine Grafik, damit man sich vorstellen kann, wie das ausgesehen hat:

startpages
(Mit Klick auf die Grafik könnt Ihr es auch noch! live sehen.(02.04.2013))

Lange Rede, kurzer Sinn: da war doch was mit „filter:grayscale()„? Hier schon mal das „Endprodukt“ mit filter: grayscale() (Farbvariante auf :hover, :active), allerdings nicht ganz ohne Probleme umgesetzt.

michaelmichaelmichaelmichaelmichael

Ich hatte es mir mit meinem Pad gemütlich gemacht und war den Anweisungen gefolgt:

{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

Alles war gut, es funktionierte wie beabsichtigt auf dem Pad mit Safari und Chrome. Heute abend dann auf meinem Notebook die Erkenntnis, mein Firefox will das nicht! Mit IE hatte ich ja gerechnet … Für den Firefox habe ich dann aber doch recht schnell eine Lösung bei karlhorky.com gefunden, für den IE <10 leider nicht! Hier die Styleangaben:

Hat schon jemand eine Lösung? Es ist sicher nur eine Frage der Zeit, bis das jeder (moderne) Browser kann, oder man ihm zumindest "helfen" kann. Anwendungsmöglichkeiten wüsste ich schon einige ... P.S.: kann mann eigentlich von einer CSS3-Eigenschaft sprechen? Filter Effects 1.0 stehen ja für sich, aber ich verwende filter als Eigenschaft in der CSS, dann muss das doch …