Fusionality

Die Fusionality Website wurde heute erfolgreich auf HTML5 umgestellt. An sich kein Hexenwerk, denn im Prinzip ist jedes valide HTML 4.01 oder XHTML 1.0 Dokument auch valides HTML5. Es gab allerdings zwei Überraschungen.

Die erste Überraschung war leider negativ, denn in HTML5 gibt es kein profile-Attribut im head-Element. Dadurch lassen sich microformats wie die hCard derzeit nicht sinnvoll nutzen. Für die Nutzung von semantischen Erweiterungen empfehle ich sonst das profile-Attribut http://purl.org/uF/2008/03/ , da dieses Profil sowohl die microformats als auch die XHMTL Friend Network Attribute unterstützt.

Die positive Überraschung war, dass der W3C Validator bei der Verwendung von WAI-ARIA Landmark Roles nicht mehr meckert.

Nach dem also das bisherige XHTML 1.0 Dokument erfolgreich mit neuem Doctype validiert wurde, begann ich einige DIVs durch neue HTML5 Elemente auszutauschen. Das Logo und die Navigation befinden sich nun in einem header-Element, die Navigations-DIV wurde durch ein nav-Element ersetzt. Der Inhalt wurde in ein section-Element gepackt und dort weiter unterteilt. Der Hauptinhalt befindet sich in einem article-Element, die Bilder in einem aside-Element und der Footer ist nun auch wirklich ein footer-Element.

Zum Abschluss wurden noch entsprechende WAI-ARIA Rollen vergeben.

Mal sehen was 2010 auf uns Webworker zukommen wird. In diesem Sinne wünsche ich allen Lesern ein erfolgreiches neues Jahr!

Auf der Website Font Squirrel finden sich hunderte freier Fonts (auch für kommerzielle Projekte) zur Einbindung in Websites. Das besondere daran sind die @font-face Kits. Diese Pakete enthalten die jeweilige Schriftart als OpenType oder TrueType, eine SVG Version, eine spezielle EOT Version für den Internet Explorer und ein WOFF genanntes Format das laut Beschreibung im kommenden Firefox 3.6 zum Einsatz kommen soll.

Heute wäre mir fast (aber eben nur fast) das sprichwörtliche Latein ausgegangen.

Die Aufgabe:
Eine Liste mit Teasertext und einem "mehr…"-Link am Ende. Die gesamte Liste soll bei Mouseover gehighlited werden, allerdings soll nur der "mehr…"-Button aktiv sein. So soll es dann aussehen:

Kinderspiel, dachte ich. Ich muss ja, laut Auftraggeber, keine Rücksicht auf den IE 6 nehmen. Also kann ich ja gemütlich mit li:hover arbeiten, das kann der IE ja seit Version 7. Hier also das XHTML dazu:

<ul>
<li>Lorem ipsum dolor<a href="#">» mehr...</a></li>
<li>Lorem ipsum dolor<a href="#">» mehr...</a></li>
<li>Lorem ipsum dolor<a href="#">» mehr...</a></li>
<li>Lorem ipsum dolor<a href="#">» mehr...</a></li>
</ul>

Dazu passend das CSS:

#content ul{
list-style-image:url(Bilder/list-point.jpg);
margin-left:16px;
}

#content li{
margin-bottom:15px;
margin-top:15px;
line-height:20px;
padding:0 5px;
height:20px;
}

#content li:hover{
background:#eb7305;
color:#fff;
}

#content li a{
float:right;
text-decoration:none;
color:#fff;
}

Und jetzt wird es komplizierter:
Im Firefox 3.5 und IE 8 wird es, wie auf dem Screenshot, korrekt dargestellt. Der Firefox 3.0 hingegen packt das "mehr…" in eine neue Zeile, unterhalb des Listeneintrages. Der IE 7 verhält sich, ausnahmsweise, wie der Firefox 3.0.

Also dem IE 7 folgendes "untergejubelt":

* + html #content li a{
margin-top:-20px;
}

Aber was mache ich jetzt mit dem Firefox 3.0? Google kennt zwar einen CSS Hack für den Firefox 3.0, aber der ist a) kein valides CSS und b) betrifft auch den Firefox 3.5. Ich möchte ihn aber trotzdem erwähnen:

html>/**/body #content li a, x:-moz-any-link, x:default {
float:right;
text-decoration:none;
color:#fff;
margin-top:-20px;
}

Es muss aber auch mit validem CSS gehen. Die Lösung brachte der CSS Selector Test auf CSS3 Info:

#content li a{
float:right;
text-decoration:none;
color:#fff;
margin-top:-20px;
}

#content li a:only-of-type {
margin-top:0px;
}

Also den margin-top "normal" zugewiesen und über :only-of-type wieder zurück deklariert.Den CSS3 Pseudoselektor :only-of-type versteht der Firefox 3.0 nämlich nicht, der 3.5er schon. Doch die Freude war von kurzer Dauer, denn der IE 8 kennt den auch nicht.

Zurück zu CSS3 Info und checken, was der IE8 nicht kann, der Firefox 3.0 aber und hier greifen könnte. :only-child klingt doch gut. Alles zusammen gestückelt mit Kommentaren:

#content ul{
list-style-image:url(Bilder/list-point.jpg);
margin-left:16px;
}

#content li{
margin-bottom:15px;
margin-top:15px;
line-height:20px;
padding:0 5px;
height:20px;
}

#content li:hover{
background:#eb7305;
color:#fff;
}

#content li a{
float:right;
text-decoration:none;
color:#fff; //Hier können wir den margin nicht deklarieren, da sonst auch der IE8 davon betroffen wäre
}

#content li a:only-child{
margin-top:-20px; // Den Selektor kennt der IE 8 nicht, der FF 3.0 schon
}
#content li a:only-of-type {
margin-top:0px; //Und wieder zurück. Diesen kennt der FF 3.5, der IE kennt ihn weder in Version 7 noch 8
}

* + html #content li a
margin-top:-20px; // Der gute alte StarHack für IE7
}

Und genau sowas macht den Unterschied zu den ganzen "Ich-klick-mir-eine-Homepage-zusammen"-Tools vom Nachbarsjunge ;)

Jeder Webdesigner/Webentwickler kennt die Tücken und Macken des Internet Explorers, speziell der Version 6. Das CSS muss also entsprechend angepasst werden. Hierfür werden leider oft obskure CSS Anweisungen verwendet:

Der Internet Explorer führt diese Anweisung aus und setzt die Breite auf 150px, allerdings sind solche Konstrukte natürlich alles andere als valides CSS.
Doch es geht auch valide:

Viele Webentwickler erstellen Websites mittlerweile in XHTML und das ist auch gut so. Allerdings gibt es hier eine fiese Falle!

Der XML Prolog:

Dieser steht vor dem eigentlichen DOCTYPE und definiert die XML Version, sowie die Zeichensatzkodierung. Allerdings versetzt dieser Prolog den Internet Explorer 6 in den "Quirks Mode" und den Internet Explorer 7 in den "Almost Standard" Modus! Und was das heißt weiß wohl jeder Webentwickler…

Da der XML Prolog nicht zwingend vorgeschrieben ist, empfiehlt es sich ihn weg zu lassen.

Eine Übersicht aller DOCTYPE / Modus Kombinationen gibt es hier.