Ja klar, werden jetzt einige rufen. Dafür kann man ja einfach die CSS Deklaration box-shadow verwenden! Richtig. CSS3 erlaubt es seit einiger Zeit, mit box-shadow schöne Schatteneffekte an beliebige HTML Elemente zu zaubern und ist dabei ziemlich flexibel.

Aber leider ist es wie mit vielen neuen Dingen - einige Browser unterstützen es noch nicht, oder nur mit speziellen Browserprefixen wie -moz-, -o- oder -webkit-. Dies bedeutet, man muss diese Deklaration für jeden Browser in seiner speziellen Schreibweise wiederholen und bläst damit sein Stylesheet unnötig auf. Und selbst dann werden ältere Browser wie IE8 (und niedriger) oder Opera 10.10 (oder niedriger) nicht unterstützt.

Aus diesem Grund möchte ich euch eine weitere Möglichkeit vorstellen, wie man noch einen Schatten erstellen kann.

Gestatten, Pseudo-Elemente :before und :after

CSS2 bietet schon seit einiger Zeit die Möglichkeit mit Hilfe der Pseudo-Elemente :before und :after Inhalte vor bzw. nach Elementen per CSS hinzuzufügen. So lässt sich zum Beispiel mit folgender Anweisung vor allen Link-Elementen ein Text hinzufügen:

a:before {content: "Ich bin ein Link: "}

Und das alles, ohne etwas am HTML selbst ändern zu müssen. Und ein weiterer Vorteil für uns ist, dass diese Pseudo-Elemente auch schon von einigen älteren Browserversionen unterstützt werden und zudem noch ohne spezielle Prefixe auskommen.

Wie entsteht nun der Schatteneffekt?

Wir nutzen den Umstand, dass der so hinzugefügte Text vom Browser als Block-Element behandelt wird, wenn dieser auch auf ein Block-Element angewandt wird. Er verhält sich also genau so, als wenn wir ein neues DIV-Element hinzugefügt hätten.

Wenn wir dieses Element nun noch mit einer Hintergrundfarbe versehen und entsprechend positionieren, können wir so einen passablen Schatteneffekt erzeugen. Wie genau dies aussieht, könnt ihr nun (endlich) hier sehen:

Da habt ihr es. Ist der Schatten nicht schön?

Jetzt werde ich euch noch schnell den dazu notwendigen Code zeigen und schon steht euch nichts mehr im Wege, um solche Schatten selbst in euren Seiten zu verwenden.

Hier das HTML:

Diese Box hat einen schönen Schatten. 
Wenn Ihr mit der Maus darüberfahrt, seht ihr auch, 
dass sich der Schatten der Größe der Box anpasst.

Und hier das entsprechende CSS:

      
#box {
  background-color: green;
  position: relative;
  width: 50%;
  text-align: center;
  margin: 0px auto;
  padding: 10px;
  color: #fff;
  font-family: sans-serif;
  margin-bottom: 20px;
}
#box:hover {
  font-size: 150%;
}
.shadowme:after {
  content: "";
  background-color: lightGrey;
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 100%;
  height: 5px;
}
.shadowme:before {
  content: "";
  background-color: lightGrey;
  position: absolute;
  top: 5px;
  right: -5px;
  width: 5px;
  height: 100%;
}

Ich wünsche Euch viel Spaß damit und bei Fragen oder Hinweisen könnt ihr gerne die Kommentarfunktion verwenden. :)

That thing became a little famous and was shown on many other websites as an example to what can be done with CSS3 and a modern browser.

Now, a year later, I updated this script so it works now in many other modern browsers such as Firefox, Chrome, Opera and Internet Explorer.

Just browse to the example page and see it for yourself.

And if you have an older browser you can watch this little screen capture:

I hope you like it and I am eager to see what you can come up with using those CSS3 transitions and transforms.

Doch wie genau funktioniert das? Und welche Tools brauche ich dafür? Genau diesen Fragen möchte ich in diesem und in kommenden Artikeln auf den Grund gehen.

Was brauche ich für meine eigene Webseite?

Um zu starten braucht es eigentlich nicht viel. Die wenigen Dinge, die man wirklich benötigt, habe ich hier mal in einer Liste näher beschrieben.

• Etwas Zeit
  Eine gute Homepage lässt sich nicht einfach in wenigen Minuten erstellen, darum sollte man sich auch die entsprechende Zeit nehmen.
• Einen Plan
  Man kann keine eigene Webseite erstellen, ohne vorher zu wissen, welches Ziel man eigentlich mit dieser Seite verfolgen will. Möchte man ein Tagebuch schreiben? Will man Informationen zu einem bestimmten Thema zusammentragen und aufbereiten? Will man sich selbst und die eigenen Projekte vorstellen? Oder möchte man eine Plattform für sich und seine Freunde schaffen? Die Möglichkeiten sind grenzenlos, aber man sollte zumindest grob das Thema der Webseite festlegen.
• Kenntnisse im Umgang mit HTML, CSS und JavaScript
  Man kann keine Homepage erstellen, ohne nicht zumindest die grundlegendsten Bausteine einer Webseite zu kennen. Mit HTML legt man die Struktur und den Inhalt einer Webseite fest. Mit CSS kann man das Aussehen der einzelnen Elemente einer Webseite kontrollieren und mit JavaScript kann man die Funktionalität der eigenen Seite erweitern. Aber erst die Kombination aus allen Zutaten ergibt eine gute Webseite.
• Eine eigene Internetadresse
  Ohne eine eigene Domain kann niemand auf die liebevoll erstellten Inhalte zugreifen. Der Domainname ist die Adresse einer Seite im Internet. Daher sollte man sich einen sprechenden Namen für die eigene Homepage ausdenken. Ob nun www.willies-kochrezepte.de oder www.webmatze.de - solange der Name noch nicht vergeben ist, kann man fast jeden Domainnamen registrieren lassen.
• Webspeicherplatz
  Damit man die erstellen HTML Seiten auch für Jeden zugänglich im Internet ablegen kann, benötigt man etwas Speicherplatz. Diesen Webspeicherplatz oder auch Webspace genannt, wird man sich meistens bei professionellen Webhostern anmieten. Die Kosten dafür sind überwiegend sehr niedrig. Es ist auch möglich, eigene Webserver zu verwenden, doch für eine kleine Homepage reicht meistens weniger aus.

Das waren auch schon die wichtigsten Zutaten für die eigene Homepage. Wie man sehen kann, braucht es nicht wirklich viel, um eine eigenen Webseite zu erstellen. Doch für jemanden, der bisher noch nie eine Homepage erstellt hat, können einige der Punkte trotzdem eine Hürde darstellen.

Schritt für Schritt zur eigenen Webseite

Gerade für diese Anfänger - und dass meine ich nicht abwertend, denn jeder hat einmal an diesem Punkt begonnen - werde ich in den nächsten Tagen und Wochen in verschiedenen Beiträgen auf die einzelnen oben angesprochenen Punkte näher eingehen. Am Ende wird dann jeder eine Schritt für Schritt Anleitung für die erste eigene Homepage zur freien Verfügung haben.

Auf folgende Punkte werde ich dabei detaillierter eingeben:

• Wie man das richtige Thema für die eigene Homepage wählt
• HTML, CSS und JavaScript - Das Grundgerüst einer Webseite beherrschen
• So findet man den passenden Domainnamen für die eigene Webseite
• Wie wähle ich den richtigen Webhoster für meine Homepage aus?
• Wie bekomme ich mehr Besucher für meine eigenen Webseite?

Ich freue mich schon darauf und hoffe, dass der Eine oder Andere von Euch mit Hilfe dieser Anleitungen seine erste eigene Homepage erstellen können wird.

Auf vielen Seiten werden immer noch Navigationsmenüs verwendet, welche vollständig auf JavaScript aufbauen und bei ausgeschaltetem JavaScript nicht mehr funktionieren. Solche Seiten sind dann für Nutzer mit Behinderungen meistens nicht mehr bedienbar.

Das barrierefreie CSS Menü

In diesem Beitrag möchte ich euch zeigen, dass man Menüs auch auf behindertengerechte und barrierefreie Weise erstellen kann. Ziel ist es ein Menü zu bauen, dass nur auf aktuellen Standards wie HTML und CSS beruht und keine Verwendung von JavaScript macht. So soll es möglich sein, dass Menü auch dann noch bedienen zu können, wenn der Nutzer JavaScript oder gar CSS im Browser ausgeschaltet hat.

So sieht das fertige Menü aus

Hier könnt Ihr schon einmal sehen, wie das Menü aussehen wird. (Wird im IE6 als vertikales Menü angezeigt, während es alle modernen Browser als Drop Down Menü angezeigen.)

• Start
• Informationen
  • Webseiten erstellen
    • HTML
    • CSS
    • Programmieren
      • JavaScript
      • PHP
      • Java
      • ActionScript
      • Ruby
    • Flash
  • Multimedia
    • Grafiken
    • Videos
• Suchen
  • Google
  • Yahoo
  • MSN
• Über

Dieses Beispiel hat insgesamt vier Ebenden, wobei jede einzelne Ebene auch noch unterschiedlich per CSS angepasst werden kann.

Der HTML Code

Der Aufbau dieses Menüs per HTML erfolgt über verschachtelte unsortierte Listen <ul>. Zur besseren Veranschaulichung könnt Ihr hier den HTML Code betrachten:

	
Start
	
Informationen
		

			
Webseiten erstellen
				

					
HTML
					
CSS
					
Programmieren
						

							
JavaScript
							
PHP
							
Java
							
ActionScript
							
Ruby
						
					
					
Flash
				
			
			
Multimedia
				

					
Grafiken
					
Videos
				
			
		
	
	
Suchen
		

			
Google
			
Yahoo
			
MSN
		
	
	
Über

Wie man sehen kann, gibt es keine besonderen Tricks. Es handelt sich einfach um ganz normalen standardkonformen HTML Code. Auch ohne CSS kann man dieses Menü bedienen und alle einzelnen Links aufrufen.

Um das Menü aber etwas ansprechender zu gestalten, wird es durch die folgenden CSS Anweisungen in die richtige Form gebracht.

Der CSS Code

Ich werde jetzt nicht ins Detail gehen, wie genau die einzelnen Anweisungen sich auf die Darstellung des Menüs auswirken. Zum besseren Verständnis habe ich ein paar Kommentare in den CSS Code mit aufgenommen. Anmerken möchte ich jedoch, dass ich den letzten Teil nur mit aufnehmen musste, weil sich der IE 6 hier etwas quer stellt und sich nur durch spezielle CSS Anweisungen dazu bringen lässt, das Menü ebenfalls richtig darzustellen. (Wer möchte, kann den IE 6 speziellen Teil natürlich weglassen.)

ul.cssmenu {
	position: relative;
	display: block;
	margin: 0px;
	padding: 0px;
}
ul.cssmenu ul {
	position: relative;
	display: none;
}
ul.cssmenu li {
	position: relative;
	display: inline;
	float: left;
}
/* Menupunkt stylen */
ul.cssmenu li a {
	font-family: arial, sans-serif;
	font-size: 12px;
	line-height: 20px;
	text-decoration: none;
	text-align: center;
	display: block;
	width: 100px;
	height: 20px;
}
ul.cssmenu li:hover > a {
	background-color: #666666;
	color: #FFFFFF;
	font-weight: bold;
}
/* Untermenüpunkt einblenden */
ul.cssmenu li:hover > ul {
	position: absolute;
	top: 20px;
	left: -40px;
	display: inline;
}
/* ab zweite Ebene */
ul.cssmenu li li:hover > ul {
	top: 0px;
	left: 110px;
}
ul.cssmenu li li a {
	width: 150px;
}
/* Farben der einzelnen Ebenen (werden vererbt)*/
ul.cssmenu a {
	color: #000000;
	background-color: #e4e4e4;
}
ul.cssmenu ul a {
	background-color: #d4d4d4;
}
ul.cssmenu ul ul a{
	background-color: #c4c4c4;
}
ul.cssmenu ul ul ul a{
	background-color: #b4b4b4;
}

/* zusätzliche Styleangaben für IE 6 */
/* das Menü wird dort untereinander dargestellt */
ul.cssmenu {
	_text-indent: 10px;
}
ul.cssmenu ul {
	_display: inline;
	_margin-left: 0px;
	_text-indent: 20px;
}
ul.cssmenu ul ul {
	_text-indent: 30px;
}
ul.cssmenu ul ul ul {
	_text-indent: 40px;
}
ul.cssmenu li {
	_float: none;
}
/* Menupunkt stylen */
ul.cssmenu li a {
	_text-align: left;
	_width: 150px;
}
ul.cssmenu a:hover {
	_font-weight: bold;
	_background-color: #666666;
}

Fazit

Wie Ihr sehen könnt ist es gar nicht so schwer auch ohne JavaScript ein ansprechendes Menü zu gestalten. Das hier gezeigte Beispiel lässt sich natürlich leicht durch andere Farben oder Hintergrundgrafiken per CSS noch weiter verschönern und an die eigenen Bedürfnisse anpassen. Alle modernen Browser sollten damit zurecht kommen - selbstverständlich auch Googles neuer Chrome Browser.

You need the latest nightly build of WebKit to see the effects in action. But you can also watch it as a video on YouTube:

Go to the original Rotating Image Gallery to try for yourself and look at the source code to see how it was made.

I'll give you a more detailed description of those new CSS effects in an upcoming post, so check back later.

Wofür steht irrelevant?

Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.

Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.

Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)

irrelevant schon heute verwenden

Damit man das neue Attribut in HTML Seiten verwenden kann, müsste man darauf warten, dass die aktuellen Browser HTML 5 unterstützen. Doch bis es soweit ist, kann es noch eine Weile dauern, zumal die Spezifikation noch nicht in der finalen Version vorliegt.

Um das Warten aber ein wenig zu verkürzen, kann man die entsprechende Funktionalität in allen aktuellen Browsern auch auf anderem Weg erreichen. Dazu muss man nur zwei einfache CSS Definitionen in das HTML Dokument einbinden, und schon wird das Attribut irrelevant richtig ausgewertet.

(Man sollte jedoch versuchen möglichst nicht irrelevant="false" zu verwenden, sondern statt dessen das Attribut ganz entfernen, da es unter Umständen bei einigen HTML Elementen zu Problemen in der Darstellung kommen kann.)

So kann man nun beliebige Elemente ausblenden lassen:

Laut HTML 5  können nicht relevante Elemente
 ausgeblendet werden, indem ihnen das Attribut irrelevant
 zugewiesen wird. HTML 5 wird noch
 nicht von allen aktuellen Browsern unterstützt.
 Irrelevante Elemente sind solche, die noch nicht, oder nicht
 mehr relevant sind. Das Attribut sollte auf solche Abschnitte
 angewendet werden, die im aktuellen Kontext nicht relevant
 sind, es aber später durchaus wieder werden können.

Wenn man dies mit einem aktuellen Browser wie Firefox 3, Safari 3 oder IE 8 betrachtet, sollte der zweite Satz nicht mehr angezeigt werden:

Elemente per DOM ein- und ausblenden

Jetzt, da wir mit irrelevant gekennzeichnete Elemente vom Browser ausblenden lassen können, fehlt nur noch der entsprechende JavaScript Code, um dies auch dynamisch per Mausklick durchführen zu können:

function hide(elementId) {
	var el = document.getElementById(elementId);
	el.setAttribute('irrelevant',true);
}
function show(elementId) {
	var el = document.getElementById(elementId);
	el.removeAttribute('irrelevant');
}

Fazit

Wie man sieht, kann man schon heute bestimmte HTML5 Features verwenden und so die eigenen Seiten für die Zukunft vorbereiten. Ob man das auch tun sollte, sei jedem selbst überlassen. Da ältere Browser möglicherweise mit den hier gezeigten Beispielen nicht zurecht kommen, ist dies nicht unter allen Umständen die beste Wahl. Aber da in den entsprechenden Browsern in dem Fall die zu versteckenden Inhalte einfach angezeigt werden würden, wäre auch kein größerer Schaden entstanden.

Gerade weil Formulare solch ein wichtiger Bestandteil einer Seite sind, sollte man auch beim Design eines Formulars an den Anwender denken. Klar strukturierte Formulare mit sinnvollen Bezeichnungen und Beschreibungen der einzelnen Felder helfen dem Nutzer dabei, die benötigten Daten schnell eingeben zu können. Aber auch beim HTML Code der Formulare sollte man sich an allgemein gültige Regeln halten, damit diese z.B. auch von behinderten Anwendern leicht ausgefüllt werden können.

Formulare richtig aufbauen

Um ein Formular erstellen zu können, sollte man sich zuerst alle benötigten Daten notieren und sich überlegen, wie man diese als Formularfeld darstellen kann. Namen oder Emails wird man am besten als Texteingabefeld darstellen. Für Beschreibungen oder größere Texte eignet sich die Textarea besser. Eine Auswahl, z.B. ob der Nutzer Mann oder Frau ist, lässt sich sowohl durch Radiobuttons und auch als Auswahlliste darstellen. Mit Checkboxen fragt man schließlich Daten ab, die keine Texteingabe erfordern, sondern nur ausgewählt werden müssen.

Alle verschiedenen Felder sollten möglichst durch ein Label gekennzeichnet werden. Wenn notwendig kann man dies noch durch ausführlichere Beschreibungen ergänzen, wenn sich die benötigten Daten nicht durch ein oder zwei Wörter erklären lassen.

Wenn ein Formular aus mehreren, inhaltlich nicht zusammengehörigen Abschnitten besteht, so sollte man diese durch Fieldsets logisch aufteilen und mit Legend genauer beschreiben.

Ein einfaches Beispiel - Das Kontaktformular

Zur besseren Veranschaulichung werde ich ein einfaches Kontaktformular aufbauen. Kontaktformulare kann man auf fast jeder Seite finden und sind ein wichtiges Mittel zur Kommunikation zwischen Seitenbesucher und Seitenbetreiber.

Am Ende soll unser Kontaktformular folgendermaßen aussehen:

Wie man sehen kann, ist das Formular relativ einfach gehalten, sieht aber dennoch ansprechend aus. Erreicht wird dies durch den Einsatz von gut strukturiertem HTML und einfachen CSS Definitionen.

Der HTML Code

Beim Aufbau des Formulars mit HTML habe ich darauf geachtet, dass es in allen Browsern bedienbar bleibt und auch für Behinderte mit Screenreadern keine Probleme macht. Die einzelnen Formularfelder wie einzeilige oder mehrzeilige Textfelder wurden in einer Liste untergebracht und mit <LABEL> Elementen versehen. Bei bestimmten Feldern habe ich zusätzlich noch einen längeren, beschreibenden Text hinzugefügt:

	

		
Ihre Kontaktdaten
 
		

			

				*Name
				
				
Verwenden Sie wenn möglich Vor- und Zuname.
			
			

				*Email
				
				
Bitte stellen Sie sicher, dass diese Email wirklich existiert.
			
			

				*Ihre Nachricht
				
				

			
		
	
	

		
Ich möchte Folgendes gleich kostenlos mitbestellen
		

			

				Frühlingskatalog
				
			
			

				Sommerkatalog
				
			
			

				Herbstkatalog
				
			
			

				Winterkatalog
				
				

			
		
	
	

		
		
	

Die dazugehörigen Style Definitionen

Damit das Formular auch ansprechend aussieht, muss es natürlich über CSS verschönert werden. Im folgenden CSS sind alle notwendigen Angaben, um die einzelnen Formularelemente auszurichten und farblich gestalten zu können.

.wmForm {
	background-color: #ffffff;
	padding: 10px;
}
.wmForm fieldset.wmButtons input.wmButton {
	float: right;
	width: 150px;
	background-color: #E9F7F6;
	border: 1px solid #7BB9B7;
	color: #7BB9B7;
	margin-left: 10px;
}
.wmForm fieldset legend {
	background-color: #ffffff;
	color: #7BB9B7;
	font-weight: bold;
}
.wmForm ul {
	background-color: #E9F7F6;
	border-top: 2px solid #7BB9B7;
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.wmForm ul li {
	padding: 10px;
	clear: both;
}
.wmForm ul li label {
	display: inline;
	float: left;
	width: 30%;
}
.wmForm ul li label span {
	float: right;
	color: #7BB9B7;
}
.wmForm ul li input,
.wmForm ul li textarea {
	float: right;
	width: 68%;
	background-color: #F0F0F0;
}
.wmForm ul li input:focus,
.wmForm ul li textarea:focus {
	border: 1px solid #7BB9B7;
	background-color: #FFFFFF;
}
.wmForm ul li input.checkbox,
.wmForm ul li input.radio {
	float: left;
	width: 20px;
	border-width: 0px;
}
.wmForm ul li p.wmHint {
	clear: both;
	margin-left: 30%;
	width: 68%;
	text-align: left;
	font-size: 10px;
	padding: 0px 10px;
}

Diese Angaben können natürlich beliebig erweitert oder verändert werden, um das Aussehen des Formulars den eigenen Vorstellungen anzupassen.

Fazit

Wie man bei diesem Beispiel erkennen kann, müssen Formulare nicht grau und langweilig aussehen. Sie können sehr flexibel an das jeweilige Seitendesign angepasst werden. Der Fantasie sind hier fast keine Grenzen gesetzt, aber man sollte immer darauf achten, dass solch ein Formular leicht bedienbar bleibt. Dies ist vor allem auch dann wichtig, wenn man bedenkt das Formulare auch von Menschen mit Behinderungen ausgefüllt werden können müssen.

Anzahl der Spalten festlegen

Um festzulegen, mit wievielen Spalten ein Text dargestellt werden soll, braucht man nur folgende CSS Eigenschaft anzugeben: -moz-column-count. Wobei das Prefix -moz- speziell für den Firefox definiert wurde, da es sich hierbei noch nicht um einen endgültig anerkannten Standard handelt. Sollte sich dieser Standard durchsetzen, würde man das Prefix weglassen und nur noch column-count verwenden. Als Wert gibt man nun die Anzahl der Spalten an:

Dieser Text wird in zwei Spalten angezeigt, wenn man den aktuellen Firefox Browser verwendet. Sollte man einen älteren Browser verwenden, wird dieser Absatz einfach so wie immer mit nur einer Spalte dargestellt werden. Dieser Text wird in zwei Spalten angezeigt, wenn man den aktuellen Firefox Browser verwendet. Sollte man einen älteren Browser verwenden, wird dieser Absatz einfach so wie immer mit nur einer Spalte dargestellt werden.

Das Ergebnis würde dann so aussehen:

Dieser Text wird in zwei Spalten angezeigt, wenn man den aktuellen Firefox Browser verwendet. Sollte man einen älteren Browser verwenden, wird diesr Absatz einfach so wie immer mit nur einer Spalte dargestellt werden. Dieser Text wird in zwei Spalten angezeigt, wenn man den aktuellen Firefox Browser verwendet. Sollte man einen älteren Browser verwenden, wird diesr Absatz einfach so wie immer mit nur einer Spalte dargestellt werden.

[funktioniert vorerst nur im Mozilla Firefox 1.5]

Minimale Spaltenbreite festlegen

Wenn man nun möchte, dass die Spalten nun immer mindestens 200 Pixel breit sein sollen, so kann man dies mit der Eigenschaft -moz-column-width festlegen. Die Spalten sind dann immer mindestens 200 Pixel breit. Und wenn man die Eigenschaft -moz-column-count wegläßt, dann werden automatisch immer so viele Spalten angezeigt wie für die angegebene Breite benötigt werden. Das bedeutet, das folgendes:

Dieser Text wird in einer oder mehreren 
Spalten dargestellt, wobei die Spalten immer mindestens 100 Pixel groß sein müssen. Ist weniger Platz vorhanden wird nur eine Spalte angezeigt. Ist mehr Platz vorhanden, werden entsprechend mehr Spalten dargestellt. Dieser Text wird in einer oder mehreren Spalten dargestellt, wobei die Spalten immer mindestens 100 Pixel groß sein müssen. Ist weniger Platz vorhanden wird nur eine Spalte angezeigt. Ist mehr Platz vorhanden, werden entsprechend mehr Spalten dargestellt.

dann folgendes Ergebnis bringt:

Dieser Text wird in einer oder mehreren Spalten dargestellt, wobei die Spalten immer mindestens 100 Pixel groß sein müssen. Ist weniger Platz vorhanden wird nur eine Spalte angezeigt. Ist mehr Platz vorhanden, werden entsprechend mehr Spalten dargestellt. Dieser Text wird in einer oder mehreren Spalten dargestellt, wobei die Spalten immer mindestens 100 Pixel groß sein müssen. Ist weniger Platz vorhanden wird nur eine Spalte angezeigt. Ist mehr Platz vorhanden, werden entsprechend mehr Spalten dargestellt.

[funktioniert vorerst nur im Mozilla Firefox 1.5]

Und wenn ich zusätzlich noch die Anzahl der Spalten angebe, kann ich erreichen, dass immer zwei Spalten angezeigt werden, außer wenn der zur Verfügung stehende Platz nicht außreicht um mindestens zwei Spalten mit einer Breite von je 200 Pixeln anzuzeigen.

Dieser Text wird in zwei Spalten angezeigt, es sei denn der zur Verfügung stehende Platz reicht nicht aus um 
die Spalten mit einer Breite von mindestens 200 Pixeln darstellen zu können. Ist weniger Platz vorhanden wird nur noch eine Spalte dargestellt. Dieser Text wird in zwei Spalten angezeigt, es sei denn der zur Verfügung stehende Platz reicht nicht aus um die Spalten mit einer Breite von mindestens 200 Pixeln darstellen zu können. Ist weniger Platz vorhanden wird nur noch eine Spalte dargestellt.

Dieser Text wird in zwei Spalten angezeigt, es sei denn der zur Verfügung stehende Platz reicht nicht aus um die Spalten mit einer Breite von mindestens 200 Pixeln darstellen zu können. Ist weniger Platz vorhanden wird nur noch eine Spalte dargestellt. Dieser Text wird in zwei Spalten angezeigt, es sei denn der zur Verfügung stehende Platz reicht nicht aus um die Spalten mit einer Breite von mindestens 200 Pixeln darstellen zu können. Ist weniger Platz vorhanden wird nur noch eine Spalte dargestellt.

[funktioniert vorerst nur im Mozilla Firefox 1.5]

Den Abstand zwischen den Spalten festlegen

Normalerweise schließen die einzelnen Spalten immer direkt aneinander an. Dies ist aber nicht immer so gewünscht, da der Text viel besser lesbar ist, wenn sich zwischen den einzelnen Spalten ein gewisser Abstand befindet. Um diesen Abstand festzulegen, kann man die CSS3 Eigenschaft -moz-column-gap verwenden.

Dieser Text wird in zwei Spalten angezeigt,  wobei zwischen den einzelnen Spalten immer ein Abstand von mindestens 50 Pixeln angezeigt wird. Dieser Text wird in zwei Spalten angezeigt, wobei zwischen den einzelnen Spalten immer ein Abstand von mindestens 40 Pixeln angezeigt wird.

Das Ergebnis sollte dann wie erwartet so aussehen:

Dieser Text wird in zwei Spalten angezeigt, wobei zwischen den einzelnen Spalten immer ein Abstand von mindestens 40 Pixeln angezeigt wird. Dieser Text wird in zwei Spalten angezeigt, wobei zwischen den einzelnen Spalten immer ein Abstand von mindestens 50 Pixeln angezeigt wird.

[funktioniert vorerst nur im Mozilla Firefox 1.5]

Wie zu sehen ist, lassen sich diese neuen CSS3 Eigenschaften sehr gut für das Layout von übersichtlichen Webseiten einsetzen. Es ist abzuwarten, wann dies auch von anderen Browsern außer dem Firefox 1.5 übernommen wird. Ich bin überzeugt, dass wir in der nächsten Zeit mehr Seiten sehen werden, die sich diese Features zu Nutzen machen werden.

FireBug ermöglicht es, Breakpoints im JavaScript Code zu setzen, Schritt für Schritt durch die Codezeilen zu springen und lokale Variablen sowie den Stack zu betrachten.

Stack Traces bei JavaScript Fehlern

Jeder JavaScript Fehler wird mit einem Stack Trace angezeigt. So kann man genau sehen, an welcher Stelle im Code und durch welchen Aufruf ein Fehler genau aufgetreten ist.

JavaScript Fehler debuggen

Wenn ein Fehler auftritt, reicht es meistens nicht, nur den Stack Trace zu sehen. Meistens möchte man auch sehen, welche Werte bestimmte Variablen gerade hatten, als der Fehler auftrat. Mit FireBug kann man durch die Einstellung "Break On Error" den Debugger automatisch anhalten lassen, wenn ein Fehler auftritt. Man wird dann sofort zur richtigen Stelle im Code gebracht.

Logging Funktionalitäten

Über das console Objekt kann man verschiedene Nachrichten auf der Konsole ausgeben lassen, während der JavaScript Code ausgeführt wird. Dabei kann man verschiedene Stufen wählen, wie z.B. console.debug(), console.info(), console.warn() oder console.error(). Diese Meldungen werden dann auch noch in unterschiedlicher Farbdarstellung in der Konsole kenntlich gemacht.

Außerdem besitzt FireBug noch viele weitere wichtige und nützliche Funktionen. So kann man sich detailiert den Request anschauen, der bei Ajax gesendet wird. FireBug liefert auch eine sinnvolle JavaScript command line, um schnell kleine JavaScript Schnipsel ausführen zu können. Und über die verschiedensten Inspektoren können alle möglichen Aspekte von HTML, DOM, CSS und JavaScript genau betrachtet werden.

Ich finde das FireBug ein "Must Have" Tool für Webentwickler ist. Es läßt sich leicht als Erweiterung in den aktuellen Firefox 1.5 Browser integrieren.

Doch inzwischen sind einige Winter durchs Land gezogen und ich habe mich gefragt, ob es nicht doch eine andere, leichtere Möglichkeit geben könnte. Und siehe da, eine kurze Suche im Netz brachte mich auf den richtigen Weg!

CSS3 ist die Antwort!

In CSS3 sind einige Erweiterungen zum aktuellen Standard CSS2 vorgesehen, unter anderm auch die Möglichkeit runde Ecken darstellen zu können. Das CSS3 Modul: Border existiert momentan jedoch nur als Arbeitspapier (Working Draft) des W3C. Jedoch hat sich Mozilla einiger dieser Erweiterungen angenommen und schon als vorläufige Erweiterung (Proprietary Extensions) umgesetzt. Diese werden durch ein vorangestelltest -moz- gekennzeichnet. Bei einer dieser Erweiterungen handelt es sich um -moz-border-radius. Und eben diese benötigen für unsere runden Ecken!

-moz-border-radius - Mach mich rund

Fangen wir doch gleich an und bauen uns ein Beispiel zusammen. Zuerst die Style Definition:

.rundeEcken {
	text-align: center;
	border:2px solid #000000;
	-moz-border-radius: 15px;
}

Das Ganze weisen wir nun einer Tabelle zu:

  ...

Und als Ergebnis erhalten wir folgende Tabelle:

Allerdings nur mit Mozilla/NS6. In allen anderen Browsern erscheint die Tabelle ganz normal mit Ecken.

Ein paar Schritte weiter...

-moz-border-radius ist eine Abkürzung um jede der vier Ecken zu kontrollieren. Dazu kann man -moz-border-radius vier Werte übergeben die den Radius jeder einzelnen Ecke einstellen und zwar in folgender Reihenfolge: oben-links [top-left], oben-rechts [top-right], unten-rechts [bottom-right], unten-links [bottom-left].

.rundeEcken {
	text-align: center;
	border:2px solid #000000;
	-moz-border-radius: 5px 10px 15px 20px;
}

Wodurch sich ein interessanter Effekt erzielen läßt. Genauso gut ist es aber auch möglich nur zwei Werte zu übergeben, wodurch jeweils die linke obere und die rechte untere bzw. die rechte obere und die linke untere Ecke kontrolliert werden können. Das sieht dann folgendermaßen aus

.rundeEcken {
	text-align: center;
	border:2px solid #000000;
	-moz-border-radius: 30px 5px;
}

Jede Ecke einzeln

Möchte man jede Ecke einzeln kontrollieren kann man sich auch folgender Erweiterungen bedienen:

.rundeEcken {
	text-align: center;
	border:2px solid #000000;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 5px;
}

Als Wert kann man jeweils eine Bereich zwischen 0-30px, bzw. Prozentangaben verwenden.

Ein paar abschließende Worte

Jeder der sich nun begeistert daranmachen will und dies in sein nächstes HTML Design übernimmt, sollte jedoch immer im Hinterkopf behalten, das dies kein Standard ist (zumindest solange nicht, bis CSS3 zum Standard geworden ist) und somit auch nicht in allen Browsern zu sehen ist.

Auch sind diese runden Ecken nicht mit allen Mozilla Versionen zu sehen. Erst ab Version Mozilla 0.92 dürften sie funktionieren. Und es ist auch nicht ausgeschlossen, das sie in späteren Versionen irgendwann nicht mehr funktionieren.

Also viel Spaß beim Ausprobieren und Experimentieren.