Mahlzeit, mit großer Verspätung gehts nun mit dem Adventskalender weiter..

Hätte ich noch länger gewartet, wäre bald wieder Advent gewesen aber so passt es schon noch.. seht es einfach als eine Art Serie von Artikeln und nicht mehr als Adventskalender an. Ok, worum geht es heute? Ganz kurz und bündig: resize. Diese CSS3 Eigenschaft erlaubt es dem User ohne Einsatz von Javascript Block-Level Elemente in ihrer Größe zu manipulieren. Ich werde euch zeigen, was damit alles möglich ist, wo es Sinn macht und was man beachten sollte.

Browserunterstützung

Browser
ab Version	4.0	3.0	–	1.0	–

Unterstützung gibt es bisher von Webkit- und künftigen Geckoversionen. Anders sieht es in Opera 11 und Internet Explorer 9 aus, hier fehlt jeglicher Support bisher.

Also, was macht resize nun genau? Wir als Entwickler können bestimmten, wie User die Größe, sprich Höhe und Breite, eines Blocks verändern können. Dazu stehen uns fünf mögliche Werte zur Verfügung:

1. none, das Element kann nicht verändert werden (Default, außer bei textarea)
2. both, Höhe und Breite können verändert werden (Default bei textarea)
3. horizontal, nur die Breite kann verändert werden
4. vertical, nur die Höhe kann verändert werden
5. inherit, erbt den Wert vom Elternelement

resize ist für textarea-Elemente standardmäßig auf both gesetzt, alle anderen Elemente müssen zwei Bedingungen erfüllen:

• sie dürfen kein inline-Element sein (nur inline-block, block und replaced elements sind erlaubt)
• die Eigenschaft overflow darf nicht auf visible gesetzt sein

Ist eine der beiden Bedingungen nicht erfüllt, greift resize nicht!

Beispiele

Okay, damit wissen wir jetzt, was wir zu tun haben. Als erstes Beispiel nehmen wir eine textarea zur Hand:

HTML

1

<textarea cols="20" rows="3"></textarea>

Ergebnis

Benutzer von Chrome, Safari und Firefox 4 sollten jetzt in der Lage sein, die Box zu vergrößern, indem sie auf den kleinen Marker unten rechts klicken und ihn verschieben. Damit kann man wunderbar das Layout einer Seite zerstören, eventuell hat der ein oder andere das schon auf anderen Seiten bemerkt.

Jetzt wollen wir erreichen, dass die Textbox nur in der Höhe änderbar ist. Dazu benutzen wir resize:

CSS

1
2
3

textarea {
	resize:vertical;
}

Ergebnis

Es hat geklappt, die Textbox kann jetzt nicht mehr in ihrer Breite, sondern nur noch in ihrer Höhe geändert werden, damit lässt sich schonmal wesentlich weniger “Schaden” anrichten.

Okay, probieren wir das ganze jetzt mit einem div. Dazu müssen wir, wie oben schon beschrieben, neben der resize Eigenschaft auch overflow verändern:

HTML

1

<div class="resize"></div>

CSS

1
2
3
4
5
6
7

div.resize {
	border:2px solid orange;
	height:100px;
	overflow:hidden;
	resize:both;
	width:200px;
}

Ergebnis

Und siehe da, wir haben den gleichen Effekt auch für ein stinknormales div erzielt – viel Spaß beim Basteln!