Popover (Abgetrennt aus Umstellung auf responsive/Neukonzeption)

[Rolf B]

Dieser Thread ist ein abgetrennter Teilbaum zum Thema Popover aus Gabriele: Umstellung auf responsive Neukonzeption. Den Beitrag selbst habe ich dorthin dupliziert.
-- Rolf

Hallo Gabriele,

eine "ähnliche, triviale Anwendung" habe ich nicht in der Schublade. Eine triviale Webseite verzichtet auf großartiges Layout und stellt alle Elemente untereinander, ohne Nebeneinander oder Popups. Was Du möchtest, ist deutlich mehr als trivial und muss korrekt geplant werden, andernfalls ist die Seite unzugänglich.

Meine Fragen beziehen sich darauf, welche Bedeutung deine Oberflächenelemente haben und wie sie sich verhalten sollen. Wie ich schon sagte: die Antworten auf meine Fragen können starken Einfluss auf das Ergebnis haben. Wenn ich falsche Annahmen treffe, zeige ich Dir ein Musterlayout, an dem Du Dir nachher die Finger brichst, weil die Grundkonzeption nicht passt. Oder das Du nachher mit "Diesen Scheiß haben die Schwachköpfe bei Selfhtml gemacht und es ist völlig unbrauchbar" in die Gegend posaunst.

Was ich zu fragen vergaß: Welche Bedeutung haben "Bild" und "Text" oben links? Ich vermute ein Logo, bzw. zusammen die Wort-Bild Marke des Seitenanbieters. Stimmt das?

Ich habe mal eine Demo gemacht: https://jsfiddle.net/r8q4t6mf/1/

Kommt das Deinen Vorstellungen nahe? Die Breite kannst Du anpassen, indem Du den senkrechten Trennbalken zwischen den Fenstern mit der Maus verschiebst. Ein Bild hatte ich keins zur Hand, darum ist da dieses div mit dem Farbverlauf drin. Aber weil es ein Bild simuliert, habe ich ihm das alt-Attribut verpasst.

Das Hamburger-Menü habe ich mit dem Unicode Zeichen ︙gemacht. Für 3 Streifen gibt's andere Zeichen oder Du machst Dir ein SVG-Bild dazu. Dieser BLÖDE Menübutton zeigt, wie schnell der Aufwand eskaliert, wenn Du eigene Controls auf der Seite haben willst. Aber ohne das ganze Zusatzgeraffel ist der Button für Nutzer von Assistenztechniken nur ein höchst obskures Gebilde, und ein eingebautes Browser-Feature "Menü-Button" gibt's nicht. Mit dem Command- und Popover-API kann man vielleicht etwas machen, aber nach meinem Kenntnisstand funktioniert da die Positionierung der Popovers nicht 100%-ig.

<button type="button">︙</button>

<button type="button" aria-expanded="false" aria-controls="main-menu">
   <span aria-hidden="true">︙</span>
   <span class="visually-hidden">Themenauswahl</span>
</button>

Farben sind eh Schall und Rauch und visualisieren hier höchstens, welches Element wo und wie groß ist. Das Menü ist mit JavaScript gesteuert. Eine Logik, die es auch bei kaputtem/fehlendem JavaScript sichtbar macht, fehlt noch, ist aber für einen Produktiveinsatz eigentlich nötig. Aber damit wird das ganze Gedöns nochmal deutlich komplexer.

Zum Verständnis dessen, was ich gemacht habe, solltest Du das Wiki konsultieren.

Ich behaupte keinesfalls, dass diese Demo die einzige Wahrheit ist. Man kann das auch ganz anders lösen und Perfektion habe ich aus Zeitgründen eh nicht angestrebt.

Rolf

[Gabriele]

Hallo Rolf,

Was ich zu fragen vergaß: Welche Bedeutung haben "Bild" und "Text" oben links? Ich vermute ein Logo, bzw. zusammen die Wort-Bild Marke des Seitenanbieters. Stimmt das?

Ja das stimmt. Aber das ist nicht mein Problem, denn das Bild mit Text existiert ja schon in der zu ändernden Version

Zum Verständnis dessen, was ich gemacht habe, solltest Du das Wiki konsultieren.

Das ist sicher nötig. Aber gerade aus Deinem kleinen Beispiel kann ich schon etwas "abkupfern" und anpassen, ohne mich zunächst durch die umfangreiche grid-Doku zu arbeiten.

Zur Erinnerung: "bin aber in einem Alter, wo man nicht mehr so schnell etwas Neues (Grid, Flexbox und all das andere) lernt!" Ich habe daher nicht die Absicht, alles so zu verstehen, dass ich im Anschluss eigenständig weitere Anwendungen realisieren kann.

Ich hätte ja gerne die bestehende Anwendung verlinkt. Aber der nicht mehr aktive Autor hat dies untersagt, weil er wohl Angst hat, dass die viele Jahre alte Anwendung von Euch zerpflückt wird.

[JürgenB]

Hallo Rolf,

Mit dem Command- und Popover-API kann man vielleicht etwas machen, aber nach meinem Kenntnisstand funktioniert da die Positionierung der Popovers nicht 100%-ig.

zur Positionierung von Popovers mit der Anchor-Technik habe mal eine Testseite gebaut: https://wiki.selfhtml.org/wiki/Benutzer:JürgenB#Test_der_anchor-Technik

mit dem Polyfill funkioniert die Version 4 browserübergreifend. Aber da erfolgt die Verknüpfung mit dem Anchor im HTML und im CSS über eine ID.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

ich habe eine Zeit gebraucht, um diese Ankerei zu verstehen, und ich habe sie entweder noch nicht ganz verstanden oder eine Ankerpositionierung über bottom oder right funktioniert schlichtweg nicht.

Aber position-area ist superschick. Grob angeben, wo es hinsoll, und per Margin feintunen. Wichtig ist nur, dass die übrigen Margins 0 sind, sonst grätscht die Popoverei der Ankerei böse in die Wade.

  <button type="button" popovertarget="main-menu">Menü</button>
  <ul id="main-menu" popover>
  </ul>

#main-nav ul {
  position: absolute;
  position-area: bottom span-left;
  margin:0.2em 0 0 0;
}

Mehr braucht's tatsächlich nicht - durch das Popover wird die Ankerbeziehung zwischen ul und button automagisch hergestellt. In der Breitansicht setze ich position:static, womit der Anker automatisch gekappt wird.

Alles, was ich vorher im Script hatte: Fokussteuerung, Schließen mit Esc, Soft-Dismiss mit Klick außerhalb. Wow.

Was noch fehlt, ist das automatische Schließen nach Klick auf einen der Links im Popover-Menü. Nicht tragisch, es wird eh eine andere Seite geladen, aber wenn man darin Buttons hat, muss man nach Klick doch wieder manüll schließen.

Wenn Du die import()-Funktionsschreibweise nimmst, brauchst Du übrigens auch kein ECMAScript-Modul um den Polyfill zu laden, das geht überall.

Die Popover-Version ist hier: https://jsfiddle.net/5q4b82j0/

Rolf

[JürgenB]

Hallo Rolf,

Die Popover-Version ist hier: https://jsfiddle.net/5q4b82j0/

das funktioniert aber nicht im Safari, wahrscheinlich nur im Chrome/Edge.

Gruß
Jürgen

[Gabriele]

Diese Schmankerln, die kontrovers diskutiert werden, werde ich alle nicht benötigen.

[Rolf B]

Hallo Gabriele,

du brauchst ein Popup-Menü für den schmalen Modus. Es sei denn, du machst es wie unser Wiki und schiebst das Menü im schmalen Modus einfach nach unten.

Die Technik aus dem Popover-API ermöglicht das Popup-Menü ohne JavaScript, sobald Safari und Firefox so weit sind. Insofern solltest Du das zumindest auf dem Schirm behalten.

Rolf

[JürgenB]

Hallo Rolf,

Die Technik aus dem Popover-API ermöglicht das Popup-Menü ohne JavaScript, sobald Safari und Firefox so weit sind. Insofern solltest Du das zumindest auf dem Schirm behalten.

wenn die Navigation keine Untermemüs hat und am Rand kleben darf, geht das schon mit absoluter Positionierung. Nur die Positionierung relativ zu einem Anker geht mit dem Polyfill etwas umständlich, ist aber auch machbar.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

nach meinen Beobachtungen ist es so:

Wenn ich ohne popover arbeite, ist das position:absolute Element von sich aus relativ zu dem position:relative Elternelement positioniert und dadurch mit erträglichem Aufwand in der Nähe des Buttons zu halten. Ich habe allerdings magic numbers für die Größe des Buttons.

Wenn ich mit popover arbeite, ignoriert das position:absolute-Element sein position:relative Elternelement. Ohne Verankerung wird es nur noch relativ zu einem Rechteck positioniert, das so groß ist wie der Viewport, aber mit dem Dokument mitscrollt. Heißt: Wenn ich beispielsweise dies habe:

• einen Viewport der Höhe 800px
• einen Body mit einer realen Höhe 1000px - also mit Scrollbar, mit Scrollbar ganz oben
• ein Popover mit margin: auto auto 0 auto;

dann das Popover öffne und das Dokument zum Ende scrolle, verschiebt das Popover sich die 200px mit. Wenn ich das Popover in dieser Scrollposition öffne, erscheint es 200px über dem unteren Rand. Eine Positionierung basierend auf dem Viewport erreicht man mit position:fixed.

Ich versuche mal, diesen Teilbaum aus der Diskussion abzutrennen.

Rolf

[JürgenB]

Hallo Rolf,

ich hab noch eine Testseite zur Positionierung von Popovers ohne anchor-Technik erstellt:

https://wiki.selfhtml.org/wiki/Benutzer:JürgenB#Test_der_popover-Technik

Hier positioniere ich die popover nur mit margin:0 und left/top. Default ist absolute Positionierung, bei der die popover nicht mitscrollen. Bei position:static wird das popover mit gescrollt.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

der Default für [popover] ist position:fixed, weshalb sie nicht mitscrollen. Ein Popover mit position:static ist so eine Sache, damit hebst Du das Anker-Feature auf (es ist nur für absolut und fix positionierte Elemente aktiv).

Positionsangabe über bottom oder right funktioniert auch in diesem Beispiel nicht, weder in Chrome noch in Firefox. Im Inspektor wird es nicht als falsch markiert, und es sollte doch laut Spec funktionieren, oder?

Was mit auch noch auffällt: Matthias hat unter "Anchor Positioning" geschrieben, man müsse den Polyfill nicht nur laden, sondern auch aktivieren:

<script type="module">
  if (!("anchorName" in document.documentElement.style)) {
    const { default: polyfill } = await import("https://unpkg.com/@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js");

    polyfill(true);
  }
</script>

Das machst Du nicht, du importierst nur und belässt es dabei. Ist der Aufruf der polyfill-Funktion nicht mehr nötig? Ich habe mir mal angeschaut, was aus dem import als Modul herauskommt, da ist kein Default-Export drin.

Abgesehen davon braucht man auch kein type="module" Script als Träger des Polyfills:

import("https://unpkg.com/@oddbird/css-anchor-positioning")
.then(modul => {
   // Callback startet wenn Polyfill geladen ist. modul.default ist leer.
});

Oder, mit manuellem Aufruf wenn man Optionen setzen will:

import("https://unpkg.com/@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js")
.then(modul => {
   // Callback startet wenn Polyfill geladen ist. modul.default enthält
   // die polyfill-Funktion
   modul.default({
      ...
   });
});

Rolf

[JürgenB]

Hallo Rolf,

Was mit auch noch auffällt: Matthias hat unter "Anchor Positioning" geschrieben, man müsse den Polyfill nicht nur laden, sondern auch aktivieren:

das ist nicht (mehr?) nötig. Der Polyfill läuft in meinem Test, sonst würde „V4“ ja nicht funktionieren.

Gruß
Jürgen

[Mitleser]

Hallo,

Ich habe mal eine Demo gemacht: https://jsfiddle.net/r8q4t6mf/1/

ich habe mir einmal das Beispiel angeschaut und bin an dem Javascript hängengeblieben. Was macht dieses? Ich habe es einmal gelöscht, dann "run" gedrückt und keine Änderung festgestellt - das Menu ging trotzdem auf.

[Rolf B]

Hallo Mitleser,

das JavaScript steuert das Popup. Ohne das Script passiert nichts. Warum bei Dir das Menü trotzdem aufgeht, kann ich nicht sagen - hast Du den RUN-Button richtig erwischt?

Wenn ich das mache, was Du beschreibst: Script löschen, Run drücken, geht das Menü bei mir nicht mehr auf.

Rolf