Warum HTML5-Feature-Detektoren und -Charts nicht wahnsinnig viel taugen

Veröffentlicht am 8. Juni 2010

Weil im Moment Diagramme wie dieses, Listen wie diese und Websites wie diese die Runde machen, sehe ich mich gezwungen tatsächlich trotz geplanter Blogpause diesen Post vorzuziehen. Es ist nämlich so, dass die Ergebnisse von HTML5-Feature-Detektoren nicht für mehr zu gebrauchen sind, als für Witze (Quelle). Der Grund: Die Detektoren prüfen via Javascript, ob Feature X implementiert ist, und nicht, wie es implementiert ist, also ob es schon zu gebrauchen ist. Und es ist zur Zeit sehr oft der Fall, dass eine HTML5-Funktion in einem Browser zwar vorhanden ist, aber entweder buggy oder gar nur ein reiner Platzhalter ist!

Ein gutes Beispiel ist das ImageData-Interface und dessen CanvasPixelArray, über das man bei einem Canvas-Element einzelne Pixel auslesen kann.

// Pixel für einen Ausschnitt auslesen
var imgData = context.getImageData(200, 80, 80, 80);
for(var i = 0; i < imgData.data.length; i++){
    // Mache irgendwas mit den Farbwerten der Pixel
}

Ist es in Webkit vorhanden? Ja! Ist es ein Array wie vom Standard vorgeschrieben? Ja! Sind denn auch Pixel drin? Nein (Update: Scheint nur bei mir der Fall zu sein, siehe Kommentare). Für einen Feature-Detektor wäre dies trotzdem ein vorhandenes Feature, das die volle Punktzahl abräumt. Noch ein Beispiel: Das dataTransfer-Objekt in Webkit-Browser, das normalerweise den Datentransfer in Drag&Drop-Operationen übernimmt.

// Drag-Start-Event, setzt das dataTransfer-Objekt
dragme.ondragstart = function(event){
    event.dataTransfer.setData('hallo', 'welt');
    event.dataTransfer.effectAllowed = 'move';
};

// Drop-Event
dropme.ondrop = function(event){
    alert(event.dataTransfer.getData('hallo'));
};

Ist es in Webkit vorhanden? Ja! Ist es ein Objekt wie vom Standard vorgeschrieben? Sind die Getter und Setter vorhanden? Ja! Kann man denn damit auch wirklich Daten transferieren? Nein. Implementiert Webkit das draggable-Attribut? Nein, stattdessen gibt es einen proprietären CSS-Hack.

Nur um das ganz klar zu machen: Dererlei ist für einen Detektor kaum zu ermitteln, insofern ist das hier keine Kritik an html5test.com und Konsorten. Und es ist durchaus sinnvoll, dass ein Browser halb fertige Features an Bord hat – wie soll man diese denn sonst testen? Klar ist aber auch, dass Feature-Detektoren eine für Webentwickler nicht brauchbare Aussage machen. Für hypende Marketing-Fritzen mag das gut genug sein, für Webworker eher nicht.

Ein letztes Beispiel: das <input type="date"> funktioniert in Webkit insofern, als dass es nicht wie gänzlich unbekannte Input-Elemente in ein <input type="text"> umgewandelt wird. Allerdings wird von dem Browser (anders als bei Opera) kein Datumspicker o.Ä. bereitgestellt. Dies ist zwar auch nicht explizit von den Spezifikationen vorgeschrieben, aber ob man hier von einer vollständigen Implementierung sprechen kann, ist zumindest diskutabel. Für einen HTML5-Feature-Detektor ist die Sache hingegen klar: Safari unterstützt diesen Teil von HTML5. Ich würde dieser Diagnose nicht unbedingt zustimmen.

Fazit: Die Schwarz-Weiß-Welt, die ein HTML5-Feature-Detektor oder HTML5-Support-Chart malt, existiert so nicht. Nicht mal im Ansatz. Für PR und Hype sind diese Dinger toll, für mehr nicht. Seid ihr hypende PR-Leute?

Hardware-Review: Toshiba NB305 Netbook + Ubuntu Netbook Edition

Veröffentlicht am 3. Juni 2010

Toshiba NB305-105

Ich brauchte spontan ein Netbook und habe mir das Toshiba NB305-105 geshoppt. Reviews versprachen eine Marathon-Batterie, ein großes Touchpad sowie eine verbraucherfreundlich-robuste Tastatur und, das kann man schon sagen, dass sich das Versprochene bewahrheitet. Ich habe zwar erst wenige Stunden damit verbracht, aber die Arbeit geht definitiv sehr angenehm von der Hand und der Akku scheint keine Anstalten zu machen, sich zu entladen. Die Verarbeitung scheint robust und schlecht sieht das Ding auch nicht aus. Von den Leistungsdaten her ein ganz durchschnittliches Netbook.

Doof, aber (so finde ich) nicht sooo dramatisch: Glossy Screen. Außerdem hatte ich ja keine Ahnung wie lästig Windows 7 sein kann. Zum Glück war das komplizierteste an der Installation der Ubuntu Netbook Edition (Lucid) das Vorbereiten des Installations-Sticks, den mein Desktop-Ubuntu aus unerfindlichen Gründen nicht recht befüllen wollte. Es gab auf dem Netbook selbst keine Probleme – der gefürchtete Intel GMA 3150-Grafikprozessor gibt sich lammfromm, die Webcam geht, die Functions Keys scheinen es zu tun und auch sonst kann man konstatieren: es läuft rund. Kann man empfehlen, das Teil.

Element, Tag, Attribut. Ein für allemal.

Veröffentlicht am 1. Juni 2010

Element, Tag, Attribut

Anders als bei der Causa HTML5 gibt es hier keine Ausreden. Wenn das da oben durcheinander gebracht wird, sind Missverständnisse und Chaos vorprogrammiert. So gehet nun hin und lehret den Unwissenden, auf dass man nie wieder rätseln muss, was jemand mit der Strong-Tag überhaupt meint.

Drei Dinge, für die man bereits jetzt mit HTML5 (im jedem Browser) gebrauchen kann

Veröffentlicht am 31. Mai 2010

HTML soll im Jahre 2022 fertig sein – das erzählt man sich jedenfalls. Jene die dies verbreiten verzichten meist darauf, "fertig" näher zu definieren. Fakt ist nämlich: Viele Aspekte von HTML5 kann man heute schon verwenden.

Und obwohl HTML5 vor allem darauf ausgerichtet ist, neue komplizierte Javascript-APIs für dynamische Webanwendungen bereitzustellen, ist auch für Otto Normalwebworker einiges an brauchbaren neuen Features an Bord. Drei schöne HTML5-Aspekte, die jeder gebrauchen kann und die ohne zu Tricks, Hacks, und Internet-Explorer-Sonderbehandlungen auskommen, möchte ich kurz vorstellen.

Vereinheitlichungen nutzen, Tipperei einsparen

Selbst wenn man von allen neuen HTML5-Features gar nichts wissen will, kann man sich trotzdem so machen Tastendruck und so manches Denkmanöver einsparen, denn HTML5 macht einiges einheitlicher und vieles kürzer. Das Paradebeispiel ist der sicher vielen schon bekannte Doctype:

<!DOCTYPE html>

Da HTML5 in erster Linie eine Erweiterung von bekannten (X)HTML-Standards ist, kann man bei 99% aller Websites einfach den Doctype austauschen und hat auf einen Schlag eine gültige HTML5-Seite. Und diesen Doctype kann man sich, im Gegensatz zu seinem Vorgängern, auch bequem merken. Kein Browser, nicht einmal der rückständigste Internet Explorer, wird damit Probleme haben, ebenso wenig der Google-Crawler oder andere Besucher der Seite.

Ebenfalls angenehm ist, dass das type-Attribut der script- und style-Elemente in HTML5 die Standardwerte text/javascript und text/css hat. Das bedeutet nicht weniger, als dass man diese Attribute nicht zu notieren braucht, wenn man Javascript oder CSS einbetten möchte. Auch hier gilt: Alle Browser spielen mit!

<script> alert('Ich brauche kein type-Attribut!'); </script>
<style> body:before{ content:'Ich auch nicht'; } </style>

Außerdem ist HTML5 echtes "normales" HTML und kein XHTML. Das heißt, man kann im Vergleich zu XHTML 1, wenn man möchte, auf schließende Slashes (Schrägstriche) bei leeren HTML-Elementen verzichten und braucht auch boolsche Attribute nicht mehr voll ausschreiben:

<input type="text" disabled="disabled" /> <!-- XHTML-Style -->
<input type="text" disabled> <!-- HTML(5)-Style -->

Wichtig ist: Man kann das alles so machen, muss aber nicht. Was die Syntax angeht ist HTML5 recht anspruchslos – was valides XHTML 1 ist, ist auch syntaktisch gültiges HTML5.

Neue Formular-Elemente verwenden

HTML5 führt eine Reihe neuer Elemente für Formularfelder ein, wobei unter anderem Schieberegler und Datumspicker enthalten sind. Diese funktionieren natürlich nur dann ordnungsgemäß, wenn sie vom Browser unterstützt werden (Opera ist hier vorreiter), doch bei Nicht-Unterstützung machen die anderen Browser etwas sehr sinnvolles: Sie verwandeln das Feld in ein ganz normales Textfeld! So würde das folgende Datums-Input…

<input id="datumsfeld" type="date">

… durch Opera erwartungsgemäß mit einem Datumspicker ausgegeben…

Opera und HTML5

… im IE6 aber in ein normales Text-Input verwandelt:

IE6 und HTML5

Das ist vielleicht für den IE6-Benutzer nicht optimal, hält aber ihn aber in keiner Weise vom Ausfüllen des Feldes ab! Man müsste dann nur eben darunter schreiben, dass das Datum im Format JJJJ-MM-DD einzugeben ist. Dann hätte der Opera-Surfer ein komfortableres Formular vor sich, der IE6-Nutzer ist aber trotzdem nicht ausgesperrt – Progressive Enhancement at it's best.

Tipp für JavaScript-Nerds: Wer in jedem Fall einen Datumspicker braucht, kann den für IE6 und Konsorten auch bereitstellen. Da die Browser für sie unbekannte Eingabefelder komplett in Textfelder umwandeln, ist es kein Problem, solche Fälle zu erkennen und mit jQuery-Plugins oder andern Datumspicker-Scripts zu behandeln:

var feld = document.getElementById('datumsfeld');
if(feld.type != 'date'){
    // Hier jQuery u.Ä. für einen herkömmlichen JS-Datumspicker verwenden
}

Unterm Strich verliert beim Einsatz von HTML5-Formularen niemand etwas, aber jene, die mit modernen Browsern unterwegs sind, genießen bereits ein kleines Usability-Plus.

data-*-Attribute nutzen

Mit data-*-Attributen kann man unsichtbare Daten in ein HTML-Element schreiben. Das Sternchen steht dabei für eine beliebige Zeichenkette, d.h. man kann sich buchstäblich neue HTML-Attribute ausdenken! Im Einsatz könnte das Ganze beispielsweise so aussehen:

<ul id="metal">
    <li data-artist="Judas Priest" data-album="Painkiller">Painkiller</li>
    <li data-artist="Metallica" data-album="Ride the Lightning">For Whom the Bell Tolls</li>
    <li data-artist="Iron Maiden" data-album="The Number of The Beast">Run to the Hills</li>
</ul>

Der Sinn von data-*-Attributen ist ganz einfach: die in ihnen gespeicherten Informationen (die man z.B. während der Erzeugung der Seite durch ein ein PHP-Script einbauen könnte) lassen sich im Browser per JavaScript auslesen. HTML5 sieht dafür eigentlich auch eine eigene JS-Schnittstelle vor.

Diese ist zwar noch in keinem Browser implementiert, doch das muss uns nicht stören: die data-*-Attribute sind schließlich ganz normale HTML-Attribute und können entsprechend auch ohne spezialisierte API ausgelesen werden:

var titel = document.getElementsByTagName('li');
for(var i = 0; i < titel.length; i++){
    alert(titel[i].innerHTML + ' von ' + titel[i].getAttributeNode('data-artist').value + ' stammt vom Album ' + titel[i].getAttributeNode('data-album').value);
}

Übrigens: innerHTML ist seit HTML5 auch Bestandteil des Webstandards-Kanon und keine böse Nichtstandard-Funktion mehr.

Fazit: Bei HTML5 ist (auch heute schon) für alle etwas dabei

Klar, HTML5 wurde für Webapplikationen entworfen und weniger für normale Websites wie den Internetauftritt der mittelständischen Beispielmüller GmbH. Und ob das so für das Web der Weisheit letzter Schluss ist, darf man durchaus diskutieren. Aber wie wir gesehen haben, ist in HTML5 für jeden etwas dabei – auch für normale Webworker, die sich eben nicht mit haarsträubenden Hacks herumschlagen wollen.

Ob das Ganze dann so spannend ist wie eben all jene hackerischen Hightech-Sachen, steht freilich auf einem anderen Blatt.