2.15. CSS3 UI
Спецификация CSS3 UI описывает свойства и значения, связанные с пользовательским интерфейсом.
Свойства для стилизации элементов взаимодействия с пользователем
- Содержание:
- 1. Свойства внешнего контура
- 1.1. Краткая запись внешнего контура: свойство outline
- 1.2. Толщина внешнего контура: свойство outline-width
- 1.3. Узор внешнего контура: свойство outline-style
- 1.4. Цвет внешнего контура: свойство outline-color
- 1.5. Смещение внешнего контура: свойство outline-offset
- 2. Изменение размера блоков: свойство resize
- 3. Стилизация курсора: свойство cursor
- 4. Цвет каретки вставки: свойство caret-color
1. Свойства внешнего контура
Контуры позволяют выделять активные элементы интерфейса, такие как, кнопки, поля формы, карты изображений и т.п.
Браузеры часто отображают контуры элементов в состоянии :focus, поэтому не рекомендуется делать контур невидимым для таких элементов без альтернативного механизма выделения.
Контур всегда находится сверху и не влияет на положение или размер блока или любых других блоков. Поэтому отображение или скрытие контуров не вызывает перекомпоновку.
Части контура не обязательно должны быть прямоугольными, например, он повторяет закругленные углы элемента.
1.1. Краткая запись внешнего контура: свойство outline
Свойство представляет краткую запись свойств outline-color outline-style outline-width. Значение по умолчанию outline: invert none medium.
Свойство не наследуется.
Синтаксис
outline: dotted;
outline: gold solid;
outline: inset thick;
outline: pink solid 2px;
outline: inherit;
outline: initial;1.2. Толщина внешнего контура: свойство outline-width
Свойство outline-width задает толщину внешнего контура, принимает те же значения, что и свойство border-width.
Свойство не наследуется.
| outline-width | |
|---|---|
| Значения: | |
| длина | Значение задается в единицах длины. |
| thin/medium/thick | Длина, соответствующая этим значениям, не определена, но значения постоянны по всей веб-странице и thin ≤ medium ≤ thick. Браузер может сделать толщину зависимой от среднего размера шрифта. Значение по умолчанию medium. |
| inherit | Наследует значение свойства от родительского элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
Синтаксис
outline-width: thin;
outline-width: medium;
outline-width: thick;
outline-width: 2px;
outline-width: 0.1em;
outline-width: inherit;1.3. Узор внешнего контура: свойство outline-style
Свойство outline-style принимает те же значения, что и border-style, за исключением значения hidden.
Свойство не наследуется.
| outline-style | |
|---|---|
| Значения: | |
| auto | Значение позволяет браузеру отображать стиль контура по умолчанию или более богатым стилем, например контуром с закругленными краями с полупрозрачными внешними пикселями, который кажется светящимся. Также, браузеры могут рассматривать это значение как solid. |
| none | Отсутствие внешнего контура. Значение по умолчанию. |
| dotted |
|
| dashed |
|
| solid |
|
| double |
|
| groove |
|
| ridge |
|
| inset |
|
| outset |
|
| inherit | Наследует значение свойства от родительского элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
Синтаксис
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;
outline-style: inherit;
outline-style: initial;1.4. Цвет внешнего контура: свойство outline-color
Свойство outline-color позволяет установить цвет внешнего контура с помощью значений цвета и ключевого свойства invert.
Свойство не наследуется.
| outline-color | |
|---|---|
| Значения: | |
| invert | Значение выполнит инверсию цвета пикселей на экране. Это обеспечивает видимость границы фокуса независимо от цвета фона. Цвет линии (обычно черный) устанавливается автоматически, создавая контраст с основным содержимым. Если браузер не поддерживает данное значение, тогда значением свойства будет ключевое слово currentColor. Значение по умолчанию. |
| цвет | Значение принимает все форматы цвета свойства color. |
| inherit | Наследует значение свойства от родительского элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
Синтаксис
outline-color: #f92525;
outline-color: rgb(30,222,121);
outline-color: blue;
outline-color: invert;
outline-color: inherit;
outline-color: initial;1.5. Смещение внешнего контура: свойство outline-offset
По умолчанию контур рисуется начиная с края рамки элемента. Свойство outline-offset позволяет сместить контур от края границы на указанную величину.
Свойство не наследуется.
| outline-offset | |
|---|---|
| Значения: | |
| длина | Задаёт расстояние с помощью единиц длины — px / em. Отрицательное значение отображает рамку внутри элемента, положительное — снаружи элемента. Значение по умолчанию 0. |
| inherit | Наследует значение этого свойства от родительского элемента. |
| initial | Устанавливает это свойство в значение по умолчанию. |
Синтаксис
outline-offset: 3px;
outline-offset: 0.2em;
outline-offset: inherit;
outline-offset: initial;2. Изменение размера блоков: свойство resize
Поддержка браузерами
IE: —
Edge: —
Firefox: 5
Chrome: 4
Safari: 4
Opera: 15
iOS Safari: —
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5
Свойство resize позволяет указать, может ли пользователь изменять размер элемента, и если да, то вдоль какой оси/осей. Свойство применяется к элементам, чье вычисленное значение overflow отличается от visible.
Если для элемента установлено изменение размеров, в правом нижнем углу появляется треугольник, с помощью которого элемент можно растягивать в обеих направлениях. Уменьшение первоначальных размеров элемента не предусмотрено.
Браузер должен позволять пользователю изменять размер элемента без каких-либо других ограничений, кроме ограничений, накладываемых свойствами min-width, max-width, min-height и max-height.
Свойство не наследуется.
| resize | |
|---|---|
| Значения: | |
| none | Браузер не предоставляет механизм изменения размера элемента пользователем. Значение по умолчанию. |
| both | Браузер представляет механизм двунаправленного изменения размера, позволяющий пользователю регулировать как высоту, так и ширину элемента. |
| horizontal | Браузер представляет однонаправленный горизонтальный механизм изменения размера, позволяющий пользователю регулировать только ширину элемента. |
| vertical | Браузер представляет однонаправленный вертикальный механизм изменения размера, позволяющий пользователю регулировать только высоту элемента. |
| inherit | Наследует свойство от родительского элемента. |
| initial | Устанавливает это свойство в значение по умолчанию. |
Синтаксис
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
resize: inherit;
resize: initial;Пример
3. Стилизация курсора: свойство cursor
Поддержка браузерами
IE: 9
Edge: 14
Firefox: 4
Chrome: 5
Safari: 5
Opera: 15
iOS Safari: —
UC Browser for Android: —
Chrome for Android: 73
Samsung Internet: —
Свойство cursor указывает тип курсора, который будет отображаться для устройства, когда точка доступа курсора находится в пределах границ элемента. Браузеры могут игнорировать свойство над собственными элементами управления, например, полосами прокрутки. Браузеры также могут игнорировать свойство cursor и отображать его по своему выбору, чтобы указать различные состояния пользовательского интерфейса, например, когда страница не отвечает или когда пользователь выделяет текст.
Свойство наследуется.
Наведите над ячейками таблицы ниже, чтобы увидеть, как выглядит курсор для каждого установленного значения.
| cursor | |
|---|---|
| Значения: | |
| курсор-изображение | |
| url x y, | Браузер извлекает курсор из ресурса, обозначенного URI. Можно устанавливать несколько значений url, разделенных между собой запятой, которые должны сопровождаться одним из ключевых слов, таких как auto или pointer. Если браузер не может обработать первый курсор в списке курсоров, он должен попытаться обработать второй и т.д. Если браузер не может обработать любой пользовательский курсор, он должен использовать ключевое слово курсора в конце списка. Изображение может быть в формате PNG, SVG или любом другом формате файла неанимированного изображения, которые поддерживаются в свойстве background-image. X и Y — координаты смещения курсора относительно левого верхнего угла, каждая задается числом. Если значения не указаны, то используется внутренняя точка доступа, определенная внутри самого ресурса изображения, в противном случае принимается значение 0 0. |
| курсоры общего назначения | |
| auto | Браузер определяет курсор для отображения на основе текущего контекста, в частности: auto ведет себя как text поверх выбираемого текста или редактируемых элементов, и default в противном случае. Значение по умолчанию. |
| default | Зависимый от платформы курсор по умолчанию. Часто отображается как стрелка. |
| none | Курсор не отображается для элемента. |
| курсоры ссылок и статуса | |
| context-menu | Указывает, что контекстное меню доступно для объекта под курсором. Часто отображается как стрелка с небольшим изображением в виде меню рядом с ним. |
| help | Справка доступна для объекта под курсором. Часто отображается как вопросительный знак или воздушный шар. |
| pointer | Курсор-указатель, указывает на ссылку. |
| progress | Индикатор прогресса. Программа выполняет некоторую обработку, но отличается от wait тем, что пользователь все еще может взаимодействовать с программой. Часто отображается как вращающийся пляжный мяч или стрелка с часами или песочные часы. |
| wait | Указывает, что программа занята, и пользователь должен ждать. Часто отображается как часы или песочные часы. |
| курсоры выбора | |
| cell | Указывает, что ячейка или набор ячеек могут быть выбраны. Часто отображается как толстый знак плюс с точкой в середине. |
| crosshair | Простое перекрестие (например, короткие отрезки, напоминающие знак +). Часто используется для обозначения режима выбора двумерного растрового изображения. |
| text | Указывает текст, который может быть выбран. Часто отрисовывается как вертикальная двутавровая балка. |
| vertical-text | Указывает вертикальный текст, который может быть выбран. Часто отображается горизонтальной двутавровой балкой. |
| Drag&Drop курсоры | |
| alias | Указывает, что ярлык для чего-то должен быть создан. Часто отображается как стрелка с небольшой изогнутой стрелкой рядом с ней. |
| copy | Указывает, что что-то должно быть скопировано. Часто отображается как стрелка с небольшим знаком плюс рядом с ней. |
| move | Указывает, что что-то должно быть перемещено. |
| no-drop | Указывает, что перетаскиваемый элемент не может быть оставлен в текущей позиции курсора. Часто отображается как рука или небольшой перечеркнутый косой линией кружок. |
| not-allowed | Указывает, что запрошенное действие не будет выполнено. Часто отображается как перечеркнутый косой линией круг. |
| grab | Указывает, что что-то может быть захвачено (перетащено для перемещения). Часто отображается как обратная сторона ладони. |
| grabbing | Указывает, что что-то захватывается (перетаскивается для перемещения). Часто отображается как обратная сторона ладони с загнутыми пальцами. |
| курсоры изменения размеров и прокрутки | |
| e-resize n-resize ne-resize nw-resize s-resize se-resize sw-resize w-resize |
Указывает, что какой-то край блока должен быть перемещен. Например, курсор se-resize используется, когда движение начинается с правой нижней части блока. |
| ew-resize ns-resize nesw-resize nwse-resize |
Отображает курсор двунаправленного изменения размера. |
| col-resize | Указывает, что размер элемента/столбца можно изменить по горизонтали. Часто отображается как стрелки, указывающие влево и вправо с вертикальной разделительной чертой. |
| row-resize | Указывает, что размер элемента/столбца можно изменить по вертикали. Часто отображается как стрелки, указывающие влево и вправо с горизонтальной разделительной чертой. |
| all-scroll | Указывает, что что-то можно прокручивать в любом направлении. Часто отображается как стрелки, указывающие вверх, вниз, влево и вправо с точкой в середине. |
| курсоры масштабирования | |
| zoom-in zoom-out |
Указывает, что что-то можно увеличивать или уменьшать, и часто визуализировать как лупа с + или - в центре для zoom-in или zoom-out соответственно. |
| inherit | Наследует свойство от родительского элемента. |
| initial | Устанавливает это свойство в значение по умолчанию. |
Синтаксис
cursor: pointer;
cursor: auto;
cursor: url(hand.png), url(cursor.png), pointer;
cursor: url(cursor2.png) 2 2, pointer;
cursor: inherit;
cursor: initial;4. Цвет каретки вставки: свойство caret-color
Поддержка браузерами
IE: —
Edge: —
Firefox: 53
Chrome: 57
Safari: 11.2
Opera: 44
iOS Safari: 11.4
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Символ каретки является видимым индикатором точки вставки в элементе, в который пользователь вставляет текст (и, возможно, другой контент). Свойство caret-color контролирует цвет этого видимого индикатора.
Свойство наследуется.
| caret-color | |
|---|---|
| Значения: | |
| auto | Браузеры используют currentColor. Браузеры также могут автоматически корректировать цвет каретки, чтобы обеспечить хорошую видимость и контрастность с окружающим контентом, на основе currentColor, фона, теней и т.д. Значение по умолчанию. |
| цвет | Каретка вставки окрашивается указанным цветом. |
| inherit | Наследует свойство от родительского элемента. |
| initial | Устанавливает это свойство в значение по умолчанию. |
Синтаксис
caret-color: auto;
caret-color: transparent;
caret-color: currentColor;
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);Пример
По материалам CSS Basic User Interface Module Level 3 (CSS3 UI)