Internet Explorer 10: руководство для разработчиков
13 сентября 2011 г.
Internet Explorer 10, так же как и приложения Metro в Windows Developer Preview, поддерживает несколько новых возможностей каскадных таблиц стилей (CSS). Начало этой поддержке было положено в Internet Explorer 8 (полное соответствие стандарту CSS 2.1), а с выходом Internet Explorer 9 поддержка была расширена (поддержка закругленных углов CSS, нескольких фоновых изображений, новых цветовых моделей и непрозрачности, шрифтов CSS 3 и WOFF, 2D-преобразований, запросов носителя, пространств имен CSS 3 и многого другого). Internet Explorer 10 продолжает эту традицию: в новой версии впервые реализована поддержка следующих возможностей CSS.
Важно. Эти возможности аналогичным образом работают в Internet Explorer 10 и приложениях Metro с использованием HTML. Расширенная разметкаВ Internet Explorer 10 и в Windows Developer Preview реализовано несколько новых способов разметки веб-страниц и приложений Metro с помощью CSS. Вот эти способы:
Области CSSОбласти CSS — это функция макетов страниц в приложениях Metro в составе Windows Developer Preview и в Internet Explorer 10. При помощи этой функции можно взять один поток HTML-содержимого с текстом и рисунками и направить это содержимое в несколько пустых контейнеров, определенных в стандартном HTML-шаблоне. HTML-шаблоны представляют собой документы, обычно не имеющие содержимого и состоящие из определенным образом расположенных пустых контейнеров определенного размера, в которых отображается поступающее содержимое. Это дает возможность структурировать поток содержимого в многостраничную разметку, более подходящую, к примеру, для чтения с планшетных ПК. При помощи областей CSS можно разрабатывать внутри одной страницы сложную разметку, аналогичную разметке журналов и газет, где несколько областей с одним потоком содержимого (текста, сопровождающих его иллюстраций или видеозаписей) располагаются вокруг независимых от этого потока элементов, таких как другие сообщения и рекламные материалы. Кроме того, при использовании областей CSS можно делать так, чтобы содержимое, отображаемое в контейнере, принимало стиль этого контейнера, даже если он не зависит от форматирования исходного содержимого. Области CSS определяются спецификацией областей CSS консорциума W3C, которая в данный момент находится в состоянии рабочего черновика. Демонстрацию использования областей CSS см. в разделе Hands On: CSS 3 Regions на сайте IE Test Drive. Реализация областей CSS Для реализации областей CSS прежде всего нужен файл HTML, который будет служить потоком содержимого. Это автономный HTML-документ, содержащий собственную модель DOM и стили CSS. На следующей схеме роль потока содержимого играет файл content.html. Кроме того, нужен HTML-документ, который будет служить основой для потока содержимого. Этот документ, также называемый главной страницей, служит для указания размера и расположения областей CSS, а также для определения порядка отображения содержимого на базе идентификатора потока. На следующей схеме роль главной страницы играет файл master.html.
Когда главная страница будет полностью отображена, она будет содержать подключенные области, внутри которых будет находиться содержимое потоков. Следует помнить, что такая фрагментация служит только для представления данных, она не влияет на структуру DOM документа с потоком содержимого. Создание источника данных Два новых свойства CSS требуются при использовании областей CSS, чтобы обеспечить поступление содержимого из источника данных в одну рамку, затем в другую и т. д. Для того чтобы описать последовательность отображения содержимого, требуется источник данных и идентификатор. Сначала нужно поместить источник данных в элемент iframe для загрузки в отдельном HTML-документе. На главной странице нужно создать элемент iframe с уникальным идентификатором: <iframe id="flow1-data-source" src="content-source.html" /> Затем нужно создать селектор CSS, указывающий источник данных при помощи свойства -ms-flow-into: #flow1-data-source Помните, что если поместить свойство -ms-flow-into в элемент iframe, этот элемент будет работать так, как если бы для свойства display было указано значение none. Этот элемент iframe не отображается и не участвует во фрагментации и разметке содержимого. Цель этого элемента заключается лишь в идентификации источника данных. Создание контейнера области CSS В качестве контейнера области CSS можно использовать любой незаменяемый элемент, однако чаще всего для этой цели используются элементы div. Чтобы создать контейнер областей CSS, сначала нужно на главной странице назначить элементам, которые предполагается использовать в качестве контейнеров, уникальное имя класса, например: <div class="flow1-container"></div> Затем нужно создать селектор CSS, указывающий источник данных, откуда следует принимать поток содержимого, при помощи свойства -ms-flow-from: .flow1-container Содержимое в элементах, обозначенных как контейнеры областей CSS, будет отображаться в порядке DOM на главной странице. Если области статически определены, содержимое будет фрагментироваться по заданным элементам контейнеров в DOM. Расширение областей CSS Можно использовать независимые от исходной последовательности функции разметки, чтобы создавать более сложные варианты разметки. Например, можно использовать новую функцию выравнивания по сетке для создания комплексной тянущейся разметки. Рассмотрим следующий пример: <!DOCTYPE html> Последовательность содержимого будет соответствовать приведенной ниже схеме. Стрелки указывают направление потока содержимого.
Теперь поменяем порядок следования двух первых рамок и двух последних рамок: <iframe id="data-source" src="content-source.html" /> Поток будет изменен согласно следующей схеме:
Это позволяет изменять наглядную компоновку страницы без существенного изменения разметки шаблона и без нарушения DOM исходного содержимого. Прочие сценарии использования областей CSS В дополнение к двум приведенным выше случаям области CSS полезно применять еще в ряде сценариев:
Документация по каждому из этих сценариев будет выпущена в ближайшем будущем. Многоколоночная верстка CSS 3Internet Explorer 10, так же как и приложения Metro в Windows Developer Preview, поддерживает модуль многоколоночной верстки CSS 3. На момент написания этого документа данный модуль находится на стадии кандидата в рекомендации W3C. Многоколоночная верстка позволяет отображать содержимое в несколько колонок с заданным межколоночным интервалом и необязательной разделительной линией. Она также позволяет изменять число колонок, основываясь на размере окна браузера. Многоколоночный элемент определяется W3C как элемент, свойства column-width или column-count которого имеют значения, отличные от «auto», и который поэтому служит контейнером для многоколоночного макета. В многоколоночной верстке вводится колоночный блок, который определяется как новый тип контейнера, располагающийся между блоком содержимого и самим содержимым. Колоночные блоки содержат строки, упорядоченные в направлении многоколоночного элемента. Для каждого колоночного блока заданы высота колонки и ширина колонки. Соседние блоки отделены друг от друга межколоночным интервалом, который может содержать разделительную линию. Демонстрацию многоколоночной верстки CSS 3 см. в разделе Hands On: Multi-column Layout на сайте IE Test Drive. Задание ширины и числа колонок Для колонок в многоколоночном элементе необходимо задать по крайней мере ширину. В окне браузера Internet Explorer Platform Preview будет отображено максимально возможное число колонок шириной не менее заданной. Чтобы задать ширину колонки, используйте следующее свойство:
Например, в приведенном ниже селекторе добавлено свойство column-width со значением, равным 200 пикселей. Это означает, что окно браузера Internet Explorer 10 будет заполнено максимально возможным количеством колонок шириной 200 пикселей или более. <style type="text/css"> Можно увидеть результат применения этого селектора к большому фрагменту текста. (Для правильного отображения этой страницы требуется Internet Explorer 10 или другой браузер, совместимый со свойствами многоколоночной разметки CSS 3 без префиксов.) Можно также указать, сколько колонок должно быть в многоколоночном элементе. Чтобы задать количество колонок, используйте следующее свойство:
Например, в приведенном ниже селекторе добавлено свойство column-count со значением «2». Это означает, что в окне Internet Explorer 10 будет две колонки. <style type="text/css"> Можно увидеть результат применения этого селектора к большому фрагменту текста. (Для правильного отображения этой страницы требуется Internet Explorer 10 или другой браузер, совместимый со свойствами многоколоночной разметки CSS 3 без префиксов.) Ширину и число колонок можно также задать с помощью следующего собирательного свойства:
columns: <column-width> <column-count >; Допускается также следующий синтаксис: columns: <column-count> <column-width>; Если указано только целое число, свойство column-width устанавливается равным «auto», а за значение свойства column-count принимается указанное число. Если указано только значение ширины, свойство column-width устанавливается равным этому значению, а за значение свойства column-count принимается ключевое слово «auto». Если указано только «auto», это ключевое слово используется в качестве значения свойств column-width и column-count. Например, в приведенном ниже селекторе добавлено свойство columns со значением «auto 12em». Это означает, что многоколоночный элемент будет иметь свойство column-width со значением «12 em» и свойство column-count со значением «auto». <style type="text/css"> Можно увидеть результат применения этого селектора к большому фрагменту текста. (Для правильного отображения этой страницы требуется Internet Explorer 10 или другой браузер, совместимый со свойствами многоколоночной разметки CSS 3 без префиксов.) Задание межколоночного интервала и разделительной линии Колонки многоколоночного элемента отделяются друг от друга по всей его длине интервалами и разделительными линиями. Межколоночные интервалы упрощают чтение, оставляя свободное пространство между колонками. Разделительная линия отображается в середине межколоночного интервала и присутствует только в том случае, если обе колонки имеют содержимое. Межколоночный интервал и разделительная линия задаются с помощью следующего свойства:
column-rule: <column-rule-width> <column-rule-style> <column-rule-color>; Вот пример использования нескольких из этих свойств в селекторе: <style type="text/css"> В данном случае межколоночный интервал и толщина разделительной линии установлены равными 1 em. Разделительная линия сплошная, черного цвета. Можно увидеть результат применения этого селектора к большому фрагменту текста. (Для правильного отображения этой страницы требуется Internet Explorer 10 или другой браузер, совместимый со свойствами многоколоночной разметки CSS 3 без префиксов.) Обратите внимание, что предыдущий пример можно было бы также записать следующим образом, используя собирательное свойство column-rule: <style type="text/css"> Разрывы колонок Для содержимого можно задавать место начала новой колонки. Тем самым можно предотвратить разрыв содержимого в середине абзаца, раздела и т. д. Разрывы колонок действуют аналогично разрывам страниц при печати, и ими можно управлять с помощью CSS сходным образом. Разрывами колонок управляют следующие свойства:
Вот пример использования нескольких из этих свойств в селекторе: <style type="text/css"> В этом примере все элементы h2 предваряются разрывом колонки и полем размером 2 em, а разрывы колонок внутри элемента blockquote запрещены. Можно увидеть результат применения этих селекторов к большому фрагменту текста. (Для правильного отображения этой страницы требуется Internet Explorer 10 или другой браузер, совместимый со свойствами многоколоночной разметки CSS 3 без префиксов.) Многоколоночное содержимое Можно создавать блоки содержимого, занимающие несколько колонок. Элемент, который занимает несколько колонок, функционирует, по сути, как разрыв между содержимым до и после данного элемента. Многоколоночные элементы определяются следующими свойствами:
Вот пример установки этого свойства в селекторе: <style type="text/css"> В данном случае все элементы h2 занимают все колонки и отображаются на светло-зеленом фоне. Можно увидеть результат применения этих селекторов к большому фрагменту текста. (Для правильного отображения этой страницы требуется Internet Explorer 10 или другой браузер, совместимый со свойствами многоколоночной разметки CSS 3 без префиксов.) Заполнение колонок Можно указать, следует ли выравнивать содержимое в колонках — то есть сводить к минимуму различия в длине колонок. В противном случае колонки будут заполняться последовательно и могут иметь разную длину содержимого. Заполнением колонок управляет следующее свойство:
Балансировка колонок зависит также от значений свойств orphans и widows, если они установлены. Вот пример установки этого свойства в селекторе: <style type="text/css"> В данном случае для свойства column-fill установлено значение «balance». Это значит, что длина колонок выравнивается в максимальной степени. Можно увидеть результат применения этих селекторов к большому фрагменту текста. (Для правильного отображения этой страницы требуется Internet Explorer 10 или другой браузер, совместимый со свойствами многоколоночной разметки CSS 3 без префиксов.) Верстка с использованием гибких блоков CSS 3 (Flexbox)Internet Explorer 10, так же как и приложения Metro в Windows Developer Preview, поддерживает модуль верстки гибких блоков (Flexbox) CSS 3. На момент написания этого документа модуль Flexbox находится на стадии рабочего черновика консорциума W3C. (Реализация Flexbox в Internet Explorer 10 основана на версии рабочего проекта от 23 июля 2009 г. Реализация Flexbox в будущих предварительных выпусках может измениться в соответствии с изменениями в спецификации.) Модуль дополняет собой четыре основных режима верстки, определенные в CSS 2.1 и включаемые через свойство display, — верстку блоков, строчную верстку, табличную верстку и верстку с расположением. Верстка с использованием гибких блоков предназначена для более сложных веб-страниц и наиболее полезна для неизменной разметки относительного положения и размера элементов несмотря на то, что размеры экрана могут быть разными, а размеры окна браузера могут изменяться. Она позволяет в меньшей степени полагаться на плавающие элементы, положение и размер которых труднее задать правильно. Когда применяется верстка с использованием гибких блоков, при определении размеров блока учитывается все доступное пространство, что позволяет задавать относительные размеры и положение. Можно, например, добиться того, чтобы оставшееся пустое пространство в окне браузера равномерно распределялось по нескольким дочерним элементам, которые при этом располагались бы по центру содержащего их блока. Верстка с использованием гибких блоков позволяет решать следующие задачи:
Демонстрацию верстки с использованием гибких блоков см. в разделе Hands On: CSS 3 Flexible Box Layout на сайте IE Test Drive. Контейнер Flexbox Чтобы включить режим верстки с использованием гибких блоков, необходимо сначала создать контейнер Flexbox. Для этого присвойте свойству display элемента значение «-ms-box». (Ввиду того что модуль Flexbox находится лишь на стадии рабочего проекта, для работы в Internet Explorer 10 и приложениях Metro данное значение и все свойства, описанные в этом разделе, следует указывать с фирменным префиксом Microsoft «-ms-».) Так, в следующем примере кода внутри элемента создается контейнер Flexbox с идентификатором myFlexbox: <style type="text/css"> Задание ориентации контейнера Flexbox При создании контейнера Flexbox можно задать его ориентацию, т. е. направление отображения в нем дочерних элементов (справа налево, слева направо, сверху вниз или снизу вверх). Для этого служит следующее свойство:
Например, в следующем селекторе описания элемента добавляется свойство -ms-box-orient со значением «horizontal»: <style type="text/css"> Задание выравнивания контейнера Flexbox При создании контейнера Flexbox можно также задать его выравнивание, т. е. направление, в котором будут отображаться дочерние элементы перпендикулярно оси макета, определяемой свойством -ms-box-orient.
Например, в следующем селекторе описания элемента добавляется свойство -ms-box-align со значением «before»: <style type="text/css"> Задание направления укладки дочерних элементов в контейнере Flexbox В контейнере Flexbox можно установить направление укладки дочерних элементов слева направо или справа налево, используя следующее свойство:
Например, в следующем селекторе описания элемента добавляется свойство -ms-box-direction со значением «reverse»: <style type="text/css"> Распределение пустого пространства между дочерними элементами контейнера Flexbox Можно задать способ распределения пустого пространства между дочерними элементами контейнера Flexbox, используя следующее свойство:
Например, в следующем селекторе описания элемента добавляется свойство -ms-box-pack со значением «justify»: <style type="text/css"> Включение переноса дочерних элементов Для дочерних элементов контейнера Flexbox, не помещающихся в одной строке, можно разрешить перенос на новую строку, используя следующее свойство:
Имейте в виду, что Internet Explorer 10 пытается уместить дочерние элементы родительского блока в как можно меньшее количество строк, ужимая все блоки до минимального размера. Одиночный элемент, не умещающийся в своей строке, обрезается в конце строки. По умолчанию дополнительные строки сохраняют текущее направление блока. В макетах с направлением слева направо и справа налево новые строки добавляются под имеющимися (если где-то еще не было явным образом задано направление блока сверху вниз). Точно так же место появления новых строк в вертикальном макете (справа или слева) определяется направлением блока (слева направо или справа налево, в зависимости от направления письма или других конкретных параметров). Например, в следующем селекторе описания элемента добавляется свойство -ms-box-lines со значением «multiple»: <style type="text/css"> Задание направления переноса для многострочного макета Если для дочерних элементов задан перенос на следующую строку (свойству -ms-box-lines присвоено значение «multiple»), можно задавать направление переноса, используя следующее свойство:
Например, в следующем селекторе описания элемента добавляется свойство -ms-box-line-progression со значением «reverse»: <style type="text/css"> Добавление дочерних элементов в контейнер Flexbox Теперь, когда вы создали контейнер Flexbox, можно добавлять в него дочерние элементы. Чтобы добавить дочерний элемент в контейнер Flexbox, сделайте его непосредственным потомком элемента Flexbox, как показано в следующем фрагменте кода: <style type="text/css"> Задание гибкости дочернего элемента Можно задавать способ пропорционального распределения пустого пространства между дочерними элементами вдоль оси макета родительского блока. Свойство -ms-box-flex позволяет указывать, какие из дочерних элементов являются негибкими (т. е. их размер не изменяется для заполнения всего доступного пространства в родительском элементе), а какие — гибкими (т. е. их размер можно изменить так, чтобы они заполнили все доступное пространство в родительском элементе).
Поскольку и у child3, и у child4 свойство -ms-box-flex имеет значение «0», они являются негибкими, а потому их размеры остаются неизменными. Добавляем оставшиеся значения -ms-box-flex и получаем 3. Это означает, что элементу child1 выделено 2/3 оставшегося пространства. Соответственно, элементу child2 выделена 1/3 (одна треть) оставшегося пространства. <style type="text/css"> Группировка дочерних элементов в контейнере Flexbox Дочерние элементы в контейнере Flexbox можно группировать, задавая с помощью номера группы очередность, в которой каждый элемент будет отображаться вдоль оси разметки, причем эта очередность может отличаться от той, которая задана в модели DOM. Для настройки группировки используйте следующее свойство:
Свойство -ms-box-ordinal-group позволяет помещать элементы в группы очередности, начиная с группы 1. Все дочерние элементы в каждой группе очередности отображаются вдоль указанной оси разметки до отображения любых дочерних элементов в следующей группе очередности. Поэтому все дочерние элементы из группы очередности 1 отображаются до каких-либо дочерних элементов из группы очередности 2, и так далее. Внутри групп очередности элементы отображаются в том порядке, который указан в модели DOM. По умолчанию дополнительные строки сохраняют текущее направление блока. Например, в следующем фрагменте кода определено четыре дочерних элемента и большинству из них присвоена группа очередности с использованием свойства -ms-box-ordinal-group:
Дочерние элементы child2 и child4 находятся в группе очередности 1, а дочерние элементы child1 и child3 — в группе очередности 2. Внутри каждой группы очередности дочерние элементы отображаются согласно последовательности DOM, поэтому в родительском гибком блоке эти элементы будут отображаться в следующем порядке: child2, child4, child1, child3. <style type="text/css"> Выравнивание по сетке CSS 3Модуль выравнивания по сетке CSS 3 (элемент Grid) на момент подготовки данного документа находится в состоянии рабочего черновика W3C. (Реализация выравнивания по сетке в Internet Explorer 10 и в приложениях Metro основана на версии рабочего проекта от 26 октября 2010 г. Реализация выравнивания по сетке в будущих предварительных выпусках Internet Explorer 10 и приложениях Metro может измениться в соответствии с изменениями в спецификации.) Подобно гибким блокам, сетка обеспечивает большую подвижность макета, чем плавающие элементы или сценарии. Она позволяет делить пространство под крупные области страницы или веб-приложения, а также определять взаимосвязи между размерами, местоположением и слоями различных частей элемента управления HTML. За счет этого исчезает необходимость в создании фиксированного макета, который не позволяет задействовать все доступное пространство в окне браузера. Поскольку сетка позволяет выравнивать элементы по столбцам и строкам, но не задает структуру содержимого, она делает возможными сценарии, нереализуемые при использовании HTML-таблиц. Используя сетку в сочетании с запросами носителя, вы можете обеспечить эффективную адаптацию макета к изменению типоразмера устройства, ориентации, доступного пространства и других факторов. Демонстрацию верстки с использованием выравнивания по сетке см. в разделе Hands On: CSS 3 Grid Layout на сайте IE Test Drive. Элемент Grid Основой для выравнивания по сетке служит элемент Grid, для объявления которого свойство display элемента устанавливается равным «-ms-grid». (Ввиду того что модуль выравнивания по сетке находится лишь на стадии рабочего проекта, для работы в Internet Explorer 10 и приложениях Metro данное значение и все свойства, описанные в этом разделе, следует указывать с фирменным префиксом Microsoft «-ms-».) Элементы Grid могут быть блочного или строчного уровня. Например, в следующем примере кода внутри элемента создается элемент Grid с идентификатором myGrid: <style> Дорожки (столбцы и строки) После создания элемента Grid задайте размеры его столбцов и строк, используя следующие свойства:
Можно указывать размер столбцов и строк (называемых в совокупности дорожками) с помощью стандартных единиц длины, ключевого слова «auto», ключевого слова «min-content» (указав наименьшую ширину или высоту любых дочерних элементов в качестве ширины или высоты), ключевого слова «max-content» (указав наибольшую ширину или высоту любых дочерних элементов в качестве ширины или высоты), а также дробных единиц (fr). Автоматическое определение размера дорожек (тех, для которых указано ключевое слово «auto») производится исходя из свойств элементов, находящихся на этих дорожках. Пространство под дорожки, размеры которых заданы в дробных единицах, выделяется в соответствии с этими дробными значениями. В качестве примера рассмотрим следующую расширенную версию селектора описания элемента myGrid: <style> Этот элемент Grid будет иметь четыре столбца следующего вида:
Поскольку всего в сетке имеется три дробные единицы, под столбец 3 будет выделена 1/3 (одна треть), а под столбец 4 — 2/3 (две трети) оставшегося пространства. Кроме того, данный элемент Grid будет иметь три строки следующего вида:
Элементы сетки Дочерние элементы контейнера Grid называются элементами сетки, и их положение задается следующими свойствами:
Нумерация дорожек начинается с 1, номер по умолчанию также равняется 1. Подразумевая объявленный выше элемент Grid, рассмотрим следующие два селектора описания элементов: #item1 { Применим теперь эти селекторы к следующей разметке: <div id="myGrid"> Можно просмотреть получившуюся страницу. (Для правильного отображения этой страницы необходим браузер Internet Explorer 10.)
Выравнивание элементов сетки Элементы сетки можно располагать у любого края ячеек, образованных столбцами и строками, которые занимает элемент. Для этой цели служат следующие свойства:
Изменим селектор описания элемента 2 следующим образом, добавив в конец четыре строки: #item2 { Затем добавим следующий селектор: #item3 { Применим теперь эти селекторы к следующей разметке: <div id="myGrid"> Можно просмотреть получившуюся страницу. (Для правильного отображения этой страницы необходим браузер Internet Explorer 10.)
Укладка элементов сетки друг на друга Элементы сетки можно укладывать друг на друга, просто помещая их в одни и те же столбцы или строки. По умолчанию элемент, идущий в разметке позже, будет отображен поверх элементов, встретившихся раньше. В целях демонстрации изменим селектор описания элемента 3 так, чтобы поместить его в столбец 2 и строку 2, где уже находится элемент 2: #item3 { Поскольку объект div элемента 3 указан в разметке после объекта div для элемента 2, элемент 3 будет отображен поверх элемента 2. Можно просмотреть получившуюся страницу. (Для правильного отображения этой страницы необходим браузер Internet Explorer 10.)
Чтобы изменить это поведение, установленное по умолчанию, используйте следующее свойство:
В селекторе описания элемента 3 установим свойство -ms-grid-layer равным -1, чтобы расположить этот элемент внизу стопки: #item3 { В этом случае Internet Explorer 10 отображает элемент 2 поверх элемента 3. Можно просмотреть получившуюся страницу. (Для правильного отображения этой страницы необходим браузер Internet Explorer 10). Многоячеечные элементы сетки Можно создавать элементы сетки, занимающие несколько столбцов или строк. Для этого служат следующие свойства:
В селекторе описания элемента 3 установим свойство -ms-grid-column-span равным 4, а значение свойства -ms-grid-column поменяем на «1», чтобы этот элемент занимал в ширину четыре столбца (т. е. все столбцы сетки): #item3 { Можно просмотреть получившуюся страницу. (Для правильного отображения этой страницы необходим браузер Internet Explorer 10.) Имейте в виду, что при попытке выделить для элемента сетки больше столбцов или строк, чем уже имеется в сетке (например, если в предыдущем примере оставить свойство -ms-grid-column равным 2, а свойство -ms-grid-column-span установить равным 4, число имеющихся в сетке столбцов будет превышено на 1), будет неявным образом создано недостающее количество столбцов или строк, а их ширина или высота будет определена как «auto»(подгонка под содержимое). Позиционируемые плавающие блокиПозиционируемые плавающие блоки являются новой функцией в Internet Explorer 10 и приложениях Metro. С помощью таких блоков веб-дизайнеры могут располагать текст таким образом, чтобы он полностью окружал элементы, обходя тем самым традиционные ограничения, свойственные плавающим объектам. Раньше плавающие элементы могли располагаться только слева или справа относительно их положения в потоке документа. Позиционируемые плавающие элементы отличаются тем, что могут располагаться на заданном расстоянии от верхней, нижней, левой или правой сторон содержащего их блока, оставаясь при этом в потоке документа. Поддержка позиционируемых плавающих элементов в Internet Explorer Platform Preview позволяет реализовывать сценарии, подобные тому, который изображен на следующем рисунке: здесь верстка веб-страницы напоминает верстку страницы в настольной издательской системе, такой как Microsoft Word или Adobe InDesign.
Более того, позиционируемые плавающие элементы можно сочетать с другими новыми возможностями верстки Internet Explorer 10 и приложений Metro: сеткой CSS, многоколоночной разметкой CSS и гибкими блоками CSS. Позиционируемые плавающие элементы представляют собой недавнее предложение, вынесенное в адрес рабочей группы CSS. Корпорация Microsoft работает с другими членами консорциума W3C и более широкого веб-сообщества с целью усовершенствования данного предлагаемого стандарта. В следующих подразделах дается краткий обзор позиционируемых плавающих элементов и способов их реализации. Примечание. Ввиду того что модуль позиционируемых плавающих элементов находится на предварительном этапе подготовки, для работы в Internet Explorer 10 и приложениях Metro данное значение и все свойства, описанные в этом разделе, следует указывать с фирменным префиксом Microsoft «-ms-». Демонстрацию использования позиционируемых плавающих элементов см. в разделе Hands On: Positioned Floats на сайте IE Test Drive. Позиционируемый плавающий элемент В Internet Explorer 10 и приложениях Metro добавлено новое значение свойства float — «-ms-positioned». Это значение указывает, что данный элемент (позиционируемый плавающий элемент) может располагаться различными способами (см. следующие подразделы) и строчное содержимое будет огибать его подобно тому, как оно огибает обыкновенные плавающие элементы. Значение «-ms-positioned» меняет интерпретацию других свойств, таких как position, top, bottom, left и right. В следующих подразделах подразумевается, что для рассматриваемого элемента установлено значение «float:-ms-positioned». Модель содержащего блока для позиционируемых плавающих элементов Прежде чем задавать местоположение и размер позиционируемого плавающего элемента, необходимо рассчитать содержащий его блок, исходя из значения свойства position. Позиционируемые плавающие элементы меняют интерпретацию некоторых значений свойства position, а также допускают новое значение этого свойства — «position:-ms-page». position: static | absolute | fixed | relative | -ms-page Ниже описываются отличия в интерпретации этих ключевых слов по сравнению со стандартной логикой работы свойства position в случае, когда для рассматриваемого элемента установлено значение «float:-ms-positioned».
Огибание содержимым позиционируемого плавающего элемента Свойство -ms-flow-wrap определяет, как позиционируемый плавающий элемент будет огибать содержимое. -ms-flow-wrap: wrap | none Эти ключевые слова определены следующим образом:
Смещение внутреннего контура огибания Свойство -ms-wrap-margin указывает ширину полей, используемых для смещения внутреннего контура огибания относительно других фигур. В качестве значения можно использовать любое допустимое значение длины. Позиционируемые плавающие элементы и сетка CSS Позиционируемые плавающие элементы также можно использовать вместе с новой функцией сетки CSS в Internet Explorer 10 и приложениях Metro. Например, на приведенном ниже изображении показан позиционируемый плавающий элемент внутри сетки 3х3. Сетка содержит один элемент div со строчным содержимым, заполняющим все три строки и три столбца. Позиционируемый плавающий элемент находится в ячейке сетки во второй строке второго столбца. Содержимое огибает позиционируемый плавающий элемент.
Ниже приведен код этой страницы: <!DOCTYPE html><html><body><div style="width: 100%; Трехмерные преобразования CSS 3Internet Explorer 10, так же как и приложения Metro в Windows Developer Preview, поддерживает трехмерные преобразования CSS 3. В Internet Explorer 9 была добавлена поддержка двухмерных преобразований CSS 3, которые также поддерживаются и в приложениях Metro. С помощью преобразований обеспечиваются переходы, повороты и изменение размера элементов в плоском или трехмерном пространстве без использования внешних подключаемых модулей. Трехмерные преобразования CSS определяются модулем трехмерных преобразований CSS уровня 3 консорциума W3C, который в данный момент находится в состоянии рабочего черновика. Перед тем как пытаться вручную применить какие-либо трехмерные преобразования, рекомендуется ознакомиться с системой координат преобразований и с правилами отображения. Примечание. Ввиду того что рабочий черновик модуля преобразований CSS 3 находится на предварительной стадии, все свойства, перечисленные в данном разделе, следует указывать с фирменным префиксом Microsoft «-ms-» для работы с Internet Explorer 10 и приложениями Metro. Свойство «-ms-transform»Для применения двухмерных и трехмерных преобразований к элементу служит свойство -ms-transform, содержащее список функций преобразования. Вот синтаксис этого свойства:
Помните, что порядок имеет значение: функции преобразования применяются в том порядке, в котором они перечислены в свойстве -ms-transform. Кроме того, эффект функций с компонентом оси z проявляется лучше всего в сочетании с функцией perspective, придающей глубину. В приведенных ниже примерах кода функция perspective и другие функции добавлены к свойству -ms-transform, чтобы эффект иллюстрируемых функций был более заметным. Подробно ознакомиться с действием сочетания различных функций и значений можно в демонстрации Hands On: 3-D Transforms на веб-сайте IE Test Drive. Перспектива perspective(<length>) Функция perspective изменяет перспективу, через которую просматривается элемент, и создает впечатление глубины. По мере увеличения значения функции «perspective» элемент будет отображаться все дальше от зрителя. Значение должно быть больше 0 и указывается в пикселях. Единицы параметра <length> такие же, как во всех прочих функциях перехода: 1px в направлении z — это такое же расстояние, как 1px в направлениях x или y. Трехмерная матрица matrix3d(<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, Функция matrix3d определяет трехмерное преобразование в виде однородной матрицы 4х4 из 16 значений c развертыванием по столбцам. Пример: div Результат:
Трехмерный переход translate3d(<translation-value>, <translation-value>, <translation-value>) Функция translate3D определяет трехмерный переход по вектору [tx,ty,tz], где tx, ty и tz — соответственно первый, второй и третий параметры значений перехода. Пример: div Результат:
Переход в направлении z translateZ(<translation-value>) Функция translateZ указывает переход на заданную величину в направлении z. Процентные значения не допускаются. Пример: div Результат:
Трехмерное масштабирование scale3d(<number>, <number>, <number>) Функция scale3d определяет операцию трехмерного масштабирования по вектору масштабирования [sx,sy,sz], описанному этими тремя параметрами. Пример: div Результат:
Масштабирование по вектору z scaleZ(<number>) Функция scaleZ определяет операцию масштабирования по вектору масштабирования [1,1,sz], где sz дается в качестве параметра. Эффект функции scaleZ наиболее очевиден при использовании в сочетании с такими функциями, как rotate и perspective, что показано в приведенном ниже примере. Пример: div Результат:
Трехмерный поворот rotate3d(<number>, <number>, <number>, <angle>) Функция rotate3d определяет трехмерный поворот по часовой стрелке. Элемент поворачивается на угол, указываемый последним параметром, вокруг вектора направления [x,y,z], описываемого первыми тремя параметрами. Если вектор направления не является единичным, вектор будет нормализован. Если нормализация вектора направления невозможна, как в случае вектора [0, 0, 0], то поворот не применяется. Пример: div Результат:
Поворот вокруг оси x rotateX(<angle>) Функция rotateX определяет поворот на заданный угол по часовой стрелке вокруг оси x. Пример: div Результат:
Поворот вокруг оси y rotateY(<angle>) Функция rotateY определяет поворот на заданный угол по часовой стрелке вокруг оси y. Пример: div Результат:
Поворот вокруг оси z rotateZ(<angle>) Функция rotateZ определяет поворот на заданный угол по часовой стрелке вокруг оси z. Пример: div Результат:
Свойство «-ms-transform-origin»Свойство -ms-transform-origin определяет начало отсчета для преобразования элемента. Например, если указать функцию rotate3d в свойстве -ms-transform, то это свойство будет определять точку, вокруг которой будет поворачиваться элемент. Значение этого свойства по умолчанию — «50% 50% 0px» (середина элемента).
Свойство«-ms-transform-style»Свойство -ms-transform-style определяет отображение вложенных элементов в трехмерном пространстве.
Свойство «-ms-perspective»Свойство -ms-perspective применяет такое же преобразование, как функция преобразования perspective, но в данном случае оно применяется только к преобразованным или перемещенным дочерним элементам, а не к родительскому элементу.
Свойство «-ms-perspective-origin»Свойство -ms-perspective-origin определяет начало отсчета для свойства -ms-perspective.
Свойство «-ms-backface-visibility»Свойство -ms-backface-visibility определяет, видна ли обратная сторона преобразованного элемента, когда она направлена в сторону зрителя. Непреобразованные элементы всегда направлены лицевой стороной к зрителю.
Демонстрацию использования преобразований CSS 3 см. в разделе Hands On: 3-D Transforms на сайте IE Test Drive. Анимация CSS 3Internet Explorer 10 и приложения Metro поддерживают анимацию CSS 3. Анимация CSS 3 дает возможность применять элементы анимации на веб-страницах и в приложениях Metro, создавать привлекательные приложения с удобными, яркими, живыми интерфейсами. Анимация CSS 3 определяется модулем анимации CSS уровня 3 консорциума W3C, который в данный момент находится в состоянии рабочего черновика. Анимации схожи с переходными эффектами в том, что анимированные элементы изменяют положение, цвет, размер и прозрачность, они поворачиваются, преобразуются, увеличиваются или уменьшаются и т. д. Как и в случае с переходными эффектами, можно использовать временные функции, чтобы управлять скоростью хода анимации. Однако в анимации CSS 3 также можно использовать ключевые кадры, определяющие свойства анимации на различных этапах ее выполнения. Благодаря этому можно определять поведение анимации не только в ее начале и в конце, но и на промежуточных этапах. Анимации также поддерживают итерации, воспроизведение в обратную сторону, возможность приостановки и возобновления. Как и следовало ожидать, анимация CSS 3 предоставляет практически бесконечные возможности для создания полнофункциональных удобных интерфейсов. В данном разделе руководства для разработчиков содержится краткое описание создания анимации CSS в Internet Explorer 10 и приложениях Metro, а также приводится пример использования анимации CSS 3. Демонстрацию использования анимации CSS 3 см. в разделе Hands On: Animations на сайте IE Test Drive. Примечание. Ввиду того что рабочий черновик модуля анимации CSS 3 находится на предварительной стадии, все свойства, перечисленные в данном разделе, следует указывать с фирменным префиксом Microsoft «-ms-» для работы с Internet Explorer 10 и приложениями Metro. Создание анимацииСоздание анимации осуществляется в три этапа:
Определение свойств анимации Сначала нужно указать свойства анимации в селекторе, который применяется к элементу (для которого и требуется анимация). В данном разделе описываются свойства анимации. Свойство «-ms-animation-name» Свойство -ms-animation-name указывает идентификаторы анимации. Идентификатор анимации выбирает правило CSS @-ms-keyframes. Вот синтаксис этого свойства:
Свойство -ms-animation-duration определяет длительность выполнения одного цикла анимации. Вот синтаксис этого свойства:
Свойство -ms-animation-timing-function позволяет изменять скорость анимации, описывая способ вычисления промежуточных значений во время одного цикла анимации. Для этого следует указать временные параметры анимации на основе кривой Безье третьего порядка, принимающей четыре параметра. Можно указать временную функцию как для всей анимации, так и для отдельных ключевых кадров. Можно либо явным образом задать эту кривую при помощи функции cubic-bezier и ввести четыре значения вручную, либо выбрать ключевые слова, каждое из которых соответствует часто используемому временному параметру. Вот синтаксис этого свойства:
Свойство -ms-animation-iteration-count определяет, сколько раз воспроизводится цикл анимации. Вот синтаксис этого свойства:
Свойство -ms-animation-direction определяет направление воспроизведения цикла анимации. Вот синтаксис этого свойства:
Свойство -ms-animation-play-state указывает, выполняется ли анимация или же находится в приостановленном состоянии. Это свойство может быть полезно при создании механизма, позволяющего пользователю приостанавливать анимацию. Вот синтаксис этого свойства:
Свойство -ms-animation-delay определяет время начала анимации и позволяет начинать анимацию через некоторое время после ее применения. Вот синтаксис этого свойства:
Свойство -ms-animation-fill-mode определяет, будут ли эффекты анимации видны до или после ее воспроизведения. По умолчанию анимация не влияет на значения свойств в течение времени между применением анимации и ее выполнением (в течение любой задержки, определенной свойством -ms-animation-delay). Кроме того, по умолчанию анимация не влияет на значения свойств после ее окончания (после истечения времени, определенного свойством -ms-animation-duration). Свойство -ms-animation-fill-mode позволяет переопределить используемое по умолчанию поведение. Вот синтаксис этого свойства:
Собирательное свойство -ms-animation объединяет шесть описанных выше свойств анимации в одно. Вот синтаксис этого свойства:
div { С помощью собирательного свойства -ms-animation можно указать все эти шесть свойств в одной строке следующим образом: div { Создание ключевых кадров Теперь следует задать ключевые кадры для анимации. При помощи ключевых кадров обеспечивается точное управление промежуточными значениями в анимации. Правило @-ms-keyframes определяет список ключевых кадров анимации для свойства объекта, а также указывает идентификатор анимации. Вот синтаксис этого правила:
@-ms-keyframes myAnimation { В данном примере ключевые кадры указываются для трех моментов анимации: начало (значение «from», или «0%»), 40 % и конец (значение «to», или «100%»). Также можно указать временную функцию, которая будет применяться по мере перехода анимации к следующему ключевому кадру. Нужно просто добавить свойство -ms-animation-timing-function в селектор соответствующего ключевого кадра. Применение анимации Наконец, можно применить стиль анимации к элементу. Обычно применение включается каким-либо событием, например щелчком кнопки мыши (или касанием). Помните, что в отличие от переходных эффектов анимацию CSS невозможно прервать путем изменения значений свойств анимации. Анимацию CSS можно прервать лишь с помощью свойства -ms-animation-play-state или путем добавления либо удаления имени анимации. По завершении анимации те свойства, к которым применялась анимация, принимают исходные значения. Пример Ниже приведен пример анимации CSS. Он создан с помощью демонстрации Hands On: Animations, доступной на сайте IE Test Drive. Сначала создадим элемент div с текстом и применим к нему стили: <!DOCTYPE html> Результат применения данного кода можно увидеть на этой странице. Теперь определим для анимации некоторые параметры. Добавим в раздел style селектор, использующий псевдоэлемент :active. Это означает, что анимация будет происходить, лишь пока пользователь щелкает и удерживает (или касается и удерживает) текстовый блок. Анимация будет продолжаться до окончания. Итак, нужно добиться следующего результата: анимация начинается немедленно, длится 5 секунд, повторяется один раз (общее количество итераций равно двум) и идентифицируется с именем «demo». Для этого добавим следующий селектор: ... Теперь создадим три ключевых кадра — один для начала анимации, один для ее середины и один для окончания. В каждом ключевом кадре определим свойства, которые будут изменяться, и временные функции, чтобы определить скорость изменений. @-ms-keyframes demo { Мы определили два свойства для анимации: background-color и -ms-transform. В ходе одного цикла анимации фоновый цвет элемента div меняется со светло-зеленого (исходного) на фиолетовый, а затем снова становится светло-зеленым. Кроме того, элемент div также перемещается на 20 пикселей вправо и на 30 пикселей вниз. Анимация использует временную функцию ease с начала до середины и временную функцию ease-in с середины до конца. Просмотреть эту анимацию (требуется Internet Explorer 10). СобытияInternet Explorer 10 и приложения Metro определяют три события анимации. MSAnimationStart Событие MSAnimationStart происходит в начале анимации с учетом задержки (указанной свойством -ms-animation-delay), если она есть. При отрицательной задержке анимация начнется не с начала, а со времени, равного абсолютному значению задержки.
MSAnimationEnd Событие MSAnimationEnd происходит по завершении анимации.
MSAnimationIteration Событие MSAnimationIteration происходит в конце каждой итерации анимации. Это событие происходит только в случае, если значение свойства -ms-animation-iteration-count больше единицы.
Градиенты CSS 3Internet Explorer 10 и приложения Metro поддерживают градиенты CSS 3 для любого свойства, значением которого может быть изображение — в частности, свойства background-image (в сочетании со значением «image» собирательного свойства background), свойства list-style-image и создаваемого содержимого. Градиенты работают так, как описано в разделе Gradients (Градиенты) модуля CSS 3 Image Values and Replaced Content (Значения-изображения и заменяемое содержимое в CSS 3), который на момент написания этого документа находится в стадии рабочего черновика. Градиенты — это изображения с плавным переходом между цветами. Internet Explorer 10 поддерживает линейные, круговые и эллиптические градиенты CSS 3. Градиент каждого из этих типов задается линией градиента и двумя или более узлами. Каждый узел градиента имеет свой цвет, а между каждой парой узлов Internet Explorer отображает плавный переход от цвета первого узла к цвету второго. Демонстрацию использования градиентов CSS 3 см. в разделе CSS Gradient Maker на сайте IE Test Drive. Линейные градиентыЛинейный градиент — это плавный цветовой переход от одной стороны блока к другой. Для создания линейного градиента сначала задается линия градиента, а затем два или более узла, разделенных запятыми. Общий синтаксис задания линейного градиента таков:
Изображенный ниже линейный градиент, который используется в качестве аргумента для свойства background-image, имеет три узла.
background-image: -ms-linear-gradient(top right, #FFF133 0%, #16D611 50%, #00A3EF 80%); Это объявление отображается в Internet Explorer 10 следующим образом:
Этот линейный градиент был создан с помощью средства CSS Gradient Maker на веб-сайте IE Test Drive. Радиальные градиентыВ отличие от линейного градиента, который идет от одной стороны блока к другой, радиальный градиент представляет собой плавный цветовой переход из заданной точки во всех угловых направлениях по радиусу окружности или эллипса с центром в этой точке. Для определения радиального градиента сначала задается центральная точка, затем размер и форма (в случае эллипса) результирующего кругового или эллиптического градиента и, наконец, промежуточные узлы градиента, разделенные запятыми. Общий синтаксис задания радиального градиента описан ниже.
Например, следующий радиальный градиент, используемый в качестве аргумента для свойства background-image, имеет те же три узла, что и в предыдущем примере. Линия этого кругового градиента начинается в левом нижнем углу содержащего градиент блока и заканчивается на наиболее удаленной от центра градиента стороне этого блока. background-image: -ms-radial-gradient(left bottom, circle farthest-side, Это объявление отображается в Internet Explorer 10 следующим образом:
Если просто поменять значение параметра форма в предыдущем объявлении с «circle» на «ellipse», градиент примет следующий вид: background-image: -ms-radial-gradient(left bottom, ellipse farthest-side,
Оба этих радиальных градиента были созданы с помощью средства CSS Gradient Maker на веб-сайте IE Test Drive. Повторяющиеся градиентыInternet Explorer 10 и приложения Metro также поддерживают повторяющиеся линейные и радиальные градиенты. Синтаксис каждого из свойств повторяющегося градиента остается таким же, как и для неповторяющегося. Общий синтаксис задания повторяющегося линейного градиента таков:
Ниже объявляется повторяющийся линейный градиент, идентичный показанному ранее линейному градиенту (относительные значения в процентах уменьшены, чтобы сделать эффект повторения более явственным): background-image: -ms-repeating-linear-gradient(top right, Это объявление отображается в Internet Explorer 10 следующим образом:
Общий синтаксис задания повторяющегося радиального градиента таков:
Ниже объявляется повторяющийся радиальный градиент, идентичный показанному ранее радиальному градиенту (относительные значения в процентах уменьшены, чтобы сделать эффект повторения более явственным): background-image: -ms-repeating-radial-gradient(left bottom, Это объявление отображается в Internet Explorer 10 следующим образом:
Ниже объявляется повторяющийся эллиптический градиент, идентичный показанному ранее эллиптическому градиенту (относительные значения в процентах уменьшены, чтобы сделать эффект повторения более явственным): background-image: -ms-repeating-radial-gradient(left bottom, Это объявление отображается в Internet Explorer 10 следующим образом:
Переходные эффекты CSS 3Internet Explorer 10 и приложения Metro поддерживают переходные эффекты CSS 3. Переходные эффекты позволяют создавать простую анимацию за счет постепенного изменения значений свойств CSS за определенный промежуток времени. Например, можно изменять размер и цвет объекта в течение 10-секундного периода. Анимация, для создания которой ранее требовалось применять сложное сочетание CSS и JavaScript, теперь может быть создана только средствами CSS. Переходные эффекты CSS 3 определяются модулем переходных эффектов CSS уровня 3 консорциума W3C, который в данный момент находится в состоянии рабочего черновика. Примечание. Ввиду того что рабочий черновик модуля переходных эффектов CSS 3 находится на предварительной стадии, все свойства, перечисленные в данном разделе, следует указывать с фирменным префиксом Microsoft «-ms-» для работы с Internet Explorer 10 и приложениями Metro. Демонстрацию использования переходных эффектов CSS 3 см. в разделе Hands On: transitions на сайте IE Test Drive. Свойство «-ms-transition-property»Свойство -ms-transition-property позволяет указать одно или несколько свойств CSS, к которым будут применены переходные эффекты при задании нового значения свойства. Вот синтаксис этого свойства:
Помните, что если прервать переходный эффект, свойство автоматически вернется в исходное состояние. Свойство «-ms-transition-duration» Свойство -ms-transition-duration определяет длительность переходного эффекта. Вот синтаксис этого свойства:
Свойство «-ms-transition-timing-function»Свойство -ms-transition-timing-function позволяет изменять скорость переходного эффекта, описывая способ вычисления промежуточных значений во время переходного эффекта. Для этого следует указать временные параметры анимации на основе кривой Безье третьего порядка, принимающей четыре параметра. Можно либо явным образом задать эту кривую при помощи функции cubic-bezier и ввести четыре значения вручную, либо выбрать ключевые слова, каждое из которых соответствует часто используемому временному параметру. Вот синтаксис этого свойства:
Свойство «-ms-transition-delay»Свойство -ms-transition-delay определяет время начала переходного эффекта и позволяет начинать переходный эффект через некоторое время после его применения. Если задать свойству -ms-transition-delay отрицательное значение, то переходный эффект все равно будет запущен в момент изменения свойства, но будет выглядеть так, как будто он был запущен на указанную величину времени раньше. Таким образом, переходный эффект начнет работать не с начала. Вот синтаксис этого свойства:
Свойство «-ms-transition»Собирательное свойство -ms-transition объединяет четыре описанных выше свойства в одно. Вот синтаксис этого свойства:
Демонстрацию использования переходных эффектов CSS 3 см. в разделе Hands On: transitions на сайте IE Test Drive. Следующий простой пример демонстрирует использование переходных эффектов CSS 3 для изменения одного свойства CSS, применяемого к элементу div в течение определенного времени. Сначала создадим элемент div с текстом и применим к нему стили: <!DOCTYPE html> Можно просмотреть получившуюся страницу. Теперь сделаем так, чтобы элемент div медленно исчезал (путем изменения свойства opacity), когда пользователь щелкает (или касается) и удерживает div. Для этого зададим «начальное» и «конечное» значения свойства opacity. Для начала присвоим элементу div свойство opacity со значением «1», затем изменим это значение на «0», когда элемент div становится «активным». Для этого добавим свойства opacity таким образом, чтобы раздел стиля выглядел, как показано ниже: ... Теперь, если нажать и удерживать (или коснуться и удерживать) зеленый элемент div, он мгновенно исчезнет на все время, в течение которого нажата кнопка мыши или удерживается палец. Можно просмотреть получившуюся страницу. Теперь можно добавить свойства переходного эффекта CSS, чтобы значение свойства opacity уменьшалось постепенно. Сначала необходимо указать свойство, к которому будет применяться переходный эффект, при помощи свойства -ms-transition-property: -ms-transition-property:opacity; Затем добавим длительность перехода с помощью свойства -ms-transition-duration: -ms-transition-duration:5s; Теперь определим функцию времени, которая будет использоваться с функцией -ms-transition-timing-function. Для того чтобы переходный эффект применялся к div равномерно, используем временную функцию linear: -ms-transition-timing-function:linear; Также можно задержать переход на одну секунду при помощи свойства -ms-transition-delay: -ms-transition-delay: 1s; За счет этих четырех свойств изменение значения свойства opacity будет происходить равномерно на 5 секунд через каждую секунду. Также можно использовать собирательное свойство transition, чтобы объединить эти четыре свойства: -ms-transition: opacity 5s linear 1s; Можно просмотреть получившуюся страницу. Чтобы задействовать в переходном эффекте несколько свойств элемента, нужно задать свойствам несколько значений, отделив их запятыми. Например, можно добавить к предыдущему примеру изменение цвета. Сначала добавим свойство background-color в селектор div:active. Затем изменим свойство -ms-transition следующим образом: -ms-transition: opacity 5s linear 1s, background-color 2s ease; Это свойство добавляет изменение цвета на фиолетовый за 2 секунды при помощи временной функции «ease». Значение задержки не указано, поэтому переходный эффект начнется немедленно. Можно просмотреть получившуюся страницу. СобытияInternet Explorer 10 и приложения Metro определяют одно событие переходного эффекта. MSTransitionEndСобытие MSTransitionEnd происходит по завершении перехода. Если переход удален перед завершением, событие не возникает.
Текст CSS 3В Internet Explorer 10 и приложениях Metro в Windows Developer Preview появилась поддержка двух функций текстового модуля CSS 3 W3C: свойства text-shadow и расстановки переносов. Демонстрацию использования свойства «text-shadow» см. в разделе Hands On: text-shadow на сайте IE Test Drive. Свойство text-shadowСвойство text-shadow применяет к указанному тексту эффект отбрасывания тени, оно определяется в текстовом модуле W3C CSS 3. Если вам знаком синтаксис свойства box-shadow, то применение свойства text-shadow не вызовет затруднений, поскольку синтаксис практически идентичен.
В приведенном ниже примере к тексту применяется темно-серая тень с незначительным размытием, причем тень находится ниже и правее текста: .myselector Результат при применении к короткому блоку текста будет выглядеть так:
На сайте W3C целая страница посвящена советам по использованию свойства text-shadow и примерам: тени текста в CSS. Расстановка переносовInternet Explorer 10, так же как и приложения Metro в Windows Developer Preview, поддерживает следующую важную функцию текста CSS 3: автоматическую расстановку переносов. Эта функция особенно полезна с учетом поддержки многоколоночной разметки. В частности, модуль переноса слов CSS 3 поддерживает следующие возможности:
Примечание. Ввиду того что раздел переносов в рабочем черновике модуля текста CSS 3 находится в предварительной стадии, все свойства, перечисленные в данном разделе, следует указывать с фирменным префиксом Microsoft «-ms-» для работы с Internet Explorer 10. Приведенный ниже пример разметки содержит небольшой фрагмент текста, к которому не применены никакие свойства, относящиеся к переносу слов. Этот пример мы будем использовать для демонстрации таких свойств. <!DOCTYPE html> В Internet Explorer 10 такая разметка будет выглядеть следующим образом:
Свойство «-ms-hyphens» Свойство -ms-hyphens включает расстановку переносов. Вот синтаксис этого свойства:
<!DOCTYPE html> В Internet Explorer 10 такая разметка будет выглядеть следующим образом:
Свойство «-ms-hyphenate-limit-zone» Свойство -ms-hyphenate-limit-zone определяет ширину области расстановки переносов, то есть пустого пространства в правой части строки (до выравнивания текста по ширине), при превышении которого включается расстановка переносов. Вот синтаксис этого свойства:
<!DOCTYPE html> В данном случае ширина области составляет 50 пикселей. Если в какой-либо строке (до выравнивания по ширине) текст будет оканчиваться до области расстановки переносов, то в эту строку будет перемещен фрагмент слова (с переносом) из следующей строки. Это показано на приведенном ниже рисунке. В данном случае вторая и шестая строки текста (выделенные розовым цветом) имеют слишком малую длину и не попадают в область расстановки переносов. Поэтому в обоих случаях первое слово следующей строки разделяется переносом и первый фрагмент этого слова перемещается на предыдущую строку.
Свойство «-ms-hyphenate-limit-chars» Свойство -ms-hyphenate-limit-chars задает наименьшее число букв в слове с переносом. Вот синтаксис этого свойства:
<!DOCTYPE html> В Internet Explorer 10 такая разметка будет выглядеть следующим образом:
Обратите внимание, что слово «ultricies» теперь отображается без переноса, в следующей строке. Свойство «-ms-hyphenate-limit-lines» Свойство -ms-hyphenate-limit-lines задает наибольшее число последовательных строк с переносами в элементе. Вот синтаксис этого свойства:
Панорамирование и изменение масштабаInternet Explorer 10 и приложения Metro поддерживают программное управление сенсорным вводом и распознаванием жестов в CSS. В частности, поддерживается панорамирование и изменение масштаба. Дополнительная документация о панорамировании и изменении масштаба в руководстве по Internet Explorer 10 для разработчиков будет предоставлена позже. В настоящее время можно использовать следующие краткие руководства серии «Quickstart»: Также можно использовать документацию по API в сети MSDN: Touch: Zooming and Panning. Снятие ограничений таблиц стилейВ Internet Explorer 9 и более ранних версиях действовало ограничение в 31 таблицу стилей на одну веб-страницу. Имелось также ограничение на глубину вложенности таблиц стилей, включаемых по ссылке с помощью правил @import (четыре уровня). В Internet Explorer 10 (и в приложениях Metro) это ограничение снято. Количество таблиц стилей, на которые могут ссылаться веб-страницы в Internet Explorer 10 или приложения Metro в Windows Developer Preview, не ограничено. Также не ограничивается количество уровней вложенности правил @import внутри таблиц стилей. |
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.png)
.png "Короткий фрагмент выровненного текста внутри узкого контейнера без применения переносов. Видны значительные зазоры между словами.")
.png "Тот же короткий фрагмент выровненного текста внутри узкого контейнера, как и предыдущем примере, но с параметром -ms-hyphens установленным в значение \"auto\". Зазоры менее заметны, чем на предыдущем рисунке, поскольку несколько слов были автоматически перенесены.")
.png)
.png "Тот же короткий фрагмент выровненного текста внутри узкого контейнера, как и в первом примере, но с параметром -ms-hyphens установленным в значение \"auto\" и параметром -ms-hyphenate-limit-chars установленным в \"auto 3\". Слово “ultiricies,”, которое в прошлый раз было перенесено после первых друх букв, теперь не переносится и размещается на следующей строке.")