Kalıcı Uygulama Turları Oluşturma

Web özellikleri: Popover Sabit konumlandırma

Oryantasyon turları, kullanıcılar vurgulanan özelliklerle etkileşimde bulunurken kalıcı olan yer paylaşımları gerektirir. Otomatik popover'ların aksine, manuel popover'lar kullanıcı sayfada başka bir yeri tıkladığında kapanmaz. popover="manual" ile CSS bağlantı noktası konumlandırmayı birleştirerek kalıcı olmayan, bağlı tur adımları oluşturabilirsiniz.

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();

Uygulama Kuralları

  • ZORUNLU: Kullanıcı etkileşimi sırasında tur adımının yanlışlıkla kapanmasını önlemek için popover="manual" kullanın.
  • ZORUNLU: Kapsayıcıyı role="dialog" ile işaretleyin ve başlığını aria-labelledby aracılığıyla bağlayın.
  • ZORUNLU: Odaklanmanın kaybolmasını önlemek için açıldıktan hemen sonra programatik odağı popover'ın içine kaydırın.
  • Tur adımını açıklanan belirli özelliğe bağlamak için CSS sabitleme konumlandırmasını KULLANIN.
  • popovertargetaction="hide" kullanan popover'da açık bir "Kapat" veya "Sonraki" düğmesi EKLEYİN.

Yedek stratejiler

Popover için yedekler ve tarayıcı desteği

Popover API çoğunlukla progresif geliştirme ile ilgilidir ancak tanımlayıcı davranışlarının (üst katman tanıtımı, hafif kapatma ve popovertarget çağrısı) yalnızca CSS'ye dayalı bir eşdeğeri yoktur. Eski tarayıcılar için polyfill veya polyfill kullanmak istemiyorsanız manuel yedek gerekir.

Polyfill: Eski tarayıcılarda popover özelliğini desteklemek için @oddbird/popover-polyfill öğesini koşullu olarak yükleyin. ZORUNLU: HTMLElement.prototype üzerinde popover özelliğini kontrol ederek özelliği tespit edin ve polyfill'i yalnızca yerel destek eksik olduğunda yükleyin. Koşulsuz olarak YÜKLEMEYİN.

Paketleyici veya içe aktarma eşlemesiyle:

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

Paketleyici olmadan, <script type="module"> içindeki bir CDN'den içe aktarın:

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

Stil uyarısı: Polyfill, gerçek :popover-open sözde sınıfını tanımlayamadığı için bunun yerine .\:popover-open sınıfını uygular. ZORUNLU: İkisini :is() veya :where() ile birleştirin. Aksi takdirde, :popover-open içermeyen tarayıcılar kuralın tamamını siler:

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

Alternatif olarak, polyfill içermeyen eski bir yedek için position: fixed kullanın ve koordinatları getBoundingClientRect() aracılığıyla manuel olarak hesaplayın veya kullanım alanına uygunsa inset: auto ile varsayılan konumlandırmayı kullanın.

anchor-positioning

Sabit konumlandırma özelliği olmayan tarayıcıları desteklemek için polyfill veya saf CSS yedek kullanabilirsiniz.

1. Seçenek: Polyfill Yedek

Sabit konumlandırmayı taklit etmek için @oddbird/css-anchor-positioning polyfill kullanılabilir. Örtük sabitleyicileri desteklemediğinden tetikleyiciye açık sabitleyici adları eklemeniz GEREKİR. Ayrıca, polyfill tarafından popover'larda position-area desteklenmez. Bu nedenle, position-area yerine istediğiniz iç kısımlarda anchor() kullanmanız GEREKİR.

<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);
}
2. seçenek: Polyfill olmayan CSS yedeği

Polyfill kullanmak istemiyorsanız @supports not kullanarak ipucunu varsayılan olarak görüntü alanının alt kısmında sabit bir konuma ayarlayabilirsiniz.

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