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!

Heute ist zwar schon der 24. aber hier kommt erst das 15. Türchen. Ich wünsche euch und euren Familien ein schönes Fest und hoffe ihr vergebt mir meinen Rückstand bezüglich des Adventskalenders. Natürlich werde ich versuchen ihn trotz allem noch dieses Jahr zu komplettieren, wir werden sehen, ob das klappt. Die letzten Tage ist wenig passiert, da ich durch diverse Geburtstagsfeiern nie Zeit hatte. Jetzt geht es aber auf jeden Fall mit text-overflow weiter, das hauptsächlich deswegen so selten benutzt wird, da es erst offiziell mit CSS3 Einzug in die Webwelt hält.

Browserunterstützung

Browser
ab Version	7	1.3	11.0	1.0	6.0

Die von Microsoft stammende Eigenschaft wird mittlerweile von allen Browsern außer Firefox unterstützt (es gibt aber schon einen Bug dafür ), seit Version 7 auch von Firefox, unterstützt. Opera unterstützt sie seit Version 11, in Version 9-10 wurde aber noch die Präfix-Variante benutzt (-o-text-overflow).

Mit text-overflow können wir bestimmen, wie ein Text, der aufgrund seiner Länge nicht in sein Elternelement passt, abgeschnitten wird. Es werden für diese Eigenschaft nur drei Werte akzeptiert:

1. ellipsis, Text endet mit drei Punkten “…” (U+2026, …)
2. clip, der Text hört einfach auf, wie abgeschnitten (Defaultwert)
3. <string>, eine Zeichenkette, mit der der Text abgeschnitten werden soll, wird noch von keinem Browser unterstützt!

Beispiel

Wie immer, zeige ich euch das Ganze natürlich an einem Beispiel, denkt daran, dass ihr den Effekt in Firefox nicht sehen könnt. Als Versuchskaninchen dient uns diesmal eine Liste, mit der Artikel angeteasert werden sollen.

HTML

1
2
3
4
5
6
7
8

<ul>
<li><h3>Post 1</h3>
<p>Lorem ipsum dolor sit amet.</p></li>
<li><h3>Post 2</h3>
<p>Lorem ipsum dolor sit amet, sadipscing elitr sed diam voluptua.</p></li>
<li><h3>Post 3</h3>
<p>Lorem ipsum dolor sit amet, sed diam nonumy eirmod.</p></li>
</ul>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13

ul {
	list-style:none;
	margin:10px 0;
	overflow:hidden;
}
li {
	background-color:#eee;
	border:1px solid #aaa;
	float:left;
	margin-right:20px;
	padding:5px;
	width:140px;
}

Ergebnis

• Post 1

  Lorem ipsum dolor sit amet.

• Post 2

  Lorem ipsum dolor sit amet, sadipscing elitr sed diam voluptua.

• Post 3

  Lorem ipsum dolor sit amet, sed diam nonumy eirmod.

Damit erhalten wir drei gleiche Boxen. Das ist zwar ganz gut aber noch nicht schön. Schön wäre es, wenn die Boxen auch gleich hoch wären, dazu müssen wir den Text kürzen und das ist wiederum der Punkt, an dem uns text-overflow zu Hilfe kommt.

Als erstes müssen wir die Zeilenumbrüche mit white-space:nowrap verhindern – ohne dem geht es nicht! Danach müssen wir den Paragraphen innerhalb der Listenelemente ein overflow:hidden verpassen, damit zu langer Text nicht über das Element hinaus gerendert wird. Zum Schluss kommt noch text-overflow:ellipsis dazu. Das CSS der li-Tags wird also um folgenden Code erweitert:

zusätzliches CSS

1
2
3
4
5
6
7

li {
	white-space:nowrap;
}
li p {
	overflow:hidden;
	text-overflow:ellipsis;
}

Ergebnis

• Post 1

  Lorem ipsum dolor sit amet.

• Post 2

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam voluptua.

• Post 3

  Lorem ipsum dolor sit amet, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Und siehe da (!=Firefox) die Boxen haben alle die gleiche Höhe und die Posts werden automatisch abgeschnitten und enden mit drei Punkten, ganz ohne PHP. Schöne Sache wie ich finde.. so und nun wünsche ich allen Lesern ein ruhiges Weihnachtsfest und eine schöne Bescherung.

Ein weiterer Tag, ein weiteres Türchen, eigentlich wollte ich mittlerweile mal etwas aufgeholt haben aber irgendwie kommt immer was dazwischen. Aber na gut, kommen wir also zu #14: text-indent. Mit dieser Eigenschaft können wir die erste Zeile eines beliebigen Textblocks manipulieren.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	3.0

Unterstützt ab Internet Explorer 3.0, das sagt glaub ich alles. Man kann die Eigenschaft also bedenkenlos einsetzen, sie funktioniert ausnahmslos in jedem Browser.

Erfahrene Webdeveloper nutzen diese Technik relativ häufig um beispielsweise Text zu verstecken oder um einen Absatz eingerückt beginnen zu lassen. Für Anfänger jedoch erschließt sich der richtige Gebrauch von text-indent meist etwas zu spät. Deswegen sei hier nochmal darauf hingewiesen, dass man damit nur einzeilige Texte bzw. die erste Zeile eines Textes beeinflussen kann.

Als Werte sind positive wie negative Längenangaben und prozentuale Angaben erlaubt.

Beispiele

Beispiel Nummer eins gebraucht text-indent zur Einrückung von Absatzanfängen, als Basis dient uns folgender Code:

HTML

1
2
3
4

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
et justo duo dolores et ea rebum.</p>

CSS

1
2
3

p {
	text-indent:2em;
}

Ergebnis

Man beachte, wie die erste Zeile des Absatzes um 2em eingerückt wird, die anderen Zeilen aber nicht.

Deswegen sollte man text-indent auch niemals in Menüs/Navigationen verwenden, sollte nämlich doch mal ein Menüpunkt umbrechen, ist nur die obere Zeile eingerückt, nicht aber der Rest des Textes. In solchen Fällen ist padding zu bevorzugen.

Nächstes Beispiel: Wie in Türchen #3 angedeutet, wird text-indent gern zum verstecken von Text verwendet, speziell wenn es um Image-Replacement geht. Wollen wir doch noch mal nachsehen, wie genau das funktioniert. Wir nehmen wieder den Absatz von oben und fügen noch ein span-Tag ein, dass wir mit einem Bild (in diesem Fall der Schriftzug meines Blogs) ersetzen wollen..

HTML

1
2
3
4

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. <span class="logo">Norman's Blog</span> 
At vero eos et accusam et justo duo dolores et ea rebum.</p>

CSS

1
2
3
4
5
6
7
8

.logo {
	background:transparent url(normansblog_logo.png) no-repeat 0 0;
	display:inline-block; /*damit height und width greift*/
	height:29px; /*Höhe des Bildes*/
	text-indent:-9999px;
	vertical-align:bottom;
	width:150px; /*Breite des Bildes*/
}

Ergebnis

Soviel dazu, text-indent ist also eine nützliche Sache, die man im Hinterkopf behalten sollte.

Auch an diesem wundervollen Abend gilt es einmal mehr ein Türchen im Adventskalender zu öffenbaren, diesmal verbirgt sich dahiner.. cursor! Mit dieser tollen Eigenschaft ist es uns möglich, das Bild des Mauszeigers zu ändern, wenn dieser über bestimmte Elemente unserer Webseite fährt bzw. ruht.

Browserunterstützung

Browser
ab Version	1.0	1.2	7.0	1.0	4.0

cursor hat sehr viele mögliche Werte, angefangen vom normalen Pfeil, über eine Hand, bis hin zu einer Sanduhr kann man so ziemlich alles damit machen. Die Unterstützung an der Browserfront ist sehr gut, einige extravagante Icons sind allerdings erst in höheren Versionen nutzbar bzw. abhängig vom jeweiligen Betriebssystem.

Von der Syntax her ist cursor ganz einfach aufgebaut und kann auf jedes Elemente angewendet werden. Nach der Eigenschaft folgt einfach eines der vielen Schlüsselwörter. Man kann auch eigene Cursor verwenden, hierzu benötigt man jedoch eine .cur-Datei (eine besondere Form des .ico Formats). Diese bindet man dann über url(pfad-zur-cursor-datei) ein.

CSS

1
2
3
4
5
6
7
8
9

abbr {
	cursor:help;
}
.wait {
	cursor:wait;
}
.hide-cursor {
	cursor:none;
}

Beispiele

Im Folgenden werde ich mal einige Werte auflisten, wenn ihr über den Listeneintrag fahrt, werden ihr sehen, wie sich euer Mauszeiger verändert.

• default
• none
• help
• pointer
• progress
• wait
• crosshair
• move
• n-resize

Eine komplette Übersicht mit allen möglichen Werten gibt es unter anderem im MDN. Wie ihr sicherlich schon richtig vermutet, kann man cursor dazu nutzen, um damit allerhand Blödsinn anzustellen. Das ist natürlich nicht der Sinn des Erfinders. Vielmehr würde ich mir wünschen, dass bei anklickbaren Elemente (in Zeiten von jQuery und Co. kann das ja alles sein) ein Pointer-Cursor erscheint, und bei Dialogboxen/Fenstern entsprechend ein Move-Cursor.

Für erklärende Elemente, wie das abbr-Tag beispielsweise, sollte man cursor:help setzen, damit der User weiß: “Ah, hier wird mir etwas erklärt, hier bekomme ich Hilfe.” Kleine Dinge, die die Usability einer Seite aber entscheidend beeinflussen können, aber bitte nutzt es in Maßen!

Wenn wir nun einmal mit Tables angefangen haben, machen wir doch gleich damit weiter. Noch eine Eigenschaft, die es nur für Tables gibt, ist caption-side. Sie ist fest an das caption-Tag gebunden und setzt logischer Weise voraus, dass ihr solches auch benutzt. Die Eigenschaft gibt dabei an, auf welcher Seite der Tabelle der Titel ausgegeben werden soll.

Browserunterstützung

Browser
ab Version	1.0	1.0	4.0	1.0	8.0

caption-side hat zwei Werte, die von Bedeutung sind: top und bottom, wobei erstes den Defaultwert darstellt. Firefox unterstützt zudem auch noch left und right. Die Wahrscheinlichkeit aber, mit der ein Fall eintritt, indem einer dieser beiden Werte nötig wären, geht quasi gegen Null.

Beispiel

Wie letztens gehts mit einer normalen Tabelle los, diese hier wird auch eine caption (Überschrift, Bezeichnung) haben, denn darum gehts uns ja.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table>
	<caption>Besucherzahlen</caption>
	<thead>
		<tr>
			<th>Monat</th>
			<th>Besucher</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>11/2010</td>
			<td>2.744</td>
		</tr>
		<tr>
			<td>10/2010</td>
			<td>2.503</td>
		</tr>
		<tr>
			<td>09/2010</td>
			<td>2.771</td>
		</tr>
	</tbody>
</table>

Da caption-side:top der Standard ist, erwartet uns folgende Ausgabe:

Jetzt nutzen wir caption-side:bottom und wenden es am caption-Tag an.

CSS

1
2
3

caption {
	caption-side:bottom;
}

Damit sieht unsere Tabelle dann so aus:

Das Gleiche könnt ihr jetzt ja mal für left und right im Firefox probieren.

Manchmal werden sie einfach noch gebraucht, auch wenn man sie eigentlich überhaupt nicht leiden kann.. die Rede ist nicht von Frauen sondern natürlich von Tables. Im Zusammenhang mit Tables gibt es einiges zu wissen und kennen zu lernen. Neben den ganzen Elementen und Hierarchien, die man damit aufbauen kann, gibt es auch eine ganze Reihe von CSS Eigenschaften, die speziell Tables beeinflussen. Eine davon, nämlich empty-cells, stelle ich euch heute vor.

Browserunterstützung

Browser
ab Version	1.0	1.2	4.0	1.0	8.0

Eigentlich schon erstaunlich wie wenig der IE vor Version 8 überhaupt beherrscht hat, empty-cells hat jedenfalls nicht dazu gehört. Aber da es sich hier eh nur um eine kosmetische Eigenschaft geht, ist das noch vertretbar. Was macht empty-cells? Wie der Name schon andeutet, handelt es sich hier um Zellen einer Tabelle, die durch CSS ausgeblendet werden können, wenn sie leer sind.

Der dafür zuständige Wert lautet hide, um leere Zellen wieder anzuzeigen, muss der Wert auf show gestellt werden. show ist außerdem der Standardwert für empty-cells.

Beispiel

Schauen wir uns die Sache an einer Beispieltabelle an:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table>
	<thead>
		<tr>
			<th>Browser</th>
			<th>CSS3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Firefox</td>
			<td>ja</td>
		</tr>
		<tr>
			<td>Chrome</td>
			<td>ja</td>
		</tr>
		<tr>
			<td>IE</td>
			<td></td>
		</tr>
	</tbody>
</table>
<p>(..jede Menge Tags, ich weiß..)</p>

Ergebnis

Raus kommt eine normale Tabelle, eventuelle Borders und Hintergründe werden auch für leere Zellen gerendert, jetzt das Ganze mit empty-cells:hide.

1
2
3

table {
	empty-cells:hide;
}

Ergebnis

Und weg ist die leere td! Naja nicht ganz weg, aber halt versteckt. Sie bleibt immer noch im Markup vorhanden und behält ihre Ausmaße. Man muss auch keine Angst haben, dass floatende Elemente in die Lücken rutschen oder sowas in der Art.

Komischer Weise hat sich so ein bisschen das Gerücht verbreitet, dass negative Werte für margin irgendwie falsch oder nicht standardkonform oder Cross-Browser-inkompatibel sein sollen. Das ist natürlich vollkommener Blödsinn, vor allem wenn man bedenkt, wie nützlich es sein kann, negative Werte zu benutzen. Ein Beispiel will ich euch gern zeigen.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	3.0

margin wird natürlich von allen Browsern seit jeher unterstützt, dazu zählt auch die Angabe von negativen Werten. Damit lässt sich allerhand machen und kann einen in so manch einer kniffligen Situation aus der Patsche helfen. Prinzipiell könnte man es vielleicht am ehesten mit position:relative vergleichen. Die Position bzw. die Ausmaße einen Blocks ändern sich.. aber wie immer lässt es sich am besten an einem Beispiel erklären.

Beispiel

Nehmen wir ein einfaches Widget mit einer Überschrift, innerhalb des Widgets gibt es eine Überschrift und Inhalt in irgendeiner Form. Natürlich soll der Inhalt einen gewissen Abstand zum Rand des Widgets haben, dafür nutzen wir logischerweise Padding. Die Überschrift allerdings, soll durch einen Hintergrund farblich hervorgehoben sein.. aber durch das Padding des Widgets entsteht jetzt links und rechts eine Lücke, was also tun?

Schauen wir uns das Ganze mal näher an:

HTML

1
2
3
4

<div class="widget">
	<h4>Überschrift</h4>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS

1
2
3
4
5
6
7
8
9

.widget {
	border:1px solid #aaa;
	padding:0 10px 10px;
	width:200px;
}
h4 {
	background-color:#adf;
	padding:0 10px;
}

Ergebnis

Da haben wirs.. grottig diese blöde Lücke links und rechts – aber es gibt eine Lösung für dieses Problem: negatives Margin to the rescue!

Überschrift bekommt negatives Margin

1
2
3
4
5

h4 {
	background-color:#adf;
	padding:0 10px;
	margin:0 -10px;
}

Ergebnis

Ach schön.

Am neunten Tag möchte ich euch display:inline-block näher bringen. display an sich dürfte ja allen bekannt sein.. es gibt (neben diversen anderen) display:none, display:block, display:inline und eben noch etwas dazwischen – inline-block. Wozu man das braucht und wobei es hilfreich sein kann, verrät euch der heutige Eintrag.

Browserunterstützung

Browser
ab Version	3.0	1.0	3.5	1.0	5.5

inline-block hat eine Weile gebraucht bis es sich flächendeckend bei allen Browsern durchgesetzt hat. Aktuelle Versionen unterstützen es problemlos, nur IE6 und 7 haben eine Einschränkung: Der Wert wird nur auf inline-Elemente korrekt angewendet.

Was ist nun der große Vorteil von Inline-Block-Elementen? Anders als Block-Elemente, welche standardmäßig auf die volle Breite des Elternelements aufgezogen, verhalten sich Inline-Block-Elemente wie Replaced Elements (das img-Tag wäre ein Beispiel dafür). D. h. dass sie in den Textfluss eingebunden bleiben aber dennoch dir Vorteile eines Block-Elements genießen. Dazu zählen unter anderem volle Unterstützung für Margin. Auf normale Inline-Elemente kann man beispielsweise kein Margin anwenden, das hat schlicht keinen Einfluss.

Beispiel

Oftmals wird inline-block eingesetzt, wenn man ein Grid – auf Deutsch “Gitter-Struktur” – aufbauen will, deren Zellen aufgrund ihres Inhalts eine unbekannte Höhe haben können. Nehmen wir an, wie hätten eine Liste mit sechs Elementen, diese wollen wir zu einem 3×2-Grid zusammenfügen.

HTML

1
2
3
4
5
6
7
8

<ul>
	<li>1</li>
	<li>2<br/>+</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>

Zunächst wollen wir das auf althergebrachte Art und Weise machen, mit float:

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

ul {
	border:1px solid #aaa;
	color:#fff;
	font-size:30px;
	list-style:none;
	overflow:hidden;
	padding:0 10px 10px 0;
	width:180px;
}
li {
	background:#adf;
	float:left;
	margin:10px 0 0 10px;
	padding:10px;
	text-align:center;
	width:30px;
}

Ergebnis

• 1
• 2
  +
• 3
• 4
• 5
• 6

Und da sehen wir auch schon das Problem dieser Lösung: Sobald ein Listenelement höher ist als die anderen, bringt es komplett die Reihenfolge durcheinander. Außerdem muss die Liste gecleared werden, da die Listenelemente floaten. Genau da hilft uns inline-block weiter, aber auch damit muss man zwei Dinge beachten.

1. Dadurch, dass die Elemente nun Inline-Charakter haben, werden Zeilenumbrüche, Einrückungen und Leerzeichen im Code als zu einem Leerzeichen zusammengefasst. Um dem entgegen zu wirken, brauch man nur die li-Tags hintereinander zu schreiben.
2. Ein weiterer Nachteil des Inline-Charakters ist die Tatsache, dass jetzt das Vertical-Alignment greift. Wir müssen also vertical-align:top setzen, damit die Listenelemente nach oben hin bündig zueinander sind.

HTML

1
2
3

<ul>
	<li>1</li><li>2<br/>+</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

ul {
	border:1px solid #aaa;
	color:#fff;
	font-size:30px;
	list-style:none;
	/*overflow:hidden;*/
	padding:0 10px 10px 0;
	width:180px;
}
li {
	background:#adf;
	/*float:left;*/
	display:inline-block;
	margin:10px 0 0 10px;
	padding:10px;
	text-align:center;
	width:30px;
	vertical-align:top;
}

Ergebnis

• 1
• 2
  +
• 3
• 4
• 5
• 6

Somit hätten wir ein schönes Grid, das so umbricht, wie man es von einem Grid erwartet. To be continued..

Tag acht des CSS-Adventskalenders, wie die Zeit vergeht. Heute im Angebot: white-space und wie und warum man es benutzt. Wie immer gibts ein aussagekräftiges Beispiel, wenn ihr allerdings noch ein besseres bzw. überzeugenderes parat habt, dann immer her damit! Und ja ich weiß, ich bin viel zu spät dran damit aber besser spät als.. na ihr wisst schon.

Browserunterstützung

Browser
ab Version	1.0	1.0	4.0	1.0	6.0

white-space hat im Laufe der Zeit einige neue mögliche Werte bekommen, uns geht es aber primär um den Wert nowrap, den jeder relevante Browser schon seit längerem unterstützt. nowrap ermöglicht es uns Zeilenumbrüche zu verhindern. D. h. egal was kommt, Text mit diesem Wert wird auf keinen Fall umgebrochen.

Beispiel

Am einfachsten kann man das durch ein Beispiel zeigen. Manchmal möchte man ein Element in eine Richtung floaten lassen und vergibt eine eher schmale Breite. Innerhalb des Elements steht meinetwegen eine Überschrift und ein Datum, da der Browser nicht weiß, dass es ein Datum ist, bricht er den Text aufgrund der Breite innerhalb des Datums um. Das sieht nicht schön aus, besser wäre es doch, wenn der Text nach der Überschrift umbrechen würde und das Datum zusammen bleibt.

HTML

1
2
3
4

<div class="widget">
	<h3>Überschrift <span class="datum">8. Dezember 2010</span></h3>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS

1
2
3
4
5
6

.widget {
	background-color:#eee;
	border:1px solid #aaa;
	padding:10px;
	width:180px;
}

Ergebnis

Wie ihr seht, bricht der Text erst nach der “8″ um, somit wird das Datum auseinander gerissen. Um das zu vermeiden, geben wir jetzt der Klasse “datum” white-space:nowrap.

CSS

1
2
3

.datum {
	white-space:nowrap;
}

Ergebnis

Und siehe da, das Datum bleibt als Ganzes erhalten und die Überschrift muss nun an anderer Stelle umbrechen. Mission accomplished.

Ich weiß, ich weiß.. ich hatte versprochen etwas pünktlicher zu werden und jetzt ist es später als je zuvor. Tut mir leid aber am Geburtstag meiner Mutter gibt es einfach andere Prioritäten als einen Artikel im Blog zu schreiben.

Trotzdem will ich mir jetzt die Zeit nehmen und euch etwas über outline erzählen.

Browserunterstützung

Browser
ab Version	1.5	1.2	7.0	1.0	8.0

Wow, erst ab IE8 wird das unterstützt.. ich musste auch erst zwei mal hinsehen und auf einer zweiten Seite checken aber okay. outline gibt es prinzipiell aus einem Grund. Dieser eine Grund besteht darin, Elemente, die mit der Tastatur (meistens durch Drücken der Tabulator-Taste) sogenannten “Fokus” bekommen, hervorzuheben. Dies geschiet in der Regel durch eine gepunktete Linie, die um das Elemente gezogen wird. Im Prinzip handelt es sich dabei um eine Art Spezialfall von border Da nur klickbare Elemente Fokus bekommen, können wir durchaus outline dazu benutzen einen doppelten Border-Effekt für nicht-klickbare Elemente zu erstellen.

Leider ist outline um einiges restriktiver als es border ist. Es erlaubt nämlich nicht, nur bestimmte Seiten rendern zu lassen, sondern rendert immer alle vier Seiten. D. h. im Klartext: es gibt kein outline-top/-right/-bottom/-left sondern eben nur outline.

Das Wertetripel ist allerdings das Gleiche wie wir es von border her kennen:

1. outline-width, die Linienstärke – angegeben in irgendeiner Maßeinheit
2. outline-style, ein Style-Schlüsselwort wie bspw. dottet, solid, dashed oder groove
3. outline-color, Farbe der Linie; wenn nicht angegeben, nimmt es (zumindest in Firefox) den Wert der Schriftfarbe an

Beispiele

Wie oben schon erwähnt werden wir jetzt mal eine doppelte Border mit Hilfe von outline erstellen:

CSS

1
2
3
4
5
6
7

.widget {
	background-color:#eee;
	border:5px solid #aaa;
	padding:10px;
	outline:5px solid #888;
	width:200px;
}

Ergebnis

Aber Achtung: Outline zählt nicht zum Box-Model, das Margin fängt stets nach der Border an, Outline wird dabei ignoriert. Es hat damit auch keinen Einfluss auf den Gesamtfluss aller anderen Elemente.

Ein weiteres Beispiel wäre einer Box oder einem Widget einen kleinen 3D-Effekt zu verpassen. Dazu hellt man die oberste Pixelreihe auf und dunkelt die anderen ab, um so die Box hervorzuheben.

CSS

1
2
3
4
5
6
7
8

.box {
	background-color:#adf;
	border-top:1px solid #cff;
	border-bottom:1px solid #28a;
	padding:10px;
	outline:5px solid #7ac;
	width:200px;
}

Ergebnis

Ich geb’s ja zu.. man muss schon etwas genauer hinsehen. Aber solche Details sind es schließlich, die ein klasse Design von einem guten Design unterscheiden können. Und mit outline geht das ganz einfach ohne zusätzlichem Markup.

Ach und bevor ich wieder Mecker einstecken muss: Die durch Outline produzierte Border wird derzeit im Firefox nicht von border-radius abgerundet, bei anderen Browsern bin ich mir grad nicht sicher. Und ja, man kann eine doppelte Border auch mit box-shadow herstellen aber das ist noch Cross-Browser-inkompatibler ( ) als man mit outline schon ist.

Bis morgen dann.

Und, hattet ihr was leckeres in euren selbstverständlich geputzten Schuhen? Wenn nicht, gibts hier wieder etwas, was eure Laune eventuell anheben kann. Hinter Türchen Nummer sechs haben wir heute overflow:hidden, das viele im Zusammenhang mit Verstecken von Inhalt bzw. Scrollbalken kennen werden. Es gibt aber noch einen anderen Anwendungsfall…

Browserunterstützung

Browser
ab Version	1.0	1.1	4.0	1.0	4.0

Die Eigenschaft overflow wird von allen Browsern beherrscht, im IE6 gibts allerdings ein kleines Problem, wenn der Wert visible gesetzt ist. Demnach vergrößert er das Element, damit der Inhalt hinein passt. Dadurch verhalten sich height/width wie min-height/min-width. Uns interessiert aber nur ganz speziell der Fall von overflow:hidden und da gibts keine Probleme.

Normalerweise setzt man diese Eigenschaft ja dazu ein, um überstehenden Text auszublenden oder um zu verhindern, dass Scrollbalken erscheinen. Ein schöner Nebeneffekt ist aber, dass Elemente mit overflow:hidden ihren gefloateten Inhalt “clearen”.

Beispiele

Am besten wir schauen uns das mal an einem Beispiel an. Folgender Aufbau: Ein Container hat eine nach links floatende Box als Inhalt. Dadurch fällt der Container in sich zusammen und alle nachrückenden Inhalte rücken nach oben.

HTML

1
2
3
4

<div class="container">
	<div class="box">Box</div>
	Container
</div>

CSS

1
2
3
4
5
6

.box {
	float:left;
	height:100px;
	margin-right:10px;
	width:100px;
}

Ergebnis

Seht ihr was ich meine? Das sieht doof aus und oftmals will man das gar nicht.

Um das zu vermeiden, kann man jetzt dem nachrückenden Inhalt z. B. ein clear:both geben. Das löst zwar das Problem mit dem Text neben der Box, aber nicht die Höhe unseres Containers. Jetzt kommt aber overflow:hidden ins Spiel, das wir dem Container verpassen müssen:

CSS

1
2
3

.container {
	overflow:hidden;
}

Ergebnis

Siehe da, alles bestens, die floatende Box wird wieder komplett vom Container umschlossen. Dabei brauchen wir nicht einmal zusätzliches Markup wie beispielsweise ein Clear-Div.

Short and simple, schönen Tag noch und bis morgen.

Komm grad zurück vom JK2-Zocken und hab dabei wohl etwas die Zeit vergessen, aber hier nun Türchen Nummer fünf mit.. Word-Wrap! Schonmal das Problem gehabt, dass in Mock-Ups die Überschriften der Widgets alle schön gepasst haben aber im Real-Betrieb dann so lange Wörter beinhalten (ich liebe Deutschland für seine zusammengesetzten Substantive), dass sie übers Widget hinausragen? Ja? Dann ist word-wrap genau das Richtige für euch.

Browserunterstützung

Das schöne an word-wrap ist, dass man bedenkenlos einsetzen kann und es, obwohl Teil der CSS3 Spezifikation, von allen Browsern unterstützt wird. Vermutlich liegt das daran, dass es ursprünglich von Microsoft kommt (daher auch Support in IE6).

Browser
ab Version	3.5	1.0	10.5	1.0	5.5

Es hat zwei Werte aus denen man wählen kann, wobei letzteres das Interessantere von beiden ist:

1. normal, der Defaultwert lange, Wörter bleiben lang und werden nicht umgebrochen
2. break-word, Wörter, die zu lang sind werden einfach umgebrochen und ragen somit nicht mehr über ihr Elternelement hinaus

Beispiel

Kommen wir ohne große Umwege zu einem Beispiel, wir wollen word-wrap ja auch mal in Aktion sehen. Prinzipiell kann man diese Eigenschaft natürlich jedem Element geben, es bietet sich aber an, es gleich dem body-Tag zu verpassen, dann wirkt es sich gleich auf die ganze Seite aus. Zunächst aber ein Beispiel, wie es ohne word-wrap aussieht:

Beispiel ohne Word-Wrap

Jetzt im Vergleich dazu der gleiche Text mit break-word:

CSS

1
2
3

body {
	word-wrap:break-word;
}

Beispiel mit Word-Wrap

Der Text wird zwar ohne Bindestrich umgebrochen, dafür ragt nichts mehr aus der Box heraus, was uns unter Umständen das Layout kaputt machen könnte. In Zusammenarbeit mit overflow:hidden geht außerdem der überstehende Text nicht mehr verloren.

So.. und für morgen versuche ich wieder pünktlich zu sein.

Verzeiht mir die kleine Verspätung aber hier nun Türchen Nummer vier, hinter dem sich heute font-variant verbirgt. Schade eigentlich, dass font-variant so selten benutzt wird, es ist ein schöner Effekt besonders für Überschriften oder Einleitungen, aber dazu gleich mehr.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	4.0

font-variant gibt es schon ewig und wird von allen Browsern problemlos unterstützt. Es stehen uns drei Werte zur Auswahl, von denen meistens nur einer wirklich gebraucht wird.

1. normal, Default-Wert, muss nicht zwingend angegeben werden
2. small-caps, damit lässt sich Text manipulieren: Kleinbuchstaben werden zu Großbuchstaben, verändern aber (im Gegensatz zu text-transform) ihre Höhe nicht
3. inherit, übernimmt den Wert für diese Eigenschaft vom Elternelement

Beispiel

Es ist unschwer zu erkennen, dass wir uns hier nur den Wert small-caps genauer ansehen wollen. Wie gesagt, der Text wird manipuliert und Kleinbuchstaben werden zu.. kleinen Großbuchstaben, “Small Capitals” eben. Zunächst ein Beispieltext:

HTML

1
2

<h3>Überschrift des Textes</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

Ohne font-variant kommt das dabei raus:

Jetzt wollen wir der Überschrift sagen, dass sie small-caps benutzen soll, das können wir entweder direkt über font-variant machen oder aber in Kurzschreibweise als Teil der font Property.

CSS font-variant

1
2
3
4
5
6
7

h3 {
	font-family:georgia,serif;
	font-size:22px;
	font-variant:small-caps;
	font-weight:normal;
	line-height:30px;
}

ODER als Teil von font

1
2
3

h3 {
	font:small-caps normal 22px/30px georgia,serif;
}

In beiden Fällen sieht unser Text dann so aus..

Je nach Schriftart kann es von Vorteil sein auch noch etwas letter-spacing hinzuzufügen, um die Lesbarkeit zu erhöhen. Prinzipiell macht aber eine solche Überschrift schon etwas mehr her und zieht die Blicke auf sich. Dabei wirkt sie aber nicht so aufdringlich wie eine Überschrift, die nur mit (großen) Großbuchstaben geschrieben wurde.

Heute bin ich extra früh aufgestanden (ja – um 9:00 Uhr ist sehr früh) um euch einen neuen Eintrag im Adventskalender zu schreiben. Naja jedenfalls gehts heute um das kleine Wort transparent, das – wie ihr sicherlich wisst – an sich nichts Neues ist. ABER in der Verbindung mit dem anderen kleinen Wort color durchaus etwas Neues darstellt.

Browserunterstützung

Browser
ab Version	3.0	3.1	10.0	1.0	9.0

Ja transparent sollte euch zumindest schon einmal begegnet sein.. vermutlich im Zusammengang mit background oder ganz speziell als background-color. Außerdem kann man es auch als border-color benutzen, beides geht seit CSS2.

Als Wert für Color allerdings ist es erst in CSS3 “erlaubt”, deswegen ist die Unterstützung im IE auch recht dürftig. Nichtsdestotrotz will ich euch die Vorzüge dieser Variante nicht vorenthalten.

Beispiel

Viele von euch kennen sicherlich das leidige Thema Image Replacement. Jens Meiert hat mal eine Übersicht mit so ziemlich allen bis dato bekannten Methoden auf- und vorgestellt (kann ich nur empfehlen mal zu lesen), mit denen man Text durch Bilder ersetzen kann. Seine, ich nenne es jetzt mal Favoriten sind demnach die..

[...] Phark-Methode, bedingt durch ihre Einfachheit, und SIIR, bedingt durch ihr Potential [...]

Da die Phark-Methode die einzige von beiden ist, die ausschließlich mit CSS zu realisieren ist, ist sie mein Favorit.

Wie ich vor einer ganze Weile bei Twitter schonmal schrieb, hat color:transparent im Prinzip einen richtig guten Anwendungsfall: Die prima Phark-Methode wird sauberer, indem text-indent wegfällt. Also lautet der Code für halbwegs gutes Image Replacement in guten Browsern ab jetzt so (zumindest bei mir):

HTML

1

<h1>Firefox</h1>

CSS

1
2
3
4
5
6

h1 {
	background:url(firefox.png);
	color:transparent;
	height:150px;
	width:150px;
}

Ergebnis

Firefox

Von der Schrift “Firefox” ist nichts mehr zu sehen, außer man markiert die ganze Überschrift. Übrigens könnte man auch rgba(0,0,0,0) nehmen, quasi das Äquivalent zu transparent.

Der Fallback im IE ist die Farbe Schwarz, was aber Mozilla nicht davon abhält es einzusetzen. Schönen dritten Dezember noch!

So da ihr jetzt hoffentlich euren echten Adventskalender für heute schon geplündert habt, gibts jetzt noch das zweite Türchen des CSS-Kalenders. Weniger süß, dafür umso informativer.

Diesmal gehts um die Eigenschaft Text-Transform, die es uns ermöglicht Groß- und Kleinschreibung eines Textes zu verändern.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	4.0

text-transform gibt es schon seit CSS1 Zeiten und wird von allen Browsern unterstützt. Sie wird allerdings meiner Erfahrung nach recht wenig benutzt, bzw. erst spät von “CSS-Neulingen” entdeckt, dabei ist kann sie ziemlich nützlich sein.

Die Syntax der Eigenschaft erlaubt neben none und inherit genau drei Werte, die von uns von Bedeutung sind:

1. capitalize, alle Wörter im Text beginnen mit einem Großbuchstaben
2. uppercase, alle Buchstaben eines Textes werden zu Großbuchstaben
3. lowercase, alle Wörter beginnen mit kleinen Buchstaben, auch Satzanfänge und Substantive

Schauen wir uns die Beispiele an.

Beispiele

Als Ausgangsbasis wird uns folgender Text, der genauso im Quellcode steht, dienen:

1
2
3

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua.</p>

text-transform: capitalize

1
2
3

.capitalize {
	text-transform:capitalize;
}

jedes Wort muss groß anfangen

text-transform: uppercase

1
2
3

.capitalize {
	text-transform:uppercase;
}

alles großgeschrieben

text-transform: lowercase

1
2
3

.capitalize {
	text-transform:lowercase;
}

alles kleingeschrieben

Ich denke, dass gerade die Fälle capitalize und uppercase bei Überschriften, Titeln oder Einleitungssätzen von Nutzen sein können.
Das wars für heute, bis morgen!

Damit die Vorweihnachtszeit nicht zu langweilig wird, habe ich mir gedacht ich biete euch einen kleinen Adventskalender in Form von 24 Artikeln an. Das heißt, euch erwartet ab heute jeden Tag ein Beitrag zum Thema: Selten benutzte CSS Properties.

Dabei lernt ihr nützliche CSS Properties kennen, von denen ihr bisher vielleicht nicht einmal wusstet, dass es sie gibt. Den Anfang macht heute Box-Sizing.

Browserunterstützung

Die Eigenschaft box-sizing dient zur Steuerung des CSS Box-Models. Das normale W3C-Box-Model besteht aus Width×Height + Padding + Border + Margin. Dabei werden Padding, Border nicht mit bei der Breiten- bzw. Höhenberechnung berücksichtigt. Mit box-sizing kann man dieses Verhalten jedoch ändern und so das “alte” Box-Model des IE6 (Quirks Mode) nutzen.

Browser
ab Version	1.0	3.0	7.0	1.0	8.0

Da eine CSS3-Eigenschaft ist, wird sie noch nicht von allen Browsern in ihrer eigentlichen Schreibweise unterstützt. Gecko- und Webkit-Engines benutzen noch sogenannte Vendor-Prefixes. Als mögliche Werte stehen zwei (für Firefox drei) zur Auswahl:

1. content-box (Default-Wert), spiegelt das W3C-Box-Model wider
2. border-box, damit wird Padding und Border-Width in die Breiten- und Höhenberechnung eingebunden
3. padding-box (nur Firefox), hierbei wird lediglich das Padding mit einberechnet

Eine Zuweisung per CSS würde demnach folgendermaßen aussehen:

1
2
3
4
5

.box-sizing {
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari, Chrome */
	box-sizing:border-box; /* IE8, Opera */
}

Beispiele

Unten stehende Boxen haben die gleichen folgenden CSS-Eigenschaften und unterscheiden sich ausschließlich durch ihr Box-Model. (Ihr könnt es gerne mit Firebug o.ä. nachprüfen )

1
2
3
4
5
6
7
8

.box {
	background-color:#eee;
	border:10px solid #aaa;
	height:60px;
	margin:10px;
	padding:10px;
	width:350px;
}

Wie ihr seht, sind die Boxen unterschiedlich lang, obwohl wir beiden eine Width von 350px gegeben haben. box-sizing mit dem Wert border-box berechnet die Breite (bzw. Höhe) also aus Width (Height) + Padding + Border und nicht wie das normale Box-Model nur aus Width (Height).

Besonders nützlich wird die Eigenschaft, wenn man eine Textarea auf 100% Breite ziehen will und gleichzeitig aber Padding vergeben möchte. Probieren wir es aus:

Die erste Textarea geht 20 Pixel über den Rand hinaus, die zweite verhält sich besser – dank box-sizing!

Und damit wäre Türchen #1 auch schon wieder verputzt, freut euch auf morgen.