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