CSS User Interface

2 min read

Агуулга

CSS User Interface
rowser Support
CSS Resizing
CSS Outline Offset
- Example
CSS User Interface Properties

CSS User Interface #

In this chapter you will learn about the following CSS user interface properties:

resize

outline-offset

rowser Support #

The numbers in the table specify the first browser version that fully supports the property.

Property	Chrome	Internet explorer	Mozila Firefox	Safari	Opera
resize	4.0	79.0	5.0	4.0	15.0
outline-offset	4.0	15.0	5.0	4.0	9.5

#

CSS Resizing #

The resize property specifies if (and how) an element should be resizable by the user.

Let the user resize only the width of this div element.
to resize: Click and drag the bottom right corner of this div element.

The following example lets the user resize only the width of a element:

Example #

div {
  resize: horizontal;
  overflow: auto;
}

The following example lets the user resize only the height of a <div> element:

Example #

div {
  resize: vertical;
  overflow: auto;
}

The following example lets the user resize both the height and width of a <div> element:

Example #

div {
  resize: both;
  overflow: auto;
}

In many browsers, <textarea> is resizable by default. Here, we have used the resize property to disable the resizability:

Example #

textarea {
  resize: none;
}

CSS Outline Offset #

The outline-offset property adds space between an outline and the edge or border of an element.

This div has an outline 15px outside the border edge.

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element’s border, and may overlap other content. Also, the outline is NOT a part of the element’s dimensions; the element’s total width and height is not affected by the width of the outline.

The following example uses the outline-offset property to add space between the border and the outline:

Example #

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
}

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}