Toast-Benachrichtigungen sind temporäre Statusmeldungen. Im Gegensatz zu Menüs sollten sie sich nicht schließen, wenn ein Nutzer mit anderen Teilen der Seite interagiert. Der Status popover="manual" ist ideal, da er kein „Light Dismiss“-Verhalten hat und mehrere Benachrichtigungen gleichzeitig angezeigt werden können.
Implementierungsrichtlinien
- OBLIGATORISCH: Verwenden Sie popover="manual", damit die Benachrichtigung sichtbar bleibt, bis sie explizit geschlossen wird oder ein Skript sie schließt.
- DO use a container to manage the stacking of multiple toasts. Da Popovers in der obersten Ebene den z-Index des übergeordneten Elements ignorieren, müssen Sie sie einzeln oder innerhalb einer gemeinsamen Layoutgruppe positionieren.
- DO use sibling-index() to add margin between toast notifications so that items lower in the stack are visible.
- DO provide an explicit "Close" button within the toast using popovertargetaction="hide".
- DO use JavaScript for auto-dismissal timers (e.g., calling hidePopover() after 3000ms).
- DO utilize transition-behavior: allow-discrete to animate the entry and exit from the Top Layer.
Fallback-Strategien
Fallbacks und Browserunterstützung für Popover
Die Popover API ist größtenteils eine progressive Verbesserung, aber ihre definierenden Verhaltensweisen – die Hochstufung auf die oberste Ebene, das Schließen durch Klicken außerhalb des Popovers und der Aufruf von popovertarget – haben kein CSS-Äquivalent. Ältere Browser benötigen ein Polyfill oder ein manuelles Fallback, wenn Sie kein Polyfill bereitstellen möchten.
Polyfill: Damit das Attribut popover in älteren Browsern unterstützt wird, lade @oddbird/popover-polyfill bedingt. OBLIGATORISCH: Prüfe, ob die Funktion unterstützt wird, indem du nach der Property popover in HTMLElement.prototype suchst, und lade das Polyfill nur, wenn die native Unterstützung fehlt. Lade es NICHT bedingungslos.
Mit einem Bundler oder einer Importzuordnung:
// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
import("@oddbird/popover-polyfill");
}
Ohne Bundler importieren Sie aus einem CDN in einem <script type="module">:
<script type="module">
if (!("popover" in HTMLElement.prototype)) {
import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
}
</script>
Einschränkung beim Styling: Das Polyfill kann die echte Pseudoklasse :popover-open nicht definieren, daher wird stattdessen die Klasse .\:popover-open angewendet. OBLIGATORISCH: Kombinieren Sie die beiden mit :is() oder :where(). Andernfalls verwerfen Browser, die :popover-open nicht unterstützen, die gesamte Regel:
[popover]:is(:popover-open, .\:popover-open) {
display: block;
}
Alternativ können Sie für einen Legacy-Fallback ohne Polyfill position: fixed verwenden und die Koordinaten manuell über getBoundingClientRect() berechnen oder die Standardpositionierung mit inset: auto verwenden, wenn das für den Anwendungsfall akzeptabel ist.
sibling-index()
- Hinweis: Wenn „sibling-index()“ nicht unterstützt wird, verwenden Sie den Operator
+, um den Abstand manuell hinzuzufügen. D.h.popover + popover { margin-top: 1rem }
anchor-positioning
- Anleitung: Verwenden Sie das CSS Anchor Positioning Polyfill. Für einen Fallback ohne Polyfill können Sie den Tooltip mit
@supports not (anchor-name: --foo)standardmäßig an einer festen Position am unteren Rand des Darstellungsbereichs platzieren.
transition-behavior
- Anleitung: Wenn „transition-behavior“ nicht unterstützt wird, verwenden Sie JavaScript, um Animationen über Klassen hinzuzufügen, wenn das Toast-Element ein- und ausgeblendet wird.