SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:Test-popover-verschachtelt anchor.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test verschachtelte Popover mit Anchor positioniert</title> <style> [popover] { top: anchor(top); left: anchor(right); margin: 0; } #u1_toggle { anchor-name: --u1_toggle; } #u1 { position-anchor: --u1_toggle; } #u11_toggle { anchor-name: --u11_toggle; } #u11 { position-anchor: --u11_toggle; } #u12_toggle { anchor-name: --u12_toggle; } #u12 { position-anchor: --u12_toggle; }
</style>
<script type="module"> // Polyfill für anchor: https://github.com/oddbird/css-anchor-positioning?tab=readme-ov-file if (!("anchorName" in document.documentElement.style)) { import("https://unpkg.com/@oddbird/css-anchor-positioning"); console.log('Polyfill laden'); } </script>
</head>
<body>
Test verschachtelte Popover mit Anchor positioniert
(mit Polyfill von oddbird)
<button id="u1_toggle" popovertarget="u1" popovertargetaction="toggle">U1</button>
-
<button id="u11_toggle" popovertarget="u11" popovertargetaction="toggle">U11</button>
- U111
- U112
-
<button id="u12_toggle" popovertarget="u12" popovertargetaction="toggle">U12</button>
- U121
- U122
</body>
</html>
