CSS Benutzeroberfläche

CSS Benutzeroberfläche

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

  • resize
  • outline-offset

Browserunterstützung

Die Zahlen in der Tabelle zeigen 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 vom Benutzer angepasst werden sollte.

Dieses div-Element kann vom Benutzergrößenangepasst werden!

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

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

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

Beispiel

div {
  resize: horizontal;
  overflow: auto;
}

Probieren Sie selbst aus

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

Beispiel

div {
  resize: vertical;
  overflow: auto;
}

Probieren Sie selbst aus

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

Beispiel

div {
  resize: both;
  overflow: auto;
}

Probieren Sie 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 selbst aus

CSS-Konturverschiebung

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

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

Beachtung:Der Umriss ist anders als der Rahmen! Im Gegensatz zum Rahmen werden die Umrisslinien außerhalb des Elementrahmens gezeichnet und können mit anderen Inhalten überlappen. Gleichzeitig ist der Umriss auch nicht Teil der Elementgröße: Die Gesamtbreite und -höhe des Elements werden nicht vom Breiten der Umrisslinien beeinflusst.

Der folgende Beispiel verwendet die outline-offset-Eigenschaft, um den Abstand zwischen Rahmen und Umrandung 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 selbst aus

CSS Benutzeroberfläche Attribute

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

Eigenschaft Beschreibung
outline-offset Fügt Raum zwischen dem Kontur und dem Rand des Elements hinzu.
resize Definiert, ob ein Element von den Benutzern angepasst werden kann.