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

Una Kravets

Yayınlanma tarihi: 10 Mayıs 2024

Not: Bu blog yayını, Chrome 125'te kullanıma sunulan söz dizimini kapsar. Ardından, CSS Çalışma Grubu özellikteki iki değişikliği çözüme kavuşturdu: inset-area özelliğinin position-area ve position-try-options özelliğinin position-try-fallbacks olarak yeniden adlandırılması. Bu güncellemeler Chrome 129 sürümünde gönderilir. Yer işareti konumlandırma dokümanları yeni söz dizimini kapsar.

CSS Anchor Positioning API, öğeleri sabitleme olarak bilinen diğer öğelere göre doğal olarak konumlandırmanıza olanak tanıdığı için web geliştirmede çığır açmıştı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'ten itibaren kullanılabilir.

Tarayıcı desteği

• 125
• 125
• x
• x

Kaynak

Temel Kavramlar: Yer işaretleri ve konumlandırılmış öğeler

Bu API'nin merkezinde yer işaretleri ile yerleştirilmiş öğeler arasındaki ilişki yer alır. Sabitleme noktası, anchor-name özelliği kullanılarak referans noktası olarak belirlenen bir öğedir. Konumlandırılmış öğe, position-anchor mülkü kullanılarak veya konumlandırma mantığında açıkça anchor-name kullanılarak bir sabit öğeye göre yerleştirilmiş bir öğedir.

Sabitleme öğeleri ve konumlandırılmış öğeler.

Bağlayıcı oluşturma

Bağlayıcı oluşturmak oldukça kolaydır. anchor-name mülkünü seçili öğeye uygulayın ve öğeye benzersiz bir tanımlayıcı atayın. Bu benzersiz tanımlayıcı, CSS değişkenine benzer şekilde önüne çift tire eklenmelidir.

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

Bir ana sayfa adı atandıktan sonra .anchor-button, diğer öğelerin yerleşimine rehberlik etmeye hazır bir ana sayfa olarak kullanılır. Bu ankörü diğer öğelere iki şekilde bağlayabilirsiniz:

Örtülü bağlantılar

Bir ankrajı başka bir öğeye bağlamanın ilk yolu, aşağıdaki kod örneğinde gösterildiği gibi örtülü bir ankraj kullanmaktır. position-anchor mülkü, ankrajınıza bağlamak istediğiniz öğeye eklenir ve değer olarak ankrajın adını (bu durumda --anchor-el) içerir.

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

Örtülü bir bağlantı ilişkisiyle, ilk bağımsız değişkeninde 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 sabit reklamlar

Alternatif olarak, ankraj adını doğrudan ankraj işlevinde kullanabilirsiniz (örneğin, top: anchor(--anchor-el bottom). Buna açık ankraj denir ve birden fazla öğeye ankraj oluşturmak istiyorsanız kullanışlı olabilir (ö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, sabitlenmiş bir öğeyi sabitleme öğesinin sol üst kısmı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);
}

Konumlandırılan öğedeki konumlandırma kenarlarının şeması.

Artık aşağıdaki resimde gösterildiği gibi bir öğeniz başka bir öğeye sabitlenir.

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

anchor-center ile konumlandırılmış bir öğeyi merkeze alma

Yer işareti konumlu öğenizi yer işaretine göre ortalamayı kolaylaştırmak için justify-self, align-self, justify-items ve align-items özellikleriyle kullanılabilen anchor-center adlı yeni bir değer vardır.

Bu örnekte, konumlandırılmış öğeyi ankrajının üzerine hizalamak için justify-self: anchor-center kullanılarak önceki örnek değiştirilmiştir.

.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 ankraja bağlanabilir. Bu nedenle, birden fazla ankraja 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 ankrajın sağ alt kısmına, konumlandırılmış öğenin sağ alt kısmı ise ikinci ankrajın sol üst kısmına 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

Bağlama API'sine, mutlak konumlandırmadan gelen varsayılan yönlü konumlandırmaya ek olarak içe yerleştirilmiş alan adı verilen yeni bir düzen mekanizması eklendi.

İçe yerleştirilmiş alan, sabit konumlu öğeleri ilgili sabit öğelerine göre yerleştirmeyi kolaylaştırır ve sabitleme öğesinin ortada olduğu 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çe yerleştirilmiş alan kullanmak için fiziksel veya mantıksal değerlerle inset-area mülkünü 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

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

Sabit konumlandırma API'sinin bir parçası olan anchor-size() işlevi, sabit konumlandırılmış bir öğeyi sabit konumunun 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,ipucu maksimum yüksekliğini ankrajın yüksekliğinin iki katı olacak şekilde ayarlamak için calc() işlevi içinde anchor-size(height) kullanılarak yükseklik için bu işlevin nasıl kullanıldığı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);
}

Yer işaretini pop-up ve iletişim kutusu gibi üst katman öğeleriyle kullanma

Sabitleme konumlandırması, popover gibi üst katman öğeleriyle inanılmaz derecede iyi çalışır. ve <dialog>. Bu öğeler, DOM alt ağacının geri kalanından ayrı bir katmana yerleştirilir. Ancak ankraj konumlandırması, bunları üst katmanda olmayan öğelere geri bağlamanıza ve bunlarla birlikte kaydırma yapmanıza olanak tanır. Bu, katmanlı arayüzler için büyük bir avantajdır.

Aşağıdaki örnekte, bir düğme kullanılarak bir dizi ipucu pop-up'ı açılmaya tetiklenmektedir. Düğme ankraj, ipucu ise konumlandırılmış öğedir. Konumlanan öğeyi diğer herhangi bir sabit öğe gibi biçimlendirebilirsiniz. Bu örnekte anchor-name ve position-anchor, düğme ve ipucu metnindeki satır içi stillerdir. Her ana sayfa bağlantısı için benzersiz bir ana sayfa bağlantısı adı gerekir. Bu nedenle, dinamik içerik oluştururken ana sayfa bağlantılarını satır içi eklemek en kolay yöntemdir.

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

@position-try ile ankraj konumlarını ayarlama

İlk sabitleme konumunuzu belirledikten sonra, sabitleme içeren bloğunun kenarlarına ulaşırsa konumu ayarlamak isteyebilirsiniz. Alternatif ana konumlar oluşturmak için position-try-options mülküyle birlikte @position-try yönergesini kullanabilirsiniz.

Aşağıdaki örnekte, bir menünün sağ tarafında bir alt menü görünür. Menüler ve alt menüler, bir tetikleyici düğmesine sabitlenme eğiliminde olduklarından, popover özelliği ile birlikte ankraj konumlandırma API'sinin mükemmel bir şekilde kullanıldığı yerlerdir.

Bu alt menü için yatay olarak yeterli alan yoksa menünün altına taşıyabilirsiniz. Bunu yapmak için önce ilk konumu 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 sabitlenmiş konumlarınızı ayarlayın:

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

Son olarak, iki cihazı position-try-options ile bağlayın. Tüm bunlar birlikte şu şekilde 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;
}

Not: Şu anda, konumlandırılmış değerler kullanarak stil uyguluyorsanız position-try-options öğesini animasyonlu hale getirebilirsiniz. Bu değerler, buradaki demoda olduğu gibi transition mülküyle geçiş yapılabilir. inset-area henüz geçişe uygun değil ancak Chrome ekibi bir çözüm üzerinde çalışıyor.

Anahtar kelimeleri bağlantı konumunda otomatik olarak çevirme

Üstten alta veya soldan sağa (veya her ikisine birden) çevirme gibi temel bir ayarınız varsa özel @position-try beyanları oluşturma adımını atlayabilir ve flip-block ve flip-inline gibi tarayıcı tarafından desteklenen yerleşik çevirme anahtar kelimelerini kullanabilirsiniz. Bunlar, özel @position-try beyanları için yedek olarak kullanılır 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, tamamen işlevsel bir ana sayfa bağlantısı oluşturabilirsiniz:

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

Alt kaydırma çubuklarındaki sabitleme noktaları için position-visibility

Bazı durumlarda, sayfanın alt kaydırma çubuğunda bir öğeyi sabitlemek isteyebilirsiniz. Bu durumlarda, position-visibility kullanarak ankrajın görünürlüğünü kontrol edebilirsiniz. Sabit reklam ne zaman görünür olmaya devam eder? 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);
}

Alternatif olarak, ankrajın kapsayıcısının dışına 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 polyfilling

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 polyfill, temel ana konum özelliklerinin çoğunu destekler ancak mevcut uygulama tamamlanmış değildir ve bazı eski söz dizimi içerir. unpkg bağlantısını kullanabilir veya dosyayı doğrudan bir paket yöneticisine aktarabilirsiniz.

Erişilebilirlikle ilgili not

Sabitleme konumlandırma API'si, bir öğenin diğer öğelere göre konumlandırılmasına izin verse de bunlar arasında anlamlı bir anlamsal ilişki oluşturmaz. Bağlantı öğesi ile konumlandırılmış öğe arasında gerçekten anlamsal bir ilişki varsa (örneğin, konumlandırılmış öğe, bağlantı metniyle ilgili bir kenar çubuğu yorumuysa) bunu yapmanın bir yolu, bağlantı öğesinden konumlandırılmış öğelere işaret etmek için aria-details kullanmaktır. Ekran okuyucu yazılımı, aria-details ile nasıl başa çıkacağını öğrenmeye devam ediyor ancak destek giderek 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;
}

popover özelliğiyle veya bir <dialog> öğesiyle çapa konumlandırmasını 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ç

Yepyeni bir özellik olan bu aracı kullanarak neler yapacağınızı görmek için sabırsızlanıyoruz. Şu ana kadar, grafiklerdeki dinamik etiketler, bağlayıcı çizgiler, dipnotlar ve görsel çapraz referans gibi topluluktan çok güzel kullanım alanları gördük. Sabitleme konumlandırmasıyla ilgili denemeler yaparken geri bildirimlerinizi öğrenmekten memnuniyet duyarız. Herhangi bir hata bulursanız bize bildirin.

Daha fazla bilgi

• CSS ankraj konumlandırması ile öğeleri birbirine bağlamak için çizgi çizme
• Future CSS: Roman Komarov tarafından sabitleme konumlandırması
• Una'nın Anchor demolarının Codepen Koleksiyonu
• Sabitleme konumlandırma aracı