SELF-Treffen in Mannheim 2025
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-anchor.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Anchor</title>
<style>
code {
display: grid;
grid-template-columns: auto auto;
grid-gap: 0.3em;
}
pre {
border: thin solid black;
tab-size: 2;
}
[popover] {
top: anchor(top);
left: anchor(right);
margin: 0;
}
#d1 , #d2, #d3 {
position-anchor: auto;
}
#b4 {
anchor-name: --b4
}
#d4 {
position-anchor: --b4;
}
.toggle-button {
anchor-name: --toggle-button;
}
#d5, #d6 {
position-anchor: --toggle-button;
}
</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>
<h1>Test Anchor (mit Polyfill von oddbird)</h1>
<div>
<button popovertarget="d1" popovertargetaction="toggle">V1</button>
<div id="d1" popover>V1</div>
</div>
<div>
<button popovertarget="d2" popovertargetaction="toggle">V2</button>
<div id="d2" popover anchor>V2</div>
</div>
<div>
<button id="b3" popovertarget="d3" popovertargetaction="toggle">V3</button>
<div id="d3" popover anchor="b3">V3</div>
</div>
<div>
<button id="b4" popovertarget="d4" popovertargetaction="toggle">V4</button>
<div id="d4" popover>V4</div>
</div>
<div>
<button id="b5" class="toggle-button" popovertarget="d5" popovertargetaction="toggle">V5</button>
<div id="d5" popover>V5</div>
</div>
<div>
<button id="b6" class="toggle-button" popovertarget="d6" popovertargetaction="toggle">V6</button>
<div id="d6" popover>V6</div>
</div>
<code>
<pre>
<style>
[popover] {
top: anchor(top);
left: anchor(right);
margin: 0;
}
#d1 , #d2, #d3 {
position-anchor: auto;
}
#b4 {
anchor-name: --b4
}
#d4 {
position-anchor: --b4;
}
.toggle-button {
anchor-name: --toggle-button;
}
#d5, #d6 {
position-anchor: --toggle-button;
}
</style>
</pre>
<pre>
<div>
<button popovertarget="d1" popovertargetaction="toggle">V1</button>
<div id="d1" popover>V1</div>
</div>
<div>
<button popovertarget="d2" popovertargetaction="toggle">V2</button>
<div id="d2" popover anchor>V2</div>
</div>
<div>
<button id="b3" popovertarget="d3" popovertargetaction="toggle">V3</button>
<div id="d3" popover anchor="b3">V3</div>
</div>
<div>
<button id="b4" popovertarget="d4" popovertargetaction="toggle">V4</button>
<div id="d4" popover>V4</div>
</div>
<div>
<button id="b5" class="toggle-button" popovertarget="d5" popovertargetaction="toggle">V5</button>
<div id="d5" popover>V5</div>
</div>
<div>
<button id="b6" class="toggle-button" popovertarget="d6" popovertargetaction="toggle">V6</button>
<div id="d6" popover>V6</div>
</div>
</pre>
</code>
</body>
</html>
