CSS3 User Interface
CSS3 User Interface
In CSS3, some new user interface features were added to adjust element size, box size and outer border.
In this chapter, you will learn about the following user interface properties:
resize
box-sizing
outline-offset
Browser support
The numbers in the table represent the first browser version number that supports the property.
The number immediately preceding -webkit-, -ms- or -moz- is the version number of the first browser that supports the prefixed attribute.
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 resized by the user.
This div element is resized by the user. (in Firefox 4+, Chrome, and Safari)
The CSS code is as follows:
Example
The user specifies the size of a div element:
div { resize:both; overflow:auto; }
CSS3 Box Sizing
The box-sizing property allows you to define exactly what fits into an area.
Example
Specifies two bordered boxes side by side:
div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; float:left; }
CSS3 outline modification (outline-offset)
The outline-offset property offsets the outline and draws the outline beyond the border edge.
Outlines differ from borders in two ways:
Outlines take up no space
Outlines may be non-rectangular
The div has an outline 15 pixels outside the border.
The CSS code is as follows:
Example
Specify an outline 15 pixels beyond the border edge:
div { border:2px solid black; outline:2px solid red; outline-offset:15px; }
New User Interface Features
Property | Description | CSS |
---|---|---|
appearance | Allows you to make an element look like a standard user interface element | 3 |
box-sizing | Allows you to define certain elements in a certain way to fit the region | 3 |
icon | Provides creators the ability to set elements as icon equivalents. | 3 |
nav-down | Specifies where to navigate when using the arrow down navigation key | 3 |
nav-index | Specifies the order of tabs for an element | 3 |
nav-left | Specify where to navigate using the arrow navigation keys on the left | 3 |
nav-right | Specify where to navigate using the arrow navigation keys on the right | 3 |
nav-up | Specifies where to navigate when using the arrow up navigation key | 3 |
outline-offset | Outline Retouch and draw edges beyond the border | 3 |
resize | Specifies whether an element is to be resized by the user | 3 |