Bağlayıcı konumlandırma

İmleçle üzerine gelindiğinde açılan ipucu veya açılır menü yerleştirirken genellikle sayfadaki başka bir öğeye göre konumlandırmak istersiniz. Bu efekti elde etmek için mutlak konumlandırmayı kullanmanın yolları olsa da daha karmaşık gereksinimler geçmişte öğeleri JavaScript kullanarak konumlandırmayı tercih etmiştir.

CSS sabit öğe konumlandırma, bir öğeyi başka bir öğeye göre bildirimli olarak konumlandırmanın bir yolunu sunar.

Tethering öğeleri

Bir öğeyi bağlantı yapmak için, iki tireyle başlayan herhangi bir dize değeri atarsınız.anchor-name Bu, konumlandırılmış öğenin bağlantısını bulmak için kullanacağı tanımlayıcıdır ve açıklayıcı bir ad vermek faydalıdır. Farklı şekillerde bağlantı olarak kullanılacaksa bir öğeye birden fazla bağlantı adı bile verebilirsiniz.

Bağlanabilmesi için konumlandırılmış öğede birkaç özellik ayarlamanız gerekir. Öncelikle position: absolute veya position: fixed değerini ayarlayarak öğeyi dokümanın akışından çıkarıp kaydırmanız gerekir.

Ardından, position-anchor öğesini sabitte ayarladığınız sabit adına ayarlayarak hangi sabite bağlanmak istediğinizi belirlemeniz gerekir.

Son olarak, bağlantının nasıl konumlandırılacağını ayarlamanız gerekir. position-area hakkında daha fazla bilgiyi bu modülün ilerleyen kısımlarında edineceksiniz.

#anchor {
   anchor-name: --my-anchor;
}

#positionedElement {
     position: absolute;
     position-anchor: --my-anchor;
     position-area: end;
}

Örtülü bağlar

Pop-up'ları bağlamak daha da kolaydır. popovertarget içeren bir düğmeyle veya showPopover({source}) ile source ayarlayarak bir popover açtığınızda, popover'da zaten "örtülü bir bağlantı" ayarlanmış olur. Varsayılan olarak position: fixed ile birlikte bir popover zaten kaydığı için popover'ı konumlandırmak için yapmanız gereken tek şey konumu ayarlamaktır.

#anchor{}

#positionedElement {
  position-area: end;
  margin: unset;
}

Potansiyel sabit reklamların kapsamını belirleme

Bir bileşenin parçası olarak sabitleme konumlandırması uygulayabilirsiniz. Böylece, açılır menü gibi bir kalıbı birden fazla yerde kullanabilirsiniz. Aynı anchor-name öğesini birden çok kez kullanıyorsanız her konumlandırılmış öğenin doğru sabitleme noktasını bulmasını nasıl sağlarsınız?

JavaScript çözümlerinde her bağlantıya benzersiz kimlikler eklenir ve ardından konumlandırılmış öğeden bu kimliğe başvurulur. Bu durum hantallaşır ve CSS'nin anchor-scope ile daha basit bir çözümü vardır.

anchor-scope özelliği, hangi bağlantı adı eşleşmelerinin yalnızca bir öğe ve onun alt öğeleri arasında yapılacağını belirler. Tanımlanan tüm bağlantı adlarının kapsamını sınırlamak için bir veya daha fazla bağlantı adı listesini ya da all anahtar kelimesini kabul eder.

anchor-scope, ideal olarak hem konumlandırılmış öğenin hem de aynı ada sahip başka bağlantı öğeleri içermeyen bağlantı öğesinin bir üst öğesine eklenir. Bu genellikle yeniden kullanılabilir bileşenin kök dizininde bulunur.

Aşağıdaki örnekte, aynı anchor-name ile tekrarlanan öğelere uygulandığında anchor-scope öğesinin oluşturduğu fark gösterilmektedir. Örnekte, tüm <img> öğeleri ve resim banner'ları --image bağlantı adını referans alıyor. anchor-scope, <li> öğelerine uygulandığında position-anchor: --image yalnızca banner ile aynı <li> öğesindeki <img> öğesiyle eşleşir. Aksi takdirde, son oluşturulan <img> ile eşleşir.

Konumlandırma

Öğeyi sabitinize bağladığınıza göre artık konumlandırabilirsiniz. Sabitleme konumlandırması, konumlandırma için iki yöntem sunar: position-area ve anchor() işlevi.

position-area

position-area özelliği, bir veya iki anahtar kelime belirterek bir öğeyi sabitleme noktasının etrafında konumlandırmanıza olanak tanır. Bu, birçok yaygın kullanım alanını kapsar ve genellikle iyi bir başlangıç noktasıdır.

position-area nasıl çalışır?

position-area, sabitlenmiş öğe için, sabitleme noktasının kenarları ve sabitlenmiş öğenin orijinal kapsayan bloğu tarafından oluşturulan bir alanda yeni bir kapsayan blok oluşturarak çalışır.

position-area için birçok anahtar kelime olsa da bunları daha anlaşılır hale getirmek için birkaç kategoriye ayırabiliriz. Söz dizimini keşfetmek için Anchor-tool.com'u kullanabilirsiniz.

Fiziksel anahtar kelimeler

top, left, bottom, right ve center fiziksel anahtar kelimelerini kullanabilirsiniz. Örneğin, position-area: top right, konumlandırılan öğeyi sabitin üstüne ve sağına yerleştirir. Bu anahtar kelimelerin fiziksel eksen eşdeğerleri de vardır: y-start, x-start, y-end ve x-end.

Mantıksal anahtar kelimeler

Ayrıca mantıksal anahtar kelimeler (block-start, block-end, inline-start ve inline-end) de kullanabilirsiniz. Örneğin, position-area: block-end inline-start, konumlandırılmış öğeyi İngilizce gibi dillerde sabitin altına ve soluna, dokümanın yazma modunda ise blok ekseninde sabitten sonra ve satır içi ekseninde sabitten önce yerleştirir. center, mantıksal bir anahtar kelimeyle de kullanılabilir.

Ayrıca, mantıksal anahtar kelimeler belirtiyorsanız ekseni atlayabilirsiniz. Bu durumda önce blok ekseni, ardından satır içi ekseni belirtilir. position-area: start end, position-area: block-start inline-end veya position-area: inline-end block-start ile aynıdır.

Birden fazla ızgara alanını kapsama

Şimdiye kadar bu seçeneklerin, konumlandırılmış öğeyi yalnızca tek bir ızgara alanına yerleştirmenize olanak tanıdığını fark etmiş olabilirsiniz. Fiziksel veya mantıksal özelliklere span önekini eklemek, bitişik merkez ızgara alanını ekler. position-area: span-top right, sabitleme noktasının sağında ve sabitleme noktasının altından konumlandırılan öğenin orijinal kapsayan bloğunun üstüne yerleştirilir.

Açılır menü için yaygın bir konum alanı position-area: block-end span-inline-end'dır.

span-all anahtar kelimesi 3 satır veya sütun boyunca uzanıyor.

Tek anahtar kelime

Yalnızca bir anahtar kelime ayarlarsanız diğer eksen otomatik olarak ayarlanır. Bu özellik, büyük ölçüde beklendiği gibi çalışır ancak nasıl çalıştığını anlamak faydalı olabilir.

Sağlanan anahtar kelime ekseni hakkında netse diğer eksen span-all olarak hesaplanır. Bu, position-area: bottom öğesinin position-area: bottom span-all öğesine eşdeğer olduğu ve konumlandırılmış öğenin sabitleme noktasının altında olacağı ve kapsayan bloğun tüm genişliğine sahip olacağı anlamına gelir.

Diğer yandan, anahtar kelime bir ekseni net bir şekilde belirtmiyorsa tekrarlanır. position-area: start, start start ile eşdeğerdir ve soldan sağa okunan dillerde bağlantının sol üst kısmına yerleştirilir.

anchor() işlevi

Daha gelişmiş kullanım alanları için position-area gereksinimlerinizi karşılamayabilir. anchor() işlevi, başka bir öğenin konumuna göre ayrı ayrı içe yerleştirme özellikleri ayarlamanıza olanak tanır. Bu, CSS uzunluğu olarak çözümlenir. Yani hesaplamalarda ve diğer CSS işlevleriyle birlikte kullanabilirsiniz. Ayrıca, farklı tarafları farklı bağlantı noktalarına da bağlayabilirsiniz.

anchor() işlevi, bir bağlantı adı ve bağlantı tarafı alır. Öğenizde position-anchor ile veya örtülü olarak (ör. popover ile) ayarlanmış bir varsayılan bağlantı varsa bağlantı adını atlayabilirsiniz.

.positionedElement {
  block-start: anchor(--my-anchor start);
  /*  OR  */
  position-anchor: --my-anchor;
  block-start: anchor(start);
}

Yedek değerler

Bir anchor() işlevi için bağlantı bulunamazsa beyanın tamamı geçersiz olur. Bu durum, yerleştirilmiş öğeden sonra bağlantı oluşturulursa veya eşleşen anchor-name öğesi yoksa meydana gelebilir. Bunu ele almak için yedek bir uzunluk veya yüzde belirleyebilirsiniz.

.positionedElement {
   block-start: anchor(--my-anchor, 100px)
}

Önceki örnekte, konumlandırılmış öğenin sol değeri --focused-anchor'ya sabitlenmiştir ancak bu anchor-name yalnızca ilk düğmenin üzerine gelindiğinde veya odaklanıldığında vardır. anchor() işlevi bir uzunluğa dönüştürüldüğünden, yedek olarak başka bir sabitleyici kullanabilirsiniz. Yedek sağlamazsak konumlandırılmış öğe konumlandırılmaz.

Sabit yan anahtar kelimeler

Sabitleme tarafı değeri, sabitlemenin hangi kenarının konumlandırılacağını belirler. position-area özelliğine benzer şekilde, sabitleme tarafı değeri de çeşitli söz dizimi türlerini destekler.

Bu örnekte, bir yüzde değerinin belirtilen eksende her zaman başlangıçtan sona nasıl gittiği gösterilmektedir:

anchor() kullanılıyor

anchor() bir uzunluk olduğundan çok esnektir. Değeri max() ve calc() gibi CSS işlevleriyle değiştirebilirsiniz.

Bir sınırlama olarak, yalnızca yerleştirilmiş özelliklerde anchor() işlevlerini kullanabilirsiniz.

Önceki örnekte, açık ayrıntılar panelinin arkasına bir arka plan ekleniyor. Bu arka plan, farklı bir panel açıldığında sorunsuz bir şekilde animasyonla gösteriliyor ve fareyle üzerine gelinen ayrıntılar panelini de kapsayacak şekilde genişliyor. Bu işlemi gerçekleştirmek için iki bağlantı arasındaki daha kısa uzunluğu seçmek üzere min() kullanılır.

#indicator{
/*  Use the smaller of the 2 values:  */
  inset-block-start: min(
/*   1. The start side of the default anchor, which is the open `<details>` element  */
    anchor(start),
/*   2. The start side of the hovered `<details>` element.    */
    anchor(--hovered start,
/*     If no `<details>` element is hovered, this falls back to infinity px, so that the other value is smaller, and therefore used.   */
       var(calc(1px * infinity)))
  );
}

Örnekte, açık panelin etrafına satır içi boşluk eklemek için calc() de kullanılıyor.

Sabit öğenin boyutunu kullanma

Konumlandırılmış öğenizin boyutu, konumu veya kenar boşluğu için sabitleme öğesinin boyutlarını kullanmak üzere anchor-size() işlevini de kullanabilirsiniz.

anchor-size() bir bağlantı adı alır veya varsayılan bağlantıyı kullanır. Varsayılan olarak, kullanıldığı eksendeki sabitleyicinin boyutunu kullanır. Bu nedenle width: anchor-size(), sabitleyicinin genişliğini döndürür. Ayrıca, fiziksel anahtar kelimeler width ve height ya da mantıksal anahtar kelimeler block, inline, self-block ve self-inline ile istediğiniz uzunluğu belirterek diğer ekseni de kullanabilirsiniz.

Taşmayı işleme

Açılır menü bileşeni oluşturup açılır menüyü istediğiniz yere yerleştirmek için sabitleme konumlandırmasını kullandınız. Ancak daha sonra menüyü ekranın diğer tarafına taşıdınız veya kullanıcı menüsü olarak kullandınız ve kullanıcının adı çok uzun. Açılır listeniz aniden ekranın dışına çıkıyor. Şimdi önemli olan nedir?

CSS sabitleme konumlandırması, konumlandırılmış öğeniz kapsayan bloğunun dışında kaldığında hızlıca sağlam bir yedek grubu oluşturmanıza olanak tanıyan yerleşik bir sisteme sahiptir.

Yedek seçenekleri

position-try-fallbacks kuralı, yedek seçeneklerin listesini alır. Varsayılan konum taşarsa taşmayan bir konum bulunana kadar her seçenek sırayla denenir.

Yedek seçenek olarak herhangi bir position-area değeri kullanabilirsiniz. Bu örnekte, İngilizce gibi soldan sağa yazma modlarında konumlandırılan öğe, ortadaki ve sağdaki sütunları kapsayacak şekilde sabitin en altına konumlandırılmaya çalışır. Bu alan taşarsa sol ve orta sütunları kapsayacak şekilde sabitleme noktasının en altına yerleştirilmeye çalışılır. Bu da taşarsa konum, taşsa bile varsayılan konuma geri döner.

.positioned-element {
  position-area: block-end span-inline-end;
  position-try-fallbacks: block-end span-inline-start;
}

Ayrıca, yaygın yedek durumları ele alan çeşitli flip- anahtar kelimeler de vardır. flip-block ve flip-inline, öğeyi blok ve satır içi eksenler üzerinde çevirmeyi dener. Ayrıca, her iki ekseni de ters çevirmek için flip-block flip-inline ile birleştirilebilir. flip-start değeri, konumlandırılmış öğeyi sabitleme noktasının başlangıç köşesinden bitiş köşesine kadar olan çapraz bir çizgi üzerinde ters çevirir.

@position-try ile özel bir yedek seçenek de oluşturabilirsiniz. Bu seçenek, kenar boşluklarını ve hizalamayı ayarlamanıza, hatta bağlantı noktasını değiştirmenize olanak tanır.

@position-try --menu-below {
  position-area: bottom span-right;
  margin-top: 1em;
}

#positioned-element {
  position-try: --menu-below;
}

Varyant oluşturmak için flip-block ve flip-inline, @position-try yedek seçeneklerine eklenebilir.

#positioned-element {
  position-try: --menu-below, flip-inline --menu-below;
}

Önceki örnekte tarayıcı, taşmayan bir çözüm bulduğu anda durarak aşağıdaki adımları uygular.

1. Öğe, sabitin sağ alt kısmına position-area: end ile yerleştirilir.
2. Bu taşarsa öğe, --bottom-span-right adlı özel yedek seçenekle yerleştirilir. Bu seçenek, öğeyi position-area: bottom span-right ile birlikte ve altında ek bir kenar boşluğuyla yerleştirir.
3. Bu öğe taşarsa özel yedek seçeneğini flip-inline ile birleştiren flip-inline --bottom-span-right ile yerleştirilir. flip-inline, aslında position-area: bottom span-left'dir.
4. Bu durumda taşma olursa öğe, tamamen farklı bir sabitleme noktasının altına yerleştiren --use-alternate özel yedek seçeneği kullanılarak yerleştirilir.
5. Bu taşarsa öğe, taşacağı bilinmesine rağmen position-area: end ile orijinal yerleşimine geri döner.

Yedek sipariş

Varsayılan olarak, ilk konum taştığında tarayıcı, taşmayan bir konum bulunana kadar position-try-fallbacks içindeki her seçeneği dener. Her geri dönüş seçeneğini test etmek için bu davranışı position-try-order ile geçersiz kılabilir ve belirtilen bir eksende en fazla alana sahip olanı kullanabilirsiniz.

Ekseni, mantıksal anahtar kelimeler most-block-size ve most-inline-size ya da fiziksel anahtar kelimeler most-height ve most-width ile belirtebilirsiniz.

position-try-order ve position-try-fallbacks, position-try kısaltmasıyla birleştirilebilir. Bu durumda kısaltma önce gelir.

Kaydırıyor

Kullanıcılar kaydırma işlemi yaptığında sayfanın akıcı bir şekilde hareket etmesini bekler. Bunu sağlamak için tarayıcılar, kaydırma sırasında bağlantı konumlandırmasının nasıl kullanılabileceği konusunda sınırlamalar getirir.

Konumlandırılmış bir öğeyi farklı kaydırma kapsayıcılarındaki sabitleme noktalarına bağlayabilirsiniz ancak öğe yalnızca sabitleme noktalarından birinin kaydırılmasına yanıt olarak hareket eder. Bu, bir popover'dan gelen örtülü bağlantı veya position-anchor değeri olan varsayılan bağlantı olacaktır.

Konumlandırılmış öğenin, sabitleme görünümden kaydırılsa bile görünür kaldığını fark edeceksiniz. Sabit öğeyi, sabit nokta gizlendiğinde gizlemek için position-visibility: anchors-visible değerini ayarlayın. Bu durum yalnızca bağlantı aşırı kaydırıldığında değil, başka şekillerde (ör. visibility: hidden ile) gizlendiğinde de geçerlidir.

Anlayıp anlamadığınızı kontrol etme