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

Una Kravets

Yayınlanma tarihi: 10 Mayıs 2024

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ıya yerleştirilmiş ankraj konumlandırma özelliği sayesinde üçüncü taraf kitaplıklarına gerek kalmadan katmanlı kullanıcı arayüzleri oluşturabilir ve yaratıcı olasılıklar dünyasını keşfedebilirsiniz.

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

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.

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 bağlantıyı diğer öğelere iki şekilde bağlayabilirsiniz:

Örtülü çapalar

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 ö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, 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 sabitlemeler

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

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

Öğeleri ankrajlara göre konumlandırma

Sabitleme konumlandırması, CSS mutlak konumlandırmasına dayanı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);
}

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

Bu değerler için mantıksal yerleşim kullanmak üzere eşdeğer değerler aşağıdaki gibidir:

• 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

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

Birden fazla sabit

Öğeler birden fazla bağlayıcıya 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

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 olarak yerleştirilmiş öğelerin ilgili sabitleyicilere göre yerleştirilmesini kolaylaştırır ve sabitleme öğesi ortada olacak şekilde 9 hücreli ızgara üzerinde çalışır.

9 hücreli ızgara üzerinde gösterilen çeşitli olası içe yerleştirilmiş alan konumlandırma seçenekleri

Mutlak konumlandırma yerine iç 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

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, 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

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ş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 sabit öğe, ipucu ise yerleştirilmiş öğedir. Konumlandırılmış öğeyi, diğer tüm sabitlenmiş öğeler 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.

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

Sabitleme konumu otomatik çevirme anahtar kelimeleri

Yukarıdan aşağıya veya soldan sağa (veya her iki yönde) ç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 bildirimlerinin yerine geçer ve birbirleriyle birlikte kullanılabilir:

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

Anahtar kelimeleri çevirmek, ana 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;
}

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 ankrajın görünürlüğünü kontrol edebilirsiniz. Sabitleme ne zaman görünür kalır? Ne zaman kaybolur? Bu özellik sayesinde bu seçenekleri kontrol edebilirsiniz. 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, 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 polyfilling

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

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

  /* Anchor styles here */

}

Ayrıca, Firefox 54, Chrome 51, Edge 79 ve Safari 10'da çalışan Oddbird tarafından geliştirilen CSS anchor positioning polyfill ile ankraj konumlandırma özelliğini polyfill olarak kullanabilirsiniz. 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 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 gerçekleştirir. Böylece pop-up'larınızı veya iletişim kutularınızı DOM sırasında tutmanıza gerek kalmaz. Spesifikasyondaki erişilebilirlik notu hakkında daha fazla bilgi edinin.

Sonuç

Yepyeni bir özellik olan bu özelliği kullanarak neler yapacağınızı görmek için sabırsızlanıyoruz. Şu ana kadar, topluluğun grafiklerdeki dinamik etiketler, bağlayıcı satırları, dipnotlar ve görsel çapraz referans gibi çok kullanışlı bazı 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ı
• Sabitleme konumlandırma aracı