alps hypertexte

HTML5-Vorlage

Zu den leeren Vorlagen in HTML4, XHTML 1.0 transitional, XHTML 1.0 strict und XHTML 1.1 strict ist jetzt noch eine HTML5-Vorlage dazugekommen. Diese HTML5-Vorlage besteht aus

• der HTML5-DTD
• verkürztem Zeichnsatz-Meta-Tag
• neue Syntax bei <script> und <style>
• eingebundenes html5shiv-Skript.

Dazu gehören auch

• Anpassung des reset-Stylesheets (angepasstes Reset von Eric Meyer und Richard Clark)
• Aufnahme einiger neuer Elemente in die typo.css

Fapulous-Site

Die fapulous-Site läuft ab jetzt auch in HTML5. Zwar habe ich noch nicht jede Seite in <article> und <section> eingeteilt, aber eine grobe Aufteilung in <header>, <nav> und <footer> ist schon mal auf jeder Seite vorhanden.

Neue CSS3-Konstrukte

Buttons

Zu den old school-Buttons mit 2 Grafiken ist jetzt eine in reinem CSS3 realisierte Variante hinzugekommen. Den Button gibt es in 3 Varianten:

1. Aus CSS3 und proprietären -moz- und -webkit-Anweisungen,
2. mit 2 Grafiken, mit dem Text wachsend, ohne floats,
3. eine Kombination aus beiden: CSS3-fähige Browser erhalten die CSS3-Variante, IE6-8 die old school-Variante.

Diese Aufteilung begründet sich aus möglichen Wünschen und Präferenzen des Auftraggebers. Ich schrieb bereits, dass das fapulous Framework eine starke Ausrichtung nach aktuellen Industrie-Anforderungen hat. Für jede der 3 Varianten gibt es einen "Auftraggeber-Typ".

Variante 1.) ist was für den technik-affinen Auftraggeber. Meist ein Programmierer oder der CTO eines Start-Ups. Die lassen sich von den Vorteilen des reinen CSS3-Buttons überzeugen und nehmen dafür gerne in Kauf, dass IE<9-User nur öde eckige Kästen sehen.

Variante 2.) ist für den Pragmatiker. Der möchte überall gleiches Aussehen und nimmt dabei auch leicht höhere Kosten bei künftigen Änderungen in Kauf. Aber die teuerste Variante will er deswegen nicht finanzieren; also passt zu diesem Wunsch die zweite Variante.

Variante 3.) ist die teuerste, aber auch die flexibelste. Die modernen Browser bekommen CSS3, IE6-8 die Grafikversion bei gleichem Markup. Bei Änderungen muss man hierbei 2 Versionen pflegen, aber User moderner Browser kriegen hier die Performance-Vorteile der CSS3-Version ab, ohne dass man IE-Usern einen häßlichen Button präsentieren muss.

Boxen

Als Beispiel-Box lag eine grafische .fapulousBox im Framework bei. Zu dieser Box, die ebenfalls per Grafiken, sliding doors und ohne floats realisiert wurde, ist eine CSS3-Variante hinzugekommen (.fapulousBoxM).

Weiteres

Die Organisation der CSS-Dateien hat sich etwas geändert. Die CSS-Anweisungen der Buttons und Boxen sind mitsamt der zugehörigen IE-Hacks in eigene CSS-Dateien ausgelagert worden, damit sie auch außerhalb des Frameworks verwendbar sind. Für ein paar Buttons und Boxen sollte man nicht gleich ein Framework bemühen müssen.

Klassen- oder ID-Namen haben sich nicht geändert, alte Konstrukte wurden nicht angerührt, das heisst, eine Aktualisierung der Kern-Dateien dürfte keine negativen Folgen haben, wenn die Kerndateien im eigenen Projekt nicht modifiziert und die site-eigenen Styles in andere CSS-Dateien ausgelagert worden sind. Diese Arbeitsweise ist empfohlen, damit man problemlos zukünftige Updates mitmachen kann. Ich achte bei Einführung neuer Konstrukte auf Abwärtskompatibilität und versuche das Framework modular zu halten.

In adaption 2010 sind diese HTML5-Erweiterungen noch nicht enthalten, das kommt zusammen mit einer HTML5-Version der adaption-Templates.

Die ganzen HTML5-Neuerungen sind als experimentell zu betrachten. Weder ist das letzter Wort zur Spezifikation gesagt, noch gibt es viele Erfahrungen mit den neuen Elementen und den ganzen Krücken drumherum (etwa für die IEs). Aber der erste Schritt ist schonmal getan. Wenn ihr Fehler findet/Verbesserungsvorschläge habt, nur her damit.