Frage zum Wiki-Artikel „cookies“

[Felix Riesterer]

Lieber Ed,

Zur Erinnerung, hier noch einmal der Link zur anonymisierten Live-Version meines Patientenakten-Projekts: https://schweizerkinder.at/patientenakte

wenn ich einen der unteren Links anklicke, erhalte ich in der Konsole meines Firefox diese Fehlermeldung:

Uncaught ReferenceError: getPreferredStyleSheet is not defined onload https://schweizerkinder.at/patientenakte/js/onload.js:3 EventHandlerNonNull* https://schweizerkinder.at/patientenakte/js/onload.js:1

Das ist sicherlich die Ursache, warum die vom Benutzer getroffene Farbwahl nicht angewendet wird. Das hat damit zu tun, dass Du Deinen Code auf diverse JavaScript-Dateien verteilst, die dann alle geladen werden müssen, damit die benötigten Funktionen alle verfügbar sind. So rufst Du in Datei A eine Funktion auf, die aber in Datei B notiert ist, welche vielleicht aus welchen Gründen auch immer nicht geladen werden konnte.

Wenn Du allen Code in einer JavaScript-Datei hast, dann brauchst Du auch nur diese eine zu pflegen. Und dann hast Du auch die Chance zu verstehen, was Du da tust! Lass' mich 'mal den Anfang machen:

document.addEventListener("DOMContentLoaded", function () {
  function createColourChooser () {
  }

  function getPreferredStyle () {
  }

  function setPreferredStyle (URL) {
  }

  setPreferredStyle(
    getPreferredStyle()
  );
  createColourChooser();
});

Aber lass' mich noch viel tiefer in die Kritik einsteigen:

1. Diejenigen Elemente einer Seite, die ohne JavaScript keine Funktionalität haben, sollten mit JavaScript dort hinein geschrieben werden. Sie grundsätzlich im HTML-Dokument zu haben, verstößt gegen diesen Grundsatz.
2. Warum lese ich JavaScript-Code im HTML-Dokument? Dieser gehört da nicht hin, weil Du JavaScript-Code nur in extern geladenen JavaScript-Dateien hast. Daten, die JavaScript aus dem HTML-Dokument als sozusagen Arbeitsdaten entnehmen soll, notierst Du dort völlig anders, und zwar mit HTML-Mitteln wie die data-Attribute.
3. Was ist eigentlich ein <div class="wrapper">? In HTML gibt es inzwischen (HTML5) einige Blocklevel-Elemente, die man stattdessen verwenden kann, wie z.B. main, section, article, aside usw. Nimm doch eines von diesen, dann sparst Du Dir auch den Klassennamen gleich mit, denn Dein Selektor im CSS-Code wird dann diesen Elementnamen verwenden.
4. Tabellen sind dazu da, tabellarische Inhalte anzuzeigen, aber nicht, um die Seite insgesamt zu layouten. Du verwendest eine dreispaltige Tabelle, bei der die erste Spalte (links) dafür sorgt, dass ein Abstand vom linken Rand beibehalten wird. Dafür verwendet man passende CSS-Eigenschaften, wie z.B. margin. Entferne also bitte diese jeweils erste Tabellenzelle in Deinen Tabellenzeilen.
5. Du willst eine Tabelle, bei der links eine Eigenschaft steht und rechts der zugehörtige Wert (wie bei Schlüssel-Wert-Paaren). Das bedeutet, dass Deine linke Spalte einen Tabellen-Header benötigt, also ein <th>-Element. Wenn Dir dessen Darstellung nicht gefällt, dann passe sie mit CSS entsprechend an. Aber nur aus Gründen der Darstellung „nur“ ein td-Element zu verwenden ist semantisch falsch.
6. Deine Klassennamen wie „empty“, „erstespalte“ und „informationen“ kannst Du entsorgen, weil Du auf die erste Tabellenspalte verzichtest (siehe oben Punkt 4), um nur noch zwei Spalten übrig zu haben, bei denen die erste mit einem th-Element (siehe oben Punkt 5) und die zweite mit einem td-Element realisiert ist. Damit kannst Du mittels CSS und dem passenden Selektor ganz klar zwischen diesen Spalten unterscheiden, ohne Klassennamen zu benötigen. Das ist einer der großen Vorteile von semantischem HTML! Außerdem habe ich in Deinem CSS gesehen, dass Du auch Pseudoklassen wie :nth-of-type() verwendest, womit man das auch machen könnte, was meiner Meinung nach aber unnötig umständlicher wäre!
7. Die visuelle Unterteilung Deiner Tabelle durch Zwischenüberschriften machst Du in der Tat mit th-Elementen, die ein colspan-Attribut haben, damit die th-Zelle über beide Spalten geht. Das ist gut so! Um aber ihre Darstellung von den regulären th-Elementen in den ersten Spalten zu unterscheiden, kannst Du im CSS einen Attribut-Selektor verwenden, und zwar am Besten den, der die Präsenz des Attributs prüft (der genaue Wert des colspan-Attributs ist ja hier egal).
8. Es ist visuell nur eine Tabelle zu erkennen, im Quelltext stehen aber mehrere nacheinander notiert. Wozu? Das kann ruhig eine Tabelle sein. Mit den oben angemerkten Verbesserungen ist das Ergebnis schlanker, effizienter und besser zu pflegen.
9. Deine Button-Navigation unten möchte eine Navigation (nav) sein. Dazu kommt noch, dass die Links einen anklickbaren Verweistext benötigen, damit auch blinde Menschen diese Navi verwenden können. Für sehende Menschen kann man die Beschriftung visuell verstecken.
10. Du hast da im Quelltext eine lustige Erinnerungsnotiz zur (scheinbaren!) Notwendigkeit von inline-Styles bezüglich eines Mailto-Links. Komisch, dass Du hier keinen Klassennamen verwendest, wo Du doch bei allen Tabellenzellen einen hattest! Wenn nun Deine Button-Navi in einem nav-Element sitzt, kannst Du Deinen Links dort eine feste Breite geben, die auch für den Mailto-Link gilt - passenden Selektor vorausgesetzt. Ein Hoch auf semantisches HTML!

Schau mal in dieses jsFiddle, denn da habe ich angefangen, meine Kritik umzusetzen.

Liebe Grüße

Felix Riesterer