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

Jhey Tompkins

Şu anda bir öğeyi diğerine nasıl bağlıyorsunuz? Konumlarını izlemeyi deneyebilir veya bir 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 ihtiyaçları vardır veya fazladan işaretleme içerirler. CSS çapa konumlandırma API'si, tethering öğeleri için bir CSS API'si sağlayarak bu sorunu çözmeyi amaçlar. Bir öğeyi, diğer öğelerin konumuna ve boyutuna bağlı olarak konumlandırmak ve boyutlandırmak için bir yöntem sağlar.

Tarayıcı desteği

"Deneysel Web Platformu Özellikleri"nin arkasındaki Chrome Canary'deki CSS sabit konumlandırma API'sini deneyebilirsiniz tıklayın. Bu işareti etkinleştirmek için Chrome Canary'yi açın ve chrome://flags adresini ziyaret edin. Ardından, "Deneysel web platformu özellikleri"ni etkinleştirin tıklayın.

Ayrıca Oddbird ekibi tarafından yapılan bir çoklu dolgu geliştiriliyor. Depoyu github.com/oddbird/css-anchor-positioning adresinden kontrol etmeyi unutmayın.

Şunlarla bağlantı desteği olup olmadığını 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 bölümler genel hatlarıyla ele alınmaktadır. Ayrıca, geçerli uygulama, CSS Çalışma Grubu spesifikasyonu ile tamamen senkronize değildir.

Sorun

Bunu neden yapmanız gerekiyor? Yaygın kullanım alanlarından biri, ipuçları veya ipucu benzeri deneyimler oluşturmaktır. Bu durumda, genellikle ipucunu referans verdiği içeriğe bağlamak istersiniz. Genellikle bir öğeyi başka bir öğeye bağlamanın bir yoluna ihtiyaç olur. Ayrıca, sayfayla etkileşimde bulunmanın bu bağlantıyı bozmamasını bekleyebilirsiniz (örneğin, bir kullanıcı kullanıcı arayüzünü kaydırır veya yeniden boyutlandırırsa).

Sorunun başka bir kısmı da, paylaşılan öğenin görünümde kaldığından emin olmak istediğinizdedir. Örneğin, bir ipucunu açarsanız ve bu, görüntü alanı sınırları nedeniyle kırpılırsa. Bu, kullanıcılar için çok iyi bir deneyim olmayabilir. İpucunun uyarlanmasını istiyorsunuz.

Mevcut çözümler

Şu anda, bu sorunu ele almak için kullanabileceğiniz birkaç farklı yöntem bulunmaktadır.

İlki, "Bağlayıcıyı sarmala" adlı temel bahsedeceğiz. Her iki öğeyi de alıp bir kapsayıcıya sarmalarsınız. Ardından, ipucunu sabite göre konumlandırmak için position öğesini 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. Çoğunlukla, her şey istediğiniz yerde kalır.

Başka bir yaklaşım, çapanızın konumunu biliyorsanız veya bir şekilde takip edebilmek olabilir. Özel özellikleri kullanarak ipucuna 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));
}

Peki, çapanızın konumunu bilmiyorsanız ne olur? JavaScript'e müdahale etmeniz gerekebilir. Aşağıdaki kodun yaptığı gibi bir işlem yapabilirsiniz, ancak bu artık stillerinizin CSS dışına ve 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 da akıllara bazı sorular getiriyor:

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

Sorun çözüldü mü? Kullanım alanınız için geçerli 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 buna yanıt verip vermeyeceğinize ve nasıl tepki vereceğinize karar vermeniz gerekiyor. Soru ve karar vermeniz gereken kararların sayısı da gün geçtikçe artıyor. Tek yapmanız gereken bir öğeyi başka bir öğeye bağlamaktır. İdeal bir dünyada çözümünüz uyum sağlar ve çevresine tepki verir.

Bu sıkıntıdan bir kısmını hafifletmek için, size yardımcı olacak bir JavaScript çözümünden yararlanabilirsiniz. Bunun projenize bir bağımlılık ekleme maliyeti olacaktır ve onları nasıl kullandığınıza bağlı olarak performans sorunları ortaya çıkabilir. Örneğin, bazı paketler konumu doğru tutmak için requestAnimationFrame kullanır. Bu nedenle ekibinizle birlikte paketi ve yapılandırma seçeneklerini öğrenmeniz gerekir. Sonuç olarak, sorularınız ve kararlarınız azaltılmasa da değişebilir. Bu soruyu “neden” sorusuna kullanabilirsiniz. Konumu hesaplarken performans sorunlarını dikkate almaktan soyutlanır.

Bu sorun için popüler bir paket olan "floating-ui" kullanıldığında kod aşağıdaki gibi görünür:

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 bu demoda çapayı yeniden konumlandırmayı deneyin.

"Araç ipucu" beklediğiniz gibi olmayabilir. Y ekseninde görüntü alanının dışına çıkmaya tepki verir, ancak x ekseninde tepki vermez. Belgeleri inceleyin ve size uygun bir çözüm bulun.

Ama projenize uygun bir paket bulmak çok zaman alabilir. Bu ekstra bir karardır ve istediğiniz gibi çalışmazsa can sıkıcı olabilir.

Sabit konumlandırmayı kullanma

CSS çapa konumlandırma API'sini girin. Ana fikir, stillerinizi CSS'nizde tutmak ve vermeniz gereken karar sayısını azaltmaktır. Aynı sonuca ulaşmayı uyorsunuz ancak hedefiniz geliştirici deneyimini daha iyi hale getirmek.

• JavaScript gerekmez.
• Tarayıcının, sizin yönlendirmelerinizle en iyi konumu belirlemesine izin verin.
• Artık üçüncü taraf bağımlılığı yok
• Sarmalayıcı öğesi yok.
• Üst katmandaki öğelerle çalışır.

Gelin, yukarıda çözmeye çalıştığımız sorunu yeniden oluşturup ele alalım. Ancak bunun yerine, bir tekne ile çapa benzetmesini kullanın. Bunlar, sabit öğeyi ve çapayı temsil eder. Su, kapsayıcı bloğu temsil eder.

İlk olarak, bağlayıcının nasıl tanımlanacağını seçmeniz gerekir. Bunu CSS'nizde, bağlantı öğesinde anchor-name özelliğini ayarlayarak yapabilirsiniz. dashed-ident değerini kabul eder.

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

Alternatif olarak, HTML'nizde anchor özelliğini kullanarak bir bağlayıcı tanımlayabilirsiniz. Özellik değeri, bağlantı öğesinin kimliğidir. Bu, örtülü 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 sabit öğenin anchor-name öğesidir. implicit sabitini kullanmak için değeri atlayabilirsiniz. Bu, HTML ilişkisiyle 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. Dilerseniz bir yüzde de geçirebilirsiniz. Örneğin, %50, center değerine eşittir.
• Yedek: Bu, uzunluk veya yüzde kabul eden isteğe bağlı bir yedek değerdir.

Sabit öğenin inset özellikleri (top, right, bottom, left veya bunların mantıksal eşdeğerleri) için bir değer olarak anchor işlevini 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 özelliğini kullanabilirsiniz. Neden translate kullanılmıyor? Bunu kullanabilirsiniz:

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

Ancak tarayıcı, sabit öğelerin dönüştürülmüş konumlarını dikkate almaz. Konum yedekleri ve otomatik konumlandırma değerlendirilirken bunun neden önemli olduğu anlaşılacak.

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

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

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

absolute konumlandırmalı bir öğeye sabitlemek isterseniz ne olur? Kural, öğelerin kardeş öğe olamayacağıdır. Bu durumda, sabit reklamı relative konumlandırmasına sahip bir kapsayıcıyla sarmalayabilirsiniz. Sonra sabitleyebilirsiniz.

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

Çapayı etrafa sürükleyebilir ve tekne onu takip eder.

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 ileti dizisinde gerçekleştiğinden onu izlemek için bir yönteme ihtiyacınız vardır. Bunu anchor-scroll özelliği yapabilir. Bunu sabit öğeye ayarlarsınız ve izlemek istediğiniz çapanın değerini verirsiniz.

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

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

Ancak ideal bir dünyada hem tekneniz hem de çapanız suda olduğu gibi, bu benzetme de biraz düzdür. Ayrıca Popover API gibi özellikler, ilgili öğeleri yakın tutabilme olanağını geliştirir. Sabitleme konumlandırması, yine de üst katmanda bulunan öğelerle çalışır. Bu, API'nin ardındaki en önemli avantajlardan biridir: öğeleri farklı akışlarda bir araya getirebilmek.

İpuçlarının olduğu bağlayıcıların bulunduğu bir kaydırma kapsayıcısı içeren bu demoyu düşünün. Pop-up olan ipucu öğeleri, sabitlerle aynı yerde olmayabilir:

Ancak, pop-up'ların ilgili yer tutucu bağlantılarını nasıl izlediklerini fark edeceksiniz. Bu kaydırma kapsayıcısını yeniden boyutlandırabilirsiniz. Ardından, konumlar sizin için güncellenir.

Yedek ve otomatik konumlandırma

Çapa konumlandırma gücü bu noktada bir üst düzeye çıkar. position-fallback, sabit öğenizi, sağladığınız yedekler grubuna göre konumlandırabilir. Tarayıcıya stillerinizle rehberlik eder ve konumu sizin yerinize belirlemesini sağlarsınız.

Buradaki yaygın kullanım alanı, sabit bir 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 kırpılmayacağına bağlıdır. Bu kapsayıcı genellikle görüntü alanıdır.

Son demonun kodunu incelerseniz kullanımda bir position-fallback mülkü olduğunu görürsünüz. Kapsayıcıyı kaydırdıysanız sabit pop-up'ların sıçrama yaptığını fark etmiş olabilirsiniz. Bu durum, ilgili çapalar görüntü alanı sınırına yaklaştığında meydana geldi. Şu anda pop-up'lar görüntü alanında kalacak şekilde uyum sağlamaya çalışmaktadır.

Sabit bir position-fallback oluşturulmadan önce, sabit konumlandırma da otomatik konumlandırma sunar. Hem anchor işlevinde hem de karşıt inset özelliğinde auto değerini kullanarak bu dönüştürmeyi ücretsiz yapabilirsiniz. Ö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ırmanın alternatifi, açık bir position-fallback kullanmaktır. Bunun için bir konum yedek grubu tanımlamanız gerekir. Tarayıcı, kullanabileceği bir site bulana kadar bunları inceler ve ardından bu konumlandırmayı uygular. İşe yarayan bir etiket bulamazsa varsayılan olarak tanımlanmış ilki kullanır.

İpuçlarını yukarıda, ardından 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 kural, araç ipuçlarına şu şekilde uygulanı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 ayarlamak için kapsamlı bir özel mülk de kullanabilirsiniz.

Tekneyi kullanan bu demoyu tekrar değerlendirin. position-fallback grubu var. Çapanın konumunu değiştirdiğinizde tekne, konteyner 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ının ızgara hizalaması değiştirilerek konumlar değiştiriliyor.

position-fallback bu kez konumları saat yönünde denediğinde daha ayrıntılı.

.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 sabit konumlandırmanın temel özellikleri hakkında bir fikriniz var. Şimdi ipuçları dışında bazı ilginç örneklere göz atalım. Bu örneklerin amacı, çapa konumlandırmasını kullanabileceğiniz şekillerde fikirlerinizin akışını sağlamaktır. Spesifikasyonu daha da ileri taşımanın en iyi yolu, sizin gibi gerçek kullanıcıların görüşlerini almaktır.

Bağlam menüleri

Popover API'sının kullanıldığı bir içerik menüsüyle başlayalım. Buradaki fikir, v ayracı içeren düğmeyi tıkladığınızda bir içerik menüsünün açılmasıdır. Ayrıca bu menünün genişletileceği kendi menüsü vardır.

İşaretleme buradaki önemli kısım değildir. Ancak her biri popovertarget özelliğini kullanan üç düğmeniz var. Böylece popover özelliğini kullanan üç öğeniz olur. Bu, herhangi bir JavaScript olmadan içerik menülerini açabilmenizi sağlar. Bu kod 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 tüm inset stillerinin ayarını da 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, 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, sabitleme konumlandırmasının pop-up'ları nasıl konumlandıracağını etkiler.

Konsantrasyon ve takip

Bu demoda :has() işlevi getirilerek CSS temel öğeleri birleştirilir. Amaç, odak noktası olan input için görsel bir göstergeden geçiş yapmaktır.

Bunu, çalışma zamanında yeni bir bağlayıcı ayarlayarak yapabilirsiniz. Bu demoda, giriş odağında kapsama alınmış 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 ileri taşıyabilirsiniz? Bunu öğretici bir yer paylaşımı için kullanabilirsiniz. Bir ipucu, önemli yerler arasında geçiş yapabilir ve içeriğini güncelleyebilir. İçeriğin çapraz geçişini yapabilirsiniz. display veya Geçişleri Görüntüleme işlemini canlandırmanıza olanak tanıyan ayrı animasyonlar burada işe yarayabilir.

Çubuk grafik hesaplama

Sabit konumlandırmayla yapabileceğiniz bir başka eğlenceli şey de bunu calc ile birleştirmektir. Grafik için ek açıklamalar içeren 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 aşağıdaki gibi görünebilir:

.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, grafiği biçimlendirmek için de CSS vardır. Ancak çapa konumlandırma, düzen güncellemelerini bizim için halleder.

Tutma Yerlerini Yeniden Boyutlandırma

Yalnızca tek bir öğeye sabitlemeniz gerekmez. Bir öğe için çok sayıda sabit kullanabilirsiniz. Çubuk grafik örneğinde bunu fark etmiş olabilirsiniz. İpuçları grafiğe ve daha sonra uygun çubuğa sabitlendi. Bu konsepti biraz daha ileri taşırsanız öğeleri yeniden boyutlandırmak için bunu kullanabilirsiniz.

Sabit noktaları özel yeniden boyutlandırma tutamaçları gibi kullanabilir ve inset değerine uygulayabilirsiniz.

.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 getiriyor. Ancak <img> öğesi, tutma yerleri arasındaki boşluğu dolduracak şekilde ayarlanan kapsayıcıyı doldurmak için yeniden boyutlandırılır.

SelectMenü mü?

Bu sonuncu, ileride olacaklar hakkında birazcık heyecan verici. Ancak, odaklanılabilir bir pop-up'ı oluşturabilirsiniz ve artık çapa konumlandırmasına sahip olursunuz. Stil yapılabilir 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>

Dolaylı bir anchor bu işlemi kolaylaştırır. Ancak temel bir başlangıç noktası için CSS şö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'sinin özelliklerini CSS Sabit konumlandırmasıyla birleştirin. Hepsi bu kadar.

:has() gibi özellikleri tanıtmaya başlamanız çok güzel. Açıldığında işaretçiyi döndürebilirsiniz:

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

Sizce bir sonraki aşamaya geçmek ister misiniz? Bunu çalışır durumda bir select hale getirmek için başka nelere ihtiyacımız var? Onu bir sonraki makale için kaydedeceğiz. Ama endişelenmenize gerek yok. Seçebileceğiniz öğeler geliyor. 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. Bu yanıltıcı kararlardan soyutlamanızı sağlar. Ancak bu, daha önce hiç yapamadığınız şeyleri yapmanıza da olanak tanır. Örneğin, bir <select> öğesinin stilini belirleme Lütfen düşüncelerinizi bizimle paylaşın.

Fotoğraf: CHUTTERSNAP tarafından Unsplash'te