HTML5-Elemente auch im IE ohne JavaScript und trotzdem valide

20 12 2010

Ha, na sowas. Da kommt jemand mit einer relativ eleganten Möglichkeit um die Ecke, dem IE die neuen HTML5-Elemente auch ohne JavaScript bekannt zu machen. Er benutzt dafür einen XML-Namespace und benutzt dann so Sachen wie html5:section statt section. Das ist geradezu genial und funktioniert angeblich sogar zuverlässig, validiert aber in erster Linie nicht, wenn man sich nicht mit XHTML5 ganz anderen Ärger ins Haus holen will. Daneben ist es auch komisch, wenn der Autor so ein HTML schreiben muss, nur um auf den IE Rücksicht zu nehmen. Wie ließe sich das also noch verbessern?

Mir kam sofort die naheliegende Idee, das mit einem serverseitigen Ausgabefilter nur an die IEs auszuliefern. Die Voraussetzung wird nicht jedes CMS einfach so mitmachen, aber falls doch, ermöglicht einem das, die HTML5-Elemente jetzt zu benutzen. Wie genau soll das funktionieren? Wenn man einen serverseitigen DOM/HTML-Parser benutzt, ist es relativ leicht, aber das sollte in der CMS-Landschaft die große Ausnahme sein. Also braucht man ein paar simple RegExes:

  • <html muss im HTML-Output durch <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml" ersetzt werden. Wenn man gründlich arbeitet, prüft man vorher, ob das HTML-Element nicht schon die passenden Namespaces trägt.
  • <(/?)(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video) muss im HTML-Code durch <$1html5:$2 ersetzt werden, das sind die öffnenden und schließenden Tags.
  • (abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video) muss im CSS durch html5\:$1 ersetzt werden.

Das schöne an dieser Lösung ist, dass man Serverseitig recht einfach einen IE erkennen kann und ihm die gefilterten Quellen anbietet. Dass der Code für den IE nicht validiert, halte ich für verschmerzbar. Falls man versehentlich einen Browser erwischt, der sich nur als IE ausgibt, klappt zudem trotzdem alles. Und das wichtigste in meinen Augen ist, dass man die CSS Spezifität nicht verändert und sich auf diesem Weg keine Seiteneffekte ins Boot holt. Gut so.

Der einzige Nachteil, den ich momentan sehe, ist die Voraussetzung eines finalen Output-Filters. Viele CMSe buffern den HTML-Output sowieso und bieten einen Hook an, an den man sich einfach dranhängt, in dem Fall hat man natürlich leichtes Spiel. Etwas schwieriger ist das bei CMSen, die sowas nicht haben und vor allem bei statischen CSS-Dateien, in dem Fall muss man irgendwie einen Filter in den Workflow frickeln, was stark von der eingesetzen Serverumgebung abhängt und nicht einfach generalisiert lösbar sein wird. Wenn man aber sowieso schon ein CSS-Framework wie Turbine einsetzt, lässt sich das prima dort lösen, vielleicht gar mit einem HTML5-Enabler Plugin. Ansonsten wäre das mal ein guter Anlass, so ein Framework einzusetzen.

Damit löst man aber noch immer nicht das Cache-Problem: Man muss externe Proxy-Caches aushebeln und benötigt zudem plötzlich zwei lokale Caches, die von der Cache-Logik unterschieden werden müssen. Da wird es dann diffizil und man verzichtet vielleicht lieber auf eine Browser-Unterscheidung, macht den Output-Filter immer an und scheißt auf den Validator. Ist ja auch eine Lösung und man muss weiterhin nicht selbst mit den Namespaces hantieren.


Please put the C in CSS

24 09 2010

Fast immer, wenn ich an Websites arbeite, die andere (Agenturen) verbrochen haben, stolpere ich über mehr oder weniger lästige Eigenheiten der konkreten Implementierung. Dass man TYPO3 auf etliche verschiedene Weisen mit Templates füttern kann, ist ja normal, auch dass es Abweichungen in der Sorgfalt im Umgang mit HTML-Markup und CSS-Code gibt. Aber es gibt Abweichungen im Rahmen des Nachvollziehbaren und solche, die einfach dumm, lästig und ärgerlich sind.

Aktuelles Beispiel: Ich mache zur Zeit einige inhaltliche Änderungen an einer Website, deren CSS-Code sehr eigenartig ist. Die auffälligste Eigenart ist dabei wirklich spaßig: Man hat dem BODY ein text-align: center; gegeben, ohne das bei nächster Gelegenheit, etwa einem Wrapper, wieder zurückzunehmen. Nun könnte einem im weiteren Verlauf auffallen, dass nun alles, aber wirklich alles zentriert wird. Das ist natürlich nicht zu übersehen und vor allem ziemlich lästig. Ich und die meisten anderen Frontend-Entwickler, die ich kenne, würden nun unseren Fehler bemerken und dem Wrapper ein text-align: left; zuweisen, wie es best practice ist. Nicht so der Entwickler dieser Website, denn der gibt der mittleren Content-Box diese Eigenschaft und zudem noch mal allen möglichen anderen Boxen, die nicht zentrieren sollen. Bei der Gelegenheit habe ich mal die style.css geöffnet und staunte nicht schlecht: Fast alle vergebenen Styles sind per ID an verschiedene Content-Boxen drangehängt, so dass beispielsweise eine H2 in Box A gestyled ist, in Box B, C und D und überhaupt anderswo nicht; was wiederum bedeutet, dass sie fast überall zentriert ist (und sonst die Standardeigenschaften des Browsers für H2 hat). Das ist eine Wartungshölle sondergleichen, denn bei jeder Inhaltsänderung, die über den initialen Zustand der Site hinausgeht, muss man den Style anfassen. Letztlich hat man also etwas ähnliches, wie inline-styles, nur eben in eine externe Datei ausgelagert und auf unvorhersehbare Weise mal wirkungsvoll und mal nicht. Die Vorteile der Kaskadierung werden also nicht ausgespielt, die Nachteile aber schon.

Nun wäre es eine Kleinigkeit, das alles zu korrigieren, aber dann schlägt gnadenlos der Nachteil der Kaskadierung zu: Man weiß nicht, welche Seiteneffekte sich bei grundlegenden Änderungen ergeben. Nimmt man etwa die Zentrierung für alles heraus, wird man gar nichts mehr zentriert vorfinden, weil bei absichtlich zentrierten Elementen möglicherweise eine Angabe zur Zentrierung weggelassen wurde, weil sich das ja implizit aus der nicht zurückgestellten Zentrierung des BODYs ergibt. Ohne eine genaue Analyse des Stylesheets und der Seitenstruktur, sowie umfangreiche Tests wird man solche Änderungen also besser nicht machen. Ich halte mich in solchen Fällen einfach an das vorgegebene System und ergänze meine nötigen Styles entsprechend. Das macht es nicht besser, aber wenigstens wird man – ohne daran Schuld zu sein – für jede dieser Änderungen angerufen und bezahlt.

Die ahnungs- oder lustlose CSS-Schluderei ist nur ein Aspekt dieser Website, auch die URLs der Seiten (mit CoolURI gemacht) waren weit entfernt von Sinn und Zweck einer guten URL-Struktur. Die Menüs sind lieblos zusammenkopiert, das Hauptmenü ein manuell erstelltes (und manuell zu pflegendes) Imagemap-Ungetüm, das einen besonders spannenden Nebeneffekt zeigt: Sind Seiten in TYPO3 nicht über zumindest irgendein automatisch erstelltes Menü zu erreichen, kann CoolURI die URL der Seite nicht wissen und wirft eine Fehlerseite. Man muss nun für jede dieser Seiten einen manuellen Eintrag in CoolURI vornehmen und den bei Änderungen auch Pflegen. Besonders lustig ist das, wenn man die URL-Struktur nach umfangreichen Änderungen neu startet und dann das Hauptmenü nicht funktioniert. Falls man eine automatische Sitemap hat, kann die einen immerhin retten. hat man hier aber nicht. Solche Schludrigkeit zieht sich durch das gesamte Projekt und macht erhebliche Mehrarbeit bei der Pflege. Kein Wunder, dass direkt nach Projektabschluss alle Passwörter geändert wurden und die Änderungen bei mir landen. Leider ist das kein Einzelfall, gerade im TYPO3-Kontext treffe ich immer wieder auf haarsträubende Implementierungen. Ob die Agenturen, die immerhin explizit TYPO3 anbieten, zu dumm oder zu faul sind, weiß ich nicht.

Also aufgemerkt: Wenn man jemanden beauftragt, eine Website umzusetzen, gerade bei TYPO3 und anderen komplexen Systemen, achte man auf einen Dienstleister mit Ahnung und Bock. Nur billig billig schnell schnell führt einen zu oft schon mittelfristig aufs Wartungs-Glatteis. Mir ist das recht, wenn ich der Typ bin, der jammern darf und dabei auch noch gut an der Schludrigkeit anderer verdient.


Das leidige Backend-Editor-Problem

06 11 2007

Immer wieder kommt es zur Diskussion um den richtigen Backend-Texteditor für Blogs, CMSe und sonstige Webanwendungen. Ich selber halte XHTML-Code eigentlich für eine brauchbare Auszeichnungssprache und schreibe deshalb meine Blogeinträge auch direkt in XHTML, sogar die Absätze schreibe ich momentan noch selber. Dafür habe ich die volle Kontrolle über den Code und das ist mir wichtiger als der Verlust an Komfort.

Wie ist es aber, wenn weitere Autoren ins Spiel kommen? Bei unserer Typo3-Installation am Fachbereich haben wir lange diskutiert mit dem Schluss, dass wir den Professoren, HiWis und sonstigen Mitarbeitern so etwas nicht zumuten können. Wir können auch nicht voraussetzen, dass die auch nur halbwegs technisch in der Lage sind, fehlerfreien XHTML- bzw. Typo3-Code zu produzieren, auch wenn es sich nur um Links in der Form <link 125>Linktext</link> und eventuell eine Auszeichnung in fett handelt (viel mehr lässt unser Corporate Design im Text gar nicht zu). Alleine die benötigte Seiten-ID herauszufinden ist schon nicht trivial. Was also tun? Wir setzen notgedrungen auf den in Typo3 eingebauten RTEHTMLArea, der aber aus Code-Sicht mehr als fraglich ist. Unbefriedigend für mich, den Redakteuren aber weitgehend egal.

Aber die ideale Lösung? Eine Lösung, die auch mich ruhig schlafen lässt? BBCode und Wiki-Syntax wären brauchbar, aber wer mit den spitzen Klammern nicht klar kommt, dem helfen auch keine eckigen Klammern weiter. Und Wiki-Syntax ist einfach zu mächtig und noch abschreckender. Mit Textile habe ich weitgehend nur schlechte Erfahrungen gemacht, weil es gerne mal unumgehbar Sachen macht, die man so nicht gemeint hat. Markdown mag das besser machen – ich weiß es nicht – aber auch hier kann man keine ungewünschten Features entfernen und man braucht einige Disziplin, um Markdown-kompatibel zu schreiben. Mein Bruder entwickelt bei XINHA mit und schwört auf diesen Editor, aber auch XINHA ist nur eine weitere Inkarnation des von mir ungeliebten WYSIWYG-Ansatzes: Ich schreibe in erster Linie logisch (bzw. "semantisch") ausgezeichnete Inhalte und nicht Inhalte, die soundso aussehen sollen.

Einen anderen Lösungsansatz verfolgt der WYMEditor, genannt What You See Is What You Mean (WYSIWYM). Klingt sehr gut in meinen Ohren: Man arbeitet wie in einem WYSIWYG-Editor, aber sieht eine Visualisierung der benutzten Elemente und kann vor allem nur logisch sinnvolle Elemente einfügen, also keine font-Tags oder inline-Styles und so. Und hinten raus kommt valider und sauberer und logisch korrekt ausgezeichneter XHTML-Code. Eigentlich eine Selbstverständlichkeit? Finde ich eigentlich auch, naja… Leider erzeugt die aktuelle Version 0.4 keine Zeilenumbrüche oder gar (ganz verwegen) Einrückungen im erzeugten Code, so dass der von Hand nicht mehr sinnvoll bearbeitet werden kann. Schade, mal schauen, was die Entwicklung bringt. Das Potenzial ist in meinen Augen sehr groß. Vor allem wenn man das weiter denkt und Microformats integriert.


YAML - Yet Another Multicolumn Layout

25 07 2006

Hey, gerade bin ich zufällig über die regelmäßige Typo3-News Recherche auf ein wirklich interessantes Framework gestoßen: YAML - Yet Another Multicolumn Layout. Eine Stabile und flexible Grundlösung für Barrierearme und Cross-Browser kompatible Mehrspaltenlayouts, das einem hilft die üblichen Probleme zu umschiffen und sich voll auf das Design und die Implementierung zu konzentrieren. Genial, wenn ich daran denke, wie man doch immer mal wieder kotzt, weil irgendwas nicht funktioniert, weil man die CSS Untiefen mal wieder nicht im Griff hat. Vorbei.

Ich werde mir das mal anschauen und vielleicht für mein Blog-Redesign nutzen. Das mit dem angedrohten Teppich.