30-avgust, 2025O'zbek

CSS-da kuchli, to'qnashuvlardan xabardor joylashtirish imkoniyatlarini oching. @position-try va langarli joylashtirish tooltip va popover kabi murakkab UI muammolarini qanday hal qilishini o'rganing, JavaScript-ga bog'liqlikni kamaytiring.

Absolyutdan tashqari: CSS @position-try va Langarli joylashtirishga chuqur kirish

O'n yillar davomida veb-dasturchilar umumiy UI muammolari bilan kurashib kelishmoqda: triggerga nisbatan aqlli ravishda o'zini joylashtiradigan tooltip'lar, popover'lar, kontekst menyulari va boshqa suzuvchi elementlarni yaratish. An'anaviy yondashuv deyarli har doim CSS `position: absolute` va pozitsiyalarni hisoblash, ko'rish oynasi bilan to'qnashuvlarni aniqlash va elementning joylashuvini tezda o'zgartirish uchun katta miqdordagi JavaScript o'rtasidagi nozik bir raqsni o'z ichiga olgan.

JavaScript-ga asoslangan bu yechim, samarali bo'lsa-da, o'zining kamchiliklariga ega: ishlash samaradorligiga yuk, texnik xizmat ko'rsatishning murakkabligi va mantiqni mustahkam saqlash uchun doimiy kurash. Popper.js kabi kutubxonalar aynan shu muammoni tabiiy ravishda hal qilish juda qiyin bo'lgani uchun sanoat standartiga aylandi. Ammo bu murakkab joylashtirish strategiyalarini to'g'ridan-to'g'ri CSS-da e'lon qila olsak-chi?

CSS Langarli Joylashtirish API-si bilan tanishing, bu stsenariylarni qanday boshqarishimizni inqilob qiladigan yangi taklif. Uning markazida ikkita kuchli tushuncha yotadi: bir elementni boshqasiga, ularning DOM aloqasidan qat'i nazar, "langarlash" qobiliyati va @position-try bilan belgilanadigan zaxira qoidalari to'plami. Ushbu maqola CSS-dagi ushbu yangi yo'nalishni har tomonlama o'rganib chiqadi va sizga yanada mustahkam, samarali va deklarativ UI'lar yaratish imkonini beradi.

An'anaviy joylashtirish bilan bog'liq doimiy muammo

Yangi yechimning nafisligini qadrlashdan oldin, biz avval eskisining cheklovlarini tushunishimiz kerak. Dinamik joylashtirishning asosiy vositasi har doim `position: absolute` bo'lib kelgan, u elementni o'ziga eng yaqin joylashgan ota-elementga nisbatan joylashtiradi.

JavaScript tayanchi

Tugma ustida paydo bo'lishi kerak bo'lgan oddiy tooltipni ko'rib chiqing. `position: absolute` yordamida siz uni to'g'ri joylashtirishingiz mumkin. Ammo bu tugma brauzer oynasining yuqori chetiga yaqin bo'lsa-chi? Tooltip kesilib qoladi. Yoki o'ng chetiga yaqin bo'lsa-chi? Tooltip chiqib ketadi va gorizontal aylantirish chizig'ini paydo qiladi.

Buni hal qilish uchun dasturchilar tarixan JavaScript-ga tayanganlar:

`getBoundingClientRect()` yordamida langar elementining pozitsiyasi va o'lchamlarini olish.
Tooltipning o'lchamlarini olish.
Ko'rish oynasining o'lchamlarini olish (`window.innerWidth`, `window.innerHeight`).
Ideal `top` va `left` qiymatlarini aniqlash uchun bir qator hisob-kitoblarni bajarish.
Ushbu ideal pozitsiya ko'rish oynasi chetlari bilan to'qnashuvga olib keladimi yoki yo'qligini tekshirish.
Agar shunday bo'lsa, muqobil pozitsiya uchun qayta hisoblash (masalan, uni tugma ostida paydo bo'lishi uchun aylantirish).
Layout o'zgarishi mumkin bo'lgan har qanday vaqtda bu butun jarayonni takrorlash uchun `scroll` va `resize` hodisalariga tinglovchilar qo'shish.

Bu faqatgina taqdimotga oid vazifa bo'lib tuyulsa-da, juda katta mantiqni talab qiladi. U mo'rt, ehtiyotkorlik bilan amalga oshirilmasa, layoutda sakrashlarga (jank) olib kelishi mumkin va ilovangizning paket hajmi va asosiy ish yukini oshiradi.

Yangi paradigma: CSS Langarli Joylashtirish bilan tanishuv

CSS Langarli Joylashtirish API-si bu munosabatlarni boshqarishning deklarativ, faqat CSS-ga asoslangan usulini taqdim etadi. Asosiy g'oya ikki element o'rtasida bog'liqlik yaratishdir: joylashtirilgan element (masalan, tooltip) va uning langari (masalan, tugma).

Asosiy xususiyatlar: `anchor-name` va `position-anchor`

Sehr ikkita yangi CSS xususiyati bilan boshlanadi:

`anchor-name`: Ushbu xususiyat siz mos yozuvlar nuqtasi sifatida foydalanmoqchi bo'lgan elementga qo'llaniladi. U langarga boshqa joyda havola qilinishi mumkin bo'lgan noyob, chiziqcha bilan boshlangan nom beradi.
`position-anchor`: Ushbu xususiyat joylashtirilgan elementga qo'llaniladi va unga joylashtirish hisob-kitoblari uchun qaysi nomlangan langardan foydalanish kerakligini aytadi.

Keling, oddiy misolni ko'rib chiqaylik:

            
<!-- HTML tuzilmasi -->
<button id="my-button">Ustiga olib boring</button>
<div class="tooltip">Bu tooltip!</div>

<!-- CSS -->
#my-button {
  anchor-name: --my-button-anchor;
}

.tooltip {
  position: absolute;
  position-anchor: --my-button-anchor;
  /* Endi biz langarga nisbatan joylashtirishimiz mumkin */
  bottom: anchor(top);
  left: anchor(center);
}

Ushbu parchada tugma `--my-button-anchor` nomli langar sifatida belgilanadi. Keyin tooltip o'zini shu langarga bog'lash uchun `position-anchor` dan foydalanadi. Haqiqiy inqilobiy qismi `anchor()` funksiyasidir, u bizga langarning chegaralarini (`top`, `bottom`, `left`, `right`, `center`) joylashtirish xususiyatlarimiz uchun qiymat sifatida ishlatishga imkon beradi.

Bu allaqachon ishlarni soddalashtiradi, lekin u hali ko'rish oynasi bilan to'qnashuv muammosini hal qilmaydi. Aynan shu yerda @position-try yordamga keladi.

Yechimning markazi: `@position-try` va `position-fallback`

Agar langarli joylashtirish elementlar o'rtasida bog'liqlik yaratsa, `@position-try` aql-zakovatni ta'minlaydi. U sizga ustuvorlik berilgan muqobil joylashtirish strategiyalari ro'yxatini belgilashga imkon beradi. Keyin brauzer har bir strategiyani tartibda sinab ko'radi va joylashtirilgan elementni o'zining o'rab turgan blokiga (odatda ko'rish oynasi) kesilmasdan sig'ishiga imkon beradigan birinchisini tanlaydi.

Zaxira variantlarini belgilash

Bir `@position-try` bloki bitta joylashtirish variantini belgilaydigan nomlangan CSS qoidalari to'plamidir. Siz ulardan keraklicha ko'p yaratishingiz mumkin.

            
/* 1-variant: Langarning tepasiga joylashtirish */
@position-try --tooltip-top {
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%);
}

/* 2-variant: Langarning pastiga joylashtirish */
@position-try --tooltip-bottom {
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);
}

/* 3-variant: Langarning o'ng tomoniga joylashtirish */
@position-try --tooltip-right {
  left: anchor(right);
  top: anchor(center);
  transform: translateY(-50%);
}

/* 4-variant: Langarning chap tomoniga joylashtirish */
@position-try --tooltip-left {
  right: anchor(left);
  top: anchor(center);
  transform: translateY(-50%);
}

Har bir blok to'liq joylashtirish strategiyasini qanday belgilashiga e'tibor bering. Biz langarga nisbatan to'rtta alohida variant yaratdik: yuqori, pastki, o'ng va chap.

Zaxiralarni `position-fallback` bilan qo'llash

`@position-try` bloklaringiz tayyor bo'lgach, joylashtirilgan elementga ulardan `position-fallback` xususiyati bilan foydalanishni aytasiz. Tartib muhim — u ustuvorlikni belgilaydi.

            
.tooltip {
  position: absolute;
  position-anchor: --my-button-anchor;
  position-fallback: --tooltip-top --tooltip-bottom --tooltip-right --tooltip-left;
}

Ushbu bitta CSS qatori bilan siz brauzerga ko'rsatma berdingiz:

Birinchidan, `--tooltip-top` dagi qoidalardan foydalanib, tooltipni joylashtirishga harakat qiling.
Agar bu pozitsiya tooltipning ko'rish oynasi tomonidan kesilishiga olib kelsa, uni bekor qiling va `--tooltip-bottom` dagi qoidalarni sinab ko'ring.
Agar bu ham muvaffaqiyatsiz bo'lsa, `--tooltip-right` ni sinab ko'ring.
Va agar hamma narsa muvaffaqiyatsiz bo'lsa, `--tooltip-left` ni sinab ko'ring.

Brauzer barcha to'qnashuvlarni aniqlash va pozitsiyani almashtirishni avtomatik ravishda boshqaradi. `getBoundingClientRect()` yo'q, `resize` hodisa tinglovchilari yo'q, JavaScript yo'q. Bu imperativ JavaScript mantiqidan deklarativ CSS yondashuviga monumental o'tishdir.

To'liq, amaliy misol: To'qnashuvlardan xabardor Popover

Keling, to'liq funksional, qulay va aqlli UI komponenti uchun langarli joylashtirishni zamonaviy Popover API bilan birlashtirgan yanada mustahkam misol yarataylik.

1-qadam: HTML tuzilmasi

Biz tabiiy `popover` atributidan foydalanamiz, bu bizga holatni boshqarish (ochiq/yopiq), yengil yopish funksionalligi (tashqarida bosish uni yopadi) va qulaylik afzalliklarini tekinga beradi.

            
<button popovertarget="my-popover" id="popover-trigger">
  Meni bosing
</button>

<div id="my-popover" popover>
  <h3>Popover sarlavhasi</h3>
  <p>Ushbu popover ko'rish oynasi ichida qolish uchun o'zini aqlli ravishda qayta joylashtiradi. Brauzeringiz hajmini o'zgartirib ko'ring yoki sahifani aylantiring!</p>
</div>

2-qadam: Langarni belgilash

Biz tugmamizni langar sifatida belgilaymiz. Shuningdek, ba'zi asosiy uslublarni qo'shamiz.

            
#popover-trigger {
  /* Bu asosiy qism */
  anchor-name: --popover-anchor;

  /* Asosiy uslublar */
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

3-qadam: `@position-try` variantlarini belgilash

Endi biz joylashtirish variantlari kaskadini yaratamiz. Har bir holatda popover va trigger o'rtasida biroz bo'sh joy yaratish uchun kichik `margin` qo'shamiz.

            
/* 1-ustuvorlik: Triggerning tepasiga joylashtirish */
@position-try --popover-top {
  bottom: anchor(top, 8px);
  left: anchor(center);
}

/* 2-ustuvorlik: Triggerning pastiga joylashtirish */
@position-try --popover-bottom {
  top: anchor(bottom, 8px);
  left: anchor(center);
}

/* 3-ustuvorlik: O'ng tomonga joylashtirish */
@position-try --popover-right {
  left: anchor(right, 8px);
  top: anchor(center);
}

/* 4-ustuvorlik: Chap tomonga joylashtirish */
@position-try --popover-left {
  right: anchor(left, 8px);
  top: anchor(center);
}

Eslatma: `anchor()` funksiyasi ixtiyoriy ikkinchi argumentni qabul qilishi mumkin, u zaxira qiymat sifatida ishlaydi. Biroq, bu yerda biz marginlar uchun potentsial kelajakdagi yaxshilanishni ko'rsatish uchun nostandart sintaksisdan foydalanmoqdamiz. Bugungi kunda to'g'ri usul `calc(anchor(top) - 8px)` yoki shunga o'xshash bo'lar edi, ammo maqsad bo'shliq yaratishdir.

4-qadam: Popoverga uslub berish va zaxirani qo'llash

Nihoyat, biz popoverimizga uslub beramiz va hamma narsani bir-biriga bog'laymiz.

            
#my-popover {
  /* Popoverni nomlangan langarimizga bog'lash */
  position-anchor: --popover-anchor;

  /* Zaxira variantlarimizning ustuvorligini belgilash */
  position-fallback: --popover-top --popover-bottom --popover-right --popover-left;

  /* Buning ishlashi uchun biz fixed yoki absolute joylashtirishdan foydalanishimiz kerak */
  position: absolute;

  /* Standart uslublar */
  width: 250px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: 0; /* Popover API sukut bo'yicha margin qo'shadi, biz uni bekor qilamiz */
}

/* Popover ochilguncha yashirin bo'ladi */
#my-popover:not(:popover-open) {
  display: none;
}

Va tamom! Ushbu kod bilan siz ekran chetlari tomonidan kesilib qolmaslik uchun o'z pozitsiyasini avtomatik ravishda o'zgartiradigan to'liq ishlaydigan popoverga ega bo'lasiz. Joylashtirish mantig'i uchun JavaScript talab qilinmaydi.

Murakkab tushunchalar va nozik nazorat

Langarli Joylashtirish API-si murakkab stsenariylar uchun yanada ko'proq nazoratni taklif etadi.

`anchor()` funksiyasiga chuqurroq nazar

`anchor()` funksiyasi juda ko'p qirrali. Bu faqat to'rtta chet haqida emas. Siz langar hajmining foizlarini ham nishonga olishingiz mumkin.

`anchor(left)` yoki `anchor(start)`: Langarning chap cheti.
`anchor(right)` yoki `anchor(end)`: O'ng cheti.
`anchor(top)`: Yuqori cheti.
`anchor(bottom)`: Pastki cheti.
`anchor(center)`: Kontekstga qarab gorizontal yoki vertikal markaz. `left` yoki `right` uchun bu gorizontal markaz. `top` yoki `bottom` uchun bu vertikal markaz.
`anchor(50%)`: `anchor(center)` ga teng.
`anchor(25%)`: Langar o'qining 25% masofasidagi nuqta.

Bundan tashqari, siz `anchor-size()` funksiyasi yordamida hisob-kitoblaringizda langar o'lchamlaridan foydalanishingiz mumkin:

            
.element {
  /* Elementni o'z langarining yarmiga teng kenglikda qilish */
  width: calc(anchor-size(width) * 0.5);
}

Yashirin langarlar

Ba'zi hollarda, siz hatto `anchor-name` va `position-anchor` ni aniq belgilashingiz shart emas. Muayyan munosabatlar uchun brauzer yashirin langarni taxmin qila oladi. Eng keng tarqalgan misol - `popovertarget` tugmasi tomonidan chaqirilgan popover. Bunday holda, tugma avtomatik ravishda popover uchun yashirin langarga aylanadi va CSS-ingizni soddalashtiradi:

            
#my-popover {
  /* position-anchor kerak emas! */
  position-fallback: --popover-top --popover-bottom;
  ...
}

Bu ortiqcha kodni kamaytiradi va trigger va popover o'rtasidagi munosabatni yanada to'g'ridan-to'g'ri qiladi.

Brauzerlarni qo'llab-quvvatlash va kelajakdagi yo'l

2023-yil oxiriga kelib, CSS Langarli Joylashtirish API-si eksperimental texnologiyadir. U Google Chrome va Microsoft Edge-da funksiya bayrog'i ostida mavjud (`chrome://flags` da "Experimental Web Platform features" ni qidiring).

Hali barcha brauzerlarda ishlab chiqarish uchun tayyor bo'lmasa-da, uning yirik brauzer dvigatelida mavjudligi bu uzoq yillik CSS muammosini hal qilishga kuchli intilish borligidan dalolat beradi. Dasturchilar uchun u bilan tajriba o'tkazish, brauzer ishlab chiqaruvchilariga fikr-mulohazalar berish va elementlarni joylashtirish uchun JavaScript istisno bo'lib qoladigan kelajakka tayyorgarlik ko'rish juda muhimdir.

Uning qabul qilinish holatini "Can I use..." kabi platformalarda kuzatib borishingiz mumkin. Hozircha uni progressiv yaxshilanish vositasi sifatida ko'rib chiqing. Siz o'z UI-ingizni `@position-try` bilan qurishingiz va uni qo'llab-quvvatlamaydigan brauzerlar uchun oddiyroq, aylantirilmaydigan pozitsiyani ta'minlash uchun `@supports` so'rovidan foydalanishingiz mumkin, zamonaviy brauzerlardagi foydalanuvchilar esa yaxshilangan tajribaga ega bo'lishadi.

Popoverlardan tashqari foydalanish holatlari

Ushbu API-ning potentsial qo'llanilishi keng va oddiy tooltip'lardan ancha uzoqqa cho'ziladi.

Maxsus tanlov menyulari: Mavjud bo'shliqqa qarab aqlli ravishda yuqoriga yoki pastga ochiladigan chiroyli, maxsus `