CSS çapa konumlandırma API'si

CSS Anchor Konumlandırma API'si, öğeleri çapa olarak bilinen diğer öğelere göre konumlandırmanızı sağlar. Bu API, menü ve alt menü, ipucu, seçim, etiket, kart, ayar iletişim kutusu 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 ihtiyaç duymadan katmanlı kullanıcı arayüzleri oluşturabilir ve böylece yaratıcı olasılıklarla dolu bir dünya oluşturabilirsiniz.

Temel Kavramlar: Yer işaretleri 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 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.

Bağlayıcı oluşturma

Sabitleme işlemini yapmak 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 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 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ük bir sabitleme ilişkisi kullanırken, ilk bağımsız değişkeninde sabitleme 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, 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);
}

Artık bir öğeyi diğerine sabitlemişsinizdir. Örneğin:

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

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ı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 sabite göre konumlandırılmış konum değerleri ayarlamanız gerekebilir. Bunu yapmak için anchor() işlevini kullanın ve ilk bağımsız değişkende hangi ankora referans verdiğinizi açıkça belirtin. 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);
}

position-area olan konum

Anchoring API, position-area mülkünü kullanan yeni bir düzen mekanizması içerir.

Bu özellik, sabit konumlu öğeleri ilgili sabitleme noktalarına göre yerleştirmenize olanak tanır ve sabitleme öğesinin ortada olduğu 9 hücreli bir ızgara üzerinde çalışır.

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

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

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

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

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

.

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

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 dizi ipucu pop-up'ı bir düğme kullanılarak açılarak tetiklenmiştir. 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 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.

@position-try ile ankraj konumlarını ayarlama

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-fallbacks özelliğiyle 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 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);
  position-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);
  posotion-area: bottom;
}

Son olarak, ikisini position-try-fallbacks 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);
  position-area: right span-bottom;
  */ connect with position-try-fallbacks */
  position-try-fallbacks: --bottom;
}

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

.

Anahtar kelimeleri bağlantı konumunda otomatik olarak çevirme

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-fallbacks: 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;
  position-area: top;
  position-try-fallbacks: 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 sabit reklamı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ştirilen öğenin, ankraj görüntüden çıkana kadar görüntüde kalmasını istediğinizde position-visibility: anchors-visible öğesini 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 çoklu doldurma

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 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. 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 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 ç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.

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'deki Anchor demoları koleksiyonu
• Sabit konumlandırma aracı