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
veyaposition-area: block-start
- Sol orta:
position-area: left
veyaposition-area: inline-start
- Alt orta:
position-area: bottom
veyaposition-area: block-end
- Sağ orta:
position-area: right
veyaposition-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.