CSS3 User Interface
CSS3 User Interface
In CSS3, several new user interface features have been added to adjust element sizes, box sizes, and outlines.
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 the property.
The numbers preceding -webkit-, -ms-, or -moz- indicate the first browser version that supports the prefixed property.
| Property | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 <br>4.0 -moz- | 4.0 | 15.0 |
| box-sizing | 10.0 <br>4.0 -webkit- | 8.0 | 29.0 <br>2.0 -moz- | 5.1 <br>3.1 -webkit- | 9.5 |
| outline-offset | 4.0 | 15.0 | 5.0 <br>4.0 -moz- | 4.0 | 9.5 |
| Property | Description | CSS | |||
| --- | --- | --- | |||
| appearance | Allows you to make an element's appearance 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 ability for creators to set an element as an icon equivalent | 3 | |||
| nav-down | Specifies where to navigate when using the down arrow key | 3 | |||
| nav-index | Specifies the tab order of an element | 3 | |||
| nav-left | Specifies where to navigate when using the left arrow key | 3 | |||
| nav-right | Specifies where to navigate when using the right arrow key | 3 | |||
| nav-up | Specifies where to navigate when using the up arrow key | 3 | |||
| outline-offset | Outlines and draws beyond the border edge | 3 | |||
| resize | Specifies whether an element is resizable by the user | 3 |