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.

Property1644329779416088928.png1644329783227096994.png1644329786497037701.png1644329789752051344.png1644329794134026827.png
resize4.079.05.0
4.0 -moz-
4.015.0
box-sizing10.0
4.0 -webkit-
8.029.0
2.0 -moz-
5.1
3.1 -webkit-
9.5
outline-offset4.015.05.0
4.0 -moz-
4.09.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:

OperaSafariChromeFirefoxInternet Explorer

Example

The user specifies the size of a div element:

div
{
    resize:both;
    overflow:auto;
}

Try It! 


CSS3 Box Sizing

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

OperaSafariChromeFirefoxInternet Explorer

Example

Specifies two bordered boxes side by side:

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

Try It! 


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:

OperaSafariChromeFirefoxInternet Explorer

Example

Specify an outline 15 pixels beyond the border edge:

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

Try It! 


New User Interface Features

PropertyDescriptionCSS
appearanceAllows you to make an element look like a standard user interface element3
box-sizingAllows you to define certain elements in a certain way to fit the region3
iconProvides creators the ability to set elements as icon equivalents.3
nav-downSpecifies where to navigate when using the arrow down navigation key3
nav-indexSpecifies the order of tabs for an element3
nav-leftSpecify where to navigate using the arrow navigation keys on the left3
nav-rightSpecify where to navigate using the arrow navigation keys on the right3
nav-upSpecifies where to navigate when using the arrow up navigation key3
outline-offsetOutline Retouch and draw edges beyond the border3
resizeSpecifies whether an element is to be resized by the user3