Tworzenie trwałych prezentacji aplikacji

Funkcje internetowe: Popover Pozycjonowanie kotwicy

Prezentacje wprowadzające wymagają nakładek, które pozostają widoczne, gdy użytkownicy wchodzą w interakcję z wyróżnionymi funkcjami. W przeciwieństwie do automatycznych wyskakujących okienek ręczne wyskakujące okienka nie zamykają się, gdy użytkownik kliknie w innym miejscu na stronie. Połączenie elementu popover="manual" z pozycjonowaniem zakotwiczonym CSS umożliwia tworzenie niemodalnych, powiązanych kroków prezentacji.

HTML

<div id="feature-target">Highlight this feature</div>

<!-- MANDATORY: Enforce overlay dialog semantics and accessible name bindings -->
<div id="tour-step" popover="manual" role="dialog" aria-labelledby="tour-title">
  <!-- Assume an <h1> precedes this element in the full document outline -->
  <h2 id="tour-title">Step 1</h2>
  <p>Learn how to use this feature.</p>
  <button popovertarget="tour-step" popovertargetaction="hide">Got it</button>
</div>

CSS

#feature-target {
  anchor-name: --feature-target;
}

#tour-step {
  popover: manual;
  position-anchor: --feature-target;
  position-area: right center;
  inset: auto;
  margin: 1rem;
  padding: 1rem;
  border: 1px solid blue;
  border-radius: 0.5rem;
  background: aliceblue;
}

JavaScript

const tourStep = document.getElementById('tour-step');
tourStep.showPopover();
// MANDATORY: Programmatically route focus into the non-modal popover so keyboard/assistive technology users immediately perceive the new context
tourStep.querySelector('button').focus();

Wskazówki dotyczące implementowania

  • OBOWIĄZKOWO: użyj popover="manual", aby zapobiec przypadkowemu zamknięciu kroku prezentacji podczas interakcji z użytkownikiem.
  • OBOWIĄZKOWO: oznacz kontener za pomocą role="dialog" i połącz jego nagłówek za pomocą aria-labelledby.
  • OBOWIĄZKOWO: natychmiast po otwarciu okna popover przenieś fokus programowy do jego wnętrza, aby zapobiec porzuceniu fokusu.
  • UŻYWAJ pozycjonowania zakotwiczonego CSS, aby powiązać krok prezentacji z konkretną funkcją, która jest wyjaśniana.
  • UMIEŚĆ w okienku popover wyraźny przycisk „Zamknij” lub „Dalej”, który używa popovertargetaction="hide".

Strategie zastępcze

Kreacje zastępcze i obsługa wyskakujących okienek w przeglądarkach

Interfejs Popover API to głównie progresywne ulepszanie, ale jego definiujące zachowania – promowanie warstwy górnej, lekkie odrzucanie i wywoływanie popovertarget – nie mają odpowiednika tylko w CSS. Starsze przeglądarki wymagają polyfilla lub ręcznego rozwiązania zastępczego, jeśli nie chcesz go dostarczać.

Polyfill: aby obsługiwać atrybut popover w starszych przeglądarkach, warunkowo wczytuj @oddbird/popover-polyfill. OBOWIĄZKOWO: wykryj funkcję, sprawdzając właściwość popover w HTMLElement.prototype, i wczytaj polyfill tylko wtedy, gdy brakuje obsługi natywnej – NIE wczytuj go bezwarunkowo.

Za pomocą bundlera lub mapy importu:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

Bez bundlera, importuj z sieci CDN w tagu <script type="module">:

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

Uwaga dotycząca stylów: polyfill nie może zdefiniować prawdziwej pseudoklasy :popover-open, więc zamiast tego stosuje klasę .\:popover-open. OBOWIĄZKOWO: połącz te 2 właściwości za pomocą :is() lub :where(), w przeciwnym razie przeglądarki, które nie obsługują :popover-open, odrzucą całą regułę:

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

Możesz też użyć position: fixed i ręcznie obliczyć współrzędne za pomocą getBoundingClientRect() lub polegać na domyślnym pozycjonowaniu za pomocą inset: auto, jeśli jest to akceptowalne w danym przypadku użycia.

anchor-positioning

Aby zapewnić obsługę przeglądarek bez pozycjonowania zakotwiczonego, możesz użyć kodu polyfill lub kreacji zastępczej w czystym CSS.

Opcja 1. Kod polyfill jako rozwiązanie zastępcze

Do emulacji pozycjonowania zakotwiczonego można użyć kodu polyfill @oddbird/css-anchor-positioning. Nie obsługuje on niejawnych kotwic, więc MUSISZ dodać do aktywatora jawne nazwy kotwic. Dodatkowo position-area nie jest obsługiwany w przypadku wyskakujących okienek przez polyfill, więc zamiast position-area MUSISZ używać anchor() w przypadku odpowiednich wcięć.

<script type="module">
  if (!CSS.supports('anchor-name: --foo')) {
    await import("https://unpkg.com/@oddbird/css-anchor-positioning");
  }
</script>

#tour-step {
  /* If using the anchor positioning polyfill with a popover, DO use `anchor()` functions instead of `position-area`. */
  left: anchor(right);
  top: anchor(top);
}
Opcja 2. Zastępczy kod CSS bez polyfilla

Jeśli nie chcesz używać kodu polyfill, możesz ustawić domyślną pozycję etykietki na stałą pozycję u dołu widocznego obszaru za pomocą @supports not.

@supports not (anchor-name: --foo) {
  #tour-step {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
}