CSS модуль — Базовый пользовательский интерфейс — Уровень 3 (CSS3 UI).

Опубликовано: 12 мая 2014      Перевод:

Перевод спецификации CSS3 UI: CSS Basic User Interface Module Level 3 (CSS3 UI)

Статус: W3C Working Draft 17 января 2012 г.

Данная версия:
http://www.w3.org/TR/2012/WD-css3-ui-20120117/
Последняя версия:
http://www.w3.org/TR/css3-ui/
Редакторский проект:
http://dev.w3.org/csswg/css3-ui/
Предыдущая версия:
http://www.w3.org/TR/2004/CR-css3-ui-20040511/
Список вопросов:
http://wiki.csswg.org/spec/css3-ui
Обсуждение:
www-style@w3.org. Формат темы сообщения: "[css3-ui] … тема сообщения…" (архивы)
Редактор:
(Mozilla Foundation, ранее — Microsoft Corporation) <tantek@cs.stanford.edu>

Абстракт.

Этот параграф является информативным.

CSS (Cascading Style Sheets — каскадные таблицы стилей) — это язык описания способа представления HTML и XML документов на экранах устройств, бумаге, при их озвучивании и т.д. В нем предусмотрены различные селекторы, свойства и их значения, используемые для стилизации элементов базового пользовательского интерфейса форматируемого документа. В данной спецификации описаны имеющие отношение к пользовательскому интерфейсу селекторы, свойства и значения, которые были предложены к внесению в новую CSS спецификацию Level 3, необходимые для стилизации HTML и XML документов (включая XHTML и XForms). Она включает, а также расширяет возможности относящихся к пользовательскому интерфейсу селекторов, свойств, их значений, которые были представлены в CSS второго уровня первой редакции (CSS 2.1), а также в Selectors спецификациях.

Статус этого документа.

В этом параграфе разъясняется статус данного документа на момент его публикации. Он может быть переопределен другими документами. Список текущих публикаций W3C консорциума, а также последнюю редакцию этого технического сообщения вы можете найти в каталоге технических сообщений W3C на http://www.w3.org/TR/.

Статус публикации Working Draft не означает, что документ утвержден членством W3C консорциума. Это черновая версия документа и она в любое время может быть доработана, заменена или переопределена другими документами. Цитирование данного документа будет неуместным, кроме случаев, относящихся к его редакции и доработке.

Заархивированный список публичной рассылки www-style@w3.org (смотри инструкции) открыт с целью поддержания дискуссии по данной спецификации. Отсылая e-mail на этот адрес, укажите, пожалуйста, в поле темы сообщения пометку "css3-ui", а лучше используйте вот такой формат: "[css3-ui] …ваш краткий комментарий…".

Этот документ был создан CSS рабочей группой (отдела Style Activity).

В ходе разработки данного документа рабочая группа руководствовалась Патентной политикой W3C от 5/02/2004. W3C консорциумом также ведется общедоступный реестр раскрытий сущности любого патента, созданный в связи с завершением определенных этапов деятельности данной группы. Та же страница содержит инструкции по внесению раскрывающей сущность патента информации. Личности, действительно обладающие претендующей на патент информацией, которая по мнению ее владельца имеет на это Существенное(ые) основание(я), должны раскрыть эту информацию в соответствии с требованиями, изложенными в 6 секции Патентной политики W3C.

Данная спецификация имеет статус Last Call Working Draft — (Окончательная версия рабочего проекта), несмотря на то, что ранее она уже имела статус Candidate Recommendation. Она снова публикуется как Last Call Working Draft, поскольку этот проект предусматривает удаление некоторых свойств, реализация которых была недостаточной для перехода документа в фазу Proposed Recommendation, к тому же они изначально небыли включены в список подверженных риску свойств, как это требует W3C Процесс. Этот проект, так же, добавляет несколько новых свойств и значений. Детали смотри в Приложении С — Изменения. Все заинтересованные лица приглашаются к ознакомлению с данным документом и отправки своих комментариев на список рассылки www-style, описанным выше способом. Крайний срок отправки комментариев составляет четыре недели от даты публикации документа, указанной в его заголовке или 14 февраля 2012 года, окончательной является та дата, которая ближе.

Критерии завершения проекта Candidate Recommendation (Потенциальная рекомендация).

Для того, чтобы данная спецификация перешла в фазу Proposed Recommendation, должны быть соблюдены следующие условия:

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

    (1) реализует компонент спецификации; (2) доступен (т.е. может быть свободно скачан или получен посредством другого общедоступного механизма реализации программного обеспечения). Такая возможность должна быть представлена; (3) производится (т.е. опытные, закрытые или неофициальные версии не учитываются); (4) не является экспериментальным (т.е. предназначен для широкого использования на повседневной основе).

  2. Период нахождения документа в статусе CR должен быть не меньше шести месяцев. Это делается для того, чтобы убедиться в том, что прошло достаточно времени для выявления остаточных грубых ошибок.
  3. В случае если появление реализаций задерживается, срок статуса CR может быть продлен.
  4. Находящиеся под риском компоненты (список которых представлен ниже) будут изъяты (в результате чего упомянутый список всех компонентов этой категории будет уменьшен), если к концу CR срока для этих компонентов спецификации не будет представлено две или более функционально совместимые реализации или же если к концу этого срока для упомянутых компонентов не будет проведено адекватное и достаточное тестирование (что определяется соответствующей рабочей группой).

Комплексный тест, а также Отчет по реализациям будут представлены перед тем, как документ получит статус Proposed Recommendation.

Находящиеся под риском компоненты.

Рабочая группа определила перечисленные ниже компоненты как подверженные риску исключения из CSS Basic User Interface Module Level 3 при выходе из статуса CR. Если разработчики программного обеспечения желают чтобы эти компоненты остались в данной спецификации, им настоятельно рекомендуется в кратчайшие сроки реализовать поддержку определенных в них функциональных возможностей. Все остальные компоненты либо определены в документах, указанных с помощью нормативных ссылок (к примеру, CSS 2.2 [CSS21] или Selectors [SELECT]), либо считаются поддержанными двумя или более реализациями и по этой причине не будут исключены без возврата к предупреждению об удалении.

Обзор.

Этот параграф является информативным.

Данный документ представляет собой один из «модулей» вводимой CSS3 спецификации. Он не ограничивается описанием относящихся к пользовательскому интерфейсу свойств и значений, уже предусмотренных ранее в CSS1 [CSS1] и CSS2.1 [CSS2.1] спецификациях, но также представляет ряд свойств и значений новой CSS3 спецификации. Эта рабочая группа совсем не надеется на то, что все вводимые в CSS3 свойства и значения будут поддержаны существующими реализациями. Скорее всего, вместо этого CSS3 спецификация будет представлена в нескольких вариантах, так называемых «профилях».

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

Данная спецификация содержит:

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

1. Введение.

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

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

В разделе 2.1 CSS1 спецификации [CSS1] и главе 18 CSS2 спецификации [CSS2] уже представлены некоторые относящиеся к пользовательскому интерфейсу псевдоклассы, свойства и их значения. Параграф 6.6.4 модуля «Селекторы» [SELECT] также содержит несколько дополнительных, связанных с пользовательским интерфейсом псевдоклассов (и один псевдоэлемент).

Этот рабочий проект расширяет их, предоставляя возможность посредством CSS оформлять элементы, которые базируются на дополнительных состояниях пользовательского интерфейса, стилизовать фрагменты элементов пользовательского интерфейса и динамически изменять их представление таким же способом, который до этого был возможен исключительно путем применения специфических элементов и атрибутов HTML4 и XHTML1 стандартов.

1.1. Цели.

Основной задачей данной спецификации является достижение следующих целей:

  • Расширение возможностей пользовательского интерфейса, предоставляемых CSS2.1 спецификацией.
  • Предоставление дополнительных CSS механизмов для усиления или замены других средств динамической презентации HTML4/XHTML1 стандартов.
  • Введение свойств направленной навигации, облегчающих создание основанных на модели направленной навигации пользовательских интерфейсов.
  • Введение элементов и свойств, определяющих представление элементов в виде пиктограмм, что способствует повышению доступности.

2. Вопросы соответствия.

2.1. Определения.

Такие ключевые слова как "ДОЛЖЕН", "НЕ ДОЛЖЕН", "ТРЕБУЕТСЯ", "ОБЯЗАН", "НЕ ОБЯЗАН", "СЛЕДУЕТ", "НЕ СЛЕДУЕТ", "РЕКОМЕНДУЕТСЯ", "МОЖЕТ" и "НЕОБЯЗАТЕЛЬНО", используемые в рамках этого документа должны интерпретироваться так, как это описано в RFC 2119 (смотри [RFC2119]). Однако с целью повышения читабельности данной спецификации, при написании этих слов намеренно не используются заглавные буквы.

Дополнительные ключевые слова, такие как «Пользовательский Агент (ПА)» определены CSS 2.1 спецификацией ([CSS21], в разделе 3.1).

2.2. Классы продуктов.

Следующие классы продуктов (многие из которых пересекаются) должны рассмотреть вопрос реализации этой спецификации:

  • Веб-браузеры.
  • Пользовательские агенты, реализующие один или более следующих типов контента: HTML ([HTML401], [HTML5]), XHTML ([XHTML10], [XHTML11]), XForms (например, [XFORMS11]), SVG (например, [SVG10], [SVG11]) либо другие языки представления контента, которые включают элементы управления форм или предназначены для взаимодействия с пользователем.
  • Пользовательские агенты, реализующие один или несколько CSS уровней или модулей (к примеру, [CSS1], [CSS21]).

2.3. Расширения.

Этой спецификацией не устанавливается какой-либо определенный механизм расширения. И в том случае, если реализации нуждаются в расширении функциональности данной спецификации, они должны руководствоваться любыми/всеми касающимися расширений рекомендациями и требованиями, предусмотренными в CSS2.1 ([CSS21]). Некоторые из них указаны в параграфе 4.1.2.1 Вендорные расширения CSS 1.2 спецификации.

3. Зависимости от других модулей.

Этот модуль CSS3 стандарта зависит от других спецификаций.

Приведенные ниже документы связаны с данным «CSS модулем базового пользовательского интерфейса третьего уровня» (CSS3 Basic UI).

В этой спецификации элемент формы не определен.

4. Селекторы пользовательского интерфейса.

4.1. Состояния пользовательского интерфейса: псевдоклассы.

В спецификации «Селекторы» вводятся некоторые, относящиеся к пользовательскому интерфейсу селекторы ([SELECT], разделы 6.6.1 и 6.6.4), которые представляют состояния пользовательского интерфейса:

Перечисленные выше, определенные в [SELECT] псевдоклассы, включены в эту спецификацию посредством ссылки.

Спецификация CSS 2.1 [CSS21] содержит дополнительные подробности, касающиеся некоторых селекторов, которые не включены в «Селекторы».

4.1.1. Детализация по псевдоклассу :active.

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

4.1.2. Псевдокласс неопределенного значения :indeterminate.

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

Аналогично псевдоклассу :checked, :indeterminate применим к устройствам всех медиатипов. Так, допустим, сгруппированные радиокнопки могут инициализироваться без установки их исходного значения, поэтому они будут соответствовать псевдоклассу :indeterminate даже при отображении на статическом дисплее.

Новые псевдоклассы состояний пользовательского интерфейса.

В дополнение к приведенным выше псевдоклассам, данная спецификация вводит несколько новых псевдоклассов, предназначенных для определения дополнительных состояний пользовательского интерфейса.

  • :default
  • :valid
  • :invalid
  • :in-range
  • :out-of-range
  • :required
  • :optional
  • :read-only
  • :read-write

Эти новые состояния (за исключением :default) вводятся специально для стилизации элементов, которые находятся в соответствующих состояниях, предусмотренных стандартом XForms [XFORMS11].

4.1.3. :default

Селектор :default относится к одному или более UI элементам, которые среди аналогичных им элементов являются дефолтными, то есть выбираются по умолчанию. Данный селектор, как правило, применяется к элементам контекстного меню, кнопкам, а также спискам выбора и меню.

Одним из примеров может быть кнопка submit, входящая в состав группы кнопок. Другим распространенным случаем использованием такого селектора может быть дефолтный элемент всплывающего меню. Группа элементов, предусматривающая возможность выбора нескольких элементов одновременно, может использовать несколько дефолтных элементов, которым соответствует псевдокласс :default. Это могут быть, допустим, рекомендуемые ингредиенты при выборе пиццы.

4.1.4. :valid и :invalid

К элементу могут применяться псевдоклассы :valid или :invalid, когда представляемый им тип данных в контексте семантических определений различных спецификаций (к примеру, [XFORMS11]) является вали́дным или невали́дным соответственно. Элемент, сущность которого не предусматривает применение к нему семантики достоверности данных не может быть выбран с помощью :valid и :invalid псевдоклассов. В противоположность ему, элемент, сущность которого не предусматривает каких-либо ограничений типов данных может всегда соответствовать псевдоклассу :valid.

4.1.5. :in-range и :out-of-range

Псевдоклассы :in-range и :out-of-range применяются только к тем элементам, которые имеют ограничения пределов используемых величин. Элемент может соответствовать псевдоклассам :in-range и :out-of-range, когда связанное с ним значение находится в пределах или за пределами, определенными представлением элемента (к примеру, визуальным или звуковым) соответственно. Если элементом не предусмотрены какие-либо ограничения значений данных или если он не относится к элементам управления форм, то псевдоклассы :in-range и :out-of-range к нему не применяются. Так, к примеру, ползунок, для которого установлено значение 11, определенный в документе как элемент управления типа slider с допустимыми значениями в пределах 1-10, будет соответствовать псевдоклассу :out-of-range. Еще одним подобным примером может быть элемент меню со значением "E", который входит в состав элементов всплывающего меню, предусматривающего выбор только "A", "В" и "C" значений.

4.1.6. :required и :optional

Элемент формы может относиться к псевдоклассу :required или :optional, если согласно требованиям отправки формы элемента, его значение обязательно или необязательно соответственно. Элементы, не являющиеся элементами форм, не могут быть обязательными или необязательными в данном контексте.

4.1.7. :read-only и :read-write

Элемент, не предусматривающий возможности изменения своего содержимого пользователем, относится к псевдоклассу :read-only. Однако, элементы допускающие редактирование своего контента пользователем (подобные текстовым полям ввода) находятся в состоянии, определяемом псевдоклассом :read-write. Обычно документы содержат преимущественно :read-only элементы, хотя вполне возможно (если, к примеру, документ используется с целью редактирования), что некоторые элементы могут принимать состояние :read-write.

4.2. Фрагменты элемента пользовательского инетрфейса: псевдоэлементы.

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

  • ::value
  • ::choices
  • ::repeat-item
  • ::repeat-index

Эти новые псевдоэлементы представлены специально для стилизации фрагментов элементов пользовательского интерфейса, которые определены стандартом XForms [XFORMS11].

Псевдоэлементы ::value, ::choices, ::repeat-item и ::repeat-index находятся под риском.

4.2.1. ::value

Элемент формы может включать как метку для своего значения, так и само значение. Применяемый к таким элементам псевдоэлемент ::value относится к презентации лишь самого значения элемента и используется для его визуального оформления.

В примере используются вымышленная разметка и иллюстрация.

Ниже представлен пример, показывающий действие псевдоэлемента ::value для поля ввода текста. В данном случае используется не соответствующая действительности разметка, к которой применяются необходимые CSS стили.

пример фрагмента XForms формы с вымышленной разметкой:

<input>
<label>Zip code<label>
<input::value/>
</input>

CSS код примера:

input { border:dashed }
label { border:dotted }
input::value { border:solid }

аппроксимация взаимодействия HTML разметки и CSS кода примера:

Интервалы (в виде внутренних отступов) были использованы в данной аппроксимации лишь с целью разделения границ соответствующих фрагментов элемента, визуального выделения самого элемента и его псевдоэлементов.

Псевдоэлемент ::value схож с элементом строчного уровня, но с определенными ограничениями. К псевдоэлементу ::value применяются следующие свойства: свойства шрифта, свойства цвета, свойства фона, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height. Пользовательским агентам разрешается применять к этому псевдоэлементу и другие свойства.

4.2.2. ::choices

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

Список, состоящий из радиокнопок может также быть выбран с помощью псевдоэлемента ::choices, а активная в данный момент радиокнопка может быть выбрана с помощью псевдоэлемента ::value.

4.2.3. ::repeat-item

Псевдоэлемент ::repeat-item представляет отдельную единицу повторяющейся последовательности. Этот псевдоэлемент генерируется в качестве родительского элемента всех находящихся в рамках одной повторяющейся единицы элементов. Каждый псевдоэлемент ::repeat-item ассоциируется с определенным узлом экземпляра данных и на него распространяется действие свойств компонента модели (к примеру, 'relevant&#39), определенных в этом узле, так как это происходит в случае со стилевыми свойствами, действие которых распространяется на дочерние элементы, согласно принципу каскадности.

4.2.4. ::repeat-index

Псевдоэлемент ::repeat-index представляет текущую единицу повторяющейся последовательности. Данный псевдоэлемент занимает место псевдоэлемента ::repeat-item и подобно ему становится родительским элементом всех содержащихся в текущей повторяющейся единице элементов.

Любые декларации стилей, которые авторы хотят применить ко всем повторяющимся единицам, включая текущую (указанную пользователем), должны использовать оба селектора ::repeat-item и ::repeat-index. В противном случае стили, привязанные только к псевдоэлементу ::repeat-item не будут автоматически применены к соответствующему ::repeat-index псевдоэлементу.

Пример 2

Вымышленная разметка с использованием ::repeat-item и ::repeat-index псевдоэлементов.

Ниже представлен пример, иллюстрирующий принцип действия обоих псевдоэлементов ::repeat-item и ::repeat-index. Как первый, так и второй зачастую доступны и применяются совместно. Данный пример предполагает наличие декларации соответствующего пространства имен где-то в заголовочной части документа, до включения приведенного здесь кода.

Используемая в сниппете разметка сделана с помощью XHTML и XForms:

<html:table xforms:repeat-nodeset="…">
<html:tr>
<html:td><xforms:input ref="…"/><xforms:input ref="…"/>
</html:td>
</html:tr>
</html:table>

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

html|tr::repeat-item { outline: medium solid; color:gray }
html|tr::repeat-index { outline: medium dashed; color:black }

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

<html:table xforms:repeat-nodeset="…">
<html:tr::repeat-item>
<html:tr>
<html:td><xforms:input ref="…"/><xforms:input ref="…"/>
</html:td>
</html:tr>
</html:tr::repeat-item>
<html:tr::repeat-item>
<html:tr>
<html:td><xforms:input ref="…"/><xforms:input ref="…"/>
</html:td>
</html:tr>
</html:tr::repeat-item>
<html:tr::repeat-index>
<html:tr>
<html:td><xforms:input ref="…"/><xforms:input ref="…"/>
</html:td>
</html:tr>
</html:tr::repeat-index>
</html:table>

Псевдоэлемент ::repeat-index занимает место псевдоэлемента ::repeat-item, а не вставляется в него как отдельный элемент. То есть имеет место взаимоисключающее поведение схожее с псевдоклассами ссылок :link и :selected. Из двух псевдоэлементов будет вставлен лишь один и применен к отдельной повторяющейся единице в любом месте формы.

5. Пиктограммы элементов.

5.1. Дополнения к свойству content

Название content
Новое значение: icon
Исходное значение: аналогично определению в CSS 2.1
Применяется к: аналогично определению в CSS 2.1
Возможность наследования: аналогично определению в CSS 2.1
Процентные значения: аналогично определению в CSS 2.1
Типы устройств: аналогично определению в CSS 2.1
Вычисляемое значение: ключевое слово icon, если оно получено при определении значения свойства, в противном случае — аналогично определению в CSS 2.1
icon
(Псевдо)элемент полностью заменяется указанным в свойстве icon ресурсом и обрабатывается как замещаемый элемент.
Предполагается, что в следующем проекте модуля CSS3 Generated Content [CSS3GENCON] (CSS3 Генерируемый контент) будет представлен расширенный вариант данной функциональности.
Значение icon находится под риском.

5.2. Свойство icon.

Название icon
Допустимые значения: auto | <uri> [, <uri>]* | inherit
Исходное значение: auto
Применяется к: все элементы
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: все
Вычисляемое значение: полученное при определении, при этом все относительные URL адреса преобразовываются в абсолютные.
auto
Используется дефолтная пиктограмма, применяемая пользовательским агентом в общих случаях.
<uri>
С помощью URI адресов (смотри [URI], [RFC1738] и [RFC1808]) указываются необходимые ресурсы. Используемое для данного свойства <uri> значение(я), которые перечисляются через запятую, предоставляют ссылку(и) на одну или несколько пиктограмм. Пользовательский агент последовательно загружает указанные пиктограммы одну за одной до тех пор, пока не будет получена та, которую он в состоянии отобразить. Такой подход позволяет определять несколько пиктограмм различных форматов, предназначенных для использования на различных платформах и устройствах различных медиатипов.

Свойство icon предоставляет авторам возможность оформлять произвольный элемент с помощью его пиктограммного эквивалента. Соответствующая элементу пиктограмма не используется/отображаться до тех пор, пока свойство content не будет установлено в значение icon (как указано выше). Документы, для элементов которых предусмотрены пиктограммы, облегчают процесс их просмотра пользователями, которых отвлекает перенасыщение текстовой информацией.

Пример 3

Представление элементов в виде пиктограмм.

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

img,object { content:icon }
/* имейте в виду, что модуль CSS3 Generated Content [CSS3GENCON]
(CSS3 Генерируемый контент) расширяет возможности свойства content,
позволяя применять его ко всем элементам. */

img { icon:url(imgicon.png); }
/* предоставляет пользовательский вариант пиктограммы для
изображений */

object { icon:url(objicon.png); }
/* предоставляет другую, предусмотренную пользователем пиктограмму
для объектов. */

Свойство icon находится под риском.

6. Дополнение к модели бокса.

6.1. Свойство box-sizing.

Название box-sizing
Допустимые значения: content-box | padding-box | border-box | inherit
Исходное значение: content-box
Применяется к: все элементы, для которых предусмотрена ширина и высота
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: полученное при определении
content-box
Устанавливает ширину и высоту элемента так, как это определено в спецификации CSS2.1. Указываемые значения ширины и высоты (а также соответствующих им свойств максимально/минимально допустимых значений) относятся к ширине и высоте образуемой боксом элемента контентной области. При этом внутренние отступы и границы элемента находятся вне образованной с учетом указанной ширины и высоты прямоугольной области и отрисовываются за ее пределами.
padding-box
Указанные для элемента значения ширины и высоты (а также соответствующих им свойств максимально/минимально допустимых значений) определяют размеры области, образуемой внутренними отступами бокса элемента. Это значит, что любые установленные для элемента внутренние отступы находятся внутри образованной с учетом указанной ширины и высоты прямоугольной области и отрисовываются в ее пределах. Значения ширины и высоты контентной области вычисляются путем вычитания размеров внутренних отступов соответствующих сторон из указанных значений свойств width и height. А по причине того, что ширина и высота контентной области не могут принимать отрицательные значения ([CSS21], раздел 10.2), вычисляемой минимально допустимой для них величиной является 0.
border-box
Указанные для элемента значения ширины и высоты (а также соответствующих им свойств максимально/минимально допустимых значений) устанавливают размеры определенной в рамках его бокса области, которая образуется границами элемента. А это значит, что любые установленные для данного элемента внутренние отступы или границы находятся внутри образованной с учетом указанной ширины и высоты прямоугольной области и отрисовываются в ее пределах. Значения ширины и высоты контентной области элемента вычисляются путем вычитания размеров границы и внутреннего отступа соответствующих сторон из указанных значений свойств width и height. А поскольку ширина и высота контентной области бокса элемента не могут принимать отрицательные значения ([CSS21], раздел 10.2), минимально допустимым вычисляемым для них значением является 0.

Именно такое определение ширины и высоты реализовано действующими HTML пользовательскими агентами для замещаемых элементов и элементов ввода пользовательских данных.

Пример 4

Применение свойства box-sizing для равномерного распределения пространства.

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

div.container {
width:38em;
border:1em solid black;
}

div.split {
box-sizing:border-box;
width:50%;
border:1em silver ridge;
float:left;
}

<div class="container">
<div class="split">This div occupies the left half.</div>
<div class="split">This div occupies the right half.</div>
</div>
Этот div должен занимать левую половину контейнера.
Этот div должен занимать правую половину контейнера.

Оба верхних div элемента должны располагаться рядом и каждый занимать (включая размеры границ) 50% контентной ширины их контейнера. Если же они выстроены в стопку, один поверх другого, то значит используемый вами браузер не поддерживает свойство box-sizing.

Значение padding-box данного свойства находится под риском.

7. Контурные свойства.

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

  1. Контур не занимает место.
  2. Контур может принимать форму отличную от прямоугольной.

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

7.1. Свойство outline.

Название outline
Допустимые значения: [<outline-color> || <outline-style> || <outline-width>] | inherit
Исходное значение: смотри индивидуальные свойства
Применяется к: все элементы
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: смотри индивидуальные свойства

7.2. Свойство outline-width.

Название outline-width
Допустимые значения: <border-width> | inherit
Исходное значение: medium
Применяется к: все элементы
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: абсолютная величина;
0, если стиль контура установлен в none.

7.3. Свойство outline-style.

Название outline-style
Допустимые значения: auto | <border-style> | inherit
Исходное значение: medium
Применяется к: все элементы
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: полученное при определении

7.4. Свойство outline-color.

Название outline-color
Допустимые значения: <color> | invert | inherit
Исходное значение: invert
Применяется к: все элементы
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: вычисляемым значением для invert является invert. Для значений <color> вычисляемое значение устанавливается согласно приведенному в [CSS3COLOR] определению свойства color.

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

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

Свойство outline-width может принимать те же значения, что и свойство border-width ([CSS21], параграф 8.5.1).

Свойство outline-style может принимать те же значения, что и свойство border-style ([CSS21], параграф 8.5.3), за исключением значения hidden, которое недопустимо для определения стиля контура элемента. В дополнение к этому, CSS3 предусматривает возможность использования для свойства outline-style значения auto. При установке значения auto пользовательский агент получает возможность применять пользовательский стиль контура, который, как правило, является дефолтным стилем для свойственного используемой платформе пользовательского интерфейса, либо стилем более сложного характера, который не может быть описан средствами CSS, к примеру, контур с закругленными краями и полупрозрачной внешней кромкой с эффектом свечения. Тогда данная спецификация не определяет то, как значение свойства outline-color интегрируется или применяется (если вообще используется), когда стиль отображения контуров установлен в auto. Пользовательские агенты могут также интерпретировать значение auto как solid.

Свойство outline-color может принимать значения всех цветов, а также ключевое слово 'invert'. При указании в качестве значения ключевого слова invert, ожидается, что будет применено инвертирование цвета пикселей экрана. Этот часто используемый прием гарантирует, что граница фокусируемого элемента будет видна независимо от цвета фона.

Соответствующие требованиям спецификации ПА могут игнорировать значение invert на платформах, которые не поддерживают инверсию цвета пикселей экрана. В случае, если ПА не поддерживает значение invert, исходным значением свойства outline-color является ключевое слово currentColor [CSS3COLOR].

Свойство outline представляет собой сокращенный вариант определения всех трех параметров контура элемента outline-style, outline-width и outline-color.

Контур элемента одинаков на всех его сторонах. В отличие от границ, контур не предусматривает такие свойства как outline-top или outline-left и им подобные.

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

Пример 5

В этом примере вокруг элемента BUTTON устанавливается жирный контур:

button {outline: thick solid}

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

Пример 6

Если, допустим, необходимо отобразить толстую черную линию вокруг элемента при получении им фокуса и толстую красную линию в момент его активности, то для этого можно применить следующие правила:

:focus { outline: thick solid black }
:active { outline: thick solid red }
Поскольку контур не оказывает никакого влияния на процесс компоновки (то есть для него не резервируется место в модели бокса), то он может накладываться на другие элементы страницы.

7.5. Свойство outline-offset.

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

Название outline-offset
Допустимые значения: <расстояние> | inherit
Исходное значение: 0
Применяется к: все элементы
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: <расстояние> в абсолютных единицах (пикселях px или физических единицах)

Если вычисляемым значением свойства outline-offset является любая величина отличная от нуля, то контур элемента смещается от его границы на эту величину.

Пример 7

Так, допустим, если необходимо оставить зазор в 2 пикселя между фокусным контуром и элементом, который получает фокус или находится в активном состоянии, то можно использовать следующее правило:

:focus,:active { outline-offset: 2px }

8. Изменение размеров и переполнение.

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

8.1. Свойство resize.

Свойство resize позволяет автору определить может ли пользователь изменять размеры элемента и если да, то в каком направлении/направлениях.

Название resize
Допустимые значения: none | both | horizontal | vertical | inherit
Исходное значение: none
Применяется к: элементам, свойство overflow которых имеет значение отличное от visible
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: полученное при определении
none
Пользовательский агент делает недоступным механизм изменения размеров применительно к форматируемому элементу, при этом пользователь не имеет возможности манипулировать размерами элемента напрямую.
both
ПА предоставляет двунаправленный механизм изменения размеров, позволяющий пользователю настраивать обе размерности элемента, как ширину, так и его высоту.
horizontal
ПА предоставляет однонаправленный горизонтальный механизм изменения размеров, позволяющий пользователю настраивать лишь ширину элемента.
vertical
ПА предоставляет однонаправленный вертикальный механизм изменения размеров, позволяющий пользователю настраивать только высоту элемента.

На данный момент существует возможность контроля появления механизма прокрутки (если такой предусмотрен) для элемента с помощью свойства overflow (используя, к примеру, противоположные значения — overflow:scroll и overflow:hidden). Назначение свойства resize также заключатся в предоставлении возможности контроля внешнего вида элемента и управления функционалом механизма изменения размеров элемента (предоставляя для него бокс с подвижными краями либо виджет с фиксированными размерами).

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

Свойство resize применяется к элементам, вычисленное значение свойства overflow которых отлично от visible. Если свойство overflow устанавливает видимость контента в определенном направлении (то есть используется либо overflow-x, либо overflow-y), то свойство resize применяется к размерности(размерностям), для которой не установлено значение visible.

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

Наличие такого коэффициента изменений размерностей влечет за собой появление дополнительного условия вычисления ширины/высоты и связанного с ним форматирования, определенного в десятой главе CSS 2.1. В частности, это условие включается в представленный в разделах 10.4 и 10.7 CSS 2.1 спецификации алгоритм в виде дополнительного этапа между 1 и 2 шагами. Ниже представлен этот дополнительный шаг, в котором вместо [размерность] необходимо вставить сответствующую размерность — ширину для параграфа 10.4 и высоту для параграфа 10.7.

1b. Если коэффициент изменения [размерности] не равен 1.0, тогда предварительное значение фактической [размерности] умножается на этот коэффициент, после чего снова применяются приведенные выше правила, но на этот раз в качестве вычисленного значения [размерности] используется результат данного умножения.

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

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

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

Пример 8

Так, к примеру, для того чтобы предоставить пользователю возможность изменения размеров плавающих окон (iframe) и прокрутки их контента, можно применить следующее правило:

iframe,object[type^="text/"],
object[type$="+xml"],object[type="application/xml"]
{
overflow:auto;
resize:both;
}

8.2 Эллипсис переполнения: свойство 'text-overflow'.

Название text-overflow
Допустимые значения: (clip | ellipsis | <строка>){1,2} | inherit)
Исходное значение: clip
Применяется к: блочные контейнеры
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: полученное при определении

Это свойство определяет способ отображения строчного контента, который распространяясь в предусмотренном строкой направлении, переполняет свой блочный элемент контейнер («блок»), значение свойства overflow которого отлично от visible. Такое переполнение текстом может быть вызвано тем, что он, к примеру, предотвращен от переноса на другую строку (допустим, по причине использования white-space:nowrap или при наличии одного, слишком длинного слова, которое не вмещается в контейнер). Значения данного свойства имеют следующий смысл:

clip
Выходящий за рамки контейнера строчный контент обрезается. При этом символы могут отображаться частично.
ellipsis
Для представления обрезанного строчного контента отображается символ эллипсиса (U+2026). Вместо этого символа реализации могут использовать более подходящий для определенного языка/письменности символ эллипсиса или же троеточие "…", если специальный символ эллипсиса не предусмотрен.
<строка>
Отображается указанная строка, представляя обрезанный строчный контент. При обработке двунаправленного текста данная строка рассматривается как независимый параграф.

Значение <строка>, двузначный синтаксис {1,2}, а также сама функциональность, все находятся под риском.

Используемый при определении данного свойства термин «символ» выбран исключительно с целью повышения читабельности материала, а для реализаций под этим термином подразумевается «группа графем» [UAX29].

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

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

Детализация применения эллипсиса.
  • Использование эллипсиса имеет лишь визуальный эффект и не влияет на компоновку страницы и диспетчеризацию событий, связанных с указательными устройствами.
  • Эллипсис оформляется согласно стилям, применяемым к его блоку, и выравнивается по предусмотренной им базовой линии.
  • Эллипсис применяется только после завершения действий, связанных с относительным позиционированием и другими графическими преобразованиями.
  • Если для включения эллипсиса в строку недостаточно места, то должно быть обрезано отображение самого эллипсиса (с той же стороны, с которой были бы обрезаны находящиеся на этой же строке нейтральные символы, в случае применения значения clip).
  • В ходе взаимодействия пользователя с контентом (к примеру, редактировании, выделении, прокрутке) пользовательский агент может интерпретировать строковые значения или значение ellipsis свойства text-overflow как clip.

Пример 9

Примеры использования свойства text-overflow.

Приведенные ниже примеры демонстрируют применение свойства text-overflow к блочному элементу контейнеру, объем текста которого переполняет его размеры:

Пример CSS кода для элемента div:

div {
font-family:Helvetica,sans-serif;
width:3.2em; padding:.2em; border:solid .1em black; margin:1em 0;
}

Примеры фрагментов HTML кода, пояснения к их отображению и то, как они обрабатываются в вашим браузером:

фрагмент HTML кода как должен отображаться как обрабатывается вашим браузером
<div>
CSS IS OWESOME
</div>
Первый пример отображается как бокс с выходящим за его рамки текстом.
CSS IS AWESOME
<div style="text-overflow:clip;
overflow:hidden">
CSS IS OWESOME
</div>
Второй фрагмент отображается в виде того же бокса, но с текстом, обрезаемым за его пределами.
CSS IS OWESOME
<div style="text-overflow:ellipsis;
overflow:hidden">
CSS IS OWESOME
</div>
Для отображения третьего варианта используется тот же бокс, содержащий элемент эллипсиса, который представляет обрезанный текст.
CSS IS OWESOME
<div style="text-overflow:ellipsis;
overflow:hidden">
NESTED <p>PARAGRAPH</p>
WON'T ELLIPSE.
</div>

(*К ВЛОЖЕННОМУ ЭЛЕМЕНТУ ПАРАГРАФА ЭЛЛИПСИС НЕ ПРИМЕНЯЕТСЯ)

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

PARAGRAPH

WON’T ELLIPSE.

Примечание переводчика:
Прошу обратить внимание на то, что при полной поддержке браузером свойства text-overflow и всех его значений последний пример должен выглядеть вот так ⇒.
Давайте разберемся почему. Дело в том, что элемент div, являясь блочным контейнером может содержать контент только одного типа — либо строчного, либо блочного уровня. В первых трех примерах он содержит строчный контент (строка "CSS IS OWESOME"). В последнем, четвертом примере в состав элемента div включен блочный элемент параграф, после чего весь контент дива должен быть преобразован к одному, блочному уровню. То есть до и после элемента параграфа образуются анонимные блочные элементы. Согласно требованиям спецификации они должны наследовать значение свойства text-overflow своего родительского элемента (div), а значит к ним тоже должен применяться эллипсис при обрезании выходящего за рамки элемента текста. Что касается вложенного, явно определенного блочного элемента (параграф, содержащий слово "PARAGRAPH"), то он не должен наследовать это свойство, то есть он должен просто обрезаться.
По причине того, что данный вариант перевода спецификации публикуется на платформе WordPress, предусматривающей определенные ограничения, то даже в браузере, который полностью удовлетворяет требованиям спецификации последний пример может отображаться некорректно, а именно — к последнему анонимному блочному элементу, содержащему фразу "WON’T ELLIPSE." эллипсис не применяется (хотя должен), при этом его контент просто обрезается.
NES…

PARAGRAPH

WO… ELLI…

Сторона, на которой размещается элемент эллипсиса определяется в зависимости от значения свойства direction блока. Так, к примеру, в блоке, предусматривающем направленность распространения текста справа налево (direction:rtl) и с установленным свойством overflow:hidden, переполняющий его строчный контент будет обрезан с левой стороны, а значит в случае применения к блоку свойства text-overflow:ellipsis, эллипсис, представляющий обрезанный контент так же будет отображен слева.
Взаимодействие эллипсиса с интерфейсами прокрутки контента.

Этот параграф касается элементов, значение свойства text-overflow которых отлично от clip (далее в тексте non-clip значения свойства text-overflow), а для свойства overflow установлено значение scroll.

В случае, когда для элемента с non-clip значением свойства text-overflow и свойством overflow, определяющим прокрутку его контента в строчном направлении распространения текста, браузером предоставляется механизм прокрутки (к примеру, в виде отображаемой для элемента полосы прокрутки или соответствующего сенсорного интерфейса типа swipe-scroll и т.п.), предусмотрены дополнительные детали реализации такого взаимодействия, позволяющие повысить уровень удобства пользователя:

При прокрутке элемента (пользователем, посредством DOM манипуляций или с помощью свойства overflow-style [CSS3MARQUEE]), ранее скрытый его контент становится видимым. Значение свойства text-overflow не должно влиять на возможность отображения остального содержимого элемента. Если для этого свойства установлено non-clip значение, по мере прокрутки и появления в поле зрения дополнительного контента, реализации должны показывать, вмещается ли вновь представленный фрагмент контента в видимую область элемента, путем усечения только той части содержимого, которая в противном случае была бы обрезана (резервируя при этом необходимое пространство для отображения эллипсиса/строки) до тех пор, пока прокрутка элемента не достигнет позиции, при которой такой контент будет отображен полностью без использования символа эллипсиса или строки.

В процессе прокрутки и отображения одной части контента, другая его часть, естественно, будет прокручиваться в невидимую область с обратной стороны. И если эта прокрутка реализуется блочным элементом, который является контейнером такого содержимого, тогда реализациями должно быть предусмотрено отображение эллипсиса/строки в местах обрезания контента, таким же образом, как это описано выше в определении свойства, за исключением того, что эллипсис/строка в этом случае отображается с начальной (а не конечной), определяемой направленностью текста стороны блока (в соответствии со свойством direction).

В ходе такой прокрутки контента, при необходимости реализациям разрешается выполнять корректирование отображения эллипсисов/строк (к примеру, делать их примыкающими к краям бокса, а не к краям строк).

Если для отображения обеих начального и конечного эллипсиса/строки недостаточно места, тогда должен применяться только конечный эллипсис/строка.

9. Указывающие устройства и клавиатуры.

9.1. Взаимодействие с указывающим устройством.

9.1.1. Cвойство cursor.

Название cursor
Допустимые значения: [[<uri> [<x> <y>]?,]*
[auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out]] | inherit
Исходное значение: auto
Применяется к: все элементы
Возможность наследования: да
Процентные значения: не поддерживаются
Типы устройств: визуальные, интерактивные
Вычисляемое значение: полученное при определении, за исключением указанных относительных URL адресов, которые преобразовываются в их абсолютные эквиваленты

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

курсоры-изображения

<uri>
Используемый в качестве курсора элемент извлекается пользовательским агентом с помощью указанного URI. Если пользовательский агент по каким-либо причинам не может использовать первый курсор из списка представленных в определении свойства курсоров, то он должен сделать попытку применения второго курсора и т.д. Если же пользовательский агент не может использовать ни один из представленных пользователем элементов в качестве курсора, то для для его отображения он должен руководствоваться указанным в конце списка курсоров ключевым словом. Опциональные значения <x> и <y> — это координаты, необходимые для точного определения точки изображения, которая является указателем позиции (то есть горячей точкой).
<x>
<y>
Каждое значение представляется как <число>. X-координата и Y-координата представляют собой значения образуемой в рамках курсора-изображения системы координат (leftлевый отступ/topверхний отступ соответственно), с помощью которых выбирается определенная точка изображения. Если эти значения не указаны, тогда для представления такой позиции используется внутренняя горячая точка, определяемая внутри самого ресурса изображения. В случае, если оба значения не обозначены и для указанного курсора не определена горячая точка, то это приводит к тому же результату, что и определение обеих значений равных нулю.

курсоры общего назначения

auto
ПА выбирает необходимый для отображения тип курсора в соответствии с текущим контекстом.
default
Используется свойственный платформе стандартный тип курсора. Представляется, как правило, в виде стрелки-указателя.
none
Для элемента курсор не отображается.

курсоры для ссылок и курсоры состояний

context-menu
Для находящегося под курсором объекта предусмотрено контекстное меню. Обычно отображается как стрелка-указатель с маленьким графическим элементом в виде меню.
help
Для объекта, находящегося под курсором, доступна вспомогательная информация, пояснение. Отображается, как правило, в виде вопросительного знака или воздушного шара.
pointer
Курсором является рука-указатель, применяемый при наведении на ссылку.
progress
Индикатор хода выполнения. Программа выполняет определенные действия. Данный курсор отличается от следующего wait, тем, что в данном случае пользователь может продолжать взаимодействие с программой. Обычно представляется в виде крутящегося мяча, либо стрелки с часами или с песочными часами.
wait
Уведомляет о том, что программа занята и пользователю необходимо подождать. Зачастую отображается как часы или песочные часы.

курсоры выбора

cell
Обозначает, что имеется возможность выбора ячейки или ряда ячеек. Часто представляется в виде объемного знака «плюс» с точкой в центре.
crosshair
Простое перекрестье (может быть представлено в виде пересекающихся коротких отрезков, напоминающих знак +). Зачастую используется для индикации режима растрового выбора на плоскости.
text
Говорит о том, что под курсором находится текст, который может быть выделен. Как правило, отображается с помощью вертикального I-образного указателя (вертикальная каретка). Для вертикально расположенного текста пользовательские агенты могут автоматически отображать горизонтальный I-образный указатель/курсор (горизонтальная каретка) (как это предусмотрено ключевым словом vertical-text) или I-образный указатель, расположенный под любым другим углом в соответствии с определенным углом наклона отображаемого текста.
vertical-text
Указывает на возможность выбора вертикально расположенного текста. Представляется в виде горизонтального I-образного указателя (горизонтальной каретки).

курсоры перетаскивания

alias
Означает, что должен быть создан псевдоним или ярлык определенного объекта. Часто отображается как стрелка-указатель совместно с небольшой загнутой в сторону стрелкой.
copy
Говорит о том, что что-то должно быть скопировано. Представляется в виде стрелки-указателя с маленьким знаком «плюс» рядом.
move
Означает, что что-то должно быть перемещено (курсор с четырьмя стрелками).
no-drop
Показывает пользователю, что перемещаемый объект не может быть сброшен в месте текущего нахождения курсора. Зачастую отображается как рука-указатель с перечеркнутым маленьким кругом.
not-allowed
Запрашиваемое действие не может быть выполнено. Типичный способ представления — маленький зачеркнутый круг.

курсоры изменения размеров и прокрутки

e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize
Означает возможность смещения некоторых границ. Так, к примеру, курсор se-resize используется в случаях, когда изменение размеров производится, начиная с нижнего правого ("South-East" «юго-восточного») угла бокса.
ew-resize, ns-resize, nesw-resize, nwse-resize
Предоставляется курсор двунаправленного изменения размеров.
col-resize
Означает возможность изменения размеров объекта/колонки в горизонтальном направлении. Как правило, отображается в виде направленных направо и налево стрелок с разделяющей их вертикальной чертой.
row-resize
Означает возможность изменения размеров объекта/строки в вертикальном направлении. Обычно отображается в виде направленных вверх и вниз стрелок с разделяющей их горизонтальной чертой.
all-scroll
Показывает возможность прокрутки чего-нибудь в любом направлении. Часто представляется в виде четырех, направленных вниз, вверх, направо и налево стрелок с точкой в центре.

курсоры изменения масштаба

zoom-in, zoom-out
Говорит о возможности масштабирования (увеличения или уменьшения) чего-нибудь и, как правило, изображается в виде лупы с расположенным в ее центре знаком + для zoom-in или для zoom-out.

Любое не поддерживаемое пользовательским агентом значение может интерпретироваться им как auto. Так, например, на платформах, которые в принципе не предусматривают наличие context-menu курсора, ПА может взамен отображать default курсор или другой подходящий вариант.

Пример 10

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

:link,:visited {
cursor: url(example.svg#linkcursor),
url(hyper.cur),
url(hyper.png) 2 3,
pointer
}

В этом примере, в качестве используемого для всех гиперссылок курсора (включая ранее посещенные) установлен внешний SVG курсор ([SVG10], параграф 16.8.3). Не поддерживающие использование SVG курсоров пользовательские агенты могут перейти непосредственно ко второму значению и попытаться применить определяемый файлом hyper.cur курсор. Если и этот формат курсора также не поддерживается, то пользовательский агент может воспользоваться третьим вариантом — курсором, представленным изображением hyper.png с явно заданной горячей точкой. И, наконец, если пользовательский агент не в состоянии использовать ни один из форматов представляющих курсоры изображений, то пользовательский агент может перейти к последнему значению и просто отобразить курсор в виде руки-указателя pointer.

9.2. Управление с помощью клавиатуры.

Свойство nav-index представляет собой независимый от метода ввода способ определения порядка последовательной навигации (также известный как «порядок табуляции»).

Название nav-index
Допустимые значения: auto | <число> | inherit
Исходное значение: auto
Применяется к: все разблокированные элементы
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: интерактивные
Вычисляемое значение: полученное при определении
auto
Соответствующая элементу позиция в порядке последовательной навигации определяется пользовательским агентом автоматически.
<число>
Указанное число (не должно быть отрицательным и нулем) означает позицию элемента в очередности последовательной навигации. Значение 1 значит, что элемент является первым. Навигация по элементам, для которых определено одно значение nav-index, при достижении соответствующей их значению позиции навигации производится согласно предусмотренному документом порядку.

Данное свойство представляет собой замену определенному в HTML4/XHTML1 атрибуту tabindex ([HTML401], параграф 17.11.1). Ниже представлено позаимствованное и слегка перефразированное пояснение:

Это свойство определяет позицию текущего элемента в установленном последовательной навигацией порядке в рамках текущего документа.

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

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

  1. Элементы, поддерживающие свойство nav-index и у которых ему присвоено положительное значение, при навигации должны обрабатываться первыми. Навигация производится начиная с элемента, обладающего самым меньшим значением nav-index в направлении элемента с самым большим значением свойства. Значения не обязательно должны указываться в строгой последовательности или начинаться с какой-либо определенной величины. Навигация по элементам с одинаковыми значениями свойства nav-index должна производиться в соответствии с устанавливаемым документом порядком.
  2. Следующими в навигационной последовательности идут элементы, не поддерживающие свойство nav-index или поддерживающие, но с определенным для него значением auto. Порядок навигации по этим элементам устанавливается документом.
  3. Заблокированные элементы не задействуются в ходе последовательной навигации по документу.

Реальная комбинация клавиш, с помощью которой осуществляется последовательная навигация или производится активация элемента, зависит от конфигурации пользовательского агента (так, к примеру, клавиша табуляции Tab, как правило, используется для последовательной навигации, а клавиша ввода Enter для активации выбранного элемента).

Пользовательские агенты могут также определять комбинацию клавиш, используемую для обратной последовательной навигации. Когда порядок табуляции достигает конечной (начальной) позиции, пользовательскому агенту разрешается зациклить навигацию по кругу, перейдя к ее начальной (конечной) позиции. Для производимой в обратном порядке последовательной навигации зачастую используется комбинация клавиш shift-tab.

Свойство nav-index находится под риском.
Название nav-up, nav-right, nav-down, nav-left
Допустимые значения: auto | <id> [ current| root | <target-name> ]? | inherit
Исходное значение: auto
Применяется к: все разблокированные элементы
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: интерактивные
Вычисляемое значение: полученное при определении
auto
В ответ на использование элемента ввода направленной навигации пользовательский агент автоматически определяет, какому из элементов передается фокус в процессе навигации.
<id>
Значение <id> состоит из знака '#' и следующего за ним идентификатора, подобно идентификатору фрагмента ресурса в URL. Это значение указывает на элемент, к которому переходит фокус при навигации в ответ на активацию элемента ввода направленной навигации, соответствующего свойству, которому данное значение присвоено.

Если значение <id> ссылается на уже обладающий в данный момент фокусом элемент, то активация соответствующего данному nav-свойству элемента ввода направленной навигации игнорируется, так как нет никакой необходимости в перенаправлении фокуса на тот же элемент.

<target-name>
Параметр <target-name> указывает на целевой фрейм, к которому должен перейти фокус в процессе навигации. Этот параметр представляется строкой, которая не должна начинаться с символа подчеркивания '_'. Если указанный целевой фрейм не существует, то данный параметр будет интерпретирован как ключевое слово current, а это означает, что в качестве целевого должен использоваться фрейм, в котором находится форматируемый элемент. Ключевое слово root предписывает пользовательскому агенту выбрать окно полностью.

Пользовательские агенты устройств, которые предусматривают наличие клавиш направленной навигации, должны реагировать на их активацию путем перемещения фокуса в направлении, определяемом четырьмя соответствующими свойствами направленной навигации nav-* (nav-up, nav-right, nav-down и nav-left). Данная спецификация не устанавливает какие именно клавиши устройства используются для направленной навигации.

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

Пример 11

Пример: позиционированные кнопки.

Рассмотрим пример, демонстрирующий случай с четырьмя позиционированными в ромбовидной форме кнопками, порядок последовательной и направленной навигации фокуса которых определён таким образом, что в обеих случаях фокус перемещается по часовой стрелке (или против часовой стрелки) по кругу ромбовидной формы, независимо от того использует пользователь последовательную или направленную навигацию.

button { position:absolute }

button#b1 {
top:0; left:50%;
nav-index:1;
nav-right:#b2; nav-left:#b4;
nav-down:#b2; nav-up:#b4;
}

button#b2 {
top:50%; left:100%;
nav-index:2;
nav-right:#b3; nav-left:#b1;
nav-down:#b3; nav-up:#b1;
}

button#b3 {
top:100%; left:50%;
nav-index:3;
nav-right:#b4; nav-left:#b2;
nav-down:#b4; nav-up:#b2;
}

button#b4 {
top:50%; left:0;
nav-index:4;
nav-right:#b1; nav-left:#b3;
nav-down:#b1; nav-up:#b3;
}

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

Свойства nav-up, nav-right, nav-down и nav-left находятся под риском.

9.2.3. Редактор метода ввода: свойство ime-mode.

Название ime-mode
Допустимые значения: auto | normal | active | inactive | disabled | inherit
Исходное значение: auto
Применяется к: текстовые поля
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: интерактивные
Вычисляемое значение: полученное при определении

Свойство ime-mode позволяет контролировать состояние редактора метода ввода для текстовых полей.

auto
Никаких изменений в состоянии текущего редактора метода ввода не происходит. Это значение является исходным.
normal
IME устанавливается в нормальное состояние. Данное значение может быть использовано в пользовательских таблицах стилей для переопределения применяемых в документе настроек.
active
Исходное состояние редактора метода ввода активно. Ввод текста выполняется с его помощью до тех пор, пока пользователь намеренно не отменит его.
inactive
Исходное состояние редактора метода ввода не активно, но пользователь при желании может его активировать.
disabled
Редактор метода ввода заблокирован и у пользователя нет возможности активировать его.

Пример 12

Пример: блокирование возможности выбора метода ввода текста.

<input type="text" name="name" value="initial value" style="ime-mode: disabled">

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

Пример 13

Пример: выбор пользователя.

input[type=password] {
ime-mode: auto !important;
}

Этот пример CSS кода может быть использован в рамках пользовательской таблицы стилей для обеспечения нормального поведения полей ввода паролей принудительным образом.

В общем-то, манипулирование IME режимом не свойственно для обычных, общественных сайтов. Это свойство предназначено для использования в рамках веб-приложений и им подобных документов. Тем не менее, авторы не должны полностью полагаться на IME блокировку с целью предотвращения ввода символов из расширенного набора в поля формы, поскольку даже при заблокированном состоянии IME пользователи могут вставлять символы расширенного набора из буфера обмена.
Свойство ime-mode находится под риском.

Приложение A. Благодарности.

Это приложение является информационным.

Благодарим за отклики и участие в проекте: L. David Baron, Bert Bos, Matthew Brealey, Ada Chan, Michael Day, Micah Dubinko, Elika E., Steve Falkenburg, Al Gilman, Ian Hickson, Bjoern Hoehrmann, David Hyatt, Richard Ishida, Sho Kuwamoto, Susan Lesch, Peter Linss, Brad Pettit, Alexander Savenkov, Sebastian Schnitzenbaumer, Etan Wexler, David Woolley и Domel.

Приложение B. Список литературы.

Нормативные ссылки.

[CSS21]
Bert Bos; и другие. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. («Каскадные таблицы стилей — Уровень 2 — Редакция 1. Спецификация».) 7 июня 2011 года. Рекомендация W3C консорциума. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607.
[CSS3COLOR]
Tantek Celik; Chris Lilley; L. David Baron. CSS Color Module Level 3. («CSS Модуль — Цвет — Уровень 3».) 7 июня 2011 года. Рекомендация W3C консорциума. URL: http://www.w3.org/TR/2011/REC-css3-color-20110607.
[RFC1738]
T. Berners-Lee; L. Masinter; M. McCahill. Uniform Resource Locators (URL). («Унифицированный идентификатор pecypca».) Декабрь 1994 года. Интернет документ RFC («Запрос на комментарии») 1738. URL: http://www.ietf.org/rfc/rfc1738.txt.
[RFC1808]
R. Fielding. Relative Uniform Resource Locator. («Относительный унифицированный идентификатор ресурса».) Июнь 1995 года. Интернет документ RFC («Запрос на комментарии») 1808. (Переопределен интернет документом RFC 3986.) URL: http://www.ietf.org/rfc/rfc1808.txt.
[RFC2119]
S. Brander. Key words for use in RFCs to Indicate Requirement Levels. («Ключевые слова, используемые в RFC документах для указания уровня важности требований».) Интернет документ RFC («Запрос на комментарии») 2119. URL: http://www.ietf.org/rfc/rfc2119.txt.
[SELECT]
Tantek Çelik; и другие. Selectors Level 3. («CSS модуль — Селекторы — Уровень 3».) 29 сентября 2011 года. W3C рекомендация. URL: http://www.w3.org/TR/2011/REC-css3-selectors-20110929/.
[UAX29]
Mark Davis. Unicode Text Segmentation. («Стандарт сегментации текста Unicode».) 8 октября 2010 года. Дополнение к стандарту Unicode #29. URL: http://www.unicode.org/reports/tr29/tr29-17.html.
[URI]
T. Berners-Lee; R. Fielding; L. Masinter. Uniform Resource Identifiers (URI): generic syntax. («Унифицированные идентификаторы ресурсов (URI): общий синтаксис».) Январь 2005 года. Интернет документ RFC («Запрос на комментарии».) 3986. URL: http://www.ietf.org/rfc/rfc3986.txt.

Информативные ссылки.

[CSS1]
Håkon Wium Lie; Bert Bos. Cascading Style Sheets (CSS1) Level 1 Specification. («Каскадные таблицы стилей (CSS1) — Уровень 1 — Спецификация».) 11 апреля 2008 года. W3C рекомендация. URL: http://www.w3.org/TR/2008/REC-CSS1-20080411.
[CSS2]
Ian Jacobs; и другие. Cascading Style Sheets, level 2 (CSS2) Specification. («Каскадные таблицы стилей (CSS2) — Уровень 2 — Спецификация».) 11 апреля 2008 года. W3C рекомендация. URL: http://www.w3.org/TR/2008/REC-CSS2-20080411.
[CSS3GENCON]
Ian Hickson. CSS3 Generated and Replaced Content Module. («CSS Модуль — Генерируемый и замещаемый контент — Уровень 3».) 14 мая 2003 года. W3C рабочий проект (в стадии разработки). URL: http://www.w3.org/TR/2003/WD-css3-content-20030514.
[CSS3MARQUEE]
Bert Bos. CSS Marquee Module Level 3. («CSS модуль — Бегущая строка — Уровень 3».) 5 декабря 2008 года. W3C потенциальная рекомендация (в стадии разработки). URL: http://www.w3.org/TR/2008/CR-css3-marquee-20081205.
[CSSUI]
Tantek Çelik. User Interface for CSS3. («Компоненты пользовательского интерфейса, рекомендуемые для включения в CSS3».) 16 февраля 2000 года. W3C рабочий проект (отмененный). URL: http://www.w3.org/TR/2002/WD-css3-userint-20020802.
[HTML401]
Dave Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 Specification. («HTML 4.01 — Спецификация».) 24 декабря 1999 года. W3C рекомендация. URL: http://www.w3.org/TR/1999/REC-html401-19991224.
[HTML5]
Ian Hickson. HTML5. 25 мая 2011 года. W3C рабочий проект (в стадии разработки). URL: http://www.w3.org/TR/2011/WD-html5-20110525/.
[SVG10]
Jon Ferraiolo. Scalable Vector Graphics (SVG) 1.0 Specification. («Масштабируемая векторная графика (SVG) 1.0 — Спецификация».) 4 сентября 2011 года. W3C рекомендация. URL: http://www.w3.org/TR/2001/REC-SVG-20010904.
[SVG11]
Erik Dahlström; и другие. Scalable Vector Graphics (SVG) 1.1 (Second Edition). («Масштабируемая векторная графика (SVG) 1.1 (Вторая версия)».) 16 августа 2011 года. W3C рекомендация. URL: http://www.w3.org/TR/2011/REC-SVG11-20110816/.
[UAAG10]
Ian Jacobs; Jon Gunderson; Eric Hansen. User Agent Accessibility Guidelines 1.0. («Руководящие положения по созданию доступных пользовательских агентов 1.0».) 17 декабря 2002 года. W3C рекомендация. URL: http://www.w3.org/TR/2002/REC-UAAG10-20021217/.
[XFORMS11]
John M. Boyer. XForms 1.1. 18 августа 2009 года. W3C Proposed Recommendation (в стадии разработки). URL: http://www.w3.org/TR/2009/PR-xforms11-20090818.
[XHTML10]
Steven Pemberton. XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition). («XHTML™ 1.0 — Расширяемый язык гипертекстовой разметки (Вторая версия)».) 1 августа 2002 года. W3C рекомендация. URL: http://www.w3.org/TR/2002/REC-xhtml1-20020801.
[XHTML11]
Murray Altheim; Shane McCarron. XHTML™ 1.1 — Module-based XHTML. («XHTML™ 1.1 Модульный XHTML».) 31 мая 2001 года. W3C рекомендация. URL: http://www.w3.org/TR/2001/REC-xhtml11-20010531.
[XML10]
C.M. Sperbert-McQueen; и другие. Extensible Markup Language (XML) 1.0 (Fifth Edition). («Расширяемый язык разметки (XML) 1.0 (Пятая версия)».) 26 ноября 2008 года. W3C рекомендация. URL: http://www.w3.org/TR/2008/REC-xml-20081126/.

Приложение C. Изменения.

Это приложение является информационным.

Этот проект в целом содержит множество редакционных/грамматических/орфографических исправлений, а также несколько новых содержательных примеров. В данном приложении описаны незначительные функциональные изменения версии Candidate Recommendation (CR) от 11 мая 2004 года, которые были сделаны для того чтобы отразить внедрение ее компонентов в средства реализации (или же его недостаток) произошедшее за последние семь лет. В частности, все произведенные начиная с CR версии изменения можно отнести к одной из трех категорий:

  • Незначительные усовершенствования компонентов, сделанные на основе опыта их реализации.
  • Исключение компонентов, которые не были реализованы или реализованы недостаточно, чтобы выйти из статуса CR.
  • Добавление небольшого количества новых, но уже совместимым образом реализованных компонентов.

Список существенных изменений.

  • Изъят компонент System Appearance, включая определяющее внешний вид свойство и его значения, а также расширение системных шрифтов в виде условного обозначения для свойства font.
  • Исключен псевдоэлемент ::selection, поскольку он был изъят из «CSS модуль — Селекторы — Уровень 3» в связи с выявленными в ходе тестирования проблемами функциональной совместимости, а также для дальнейшего детального анализа и доработки.
  • Для свойства box-sizing добавлено значение padding-box.
  • Детализировано свойство cursor касательно его применения к границе, отступам и области контента элемента.
  • Добавлено новое свойство — ime-mode.
  • Добавлено новое свойство — text-overflow.

Приложение D. Дополнения к дефолтной таблице стилей для HTML.

Это приложение является информационным.

Ниже представлены потенциальные дополнения к базовому типу таблицы стилей, необходимые для отображения элементов управления HTML форм, а также несколько презентационных динамических атрибутов:

:enabled:focus {
outline: 2px inset;
}

button,
input[type=button],
input[type=reset],
input[type=submit],
input[type=checkbox],
input[type=radio],
textarea,
input,
input[type=text],
input[type=hidden],
input[type=password],
input[type=image]
{
display: inline-block;
white-space: nowrap;
}

button
{
/* отдельно устанавливается способ обработки пробельного контента в рамках
тега BUTTON */
white-space:normal;
}

input[type=reset]
{
/* используемое по умолчанию содержимое кнопки сброса "reset"
(HTML4/XHTML1 элемент input type=reset) */
content: "Reset";
}

input[type=submit]
{
/* используемое по умолчанию содержимое кнопки подтверждения "submit"
(HTML4/XHTML1 элемент input type=submit) */
content: "Submit";
}

input[type=button],
input[type=reset][value],
input[type=submit][value]
{
/* текстовое содержание/надпись на "input" кнопках
(HTML4/XHTML1 элементы input type=button[reset][submit]) */
content: attr(value);
}

textarea
{
/* отдельно устанавливается способ обработки пробельного контента в рамках
тега TEXTAREA */
white-space:pre-wrap;
}

input[type=hidden]
{
/* отдельно устанавливается невидимость HTML4/XHTML1 скрытого
текстового поля */
display: none;
}

input[type=image]
{
display: inline-block;
content: attr(src,url);
border: none;
}

select[size]
{
/* устанавливается внешний вид HTML4/XHTML1 списка <select>, содержащего
более одного элемента */
display: inline-block;
height: attr(size,em);
}

select,select[size=1]
{
/* устанавливается внешний вид HTML4/XHTML1 списка <select>, содержащего
один элемент — выпадающее меню */
display: inline-block;
height: 1em;
overflow: hidden;
}

select[size]:active
{
/* устанавливается способ отображения активного HTML4/XHTML списка
<select>, содержащего более одного элемента */
display: inline-block;
}

optgroup,option
{
display: block;
white-space: nowrap;
}

optgroup[label],option[label]
{
content: attr(label);
}

option[selected]::before
{
display: inline;
content: check;
}

*[tabindex] { nav-index:attr(tabindex,number) }

/* Хотя данная спецификация не определяет явный способ изменения размеров
фреймов FRAME, с помощью следующих правил можно достаточно точно эмитировать
требуемое поведение. */

/*

frame { resize:both }
frame[noresize] { resize:none }

*/

Приложение E: Комплексный тест.

Это приложение является информационным.

Данная спецификация должна ссылаться на тест, составленный в соответствии с требованиями "CSS Test Suite Documentation" («Документация по комплексному тесту CSS») и отвечающий документу"CSS2.1 Test Case Authoring Guidelines" («Руководящие положения по проведению контрольного тестирования CSS2.1»). Комплексный тест должен предоставлять пользовательским агентам возможность верификации базового уровня соответствия требованиям спецификации. Представленный здесь комплексный тест не претендует на то чтобы быть исчерпывающим и не включает все возможные комбинации относящихся к пользовательскому интерфейсу компонентов. Проведение таких тестирований будет доступно на главной странице сайта CSS Test Suites.

Соответствующий вопрос: 1.

Каталог.

Это приложение является информационным.

Каталог свойств.

Это приложение является информационным.

Свойство

Значения

Исходное
значение

Применяется к

Возмож-ность
наследо-вания

Процент-ные
значения

Типы
устройств

box-sizing

content-box | padding-box | border-box | inherit

content-box

все элементы, поддержи-вающие ширину и высоту

нет

не поддержи-ваются

визуальные

content

icon

анало-гично опреде-лению в CSS 2.1

аналогично определению в CSS 2.1

анало-гично опреде-лению в CSS 2.1

анало-гично опреде-лению в CSS 2.1

анало-гично опреде-лению в CSS 2.1

cursor

[ [<uri> [<x> <y>]?,]* [ auto | default | none |
context-menu | help | pointer | progress | wait | cell | crosshair |
text | vertical-text | alias | copy | move | no-drop | not-allowed |
e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize |
sw-resize | w-resize | ew-resize | ns-resize | nesw-resize |
nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out
] ] | inherit

auto

все элементы

да

не поддержи-ваются

визуальные, интерактив-ные

icon

auto | <uri> [, <uri>]* | inherit

auto

все элементы

нет

не поддержи-ваются

все

ime-mode

auto | normal | active | inactive | disabled | inherit

auto

текстовые поля

нет

не поддержи-ваются

интерактив-ные

nav-index

auto | <number> | inherit

auto

все разблоки-рованные элементы

нет

не поддержи-ваются

интерактивные

nav-up, nav-right, nav-down, nav-left

auto | <id> [ current | root | <target-name> ]? |
inherit

auto

все разблоки-рованные элементы

нет

не поддержи-ваются

интерактивные

outline

[ <'outline-color'> ||
<'outline-style'> ||
<'outline-width'> ] | inherit

смотри индиви-дуальные свойства

все элементы

нет

не поддержи-ваются

визуальные

outline-color

<color> | invert | inherit

invert

все элементы

нет

не поддержи-ваются

визуальные

outline-offset

<length> | inherit

0

все элементы

нет

не поддержи-ваются

визуальные

outline-style

auto | <border-style> | inherit

none

все элементы

нет

не поддержи-ваются

визуальные

outline-width

<border-width> | inherit

medium

все элементы

нет

не поддержи-ваются

визуальные

resize

none | both | horizontal | vertical | inherit

none

элементы со значением свойства 'overflow' отличным от 'visible'

нет

не поддержи-ваются

визуальные

text-overflow

( clip | ellipsis | <string> ){1,2} | inherit

clip

блоки контейнеры

нет

не поддержи-ваются

визуальные