Skip to main content

Руководство для разработчиков по Internet Explorer 9

14 марта 2011 года

В руководстве для разработчиков по Internet Explorer 9 представлен обзор возможностей и улучшений, представленных в Internet Explorer 9. С помощью этого руководства веб-разработчики и веб-дизайнеры могут использовать преимущества, обеспечиваемые этими улучшениями. Разработчики также могут опробовать платформу в действии, воспользовавшись тестовым выпуском Internet Explorer.

Содержание

Введение

Общая производительность работы браузера

Поддержка веб-стандартов для одной и той же разметки

Новые возможности графики, использующие в полной мере ресурсы ПК под управлением Windows

Список новых возможностей

Улучшенные возможности для взаимодействия, реализованные на основе поддержки стандартов

Каскадные таблицы стилей третьего уровня (CSS3)

Двумерные преобразования CSS3

Модуль фонов и границ CSS3

Модуль цвета CSS3

Модуль шрифтов CSS3

Модуль запроса носителей CSS3

Модуль пространств имен CSS3

Модуль значений и единиц измерения CSS3

Селекторы CSS3

Дополнительные возможности CSS

Модуль представления CSSOM

URI-коды данных

Улучшения модели DOM

Общие сведения о расширенной модели DOM

Анализ и сериализация XML на входе и выходе модели DOM

Модель DOM (Document Object Model) второго и третьего уровней

Ядро DOM (L2 и L3) и представления (L2)

Обход элементов модели DOM

События модели DOM L2 и L3

Поддержка HTML в модели DOM L2

Стиль в модели DOM L2

Обход и диапазон в модели DOM L2

Обработка пробелов в модели DOM

Поддержка ECMAScript 5

HTML5

HTML5 - географическое расположение

Элементы video и audio HTML5

Элемент canvas спецификации HTML5

Улучшения анализа HTML

API выбора HTML5

Семантические элементы HTML5

Цветовые профили ICC

API селекторов второго уровня

Формат SVG

Основные фигуры

Вырезка, применение маски и композиция

Системы координат, преобразования и единицы измерения

Структура документа

Градиенты и узоры

Интерактивность

Ссылки и представления

Закраска и цвет

Контуры

Текст

Новые средства для веб-разработчиков

Закрепленные сайты

Управление версиями платформы

Новый режим документов

Строка агента пользователя

Средства разработчика

Вкладка "Консоль"

Вкладка "Сеть"

Средство переключения агента пользователя

Определение реальной производительности

Журнал изменений

Введение

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

В этом документе для разработчиков, клиенты которых используют Internet Explorer, показано, как эти новые улучшения могут применяться для создания веб-сайтов и приложений. Посетите вспомогательный сайт тестового выпуска, чтобы просмотреть демонстрацию новых возможностей на практике. Чтобы представить свои отзывы и предложения, а также получить дополнительные сведения о новых возможностях Internet Explorer 9, см. Заметки о выпуске, а также раздел Новые возможности Internet Explorer 9 на сайте MSDN. Последние новости об Internet Explorer 9 см. в блоге группы разработчиков Internet Explorer. И, как всегда, самые актуальные сведения для разработчиков об Internet Explorer представлены на сайте MSDN центра разработки Internet Explorer.

Браузер Internet Explorer 9 предназначается для того, помочь разработчикам лучше понять, степень прогресса, достигнутую при создании Internet Explorer 9, по следующим измерениям данной платформы:

  • Общая производительность работы браузера
  • Поддержка веб-стандартов, благодаря которой одна и та же разметка работает одинаково в различных браузерах
  • Новые возможности графики, в полной мере использующие ресурсы ПК под управлением Windows

Общая производительность работы браузера

Понятие производительности работы браузера распространяется и на множество его различных подсистем. Различные сайты, как и различные виды действий в рамках одного и того же сайта, создают различные нагрузки и предъявляют различные требования к браузеру. Например, такие веб-приложения как Почта Windows Live или веб-приложения Microsoft Office используют подсистемы браузера совершенно по-другому, нежели такие сайты, занимающиеся сбором новостей, как Bing News или Digg.

Общие сведения об обработчике "Chakra" JavaScript

Производительность обработчика скриптов — это только одна часть общей картины производительности браузера. Производительность скриптов в Internet Explorer 8 по сравнению с Internet Explorer 7 возросла экспоненциально, и новый обработчик "Chakra" JavaScript в Internet Explorer 9 продолжает повышать их производительность в такой же степени. Обработчик Chakra интерпретирует, компилирует и выполняет код в параллельном режиме и использует преимущества многоядерных ЦП, когда это возможно. Для получения дополнительных сведений см. запись " Новый разработчик JavaScript в Internet Explorer 9" в блоге группы разработчиков Internet Explorer.

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

Поддержка веб-стандартов для одной и той же разметки

Internet Explorer предоставляет веб-разработчикам разнообразные функции, позволяющие взаимодействовать с другими приложениями. Группа разработчиков Internet Explorer уверена, что вам бы не хотелось снова и снова переписывать и заново тестировать свои веб-сайты; принятие стандартов разработчиками браузеров является хорошим способом для достижения этой цели.

В Internet Explorer 8 группа разработчиков Internet Explorer представила реализацию спецификации CSS 2.1, обеспечивающую высокую степень взаимодействия, а также комплексное тестирование. Одновременно она внесла свой вклад в разработку набора тестов консорциума W3C, включающего более 7200 тестов. Это очень важно. Без таких проверочных тестов последовательная и согласованная реализация стандартов серьезно усложняется, затрудняя их использование разработчиками сайтов.

Internet Explorer 9 — это значительный вклад в поддержку стандартов и возможностей взаимодействия. Например, поддержка нового стандарта HTML5, улучшенная поддержка ряда компонентов CSS3 и (впервые в Internet Explorer) встроенная поддержка формата SVG — все это части Internet Explorer 9.

Новые возможности графики, в полной мере использующие ресурсы ПК под управлением Windows

Экосистема Windows предусматривает использование впечатляющих аппаратных новшеств. В Internet Explorer 9 веб-разработчики могут воспользоваться преимуществами этих новшеств, используя аппаратное управление отображением графики и текста.

В Internet Explorer 9 используется семейство DirectX интерфейсов Windows API, что позволяет веб-разработчикам применять некоторые дополнительные улучшения. Вся нагрузка по отображению графики и текста была перенесена с ЦП на графическую плату с помощью технологий Direct2D и DirectWrite. Аппаратное ускорение графики означает, что многофункциональные, насыщенные графикой сайты, могут отображаться в Windows быстрее, используя меньшие мощности ЦП. Кроме того, преимуществами этих изменений можно воспользоваться автоматически, создавая сайты с такими же стандартами, что и раньше.

Список новых возможностей

Для вашего удобства в этот список включены все новые функциональные возможности для разработчика, имеющиеся в Internet Explorer 9. Для получения сведений об изменениях по сравнению с предварительными версиями Internet Explorer 9 см. раздел Журнал изменений.

  • Улучшенная поддержка CSS3
    • Скругление углов с помощью свойства border-radius
    • Компоненты фона и границы CSS3
    • Свойство opacity
    • Цветовые модели RGBA, HSL и HSLA
    • Свойства шрифтов и новые форматы веб-шрифтов CSS3
    • Запросы носителей CSS3
    • Пространства имен CSS3
    • Значения и единицы измерения CSS3
    • Селекторы CSS3
  • Улучшенная поддержка URI-кодов данных
  • Улучшения модели DOM
    • Расширенные возможности модели DOM
    • Анализ и сериализация XML на входе и выходе модели DOM
    • Поддержка DOM второго уровня (L2) и третьего уровня (L3), а также обновленные варианты поведения
      • Ядро модели DOM (L2 и L3) и представления (L2)
      • Обход элементов модели DOM
      • События модели DOM (L2, L3)
      • Поддержка HTML в модели DOM L2
      • Стиль в модели DOM L2
      • Обход и диапазон в модели DOM L2
    • Новое поведение при обработке пробелов
  • Улучшения компонента ECMAScript
  • Добавлена поддержка спецификации HTML5
    • Географическое расположение
    • Элементы video и audio
    • Элемент canvas
    • Интерфейс Selection
    • Улучшенный анализ элементов HTML
    • API выбора текста
  • Поддержка цветовых профилей ICC версий 2 и 4 для изображений
  • Поддержка новых API селекторов второго уровня для метода msMatchesSelector
  • Компоненты формата SVG
    • Основные фигуры: прямоугольники, круги, эллипсы, прямые линии, ломаные линии и многоугольники
    • Вырезка, применение маски и композиция
    • Системы координат, преобразования и единицы измерения
    • Структура документа, метаданные и функциональность расширяемости
    • Градиенты и узоры
    • Интерактивность
    • Ссылки и представления
    • Закраска и цвет
    • Контуры, включая все возможности элемента path и атрибута d
    • Текст
  • Дополнительные возможности управления версиями платформы
    • Закрепленные сайты
    • Новый режим документов
    • Новая строка агента пользователя
  • Дополнительные средства разработчика
    • Улучшения производительности
    • Вкладка Консоль
    • Вкладка Сеть
    • Средство переключения агента пользователя
    • Измерение реальной производительности

Улучшенные возможности для взаимодействия, реализованные на основе поддержки стандартов

Внимание! Для поддержки новых стандартов в Internet Explorer 9 требуется, чтобы браузер находился в стандартном режиме Internet Explorer 9 ("режим IE9"). Лучше всего это можно сделать с помощью стандартной директивы !DOCTYPE и тега meta, несовместимого с X-UA, или заголовка HTTP. Директива !DOCTYPE для вызова режима IE9 выглядит так:

<!DOCTYPE html>

Конечно, можно воспользоваться директивой !DOCTYPE и тегом meta, совместимым с X-UA, или заголовком HTTP, чтобы изменить значение по умолчанию при наличии соответствия.

Чтобы определить текущий режим документа, нажмите клавишу F12, чтобы открыть средства разработчика Internet Explorer, и посмотрите на правую часть строки меню. Чтобы переопределить режим документа, в меню Режим документов выберите Стандарты Internet Explorer 9.

Обновленные сведения о поведении программы в режиме документов Internet Explorer 9 см. в разделе Управление версиями платформы этого руководства.

Каскадные таблицы стилей третьего уровня (CSS3)

Браузер Internet Explorer 9 поддерживает каскадные таблицы стилей (CSS) в большей степени, чем все более ранние версии браузеров, разработанных корпорацией Майкрософт. Продолжая работу, начатую в Internet Explorer 8, когда Internet Explorer стал полностью совместимым со спецификацией CSS2.1, в браузер Internet Explorer 9 добавлена поддержка многих компонентов CSS3.

Примечание. Важно помнить, что многие модули CSS3 пока находятся на стадии рабочего проекта или внесения последних изменений. До достижения стадии рекомендации к выпуску "версия-кандидат" они могут существенно измениться. Дополнительные сведения см. в статье, посвященной последним проектируемым модулям CSS3.

Двумерные преобразования CSS3

В Internet Explorer 9 добавлена поддержка двумерных преобразований CSS3. Двумерные преобразования CSS позволяют преобразовывать элементы, обрабатываемые на основе стандарта CSS, в двумерном пространстве.

Браузер Internet Explorer 9 поддерживает следующие свойства двумерных преобразований.

  • Свойство -ms-transform — применяет функцию одного или нескольких двумерных преобразований к элементу.
  • Свойство -ms-transform-origin — устанавливает начало координат преобразования для элемента. Это свойство является полезным, когда требуется изменить начало координат по умолчанию (центр).

Примечание.    Поскольку модуль двумерных преобразований CSS еще не получил статус "версия-кандидат" от консорциума W3C, и свойство transform, и свойство transform-origin должны использоваться с префиксом -ms- чтобы они могли распознаваться Internet Explorer 9. Для получения дополнительных сведений о префиксах, соответствующих конкретным поставщикам, см. запись " IE9, префиксы поставщиков и разработчики" в блоге группы разработчиков Internet Explorer.

Браузер Internet Explorer 9 поддерживает следующие функции преобразования для использования со свойством -ms-transform.

  • Функция matrix(a,b,c,d,e,f) — задает двумерное преобразование в виде матрицы преобразования, состоящей из шести значений (от a до f). 
  • Функция translate(tx,ty) — задает двумерное преобразование с помощью вектора [tx,ty], где tx представляет собой первый параметр значения преобразования, а ty — необязательный второй параметр значения преобразования. Если параметр ty не указывается, его значение ровняется нулю. (Параметры значения преобразования могут задаваться как в процентах, так и в показателях длины.)
  • Функция translateX(tx) — определяет преобразование на данное величину по направлению x.
  • Функция translateY(ty) — определяет преобразование на данное величину по направлению y.
  • Функция scale(sx,sy) — задает операцию двумерного масштабирования с помощью вектора масштабирования [sx,sy], который описывается соответствующими двумя параметрами. Если второй параметр не указывается, его значение приравнивается значению первого параметра.
  • Функция scaleX(sx) — задает операцию масштабирования с помощью вектора масштабирования [sx,1], где sx указывается как параметр.
  • Функция scaleY(sy) — задает операцию масштабирования с помощью вектора масштабирования [sy1], где sy указывается как параметр.
  • Функция rotate(angle) — задает поворот в двумерной плоскости на угол, указываемый в параметре относительно начала координат элемента в соответствии со свойством transform-origin.
  • Функция skewX(ax) — задает преобразование наклона вдоль оси x на данный угол.
  • Функция skewY(ay) — задает преобразование наклона вдоль оси y на данный угол.
  • Функция skew(ax,ay) задает преобразование наклона вдоль осей x и y. Первый параметр определяет наклон по оси x. Второй параметр определяет наклон по оси y. Если второй параметр отсутствует, для угла y используется нулевое значение (это означает, что наклон по оси y отсутствует).

Свойство -ms-transform-origin принимает одно или два значения. Каждое из этих значений может являться ключевым словом, показателем длины или процентом. Если свойство -ms-transform-origin не задается, преобразование начинается в центральной точке (что эквивалентно использованию значений -ms-transform-origin 50 % 50 %).

  • Первое значение задает положение по горизонтали (положение вдоль оси x) и может быть отрицательным. Это значение может быть значением длины (в любых поддерживаемых единицах длины), процентом (от длины по соответствующей прямоугольной координате) или одним из следующих ключевых слов: left (равняется 0 % или нулевой длине), center (равняется 50 % или половине длины по соответствующей прямоугольной координате) или right (равняется 100 % или полной длине по соответствующей прямоугольной координате).
  • Первое значение задает положение по вертикали (положение вдоль оси y) и может быть отрицательным. Это значение может быть значением длины (в любых поддерживаемых единицах длины), процентом (от высоты по соответствующей прямоугольной координате) или одним из следующих ключевых слов: left (равняется 0 % или нулевой длине), center (равняется 50 % или половине высоты по соответствующей прямоугольной координате) или bottom (равняется 100 % или полной высоте по соответствующей прямоугольной координате).

Если задается только одно значение, предполагается, что вторым значением является center.

Рассмотрим следующую разметку.

div {
-ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
-ms-transform-origin: 60% 100%;
}

В браузере Internet Explorer 9 задание для свойства -ms-transform-origin значений 60 % 100 % приводит к размещению начала координат преобразования в точке, определяемой значениями, равными 60 % от длины и 100 % от высоты преобразуемого элемента. Свойство -ms-transform сначала сдвигает элемент на 200 пикселей в направлении по оси x и на 100 пикселей в направлении по оси y. Затем выполняется масштабирование элемента на 75 %. Наконец, осуществляется поворот элемента на 40 градусов по часовой стрелке вокруг точки начала координат, задаваемой свойством -ms-transform-origin.

Дополнительные сведения о двумерных преобразованиях CSS3 см. на сайте MSDN.

Модуль фонов и границ CSS3

В браузер Internet Explorer 9 добавлена поддержка некоторых возможностей модуля фонов и границ CSS3. Наиболее примечательная новая возможность, свойства border-radius, также является наиболее востребованной возможностью границ CSS. В Internet Explorer 9 также появилась поддержка следующих новых свойств CSS3:

В браузер Internet Explorer 9 также добавлены функциональные возможности для следующих уже существующих свойств фона и границы CSS:

Свойства border-radius

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

Например, посмотрим на следующую разметку:

border-radius: 100px 66.66px 200px 50px;
border:
10px blue double;
padding: 24px;
width: 400px;height: 125px;

При применении к текстовому блоку эта разметка создаст следующее изображение.

Модуль цвета CSS3

В браузер Internet Explorer 9 добавлена поддержка модуля цвета CSS3. Этот модуль содержит поддержку цветовых моделей RGBA, HSL и HSLA, свойство opacity и ключевое слово currentColor . В браузере Internet Explorer 9 также расширена поддержка ключевого слова transparent .

Цветовая модель RGBA

Цветовая модель RGB была расширена и теперь содержит альфа-канал, или прозрачность. Формат значения RGBA таков: rgba(красный,зеленый,синий,альфа).Компоненты красный, зеленый и синий идентичны соответствующим компонентам цветовой модели RGB и выражаются целыми числами или в процентах. Компонент альфа выражается значением от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный).

Например, чтобы задать красный цвет фона с прозрачностью 50 %, можно включить в таблицу стилей одно из следующих объявлений CSS:

background-color: rgba(255,0,0,0.5);
background-color: rgba(100%,0%,0%,0.5);

Учтите, что хотя значения RGB поддерживают шестнадцатеричное представление, значения RGBA его не поддерживают.

Цветовая модель HSL

Internet Explorer 9 поддерживает значения цветовой модели "оттенок-насыщенность-освещенность" (HSL) модуля цвета CSS3. В цветовой модели HSL "оттенок" определяется как заданный угол цвета на цветовом круге (например, значение красного 0 или 360, зеленого — 120, синего — 240). "Насыщенность" и "освещенность" выражаются в процентах. Например, следующее объявление CSS определяет красный фон.

background-color: hsl(0,100%,50%);
Цветовая модель HSLA

Internet Explorer 9 также расширяет цветовую модель HSL за счет альфа-канала. Как и в случае модели RGBA, альфа-канал выражается значением от 0,0 до 1,0. Например, следующее объявление CSS определяет красный фон с прозрачностью 50%.

background-color: hsla(0,100%,50%,0.5);
Свойство opacity

Internet Explorer 9 добавляет свойство opacity цветового модуля CSS3, которое позволяет управлять прозрачностью на уровне элементов. Подобно альфа-компоненту значений RGBA, значение opacity является числом в диапазоне от 0,0 (полностью непрозрачный) до 1,0 (полностью непрозрачный). Свойство opacity доступно для всех элементов.

В следующем примере показано свойство opacity для темно-синего (navy) цвета со значением непрозрачности от 0 до 1, увеличивающимся с шагом 0,2.

<div class="opacity_sample">
    <div style="background: navy; opacity: 0;"></div>
    <div style="background: navy; opacity: 0,2;"></div>
    <div style="background: navy; opacity: 0,4;"></div>
    <div style="background: navy; opacity: 0,6;"></div>
    <div style="background: navy; opacity: 0.8;"></div>
    <div style="background: navy; opacity: 1;"></div>
</div>

В этом примере создается следующее изображение элемента div, имеющего размер 25 x 125 пикселей.

Ключевые слова свойства color

Модуль цвета CSS3 создает список ключевых слов свойства color для CSS, идентичный списку для SVG 1.0. Хотя поддержка формата SVG является новой возможностью в Internet Explorer 9, это изменение было реализовано еще в Internet Explorer 8.

В Internet Explorer 9 введена поддержка ключевого слова для цветового модуля CSS3 currentColor которое задает текущее значение для любого свойства color, принимающего свойство color. Будучи заданным для самого свойства color, ключевое слово currentColor эквивалентно color:inherit.

Internet Explorer 9 также расширяет использование ключевого слова transparent за пределы свойств border-color и background-color. Теперь его можно использовать с любым свойством, которое принимает свойство color.

Модуль шрифтов CSS3

Управление типографскими характеристиками последовательно улучшалось в каждой новой версией CSS. В то же время отсутствие совместимого формата веб-шрифтов может быть большим неудобством. В Internet Explorer 9 улучшена существующая поддержка шрифтов для обеспечения совместимости с модулем шрифтов CSS3. Также добавлена поддержка формата WOFF (Web Open Font Format) и необработанных шрифтов TrueType.

Свойства шрифтов

Свойство font-weight было обновлено, чтобы в Internet Explorer 9 можно было рассчитывать насыщенность шрифтов в соответствии с требованиями модуля шрифтов CSS3.

Свойство font-size было обновлено, чтобы все масштабные коэффициенты ключевых слов соответствовали определению модуля шрифтов CSS3. Кроме того, ключевые слова и размеры заголовков HTML теперь сопоставляются в соответствии с требованиями модуля шрифтов CSS3.

Новое свойство Internet Explorer 9 font-stretch позволяет выбирать обычное, уплотненное или разреженное начертание шрифта из семейства шрифтов. Это свойство также доступно как дескриптор правила @font-face.

Правило @font-face

Правило @font-face позволяет использовать ссылки на шрифты. То есть таблица стилей может ссылаться на определенный файл шрифта, который браузер должен загрузить и использовать. Например, рассмотрим следующую разметку.

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf)
      format("embedded-opentype");
}
p {font-family: MyFont, serif;
}

В этом примере правило @font-face предписывает браузеру перейти на URL-адрес, заданный в дескрипторе src, чтобы загрузить файл шрифта, который содержит указанный шрифт. В Internet Explorer 8 и более ранних версиях дескриптор src некорректно игнорировался, если содержал необязательную строку format, например такую, как в предыдущем примере. В Internet Explorer 9 дескриптор src анализируется должным образом.

В Internet Explorer 9 также добавлена поддержка дескриптора unicode-range, который позволяет задавать диапазон символов Юникода, поддерживаемый данным шрифтом. Например, в следующем примере кода задается диапазон основных символов ASCII.

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf);
   unicode-range: U+0-7F;
}
Форматы веб-шрифтов

При создании Internet Explorer 9 корпорация Майкрософт большое внимание придавала максимизации возможностей для выбора веб-шрифтов. С этой целью было сделано следующее:

  • была обеспечена обратная совместимость с продолжающейся поддержкой формата EOT (Embedded OpenType);
  • добавлена поддержка формата WOFF (Web Open Font Format), обеспечивающего улучшенную поддержку файлов шрифтов на основе формата SFNT (шрифты TrueType, OpenType и Open Font Format) посредством сжатия каждой таблицы в отдельности с помощью формата сжатия ZIP;
  • добавлена поддержка устанавливаемых (без внедрения набора битов разрешения) необработанных шрифтов TrueType.

Пример веб-шрифтов в Internet Explorer 9 показывается в демонстрациях " Веб-шрифты" и " Дополнительные веб-шрифты" на сайте тестового выпуска Internet Explorer

Дополнительные сведения о шрифтах CSS3 в Internet Explorer 9 см. на сайте MSDN.

Модуль запроса носителей CSS3

Модуль запросов носителя CSS3 задает методы, позволяющие веб-разработчикам связывать таблицу стилей с набором конкретных возможностей устройства. Например, можно по-разному разрабатывать страницы для пользователей, просматривающих их на мобильном устройстве (у которого очень маленький экран, ограниченная цветовая палитра, низкое разрешение и т. д.), на нетбуке (у которого маленький экран, полная цветовая палитра, высокое разрешение и т. д.) и на стандартном компьютере (у которого большой экран, полная цветовая палитра, высокое разрешение и т. д.). Полный список свойств, поддерживаемых запросами носителей CSS3: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome и resolution.

Следующее объявление является типичным запросом носителя с помощью правила @media.

@media screen and (max-width:400px) {div {border:none;}}

В этом случае screen указывает целевой тип носителя, а max-width — целевое свойство носителя. Это объявление определяет, что указанные правила (отсутствие границы для элементов div) применяются только в случае отображения страницы на экране с шириной не более 400 пикселей. Свойства носителя можно использовать совместно, чтобы создавать еще более конкретные запросы, например такие, как следующий.

@media screen and (max-width:400px) and (max-height:600px) {…}

Это объявление применяет указанные правила, если носителем является экран с шириной не более 400 пикселей и высотой не более 600 пикселей.

Опробуйте практически запросы носителя на сайте тестового выпуска Internet Explorer.

В Internet Explorer 9 появилась поддержка запросов носителя в форматах CSS, HTML, XML и XHTML. Дополнительные сведения о запросах носителя в Internet Explorer 9 см. на сайте MSDN.

Модуль пространств имен CSS3

В Internet Explorer 9 имеется существенная поддержка модуля пространств имен CSS3. Пространства имен CSS позволяют разработчику объявлять пространство имен по умолчанию для файла CSS. То есть по умолчанию любой селектор элемента или атрибута также использует это пространство имен.

Пространства имен CSS также позволяют разработчику создавать префиксы пространства имен, которые затем можно использовать в файле CSS. Кроме того, Internet Explorer 9 позволяет объявлять пространство имен, предназначенное для элементов SVG.

Правило @namespace

Правило @namespace объявляет пространство имен XML (и, если требуется, его префикс) и связывает его со строкой, представляющей имя пространства имен. Например, следующее правило объявляет пространство имен по умолчанию.

@namespace "http://www.w3.org/1999/xhtml";

Пространство имен по умолчанию применяется к именам, у которых нет явного компонента пространства имен.

Если правило @namespace объявлено с префиксом, префикс можно использовать в именах с полностью определенным пространством имен. Например, если имеется следующее объявление для пространства имен prfx

@namespace prfx "http://prfx.contoso.com";

…то следующий селектор соответствует элементам E в пространстве имен, на которое ссылается префикс prfx.

prfx|E

Следующий пример немного более сложный.

@namespace prfx "http://prfx.contoso.com";
@namespace msft "http://msft.example.com";

p {background-color:red;}
prfx|p {background-color:blue;}
msft|p {background-color:green;}

В этом примере создаются два префикса пространства имен. Сначала для элементов p в любом пространстве имен задается красный цвет. Затем для элементов p в пространстве имен prfx задается синий цвет, и, наконец, для элементов p в пространстве имен msft задается зеленый цвет.

В следующем примере задается стиль элемента в формате SVG.

@namespace svg "http://www.w3.org/2000/svg";
svg|circle {fill:red;}

Пространство имен и объявление из этого примера задают для всех кругов, созданных с помощью формата SVG, заливку красным.

Дополнительные сведения см. на странице справочных материалов по правилу @namespace на сайте MSDN.

Модуль значений и единиц измерения CSS3

В Internet Explorer 9 добавлена поддержка множества новых значений и единиц измерения, описанных в модуле значений и единиц измерения CSS3. Большинство из этих новых значений и единиц измерения необходимы для поддержки других компонентов CSS3, описанных в этом документе.

Internet Explorer 9 добавлена поддержка следующих новых значений и единиц измерения:

  • deg: градусы (единица измерения угла)
  • grad: грады (единица измерения угла)
  • rad: радианы (единица измерения угла)
  • turn: обороты (единица измерения угла)
  • ms: миллисекунды (единица измерения времени)
  • s: секунды (единица измерения времени)
  • rem: размер шрифта корневого элемента (относительная единица измерения длины)
  • vw: ширина окна просмотра (относительная единица измерения длины)
  • vh: высота окна просмотра (относительная единица измерения длины)
  • vm: уменьшение ширины или высоты окна просмотра (относительная единица измерения длины)
  • ch: нулевая ширина (ширина нулевого глифа при отображении шрифта; относительная единица измерения длины)

Кроме того, в Internet Explorer 9 обновлена функция attr(), используемая для автоматически создаваемого контента. Теперь она может применяться для любого свойства и принимать несколько аргументов.

Следующая функция CSS3 является новой для Internet Explorer 9:

  • calc(): вычисляет значения с помощью арифметических операторов и применяется в случаях, когда разрешено использовать значения длины

Дополнительные сведения о функциях CSS см. в справочнике по значениям и единицам измерения CSS на сайте MSDN.

Селекторы CSS3

Internet Explorer 9 поддерживает дополнения к синтаксису селекторов CSS, указанные в документе, в котором приводятся рекомендации по селекторам CSS3. Ниже приведен перечень селекторов, которые являются новыми для Internet Explorer 9. (Исчерпывающие сведения о поддержке селекторов в Internet Explorer см. в документе, посвященном совместимости CSS и Internet Explorer на сайте MSDN.)

Дополнительные сведения см. в разделе справочных материалов по селекторам CSS на сайте MSDN.

Пример практического использования селекторов CSS3 см. на сайте тестового выпуска Internet Explorer.

Структурные псевдоклассы

Структурные псевдоклассы позволяют сделать выбор на основе дополнительной информации в дереве документа, который невозможно сделать с помощью простых селекторов или блоков объединения.

В следующем примере осуществляется выбор элемента E, являющегося корневым элементом документа.

E:root 

В следующем примере осуществляется выбор элемента E, являющегося n-ным дочерним элементом своего родительского элемента.

E:nth-child(n)

В следующем примере осуществляется выбор элемента E, являющегося n-ным дочерним элементом своего родительского элемента, считая от последнего дочернего элемента.

E:nth-last-child(n) 

В следующем примере осуществляется выбор элемента E, являющегося n-ным элементом среди одноуровневых элементов своего типа.

E:nth-of-type(n) 

В следующем примере осуществляется выбор элемента E, являющегося n-ным элементом среди одноуровневых элементов своего типа, считая от последнего элемента уровня.

E:nth-last-of-type(n)

В следующем примере осуществляется выбор элемента E, являющегося последним дочерним элементом своего родительского элемента.

E:last-child 

В следующем примере осуществляется выбор элемента E, являющегося первым элементом среди одноуровневых элементов своего типа.

E:first-of-type 

В следующем примере осуществляется выбор элемента E, являющегося последним элементом среди одноуровневых элементов своего типа.

E:last-of-type 

В следующем примере осуществляется выбор элемента E, являющегося единственным дочерним элементом своего родительского элемента.

E:only-child

В следующем примере осуществляется выбор элемента E, являющегося единственным элементом среди одноуровневых элементов своего типа.

E:only-of-type

В следующем примере осуществляется выбор элемента E, не имеющегося дочерних элементов (включая текстовые узлы).

E:empty
Конечный псевдокласс

Конечный псевдокласс выбирает конечный элемент URI-кода исходной ссылки. Для определения положения на странице используется идентификатор фрагмента, который состоит из знака номера (#), после которого следует идентификатор привязки, например http://www.example.com/mypage.html#section_3.

В следующем примере осуществляется выбор элемента div класса important, который является конечным элементом URI-кода исходной ссылки. Если URI-код документа не имеет идентификатора фрагмента, конечный элемент не существует.

div.important:target
Псевдоклассы состояний элементов пользовательского интерфейса

Псевдоклассы состояний элементов пользовательского интерфейса используются для выбора элементов пользовательского интерфейса (элементов управления формы, таких как переключатели или флажки), которые находятся в определенном состоянии — включены, отключены или выбраны (установлены).

В следующем примере осуществляется выбор элемента управления формы E, который включен.

E:enabled

В следующем примере осуществляется выбор элемента управления формы E, который отключен.

E:disabled 

В следующем примере осуществляется выбор элемента управления формы E, который выбран.

E:checked 

Псевдокласс : indeterminate выбирает переключатели и флажки, состояние которых не может быть определено — они ни установлены (выбраны), ни сняты (не выбраны). В следующем примере осуществляется выбор элемента управления формы E, состояние которого не может быть определено.

E:indeterminate

Примечание. Псевдокласс :indeterminate не определен в текущей спецификации CSS3, но поддерживается многими популярными браузерами.

Псевдокласс отрицания

Псевдокласс отрицания получает в качестве аргумента простой селектор и выбирает элементы, которые не выбираются этим аргументом. В следующем примере осуществляется выбор элемента E, который не соответствует простому селектору s:

E:not(s)
Псевдоэлемент фрагментов элемента пользовательского интерфейса

Псевдоэлемент фрагментов элемента пользовательского интерфейса ::selection используется для выбора части страницы, выделенной пользователем, включая текст, содержащийся в изменяемом текстовом поле. Этот псевдоэлемент можно применять к свойствам color и background-color. Следующий оператор выбирает текст, выделенный пользователем в элементе E.

E::selection 

Примечание. Псевдоэлемент ::selection не определен в текущей спецификации CSS3, но поддерживается многими популярными браузерами.

Дополнительные возможности CSS

В Internet Explorer 9 реализована некоторая поддержка модуля представления объектной модели CSS, находящегося на стадии рабочего проекта.

Модуль представления CSSOM

Модуль представления CSSOM определяет интерфейсы API, которые позволяют разработчикам проверять и программно изменять визуальные свойства документа и его содержимого, включая позиционирование окна макета, ширину окна просмотра и прокрутку элементов. В Internet Explorer 8 впервые появилась поддержка части этого модуля. Internet Explorer 9 распространяет поддержку и на другие API представления CSSOM:

URI-коды данных

URI-коды данных — это средство прямого встраивания данных в контекст веб-страницы. Самым распространенным примером является внедрение в веб-страницу крошечного изображения, например:

data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP

Помещенный в атрибут src элемента img, этот текст эффективно внедряет изображение в разметку страницы. В Internet Explorer 8 впервые появилась поддержка URI-кодов в Internet Explorer.

В Internet Explorer 9 разработчики могут теперь использовать URI-коды в атрибуте src элемента script. Кроме того, ограничение размера URI-кодов было изменено с 32 килобайт (КБ) в Internet Explorer 8 до 4 гигабайт (ГБ) в Internet Explorer 9.

Улучшения модели DOM

Internet Explorer 9 поддерживает существенно улучшенную модель DOM (Document Object Model). Помимо дополнительной поддержки модели DOM второго (L2) и третьего (L3) уровня, разработанной консорциумом W3C, Internet Explorer 9 поддерживает расширенную модель DOM, а также улучшенную обработку пробелов.

Общие сведения о расширенной модели DOM

Расширенная модель DOM в Internet Explorer 9 улучшает общую производительность стандартного режима Internet Explorer 9 (режима IE9), ускоряя выполнение скриптов в уровне между новым обработчиком JavaScript Chakra и обработчиком форматирования Trident, а также перемещая точки входа модели DOM в обработчик Chakra. Дополнительные сведения о режиме IE9 см. в разделе Улучшенные возможности для взаимодействия, реализованные на основе поддержки стандартов ниже в этом документе.  Расширенная модель DOM также одновременно реализует корректную иерархию объекта наследования DOM в соответствии со спецификациями DOM L2 и L3 консорциума W3C.

Типы объектов расширенной модели DOM теперь отражаются в средствах разработчика F12 при работе со страницами в стандартном режиме Internet Explorer 9. (Дополнительные сведения о новых средствах разработчика в Internet Explorer 9 см. в разделе Средства разработчика F12 в этом документе.) Вместо отображения традиционных типов на основе модели COM (состоящих из набора интерфейсов и Disp-объектов) страницы в режиме IE9 представляют действующие имена типов объекта расширенной модели DOM, используемые обработчиком Chakra, которые соответствуют стандартам DOM L2 и L3 консорциума W3C (например, NodeList, DocumentType, HTMLBodyElement и т. д.).

Расширенная модель DOM в Internet Explorer 9 существенно улучшает уровень возможностей для взаимодействия между Internet Explorer 9 и другими браузерами. Она также позволяет обеспечить выигрыш в производительности во многих сценариях, в основном благодаря объектам DOM, которые представлены как собственные объекты JavaScript.

Расширенная модель DOM распространяет широкий набор новых возможностей, предоставляемых новым обработчиком "Chakra" JavaScript, на объекты и API, предоставляемые моделью DOM, в том числе:

  • Селективная расширяемость объекта DOM (черезObject.preventExtensions)
  • Изменяемость API DOM (при изменении дескрипторов свойств API DOM или удалении свойств полностью)
  • Поддержка объектов DOM объектами JSON
  • Наследование компонентов собственного объекта JavaScript (hasOwnProperty, toString и т. д.)
  • Наследование компонентов собственной функции JavaScript (call, apply, bind)

Эти компоненты унифицируют методы программирования для собственных объектов обработчика JavaScript и объектов DOM. Также были добавлены следующие новые возможности модели DOM:

  • Исключения DOM в спецификации консорциума W3C: Исключения DOM — это новые типы объектов ошибок, которые возникают в результате сбоев API DOM. Коды ошибок для этих исключений сопоставляются с константами, определенными в самом исключении.
  • Свойства W3C DOM "const" (например, Node.ELEMENT_NODE): Свойства const — это простые поля, которые предоставляют имена для многих общих числовых значений, возвращаемых из других API DOM. Например, число, возвращаемое API DOM nodeType можно сравнить с константой, чтобы сделать код более удобочитаемым: if (myElement.nodeType == Node.ELEMENT_NODE)

Анализ и сериализация XML на входе и выходе модели DOM

Хотя в Internet Explorer уже имелась поддержка анализа и сериализации XML на входе и выходе собственных объектов DOM, доступ скриптов к этим функциям из документов HTML был затруднен. По этой причине в Internet Explorer 9 добавлена поддержка интерфейсов DOMParser and XMLSerializer. Эти интерфейсы широко поддерживаются другими популярными браузерами.

В следующем примере скрипта показано, как можно выполнить анализ строки в документе XML, используя интерфейс DOMParser:

var parser = new DOMParser();
var doc = parser.parseFromString("<test>Some XML</test>", "text/xml");

В следующем примере скрипта показана сериализация узла DOM (включающего узлы из документов HTML) в строку XML с помощью интерфейса XMLSerializer:

var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(doc);

Модель DOM (Document Object Model) второго и третьего уровней

В Internet Explorer 9 добавлена поддержка большей части модели DOM второго уровня (DOM L2) и третьего уровня (DOM L3), а также улучшена поддержка модели DOM L2 по сравнению с существующими в Internet Explorer реализациями. Также добавлена поддержка спецификации WebIDL, находящейся на стадии рабочего проекта.

В Internet Explorer 9 введена поддержка следующих возможностей модели DOM.

Ядро DOM (L2 и L3) и представления (L2)

Internet Explorer 9 добавлена поддержка многих новых API ядра DOM L2, включая следующие:

Также добавлена поддержка возможностей взаимодействия для пространств имен DOM, например поддержка методов *NS и свойств, связанных с пространствами имен (createElementNS, namespaceURI, localName, prefix и других). Internet Explorer 9 также поддерживает многие из наиболее широко применяемых методов и свойств ядра DOM L3 Core:

  • adoptNode
  • compareDocumentPosition
  • CDATASection
  • importNode
  • inputEncoding
  • isDefaultNamespace
  • isEqualNode
  • isSameNode
  • isSupported
  • lookupNamespaceURI
  • lookupPrefix
  • replaceWholeText
  • textContent
  • xmlEncoding
  • xmlStandalone
  • xmlVersion
  • wholeText

Internet Explorer 9 полностью поддерживает оба свойства представлений DOM L2.

Дополнительные сведения см. в разделе справочных материалов по ядру и представлениям модели DOM на сайте MSDN.

Обход элементов модели DOM

Спецификация обхода элементов определяет интерфейс ElementTraversal. Этот интерфейс позволяет осуществлять навигацию через скрипт элементов в дереве DOM, например через узлы элементов в документах HTML, XML или SVG. В Internet Explorer 9 введена поддержка интерфейса ElementTraversal и пяти его свойств.

События модели DOM L2 и L3

Спецификации событий модели DOM описывают систему событий DOM, которая позволяет регистрировать обработчики событий, описывает поток событий через дерево документа и определяет контекстные сведения для событий. Дополнительные сведения о модели событий см. в статье, посвященной основным сведениям о модели событий на сайте MSDN.

Одной из целей системы событий в Internet Explorer 9 является обеспечение соответствия с системой взаимодействия, определенной консорциумом W3C. Это позволяет отойти от собственной модели Internet Explorer attachEvent, устраняя необходимость в ветвлении кода для разных браузеров.

  • События DOM L2 и L3
    • API регистрации и диспетчеризации событий ( addEventListener, removeEventListener, createEvent и dispatchEvent)
    • Фазы захвата, "всплытия" и направления событий
    • Новые объекты событий ( KeyboardEvent, MouseEvent, MutationEvent и т. д.; CustomEvent для событий, связанных с конкретными приложениями; а также интерфейсы объектов событий для типов событий, отличных от стандартных, например DragEvent
    • Новые типы событий на основе стандартов (события композиции, текстовые события, события прокрутки, события изменения DOM и т. д.) из HTML5)

Примечание   События изменения DOM добавлены для полноты комплекта; использовать их в стандарте W3C не рекомендуется.

Поддержка HTML в модели DOM L2

В браузере Internet Explorer 9 добавлена поддержка интерфейсов API для работы с документами HTML в модели DOM L2 , недоступных в предыдущих версиях Internet Explorer, в том числе таких API HTML5, как getElementsByClassName и characterSet. В Internet Explorer 9 улучшена объектная модель в таблицах, особенно в отношении операций DOM по добавлению и удалению элементов.

getElementsByClassName

Метод getElementsByClassName возвращает все узлы элемента, которые имеют атрибуты класса, совпадающие со строкой входа. Его функциональность аналогична методу getElementsByTagName.

characterSet

Атрибут characterSet возвращает предпочитаемое имя MIME кодировки текущего документа.

Стиль в модели DOM L2

Спецификация стиля в модели DOM L2 определяет интерфейсы API для программного доступа и изменения стилей отдельных элементов и всей таблицы стилей с помощью правил удаления или изменения. Предыдущие версии Internet Explorer могли выполнять эти задачи, используя собственные методы; в браузере Internet Explorer 9 добавлена поддержка стандартизированных API, определенных в спецификации стиля модели DOM L2. Кроме того, была добавлена поддержка стандартизированных API, которые не имеют эквивалента в Internet Explorer, например метода getComputedStyle. Практический пример использования метода getComputedStyle см. на сайте тестового выпуска Internet Explorer.

Дополнительные сведения см. в статье, посвященной стилю DOM на сайте MSDN.

Обход и диапазон в модели DOM L2

Часть, посвященная диапазону DOM спецификации обхода и диапазона DOM L2, определяет общий способ выбора содержимого документа между парой граничных точек. Граничные точки задаются контейнером (родительским элементом, который содержит точку) и смещением (позицией этой точки в контейнере). В сочетании с интерфейсом HTML5 Selection возможности диапазона DOM позволяют использовать такую функциональность, как программное получение диапазона, выбор дочерних элементов и удаление выбора.

Internet Explorer 9 поддерживает все API диапазона DOM L2, а также все API выбора HTML5, например широко используемый метод setSelectionRange.

Дополнительные сведения см. в статье, посвященной диапазону DOM на сайте MSDN.

Часть, посвященная обходу в спецификации обхода и диапазона модели DOM L2, определяет способ перемещения по документу и фильтрации узлов в случае необходимости. Internet Explorer 9 поддерживает два способа обхода DOM (NodeIterator и TreeWalker), а также два способа фильтрации узлов (whatToShow и NodeFilter), которые определены в спецификации консорциума W3C.

Дополнительные сведения см. в статье, посвященной обходу DOM на сайте MSDN.

Обработка пробелов в модели DOM

Представление пробелов в модели DOM обрабатывалось в Internet Explorer иначе, чем в других браузерах; отсутствие возможностей для взаимодействия в этой области было неудобством для веб-разработчиков. В предыдущих версиях Internet Explorer обнаруженные пробелы сворачивались и не помещались в текстовые узлы в модели DOM. В браузере Internet Explorer 9 пробелы должным образом сохраняются и помещаются в текстовые узлы в модели DOM. Это поведение согласуется с другими основными браузерами.

Поддержка ECMAScript 5

В браузере Internet Explorer 9 в дополнение к средствам повышения производительности JavaScript вводятся расширения компонента языка JavaScript. В декабре 2009 года организация ECMA утвердила пятое издание стандарта ECMA-262 в качестве преемника третьего издания (четвертое издание не было опубликовано), и в этом же году корпорация Майкрософт впервые реализовала поддержку элементов ECMAScript 5 (ES5) при добавлении собственной поддержки JSON в Internet Explorer 8 и в Internet Explorer 8 была добавлена поддержка Accessor для объектов DOM. Помимо JSON и поддержки Accessor для объектов DOM, спецификация ES5 также стандартизирует большое количество существенных улучшений языка JavaScript.

В браузере Internet Explorer 9 реализовано много важных возможностей ECMAScript 5, включая следующие:

В браузере Internet Explorer 9 также устранено несколько проблем, присутствовавших в предыдущих реализациях языка JavaScript в Internet Explorer. Дополнительные сведения см. в блоге группы разработчиков Internet Explorer. Чтобы увидеть поддержку ECMAScript 5 в действии, перейдите на сайт тестового выпуска Internet Explorer.

HTML5

В Internet Explorer 8 впервые появилась поддержка некоторых функциональных возможностей спецификации рабочего проекта HTML5, в том числе:

В браузере Internet Explorer 9 использованы результаты работ по обеспечению совместимости с HTML5, проведенных в Internet Explorer 8, и реализованы следующие новые элементы:

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

HTML5 - географическое расположение

В браузере Internet Explorer 9 добавлена поддержка географического расположения. API географического расположения позволяет веб-приложению получать доступ к данным о текущем географическом расположении компьютера, на котором запущен браузер Internet Explorer. Благодаря этому веб-страница изменяет пользовательские настройки в соответствии с расположением. Например, отображается соответствующее положение на карте или актуальная информация, такая как прогноз погоды или местные новости. Информация о расположении предоставляется в виде координат (широты и долготы). API географического расположения в Internet Explorer 9 соответствуют принятым стандартам спецификации API географического расположения.

Чтобы увидеть функцию определения географического расположения в действии, посетите сайт тестового выпуска Internet Explorer 9.

Дополнительные сведения о географическом расположении см. на сайте MSDN.

Элементы HTML5 video и audio

Два самых ожидаемых компонента HTML5, которые теперь поддерживаются в браузере Internet Explorer 9, — это новые элементы video и audio. Элементы video и audio определены в разделе, посвященном внедрению контента спецификации HTML5.

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

<video width="400"
    height="300"
    src="video.mp4"
    poster="frame.png"
    autoplay
    controls
    loop>
    Этот контент отображается, если тег video или codec не поддерживается.
</video>

В браузере Internet Explorer 9 этот код будет отображать в области размером 400 x 300 (атрибуты width и height) файл изображения "frame.png" (атрибут poster), пока будет загружаться видеоконтент. Файл видео "video.mp4" (атрибут src) начнет проигрываться автоматически после загрузки страницы (атрибут autoplay), а также отобразятся элементы управления видео (атрибут controls). Видео после своего завершения начнет повторяться (атрибут loop). Если формат видео не поддерживается, вместо него отобразится текст в элементе video, сообщающий об отображении этого контента. Элемент video также поддерживает элемент preload, который подсказывает браузеру, какие веб-разработки приведут к наилучшему взаимодействию с пользователем.

Пример практического использования элемента video см. в демонстрации Видеопанорама на сайте тестового выпуска Internet Explorer.

Internet Explorer 9 также поддерживает элемент video с несколькими источниками, каждый из которых задается дочерним элементом source. Например, рассмотрим следующую разметку.

<video width="400" height="300" poster="frame.png" autoplay controls loop>
    <source src="video.ogv" type='video/ogg; codecs="theora,
     vorbis"'>
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,
     mp4a.40.2"'>
</video>

Здесь браузер Internet Explorer 9 выбирает из списка первый поддерживаемый формат (в данном случае это второй элемент source) и проигрывает связанный с ним файл источника.

Элемент audio определяется подобно элементу video, но без атрибутов width, height и poster. Пример практического использования элемента audio см. на сайте тестового выпуска Internet Explorer.

Браузер Internet Explorer 9 поддерживает следующие форматы контента:

Имя элементаПоддерживаемые форматы
видео

Контейнер MP4, видео H.264, все профили – аудио в формате AAC или MP3

Видео WebM при наличии установленного кодека VP8

audioAAC или MP3

Дополнительные сведения см. в статье, посвященной элементам video и audio спецификации HTML5 на сайте MSDN.

Элемент canvas спецификации HTML5

Еще один ожидаемый компонент HTML5, появившийся в браузере Internet Explorer 9, – это элемент canvas, который используется в сочетании с API Canvas 2D. Элемент canvas, согласно определению спецификации HTML5, позволяет отображать графику на зависимом от разрешения растровом полотне. Для прорисовки полотна используются "контексты", например контекст Canvas 2D, определенный в спецификации API Canvas 2D, разработанной консорциумом W3C. В браузере Internet Explorer 9 введена поддержка элемента canvas, использующего API рисования 2D Canvas в качестве контекста. (В Internet Explorer 9 контекст Canvas 2D представлен объектом CanvasRenderingContext2D или интерфейсом ICanvasRenderingContext2D.) Подобно всей графике в Internet Explorer 9, элемент canvas ускоряется на аппаратном уровне с помощью Windows и графического процессора.

Элемент canvas позволяет реализовать сценарии рисования, которые содержат прямоугольники, контуры, прямые линии, заливки, дуги, а также кривые Безье и кривые второго порядка. Кроме того, элемент canvas в Internet Explorer 9 поддерживает атрибуты ширины и высоты. (Значениями по умолчанию для ширины и высоты являются 300 и 150 пикселей соответственно, а цвет по умолчанию — прозрачный черный.)

Элемент canvas позволяет программировать графические объекты на веб-странице. Тег canvas — это двухмерная поверхность рисования "прямого режима" (команды рисования отправляются непосредственно на графическое оборудование), которую можно использовать для отображения графиков в реальном времени, анимации или интерактивных игр, без необходимости загрузки отдельного подключаемого модуля. Так как API определены объектом CanvasRenderingContext2D, тег canvas позволяет реализовать сценарии рисования, которые содержат:

Можно использовать JavaScript, чтобы анимировать рисунки полотна или создать интерактивное взаимодействие, способное реагировать на ввод с клавиатуры, щелчки мыши или событие браузера. Так, в этом примере на сайте тестирования возможностей Internet Explorer с помощью всего нескольких строк кода JavaScript создаются светящиеся линии, размещаемые и окрашиваемые случайным образом.

Элемент canvas в браузере Internet Explorer 9 поддерживает атрибуты ширины и высоты. (Значениями по умолчанию для ширины и высоты являются 300 и 150 пикселей соответственно, а цвет по умолчанию — прозрачный черный.)

Internet Explorer 9 поддерживает следующие API контекста Canvas 2D (члены, представленные объектом CanvasRenderingContext2D):

Более подробное описание возможностей использования HTML5 Canvas в браузере Internet Explorer 9 см. на сайте MSDN. Также посетите сайт тестового выпуска Internet Explorer, чтобы просмотреть дополнительные демонстрации по использованию элемента canvas. Технические сведения об элементе canvas в браузере Internet Explorer 9 см. на странице справочных материалов по элементу canvas на сайте MSDN.

Улучшения анализа HTML

Анализ HTML в браузере Internet Explorer 9 улучшен для более строгого соответствия поведению, описанному в рабочем проекте спецификации HTML5.

Анализ формата SVG в HTML

Internet Explorer 9 поддерживает внедрение формата SVG непосредственно в HTML. Дополнительные сведения о формате SVG см. в разделе Формат SVG этого руководства.

Анализ XHTML

В браузере Internet Explorer 9 выполняется анализ документов с mime-типом application/xhtml+xml как XHTML.

Универсальные элементы

Раньше Internet Explorer анализировал элементы, которые не мог распознать, как "неизвестные" элементы. Такие элементы выравнивались, что не позволяло применить к ним обычные правила стиля CSS и было несовместимо с рабочим проектом спецификации HTML5. В браузере Internet Explorer 9 это поведение изменено, теперь нераспознанные элементы анализируются в ней как "универсальные" элементы, позволяя им функционировать, как обычным элементам. Это устраняет необходимость поиска разработчиком обходных решений, таких как вызов метода document.createElement для принудительного распознавания элемента в Internet Explorer.

Ниже представлен простой пример универсального элемента - в данном случае неопределенного элемента с именем mydiv.

<style type="text/css">
mydiv {
     color: blue;
     font-weight: bold;
}
</style>

...

<p>I am using a <mydiv>generic element</mydiv> in this sentence.</p>

Internet Explorer 8 игнорирует тег mydiv и связанные с ним правила CSS. Это предложение отображается следующим образом.

В Internet Explorer 9 тег mydiv анализируется должным образом, в результате чего отображается следующий текст:

Перекрывающиеся теги

Если HTML содержит перекрывающиеся теги, Internet Explorer 8 и более ранние версии не разрешают их во время анализа. Такое поведение противоречит определению рабочего проекта спецификации HTML5. Если некоторые элементы перекрываются для целей скриптов (например, как в демонстрируемом здесь примере), это может привести к возникновению понятных ошибок скриптов. В соответствии с рабочим проектом спецификации HTML5 в Internet Explorer 9 перекрывающиеся теги разрешаются во время анализа.

Ниже приведен простой пример скрипта, в котором задается красный цвет для текста между перекрывающимися тегами i и b.

<script type="text/javascript">
function load()
{
     var elms = document.getElementsByTagName("i");
     for(var i = 0; i < elms.length; i++)
     {
          var elm = elms[i];
           if(elm.parentNode.tagName.toLowerCase() == "b")
                elm.style.color = "red";
     }
}
</script>

...

<body onload="load();">
You should be aware of how <b>this <i>affects</b> script</i>.
</body>

В Internet Explorer 8 и более ранних версиях эта разметка приводила к нежелательному отображению.

В Internet Explorer 9 эта разметка создает ожидаемое изображение.

Изменения анализа для блоков скриптов и стиля

Internet Explorer 8 и более ранние версии не сохраняли текст блока скрипта или стиля в текстовых узлах модели DOM. Internet Explorer 9 сохраняет текст блоков script или style в модели DOM в виде текстовых узлов, что и предусматривалось. Это делает исходный код доступным в текстовом узле DOM, так что его можно изменять с помощью скрипта.

API выбора HTML5

В Internet Explorer 9 добавлена поддержка трех API выбора текста HTML5. Объект Selection представляет список объектов Range, которые доступны благодаря новой поддержке объектов Range в модели DOM L2 в Internet Explorer 9. Дополнительные сведения см. в разделе Улучшения модели DOM выше в этом документе.

Метод getSelection

Метод getSelection возвращает объект Selection для окна, которое представляет текущий выбранный текст.

Свойство selectionStart

Свойство selectionStart получает смещение от начала текущего выбранного текста, а также может задавать начало выбора.

Свойство selectionEnd

Свойство selectionEnd получает смещение от конца текущего выбранного текста, а также может задавать конец выбора.

Семантические элементы HTML5

В Internet Explorer 9 улучшена поддержка нескольких семантических элементов HTML5. "Семантически" элемент в этом контексте определяется как элемент, имя тега которого описывает его контент, но у которого отсутствует какое-либо особое поведение. Семантические теги могут быть особенно полезны для реализации специальных возможностей.

В Internet Explorer 9 внесены следующие изменения в поддержку семантических элементов:

  • Эти элементы теперь наследуются в первую очередь из интерфейса HTMLElement, а не из интерфейса HTMLUnknownElement, как указано в спецификации HTML5.
  • По умолчанию стили этих элементов определяются, как указано в спецификации HTML5.

В настоящее время распознаются следующие семантические элементы:

  • section
  • nav
  • article
  • aside
  • hgroup
  • header
  • footer
  • figure
  • figcaption
  • mark

Цветовые профили ICC

Консорциум ICC публикует цветовые профили, в которых описываются аппаратные и программные атрибуты цвета.

В Internet Explorer 9 появилась поддержка цветовых профилей для изображений ICC v2 и v4, определенных в спецификациях ICC.

API селекторов второго уровня

Спецификация API селекторов второго уровня определяет набор API, которые позволяют вычислять селекторы в модели DOM.

В Internet Explorer 8 были реализованы API селекторов querySelector и querySelectorAll. В Internet Explorer 9 добавлена поддержка метода msMatchesSelector.

Формат SVG

Поддержка формата SVG (Scalable Vector Graphics) стала одним из наиболее востребованных компонентов, реализованных в Internet Explorer, который является мощным средством добавления на веб-страницу высококачественных, легко масштабируемых визуальных образов — от мелких и простых до крупных и сложных — без необходимости загрузки подключаемого модуля или отдельного средства просмотра.

В Internet Explorer 9 корпорация Майкрософт с гордостью представляет поддержку базового набора функциональных возможностей формата SVG. Поддержка формата SVG в Internet Explorer 9 основана на рекомендациях спецификации SVG 1.1 (второе издание) (для браузеров для настольных компьютеров). Реализованы следующие функциональные возможности:

  • Большая часть структуры документа SVG, интерактивность (события скриптов) и стили (встроенные и через CSS)
  • Многие элементы представлений и соответствующие им атрибуты и интерфейсы DOM, в том числе:
    • основные фигуры
    • заливка, штриховка, маркеры и цвет
    • градиенты и узоры
    • контуры
    • текст

Internet Explorer 9 поддерживает следующие методы отображения разметки SVG:

  • Внедрение фрагментов SVG в HTML5 без использования внешних объектов (т. е. простое включение тега <svg> в код HTML)
  • Формат SVG как полный тип документа (файл с расширением SVG)
  • Формат SVG в коде XML или XHTML (подобно методу HTML5, только для файлов XML или XHTML)
  • SVG как изображение CSS
  • Формат SVG с использованием элемента object, как в следующем примере (обратите внимание на атрибуты type, height и width):
    <object data="rect2.svg" width="100%" height="400px"
        type="image/svg+xml"></object>

  • Формат SVG с использованием элементов img, embed, iframe или frame, как в следующем примере:
    <embed id="Smiley" src="smiley.svg" type="image/svg+xml">

Дополнительные сведения о поддержке SVG в Internet Explorer 9 см. на сайте MSDN.

Дополнительные сведения о формате SVG см. на странице справочных материалов по элементу svg на сайте MSDN.

Основные фигуры

В Internet Explorer 9 появилась поддержка анализа и отображения всех элементов основных фигур, их атрибутов и связанных интерфейсов DOM, согласно определению в модуле основных фигур спецификации SVG 1.1 (второе издание). Набор основных фигур, поддерживаемых браузером Internet Explorer 9, состоит из следующих элементов:

Браузер Internet Explorer 9 также поддерживает интерфейсы DOM, связанные с этими элементами.

Ниже приведены примеры каждого из вышеупомянутых элементов фигур. После разметки представлен снимок экрана, соответствующий результату, получаемому в Internet Explorer 9.

Прямоугольники: элемент rect
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<rect fill="orange"
    stroke="black"
    width="150"
    height="75"
    x="50"
    y="25" />


</svg>

<rect fill="orange"
    stroke="black"
    width="150"
    height="100"
    x="50"
    y="25"
    rx="10"
    ry="50"/>

Дополнительные сведения см. на странице справочных материалов по элементу rect на сайте MSDN.

Круги: элемент circle
<circle fill="orange"
    stroke="black"
    stroke-width="3"
    cx="40"
    cy="25"
    r="20"/>

Дополнительные сведения см. на странице справочных материалов по элементу circle на сайте MSDN.

Эллипсы: элемент ellipse
<ellipse stroke="orange"
    cx="100"
    cy="60"
    rx="75"
    ry="50"/>

Дополнительные сведения см. на странице справочных материалов по элементу ellipse на сайте MSDN.

Прямые линии: элемент line
<!-- vertical -->
<line x1="0.7cm"
    y1="1cm"
    x2="0.7cm"
    y2="2.0cm"
    style="stroke:
    blue;"/>


<!-- diagonal -->
<line x1="30"
    y1="30"
    x2="150"
    y2="85"
    stroke="red"
    stroke-width="4"/>


<!-- horizontal -->
<line x1="50pt"
    y1="25pt"
    x2="150pt"
    y2="25pt"
    stroke="yellow"
    stroke-width="3"/>

Дополнительные сведения см. на странице справочных материалов по элементу line на сайте MSDN.

Ломаные линии: элемент polyline

"Ломаная линия" определяется в SVG как несколько соединенных прямых линий, часто формирующих "открытую" фигуру или многоугольник с одной или несколькими отсутствующими сторонами или невыпуклую фигуру.

<polyline points="15, 5, 100 8,3 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

Дополнительные сведения см. на странице справочных материалов по элементу polyline на сайте MSDN.

Многоугольники: элемент polygon

Многоугольник представляет собой замкнутую фигуру.

<polygon points="15, 5, 100 8,6 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

Дополнительные сведения см. на странице справочных материалов по элементу polygon на сайте MSDN.

Вырезка, применение маски и композиция

Internet Explorer 9 поддерживает для формата SVG вырезку, контуры вырезки, маски и непрозрачность в соответствии с определением модуля вырезки, применения масок и композиции спецификации SVG 1.1 (второе издание). (Контуры вырезки SVG обсуждаются в разделе Контуры этого документа).

Вырезка

Контур вырезки "вырезает" область, к которой может быть применен цвет, узор или изображение. Все части графического элемента, которые находятся вне контура вырезки, не подвергаются изменениям. Контуры вырезки полностью непрозрачны; часть графического элемента, которая находится вне контура вырезки, полностью невидима.

В формате SVG свойства overflow и clip устанавливают исходные контуры вырезки или фигуры, в которых содержимое будет отображаться. По умолчанию исходный контур вырезки определяется как окно просмотра SVG или прямоугольная область страницы, в которой отображается контент в формате SVG.

Элемент clipPath определяет контур вырезки. После этого на контур вырезки ссылается свойство clip-path. Свойство clip-rule применяется к графическим элементам в элементе clipPath, а атрибут clipPathUnits определяет систему координат для содержимого clipPath. Контуры вырезки могут применяться к тексту, а также к цветам, узорам и изображениям.

К функциональным возможностям вырезки можно получить доступ программно с помощью интерфейса DOM SVGClipPathElement.

Ниже приведен простой пример контура вырезки SVG.

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="100">
<clipPath id="clip1">
    <circle id="clipShape" cx="60" cy="60" r="50" />
</clipPath>
<rect x="20" y="20" width="100" height="100" fill="blue"
    clip-path="url(#clip1)" />
</svg>

В этом примере используется элемент clipPath для определения контура вырезки в форме окружности. Затем используется свойство clip-path для применения контура вырезки к прямоугольнику. В Internet Explorer 9 это приводит к следующему результату.

Применение маски

Маска аналогична контуру вырезки, за исключением того, что она полупрозрачна. Маски часто используются для наложения объектов переднего плана на текущий фон.

Элемент mask определяет маску. После этого на маску ссылается свойство mask.

Ниже приведен простой пример маски SVG.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 800 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example mask01 - three different colored circles used to mask the color of a rectangle
  </desc>
     <defs>
     <g id="circles">
            <g stroke="white" stroke-width="2" >
                <circle cx="100" cy="50" r="50" fill="rgb(255,0,0)" />
                <circle cx="50" cy="135" r="50" fill="rgb(0,255,0)" />
                <circle cx="150" cy="135" r="50" fill="rgb(0,0,255)" />
            </g>
        </g>       
        <mask id="myMask" >
            <use xlink:href="#circles" />
        </mask>
     </defs>
     <rect x="0" y="0" width="100%" height="100%" fill="purple"
          mask="url(#myMask)" />
</svg>

В этом примере используется свойство mask для определения маски в форме трех смежных кругов разного цвета. Затем используется свойство mask для применения маски к фиолетовому прямоугольнику. В Internet Explorer 9 это приводит к следующему результату.

Системы координат, преобразования и единицы измерения

В Internet Explorer 9 введена поддержка систем координат преобразований и единиц измерения для формата SVG в соответствии с определением в модуле систем координат, преобразований и единиц измерения рабочего проекта спецификации SVG 1.1 (второе издание). Internet Explorer 9 поддерживает следующие функциональные возможности:

  • Единицы измерения и проценты.
  • Произвольные преобразования любого элемента и атрибут transform.
  • Свойства viewBox и preserveAspectRatio (включая взаимодействие со свойством overflow).
  • Поддержка типов преобразования и списка преобразований.

Internet Explorer 9 также поддерживает интерфейсы DOM, связанные с системами координат и преобразованиями SVG.

Структура документа

В Internet Explorer 9 введена поддержка базовой структуры документа SVG, метаданных и функций расширяемости в соответствии с определениями в модулях структуры документа, метаданных и расширяемости спецификации SVG 1.1 (второе издание). Internet Explorer 9 поддерживает следующие элементы:

Браузер Internet Explorer 9 также поддерживает интерфейсы DOM, связанные с этими элементами.

Градиенты и узоры

SVG предоставляет возможность закраски или заштриховки фигур и текста с помощью цвета, градиентов или узоров. Internet Explorer 9 поддерживает градиенты и узоры, определенные в модуле градиентов и узоров спецификации SVG 1.1 (второе издание).

Градиенты

Поддержка градиента обеспечивается элементами ( linearGradient и radialGradient) и атрибутами ( gradientUnits и gradientTransform) градиента. Цвета градиента определяются элементом stop. Элементы градиента можно использовать в свойствах fill и stroke фигур SVG. Например, рассмотрим следующую разметку:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="MyGradient">
        <stop offset="10%" stop-color="yellow" />
        <stop offset="90%" stop-color="blue" />
      </linearGradient>
    </defs>

    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" 
          x="20" y="20" width="300" height="100"/>
</svg>

Эта разметка определяет прямоугольник с линейным градиентом. Два элемента stop задают цвета останова вдоль вектора цветовых переходов — желтый на точке 10 % и синий на точке 90 %. В Internet Explorer 9 это приводит к следующему результату:

Узоры

Поддержка узоров обеспечивается элементом pattern и его атрибутами. Аналогично градиентам, элементы узора можно использовать в свойствах fill и stroke фигур SVG. Например, рассмотрим следующую разметку.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="mycircleandsquare" patternUnits="userSpaceOnUse"
        x="0" y="0" width="150" height="100">
      <circle cx="50" cy="50" r="10" fill="yellow" stroke="blue"
        />
      <rect x="100" y="0" width="50" height="50" fill="blue"   
        stroke="yellow" />
    </pattern>
  </defs>
  <ellipse fill="url(#mycircleandsquare)" stroke="black"
     stroke-width="5" cx="400" cy="200" rx="350" ry="150" />
</svg>

В этом примере элемент pattern определяет узор, который состоит из чередующихся маленьких синих квадратов и желтых кругов. Затем для заполнения узором задается эллипс. На следующем изображении показано, как это отображается в Internet Explorer 9.

Интерактивность

Контент в формате SVG может быть интерактивным, т. е. может изменяться в ответ на ввод пользователя. Internet Explorer 9 поддерживает компоненты интерактивности SVG, определенные в модуле интерактивности спецификации SVG 1.1 (второе издание), в том числе:

Internet Explorer 9 также поддерживает интерфейс DOM SVGCursorElement модуля интерактивности.

Кроме того, Internet Explorer 9 поддерживает атрибут focusable, определенный в модуле интерактивности спецификации SVG Tiny 1.2

В следующей разметке показан очень простой практический пример интерактивности SVG.

<svg xmlns=http://www.w3.org/2000/svg
    xmlns:xlink="http://www.w3.org/1999/xlink" width="600"
    height="600">
  <script type="text/ecmascript">
    <![CDATA[

           // объект, представляющий круг
           var redcircle;

           // переменная, представляющая радиус круга
           var r;
    
           window.onload = function() {
                redcircle = document.getElementById('redcircle');
            r = parseInt(redcircle.getAttribute("r"));
           }
    
           var grow = function() {
            r = 2*r;
                redcircle.setAttribute("r",r);
           }

           var shrink = function() {
            r = r/2;
                redcircle.setAttribute("r",r);
           }
     
    ]]>
  </script>
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
        onmousedown="grow()" onmouseup="shrink()"/>
</svg>

После загрузки этого фрагмента отображается маленький красный круг.

Если щелкнуть этот круг, он увеличится в два раза.

Такого же эффекта можно добиться с помощью событий mouseover и mouseout, которые заставляют круг увеличиваться и уменьшаться просто при наведении и удалении курсора.

...
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
    onmouseover="grow()" onmouseout="shrink()"/>
...

Ссылки и представления

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

Internet Explorer 9 поддерживает ссылки и представления SVG, определенные в модуле ссылок спецификации SVG 1.1 (второе издание). Это относится и к поддержке элементов a и view.

Также поддерживаются интерфейсы DOM SVGAElement и SVGViewElement, связанные с модулем ссылок.

Ссылки

Как и в HTML, элемент a используется для создания гиперссылки в SVG. Например, следующая разметка предоставляет гиперссылку на прямоугольник.

<svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

<a xlink:href="http://www.bing.com" target="_blank">
    <rect x="20" y="20" width="250" height="250"/>
</a>

</svg>
Представления

Представления можно использовать, чтобы указать браузеру конкретный способ отображения изображения в формате SVG. Например, следующая разметка определяет ссылку на представление.

...
<a xlink:href="#rect-view">
    <text x="320" y="70" style="fill:red">Go to Rectangle</text>
</a>
<view id="rect-view" viewBox="280 245 135 85" />
<rect id="rect-object" style="fill:red" x="280" y="245"
  width="135" height="85"/>
...

В этом примере представление rect-view определено как viewBox с заданными координатами. При переходе по ссылке (текст "Go to Rectangle") отображается rect-view представление, которое воспроизводит красный прямоугольник.

Следующая разметка определяет другую ссылку на представление.

...
<a xlink:href="#circle-view">
    <text x="250" y="70" style="fill:blue">Go to Circle</text>
</a>
<view id="circle-view" viewBox="5 36 128 115"
  preserveAspectRatio="none"/>
<circle id="circle-object" style="fill:blue" cx="70" cy="85"
  r="45"/>
...

В этом примере представление circle-view имеет атрибут preserveAspectRatio, установленный в значение none. Это означает, что хотя фигура и является кругом, она не будет равномерно масштабироваться, чтобы заполнить заданный прямоугольник viewBox при вызове представления. Вместо этого она будет растягиваться неравномерно, чтобы ограничивающая ее рамка точно совпадала с прямоугольником viewBox. Эта разметка отображается в Internet Explorer 9 после выполнения первой загрузки страницы следующим образом.

При щелчке ссылки "Go to Circle" вызывается представление circle-view и круг растягивается, заполняя прямоугольник viewBox. Это приводит к отображению эллипса.

Закраска и цвет

Закраска и цвет являются важными компонентами SVG. Концепция закраски охватывает заливки (сплошной цвет, градиенты, узоры), штрихи (линии, нарисованные вдоль контура) и символы маркера (применяются к концам сегментов линии, например стрелки), а также может включать непрозрачность. Заливки и штрихи могут применяться к контурам, тексту и фигурам.

В браузере Internet Explorer 9 введена поддержка закраски и цвета SVG, определенных в модуле закраски (заливка, штриховка и символы маркера) и в модуле цвета спецификации SVG 1.1 (второе издание). Это включает поддержку следующих элементов:

Также поддерживаются интерфейсы DOM SVGPaint и SVGMarkerElement, связанные с модулем раскраски.

Несколько примеров заливок и штрихов в SVG включены в раздел Контуры этого документа.

Контуры

Контуры SVG — это контуры фигур. Они могут быть заполнены, заштрихованы (линиями, нарисованными вдоль контура) или могут использоваться как контуры вырезки (контуры других фигур).

В Internet Explorer 9 введена поддержка контуров SVG, определенных в модуле контуров спецификации SVG 1.1 (второе издание). Она включает поддержку элемента path и свойства d, которые позволяют анализировать данные контуров.

Также поддерживаются интерфейсы DOM, связанные с модулем контуров.

Элемент path позволяет разработчику реализовать множество различных сценариев. Ниже приведено несколько простых примеров. После разметки представлен снимок экрана, соответствующий результату, получаемому в Internet Explorer 9.

Замкнутая фигура из прямых линий и с заливкой
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

<path d="M 20 20 L 60 20 L 40 60 z"
   fill="green"
    fill-opacity="0.5"
    stroke="red"
    stroke-width="3" />

</svg>

Траектория Безье (второго порядка)
<path d="M20,30 Q40,50 60,30 T100,30"
   fill="none"
    stroke="red"
    stroke-opacity="0.2"
    stroke-width="3" />

Линия с дугой
<path d="M30,60 l 50,0 a25,45 0 0,1 50,0 l 50,0"
    fill="green"
    stroke="blue"
    stroke-width="4" />

Текст

Документы в формате SVG могут содержать текст. Текст отображается точно так же, как и остальные графические элементы в формате SVG, что позволяет применять к нему преобразования системы координат, закраску, вырезку и маски.

Internet Explorer 9 поддерживает отображение текста, определенное в модуле текста спецификации SVG 1.1 (второе издание).

Элемент text задает символы, которые должны быть нарисованы. Так как в SVG автоматический разрыв строк или перенос слов не поддерживается, разрывы строк следует определить заранее. Для настройки свойств текста (например, шрифта, насыщенности, цвета, кернинга и др.) в строке текста, в SVG предоставляется элемент tspan.

Internet Explorer 9 также поддерживает интерфейсы DOM, связанные с модулем текста.

Новые средства для веб-разработчиков

В этом разделе сначала описываются закрепленные сайты — новый способ укрепления связи между веб-сайтом и его пользователями. После этого описывается новый способ назначения версий в Internet Explorer 9, который помогает решать проблемы совместимости при миграции на новую версию Internet Explorer. Затем описываются улучшения средств разработчика, которые впервые были встроены непосредственно в браузер в версии Internet Explorer 8.

Закрепленные сайты

Использование закрепленных сайтов позволяет сделать процесс взаимодействия с ними пользователей еще более увлекательным. Закрепленные сайты – это новый набор средств, в которых используется улучшенный пользовательский интерфейс, в том числе более крупный значок избранного, кнопки "Назад" и "Вперед", а также другие элементы интерфейса, оформленные в одном стиле с использованием символики сайта. Интеграция с Windows 7 обеспечивает новый подход к работе с веб-сайтами разработчиков за счет использования интерфейсов Windows API для создания списков переходов, панелей эскизов и уведомлений. (Закрепленные сайты поддерживаются только на панели задач Windows 7.)

Закрепление сайтов в панели задач

Для закрепления сайта в панели задач можно воспользоваться любым из следующих способов.

  • Перетащите вкладку в панель задач
  • Перетащите значок избранного из адресной строки в панель задач
  • Перетащите пользовательское изображение с классом "msPinSite" (изображение, перетаскиваемое для закрепления) в панель задач

После закрепления сайт отображается с пользовательскими настройками. Например, кнопки "Вперед" и "Назад" приобретают цвет, соответствующий цветовой схеме веб-сайта. Сайты также можно закреплять в меню Пуск.

Списки переходов

Задачи списков переходов – это действия, связанные с конкретными приложениями и настроенные для работы с закрепленными веб-сайтами. В их основе лежит та же функция, что используется для приложений Windows 7. Благодаря задачам списков переходов пользователь видит на сайте наиболее часто используемые команды. Эти задачи можно настроить с учетом как отличительных особенностей веб-сайта, так и тех действий, которые пользователи предположительно будут выполнять чаще всего. Задачи списков переходов предоставляют ряд статических ссылок, которыми можно воспользоваться в любой момент, даже если браузер Internet Explorer не запущен. Дополнительные сведения о задачах списков переходов см. в статье Создание динамических списков переходов на сайте MSDN.

Панели эскизов

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

Уведомления

Так же, как и приложения в Windows 7, закрепленные сайты могут предоставлять пользователю различные уведомления и сведения о состоянии путем отображения дополнительного значка поверх кнопки сайта в панели задач. Эти значки служат для привлечения внимания к веб-сайту, когда окно этого сайта заблокировано (например, свернуто или закрыто другим окном). Дополнительные значки можно использовать для предоставления уведомлений либо важных сведений о состоянии сети, подключениях, поступлении новых писем и т. д. Дополнительные сведения об уведомлениях см. в статье Предоставление уведомлений на сайте MSDN.

Обнаружение закрепленных сайтов

Internet Explorer 9 не предупредит пользователя о возможности закрепления сайта. Обязанность сообщить о таких возможностях ложится на разработчика. Существует много способов уведомления пользователей вашего веб-сайта о функциях закрепленных сайтов, например влет, разворачивающиеся элементы, заголовки и эффекты, создаваемые элементом div, а также значки и изображения, перетаскиваемые для закрепления, и создание процесса первого запуска, который позволяет рассказать о возможностях закрепленного сайта, когда пользователь прикрепляет этот сайт в первый раз. Дополнительные сведения о возможности обнаружения см. в статье Способы улучшения возможности обнаружения на сайте MSDN.

Инструкции и примеры кода для закрепленных сайтов см. в центре разработчика закрепленных сайтов на сайте MSDN.

Демонстрацию закрепленных сайтов см. на сайте тестового выпуска Internet Explorer 9.

Управление версиями платформы

В Internet Explorer 8 были введены режимы совместимости документов, которые являются расширением режима совместимости, впервые появившегося в Microsoft Internet Explorer 6. Режимы документов позволяют выбрать определенный режим отображения, который Internet Explorer использует для отображения веб-страниц; они подробно описаны в статье, посвященной определению совместимости документов на сайте MSDN.

Новый режим документов

В Internet Explorer 9 добавлен новый режим документов — стандартный режим Internet Explorer 9 ("режим IE9"), — который позволяет максимальным образом повысить производительность, масштабируется для обработки требований современных веб-приложений и реализует поддержку последних стандартов.

В Internet Explorer 9 режим IE9 используется по умолчанию, если только другие настройки не указаны на загружаемой странице или не заданы веб-сервером.

Самый лучший способ убедиться, что Internet Explorer 9 отображает страницу в режиме документов последней версии, – использовать стандартную директиву !DOCTYPE и не использовать совместимый с X-UA тег meta или заголовок HTTP. Директива !DOCTYPE для вызова стандартного режима IE9 выглядит следующим образом.

<!DOCTYPE html>

Конечно, можно воспользоваться директивой !DOCTYPE и тегом meta, совместимым с X-UA, или заголовком HTTP, чтобы изменить значение по умолчанию при наличии соответствия.

Чтобы определить текущий режим документа, нажмите клавишу F12, чтобы открыть средства разработчика F12 Internet Explorer, и посмотрите на правую часть строки меню. Чтобы переопределить режим документа, в меню Режим документов выберите Стандарты Internet Explorer 9.

Строка агента пользователя

Строка агента пользователя идентифицирует браузер для серверов узлов и предоставляет определенные подробные сведения о системе. (Дополнительные сведения о строках агента пользователя см. в статье, посвященной основным сведениям о строках агента пользователя на сайте MSDN.) Internet Explorer 9 отличается от предыдущих версий Internet Explorer тем, что отправляет короткую строку агента пользователя по умолчанию. Это изменение улучшает общую производительность, возможности взаимодействия и совместимость. Internet Explorer 9 больше не будет отправлять дополнения к строке агента пользователя, созданные другим программным обеспечением, установленным на компьютере пользователя, например .NET и т. п.

Internet Explorer 9 отправляет новую строку агента пользователя Internet Explorer 9. Существует четыре изменения строки агента пользователя Internet Explorer 8, о которых должны знать разработчики:

  1. Версия приложения увеличена с "Mozilla/4.0" до "Mozilla/5.0" для соответствия другим браузерам. Это изменение сигнализирует о том, что Internet Explorer 9 имеет возможность взаимодействовать с другими браузерами.
  2. Маркер версии увеличен с "MSIE 8.0" до "MSIE 9.0".
  3. Маркер Trident увеличен с "Trident/4.0" до "Trident/5.0".
  4. Internet Explorer 9 будет отправлять следующую короткую строку агента пользователя без дополнений, созданных другим программным обеспечением, установленным на компьютере:

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

Представление совместимости в Internet Explorer 9 сопоставляется со стандартным режимом IE7, как и в Internet Explorer 8. (Дополнительные сведения о представлении совместимости см. в статье, посвященной общим сведениям о списке представлений совместимости на сайте MSDN). В режиме представления совместимости Internet Explorer 9 отправляет следующую строку агента пользователя:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)

Дополнительные сведения о новой строке агента пользователя для браузера Internet Explorer 9 см. в записи блога группы разработчиков Internet Explorer, посвященной общим сведениям о строке агента пользователя IE9.

Средства разработчика F12

Чтобы получить доступ к средствам разработчика F12 в Internet Explorer 9, нажмите клавишу F12 либо в меню Сервис выберите пункт Средства разработчика F12. Если вы использовали средства разработчика в Internet Explorer 8, то сразу же заметите улучшения в производительности.

Вкладка "Консоль"

В средствах разработчика F12 браузера Internet Explorer 9 появилась вкладка Консоль для отображения событий скриптов. При проверке скрипта отображается несколько выключателей: "Ошибка", "Предупреждение" и "Сообщение". На каждой кнопке отображается число сообщений соответствующего типа.

Вкладка "Сеть"

В средства разработчика Internet Explorer 9 добавлено средство проверки сети. Для доступа к этому средству следует щелкнуть вкладку Сеть. Вкладка позволяет выполнять следующие действия:

  • Захватывать сетевой трафик HTTP и HTTPS.
  • Отображать (и сохранять) содержимое захваченных запросов и ответов.
  • Отображать дополнительные сведения о захваченных данных, например сведения о файлах Cookie, размерах, времени ожидания и кэше.

Средство переключения агента пользователя

С помощью нового средства переключения агента пользователя можно изменять строку агента пользователя, которая идентифицирует тип и версию браузера для веб-сервера. (Дополнительные сведения о новой строке агента пользователя в Internet Explorer 9 см. в разделе Строка агента пользователя этого документа). Выбранная строка агента пользователя будет отправляться по сети в качестве заголовка в каждом запросе. Чтобы изменить строку агента пользователя браузера, в меню средств разработчика Сервис укажите пункт Изменить строку агента пользователя и выберите браузер, строку агента пользователя которого вы хотите отправлять.

Определение реальной производительности

С помощью средств разработчика F12 браузера Internet Explorer 9 можно оценить еще больше характеристик производительности веб-сайта, чем в предыдущих версиях Internet Explorer. Однако вы не сможете измерить фактический уровень производительность, который будет достигнут пользователем при работе с браузером. Для решения этой проблемы на некоторых сайтах разрабатываются собственные библиотеки, которые пытаются определять динамическую производительность веб-страниц, но это может вносить дополнительную нагрузку, фактически замедляя загрузку страниц для пользователей. Мы считаем, что спецификация WebTiming консорциума W3C, которая на момент написания этого документа находится на стадии рабочего проекта, является хорошей концептуальной основой для достоверного решения этой проблемы. Доступ к функциональности WebTiming можно получить в Internet Explorer 9 с помощью интерфейса window.msPerformance в модели DOM. Разработчики также могут включить отладку скрипта в средствах разработчика, а затем обратиться к объекту window.msPerformance.

Чтобы просмотреть демонстрацию практического использования объекта window.msPerformance, посетите сайт тестового выпуска Internet Explorer.

Журнал изменений

16 марта 2010 года: создание предварительной версии платформы Internet Explorer.

15 апреля 2010 года: обновление следующих сведений:

  • Поддержка модуля пространств имен CSS3
  • Поддержка дополнительных селекторов CSS3
  • Дополнительные сведения о поддержке модели DOM
  • Дополнительные сведения о поддержке формата SVG, включая ограничения возможностей внедрения
  • Поддержка цветовых профилей ICC

5 мая 2010 года: обновление предварительной версии платформы Internet Explorer до сборки 2, а также обновление следующих сведений:

  • Дополнительные сведения о поддержке модели DOM
  • Новые возможности модели DOM:
    • Новые API ядра модели DOM
    • Поддержка HTML в модели DOM
    • Обход в модели DOM
    • Новые события в модели DOM L3:
      • Событие DOMAttrModified
      • Событие DOMContentLoaded
      • События композиции
  • Новая строка агента пользователя
  • Изменения в URI-кодах данных
  • Дополнительные средства разработчика: Вкладка Консоль и средство переключения агента пользователя

23 июня 2010 года: обновление предварительной версии платформы Internet Explorer до сборки 3, а также обновление следующих сведений:

  • Новые компоненты CSS3:
    • Новые элементы фона и границы
    • Цветовые модели HSL и HSLA
    • Поддержка шрифтов CSS3
    • Поддержка модуля значений и единиц измерения CSS3
    • Новые значения свойства display
  • Поддержка нового обхода элементов модели DOM
  • Новые элементы HTML5:
    • Элементы video, audio и canvas
    • Интерфейс Selection
  • Поддержка нового API селекторов второго уровня:
    • Метод matchesSelector
  • Новые элементы формата SVG:
    • Вырезка, применение маски и композиция
    • Градиенты и узоры
    • Интерактивность
    • Ссылки и представления
    • Закраска и цвет
    • Текст

4 августа 2010 года: обновление предварительной версии платформы Internet Explorer до сборки 4, а также обновление следующих сведений:

  • "Chakra", новый обработчик JavaScript
  • Расширенные возможности модели DOM
  • Новая поддержка спецификации WebIDL
  • Объект window.msPerformance
  • В раздел canvas добавлены ссылки на примеры

15 сентября 2010 года: обновление до бета-версии Internet Explorer 9, добавление новых ссылок и следующих сведений:

  • Интерфейсы DOMParser и XMLSerializer
  • Закрепленные сайты

28 октября 2010 года: обновление предварительной версии платформы Internet Explorer до сборки 6, а также обновление следующих сведений:

  • Двумерные преобразования CSS
  • Семантические элементы HTML5
  • Исправленный номер версии поддерживаемых цветовых профилей ICC

10 февраля 2011 года:обновление для версии-кандидата Internet Explorer, добавление следующих сведений:

  • HTML5 - географическое расположение
  • Закрепленные сайты (обновлено)
  • Режим совместимости (обновлено)
  • Другие различные исправления документа

18 февраля 2011 года: обновление с добавлением следующих сведений:

  • Закрепленные сайты
  • Canvas в HTML5

14 марта 2011 года: обновление для версии Internet Explorer 9 (RTW):

  • обновленный текст версии
  • ECMAScript 5 (добавлены ссылки)