CSS3 User Interface
CSS3 has new user interface features such as resizing elements, outlines, and box sizing.
In this chapter you will learn about the following user interface properties:
resize
outline-offset
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | Not supported | 5.0 4.0 -moz- |
4.0 | 15.0 |
outline-offset | 4.0 | Not supported | 5.0 4.0 -moz- |
4.0 | 9.5 |
CSS3 Resizing
The resize
property specifies whether or not an element should be resizable by the user.
The following example lets the user resize only the width of a <div> element:
The following example lets the user resize only the height of a <div> element:
The following example lets the user resize both the height and the width of a <div> element:
CSS3 Outline Offset
The outline-offset
property adds space between an outline and the edge or
border of an element.
Outlines differ from borders in three ways:
- An outline is a line drawn around elements, outside the border edge
- An outline does not take up space
- An outline may be non-rectangular
The following example uses the outline-offset property to add a 15px space between the border and the outline:
Example
div
{
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Try it Yourself »
CSS3 User Interface Properties
The following table lists all the user interface properties:
Property | Description |
---|---|
box-sizing | Allows you to include the padding and border in an element's total width and height |
nav-down | Specifies where to navigate when using the arrow-down navigation key |
nav-index | Specifies the tabbing order for an element |
nav-left | Specifies where to navigate when using the arrow-left navigation key |
nav-right | Specifies where to navigate when using the arrow-right navigation key |
nav-up | Specifies where to navigate when using the arrow-up navigation key |
outline-offset | Adds space between an outline and the edge or border of an element |
resize | Specifies whether or not an element is resizable by the user |