Переход в Internet Explorer 10 к веб-графике на основе стандартов

Пользователи ожидают, что при посещении любого сайта в Интернете с помощью любого браузера им будет обеспечиваться практически одинаковое качество работы. Сначала, в записи блога от 16 марта 2010 г., в которой говорилось о выпуске первой версии IE9 Platform Preview, мы обсудили стремление достичь в Internet Explorer цели получения согласованных результатов при использовании разных браузеров: «одинаковая разметка — одинаковые результаты». В браузере Internet Explorer 9 мы сделали большой шаг по направлению к этой цели, а благодаря реализации стандартного режима и режима совместимости на основе HTML5 в Internet Explorer 10 эта работа уже близка к завершению. В статье, посвященной синтаксическому разбору HTML5 в Internet Explorer 10, перечислены некоторые устаревшие функции, удаленные из стандартного режима и режима совместимости на основе HTML5 в Internet Explorer 10.

В этой записи блога список удаленных устаревших функциональных возможностей расширен и теперь включает два новых элемента: это язык VML и функция фильтров и переходов на основе DirectX. Обе эти функциональные возможности отмечены как нерекомендованные к использованию в документации MSDN о браузере Internet Explorer 9 (например, в первом предложении статьи о фильтрах и переходах говорится: «This topic documents a feature of Visual Filters and Transitions, which is deprecated as of Windows Internet Explorer 9» (В этом разделе описывается функциональная возможность визуальных фильтров и переходов, использовать которую в Windows Internet Explorer 9 не рекомендуется)) и теперь удалены из стандартного режима и режима совместимости в Internet Explorer 10.

Теперь в Internet Explorer 10 и современных версиях других браузеров реализованы основанные на стандартах альтернативы языку VML и фильтрам DX. Эти устаревшие функции Internet Explorer остаются доступными в Internet Explorer 10 в режимах документов 5, 7, 8 и 9, однако их возможности уступают стандартизованным функциям с аппаратным ускорением, которые пришли им на замену. Мы рекомендуем веб-разработчикам перевести свои сайты на стандартизованные технологии, а не полагаться на использование устаревших режимов документов.

Использование SVG вместо VML

Язык VML (Vector Markup Language) был предложен консорциуму W3C корпорацией Майкрософт и другими компаниями в 1998 году. Он был впервые реализован в Internet Explorer 5. Консорциум W3C осуществил слияние VML с конкурирующим предложением, в результате чего и был получен язык SVG (краткий рассказ об этом см. в статье, посвященной языку VML).

Язык SVG, реализованный в IE9, предоставляет функциональные возможности, необходимые для замены языка VML на веб-сайтах и в приложениях, где он используется. В руководстве по миграции с VML на SVG, опубликованном в центре загрузки Майкрософт, предлагаются инструкции по переходу от VML к SVG.

Raphaël JavaScript Library — это упрощенный и удобный в использовании графический программный интерфейс, использующий язык SVG, если он доступен, и язык VML, если язык SVG недоступен. Raphaël является эффективным средством создания решений с векторными рисунками, работающих в IE8 и более новых браузерах.

Использование CSS3 вместо фильтров DX

В Internet Explorer 4 был представлен набор визуальных фильтров и переходов, позволяющий веб-разработчикам применять мультимедийные эффекты на своих веб-страницах. Название «фильтры DX» произошло от способа их реализации, DirectX, и полного синтаксиса, например «filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)». Фильтры DX — не то же самое, что эффекты фильтров SVG, хотя в обоих случаях используется имя CSS-свойства filter.

Самые популярные из этих эффектов стали рабочими проектами или рекомендованными кандидатами CSS3, к ним относятся эффект непрозрачности, градиенты и тени. Поскольку в IE10 реализована поддержка этих спецификаций CSS3, устаревшие особые фильтры IE больше не нужны. Один дополнительный фильтр, AlphaImageLoader, когда-то был популярен для обхода ошибок в IE6, связанных с прозрачностью рисунков в формате PNG, но эти ошибки были исправлены в IE7.

В следующей таблице перечислены наиболее популярные фильтры DX и альтернативы на основе стандартов.

Фильтр DX	Альтернатива на основе стандартов
Alpha	opacity
AlphaImageLoader	<img> или background-image и связанные свойства
Gradient	background-image: linear-gradient()
DropShadow	text-shadow или box-shadow
Matrix	transform, transform-origin

Эффекты фильтров SVG в IE10 могут использоваться для имитации некоторых редко используемых, более сложных фильтров в контексте SVG.

Примечание. Поскольку в режиме документов IE9 предоставляется поддержка как фильтров DX, так и некоторых альтернатив на основе стандартов, рекомендуется избегать задания обоих свойств для одного и того же элемента. Такие библиотеки, как Modernizr, упрощают использование обнаружения функции с помощью CSS и позволяют избежать повторных объявлений.

Переход к одинаковой разметке

Изменения, описанные выше, вступают в силу с выходом IE10 Platform Preview 4 для Windows Developer Preview.

IE10 в большей степени, чем любая предыдущая версия IE, поддерживает принцип одинаковой разметки и кода, как другие популярные браузеры (после добавления «-ms-» в CSS-префиксы производителя). Другими словами, исключение этих двух устаревших функций означает, что контент, разработанный для IE10, должен также работать и в других браузерах.

Пользователям удобно, когда все браузеры могут работать с одним и тем же стандартизованным контентом.

— Тед Джонсон (Ted Johnson), ведущий руководитель программы, графика в Internet Explorer