CSS3 user interface


May 04, 2021 04:00 CSS3


Table of contents


CSS3 user interface


CSS3 user interface

In CSS3, new user interface features have been added to adjust element size, box size, and outer border.

In this chapter, you'll learn about the following user interface properties:

  • resize

  • box-sizing

  • outline-offset


Browser support

The numbers in the table support the first browser version number of the property.

The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.

属性
resize 4.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 不兼容 5.0
4.0 -moz-
4.0 9.5

CSS3 Resizing

In CSS3, the resize property specifies whether an element should be sized by the user.

This div element is resized by the user. (In Firefox 4 Plus, Chrome, and Safari)

The CSS code is as follows:

CSS3 user interface CSS3 user interface CSS3 user interface CSS3 user interface CSS3 user interface

A div element size is specified by the user:

div
{
resize:both;
overflow:auto;
}

Try it out . . .



CSS3 Box Sizing

The box-sizing property allows you to define exactly what fits into an area in an exact way.

CSS3 user interface CSS3 user interface CSS3 user interface CSS3 user interface CSS3 user interface

Specify two side-by-side border boxes:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}

Try it out . . .



CSS3 profile modification (outline-offset)

The outline-offset property offsets the outline and draws it beyond the edge of the border.

The outline is different from the border in two ways:

  • Contours do not take up space

  • The outline may be non-rectangular

This div has an outline 15 pixels outside the border.

The CSS code is as follows:

CSS3 user interface CSS3 user interface CSS3 user interface CSS3 user interface CSS3 user interface

Specifies the outline at 15 pixels outside the edge of the border:

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

Try it out . . .



New user interface features

In the following table are the new user interface properties for CSS3, you can click on the corresponding properties, learn more about the use of the corresponding properties, and so on:

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 some way to fit the region 3
icon Provides the author the ability to style an element with an iconic equivalent 3
nav-down Specify where to navigate when using the arrow down navigation keys 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 Specify where to navigate when using the arrows to navigate up the keys 3
outline-offset The outer outline is retouched and the edges beyond the border are drawn 3
resize Specify whether an element is resized by the user 3