Кроссбраузерный GrayScale с поддержкой Internet Explorer 10/11
8 ноября 2015 в 12:00 в категории Вёрстка 0 комментариевОдной из основных задач при создании сайта является проверка корректного отображения страниц сайта во всех браузерах — проверка кроссбраузерности сайта. Еще совсем недавно почти каждый браузер имел свою платформу и в связи с этим необходимо было очень тщательно проверять каждую страницу сайта, т.к. каждая платформа имела свои особенности.
Но в последние годы, все основные браузеры мигрировали на платформу WebKit, что упростило разработку кроссбраузерных сайтов, однако компания Microsoft старается выделиться и выпускает Internet Explorer на платформе Trident вплоть до последней, 11-ой версии всеми горячо любимого браузера. Но на этом MS решили не останавливаться, и сделать жизнь разработчиков еще разнообразнее и насыщенней, путем удаления фильтров из IE 10 и 11 версий, что повлекло сложности, в том числе и с обесцвечиванием картинок с помощью CSS, методом наложения Grayscale фильтра.
И поскольку, как уже было написано выше, в Internet Explorer начиная с версии 10 были отключены DX Filters, то необходимо искать другое альтернативное решение. Одним из таких решений является наложение SVG слоя (jsFiddle):
img.grayscale:hover { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); } svg { background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg); }
Но данное решение предполагает добавление дополнительных элементов в HTML и в рамках работы над проектом это было не самым хорошим решением, т.к. элементами для обесцвечивания были блок-ссылки с фоном, поэтому я прибег к старому доброму трюку с двумя изображениями:
- оригинальное изображение;
- предварительно обесцвеченное изображение;
Таким образом достигается эффект 100% работоспособности в браузерах Internet Explorer без громоздкого кода и костылей. Обращаю внимание на то, что данный метод используется только в случае если пользователь использует IE, а для остальных браузеров будет применено просто CSS правило:
.directions .direction a.open-modal{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: grayscale(1); /* Firefox 4+ */ filter: gray; /* IE 6-9 */ }
Принцип работы скрипта достаточно прост и элегантен (требует подключенную библиотеку jQuery):
- размещаем несколько блок-ссылок с фоном;
- загружаем оригиналы и обесцвеченные копии изображений в одну директорию, где у обесцвеченных копий имя файла формируется по принципу «название»-grey, например: original-name-grey.jpg;
- прописываем соответствующий CSS-код для позиционирования изображения (а также его размеров).
Теперь, если вы откроете страницу с помощью Internet Explorer 10-11, то вы увидите, что добавляется элемент IMG в блок-ссылку, который перекрывает фон родительского элемента, и исчезает (fadeOut) при наведении на блок.
Посмотреть в живую | Скачать демо
Подводя итог хочется сказать что остается загадкой для чего Microsoft отключила по-умолчанию фильтры в своем браузере, когда IE только их начал поддерживать, но видимо на это были свои причины. Надеюсь данная статья вам помогла и вы уже поставили лайк и подписались на паблики. Желаю вам поменьше Клиентов-пользователей IE.