CSS anchor konumlandırma API ile tanışın

CSS Sabit Konumlandırma API'si, öğeleri sabitler olarak bilinen diğer öğelere göre yerel olarak konumlandırmanıza olanak tanıdığından web geliştirmede büyük fark yaratır. Bu API, menüler ve alt menüler, araç ipuçları, seçimler, etiketler, kartlar, ayar iletişim kutuları ve daha birçok arayüz özelliği için karmaşık düzen gereksinimlerini basitleştirir. Tarayıcıda yerleşik olarak bulunan sabit konumlandırmayla, üçüncü taraf kitaplıklara bağlı kalmadan katmanlı kullanıcı arayüzleri oluşturabilecek ve böylece yaratıcı olasılıklarla dolu bir dünyanın kapılarını açabileceksiniz.

Çapa konumlandırma Chrome 125'te kullanılabilir.

Temel Kavramlar: Sabitlemeler ve konumlandırılmış öğeler

Bu API'nin temelinde sabit öğeler ve konumlandırılmış öğeler arasındaki ilişki yatar. Bağlayıcı, anchor-name özelliği kullanılarak referans noktası olarak atanmış bir öğedir. Konumlandırılan öğe, position-anchor özelliği kullanılarak veya konumlandırma mantığında açıkça anchor-name kullanılarak bir bağlayıcıya göre yerleştirilmiş bir öğedir.

Anchor'ları oluşturma

Anchor oluşturmak kolaydır. Anchor-name özelliğini seçilen öğeye uygulayın ve bu öğeye benzersiz bir tanımlayıcı atayın. CSS değişkenine benzer şekilde, bu benzersiz tanımlayıcının başına çift kısa çizgi eklenmelidir.

.anchor-button {
    anchor-name: --anchor-el;
}

Bir bağlayıcı adı atandıktan sonra .anchor-button, diğer öğelerin yerleşimini yönlendirmeye hazır bir bağlayıcı görevi görür. Bu bağlantıyı iki şekilde diğer öğelere bağlayabilirsiniz:

Örtülü çapalar

Bir bağlayıcıyı başka bir öğeye bağlamanın ilk yolu, aşağıdaki kod örneğinde olduğu gibi dolaylı bir bağlayıcı kullanmaktır. position-anchor özelliği, anchor'ınıza bağlamak istediğiniz öğeye eklenir ve değer olarak bağlayıcının adını (bu örnekte --anchor-el) içerir.

.positioned-notice {
    position-anchor: --anchor-el;
}

Örtülü bağlayıcı ilişkisiyle, ilk bağımsız değişkende bağlantı adını açıkça belirtmeden anchor() işlevini kullanarak öğeleri konumlandırabilirsiniz.

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

Açık çapalar

Alternatif olarak, çapa adını doğrudan çapa işlevinde kullanabilirsiniz (örneğin, top: anchor(--anchor-el bottom). Buna açık bağlayıcı denir ve birden çok öğeyi bağlamak istiyorsanız kullanışlı olabilir (bir örnek için okumaya devam edin).

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

Öğeleri sabit öğelere göre konumlandırın

Bağlayıcı konumlandırma, CSS mutlak konumlandırmasını temel alır. Konumlandırma değerlerini kullanmak için, konumlandırılmış öğenize position: absolute eklemeniz gerekir. Ardından, konumlandırma değerlerini uygulamak için anchor() işlevini kullanın. Örneğin, sabit bir öğeyi sabitleme öğesinin sol üst tarafına konumlandırmak için aşağıdaki konumlandırmayı kullanın:

.positioned-notice {
    position-anchor: --anchor-el;
    /* absolutely position the positioned element */
    position: absolute;
    /* position the right of the positioned element at the right edge of the anchor */
    right: anchor(right);
    /* position the bottom of the positioned element at the top edge of the anchor */
    bottom: anchor(top);
}

Böylelikle bir başkasına sabitlenmiş bir öğeniz olur. Örneğin:

Bu değerler için mantıksal konumlandırmayı kullanmak için eşdeğerleri aşağıda verilmiştir:

• top = inset-block-start
• left= inset-inline-start
• bottom = inset-block-end
• right= inset-inline-end

Konumlandırılan bir öğeyi anchor-center ile ortala

Sabit konumlandırılmış öğenizi, sabit değerine göre ortalamayı kolaylaştırmak için justify-self, align-self, justify-items ve align-items özellikleriyle kullanılabilecek anchor-center adlı yeni bir değer ekledik.

Bu örnekte, konumlandırılan öğeyi sabit öğesinin üzerine ortalamak için justify-self: anchor-center kullanılarak önceki öğe değiştirilir.

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}

Birden çok bağlayıcı

Öğeler birden fazla bağlayıcıya bağlanabilir. Bu, birden fazla sabitle göreli olarak konumlandırılmış konum değerleri ayarlamanız gerekebileceği anlamına gelir. Bunu, anchor() işlevini kullanıp ilk bağımsız değişkende hangi çapaya başvuruda bulunduğunuzu açık bir şekilde belirterek yapın. Aşağıdaki örnekte, konumlandırılan bir öğenin sol üst kısmı bir bağlayıcının sağ alt kısmına, konumlandırılan öğenin sağ alt kısmı ise ikinci bağlayıcının sol üstüne sabitlenmiştir:

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}

inset-area ile konum

Mutlak konumlandırmanın varsayılan yön konumlandırmasına ek olarak, sabitleme API'sına iç alan adı verilen yeni bir düzen mekanizması dahil edilir.

Ek alan, sabitlenen öğelerin ilgili tutturmalara göre yerleştirilmesini kolaylaştırır ve sabitleme öğesi ortada olan 9 hücreli bir ızgara üzerinde çalışır.

9 hücreli ızgarada gösterilen çeşitli olası iç alan konumlandırma seçenekleri

Mutlak konumlandırma yerine iç alanı kullanmak için fiziksel veya mantıksal değerlerle inset-area özelliğini kullanın. Örneğin:

• Üst orta: inset-area: top veya inset-area: block-start
• Sol orta: inset-area: left veya inset-area: inline-start
• Alt orta: inset-area: bottom veya inset-area: block-end
• Sağ orta: inset-area: right veya inset-area: inline-end

Bu konumları daha ayrıntılı şekilde keşfetmek için aşağıdaki araca göz atın:

Öğeleri anchor-size() ile boyutlandırma

Sabit konumlandırma API'sinin bir parçası olan anchor-size() işlevi, sabitlenen bir öğeyi bağlayıcının boyutuna (genişlik, yükseklik veya satır içi ve blok boyutları) göre boyutlandırmak veya konumlandırmak için kullanılabilir.

Aşağıdaki CSS,ipucunun maksimum yüksekliğini bağlayıcının yüksekliğinin iki katı olacak şekilde ayarlamak üzere calc() işlevi içinde anchor-size(height) kullanılarak yükseklik için bunun kullanımına ilişkin bir örnek göstermektedir.

.positioned-notice {
  position-anchor: --question-mark;

  /*  set max height of the tooltip to 2x height of the anchor  */
  max-height: calc(anchor-size(height) * 2);
}

Bağlayıcı, pop-over ve iletişim kutusu gibi üst katman öğeleriyle birlikte kullanın

Yer işareti konumlandırması, popover gibi üst katman öğeleriyle son derece iyi sonuç verir. ve <dialog>. Bu öğeler, DOM alt ağacının geri kalanından ayrı bir katmana yerleştirilirken, sabit konumlandırma, bunları tekrar bağlamanıza ve üst katmanda olmayan öğelerle birlikte kaydırmanıza olanak tanır. Bu, katmanlı arayüzler için büyük bir kazançtır.

Aşağıdaki örnekte, bir dizi ipucu pop-up'ı bir düğme kullanılarak tetiklenir. Düğme, sabit ve ipucu, konumlandırılmış öğedir. Konumlandırılan öğenin stilini, diğer sabit öğeler gibi belirleyebilirsiniz. Bu örnekte, anchor-name ve position-anchor, düğme ve ipucundaki satır içi stillerdir. Her sabit öğenin benzersiz bir bağlayıcı adı gerektiğinden, dinamik içerik oluştururken satır içine alma bunu yapmanın en kolay yoludur.

@position-try ile sabitleme konumlarını ayarlayın

İlk sabit konumu belirledikten sonra, kenet, bulunduğu bloğun kenarlarına ulaşırsa konumu ayarlamak isteyebilirsiniz. Alternatif sabitleme konumları oluşturmak için position-try-options özelliğiyle birlikte @position-try yönergesini kullanabilirsiniz.

Aşağıdaki örnekte, menünün sağında bir alt menü görünür. Menüler ve alt menüler, popover özelliğiyle birlikte sabit konumlandırma API'sının mükemmel bir kullanımıdır. Bunun nedeni, bu menülerin genellikle bir tetikleyici düğmesine sabitlenmesidir.

Bu alt menü için, yatay olarak yeterli alan yoksa bunun yerine onu menünün altına taşıyabilirsiniz. Bunu yapmak için önce başlangıç konumunu ayarlayın:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
}

Ardından @position-try kullanarak yedek sabit konumlarınızı ayarlayın:

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Son olarak, ikisini position-try-options ile bağlayın. Tümü birlikte şöyle görünür:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
  */ connect with position-try options */
  position-try-options: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Sabit konum otomatik çevirme anahtar kelimeleri

Yukarıdan aşağıya veya soldan sağa (ya da her ikisini de) çevirme gibi temel bir ayarlamanız varsa özel @position-try bildirimleri oluşturma adımını atlayabilir ve flip-block ve flip-inline gibi tarayıcı destekli yerleşik çevirme anahtar kelimelerini kullanabilirsiniz. Bunlar özel @position-try bildirimleri için yedek olarak çalışır ve birbiriyle birlikte kullanılabilir:

position-try-options: flip-block, flip-inline, flip-block flip-inline;

Çevirme anahtar kelimeleri, sabit kodunuzu önemli ölçüde basitleştirebilir. Yalnızca birkaç satır kullanarak alternatif konumlar içeren tam işlevli bir çapa oluşturabilirsiniz:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}

Alt kaydırıcılardaki sabitler için position-visibility

Bir öğeyi sayfanın alt kaydırma çubuğu içine sabitlemek isteyebileceğiniz bazı durumlar vardır. Böyle durumlarda, sabit öğenin görünürlüğünü position-visibility kullanarak kontrol edebilirsiniz. Anchor ne zaman görünür durumda kalır? Ne zaman kaybolur? Bu özellikle, bu seçenekler üzerinde kontrol sahibi olursunuz. Konumlandırılan öğenin, sabitlenene kadar görünümde kalmasını istiyorsanız position-visibility: anchors-visible parametresini kullanırsınız:

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

Alternatif olarak, bağlayıcının kapsayıcısından taşmasını önlemek için position-visibility: no-overflow kullanabilirsiniz.

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}

Özellik algılama ve çoklu doldurma

Tarayıcı desteği şu anda sınırlı olduğundan bu API'yi bazı önlemler alarak kullanmak isteyebilirsiniz. İlk olarak, @supports özellik sorgusunu kullanarak desteği doğrudan CSS'de kontrol edebilirsiniz. Bunu yapmanın yolu, sabit stillerinizi aşağıda belirtilen şekilde sarmalamaktır:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

Ayrıca Firefox 54, Chrome 51, Edge 79 ve Safari 10'da çalışan Oddbird'ün CSS bağlayıcı konumlandırması polyfill'i ile çapa konumlandırma özelliğine çoklu dolgu yapabilirsiniz. Bu çoklu dolgu, temel sabitleyici konumu özelliklerinin çoğunu destekler, ancak mevcut uygulama henüz tamamlanmamıştır ve bazı eski söz dizimi içerir. pkg bağlantısını kullanabilir veya doğrudan bir paket yöneticisine içe aktarabilirsiniz.

Erişilebilirlikle ilgili bir not

Çapa konumlandırma API'si bir öğenin diğerlerine göre konumlandırılmasına izin verse de, söz konusu öğeler arasında doğası gereği herhangi bir anlamlı semantik ilişki oluşturmaz. Sabit öğe ve konumlandırılan öğe arasında gerçekten anlamsal bir ilişki varsa (örneğin, konumlandırılan öğe, bağlantı metniyle ilgili bir kenar çubuğu yorumuysa) bunu yapmanın bir yolu, bağlantı öğesinden konumlandırılan öğelere işaret etmek için aria-details kullanmaktır. Ekran okuyucu yazılımı, arya ayrıntılarıyla nasıl başa çıkılacağını öğrenmeye devam ediyor ancak sağlanan destek iyileşiyor.

<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>

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

.positioned {
  position: fixed;
  position-anchor: --anchor;
}

Sabit konumlandırmayı popover özelliğiyle veya <dialog> öğesiyle kullanıyorsanız tarayıcı, uygun erişilebilirlik için odakta gezinme düzeltmelerini işleyeceğinden pop-up'larınızı veya iletişim kutularınızı DOM sırasına almanız gerekmez. Spesifikasyondaki erişilebilirlik ile ilgili not hakkında daha fazla bilgi edinin.

Sonuç

Bu yepyeni bir özelliktir ve bu özellikle birlikte geliştireceğiniz özellikleri görmek için sabırsızlanıyoruz. Şimdiye kadar topluluk tarafından grafiklerdeki dinamik etiketler, bağlayıcı satırları, dipnotlar ve görsel çapraz referans gibi oldukça kullanışlı bazı kullanım alanlarına şahit olduk. Çapa konumlandırmayla ilgili denemeler yaparken geri bildiriminizi almaktan memnuniyet duyarız. Herhangi bir hata bulursanız bize bildirin.

Daha fazla bilgi

• CSS Sabit Konumlandırma ile Öğeleri Bağlamak İçin Çizgi Çizme
• Gelecekteki CSS: Roman Komarov tarafından çapa konumlandırması
• Una'nın Codepen Koleksiyonu'ndaki Anchor demoları
• Çapa konumlandırma aracı