nicht angemeldet
Hallo,
Wenn es aber möglich ist und der Browser JS aktiviert hat, dann soll eine Lösung mit Drag and Drop (z.b. html5doctor) zum Einsatz kommen. Das versteht man doch unter progressive enhancement, oder?
Das Beispiel ist etwas schlecht gewählt.
Ein <input type="file"> ist robust und du solltest es immer anbieten. Drag and Drop von Files ist eine weitere Möglichkeit, Dateien dem Script zur Verfügung zu stellen. Sie funktioniert auf vielen Geräten nicht so einfach wie <input type="file">. Bestenfalls solltest du beides anbieten. DnD muss natürlich mit JavaScript umgesetzt werden. Falls der Browser DnD unterstützt, erzeugt das JavaScript die Dropzone. Andernfalls tut es nichts und vertraut auf <input type="file"> als Fallback. Das ist Progressive Enhancement. Natürlich könnte dieses Script das input-Feld verstecken, aber ich sehe dazu keinen Grund.
Ist das Inputfeld erstmal gerendert wäre das ja eine unschöne Sache. Also auf "Dom ready" warten ist zu spät. Aber ein Element zuersetzen, dass noch nicht im DOM-Baum ist, ist auch unschön.
Ganz allgemein gesprochen:
Scripte sollten asynchron geladen werden, also ja, man wartet auf “document ready”. Klar, dabei kann es zum Aufblitzen von Bedienelementen kommen, die später durchs Script ersetzt werden. Wenn das Script erst Feature-Abfragen vornehmen muss, geht es nicht anders.
Falls die Verfügbarkeit von JavaScript ausreicht, so kann man die zu ersetzenden Elemente vor dem Parsen der Seite ausblenden. Dazu fügt man im head ein kleines nicht-blockendes Script ein, das dem html-Element eine Klasse verpasst:
<html>
<head>
<link rel="stylesheet" href="main.css">
<script>
document.documentElement.className += ' js';
</script>
Mithilfe dieser »js«-Klasse blendet man im CSS alle Elemente aus, die durch JavaScript-Logik ersetzt werden:
.js .bereich-der-durch-js-logik-ersetzt-wird { display: none; }
Das kann man natürlich auch tun, wenn Feature-Abfragen nötig sind. Dann muss das Script die ausgeblendeten Elemente wiederherstellen – das führt auch zu einem »Aufblitzen«, aber immerhin sieht der Nutzer nicht zwei verschiedene Elemente.
Und wird die "Droparea" schon als html-Element ausgeliefert oder im JS generiert?
In der Regel sollte ein Element, das nur im Kontext eines Scripts sinnvoll ist, von diesem Script erzeugt werden.
Aus Performance-Gründen kann man Elemente, die von Scripten verwendet werden, natürlich schon direkt im HTML-Dokument ausliefern. Die sollten aber versteckt sein.
Mathias
Gunnar Bittersmann
Matthias Apsel