In CSS3, some of the new user interface features are resizing elements, box sizing, and outlining.
In this chapter you will learn about the following user interface properties:
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 | Not supported | 4.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
box-sizing | Partial from 8.0 | 10.0 4.0 -webkit- |
29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
outline-offset | Not supported | 4.0 | 5.0 4.0 -moz- |
4.0 | 9.5 |
In CSS3, the resize property specifies whether or not an element should be resizable by the user.
The CSS code is as follows:
Specify that a <div> element should be resizable by the user:
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Should they include the border-box or just the content-box which is the default value of the width and height properties.
For example, if you want two bordered boxes side by side, it can be achieved through setting box-sizing to "border-box". This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.
Specify two bordered boxes side by side:
The outline-offset property offsets an outline, and draws it beyond the border edge.
Outlines differ from borders in two ways:
The CSS code is as follows:
Specify an outline 15px outside the border edge:
The following table lists all the user-interface properties:
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 to fit an area in a certain way | 3 |
icon | Provides the author the ability to style an element with an iconic equivalent | 3 |
nav-down | Specifies where to navigate when using the arrow-down navigation key | 3 |
nav-index | Specifies the tabbing order for an element | 3 |
nav-left | Specifies where to navigate when using the arrow-left navigation key | 3 |
nav-right | Specifies where to navigate when using the arrow-right navigation key | 3 |
nav-up | Specifies where to navigate when using the arrow-up navigation key | 3 |
outline-offset | Offsets an outline, and draws it beyond the border edge | 3 |
resize | Specifies whether or not an element is resizable by the user | 3 |