Пользовательский интерфейс CSS3
В CSS3, новые функции интерфейса пользователя позволяют изменить размеры элементов, размеры окна и внешние границы.
В этой главе вы узнаете о следующих свойствах пользовательского интерфейса:
- resize
- box-sizing
- outline-offset
Свойство resize поддерживается в Firefox 4+, Chrome, и Safari.
box-sizing поддерживается в Internet Explorer, Chrome, и Opera. Firefox требует префикс -moz-. Safari требует префикс -webkit-.
Свойство outline-offset поддерживается во всех ведущих браузерах за исключением Internet Explorer.
Изменение размера CSS3
В CSS3, свойство resize определяет, должен ли пользователь иметь возможность изменять размер элемента.
Размеры коробки CSS3
Свойство box-sizing позволяет определить некоторые элементы, чтобы соответствовать определенной области:
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>Смещение контура CSS3
Свойство outline-offset смещение контура выводит его за пределы границы края.
Контуры отличаются от границ в двух направлениях:
- Outlines do not take up space
- Outlines may be non-rectangular
Новые свойства пользовательского интерфейса
| Свойство | Описание | 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 |