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

Şu anda bir öğeyi bir başkasına nasıl bağlıyorsunuz? 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 çoğu zaman ideal değildir. JavaScript gerekir veya ekstra işaretleme sağlarlar. CSS anchor konumlandırma API'si tethering öğeleri için bir CSS API sağlayarak bu sorunu çözmeyi amaçlar. Bir öğenin, diğer öğelerin konumuna ve boyutuna göre konumlandırılması ve boyutlandırılması için bir yol sunar.

Tarayıcı desteği

Chrome Canary'deki CSS anchor konumlandırma API'sini, "Deneysel Web Platform Features" (Deneysel Web Platformu Özellikleri) işaretinin arkasında deneyebilirsiniz. Bu işareti etkinleştirmek için Chrome Canary'yi açıp chrome://flags adresini ziyaret edin. Ardından "Deneysel web platformu özellikleri" işaretini etkinleştirin.

Ayrıca Oddbird ekibi tarafından yapım aşamasında olan bir çoklu dolgu uygulama da mevcuttur. Depoyu github.com/oddbird/css-anchor-positioning adresinde kontrol etmeyi unutmayın.

Sabitleme desteğini şunları kullanarak kontrol edebilirsiniz:

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

Bu API'nin hâlâ deneme aşamasında olduğunu ve değişebileceğini unutmayın. Bu makalede önemli kısımlar ayrıntılı olarak ele alınmaktadır. Ayrıca, geçerli uygulama, CSS Çalışma Grubu spesifikasyonuyla tamamen uyumlu değildir.

Sorun

Bunu neden yapmanız gerekiyor? Önemli bir kullanım alanı, ipuçları veya ipucu benzeri deneyimler oluşturmaktır. Bu durumda, ipucunu genellikle referans verdiği içerikle ilişkilendirmek istersiniz. Genellikle bir öğeyi başka bir öğeye bağlamak için bir yönteme ihtiyaç vardır. Ayrıca, sayfayla etkileşimde bulunmanızın bu bağlantıyı koparmamasını da beklersiniz (örneğin, kullanıcı kullanıcı arayüzünü kaydırdığında veya yeniden boyutlandırdığında).

Sorunun başka bir kısmı, tethering yapılan öğenin görünümde kaldığından emin olmak istemenizdir. Örneğin, bir ipucunu açtığınızda görüntü alanı sınırları nedeniyle kırpılırsa. Bu, kullanıcılar için çok iyi bir deneyim sağlamayabilir. İpucunun uyarlanmasını istiyorsunuz.

Mevcut çözümler

Şu anda, bu konuya farklı yaklaşımlar gösterebilirsiniz.

İlki temel "Çapayı sarmala" yaklaşımıdır. Her iki öğeyi de alıp bir kapsayıcı içine sarmalayın. Ardından, ipucunu sabite göre konumlandırmak için position kullanabilirsiniz.

<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. Taşıma işlemi sırasında her şey çoğunlukla olmasını istediğiniz yerde kalır.

Diğer bir yaklaşım da sabitinizin konumunu bilmek veya bir şekilde takip etmek olabilir. Bunu, özel özelliklerle ipucunuza aktarabilirsiniz.

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

Ama çapanızın konumunu bilmiyorsanız ne olur? Büyük olasılıkla JavaScript'e müdahale etmeniz gerekir. Aşağıdaki koda benzer bir şey yapabilirsiniz ancak şimdi stilleriniz CSS'den JavaScript'e sızmaya başlıyor.

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ı ortaya çıkarmaya başlar:

• Stilleri ne zaman hesaplarım?
• Stilleri nasıl hesaplarım?
• Stilleri ne sıklıkta hesaplarım?

Bu çözüm sorunu çözdü mü? Sizin kullanım alanınıza uygun olabilir ancak bir sorun var: Çözümümüz uyum sağlamıyor. Yanıt vermiyor. Sabit öğem görüntü alanı tarafından kesilirse ne olur?

Şimdi de buna tepki verip vermeyeceğinize ve nasıl tepki vereceğinize karar vermeniz gerekiyor. Yapmanız gereken soruların ve kararların sayısı artmaya başlıyor. Tek yapmanız gereken bir öğeyi bir başkasına bağlamaktır. İdeal bir dünyada çözümünüz etrafındaki koşullara uyum sağlar ve tepki verir.

Bu acıyı bir miktar hafifletmek için size yardımcı olacak bir JavaScript çözümünden yararlanabilirsiniz. Bu da projenize bir bağımlılık eklemenin maliyetini beraberinde getirir ve bu bağımlılıkları 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 tanımanız gerekir. Sonuç olarak sorularınızın ve kararlarınızın azalması yerine değişebilir. Bu, CSS bağlayıcı konumlandırmasının "nedeni"nin bir parçasıdır. Böylece, konumunuzu hesaplarken performans sorunlarını düşünmekten kurtulmuş olursunuz.

Kod, bu soruna yönelik popüler bir paket olan "floating-ui"yi kullanıldığında 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);

Kodun kullanıldığı bu demoda bağlayıcıyı yeniden konumlandırmayı deneyin.

"İpucu" beklediğiniz gibi çalışmayabilir. x ekseninde değil, y ekseninde görüntü alanının dışına çıkmaya tepki verir. Dokümanları ayrıntılı olarak incelediğinizde size uygun bir çözüm bulacaksınız.

Ama projenize uygun bir paket bulmak çok zaman alabilir. Bu, ek kararların verilmesini gerektirir ve istediğiniz gibi çalışmazsa can sıkıcı olabilir.

Sabit konumlandırmayı kullanma

CSS anchor konumlandırma API'sini girin. Amaç, stillerinizi CSS'de tutmak ve vermeniz gereken karar sayısını azaltmaktır. Aynı sonucu elde etmeyi umuyoruz ancak geliştirici deneyimini daha iyi hale getirmeyi hedefliyorsunuz.

• JavaScript gerekmez.
• Tarayıcının tavsiyelerinizden en iyi pozisyonu belirlemesine izin verin.
• Artık üçüncü taraf bağımlılığı yok
• Sarmalayıcı öğe yok.
• Üst katmandaki öğelerle çalışır.

Şimdi yukarıda çözmeye çalıştığımız sorunu yeniden oluşturup ele alalım. Bunun yerine, çapa içeren bir geminin benzetimini kullanın. Bunlar, sabitlenmiş öğeyi ve bağlayıcıyı temsil eder. Su, kapsayıcı bloğu temsil eder.

İlk olarak, anchor'ı nasıl tanımlayacağınızı seçmeniz gerekir. Bunu, bağlantı öğesinde anchor-name özelliğini ayarlayarak CSS'nizde yapabilirsiniz. Kesik çizgili aynı değeri kabul eder.

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

Alternatif olarak, anchor özelliğini kullanarak HTML'nizde bir bağlayıcı tanımlayabilirsiniz. Özellik değeri, sabit öğenin kimliğidir. Bu, dolaylı bir çapa oluşturur.

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

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

• Sabit öğe: Kullanılacak bağlayıcının anchor-name değeri. implicit bağlayıcısı kullanmak için değeri çıkarabilirsiniz. HTML ilişkisi veya anchor-name değerine sahip bir anchor-default özelliği ile tanımlanabilir.
• Sabit taraf: Kullanmak istediğiniz konumun anahtar kelimesi. Bu top, right, bottom, left, center vb. olabilir. Veya bir yüzdeyi geçebilirsiniz. Örneğin, %50, center değerine eşit olur.
• Yedek: Bu, uzunluk veya yüzde kabul eden isteğe bağlı bir yedek değerdir.

anchor işlevini, sabit öğenin iç içe özellikleri (top, right, bottom, left veya mantıksal eşdeğerleri) için bir değer olarak kullanırsınız. anchor işlevini calc içinde 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 inset özelliği olmadığından, sabit öğenizin boyutunu biliyorsanız calc seçeneğini kullanabilirsiniz. Neden translate kullanmıyorsunuz? Şunu kullanabilirsiniz:

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

Ancak tarayıcı, sabit öğeler için dönüştürülen konumları dikkate almaz. Yedek konumları ve otomatik konumlandırmayı düşünürken bunun neden önemli olduğu açıklanacaktır.

Yukarıda --boat-size özel özelliğinin kullanıldığını fark etmiş olabilirsiniz. Ancak, sabit öğe boyutunu sabit öğenin boyutuna dayandırmak isterseniz bu boyuta da erişebilirsiniz. anchor-size işlevini kendiniz hesaplamak yerine kullanabilirsiniz. Örneğin, teknemizi çapamızın dört katı genişliğinde yapmak için:

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

anchor-size(--my-anchor height) ile yüksekliğe de erişebilirsiniz. Eksenlerin veya her ikisinin boyutunu ayarlamak için de bunu kullanabilirsiniz.

absolute konumlandırmasına sahip bir öğeyi sabitlemek isterseniz ne olur? Kural, öğeler kardeş öğe olamaz. Bu durumda, bağlayıcıyı relative konumlandırmasına sahip bir kapsayıcıyla sarmalayabilirsiniz. Sonra bunu sabitleyebilirsiniz.

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

Çapayı sürükleyip teknenin ilerleyeceği bu demoya göz atın.

Kaydırma konumunu izleme

Bazı durumlarda, sabit öğeniz bir kaydırma kapsayıcısı içinde olabilir. Aynı zamanda, sabit öğeniz bu kapsayıcının dışında olabilir. Kaydırma, düzenden farklı bir iş parçacığında gerçekleştiğinden bunu izlemek için bir yönteme ihtiyacınız vardır. Bunu anchor-scroll özelliği yapabilir. Bunu sabit öğede ayarlarsınız ve buna, izlemek istediğiniz bağlayıcının değerini verirsiniz.

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

Köşedeki onay kutusuyla anchor-scroll öğesini açıp kapatabileceğiniz bu demoyu deneyin.

Yine de, bu benzetme biraz düzelir. İdeal dünyada, hem tekneniz hem de çapanız sudadır. Ayrıca Popover API gibi özellikler, ilgili öğelerin birbirine yakın kalmasını sağlar. Bununla birlikte, çapa konumlandırması üst katmanda bulunan öğelerle çalışır. Bu, API'nin temel avantajlarından biri: öğeleri farklı akışlarda bağlayabilmek.

Bu demoda, araç ipuçları içeren çapalar içeren bir kaydırma kapsayıcısı bulunur. Pop-up olan ipucu öğeleri, sabitlerle aynı konumda olmayabilir:

Ancak, pop-up'ların ilgili yer işareti bağlantılarını nasıl izlediklerini göreceksiniz. Bu kaydırma kapsayıcısını yeniden boyutlandırırsanız konumlar sizin için güncellenir.

Yedek konum ve otomatik konumlandırma

Bu noktada çapa konumlandırma gücü bir düzey yükselir. position-fallback, sağladığınız yedek grubuna göre sabit öğenizi konumlandırabilir. Tarayıcıyı tarzlarınızla yönlendirir ve konumu sizin yerinize belirler.

Buradaki genel kullanım örneği, bir sabit reklamın üstünde veya altında gösterilme arasında geçiş yapması gereken bir ipucudur. Bu davranış, ipucunun kapsayıcısı tarafından kırpılıp kesilmeyeceğine bağlıdır. Bu kapsayıcı, genellikle görüntü alanıdır.

Son demonun kodunu ayrıntılı olarak incelediğinizde, kullanımda olan bir position-fallback mülkünün olduğunu görebilirsiniz. Container'ı kaydırdıysanız sabit pop-up'ların aniden fırladığını fark etmiş olabilirsiniz. Bu durum, ilgili çapalar görüntü alanı sınırına yaklaştığında meydana gelmiştir. Bu sırada, pop-up'lar görüntü alanının içinde kalacak şekilde uyum sağlamaya çalışıyor.

Açık bir position-fallback oluşturmadan önce, sabit konumlandırma otomatik konumlandırma da sunar. Hem anchor fonksiyonunda hem de karşıt inset özelliğinde auto değerini kullanarak bu çevirmeyi ücretsiz elde edebilirsiniz. Örneğin, bottom için anchor kullanıyorsanız top değerini auto olarak ayarlayın.

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

Otomatik konumlandırmaya alternatif, açık bir position-fallback kullanmaktır. Bunun için bir yedek konum kümesi tanımlamanız gerekir. Tarayıcı kullanabileceği bir tane bulana kadar bunların üzerinden geçer ve ardından bu konumlandırmayı uygular. Çalışacak bir etiket bulamazsa varsayılan olarak ilk tanımlanana döner.

Yukarıdaki ve ardından alttaki ipuçlarını görüntülemeye ç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 politika, araç ipuçlarına uygulandığında şu şekilde görünür:

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

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

Tekneyi tekrar kullanırken şu demoyu ele alalım. position-fallback grup var. Sabitleyicinin 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. Konumlar, kapsayıcının ızgara hizalaması değiştirilerek değiştirilmektedir.

position-fallback bu kez daha ayrıntılı ve saat yönünün tersine çevrilmeye çalışılıyor.

.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

Artık çapa konumlandırmasının temel özellikleri hakkında bir fikriniz var. Şimdi, ipuçlarının dışındaki bazı ilginç örneklere göz atalım. Bu örneklerin amacı, çapa konumlandırmasını nasıl kullanabileceğiniz konusunda fikir edinmenizi sağlamaktır. Spesifikasyonu daha da ileriye taşımanın en iyi yolu, sizin gibi gerçek kullanıcıların girişine bakmaktır.

Bağlam menüleri

Popover API'sını kullanan bir içerik menüsüyle başlayalım. Buradaki fikir, köşeli çift ayraçlı düğmeyi tıkladığınızda bir içerik menüsünün görüntülenmesidir. Bu menünün, genişletilecek kendi menüsü vardır.

İşaretleme buradaki önemli kısım değildir. Ancak her birinde popovertarget kullanan üç düğmeniz var. Daha sonra, popover özelliğini kullanan üç öğeniz olur. Bu, içerik menülerini herhangi bir JavaScript olmadan açabilmenizi sağlar. Bu politika 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 bir position-fallback tanımlayabilir ve bunu içerik menüleri arasında paylaşabilirsiniz. Pop-up'lar için inset stillerini kaldırdığınızdan da emin oluruz.

[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 size uyarlanabilir iç içe yerleştirilmiş içerik menüsü kullanıcı arayüzü sağlar. Seçimle içeriğin konumunu değiştirmeyi deneyin. Belirlediğiniz seçenek, ızgara hizalamasını günceller. Bu da çapa konumlandırmanın pop-up'ları nasıl konumlandırdığını etkiler.

Odaklan ve takip et

Bu demo, :has() işlevini getirerek CSS temel öğelerini birleştirir. Burada amaç, odaklanılan input için görsel bir göstergenin taşınmasını sağlamaktır.

Bunu, çalışma zamanında yeni bir çapa ayarlayarak yapın. Bu demoda, giriş odağı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 da ileri götürebilirsiniz? Bunu, bir tür öğretici yer paylaşımı için kullanabilirsiniz. İpucu önemli noktalar arasında geçiş yapabilir ve içeriğini güncelleyebilir. İçeriğin rengini değiştirebilirsiniz. display animasyonunu veya Geçişleri Görüntülemeyi sağlayan ayrı animasyonlar burada kullanılabilir.

Çubuk grafik hesaplaması

Sabit konumlandırmayla yapabileceğiniz bir diğer eğlenceli işlem de bunu calc ile birleştirmektir. Grafiğe açıklama ekleyen bazı pop-up'ların bulunduğu bir grafik düşünün.

CSS min ve max kullanarak en yüksek ve en düşük değerleri izleyebilirsiniz. Bunun CSS'si şuna benzeyebilir:

.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 kullanılan bazı JavaScript'ler ve grafiğin stilini belirlemek için bazı CSS'ler kullanılır. Ancak sabit konum belirleme, bizim için düzen güncellemeleriyle ilgilenir.

Tutma Yerlerini Yeniden Boyutlandır

Tek bir öğeyi bağlamanız gerekmez. Bir öğe için çok sayıda bağlayıcı kullanabilirsiniz. Çubuk grafik örneğinde bu durumu fark etmiş olabilirsiniz. İpuçları grafiğe ve ardından uygun çubuğa sabitlendi. Kavramı biraz daha ayrıntılandırırsanız öğeleri yeniden boyutlandırmak için kullanabilirsiniz.

Sabitleme noktalarını özel yeniden boyutlandırma tutamaçları gibi kullanabilir ve bir inset değerine odaklanabilirsiniz.

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

Bu demoda GreenSock Draggable, tutma yerlerini Sürüklenebilir hale getirir. Ancak <img> öğesi, tutma yerlerinin arasındaki boşluğu dolduracak şekilde ayarlanan kapsayıcıyı doldurmak için yeniden boyutlandırılır.

Menü

Sonuncusu, geleceklerle ilgili biraz bilgi vermekti. Ancak üzerinde odaklanabileceğiniz bir pop-up ile sabit bir konumu elde edebilirsiniz. Stile uygun 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>

Örtülü anchor bu işlemi kolaylaştırır. Ancak temel bir başlangıç noktasının CSS'si şöyle 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 Sabitleyici konumlandırmasıyla birleştirerek işlem yapmaya hazırsınız.

:has() gibi içerikleri tanıtmaya başlamanız çok kullanışlıdır. Açık olan işaretleyiciyi döndürebilirsiniz:

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

Bunu bir sonraki adımda neye taşıyabilirsiniz? select ürününün çalışır durumda olması için başka nelere ihtiyacımız var? Bunu sonraki makale için saklayacağız. Endişelenmeyin, stil sahibi seçili öğeler yakında kullanıma sunulacak. Bizi izlemeye devam edin!

---

Hepsi bu kadar!

Web platformu gelişiyor. CSS sabit konumlandırması, kullanıcı arayüzü kontrollerini geliştirme şeklinizi iyileştirmenin önemli bir parçasıdır. Sizi bazı karmaşık kararlardan uzaklaştıracak. Bununla birlikte, daha önce hiç yapamadığınız şeyleri de yapmanıza olanak tanır. Örneğin, bir <select> öğesinin stilini değiştirebilirsiniz. Lütfen düşüncelerinizi bizimle paylaşın.

Fotoğrafçı: CHUTTERSNAP (Unsplash'ta)