Konuma Duyarlı İpuçları

Web özellikleri: Sabit konum kapsayıcı sorguları Pop-up

CSS Anchor Positioning ile ipuçları veya popover'lar oluştururken tarayıcı, görüntü alanını aşarsa öğeyi otomatik olarak yedek konuma "çevirebilir". Bu durumda, konumlandırılmış içeriğin stilini ayarlamak isteyebilirsiniz. Örneğin, konumlandırılmış içerikten sabitleyiciye işaret eden bir oku yeniden konumlandırabilirsiniz.

Sabitlenmiş kapsayıcı sorguları, bir öğenin etkin konumlandırma durumunu sorgulamanıza ve stilleri buna göre uygulamanıza olanak tanıyarak bu sorunu çözer. Görüntü alanı çarpışma çevirmesiyle (yön oku yeniden biçimlendirmesi olmadan) genel sabitlenmiş açılır liste ve açılır pencere konumlandırması için Görüntü Alanına Duyarlı Açılır Listeler bölümüne bakın.

Sorun

Varsayılan olarak bağlantı noktasının üzerinde görünen bir ipucu düşünün. Alt kısmında "aşağı" ok bulunur. Kullanıcı sayfayı kaydırırsa ve ipucu, sabitleyicinin altında görünecek şekilde dönerse ok artık yanlış yönü gösterir ve ipucunun yanlış tarafında yer alır.

Çözüm: Sabitlenmiş container sorguları

Konumlandırılmış öğenizde container-type: anchored değerini ayarlayarak öğeyi kendi sabit konumlu durumunu bilen bir sorgu kapsayıcısına dönüştürürsünüz. Ardından, alt öğelerini veya sözde öğelerini güncellemek için @container anchored() sorgusunu kullanabilirsiniz.

1. İpucu ve tetikleyici oluşturma

İpucu oluşturmak için Popover API'yi kullanın. Popover'ı popovertarget aracılığıyla çağırmak, tetikleyici düğmeyle otomatik olarak dolaylı bir sabitleyici bağlantısı oluşturur. Bu nedenle, açık bir anchor-name veya position-anchor gerekmez.

<button popovertarget="tooltip" id="anchor" aria-describedby="tooltip">anchor</button>
<div id="tooltip" popover role="tooltip"></div>

Yalnızca sabit konumlandırma destekleniyorsa sabit konumlandırmayla kullanılacak popover içe yerleştirme ve kenar boşluğu stillerini sıfırlayın.

@supports (anchor-name: --my-anchor) {
  [popover] {
    inset: auto;
    margin: unset;
  }
}

2. Kapsayıcıyı ayarlama

Konumlandırılan öğeye container-type: anchored uygulayın. Çevirme davranışını etkinleştirmek için bu öğede position-try-fallbacks da tanımlanmalıdır.

#tooltip {
  position: fixed;
  position-area: block-start;
  position-try-fallbacks: flip-block;

  /* Enable anchored container queries */
  container-type: anchored;
}

3. Yedek şekle göre stil

Belirli bir yedek etkin olduğunda stilleri uygulamak için @container anchored(fallback: <value>) kullanın.

Tüm kapsayıcı sorguları gibi @container de yalnızca kapsayıcının alt öğelerini biçimlendirebilir. Okları oluşturmak için yaygın olarak kullanılan bir strateji, alt öğe olarak değerlendirilen ve doğrudan stillendirilebilen ::before ve ::after sözde öğelerini kullanmaktır. Ancak ipucunun kendisini biçimlendirmek için (4. adımda görüldüğü gibi) ipucuna bir alt öğe ekleyip oku ::before sözde öğesinde oluşturacağız.

<div id="tooltip" popover role="tooltip">
  <div class="tooltip-content">Tooltip</div>
</div>

.tooltip-content::before {
  /* Default "down" arrow for the 'top' position */
  content: "▼";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 1rem;
}

/* Update to an "up" arrow when the 'flip-block' fallback (bottom) is active */
@container anchored(fallback: flip-block) {
  .tooltip-content::before {
    content: "▲";
    inset-block-start: 0;
    inset-block-end: auto;
  }
}

4. Kapsayıcıyı biçimlendirme

Kapsayıcı döndürüldüğünde kapsayıcının kendi özelliklerini (ör. margin veya background-color) değiştirmeniz gerekiyorsa iç sarmalayıcı öğesi kullanmanız gerekir.

  1. Dış konumlandırılmış öğeye container-type: anchored uygulayın.
  2. @container bloğunun içindeki iç öğeyi hedefleyin.
@container anchored(fallback: flip-block) {
  .tooltip-content {
    border-radius: 0 0 .5rem .5rem;
    margin-block-start: 0.25rem;
  }
}

En iyi uygulamalar

  • Mantıksal yedekleri tercih edin: Sağdan sola ve farklı yazma modlarını otomatik olarak işleyen daha basit sorgular için position-try-fallbacks içinde flip-block ve flip-inline gibi anahtar kelimeler kullanın.
  • Oklar için sözde öğeler kullanın: İpucu okları tamamen dekoratiftir ve ::before veya ::after için mükemmel adaylardır. Bunlar, ek DOM olmadan sabitlenmiş kapsayıcı sorguları aracılığıyla stillendirilebilir.

Yedek stratejiler

Oku uygulanan yedeğe göre konumlandırmak progresif bir geliştirmedir ve yedek konuma tepki vermenin başka bir yolu yoktur. Sabit konum kapsayıcı sorgularını desteklemeyen tarayıcılarda oku gizlemek için @supports (container-type: anchored) ile CSS desteğini test edin.

@supports (container-type: anchored) {
  .tooltip-content::before {
    content: "▼";
  }
}

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.

Popover API'yi desteklemeyen tarayıcılar, sabitleme konumlandırmayı da desteklemez. Bu nedenle, ipucu ekranın ortasında görünür.