2.14. CSS3 UI

Спецификация CSS3 UI описывает свойства и значения, связанные с пользовательским интерфейсом.

Свойства для стилизации элементов взаимодействия с пользователем

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;

Пример

Фигура 1. Свойство resize

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);

Пример

Фигура 2. Свойство caret-color

По материалам CSS Basic User Interface Module Level 3 (CSS3 UI)

Поделиться: