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.

Leider führte dies auch dazu, dass das alte Tooltip Script nun leider nicht mehr in allen wichtigen Browsern funktioniert. Aber auch in den Browsern, wo es funktionierte, ist es unter Umständen zu Fehlern gekommen.

Dies will ich nun zum Anlass nehmen und euch ein komplett neues Tooltip Script zur Verfügung stellen.

XBT - Der Cross-Browser Tooltip

Okay, über Namen lässt sich bestimmt streiten, aber irgendwie muss das Kind ja heißen. Das neue Script basiert auf ein paar Zeilen JavaScript und ist nur geringfügig größer als das alte Script. Dafür ist es jedoch viel flexibler zu konfigurieren, kollidiert nicht mit anderen Scripten und lässt sich leicht über CSS beliebig anpassen. Und wer möchte, kann das Script auch ohne Probleme um neue Funktionen erweitern.

Hier könnt ihr den Code sehen:

(function (window, document, undefined) {
    var XBTooltip = function (element, userConf, tooltip) {
        var config = {
            id: userConf.id || undefined,
            className: userConf.className || undefined,
            x: userConf.x || 20,
            y: userConf.y || 20,
            text: userConf.text || undefined
        };

        var over = function (event) {
                tooltip.style.display = "block";
            },
            out = function (event) {
                tooltip.style.display = "none";
            },
            move = function (event) {
                event = event ? event : window.event;
                if (event.pageX == null && event.clientX != null) {
                    var doc = document.documentElement, body = document.body;
                    event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
                    event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
                }
                tooltip.style.top = (event.pageY + config.y) + "px";
                tooltip.style.left = (event.pageX + config.x) + "px";
            }
        if (tooltip === undefined && config.id) {
            tooltip = document.getElementById(config.id);
            if (tooltip) tooltip = tooltip.parentNode.removeChild(tooltip)
        }
        if (tooltip === undefined && config.text) {
            tooltip = document.createElement("div");
            if (config.id) tooltip.id = config.id;
            tooltip.innerHTML = config.text;
        }
        if (config.className) tooltip.className = config.className;
        tooltip = document.body.appendChild(tooltip);
        tooltip.style.position = "absolute";
        element.onmouseover = over;
        element.onmouseout = out;
        element.onmousemove = move;
        over();
    };
    window.XBTooltip = window.XBT = XBTooltip;
})(this, this.document);

Das einzig wirklich benötigte CSS für den Tooltip sieht so aus:

.xbtooltip {
  display: none;
  position: absolute;
  background-color: #fff;
}

Dieser kann aber für jeden einzelnen Tooltip noch einmal separat überschrieben werden. Doch dazu später mehr.

Tooltip Beispiele

Kommen wir also zu ein paar einfachen Beispielen, wie man das XBT Tooltip Script einsetzen kann.

Einfacher Tooltip

Der einfachste mögliche Tooltip benötigt einen Link und ein DIV Element mit dem anzuzeigenden Inhalt für den Tooltip.

<a href="http://webmatze.de" onMouseOver="XBT(this, {id:'tt1'})">Ein normaler Tooltip...</a>
<div id="tt1" className="xbtooltip">...mit bereits vorhandenem Inhalt.</div>

Dem Tooltip Script wird also über eine Konfiguration welche in geschweiften Klammern steht, die id des Elementes übergeben, welches den Inhalt für den Tooltip enthält. Mehr ist hier nicht notwendig.

Das entsprechende CSS dazu kann z.B. so aussehen:

#tt1 {
      background-color: #00FFFF;
      color: green;
      padding: 3px;
      width: 120px;
    }

Und so sieht dann der Link mit dem Tooltip aus:

Ein normaler Tooltip...

Inhalt als Konfiguration übergeben

Wer nicht extra für jeden Tooltip ein extra DIV Element erstellen möchte, kann den gewünschten Inhalt für den Tooltip auch gleich als text übergeben. Das kann dann z.B. so aussehen:

<a href="http://webmatze.de"
   onMouseOver="XBT(this, {text: '...indem man ihn &lt;strong&gt;als Text&lt;/strong&gt; übergibt', className: 'xbtooltip'})">
Man kann den Inhalt des Tooltips auch dynamisch erstellen lassen...
</a>

Als Konfiguration wird also nicht mehr eine id übergeben, sondern ein beliebiger Text, der auch HTML Elemente enthalten kann. Über den Parameter className kann man dem Tooltip dann einen beliebigen Style zuordnen.

Und so sieht das Ganze dann aus:

Man kann den Inhalt des Tooltips auch dynamisch erstellen lassen...

Den Abstand des Tooltips anpassen

Wenn man möchte, dass der Tooltip nicht direkt neben dem Mauszeiger, sondern weiter entfernt angezeigt wird, kann man dies über die Konfiguration anpassen. Dazu gibt es die beiden Parameter x und y.

<a href="http://webmatze.de" onmouseover="XBT(this, {id: 'tt4', x: 50, y: 50})">Man kann den Abstand des Tooltips anpassen...</a>
<div id="tt4" class="xbtooltip">
...indem man eine Konfiguration übergibt
</div>

Somit wird der Tooltip nun jeweils 50 Pixel nach rechts und unten verschoben angezeigt.

Man kann den Abstand des Tooltips anpassen...

Funktioniert nicht nur bei Links

Natürlich kann man den Tooltip auch an andere HTML Elemente hängen. Es muss nicht immer ein Link sein.

<div style="position: relative; top: 0px; left: 150px; width: 200px; height: 100px; background-color: #e4e4e4;" 
  onmouseover="XBT(this, {id:'tt2'})">Das
    funktioniert auch mit DIVs statt mit Links...
    <div id="tt2" className="xbtooltip">...soweit der Browser onmouseover auf DIV Elementen unterstützt!</div>
</div>

Dies würde dann so aussehen:

In absolut positionierten Elementen funktioniert es auch

Mit dem alten Tooltip Script gab es immer Probleme mit Tooltips, die sich in anderen absolut prositionierten Elementen befanden. Hier wurden die Tooltips immer an einer falschen Position angezeigt.

Mit dem neuen Script ist dies nun auch kein Problem mehr:

<div style="position: absolute; top: 0px; left: 300px; width: 200px; height: 100px; background-color: #e4e4e4;">
    <a href="http://eventicus.de" onmouseover="XBT(this, {id:'tt3'})">Genauso auch mit Tooltips...</a>
    <div id="tt3" class="xbtooltip">...die sich in absolut positionierten Elementen befinden.</div>
</div>

Und so sieht's dann aus:

Fazit

Ich hoffe ihr könnt mit diesem neuen Script etwas anfangen und wünsche euch viel Spaß damit. Sollten euch doch noch Probleme auffallen, oder sollte es in einem Browser nicht richtig funktionieren, so könnt ihr mir dies wie immer in den Kommentaren mitteilen.

Ich denke auch das neue Script ist immer noch sehr kompakt und einfach zu verwenden. Vielleicht werde ich in Zukunft noch ein paar Funktionen nachrüsten, sofern ihr noch Wünsche habt, die unbedingt enthalten sein sollten.

Fall eines Browsers

Noch vor wenigen Jahren galt der Internet Explorer als einer der fortschrittlichsten und besten Browser auf diesem Planeten. Damals schimpften alle noch auf den Netscape Navigator und dessen Unfähigkeit, die Webseiten so darzustellen, wie es der Internet Explorer auf unnachahmliche Weise schaffte. Doch diese Stellung in den Köpfen der Menschen hat er sehr schnell verspielt und in das komplette Gegenteil gekehrt.

Der Internet Explorer hat die Zeichen der Zeit nicht erkannt und es verschlafen, die wichtigsten aktuellen Web-Standards umzusetzen. Heute kämpfen Browser wie Firefox, Safari oder Google Chrome um die Krone am Browserhimmel und der Internet Explorer kämpft immer noch damit, die Standards von Vorgestern richtig umzusetzen. Er hinkt nicht nur einen Schritt hinterher, sondern Kilometer!

Leider wird der Internet Explorer durch die geballte Marktmacht von Microsoft und deren Betriebssystem Windows immer noch von sehr vielen Nutzern verwendet, auch wenn hier die anderen Browser schon sehr stark aufholen konnten.

Aber sehen wir der Realität ins Auge, wir - die Web-Entwickler - werden auch in Zukunft nicht um den Internet Explorer herumkommen.

Der Knackpunkt

Mit dieser unumstößlichen Wahrheit sahen sich auch die Entwickler von Google's neustem Projekt Google Wave konfrontiert. Google Wave befindet sich momentan noch in der Entwicklungsphase und wird in den nächsten Wochen der breiten Öffentlichkeit vorgestellt werden. Wie die Google Wave Hompage verrät, soll es sich dabei um eine Plattform zur Kommunikation und Zusammenarbeit im Web handeln. Echtzeit (Real-time) ist hier das vorherrschende Thema und um diese zu erreichen, setzt Google bei der Entwicklung auch auf die neusten Web-Technologien und -Standards. Und gerade hier befindet sich der Knackpunkt.

Wenn Google mit Google Wave erfolgreich werden möchte, dann muss Google Wave auch im Internet Explorer richtig funktionieren. Nachdem die Entwickler sich aber vergebens daran versucht haben, die gewünschten Funktionen im Internet Explorer zum Laufen zu bekommen, haben sie nun einen komplett neuen Weg eingeschlagen. Und hier wird es jetzt richtig spannend!

Sie haben sich einfach folgende Frage gestellt: "Wenn der Internet Explorer uns nicht die Möglichkeiten bietet, um unsere Vorstellungen umzusetzen, was können wir dann statt dessen tun?"

Und die Antwort darauf ist so einfach wie genial ausgefallen: "Wir bringen dem Internet Explorer einfach die Web-Standards selber bei!" Dabei herausgekommen ist ein neues Projekt: Google Chrome Frame.

Was ist Google Chrome Frame?

Bei Google Chrome Frame handelt es sich um ein Open Source Browser Plugin für den Internet Explorer in den Versionen 6, 7 und 8. Einmal im Internet Explorer installiert, bringt das Google Chrome Frame Plugin dem hinkenden Browser die neusten Web-Technologien bei, inklusive der schnellen Google Chrome JavaScript Engine. Um es kurz zu sagen - aus dem Internet Explorer wird so auf einfache Weise ein vollwertiger Browser.

Doch damit der so gepimpte Internet Explorer die aufgerufenen Webseiten auch über das neue Plugin darstellen kann, müssen diese ein neues Meta Tag einbinden. Mit folgender Zeile ist dies jedoch schnell erledigt:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Fehlt dieses Tag, wird die Seite weiterhin auf die gute alte Art und Weise vom Internet Explorer zerhackt und durcheinander gewürfelt werden. ;o)

Wenn man nun als Web-Entwickler eine neue Seite erstellt und sicher ist, dass diese im Google Chrome Browser richtig angezeigt wird, dann kann man den Internet Explorer nun auch dazu bringen, die Seite exakt genauso darzustellen. Allerdings ist man dabei darauf angewiesen, dass der Nutzer schon das Google Chrome Frame Plugin installiert hat. Doch auch hierzu haben sich die Entwickler bei Google Gedanken gemacht. Mit einem kleinen Script kann man den Nutzer beim Aufruf der Seite dazu bringen, das neue Plugin zu installieren.

Eine schöne neue Welt?

Jetzt wäre eigentlich der Punkt gekommen, wo wir alle aufspringen müssten um zu jubeln. Endlich stellt der Internet Explorer unsere Seiten so dar wie wir es wollen. Vergangen sind die Zeiten, wo wir unsere Vorstellungen mühsam auch auf diesem Browser zum Leben erwecken mussten. Aber wird es wirklich so kommen? Gehören diese ganzen Probleme nun wirklich der Vergangenheit an?

Dazu gibt es noch einige Hürden zu nehmen. Als erstes müssen wir natürlich in alle unsere Seiten das oben beschriebene Tag einbinden. Und um die Internet Explorer Nutzer dazu zu bringen, dass Plugin zu installieren, zusätzlich auch noch ein Script. Das bedeutet natürlich mehr HTML Code auf unseren Seiten. Code, der eigentlich nicht notwendig wäre.

Dann steht da noch die Frage, ob Microsoft es sich gefallen lassen wird, wenn Google so den Internet Explorer kanibalisiert. Das wäre ja gerade so, als wenn Apple ein Mac OS X Plugin für Windows anbieten würde. Microsoft hat auf jeden Fall die Möglichkeiten, um Google einen Strich durch die Rechnung zu machen, indem es das Google Chrome Frame Plugin einfach ausschließt.

Aber wie immer wird auch in diesem Fall erst die Zukunft zeigen, ob wirklich eine neue Zeitrechnung für uns als Web-Entwickler angebrochen ist.

Was haltet Ihr von Google's neustem Coup? Werdet Ihr das neue Meta Tag in eure eigenen Seiten einbinden? Ich freue mich auf eure Kommentare.

Wer kann sich denn heute noch ein Internet vorstellen, wo es nicht möglich war die Musik der Lieblingsband direkt auf deren Homepage hören zu können? Viele Bands stellen für ihre neuen Alben Ausschnitte aus den einzelnen Songs über einen MP3 Player online. Die dafür verwendete Technik basiert meistens auf dem Adobe Flash Player (ehemals Macromedia) und passende Flash MP3 Player kann man sich zumeist kostenlos herunterladen und auf der eigenen Webseite installieren.

Heute möchte ich euch eine kleine Auswahl der besten Flash MP3 Player für den freien Gebrauch vorstellen.

MP3 Player

Dieser 'namenlose' OpenSource Player wird in fünf verschiedenen Versionen angeboten. Die Mini, Normal, Max, Multi und JS Versionen unterscheiden sich dabei in der Größe und Funktionalität. MP3 Dateien lassen sich direkt über den HTML Code an den Player übergeben. In der Multiversion wird zusätzlich eine Playlist angezeigt.

Download: MP3 Player

XSPF Web Music Player

Dieser Player ist sicherlich einer der bekanntesten und ältesten Flash MP3 Player. Leider scheint die Entwicklung eingestellt zu sein. Da der Player jedoch einen hohen Funktionsumfang hat, möchte ich ihn hier trotzdem vorstellen. Der XSPF Web Music Player verwendet das "XML Shareable Playlist Format" kurz auch XSPF genannt. Dieses auf XML basierende Format ist ein offener Standard, um Playlisten zu definieren und zu verteilen. Player, die dieses Format verstehen, können diese Playlisten ohne Anpassungen importieren und abspielen. Der XSPF Web Music Player besitzt eine kurze Dokumentation und wird auf etlichen Webseiten verwendet.

Download: XSPF Web Music Player

Flash MP3 Player für WordPress

Ebenfalls sehr interessant für WordPress Nutzer ist dieses Plugin. Einmal in WordPress installiert, lässt sich über eine einfach zu bedienende Oberfläche ein frei konfigurierbarer MP3 Player in das eigenen Blog integrieren. Über eine XML Konfiguration kann man den Player den eigenen Wünschen entsprechend designen. So kann man z.B. ein eigenes Hintergrundbild auswählen und zwischen verschiedenen Farbschemata wählen. Während der Player einen Song abspielt, wird das aktuelle Albumcover angezeigt.

Download: Flash MP3 Player für WordPress

Zanmantou

Wer schon länger auf webmatze.de vorbeigeschaut hat, wird diesen sehr flexibel konfigurierbaren Flash MP3 Player schon kennengelernt haben. Gestartet als kleines Projekt, um die Fähigkeiten von Flash auszutesten, ist der Player zu einem wirklich konkurrenzfähigen Tool herangewachsen. Das Benutzerinterface des Players lässt sich über eine XML Datei beliebig anpassen und mit eigenen Grafiken schmücken. Der Player kann sich somit nahtlos in das Design jeder Webseite einpassen. Über eine JavaScript Schnittstelle kann der Player sogar unsichtbar integriert und z.B. über ganz normale Links gesteuert werden. Das Projekt wird derzeit von Andi Dittrich weiterentwickelt und kann mittlerweile auch Videos abspielen. Für mich immer noch einer der einfachsten und trotzdem flexibelsten Flash MP3 Player.

Download: Zanmantou

Dies ist sicherlich nur eine kleine Auswahl an kostenlosen Flash MP3 Playern zur Integration in die eigenen Webseiten, aber mit den hier vorgestellten Programmen besitzt man bereits ein hohes Maß an Flexibilität. Jeder dieser Player lässt sich den eigenen Wünschen entsprechend anpassen und fügt sich somit perfekt in jedes Design ein.

Kennt Ihr vielleicht noch weitere Flash MP3 Player? Dann stellt mir diese doch einfach in den Kommentaren vor.

Leider hat sich Microsoft nicht dazu hinreißen lassen, seine neusten Browser auch für Mac OS X zu veröffentlichen, so dass man auf andere Wege und Mittel zurückgreifen muss.

Dual Boot mit BootCamp oder Virtual Machine?

Sicher, Apple bietet uns über BootCamp an, ein anderes Betriebsystem wie Windows XP auf einer zweiten Partition zu installieren. Hat man dies getan, kann man natürlich auch den Internet Explorer unter Windows verwenden.

Allerdings haben wir dadurch auch einige Nachteile, die natürlich nicht verschwiegen werden können. Zum einen müssen wir extra Festplattenplatz für die zweite Partition bereitstellen - Windows ist hier natürlich nicht besonders sparsam -, zum anderen können wir so immer nur ein Betriebssystem gleichzeitig laufen lassen. Was natürlich unpraktisch ist, wenn unsere Entwicklungsumgebung auf Mac OS X läuft.

Bleibt als weitere Möglichkeit noch, Windows in einer virtuellen Maschine zu installieren. Mit Parallels oder VMWare Fusion gibt es hier sehr gute Programme, die es uns sehr leicht machen, ein oder mehrere Betriebssysteme zu installieren und gleichzeitig mit Mac OS X laufen zu lassen.

Doch auch diese Möglichkeit fällt ins Wasser, wenn wir gar keine eigene (offizielle) Installations CD von Windows besitzen und uns auch nicht extra eine zulegen wollen, nur um etwas im Internet Explorer zu testen. Doch was bleibt uns nun noch übrig?

ies4osx - Der Internet Explorer für OS X

Ich weiß, ich weiß. Warum bin habe ich nicht gleich am Anfang erwähnt, das es doch einen Internet Explorer für Mac OS X gibt? Aber ich liebe es, ein wenig Spannung aufzubauen - und seien wir doch mal ehrlich, die Ungeduldigen unter euch haben die vorhergehenden Abschnitte sowieso übersprungen. (Was? Das stimmt wirklich? Dann schnell zurück und noch einmal von vorne lesen!)

Mike Kronenberg schien sich mal die gleichen Fragen gestellt zu haben. Warum kann ich keine Windows Anwendungen unter OS X laufen lassen? Also hat er sich hingesetzt und das Linux Wine Projekt - mit dem viele Windows Anwendungen unter Linux laufen können - auf Mac OS X portiert und als Darwine zur Verfügung gestellt. Dann ist er anscheinend auf das ies4linux Projekt gestoßen, mit dem es möglich war den Internet Explorer 6 mit Hilfe von Wine auf Linux zum Laufen zu bekommen. Dies hat er ebenfalls portiert und herausgekommen ist ies4osx! <tröte>TATAAA!</tröte>

Die Installation von ies4osx ist wirklich sehr einfach. Zuerst die aktuellen Versionen von Darwine und ies4osx herunterladen, Darwine in den Applications Ordner von OS X verschieben, den Installer von ies4osx ausführen und fertig. Der Installer lädt sich die benötigten Dateien herunter und legt eine lauffähige Version vom "Internet Explorer 6" auf dem Desktop ab.

Es ist sogar möglich, Flash, Java und den Mediaplayer 6.4 von Microsoft auf diesem IE 6 zu installieren.

Mein Fazit

Seit ich vom ies4osx Projekt erfahren habe, habe ich immer einen Internet Explorer bei mir auf meinem MacBook laufen und kann so jederzeit meine Seiten auch dort überprüfen. Sicherlich, der Internet Explorer für Mac OS X reagiert oft etwas träge und vor allem wenn Flash im Spiel ist, wird es richtig langsam, aber für den Zweck, meine Seiten im IE 6 zu testen, ist dies vollkommen ausreichend.

Leider gibt es momentan noch keine Version vom IE 7 oder IE 8 für Mac OS X, aber schauen wir mal, was die Zukunft so bringt.

Wie läuft es bei euch? Entwickelt ihr auch unter Mac OS X? Wenn ja, welche Lösungen habt ihr gefunden, um eure Seiten auch auf dem Internet Explorer zu testen?

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.

Der Browser wurde von Grund auf neu konzipiert und mit Blick auf Schnelligkeit und Sicherheit hin entwickelt. Der Code des Browsers beruht zum Teil auf Mozilla Firefox und WebKit, der Open Source Browser Engine, auf der auch der Safari Browser aufbaut. Dadurch soll eine Standard konforme Darstellung aller Webseiten sichergestellt werden.

Allerdings verfolgt Google mit seinem Browser hohe Ziele, denn man will nicht nur einen weiteren Browser anbieten, sondern einen Browser der auf komplett neuen Prinzipien und Technologien beruht:

"Es ist uns gelungen, die Grundlage für einen Browser zu schaffen, der die heutigen komplexen Webanwendungen viel besser ausführen kann. Indem jeder Tab isoliert arbeitet, greift der Ausfall eines Tabs nicht auf andere über. Zudem bietet Google Chrome durch die jeweilig isolierten Tabs einen verbesserten Schutz vor bösartigen Webseiten. Neben der Schnelligkeit und Reaktionsfähigkeit des Browsers, haben wir zudem eine neue leistungsfähigere JavaScript-Engine namens V8 gebaut, die die nächste Generation von Webanwendungen antreiben wird, die von heutigen Browsern gar nicht ausgeführt werden können."
http://www.google.com/chrome/intl/de/why.html?hl=de

In einem interessanten Comic, welcher von Google veröffentlicht wurde, werden von den Google Mitarbeitern die einzelnen Funktionen vorgestellt.

Google Chrome befindet sich momentan noch in einer Beta Phase und es ist bestimmt noch mit einigen Fehlern und Unstimmigkeiten zu rechnen. Aber durch die geballte Marktmacht von Google, wird sich der neue Browser sicherlich schnell verbreiten, wodurch solche Fehler schnell gefunden und behoben werden können.

Da der Browser Open Source ist, können seine Bestandteile auch in anderen Projekten verwendet und von externen Programmierern erweitert oder fehlerbereinigt werden.

Ich bin gespannt, wie schnell sich dieser neue Browser durchsetzen wird und wie schnell er Marktanteile anderer Browser übernehmen kann.

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.

Warum ich solch eine Schwachsinn schreibe? Okay, bevor mir jemand die Tastatur aus der Hand reißt... Was ich mit der Überschrift eigentlich sagen wollte: Firefox unterstützt in der Version 3 nun endlich auch Sollumbrüche in Wörtern. Und zwar solche, bei denen der Trennstrich nur dann angezeigt wird, wenn der Umbruch wirklich benötigt wird. Diese "bedingten Trennstriche", oder im Englischen auch "soft hyphen" genannt, werden durch das Zeilenumbruch-Entity &shy; im HTML Text definiert.

Im folgenden Beispiel wird das vielleicht deutlich:

Soll­um­brü­che können in Wörtern eingefügt
 werden, welche ohne bedingte
 Zei­len­um­brü­che nicht richtig umbrechen

Soft Hyphen = &shy; = schüchtern

Gut, damit hätten wir das Rätsel auch geklärt. Aber "schüchtern" finde ich in diesem Zusammenhang gar nicht mal so unangebracht. Denn was auf dem ersten Blick vielleicht verlockend erscheint, nämlich den bedingten Trennstrich in jedem Wort eines Textes unterzubringen, ist natürlich auf dem zweiten Blick mehr als bedenklich.

Damit würde man den HTML Code erheblich aufblähen und die Leserlichkeit von Text im HTML deutlich erschweren. Wer solch einen Text später nach bearbeiten muss, wird sicherlich nicht viel Freude an dieser Arbeit haben.

Darum sollte man den bedingten Trennstrich nur "sehr schüchtern" anwenden, also nur an Stellen, bei denen es sonst zu Problemen in der Darstellung kommen könnte. Ich könnte mir z.B. Label Elemente in einem Formular vorstellen, welche nur eine bestimmte Breite haben sollen und wo man damit zu lange Wörter zum Umbruch zwingen kann, ohne dass das Layout des Formulars zerschossen wird. Hier findet Ihr ein Beispiel dafür, wie man ansprechende Formulare erstellt. Das Gleiche könnte auch auf Spaltenüberschriften einer Tabelle zutreffen, welche nur eine bestimmte Breite haben sollen.

Fazit

Ich finde es gut, dass Firefox 3 nun auch bedingte Trennstriche unterstützt, zumal der IE dies schon seit einigen Jahren kann. Weise und sparsam angewendet, können sie sicherlich sehr hilfreich sein. Doch im Netzt gibt es auch Bedenken darüber, was die Verwendung von bedingten Trennstrichen angeht. Was haltet Ihr davon?