Checkbox-Hack ist nicht zu empfehlen!

[Matthias Scharwies]

Guten Morgen!

Neben 'details' lassen sich IMHO Menü und ähnliche Sachen auch in CSS/HTML mit Hilfe von <input> checkbox und/oder radio realisieren. Dabei wird die checkbox als Zustandsspeicher verwendet.

Gunnar hat Recht, wir haben im Wiki eine ausführliche Erklärung:

Exkurs:_Checkbox-Hack

sondern z.B. um Ebenen in SVG ein/auszuschalten

Ja, da geht kein details. Ich würde einen Toggle und Schalterklassen verwenden.

oder 'modale' Dialoge einzublenden

Da braucht man zwei Zeilen JS ohne Rückmeldung zum Server; zukünftig funktioniert es ohne JavaScript:^{[1] [2] [3]}

<button command="show-modal" commandfor="my-dialog">
This opens a dialog
</button>

<dialog id="my-dialog">This is the dialog</dialog>

oder bei komplexeren Formularen untergeordnete Eingaben abhängig anzuzeigen oder Hinweise einzublenden.

Dann wird das Ergebnis der Checkbox mit gesendet - sauberer wäre ein Toggle, der eingegebene Daten und Bedienung trennt.

Motivation ist meist, dass eine Seite/Anwendung trotz abgeschaltetem JS gut benutzbar bleibt (besonders auf Handy ist sich im Netz zu bewegen sonst unerträglich, keine Ahnung wie die Leute das so ertragen. Und gerade da möchte man ohne Bloat sein, wenn Verbindung und Bandbreite gering)

Ja, aber das läuft ja alles im Browser; Verbindung und Bandbreite sind da egal.

Herzliche Grüße

Matthias Scharwies

---

1. https://open-ui.org/components/invokers.explainer/
   Adding commandfor and command attributes to <button> ... would allow authors to assign behaviour to buttons in a more accessible and declarative way, while reducing bugs and simplifying the amount of JavaScript pages are required to ship for interactivity. ↩︎

2. https://utilitybend.com/blog/an-update-on-invokers-invoker-commands-in-html
   Why care about an experimental feature?
   The reason you should be interested in this feature is that talking about it does help to move things forward. If we notice a big interest from people, it gets placed on top of the pile by the different working groups out there. ↩︎

3. caniuse sieht aus wie Blendax Anti-Belag, das wird aber schon! ↩︎