CSS3 Benutzeroberfläche

CSS3-Benutzeroberfläche

In CSS3 wurden einige neue Benutzeroberflächenfunktionen hinzugefügt, um Elementgröße, Box-Sizing und Umrisse anzupassen.

In diesem Kapitel lernen Sie die folgenden Benutzeroberflächen-Eigenschaften kennen:

• resize
• box-sizing
• outline-offset

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browsersionsnummer an, die die Eigenschaft unterstützt.

Die Zahl unmittelbar vor -webkit-, -ms- oder -moz- ist die erste Browsersionsnummer, die die mit Präfix versehene Eigenschaft unterstützt.

CSS3-Größenänderung

In CSS3 legt die Eigenschaft resize fest, ob die Größe eines Elements vom Benutzer geändert werden kann.

Der CSS-Code lautet wie folgt:

Beispiel

Der Benutzer gibt die Größe eines div-Elements an:

div { resize:both; overflow:auto; }

Selbst ausprobieren »

CSS3 Box Sizing

Die box-sizing-Eigenschaft ermöglicht es Ihnen, bestimmten Inhalt präzise zu definieren, sodass er in einen Bereich passt.

Beispiel

Geben Sie zwei nebeneinanderliegende Boxen mit Rahmen an:

div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; float:left; }

Selbst ausprobieren »

CSS3-Konturformatierung (outline-offset)

Die outline-offset-Eigenschaft versetzt die Kontur und zeichnet sie über die Rahmenkante hinaus.

Es gibt zwei Unterschiede zwischen Konturen und Rahmen:

• Kontur beansprucht keinen Platz
• Konturen können eine nicht rechteckige Form haben

Der CSS-Code lautet wie folgt:

Beispiel

Legt eine Kontur 15 Pixel außerhalb der Rahmenkante fest:

div { border:2px solid black; outline:2px solid red; outline-offset:15px; }

Selbst ausprobieren »

Neue Funktionen der Benutzeroberfläche