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.

Property
resize	4.0	79.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	15.0	5.0 4.0 -moz-	4.0	9.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:

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.

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:

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