Я пытаюсь показать некоторые изображения на странице, где они должны быть показаны вgrayscale, except on mouse hover when they smoothly transition into color, Я сделал так, чтобы он хорошо работал на IE, Chrome и Firefox, но этоdoesn't work on Safari 5.x, Проблема в Safari для Macand Safari для Windows. Вот код, который у меня есть:

filter: url('desaturate.svg#greyscale'); 
filter: gray;
-webkit-filter: grayscale(1);

Первая строка загружает внешний фильтр .svg (я не вставляю его вurl("data:... править, потому что я хочу избежатьошибка в старых версиях Firefox).

Вторая строка для IE и, кажется, работает так же хорошо, какfilter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);.

Последняя строка о webkit должна работать на Safari 6 и выше, а также на Chrome.

Существует ли какое-либо правило CSS для отображения изображений с оттенками серого наSafari 5.x? Или, если это невозможно, может кто-нибудь порекомендовать решение javascript, предпочтительно такое, которое будет обрабатывать анимацию в градациях серого и обратно?I would like to avoid a server-side hack с изображениями в градациях серого, потому что это испортит мой HTML, и тогда мне придется сделать некоторое неприятное обнаружение браузера, чтобы условно обслуживать HTML.

Спасибо

Edit:

As this has turned out to be a "notable question", please don't keep posting here more answers that only work on Safari 6 and above, or answers that include an .svg file in a data url. At the time when I wrote the OP, it was important for me to support some versions of Safari and Firefox that are today considered very dated, but nevertheless that was my original question.

I am well aware that for modern browsers grayscale filtering is easily accomplished with a few lines of CSS code, but the graphics designer was using Safari 5.x and the client was using Firefox 3.x at the time I did this project. The solution that worked for me was what Giona suggested, i.e. to use Modernizr to test for css-filtering, and if it's not supported to fall back to javascript.

If I was doing the same thing today, I'd be telling both to go update their browsers!