CSS Benutzeroberfläche

CSS Benutzeroberfläche

In diesem Kapitel lernen Sie die folgenden CSS-Benutzeroberflächeigenschaften kennen:

  • resize
  • outline-offset

Browserunterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Eigenschaft Chrome IE Firefox Safari Opera
resize 4.0 Nicht unterstützt 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS-Größenanpassung

resize Die Eigenschaft legt fest, ob und wie ein Element von den Benutzern angepasst werden soll.

Dieses div-Element kann vom Benutzer angepasst werden!

Größenanpassung: Klicken und ziehen Sie den unteren rechten Ecke dieses div-Elements.

Beachtung:Internet Explorer unterstützt das resize-Attribut nicht.

Das folgende Beispiel ermöglicht es dem Benutzer nur, die Breite des <div>-Elements anzupassen:

Beispiel

div {
  resize: horizontal;
  overflow: auto;
}

Probieren Sie es selbst aus

Das folgende Beispiel ermöglicht es dem Benutzer nur, die Höhe des <div>-Elements anzupassen:

Beispiel

div {
  resize: vertical;
  overflow: auto;
}

Probieren Sie es selbst aus

Das folgende Beispiel ermöglicht es dem Benutzer, die Höhe und Breite des <div>-Elements anzupassen:

Beispiel

div {
  resize: both;
  overflow: auto;
}

Probieren Sie es selbst aus

In vielen Browsern ist <textarea> standardmäßig anpassbar. Hier verwenden wir das resize-Attribut, um diese Skalierbarkeit zu deaktivieren:

Beispiel

textarea {
  resize: none;
}

Probieren Sie es selbst aus

CSS-Umrissversatz

outline-offset Die Eigenschaft fügt den Abstand zwischen Kontur und Elementrahmen hinzu.

Dieser div hat eine Kontur von 15px außerhalb der Rahmengrenze.

Beachtung:Die Kontur unterscheidet sich vom Rahmen! Im Gegensatz zum Rahmen werden Konturlinien außerhalb des Elementrahmens gezeichnet und können mit anderen Inhalten überlappen. Gleichzeitig ist die Kontur auch nicht Teil der Elementgröße: Die Gesamtbreite und -höhe des Elements werden nicht vom Konturbreiten beeinflusst.

Der folgende Beispiel verwendet die outline-offset-Eigenschaft, um den Abstand zwischen Rahmen und Kontur hinzuzufügen:

Beispiel

div.ex1 {
  margin: 20px;
  border: 1px fest schwarz;
  outline: 4px fest rot;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px fest schwarz;
  outline: 5px gestrichelt blau;
  outline-offset: 5px;
}

Probieren Sie es selbst aus

CSS Benutzeroberfläche Eigenschaften

Die folgende Tabelle listet alle Benutzeroberfläche-Eigenschaften auf:

Eigenschaft Beschreibung
outline-offset Fügt Platz zwischen dem Kontur und dem Rand des Elements hinzu.
resize Regelt, ob ein Element von den Benutzern vergrößert oder verkleinert werden kann.