CSS Introduction | CSS3 Extensions | User Interface

User Interface (UI)

In CSS3, new user interface features allow users to freely change an element’s size, outline, and similar properties.

The properties provided for the user interface are as follows.

1. resize
2. outline-offset
3. box-sizing
4. nav-index
5. nav-left
6. nav-right
7. nav-up
8. nav-down

CSS3 User Interface Support Versions

The major web browser versions that support the CSS3 user interface are as follows. The table also lists the first versions that supported this feature through vendor prefixes.

resize Property

The resize property allows the user to change the height or width of the element.

<style>
    #width { resize: horizontal; }
    #height { resize: vertical; }
    #both { resize: both; }
</style>

As in the example above, an element with the resize property set has a resize handle in the lower-right corner. The user can drag this handle with the mouse to adjust the element’s size directly.

The resize property is not supported in Internet Explorer.

outline-offset Property

The outline-offset property adds space, or an offset, between the element’s border and outline.

The differences between an outline and a border are as follows.

1. An outline is a line that surrounds the element outside the border.
2. An outline is not included in the size of the HTML element.
3. An outline may not be rectangular.

The following example uses the outline-offset property to show the outline and border.

<style>
    div {
        border: 1px solid black;
        outline: 1px solid red;
        outline-offset: 20px;
    }
</style>

The outline-offset property is not supported in Internet Explorer.

box-sizing Property

The box-sizing property includes the size of the padding and border in the width and height of the element.

<style>
    #no_border_box { border: 10px solid green; padding: 20px; }
    #border_box { border: 10px solid red; padding: 20px; box-sizing: border-box; }
</style>

The formula for calculating the total width of an HTML element in the CSS box model is as follows. width + left padding + right padding + left border + right border + left margin + right margin

Therefore, in the example above, the total width of the first div element is set as follows. 350px + 20px + 20px + 10px + 10px + 10px + 10px = 430px

However, when the box-sizing property value is set to border-box, the padding and border sizes are included in the total width and height of the element. Therefore, in the example above, the total width of the second div element is set as follows. 350px + 10px + 10px = 370px

CSS3 User Interface Properties