Dafür brauchen Sie kein JavaScript

Grundprinzip der Webentwicklung: das Prinzip der geringsten Mächtigkeit

• Eines der zentralen Prinzipien der Webentwicklung, das „Prinzip der geringsten Mächtigkeit“, bedeutet, für einen gegebenen Zweck die Sprache auf der niedrigstmöglichen Ebene zu wählen.
• Unter HTML, CSS und JS wird HTML am meisten bevorzugt, danach CSS und zuletzt JS.
• JS ist am vielseitigsten, bringt aber Risiken wie Ladefehler, zusätzlichen Ressourcenverbrauch und Probleme bei der Barrierefreiheit mit sich.

Benutzerdefinierter Schalter

• Wenn aufgrund von Designanforderungen statt einer normalen Checkbox ein benutzerdefinierter Schalter implementiert werden soll, lässt sich dies mit HTML und CSS unter Verwendung der Pseudoklasse :checked statt mit JS umsetzen.
• Der Browser verknüpft Eingabeelemente innerhalb eines Labels automatisch und macht sie anklickbar, sodass eine Umschaltfunktion auch ohne zusätzliche JS-Handler bereitgestellt wird.

Native Autovervollständigung: Datalist

• Statt JavaScript kann die eingebaute Browser-Funktion datalist verwendet werden, um Optionen während der Eingabe automatisch zu filtern und anzuzeigen.
• Nutzer können entweder ihren gewünschten Wert direkt eingeben oder auf das vom Browser hinzugefügte Dropdown-Symbol klicken, um alle Optionen zu sehen.

Nativer Farbwähler

• Statt eines komplexen, mit JS gebauten Farbwählers kann ein nativer Farbwähler verwendet werden, der mit einer einzigen HTML-Zeile umgesetzt ist.
• In Chromium-basierten Browsern gibt es zusätzlich die Funktion, Farben an beliebiger Stelle auf dem Bildschirm auszuwählen.

Akkordeon

• Mit den Elementen details und summary lässt sich Inhalt verbergen, bis der Nutzer ihn benötigt, wodurch die Seitenstruktur verbessert wird.
• Mit dem Attribut open kann einer der Akkordeon-Einträge standardmäßig geöffnet werden.

Interaktives Modal

• Mit dem Element dialog lässt sich ein Modal implementieren, das dem Nutzer Informationen anzeigt oder Eingaben anfordert.
• Das Öffnen des Modals erfolgt per JS, alles Weitere wird nativ mit HTML und CSS verarbeitet.

Fazit

• Dieser Artikel zeigt, dass sich bessere Websites erstellen lassen, wenn man weniger JS verwendet und stattdessen die Möglichkeiten von CSS und HTML nutzt.
• Wichtig ist, neue Implementierungsansätze mit Blick auf Barrierefreiheit zu testen.

Meinung von GN⁺

• Der wichtigste Punkt dieses Artikels ist, dass sich Leistung und Barrierefreiheit verbessern lassen, wenn man sich in der Webentwicklung nicht auf JS verlässt, sondern die Funktionen von HTML und CSS maximal nutzt.
• Für Webentwickler ist das besonders interessant, weil es neue Wege aufzeigt, Funktionen, die bisher nur mit JS möglich schienen, einfacher und effizienter umzusetzen.

[GN⁺]

Hacker-News-Kommentar

• Es wird darauf hingewiesen, dass die Erwähnung fehlt, dass JavaScript in bestimmten Bereichen wegen der besseren Kompatibilität verwendet wird.

  • Neues JavaScript kann per Transpiling genutzt werden, aber fehlende Funktionen in CSS und HTML per Polyfill nachzurüsten ist deutlich schwieriger und manchmal unmöglich.
  • Bei der Verwendung der Eigenschaft appearance nennt MDN viele Vorbehalte und empfiehlt besonders bei appearance: none gründliche Tests.
  • datalist funktioniert auf Firefox Android nicht und erscheint dort nur als einfaches Eingabefeld.
  • Farbauswähler sind sehr wenig standardisiert und daher für die meisten Unternehmen schwer einsetzbar.
  • Dass es bei details und dialog an Konsistenz fehlt, räumt auch der Artikel selbst ein.
  • Man hofft auf eine Zeit, in der Browser diese Funktionen konsistent unterstützen, würde sie bis dahin aber meist nur in persönlichen Projekten einsetzen.

• Es wird Verwunderung darüber geäußert, dass es selbst 2023 noch allgemeine UX-Probleme bei Formularen und der Eingabe von Benutzerdaten gibt.

  • Es sei unverständlich, warum dieses Problem nicht gelöst wurde.
  • Es gab den Versuch, das mit XForms auf einmal zu lösen, aber Browser haben es nicht implementiert; stattdessen bieten CSS-/JS-Komponenten-Frameworks nur eine begrenzte Menge an Formularelementen.

• datalist war unbekannt, scheint aber auf Chrome Android nicht richtig zu funktionieren.

  • Man kann die Optionen auf der Tastatur sehen, aber dies sei das erste Mal, dass diese Funktion in einer mobilen Web-UI auffällt, und es gebe wenig Vertrauen, dass normale Nutzer herausfinden, wie man sie verwendet.
  • Auf Firefox Android wird es überhaupt nicht unterstützt.

• Erwähnt werden natives sanftes Scrollen mit scroll-behavior: smooth, native Karussells mit scroll-snap und scrollbasierte Animationen.

  • Es wird empfohlen, den Einsatz dieser Funktionen einzuschränken und sie vorsichtig zu verwenden, da sie oft negative Nebenwirkungen haben.

• Mit <details> kann man Inhalte per Strg+F durchsuchen, und während sich JavaScript-Akkordeons nicht öffnen lassen, kann <details> geöffnet werden, was ein Vorteil ist.

• Die Meinung lautet, dass datalist keine geeignete Wahl ist, außer vielleicht für interne Tools.

  • Die Voreinstellungen seien schlecht, man könne das Styling nicht ändern, und wenn Styling oder Verhalten angepasst werden müssen, sei JavaScript oft die einzige Wahl.

• Es wird die Ansicht vertreten, dass bei Einhaltung des HTML-Standards alles konsistent wird und sich Dinge wie Barrierefreiheit oder Übersetzung leicht anwenden lassen.

  • Es wird kritisiert, dass auf modernen Websites wegen dynamisch geladener Seiten nicht einmal der Zurück-Button richtig funktioniert.

• Es wird darauf hingewiesen, dass CSS als Werkzeug genutzt werden kann, um Webseiten schwer lesbar zu machen.

  • Es wird die Meinung vertreten, man müsse zu Browsern zurückkehren, in denen Nutzer jeden Aspekt von Layout und Typografie kontrollieren können.

• Als eines der Kernprinzipien der Webentwicklung wird die „Rule of Least Power“ erwähnt.

  • Ein Entwickler merkt an, noch nie von diesem Prinzip gehört zu haben, und fragt sich, ob es Frontend-Entwickler gibt, die Dinge so einfach wie möglich halten wollen.