details, Edge und die Versionsnummern

[fietur]

Hallo,

auf meiner Seite habe ich ein Einblendmenü, das nicht gescrollt werden kann. Im Laufe der Zeit sind immer mehr Menueinträge hinzugekommen, so dass ich diese gruppiert habe. Dabei habe ich das details-Element verwendet. Leider kommt es vor, dass Besucher nicht alle Menüeinträge zu sehen bekommen, wenn ihr Bildschirm zu klein bzw. die Darstellung zu groß gewählt ist und sie den IE oder Edge verwenden - alle Einträge sind aufgeklappt. Das Problem, dass das Dreieck zusätzlich (Vertikal-)Platz benötigt, sei mal außen vor. Ein Workaround mittels JS kommt nicht in Betracht.

Laut caniuse unterstützt Edge ab Version 79 details und open. Nur scheinen diese Versionen nicht bei den Nutzern vorzuliegen - es werden Versionsnummern 44 angegeben (die aktuell sein sollen).

Wie soll ich das verstehen? Ist Edge in W10 (mit vermutlich Version 44) etwas anderes als Edge mit Version 79?

[Matthias Scharwies]

Servus!

Laut caniuse unterstützt Edge ab Version 79 details und open. Nur scheinen diese Versionen nicht bei den Nutzern vorzuliegen - es werden Versionsnummern 44 angegeben (die aktuell sein sollen).

Wie soll ich das verstehen? Ist Edge in W10 (mit vermutlich Version 44) etwas anderes als Edge mit Version 79?

Erst hatte Microsoft versprochen Edge 79 auf allen Windows-Rechnern (auch W7 und Vista) automatisch zu installieren - nach mehreren Wochen muss man feststellen, dass dies bis jetzt noch nicht einmal auf allen Windows-10-Systemen passiert ist. 😟

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Servus!

Laut caniuse unterstützt Edge ab Version 79 details und open. Nur scheinen diese Versionen nicht bei den Nutzern vorzuliegen - es werden Versionsnummern 44 angegeben (die aktuell sein sollen).

Wie soll ich das verstehen? Ist Edge in W10 (mit vermutlich Version 44) etwas anderes als Edge mit Version 79?

Erst hatte Microsoft versprochen Edge 79 auf allen Windows-Rechnern (auch W7 und Vista) automatisch zu installieren - nach mehreren Wochen muss man feststellen, dass dies bis jetzt noch nicht einmal auf allen Windows-10-Systemen passiert ist. 😟

[EDIT] SELF-Blog: Surfen mit dem neuen Edge Chromium vom 15.01.2020 [/EDIT]

Herzliche Grüße

Matthias Scharwies

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Erst hatte Microsoft versprochen Edge 79 auf allen Windows-Rechnern (auch W7 und Vista) automatisch zu installieren - nach mehreren Wochen muss man feststellen, dass dies bis jetzt noch nicht einmal auf allen Windows-10-Systemen passiert ist. 😟

Edge lässt sich jetzt herunterladen. https://www.microsoft.com/de-de/edge

Bis demnächst
Matthias

[Der Martin]

Hallo,

Erst hatte Microsoft versprochen Edge 79 auf allen Windows-Rechnern (auch W7 und Vista) automatisch zu installieren - nach mehreren Wochen muss man feststellen, dass dies bis jetzt noch nicht einmal auf allen Windows-10-Systemen passiert ist. 😟

Edge lässt sich jetzt herunterladen. https://www.microsoft.com/de-de/edge

nein, nur der 1.8MB schwere Installer, der vermutlich den Rest live aus dem Netz nachzieht. Oder gibt es eine Quelle, wo man das komplette Installationspaket herunterladen kann?^[1] Meist gibt es die ja, aber Microsoft verrät solche Quellen ungern.

Live long and pros healthy,
 Martin

---

1. Zum Beispiel, wenn man das Teil auf mehreren PCs installieren und nicht jedesmal aufs Neue 80MB (oder wieviel auch immer) übertragen möchte. ↩︎

[Matthias Apsel]

Hallo Der Martin,

nein, nur der 1.8MB schwere Installer, der vermutlich den Rest live aus dem Netz nachzieht. Oder gibt es eine Quelle, wo man das komplette Installationspaket herunterladen kann?

https://www.drwindows.de/news/microsoft-edge-offline-installer-herunterladen-auch-fuer-die-vorschauversionen

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@fietur

Wie soll ich das verstehen? Ist Edge in W10 (mit vermutlich Version 44) etwas anderes als Edge mit Version 79?

Ja, was ganz anderes.

Edge hatte bis Version 44 seine eigene Rendering engine: EdgeHTML. Seit Version 79 verwendet Edge Blink (in entsprechender Versionsnummer, daher auch der Sprung) – ist also ein Chromium-Browser (wie u.a. auch Google Chrome).

Chromium-Edge sieht aus wie der Vorgänger, ist aber unter der Haube ein ganz anderer Browser.

Aktuell ist übrigens Version 80.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[fietur]

Danke.

Dann werde ich wohl weiter abwarten. Den Zirkus mit den Browser-Weichen konnte man ja auch aussitzen. 😜

Nochmal 25 Jahre wird es ja nicht dauern...

...bis der Marktanteil in die Bedeutungslosigkeit abgerutscht sein wird. Obwohl, ich arbeite gelegentlich auch immer noch mit einer emulierten XP-Installation... 💀

[JürgenB]

Hallo,

nur zur Info:

ich setze auf meinen Seiten einen Polyfill für Details/Summary ein. Etwa 8% meiner Besucher benötigen und laden diesen.

Gruß
Jürgen

[fietur]

Der Polyfill verwendet JavaScript, was ich nicht möchte.

Würde ich JS einsetzen, gäbe es auch keine Probleme mit geöffneten/geschlossenen Bereichen oder der Platzierung des Dreiecks in der gleichen Zeile.

Auch ein workaround über ein form mit einer CSS-angepassten checkbox tue ich mir jetzt nicht an (oder Ähnliches, auf das man kommen könnte...)

Den Scrollbalken hatte ich auch schon mal überlegt, das dann aber gelassen, weil es Probleme mit der unterschiedlichen Darstellung aufgrund der Breite gab (Handys). Der Platz hat dann mit Scrollbalken u.U. nicht mehr ausgereicht, um ohne Zeilenumbruch auszukommen.

Danke aber für die raschen Antworten 🙂

[Auge]

Hallo

Den Scrollbalken hatte ich auch schon mal überlegt, das dann aber gelassen, weil es Probleme mit der unterschiedlichen Darstellung aufgrund der Breite gab (Handys). Der Platz hat dann mit Scrollbalken u.U. nicht mehr ausgereicht, um ohne Zeilenumbruch auszukommen.

Es sollen schon Benutzer von Smartphones in freier Wildbahn dabei beobachtet worden sein, wie sie den Inhalt eines Screens mit einem Fingerwisch verschoben haben sollen. Die sollen das auch ganz selbstverständlich getan haben, ganz so, als täten sie den ganzen lieben langen Tag nichts anderes™️. Da stellt sich mir doch die Frage, ob wohl ein offenes Menü mit flexibler Größe ohne Scrollbalken funktionieren würde, in dem der Benutzer per Fingerwisch an den gewünschten Menüpunkt herankommen kann?

Tschö, Auge

[fietur]

Jetzt hätte ich gerne eine passendes Pratchett-Zitat... 😂

Die Handy-Nutzer in freier Wildbahn bekommen das Skalieren i.d.R. problemlos hin. Auch das Konzept des Hamburger Buttons, mit dem ich mein Menü aus dem Off einblende (CSS, kein JS), ist für die Bewohner dieses Habitats kein Problem.

Es sind eigentlich nur die Edge-Nutzer, und da diejenigen, die ihre Anzeige nicht skalieren können (sondern froh sind, dass ihnen irgendein Wizzard mal in den W10-Einstellungen die Anzeige auf 150% gestellt hat). Nur die sehen die untersten Menüeinträge nicht mehr, weil alles aufgeklappt ist (danke, MS). Und selbst dann würde das keine Rolle spielen, wenn nicht durch die Coronakrise einige Einträge hinzugekommen wären. Da das Problem aber nur wenige betrifft, habe ich Reihenfolge der Einträge geändert; der aufgeklappt größte und aktuell uninteressanteste Brocken steht am Ende.

In meinem Entwurf hatte es sich so ergeben, dass die Breite des (fixed Position) Menüs auf auto und die Höhe auf 100% eingestellt waren. Nicht ganz glücklich, aber für Korrekturen fehlt mir jetzt die Zeit.

Ist schon irgendwie kopfschüttelesk: Da wechselt man vom Horizontalmenü, weil das nichts für langgezogene Handyscreens ist, und dann gibt es Probleme mit Laptop-Screens, die horizontal gerade mal 15 Zeilen Platz bieten, wenn der Abstand zur Bedienbarkeit per Finger auf dem Handy auch für Grobbefingerte erhalten bleiben soll. 🥴

[Auge]

Hallo

Jetzt hätte ich gerne eine passendes Pratchett-Zitat... 😂

Die Handy-Nutzer in freier Wildbahn bekommen das Skalieren i.d.R. problemlos hin. Auch das Konzept des Hamburger Buttons, mit dem ich mein Menü aus dem Off einblende (CSS, kein JS), ist für die Bewohner dieses Habitats kein Problem.

Es sind eigentlich nur die Edge-Nutzer, und da diejenigen, die ihre Anzeige nicht skalieren können (sondern froh sind, dass ihnen irgendein Wizzard mal in den W10-Einstellungen die Anzeige auf 150% gestellt hat). Nur die sehen die untersten Menüeinträge nicht mehr, weil alles aufgeklappt ist (danke, MS).

Ich weiß ja nicht, ob du jemals an einem Desktopsystem gearbeitet hast. Die mit dem Edge haben das üblicherweise. Ich glaube, ich habe da schon Leute mit der Tastatur oder der Maus in Fenstern scrollen gesehen. Ich bin mir nicht ganz sicher, aber …

Wenn du dein Menü nicht festnageln würdest, wäre es auch in allen Szenarien bedienbar.

Aber ich glaube, ich wiederhole mich.

Tschö, Auge

[JürgenB]

Hallo,

die Dreiecke vor dem Summary kannst du mit

summary::-webkit-details-marker { display: none; }
summary { list-style-type:  none; }

entfernen. Ich verlinke hier mal unser Tutorial:

https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation

Gruß
Jürgen

[fietur]

Ich setze kein JavaScript ein.

Die Dreiecke möchte ich eigentlich auch nicht entfernen, weil sonst die Möglichkeit zum Auf-/Zuklappen entfällt; summary ist bei mir leer, weil die Überschriften ebenfalls Links darstellen und sonst nicht zu unterscheiden wäre, ob ein Anklicken dem Aufklappen oder der Linkverfolgung gilt.

[Gunnar Bittersmann]

@@fietur

Auch ein workaround über ein form mit einer CSS-angepassten checkbox tue ich mir jetzt nicht an

Vor allem sollte man den Checkbox-Hack den Nutzern nicht antun. Aus Gründen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Der Martin]

Hallo Gunnar,

Vor allem sollte man den Checkbox-Hack den Nutzern nicht antun. Aus Gründen.

anscheinend habe ich den verlinkten Thread im Januar nicht wirklich zur Kenntnis genommen, sonst hätte ich da schon widersprochen. Heydon sagt:

We expect toggle buttons to be buttons, but checkboxes and radio buttons are really inputs.

Mit einem Button assoziiere ich eine bestimmte (einmalige) Aktion ähnlich einem Taster, und nicht ein Wechseln zwischen zwei Zuständen. Wenn man einen Button zum Toggeln "missbrauchen" möchte, dann müsste man auch die Beschriftung je nach Zustand wechseln. Gerade für toggle-Aktionen ist ein Button deshalb IMO falsch.
Im Gegenteil, dafür ist eine Checkbox eigentlich prädestiniert, wie auch immer sie visuell realisiert ist (ein simples Kästchen mit einem Kreuz, ein Kästchen mit Haken, oder auch eine graphisch anspruchsvolle Darstellung eines Schalters mit zwei Positionen).

Live long and pros healthy,
 Martin

[JürgenB]

Hallo Martin,

… wie auch immer sie visuell realisiert ist …

das Problem ist nicht die Darstellung für Sehende, sondern ein Benutzerinterface zu erstellen, das auch von Nicht-Sehenden benutzt werden kann.

Gruß
Jürgen

[Der Martin]

Hi Jürgen,

… wie auch immer sie visuell realisiert ist …

das Problem ist nicht die Darstellung für Sehende, sondern ein Benutzerinterface zu erstellen, das auch von Nicht-Sehenden benutzt werden kann.

das hatte ich schon verstanden. Aber da ich mich in diesem Teilaspekt kaum auskenne, habe ich den bewusst außen vor gelassen. Ich wollte darauf hinaus, dass ein Button von der Semantik her nicht die erste Wahl für Toggle-Operationen ist, eine Checkbox dagegen schon eher.
Den Einwand, dass Checkboxen und Radiobuttons auf das Erfassen und Versenden von Daten hindeuten, habe ich zur Kenntnis genommen, halte das aber für eine zu eingeschränkte Sicht. Es sind doch in erster Linie Steuerelemente.

Live long and pros healthy,
 Martin

[Matthias Apsel]

Hallo Der Martin,

Den Einwand, dass Checkboxen und Radiobuttons auf das Erfassen und Versenden von Daten hindeuten, habe ich zur Kenntnis genommen, halte das aber für eine zu eingeschränkte Sicht. Es sind doch in erster Linie Steuerelemente.

Außerhalb des Webumfelds ja.

Bis demnächst
Matthias

[fietur]

Das Webumfeld ist nicht gerade ein Paradebeispiel dafür, seinen eigenen Vorgaben gut zu folgen.

Beispiel? table.

Und das tue ich meinen Nutzern immer noch lieber an als vieles andere, was auf der nächsten Plattform dann schon wieder nicht funktioniert.

Heißt ja nicht, dass es nicht anders wünschenswerter wäre. Und es hat sich ja durchaus etwas getan. So gibt es ja das Gewünschte: details und open. Müsste halt nur funktionieren.

Wenn es das nicht tut, ist das ein Aufruf, kreativ zu werden.

[Gunnar Bittersmann]

@@Der Martin

Aber da ich mich in diesem Teilaspekt kaum auskenne, habe ich den bewusst außen vor gelassen.

Der Satz hätte nach dem Komma mit „werde ich mich gleich mal damit befassen“ weitergehen gesollt.

Ich wollte darauf hinaus, dass ein Button von der Semantik her nicht die erste Wahl für Toggle-Operationen ist

Ein Button ist die erste Wahl für jedwege Operationen.^[1]

Checkboxen und Radiobuttons … sind doch in erster Linie Steuerelemente.

<input type="checkbox"> und <input type="radio"> sind doch in erster Linie Eingabeelemente.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

---

1. außer denen, wo ein Skalpell die erste Wahl ist ↩︎

[Der Martin]

Hallo,

Aber da ich mich in diesem Teilaspekt kaum auskenne, habe ich den bewusst außen vor gelassen.

Der Satz hätte nach dem Komma mit „werde ich mich gleich mal damit befassen“ weitergehen gesollt.

ja, wenn ich immer noch aktiv in der Webentwicklung tätig wäre. Bin ich aber nicht, bzw. nur für den eigenen Bedarf. Daher sehe ich das eher unter "könnte mich bei Gelegenheit mal damit befassen".

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Wenn man einen Button zum Toggeln "missbrauchen" möchte, dann müsste man auch die Beschriftung je nach Zustand wechseln.

Kommt drauf an, wie der Button beschriftet ist. Wenn die Beschriftung zustands-agnostisch ist, dann nicht. Der jeweilige Zustand wird nicht durch die Änderung der Beschriftung, sondern durch Änderung der Gestaltung des Buttons sowie durch Änderung des aria-pressed-Attributs ausgedrückt.

Ansonsten geht Heydon in seinem Artikel zu Toggle-Buttons (Buttons, jawohl!) auch auf die Änderung der Beschriftung ein.

Übrigens gibt’s das Buch jetzt für zahle, was es dir wert ist.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[JürgenB]

Hallo,

hast du schon mal versucht, dem Menü einen Scrollbalken zu geben?

Ich mache das mit max-height (z.B. 90vh oder mit calc berechnen) und overflow-y:auto.

Gruß
Jürgen