CSS3 Пользовательский интерфейс

Пользовательский интерфейс CSS3

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

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

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

Число, стоящее непосредственно перед -webkit-, -ms- или -moz-, — это номер первой версии браузера, поддерживающей свойство с префиксом.

В CSS3 свойство resize определяет, может ли пользователь изменять размер элемента.

Этот элемент div изменяется в размере пользователем. (В Firefox 4+, Chrome и Safari)

Код CSS выглядит следующим образом:

Пользователь задаёт размер элемента div:

div { resize:both; overflow:auto; }

Свойство box-sizing позволяет точно определить содержимое так, чтобы оно поместилось в область.

Задайте два блока с границами, расположенных рядом:

div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; float:left; }

Свойство outline-offset смещает контур и рисует его за краем границы.

Есть два различия между контурами и границами:

У этого div есть контур на 15 пикселей снаружи границы.

Код CSS выглядит следующим образом:

Задает контур на 15 пикселей снаружи края границы:

div { border:2px solid black; outline:2px solid red; outline-offset:15px; }

Свойство	Описание	CSS
appearance	Позволяет сделать элемент похожим на стандартный элемент пользовательского интерфейса	3
box-sizing	Позволяет задавать некоторые элементы так, чтобы они вписывались в область	3
icon	Предоставляет создателям возможность задавать элементы как эквиваленты иконок.	3
nav-down	Определяет, куда переходить при использовании клавиши навигации со стрелкой вниз	3
nav-index	Указывает порядок обхода табуляцией для элемента	3
nav-left	Определяет, куда переходить при использовании клавиши навигации со стрелкой влево	3
nav-right	Определяет, куда переходить при использовании клавиши навигации со стрелкой вправо	3
nav-up	Определяет, куда переходить при использовании клавиши навигации со стрелкой вверх	3
outline-offset	Контур изменяется и рисуется за краем границы	3
resize	Указывает, может ли пользователь изменять размер элемента	3

Другие расширения