Share via

Развитие стабильного Интернета в Internet Explorer 10 Release Preview

  • Article

При планировании версии Windows 8 Release Preview мы изучили все находящиеся на стадии разработки стандарты W3C, поддерживаемые Internet Explorer 10. В частности, мы искали спецификации со следующими характеристиками:

  • стабильные, т. е. без недавно внесенных дополнений или изменений и без ожидающихся переименований или важных изменений;
  • поддерживаются по крайней мере двумя браузерами помимо Internet Explorer 10;
  • обеспечивают взаимодействие с другими браузерами в плане основных функций;
  • уже используются в Интернете, в том числе в форме без префиксов;
  • получили статус кандидата к рекомендации (Candidate Recommendation) после выхода Windows 8 Consumer Preview или ожидающие его получения в 2012 г.

Следующие компоненты стандартов W3C на стадии разработки соответствуют этим критериям, и Internet Explorer 10 теперь поддерживает их в форме без префиксов:

Для обеспечения совместимости с сайтами и приложениями, разработанными с использованием Windows 8 Consumer Preview, Internet Explorer 10 также поддерживает эти стандарты в форме с префиксом поставщика с использованием префиксов поставщиков Microsoft (‑ms‑/ms).

Internet Explorer 10 также поддерживает следующие стандарты W3C на стадии разработки в форме с префиксом поставщика. Мы считаем, что эти стандарты еще не соответствуют указанным выше критериям:

От экспериментов к стабильности

Когда браузеры реализуют новые стандарты, они отмечают новые возможности собственным префиксом поставщика: свойство стиля с префиксом ‑moz‑ обозначает экспериментальный компонент CSS в Mozilla Firefox, ‑ms‑ означает то же самое для Microsoft Internet Explorer, ‑o‑ — для Opera и ‑webkit‑ — для браузеров на основе WebKit, в том числе Google Chrome и Apple Safari. Эквиваленты объектной модели этого компонента содержат аналогичные префиксы.

Новые API платформы, такие как window.requestAnimationFrame(), вызываются как window.mozRequestAnimationFrame(), window.webkitRequestAnimationFrame() или window.msRequestAnimationFrame().

Поставщики браузеров, как правило, снимают свои префиксы после получения соответствующей спецификацией статуса кандидата к рекомендации (Candidate Recommendation). Это соглашение об именовании преследует ряд целей, в том числе следующие.

  • Позволить спецификации развиваться: веб-контент без префиксов, написанный для более ранних реализаций, может ограничивать редактирование или затруднять и даже запрещать дополнения или изменения.
  • Разделять экспериментальные реализации: ошибки или выбор версии стандарта на стадии разработки определенного браузера не влияют на другие браузеры.
  • Документация по таблицам стилей: зависимости от таблиц стилей определенных поставщиков явно задокументированы.

Другие стандарты могут совсем не использовать префиксы поставщиков. Например, поставщики браузеров никогда не добавляли префиксы в новые HTML-элементы, введенные в спецификации HTML5, такие как <canvas> и <video>.

Рекомендации интернет-сообщества

На практике приходит время, когда несколько браузеров поддерживают одну разрабатываемую возможность схожим образом. В результате веб-разработчики пишут следующие декларации:

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

Скопировав и вставив этот шаблон несколько раз, многие разработчики предполагают, что новый стандарт W3C будет обладать обратной совместимостью с современными веб-стандартами. Они продолжают добавлять на страницы беспрефиксную версию свойства "на будущее".

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

transform: rotate(30deg);

С точки зрения веб-разработчика указанный выше набор деклараций будущих версий браузеров с поддержкой беспрефиксных преобразований CSS готов уже сейчас.

К слову, возможности предыдущих стандартов проверяли это предположение. Когда в Internet Explorer 9 была добавлена поддержка свойства border-radius без префикса в первом выпуске Platform Preview, наша группа разработчиков увидела, как эта возможность была использована на многих сайтах благодаря уже развернутым таблицам стилей, подготовленным для будущих функций.

Ряд возможностей проходит такую же эволюцию в данный момент. Не только многие демонстрационные страницы переходов CSS подготовлены для новых возможностей (см. эффект параллакса Пола Хейеса (Paul Hayes) или анимированную галерею Леа Вероу (Lea Verou)), но в проекты с открытым исходным кодом, такие как html5slides компании Google, домашние страницы дизайнеров, эмблемы сайтов и учебники, постоянно включаются декларации transition без префиксов.

Многие эффекты переходов используют преобразования CSS, в учебниках, для которых часто используются свойства transform без префиксов.

Завершение спецификаций

Даже несмотря на то, что веб-разработчики пытаются предвидеть взаимодействие браузеров в новой разметке, процесс стандартизации намного более консервативен. Хотя свойство border-radius работало нормально для тысяч веб-сайтов, члены рабочей группы CSS пытались определить отрисовку более сложных ситуаций, таких как закругленный угол между двумя смежными границами переменной ширины и меняющимися цветами. Аналогично, редакторы переходов, анимаций и преобразований CSS работают над определением ошибочных условий, устранением ошибок и описанием менее распространенных сценариев.

Хотя эти проблемы необходимо устранить для обеспечения высокого уровня взаимодействия и получения статуса рекомендации, лишь немногие из них влияют на текущий и будущий контент. После того, как спецификация становится стабильной и поддерживается во многих браузерах, развитие Интернета не должно сдерживаться устаревшими возможностями. Это не было обязательным для новых HTML5-элементов или завершения спецификации CSS2.1, для которых не требуются префиксы.

Хотя надежные спецификации, поддерживаемые полными наборами общедоступных тестов, очень важны, требование для веб-разработчиков несколько раз повторять одни и те же декларации до получения статуса кандидата к рекомендации (Candidate Recommendation) делает полноту стандартов более важной, чем стабильность контента.

Завершение спецификации требует много времени. Рассмотрим один пример: градиенты CSS появились в 2008 г., первый рабочий черновик, определяющий возможности для взаимодействия — в 2009 г., а стандарт со статусом Candidate Recommendation был опубликован в апреле 2012 г.. В то же время стандартизированный синтаксис стал несовместим с использующим префиксы синтаксисом, развернутым на многих веб-сайтах. Internet Explorer 10 Release Preview — это первая реализация новейших спецификаций без префиксов. (Internet Explorer 10 также поддерживает более совместимую версию с префиксом поставщика ‑ms‑.)

Что это означает для вашего кода

Градиенты CSS

Хотя синтаксис градиента с префиксом, поддерживаемый всеми современными браузерами, широко используется, он отражает теперь уже устаревшую версию спецификации. Эта более ранняя версия синтаксиса несовместима с текущим стандартом, имеющим статус Candidate Recommendation. Например, если вы объявили следующий градиент:

background: -ms-linear-gradient(left, yellow, red);

Тогда для создания эквивалента без префикса просто удалить префикс ‑ms‑ будет недостаточно. Так как линейная функция градиента Internet Explorer 10 без префиксов соответствует последней версии стандарта, она должна выглядеть следующим образом:

background: linear-gradient(to right, yellow, red);

В будущей записи блога мы обсудим поддержку градиентов CSS в Internet Explorer 10 более подробно.

Каскадирование и объектная модель CSS

Каскад будет разрешать свойства CSS с префиксами, как и ожидается; с учетом следующего правила (обратите внимание на больший угол поворота в декларации без префикса):

-ms-transform: rotate(30deg);

transform: rotate(60deg);

Ваш элемент повернется на 60 градусов: два свойства обрабатываются как псевдонимы друг друга, и предпочтение отдается последней декларации. Соответствующие свойства CSSOM также являются псевдонимами: если вы запрашиваете вычисленное значение свойств стилей transform и msTransform, они оба будут отражать предпочтительное преобразование (60 градусов).

Аналогично, при установке element.style.transform устанавливается и element.style.msTransform (и наоборот).

Сериализация имен свойств

Такие свойства, как transition-property , принимают список имен свойств CSS. Например, чтобы реализовать переход свойства transform в течение 2 секунд в Internet Explorer 10 Consumer Preview, необходимо написать:

-ms-transition-property: -ms-transform;

-ms-transition-duration: 2s;

Internet Explorer 10 Release Preview сериализирует значение style.msTransitionProperty и style.transitionProperty как "transform". Учтите, что исходный префикс не сохраняется.

Это также справедливо для свойства propertyName событий переходов.

Имена событий анимации и переходов

Internet Explorer 10 Release Preview позволяет регистрировать прослушиватели событий анимации и переходов, используя имена с префиксом и без префиксов, т. е. следующие фрагменты являются эквивалентами:

element.addEventListener("MSTransitionEnd", myHandler, false);

element.addEventListener("transitionend", myHandler, false);

Но Internet Explorer 10 Release Preview всегда будет возвращать в свойстве type объекта события имя без префикса.

Что дальше

Мы будем отправлять новые тестовые случаи в W3C для всех компонентов, которые теперь поддерживаются в Internet Explorer 10 без префикса. Как участники и соавторы рабочей группы CSS, мы будем сотрудничать с коллегами, развивая эти спецификации для получения статуса Candidate Recommendation.

Мы ждем ваших отзывов о реализованной нами поддержке этих возможностей и их совместимости с различными браузерами.

— Сильвен Галино (Sylvain Galineau), руководитель программы, Internet Explorer