Matthias Scharwies: Lesetipp: Ein „neues“ select-Element

Beitrag lesen

Liebe SELFer,

manchmal erkenne ich bei Euch eine Lust am Streiten, die mir Angst macht.

Quatsch [...] baue, [...], für das ich keinen nightly build eines speziellen Browsers benötige. Zugänglichkeit inklusive.

Der nightly build ist doch die akzeptierte Vorgehensweise, Neues zu testen, irgendwann kommt es ohne flag in einen Browser, dann findet man das Feature in Caniuse und wenn es dann in einem der Konkurrenzbrowser landet, wird der entsprechende Wiki-Artikel geändert.

Dort können dann auch Anwendungsfälle oder eben auch Empfehlungen, wie man es sonst realisieren könnte, besprochen werden.

Denn ehe ich einen solchen Quatsch [...] baue, [...] kann ich gleich auf bereits Vorhandenes zurückgreifen, ...

Ja, und das ist doch das Tolle am vorgeschlagenen Weg:

Don't break the web! - keine neuen Elemente, unser Wiki-Beispiel funktioniert auch in Zukunft, auch wenn die Jüngeren außer Michael Jackson wohl niemand mehr kennen:

    <select name="top5" size="5">
      <option>Heino</option>
      <option>Michael Jackson</option>
      ...
    </select>

Was mir auffällt:

Das Dropdown-Menü

  1. übernimmt die gewählte option ohne weiteres Zutun als Inhalt, 👍
  2. nimmt meine CSS-Formatierung nicht. 😟

Eine Gestaltung mit CSS, ein anderer Option-Inhalt als plain text ist nicht gewollt; die Krücke mit Emojis funktioniert im Firefox, bei dem Mexiko-Emoji aber nicht in Chrome und Edge. 😟

Eine Angabe/Hilfestellung wurde früher so realisiert:

		<select id="age" name="age">
			<option value="">bitte wählen</option>
			<option value="10">bis 10 Jahre alt</option>
			<option value="20">bis 20 Jahre alt</option>
			...
		</select>

Da wird künftig das Konstrukt vorgeschlagen:

<select>
  <button>
      <selectedoption></selectedoption>
  </button>
  <option value="reply">Reply</option>
   ...
</select>

Das kann man machen, wenn man die Angabe speziell gestalten will,
aber man kann es auch weglassen.

Und natürlich kann man weiterhin Checkboxen oder Radio-Buttons - aber eben leider auch <div>s und <span>s verwenden.


Ich habe den Lesetipp gepostet, weil SELFHTML neue Entwicklungen verfolgt. Das Feature ist hinter einem flag versteckt - kann sich also noch ändern.

Sobald die Browserunterstützung da ist, wird es im Wiki beschrieben. [1]

Herzliche Grüße

Matthias Scharwies

Stichkanal in Hannover-Linden


  1. Das Wiki sollte nicht den Stand von 2004, „als das Web noch gut war“ konservieren, sondern neue Entwicklungen neutral und nicht wertend beschreiben.
    Empfehlungen, es besser so oder so zu gestalten, gehören natürlich dazu.
    Und dann können die Leser entscheiden, ob sie es einsetzen wollen. ↩︎