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
Применимо:; все элементы
Наследуется: да
Процент:   неопр.
Отображ:   визуальное, интерактивное

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

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

Пример(ы):

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

18.2 Пользовательские установки для цветов

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

  1. Создавать страницы, подлаживаемые под заданные пользователем взгляды и настроения.
  2. Создавать страницы, которые могут быть более гибкими за счет вляния установок пользователя (They produce pages that may be more accessible as the current user settings may be related to a disability).

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

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

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

ActiveBorder
Граница активного окна (Active window border).
ActiveCaption
Заголовок активного окна (Active window caption).
AppWorkspace
Цвет фона для многодокументного интерфейса (Background color of multiple document interface).
Background
Обои десктопа (Desktop background).
ButtonFace
Цвет лицевой поверхности трехмерных элементов интерфейса, напр. кнопок (Face color for three-dimensional display elements).
ButtonHighlight
Темная теньтрехмерных элементов интерфейса, граней, противоположных освещению (Dark shadow for three-dimensional display elements (for edges facing away from the light source)).
ButtonShadow
Цвет тени трехмерных элементов (Shadow color for three-dimensional display elements).
ButtonText
Текст на кнопке (Text on push buttons).
CaptionText
Текст заголовка окна, для размеров поля и стрелок скроллинга, (Text in caption, size box, and scrollbar arrow box.)
GrayText
Серый "незадействованный" текст. Этот текст устанавливается как #000, если текущий дисплей не поддерживает чистого серого цвета. (Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color).
Highlight
Подсвеченный элемент, находящийся в фокусе (Item(s) selected in a control.)
HighlightText
Подсвеченный текст элемента в фокусе (Text of item(s) selected in a control.)
InactiveBorder
Граница неактивного окна (Inactive window border).
InactiveCaption
Заголовок неактивного окна (Inactive window caption).
InactiveCaptionText
Текст заголовка неактивного окна (Color of text in an inactive caption).
InfoBackground
Фон всплывающей подсказки (Background color for tooltip controls).
InfoText
Текст всплывающей подсказки (Text color for tooltip controls).
Menu
Фон меню (Menu background).
MenuText
Текст меню (Text in menus).
Scrollbar
Полоса скроллинга (Scroll bar gray area).
ThreeDDarkShadow
Темная тень трехмерного элемента (Dark shadow for three-dimensional display elements).
ThreeDFace
Лицевая сторона трехмерного элемента (Face color for three-dimensional display elements).
ThreeDHighlight
Подсветка трехмерного элемента (Highlight color for three-dimensional display elements).
ThreeDLightShadow
Блик трехмерного элемента (грани со стороны источника света) (Light color for three-dimensional display elements (for edges facing the light source)).
ThreeDShadow
Темная тень трехмерного элемента (Dark shadow for three-dimensional display elements).
Window
Фон окна (Window background).
WindowFrame
Рамка окна (Window frame).
WindowText
Текст в окне (Text in windows).

Пример(ы):

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

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

18.3 Пользовательские установки для шрифтов

Так же, как и для цветов, авторы могут определять шрифты, как зависимые от системных настроек пользователя. Детали см. свойство 'font' .

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

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

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

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

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

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

Контур отрисовывается только снаружи границы края.

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

Свойство '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 Контуры и фокус

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

Пример(ы):

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

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

18.5 Увеличение

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

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


Copyright (c) 1997-1999 ВебКлуб
Email: webclub@webclub.ru
Оригинальная идея Андрей Новиков
www.reklama.ru. The Banner Network.