CSS bağlayıcı konumlandırması ile öğeleri birbirine bağlama

Jhey Tompkins

Şu anda bir öğeyi başka bir öğeye nasıl bağlarsınız? Konumlarını izlemeyi deneyebilir veya bir tür sarmalayıcı öğesi kullanabilirsiniz.

<!-- index.html -->
<div class="container">
  <a href="/link" class="anchor">I’m the anchor</a>
  <div class="anchored">I’m the anchored thing</div>
</div>

/* styles.css */
.container {
  position: relative;
}
.anchored {
  position: absolute;
}

Bu çözümler genellikle ideal değildir. JavaScript'e veya ek işaretlemeye ihtiyaç duyarlar. CSS anchor positioning API, öğeleri bağlamak için bir CSS API sağlayarak bu sorunu çözmeyi amaçlar. Bir öğeyi diğer öğelerin konumuna ve boyutuna göre konumlandırma ve boyutlandırma olanağı sunar.

Resimde, ipucu anatomisini ayrıntılı olarak gösteren bir tarayıcı penceresi taslağı gösterilmektedir.

Tarayıcı desteği

CSS anchor positioning API'yi Chrome Canary'da "Deneysel Web Platformu Özellikleri" işaretinin arkasından deneyebilirsiniz. Bu işareti etkinleştirmek için Chrome Canary'i açıp chrome://flags adresini ziyaret edin. Ardından "Deneysel web platformu özellikleri" işaretini etkinleştirin.

Oddbird ekibi tarafından geliştirilmekte olan bir polyfill de mevcuttur. github.com/oddbird/css-anchor-positioning adresindeki deposu kontrol edin.

Sabitleme desteğini şu şekilde kontrol edebilirsiniz:

@supports(anchor-name: --foo) {
  /* Styles... */
}

Bu API'nin hâlâ deneysel aşamada olduğunu ve değişebileceğini unutmayın. Bu makalede, önemli bölümler genel hatlarıyla ele alınmaktadır. Mevcut uygulama, CSS Çalışma Grubu spesifikasyonu ile de tamamen uyumlu değildir.

Sorun

Bunu neden yapmanız gerekir? Bu API'nin öne çıkan kullanım alanlarından biri, ipuçları veya ipucu benzeri deneyimler oluşturmaktır. Bu durumda, ipucu metnini atıfta bulunduğu içeriğe bağlamak isteyebilirsiniz. Genellikle bir öğeyi başka bir öğeye bağlamanın bir yolu gerekir. Ayrıca, sayfayla etkileşim kurmanın bu bağlantıyı kesmemesini de beklersiniz (ör. kullanıcı kullanıcı arayüzünü kaydırır veya yeniden boyutlandırır).

Sorunun bir diğer kısmı da, bağlı öğenin görünümde kalmasını sağlamaktır. Örneğin, bir ipucu açarsanız ve bu ipucu, görüntü alanı sınırları tarafından kırpılırsa. Bu durum kullanıcılar için iyi bir deneyim olmayabilir. İpucu'nun uyarlanmasını istiyorsunuz.

Mevcut çözümler

Şu anda soruna farklı yaklaşımlar uygulayabilirsiniz.

İlk olarak, temel "Yansıtıcıyı sarmalama" yaklaşımını ele alalım. Her iki öğeyi de bir kapsayıcıya sararsınız. Ardından, position simgesini kullanarak ipuçlarını sabitleyiciye göre konumlandırabilirsiniz.

<div class="containing-block">
  <div class="tooltip">Anchor me!</div>
  <a class="anchor">The anchor</a>
</div>

.containing-block {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}
.

Kapsayıcıyı taşıyabilirsiniz. Bu durumda, çoğu öğe istediğiniz yerde kalır.

Sabitlediğiniz öğenin konumunu biliyorsanız veya bir şekilde takip edebiliyorsanız başka bir yaklaşım da kullanabilirsiniz. Özel mülklerle birlikte ipucunıza iletebilirsiniz.

<div class="tooltip">Anchor me!</div>
<a class="anchor">The anchor</a>

:root {
  --anchor-width: 120px;
  --anchor-top: 40vh;
  --anchor-left: 20vmin;
}

.anchor {
  position: absolute;
  top: var(--anchor-top);
  left: var(--anchor-left);
  width: var(--anchor-width);
}

.tooltip {
  position: absolute;
  top: calc(var(--anchor-top));
  left: calc((var(--anchor-width) * 0.5) + var(--anchor-left));
  transform: translate(-50%, calc(-100% - 10px));
}
.

Ancak ankrajınızın konumunu bilmiyorsanız ne olur? Muhtemelen JavaScript ile müdahale etmeniz gerekir. Aşağıdaki kodda olduğu gibi bir işlem yapabilirsiniz ancak bu durumda stillerinizin CSS'den JavaScript'e sızmaya başladığı anlamına gelir.

const setAnchorPosition = (anchored, anchor) => {
  const bounds = anchor.getBoundingClientRect().toJSON();
  for (const [key, value] of Object.entries(bounds)) {
    anchored.style.setProperty(`--${key}`, value);
  }
};

const update = () => {
  setAnchorPosition(
    document.querySelector('.tooltip'),
    document.querySelector('.anchor')
  );
};

window.addEventListener('resize', update);
document.addEventListener('DOMContentLoaded', update);

Bu durum bazı soruların ortaya çıkmasına neden olur:

  • Stilleri ne zaman hesaplayacağım?
  • Stilleri nasıl hesaplarım?
  • Stilleri ne sıklıkta hesaplamalıyım?

Bu çözüm sorunu çözdü mü? Kullanım alanınız için uygun olabilir ancak bir sorun var: Çözümümüz uyum sağlamaz. Yanıt vermiyor. Sabitlenmiş öğem görüntü alanı tarafından kesilirse ne olur?

Şimdi buna tepki verip vermeyeceğinize ve nasıl tepki vereceğinize karar vermeniz gerekiyor. Sormanız ve vermeniz gereken karar sayısı artmaya başlıyor. Tek yapmanız gereken bir öğeyi diğerine sabitlemektir. İdeal bir dünyada, çözümünüz çevresine uyum sağlar ve çevresine tepki verir.

Bu sorunların bir kısmını hafifletmek için size yardımcı olacak bir JavaScript çözümü kullanabilirsiniz. Bu, projenize bağımlılık ekleme maliyetine neden olur ve bunları nasıl kullandığınıza bağlı olarak performans sorunlarına yol açabilir. Örneğin, bazı paketler konumu doğru tutmak için requestAnimationFrame kullanır. Bu nedenle, ekibinizle birlikte paketi ve yapılandırma seçeneklerini incelemeniz gerekir. Sonuç olarak, sorularınızın ve kararlarınızın sayısı azalmaz, ancak değişebilir. Bu, CSS ankrajı konumlandırmasının "neden" kısmına aittir. Bu sayede, konumu hesaplarken performans sorunları hakkında düşünmek zorunda kalmazsınız.

Bu sorun için popüler bir paket olan "floating-ui"yi kullanmaya yönelik kod aşağıdaki gibi görünebilir:

import {computePosition, flip, offset, autoUpdate} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.2.1/+esm';

const anchor = document.querySelector('.anchor')
const tooltip = document.querySelector('.tooltip')

const updatePosition = () => {  
  computePosition(anchor, tooltip, {
    placement: 'top',
    middleware: [offset(10), flip()]
  })
    .then(({x, y}) => {
      Object.assign(tooltip.style, {
        left: `${x}px`,
        top: `${y}px`
      })
  })
};

const clean = autoUpdate(anchor, tooltip, updatePosition);

Bu kodu kullanan demoda ankrajı yeniden konumlandırmayı deneyin.

bakın.

"İpucu" beklediğiniz gibi çalışmayabilir. Y ekseninde görüntü alanının dışına çıkıldığında tepki verir ancak x ekseninde tepki vermez. Dokümanları inceleyerek size en uygun çözümü bulabilirsiniz.

Ancak projeniz için uygun bir paket bulmak çok zaman alabilir. Bu, ek kararlar gerektirir ve istediğiniz gibi çalışmazsa can sıkıcı olabilir.

Sabitleme konumlandırmasını kullanma

CSS sabitleme konumlandırma API'sini girin. Amaç, stillerinizi CSS'nizde tutmak ve almanız gereken karar sayısını azaltmaktır. Aynı sonuca ulaşmak istiyorsunuz ancak amaç geliştirici deneyimini iyileştirmektir.

  • JavaScript gerekmez.
  • Tarayıcının, yönlendirmenize göre en iyi konumu bulmasına izin verin.
  • Üçüncü taraf bağımlılıkları yok
  • Sarmalayıcı öğesi yok.
  • En üst katmandaki öğelerle çalışır.

Yukarıda çözmeye çalıştığımız sorunu yeniden oluşturup ele alalım. Bunun yerine, demir atmış bir tekneyi örnek olarak kullanabilirsiniz. Bunlar, sabitlenmiş öğeyi ve sabitleyiciyi temsil eder. Su, kapsayıcı bloğu temsil eder.

Öncelikle sabitlemeyi nasıl tanımlayacağınızı seçmeniz gerekir. Bunu, CSS'nizde ana öğe üzerinde anchor-name özelliğini ayarlayarak yapabilirsiniz. Üst çizgili tanımlayıcı değerini kabul eder.

.anchor {
  anchor-name: --my-anchor;
}

Alternatif olarak, HTML'nizde anchor özelliğini kullanarak bir yer işareti tanımlayabilirsiniz. Özellik değeri, ana öğenin kimliğidir. Bu işlem, gizli bir ana başlık oluşturur.

<a id="my-anchor" class="anchor"></a>
<div anchor="my-anchor" class="boat">I’m a boat!</div>

Bir anafor tanımladıktan sonra anchor işlevini kullanabilirsiniz. anchor işlevi 3 bağımsız değişken alır:

  • Anchor öğesi: Kullanılacak ankrajın anchor-name değeridir. Dilerseniz implicit ankrajı kullanmak için değeri atlayabilirsiniz. HTML ilişkisi veya anchor-name değeri içeren bir anchor-default özelliğiyle tanımlanabilir.
  • Yer işareti tarafı: Kullanmak istediğiniz konumun anahtar kelimesi. Bu, top, right, bottom, left, center vb. olabilir. Dilerseniz yüzde de gönderebilirsiniz. Örneğin, %50 center değerine eşittir.
  • Yedek: Bu, uzunluk veya yüzde kabul eden isteğe bağlı bir yedek değerdir.

anchor işlevini, sabitlenmiş öğenin bitirme özellikleri (top, right, bottom, left veya mantıksal eşdeğerleri) için bir değer olarak kullanırsınız. calc içinde anchor işlevini de kullanabilirsiniz:

.boat {
  bottom: anchor(--my-anchor top);
  left: calc(anchor(--my-anchor center) - (var(--boat-size) * 0.5));
}

 /* alternative with anchor-default */
.boat {
  anchor-default: --my-anchor;
  bottom: anchor(top);
  left: calc(anchor(center) - (var(--boat-size) * 0.5));
}

center iç içe yerleştirme özelliği olmadığından, sabitlenmiş öğenizin boyutunu biliyorsanız calc kullanmayı seçebilirsiniz. translate neden kullanılmalı? Şunu kullanabilirsiniz:

.boat {
  anchor-default: --my-anchor;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
}

Ancak tarayıcı, sabitlenmiş öğeler için dönüştürülmüş konumları dikkate almaz. Konum yedekleri ve otomatik konumlandırma göz önüne alındığında bunun neden önemli olduğu anlaşılacaktır.

kalemine bakın.

Yukarıda --boat-size özel mülkünün kullanıldığını fark etmiş olabilirsiniz. Ancak, sabitlenmiş öğe boyutunu sabitleyicinin boyutuna göre ayarlamak istiyorsanız bu boyuta da erişebilirsiniz. Bunu kendiniz hesaplamak yerine anchor-size işlevini kullanabilirsiniz. Örneğin, teknemizi ankrajımızın dört katı genişlikte yapmak için:

.boat {
  width: calc(4 * anchor-size(--my-anchor width));
}

anchor-size(--my-anchor height) ile yüksekliğe de erişebilirsiniz. Ayrıca, bir veya iki eksenin boyutunu ayarlamak için de kullanabilirsiniz.

absolute konumlandırması olan bir öğeye sabitlemek isterseniz ne olur? Kural, öğelerin kardeş olamamasıdır. Bu durumda, ankörü relative konumlandırması olan bir kapsayıcıyla sarmalayabilirsiniz. Ardından, bu noktaya sabitleyebilirsiniz.

<div class="anchor-wrapper">
  <a id="my-anchor" class="anchor"></a>
</div>
<div class="boat">I’m a boat!</div>

Çapayı sürüklediğinizde teknenin de onu takip ettiği bu demoya göz atın.

belgesine bakın.

Kaydırma konumunu izleme

Bazı durumlarda, ana öğeniz kaydırılabilir bir kapsayıcı içinde olabilir. Aynı zamanda, sabitlenmiş öğeniz bu kapsayıcının dışında olabilir. Kaydırma, düzenden farklı bir iş parçacığında gerçekleştiği için bunu izlemeniz gerekir. anchor-scroll mülkü bunu yapabilir. Bunu sabitlenmiş öğede ayarlar ve izlemek istediğiniz sabitlemenin değerini verirsiniz.

.boat { anchor-scroll: --my-anchor; }

Köşedeki onay kutusunu kullanarak anchor-scroll'ü açıp kapatabileceğiniz bu denemeyi deneyin.

göz atın.

Ancak bu benzetme, ideal bir dünyada hem teknenizin hem de çapanınızın suda olduğu için biraz eksik kalıyor. Ayrıca Popover API gibi özellikler, ilgili öğeleri yakın tutmayı teşvik eder. Sabit reklam yerleşimi, üst katmandaki öğelerle çalışır. API'nin en önemli avantajlarından biri, öğeleri farklı akışlara bağlayabilmektir.

İpucu içeren sabitleyicilerin bulunduğu kaydırılabilir bir kapsayıcı içeren bu demoyu inceleyin. Pop-up olan ipucu öğeleri, ankrajlarla aynı konumda olmayabilir:

.

Ancak pop-up'ların ilgili ana sayfa bağlantılarını nasıl izlediğini fark edeceksiniz. Bu kaydırmalı kapsayıcıyı yeniden boyutlandırabilirsiniz. Böylece konumlar sizin için güncellenir.

Yedek konum ve otomatik konumlandırma

Bu noktada sabitleme konumlandırma gücü bir üst seviyeye çıkar. position-fallback, sabitlenmiş öğenizi sağladığınız yedek bir diziye göre konumlandırabilir. Tarayıcıyı stillerinizle yönlendirir ve konumu sizin yerinize belirlemesine izin verirsiniz.

Buradaki yaygın kullanım alanı, bir sabit öğenin üstünde veya altında gösterilmesi gereken bir ipucu öğesidir. Bu davranış, ipucu kapsayıcı tarafından kırpılıp kırpılmamasına bağlıdır. Bu kapsayıcı genellikle görüntü alanıdır.

Son demonun kodunu incelerseniz kullanılan bir position-fallback mülkü olduğunu görebilirsiniz. Kapsayıcıyı kaydırdığınızda sabitlenmiş pop-up'ların zıpladığını fark etmiş olabilirsiniz. Bu durum, ilgili ankrajlar görüntü alanı sınırına yaklaştığında meydana geldi. Bu sırada pop-up'lar, görüntü alanında kalmak için ayarlanmaya çalışır.

Açık position-fallback oluşturmadan önce ankraj yerleşimi, otomatik yerleşim de sunar. Hem ankraj işlevinde hem de ters içe ekleme mülkünde auto değerini kullanarak bu çevirmeyi ücretsiz olarak elde edebilirsiniz. Örneğin, bottom için anchor kullanıyorsanız top öğesini auto olarak ayarlayın.

.tooltip {
  position: absolute;
  bottom: anchor(--my-anchor auto);
  top: auto;
}

Otomatik yerleşimin alternatifi, açık bir position-fallback kullanmaktır. Bunun için bir yedek konum grubu tanımlamanız gerekir. Tarayıcı, kullanabileceği bir konum bulana kadar bu konumları tarar ve ardından bu konumlandırmayı uygular. Çalışan bir cihaz bulamazsa varsayılan olarak tanımlanan ilk cihazı kullanır.

İpuçlarını önce yukarıda, sonra aşağıda göstermeye çalışan bir position-fallback şöyle görünebilir:

@position-fallback --top-to-bottom {
  @try {
    bottom: anchor(top);
    left: anchor(center);
  }

  @try {
    top: anchor(bottom);
    left: anchor(center);
  }
}

Bu yöntemi ipuçlarına uygulamak şöyle görünür:

.tooltip {
  anchor-default: --my-anchor;
  position-fallback: --top-to-bottom;
}

anchor-default kullanılması, position-fallback öğesini diğer öğeler için yeniden kullanabileceğiniz anlamına gelir. anchor-default değerini ayarlamak için kapsamlı bir özel mülk de kullanabilirsiniz.

koduna göz atın.

Tekneyi tekrar kullanan bu demoyu inceleyin. position-fallback grubu vardır. Çapanın konumunu değiştirdiğinizde tekne, kapsayıcı içinde kalacak şekilde ayarlanır. Gövde dolgusunu ayarlayan dolgu değerini de değiştirmeyi deneyin. Tarayıcının konumlandırmayı nasıl düzelttiğine dikkat edin. Kapsayıcıların ızgara hizası değiştirilerek konumlar değiştiriliyor.

adlı kaleme göz atın.

position-fallback bu sefer saat yönünde konumları denemek için daha ayrıntılı bir açıklama sunar.

.boat {
  anchor-default: --my-anchor;
  position-fallback: --compass;
}

@position-fallback --compass {
  @try {
    bottom: anchor(top);
    right: anchor(left);
  }

  @try {
    bottom: anchor(top);
    left: anchor(right);
  }

  @try {
    top: anchor(bottom);
    right: anchor(left);
  }

  @try {
    top: anchor(bottom);
    left: anchor(right);
  }
}

Örnekler

Yer işareti konumlandırmanın temel özellikleri hakkında bilgi sahibi olduğunuza göre, ipuçları dışındaki bazı ilginç örneklere göz atalım. Bu örnekler, ana sayfa bağlantısı yerleşimini kullanabileceğiniz yöntemler hakkında fikir edinmenizi amaçlamaktadır. Spesifikasyonu daha da geliştirmenin en iyi yolu, sizin gibi gerçek kullanıcılardan geri bildirim almaktır.

Bağlam menüleri

Popover API'yi kullanarak bir içerik menüsüyle başlayalım. Amaç, yukarı bakan oku içeren düğmeyi tıkladığınızda bir bağlam menüsü göstermek. Bu menüde de genişletilecek kendi menüsü vardır.

Burada önemli olan işaretleme değildir. Ancak her biri popovertarget kullanan üç düğmeniz var. Ardından, popover özelliğini kullanan üç öğeniz var. Böylece içerik menülerini JavaScript olmadan açabilirsiniz. Bu durum aşağıdaki gibi görünebilir:

<button popovertarget="context">
  Toggle Menu
</button>        
<div popover="auto" id="context">
  <ul>
    <li><button>Save to your Liked Songs</button></li>
    <li>
      <button popovertarget="playlist">
        Add to Playlist
      </button>
    </li>
    <li>
      <button popovertarget="share">
        Share
      </button>
    </li>
  </ul>
</div>
<div popover="auto" id="share">...</div>
<div popover="auto" id="playlist">...</div>

Artık position-fallback tanımlayabilir ve içerik menüleri arasında paylaşabilirsiniz. Pop-up'lar için inset stillerinin de ayarlarını kaldırırız.

[popovertarget="share"] {
  anchor-name: --share;
}

[popovertarget="playlist"] {
  anchor-name: --playlist;
}

[popovertarget="context"] {
  anchor-name: --context;
}

#share {
  anchor-default: --share;
  position-fallback: --aligned;
}

#playlist {
  anchor-default: --playlist;
  position-fallback: --aligned;
}

#context {
  anchor-default: --context;
  position-fallback: --flip;
}

@position-fallback --aligned {
  @try {
    top: anchor(top);
    left: anchor(right);
  }

  @try {
    top: anchor(bottom);
    left: anchor(right);
  }

  @try {
    top: anchor(top);
    right: anchor(left);
  }

  @try {
    bottom: anchor(bottom);
    left: anchor(right);
  }

  @try {
    right: anchor(left);
    bottom: anchor(bottom);
  }
}

@position-fallback --flip {
  @try {
    bottom: anchor(top);
    left: anchor(left);
  }

  @try {
    right: anchor(right);
    bottom: anchor(top);
  }

  @try {
    top: anchor(bottom);
    left: anchor(left);
  }

  @try {
    top: anchor(bottom);
    right: anchor(right);
  }
}

Bu sayede uyarlanabilir iç içe yerleştirilmiş bir içerik menüsü kullanıcı arayüzü elde edersiniz. Seçim aracıyla içerik konumunu değiştirmeyi deneyin. Seçtiğiniz seçenek, ızgara hizalamasını günceller. Bu da ankraj konumlandırmasının pop-up'ları nasıl konumlandıracağını etkiler.

adlı kaleme göz atın.

Odaklanma ve takip etme

Bu demo, :has() özelliğini kullanarak CSS primitiflerini birleştirir. Buradaki amaç, odaktaki input için görsel bir gösterge geçişi yapmaktır.

Bunu, çalışma zamanında yeni bir ana referans noktası ayarlayarak yapabilirsiniz. Bu demoda, giriş odaklandığında kapsamlı bir özel mülk güncellenir.

#email {
    anchor-name: --email;
  }
  #name {
    anchor-name: --name;
  }
  #password {
    anchor-name: --password;
  }
:root:has(#email:focus) {
    --active-anchor: --email;
  }
  :root:has(#name:focus) {
    --active-anchor: --name;
  }
  :root:has(#password:focus) {
    --active-anchor: --password;
  }

:root {
    --active-anchor: --name;
    --active-left: anchor(var(--active-anchor) right);
    --active-top: calc(
      anchor(var(--active-anchor) top) +
        (
          (
              anchor(var(--active-anchor) bottom) -
                anchor(var(--active-anchor) top)
            ) * 0.5
        )
    );
  }
.form-indicator {
    left: var(--active-left);
    top: var(--active-top);
    transition: all 0.2s;
}

Peki bunu nasıl daha ileriye taşıyabilirsiniz? Bu özelliği, eğitici yer paylaşımları için kullanabilirsiniz. İpuçları, önemli yerler arasında hareket edebilir ve içeriğini güncelleyebilir. İçerikte geçiş yapabilirsiniz. display'yi animasyonlu hale getirmenizi veya Geçişleri görüntülemenizi sağlayan ayrı animasyonlar burada işe yarayabilir.

bakın.

Çubuk grafik hesaplaması

Sabitleme konumlandırmasıyla yapabileceğiniz eğlenceli bir işlem de calc ile birleştirmektir. Grafikte açıklama ekleyen bazı pop-up'lar bulunan bir grafik düşünün.

CSS min ve max kullanarak en yüksek ve en düşük değerleri izleyebilirsiniz. Bunun için CSS şu şekilde olabilir:

.chart__tooltip--max {
    left: anchor(--chart right);
    bottom: max(
      anchor(--anchor-1 top),
      anchor(--anchor-2 top),
      anchor(--anchor-3 top)
    );
    translate: 0 50%;
  }

Grafik değerlerini güncellemek için JavaScript ve grafiği biçimlendirmek için CSS kullanılır. Ancak ana konumlandırma, düzen güncellemelerini bizim yerimize yapar.

kalemine göz atın.

Yeniden boyutlandırma tutamaçları

Yalnızca bir öğeye sabitlemeniz gerekmez. Bir öğe için birçok ankraj kullanabilirsiniz. Bunu çubuk grafik örneğinde fark etmiş olabilirsiniz. İpucu, grafiğe ve ardından uygun çubuğa sabitlendi. Bu kavramı biraz daha ileri götürerek öğeleri yeniden boyutlandırmak için kullanabilirsiniz.

Sabitleme noktalarını özel yeniden boyutlandırma tutamaçlarıyla aynı şekilde değerlendirebilir ve inset değerini kullanabilirsiniz.

.container {
   position: absolute;
   inset:
     anchor(--handle-1 top)
     anchor(--handle-2 right)
     anchor(--handle-2 bottom)
     anchor(--handle-1 left);
 }

Bu demoda, GreenSock Draggable, tutamaçların sürüklenebilmesini sağlar. Ancak <img> öğesi, tutamaçların arasındaki boşluğu dolduracak şekilde ayarlanan kapsayıcıyı dolduracak şekilde yeniden boyutlandırılır.

belgesine bakın.

SelectMenu?

Son olarak, gelecekte neler olacağının bir ipucu vereceğiz. Ancak odaklanılabilir bir pop-up oluşturabilirsiniz. Böylece, ankraj konumlandırmasına sahip olursunuz. Stillendirilebilir bir <select> öğesinin temellerini oluşturabilirsiniz.

<div class="select-menu">
<button popovertarget="listbox">
 Select option
 <svg>...</svg>
</button>
<div popover="auto" id="listbox">
   <option>A</option>
   <option>Styled</option>
   <option>Select</option>
</div>
</div>

anchor, bu işlemi kolaylaştırır. Ancak basit bir başlangıç noktası için CSS şu şekilde görünebilir:

[popovertarget] {
 anchor-name: --select-button;
}
[popover] {
  anchor-default: --select-button;
  top: anchor(bottom);
  width: anchor-size(width);
  left: anchor(left);
}

Popover API'nin özelliklerini CSS ankrajı konumlandırmasıyla birleştirdiğinizde hedefinize yaklaşmış olursunuz.

göz atın.

:has() gibi öğeleri tanıtmaya başladığınızda bu durum ilgi çekici olur. İşaretçiyi açıkken döndürebilirsiniz:

.select-menu:has(:open) svg {
  rotate: 180deg;
}

Sıradaki durak neresi? Bu select'nin işlevsel olması için başka ne yapmamız gerekiyor? Bu konuyu bir sonraki makaleye bırakalım. Ancak endişelenmeyin, stil uygulanabilir select öğeleri yakında kullanıma sunulacaktır. Bizi izlemeye devam edin!

Hepsi bu kadar!

Web platformu gelişiyor. CSS ankrajı konumlandırması, kullanıcı arayüzü denetimlerini geliştirme şeklinizi iyileştirmenin önemli bir parçasıdır. Bu sayede, zor kararlardan bazılarını vermenize gerek kalmaz. Ancak daha önce hiç yapamadığınız şeyleri de yapmanıza olanak tanır. Örneğin, bir <select> öğesine stil uygulama Lütfen düşüncelerinizi bizimle paylaşın.

Fotoğraf: Unsplash'taki CHUTTERSNAP