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

Una Kravets

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

Sabitleme konumlandırması Chrome 125 sürümünden kullanılabilir.

Tarayıcı Desteği

• . 125
• . 125
• . kat
• . kat

Kaynak

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

Bu API'nin merkezinde sabitler ve konumlandırılmış öğeler arasındaki ilişki yatar. Sabit, anchor-name özelliği kullanılarak referans noktası olarak atanan bir öğedir. Konumlandırılmış öğ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.

Sabit öğeler ve konumlandırılmış öğeler.

Bağlayıcı oluşturma

Bağlayıcı oluşturmak oldukça kolaydır. Anchor-name özelliğini seçili öğeye uygulayın ve benzersiz bir tanımlayıcı atayın. Bu benzersiz tanımlayıcının başına CSS değişkenine çok benzer şekilde ç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 sabitleyici görevi görür. Bu sabiti diğer öğelere iki şekilde bağlayabilirsiniz:

Örtülü çapalar

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

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

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

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

Uygunsuz çapalar

Alternatif olarak, bağlantı adını doğrudan bağlayıcı işlevinde de kullanabilirsiniz (örneğin, top: anchor(--anchor-el bottom). Buna açık bağlantı adı verilir ve birden fazla öğeyi sabitlemek istediğinizde yararlı olabilir (bir örnek için okumaya devam edin).

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

Öğeleri sabitlere göre konumlandırma

Fiziksel özellikleri içeren çapa konumlandırma diyagramı.

Sabit 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 yerleştirmek 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);
}

.

Yerleştirilmiş öğedeki konumlandırma kenarlarını gösteren şema.

Artık bir öğeniz başka bir öğeye sabitlenmiş durumda. Örneğin:

ziyaret edin.

Temel bir çapanın tanıtımı.

Bu değerler için mantıksal konumlandırma kullanmak istiyorsanız bu değerlerin eşdeğerleri şu şekildedir:

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

Konumlandırılmış bir öğeyi anchor-center ile ortalayın

anchor-center adlı yeni bir değer sayesinde justify-self, align-self, justify-items ve align-items özellikleriyle kullanılabilecek yeni bir değer, sabit konumlu öğenizi çapasına göre ortalamanızı sağlayacak.

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

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

.

ziyaret edin.

justify-center kullanılarak ortalanmış sabit bir reklamın demosu.

Birden çok bağlayıcı

Öğeler birden fazla bağlayıcıya bağlanabilir. Bu nedenle, birden fazla sabite göre konumlandırılmış konum değerleri ayarlamanız gerekebilir. Bunu, anchor() işlevini kullanarak ve ilk bağımsız değişkende hangi bağlantıya başvurduğunuzu açıkça belirterek yapabilirsiniz. Aşağıdaki örnekte, konumlandırılmış bir öğenin sol üst kısmı bir sabit öğenin sağ alt tarafına, konumlandırılan öğenin sağ alt kısmına ise ikinci sabit öğenin sol üst tarafına sabitlenmiştir:

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

.

ziyaret edin.

Birden fazla sabit reklamın gösterildiği demo.

inset-area olan konum

Mutlak konumlandırmadaki varsayılan yönsel konumlandırmaya ek olarak, sabitleme API'sine eklenen yeni bir düzen mekanizması vardır.

Yerleştirilmiş alan, sabit konumlandırılmış öğelerin ilgili sabitleyicilere göre yerleştirilmesini kolaylaştırır ve ortada sabitleme öğesi varken 9 hücreli ızgara üzerinde çalışır.

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

Mutlak konumlandırma yerine, içe aktarılan 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

ziyaret edin.

ziyaret edin.

Birden fazla sabit reklamın gösterildiği demo.

Bu konumları daha ayrıntılı şekilde incelemek için aşağıdaki aracı kullanın:

İç içe alan konumları için sabitleme aracı.

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

Yine sabit konumlandırma API'sinin bir parçası olan anchor-size() işlevi, sabit olarak yerleştirilmiş bir öğeyi sabit reklamı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'de,ipucunun maksimum yüksekliğini sabit yüksekliğin iki katı olacak şekilde ayarlamak için calc() işlevinde anchor-size(height) kullanılarak yükseklik için bu yöntemin kullanılmasına dair bir örnek gösterilmektedir.

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

.

ziyaret edin.

anchor-size için demo

Pop-up ve iletişim kutusu gibi üst katman öğeleriyle bağlantı kullanın

Sabit konumlandırma, popover gibi üst katman öğeleriyle son derece iyi çalışır. ve <dialog>. Bu öğeler DOM alt ağacının geri kalanından ayrı bir katmana yerleştirilmiş olsa da, 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 açılarak tetiklenmiştir. Düğme sabit öğe, ipucu ise yerleştirilmiş öğedir. Konumlanan öğeyi diğer herhangi bir sabit öğe gibi biçimlendirebilirsiniz. Bu örnekte, anchor-name ve position-anchor düğme ve ipucundaki satır içi stillerdir. Her sabit için benzersiz bir bağlantı adı gerektiği için dinamik içerik oluştururken satır içi yapmak bunu yapmanın en kolay yoludur.

ziyaret edin.

popover ile çapa kullanarak tanıtım

Not: Pop-up ve iletişim kutusu öğeleri kullanıcı aracısı stilleri, bunları varsayılan olarak görüntü alanında ortalar. Bu nedenle düzen sorunlarıyla karşılaşabilirsiniz. Sabit olarak yerleştirilmiş tüm öğelerde karışıklığı önlemek için bu stilleri inset: auto kullanarak sıfırlamanızı öneririz. Bu politika ileride değişerek varsayılan kullanıcı aracısı stili olabilir.

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

Başlangıçtaki sabitleme konumunuzu belirledikten sonra, sabit reklam bulunduğu blokun kenarlarına ulaşırsa konumu ayarlamak isteyebilirsiniz. Alternatif sabit konumlar oluşturmak için position-try-options özelliğiyle birlikte @position-try yönergesini kullanabilirsiniz.

Aşağıdaki örnekte, menünün sağ tarafında bir alt menü yer almaktadır. Menüler ve alt menüler, bir tetikleyici düğmesine sabitlendiği için popover özelliğiyle birlikte çapa konumlandırma API'sinin mükemmel bir kullanımıdır.

Bu alt menü için yatay olarak yeterli alan yoksa bunun yerine 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. Hepsi bir araya geldiğinde bu durum aşağıdaki gibi 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;
}

.

ziyaret edin.

popover ile çapa kullanarak tanıtım

Not: Şu anda, buradaki demoda olduğu gibi transition özelliğiyle geçişi yapılabilecek konumlandırılmış değerler kullanarak stil uyguluyorsanız position-try-options animasyonunu oluşturabilirsiniz. inset-area henüz geçişe dönüştürülemez. Bununla birlikte, Chrome ekibi bir çözüm üzerinde çalışıyor.

Sabitleme konumu otomatik çevirme anahtar kelimeleri

Üstten alta veya soldan sağa (ya da her ikisine birden) çevirme gibi temel bir ayarlamanız varsa özel @position-try bildirimleri oluşturma adımını atlayıp flip-block ve flip-inline gibi tarayıcı destekli yerleşik çevirme anahtar kelimelerini bile kullanabilirsiniz. Bunlar, özel @position-try bildirimlerinin yerine geçer ve birbirleriyle birlikte kullanılabilir:

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

Çevirmeli anahtar kelimeler, bağlantı kodunuzu önemli ölçüde basitleştirebilir. Yalnızca birkaç satırla, alternatif konumlara sahip tam işlevli bir çapa oluşturabilirsiniz:

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

.

ziyaret edin.

position-try-options: flip-block ile otomatik çevirmeyi kullanma

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

Bir öğeyi sayfanın alt kaydırıcısına sabitlemek isteyebileceğiniz bazı durumlar vardır. Bu durumlarda, position-visibility kullanarak sabit reklamın görünürlüğünü kontrol edebilirsiniz. Sabit reklam ne zaman görünümde kalır? Ne zaman kaybolur? Bu özellik sayesinde söz konusu seçeneklerin denetimi sizde olur. Yerleştirilmiş öğenin, sabit öğe görünümden çıkana kadar görünümde kalmasını istediğinizde position-visibility: anchors-visible kullanırsınız:

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

.

ziyaret edin.

position-visibility: anchors-visible Demo

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

.

ziyaret edin.

position-visibility: no-overflow Demo

Özellik algılama ve çoklu doldurma

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

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

  /* Anchor styles here */

}

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

Erişilebilirlikle ilgili not

Anchor konumlandırma API'si, öğelerin diğerleriyle göreli olarak konumlandırılmasına olanak tanır ancak onlar arasında anlamlı bir anlamsal ilişki oluşturmaz. Sabit öğe ile 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, sabit öğeden konumlandırılmış öğelere işaret etmek için aria-details kullanmaktır. Ekran okuyucu yazılımı, aria ayrıntılarıyla başa çıkmayı öğrenmeye devam ediyor olsa da destek gittikçe artıyor.

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

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

Sonuç

Bu yepyeni bir özelliktir ve onunla neler geliştireceğinizi görmeyi heyecanla bekliyoruz. Şu ana kadar, topluluğun grafiklerdeki dinamik etiketler, bağlayıcı satırları, dipnotlar ve görsel çapraz referans gibi çok güzel kullanım alanlarına tanık olduk. Çapa konumlandırmasıyla ilgili denemeler yaparken, geri bildiriminizi duymak isteriz. Herhangi bir hata bulursanız lütfen bize bildirin.

Daha fazla bilgi

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