18  Интерфейс пользователя

Содержание


18.1 Курсоры: качество 'cursor'

'cursor'
Значение:[ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit
Начальное:auto
Применяется:  ко каждом элементам
Наследуется:да
Процентное:N/A
Носитель:визуальный, интерактивный

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

auto
пользовательский шпион (ПА) определяет курсор на базе нынешнего контекста.
crosshair
простой крест (скажем, увеличение знака "+" с подмогой коротких отрезков).
default
курсор по умолчанию, зависящий от платформы. Зачастую отображается стрелкой.
pointer
курсор - указатель на ссылку.
move
обозначает то, что перемещается.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
обозначают перемещение какого-нибудь края. Скажем, курсор 'se-resize' применяется, если передвижение начинается в юго-восточном углу бокса.
text
обозначает текст, тот, что может быть выделен. Зачастую отображается как вертикальная черта I.
wait
обозначает, что программа занята и пользователь должен подождать. Зачастую отображается как (песочные) часы.
help
для объекта под курсором имеется вспомогательная информация. Зачастую отображается как знак вопроса либо воздушный шар.
<uri>
ПА получает курсор из источника, обозначенного в URI. Если ПА не может обработать 1-й курсор из списка курсоров, он должен попытаться обработать 2-й, и т.д. Если ПА не может обработать ни один курсор, определённый пользователем, он обязан применять всеобщий курсор в конце списка.

Пример(ы):

P { cursor : url("mything.cur"), url("second.csr"), text; }

18.2 Предпочтительные цвета пользователя

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

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

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

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

ActiveBorder
Рамка энергичного окна.
ActiveCaption
Заголовок энергичного окна.
AppWorkspace
Цвет фона многодокументного интерфейса.
Background
Фон рабочего стола.
ButtonFace
Цвет переднего плана 3-мерных элементов.
ButtonHighlight
Тёмная тень для 3-мерных элементов (для краёв, выступающих из ясной основы).
ButtonShadow
Цвет тени для 3-мерных элементов.
ButtonText
Текст кнопки.
CaptionText
Текст заголовка, бокса и в боксе прокручиваемого списка.
GrayText
Серый ("недоступен") текст. Это цвет установлен в #000 на тот случай, если нынешний дисплей не поддерживает сплошной серый цвет.
Highlight
Объект(ы), выделенный в элементе управления.
HighlightText
Текст объекта(ов), выделенного в элементе управления.
InactiveBorder
Рамка неактивного окна.
InactiveCaption
Заголовок неактивного окна.
InactiveCaptionText
Цвет текста неактивного заголовка.
InfoBackground
Цвет фона элементов подсказки.
InfoText
Цвет текста элементов подсказки.
Menu
Фон меню.
MenuText
Текст меню.
Scrollbar
Серая область прокрутки.
ThreeDDarkShadow
Тёмная тень для 3-мерных элементов дисплея.
ThreeDFace
Цвет переднего плана для 3-мерных элементов дисплея.
ThreeDHighlight
Цвет подсветки для 3-мерных элементов дисплея.
ThreeDLightShadow
Светлый цвет для 3-мерных элементов дисплея (для краёв, выступающих из ясной основы).
ThreeDShadow
Тёмная тень для 3-мерных элементов дисплея.
Window
Фон окна.
WindowFrame
Кадр окна.
WindowText
Текст в окнах.

Пример(ы):

Скажем, дабы установить цвета фона и переднего плана в параграфе в те же значения, что и у окна пользователя, напишите так:

P { color: WindowText; background-color: Window }

18.3 Предпочтительные шрифты пользователя

Как и с цветами, авторы могут специфицировать шрифты так, дабы применять системные источники пользователя. См. детали в свойстве 'font'.


18.4 Динамические силуэты: качество 'outline'

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

  1. Контуры не занимают пространство.
  2. Контуры могут не быть прямоугольными.

Свойства силуэтов руководят жанром этих динамических силуэтов.

'outline'
Значение:[ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
Начальное:см. определенные свойства
Применяется:  ко каждому элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный, интерактивный
'outline-width'
Значение:<border-width> | inherit
Начальное:medium
Применяется: ко каждому элементам
Наследуется:нет
Процентное: N/A
Носитель:визуальный, интерактивный
'outline-style'
Значение:<border-style> | inherit
Начальное:none
Применяется: ко каждым элементам
Наследуется:нет
Процентное:  N/A
Носитель:визуальный, интерактивный
'outline-color'
Значение:<color> | invert | inherit
Начальное:invert
Применяется: ко каждом элементам
Наследуется:нет
Процентное: N/A
Носитель:визуальный, интерактивный

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

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

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

Свойство 'outline-width' принимает те же значения, что и 'border-width'.

Свойство 'outline-style' принимает те же значения, что и 'border-style', за исключением 'hidden', тот, что не является возможным жанром силуэта.

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

Свойство 'outline' это сокращённое качество, устанавливающее все три: 'outline-style', 'outline-width' и 'outline-color'.

Обратите внимание, что силуэт идентичен на всех сторонах. В различие от рамок, свойства 'outline-top' либо 'outline-left' отсутствуют.

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

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

Пример(ы):

Прорисовка толстого силуэта вокруг элемента BUTTON:

BUTTON { outline-width : thick }

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


18.4.1 Силуэты и фокус

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

Пример(ы):

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

:focus  { outline: thick solid black }
:active { outline: thick solid red }

18.5  Увеличение

Рабочая группа CSS считает, что увеличение документа либо его части не должно специфицироваться через таблицы жанров. ПА могут поддерживать такое увеличение различными путями (скажем, увеличивать изображение, усиливать звук и т.п.).

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