YouTipCss3 User Interface
* * *
## CSS3 User Interface
In CSS3, several new user interface features have been added to adjust element sizes, box dimensions, and borders.
In this chapter, you will learn about the following user interface properties:
* resize
* box-sizing
* outline-offset
* * *
## Browser Support
The numbers in the table indicate the first browser version that supports each property.
The number immediately preceding `-webkit-`, `-ms-`, or `-moz-` denotes the first browser version that supports the prefixed property.
| Property | | | | | |
| --- | --- | --- | --- | --- | --- |
| resize | 4.0 | 79.0 | 5.0 4.0-moz- | 4.0 | 15.0 |
| box-sizing | 10.0 4.0-webkit- | 8.0 | 29.0 2.0-moz- | 5.1 3.1-webkit- | 9.5 |
| outline-offset | 4.0 | 15.0 | 5.0 4.0-moz- | 4.0 | 9.5 |
* * *
## CSS3 Resizing
In CSS3, the `resize` property specifies whether an element should be resizable by the user.
This `div` element is resizable by the user. (Supported in Firefox 4+, Chrome, and Safari)
CSS code is as follows:
![Image 1: Opera]( 2: Safari]( 3: Chrome]( 4: Firefox]( 5: Internet Explorer](
## Example
Specify a `div` element's size to be resizable by the user:
```css
div {
resize: both;
overflow: auto;
}
```
[Try it »](
* * *
## CSS3 Box Sizing
The `box-sizing` property allows you to define how content fits within a specific area in a precise manner.
![Image 6: Opera]( 7: Safari]( 8: Chrome]( 9: Firefox]( 10: Internet Explorer](
## Example
Define two side-by-side bordered boxes:
```css
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 50%;
float: left;
}
```
[Try it »](
* * *
## CSS3 Outline Offset
The `outline-offset` property offsets the outline and draws it beyond the edge of the border.
Outlines differ from borders in two ways:
* Outlines do not occupy space.
* Outlines may not be rectangular.
This `div` has an outline 15 pixels outside its border.
CSS code is as follows:
![Image 11: Opera]( 12: Safari]( 13: Chrome]( 14: Firefox]( 15: Internet Explorer](
## Example
Set an outline 15 pixels outside the border edge:
```css
div {
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
}
```
[Try it »](
* * *
## New User Interface Features
| Property | Description | CSS |
| --- | --- | --- |
| ( | Allows you to make an element look like a standard UI element | 3 |
| ( | Lets you define how certain elements fit within a region in a specific way | 3 |
| ( | Enables creators to set an element as an icon equivalent | 3 |
| ( | Specifies where to use the down arrow key for navigation | 3 |
| ( | Specifies the tab order of an element | 3 |
| ( | Specifies where to use the left arrow key for navigation | 3 |
| ( | Specifies where to use the right arrow key for navigation | 3 |
| ( | Specifies where to use the up arrow key for navigation | 3 |
| ( | Modifies outlines and draws them beyond the border edge | 3 |
| ( | Specifies whether an element can be resized by the user | 3 |