معرفی CSS Anchor positioning API

Una Kravets

منتشر شده: ۱۰ مه ۲۰۲۴

API موقعیت‌یابی لنگر در CSS، انقلابی در توسعه وب است زیرا به شما امکان می‌دهد عناصر را نسبت به سایر عناصر، که به عنوان لنگر شناخته می‌شوند، به صورت بومی موقعیت‌دهی کنید. این API الزامات پیچیده طرح‌بندی را برای بسیاری از ویژگی‌های رابط کاربری مانند منوها و زیرمنوها، راهنماهای ابزار، انتخاب‌ها، برچسب‌ها، کارت‌ها، دیالوگ‌های تنظیمات و موارد دیگر ساده می‌کند. با موقعیت‌یابی لنگر که در مرورگر تعبیه شده است، می‌توانید رابط‌های کاربری لایه‌ای را بدون تکیه بر کتابخانه‌های شخص ثالث بسازید و دنیایی از امکانات خلاقانه را به روی خود باز کنید.

موقعیت‌یابی لنگر از Chrome 125 در دسترس است.

مفاهیم اصلی: لنگرها و عناصر موقعیت‌یابی شده

در قلب این API، رابطه بین لنگرها و عناصر موقعیت‌یابی‌شده قرار دارد. یک لنگر، عنصری است که با استفاده از ویژگی anchor-name به عنوان نقطه مرجع تعیین می‌شود. یک عنصر موقعیت‌یابی‌شده، عنصری است که با استفاده از ویژگی position-anchor یا با استفاده صریح anchor-name در منطق موقعیت‌یابی خود، نسبت به یک لنگر قرار می‌گیرد.

راه‌اندازی لنگرها

ایجاد یک anchor ساده است. ویژگی anchor-name را به عنصر انتخاب شده اعمال کنید و یک شناسه منحصر به فرد به آن اختصاص دهید. این شناسه منحصر به فرد باید مانند یک متغیر CSS، با دو خط تیره شروع شود.

.anchor-button {
    anchor-name: --anchor-el;
}

پس از اختصاص یک نام لنگر، .anchor-button به عنوان یک لنگر عمل می‌کند و آماده است تا قرارگیری عناصر دیگر را هدایت کند. می‌توانید این لنگر را به یکی از دو روش زیر به عناصر دیگر متصل کنید:

لنگرهای ضمنی

اولین راه برای اتصال یک لنگر به عنصر دیگر، استفاده از یک لنگر ضمنی مانند مثال کد زیر است. ویژگی position-anchor به عنصری که می‌خواهید به لنگر خود متصل کنید اضافه می‌شود و نام لنگر (در این مورد --anchor-el ) را به عنوان یک مقدار دارد.

.positioned-notice {
    position-anchor: --anchor-el;
}

با یک رابطه anchor ضمنی، می‌توانید عناصر را با استفاده از anchor() بدون مشخص کردن صریح نام anchor در اولین آرگومان آن، موقعیت‌یابی کنید.

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

لنگرهای صریح

به عنوان یک روش جایگزین، می‌توانید از نام لنگر مستقیماً در تابع لنگر استفاده کنید (برای مثال، top: anchor(--anchor-el bottom ). به این روش، لنگر صریح می‌گویند و اگر می‌خواهید به چندین عنصر لنگر بزنید، می‌تواند مفید باشد (برای مثال به ادامه مطلب مراجعه کنید).

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

عناصر را نسبت به لنگرها (anchors) قرار دهید

موقعیت‌یابی لنگر بر اساس موقعیت‌یابی مطلق CSS ساخته شده است. برای استفاده از مقادیر موقعیت‌یابی، باید position: absolute به عنصر موقعیت‌یابی شده خود اضافه کنید. سپس، از تابع anchor() برای اعمال مقادیر موقعیت‌یابی استفاده کنید. به عنوان مثال، برای قرار دادن یک عنصر لنگرگذاری شده در سمت چپ بالای عنصر لنگرگذاری شده، از موقعیت‌یابی زیر استفاده کنید:

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

حالا شما یک عنصر را به عنصر دیگر متصل کرده‌اید، همانطور که در تصویر زیر نشان داده شده است.

برای استفاده از موقعیت‌یابی منطقی برای این مقادیر، معادل‌ها به شرح زیر هستند:

• top = inset-block-start
• left = inset-inline-start
• bottom = inset-block-end
• right = inset-inline-end

یک عنصر موقعیت‌یابی شده را با استفاده از anchor-center در مرکز قرار دهید

برای اینکه عنصر موقعیت‌یابی شده با anchor نسبت به anchor خود را آسان‌تر کنید، مقدار جدیدی به نام anchor-center وجود دارد که می‌تواند با ویژگی‌های justify-self ، align-self ، justify-items و align-items استفاده شود.

این مثال، مثال قبلی را با استفاده از justify-self: anchor-center برای قرار دادن عنصر موقعیت‌یابی شده در مرکز بالای لنگر آن، اصلاح می‌کند.

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

لنگرهای چندگانه

عناصر می‌توانند به بیش از یک لنگر متصل شوند. این بدان معناست که ممکن است نیاز داشته باشید مقادیر موقعیتی را تنظیم کنید که نسبت به بیش از یک لنگر موقعیت‌یابی شوند. این کار را با استفاده از تابع anchor() انجام دهید و به صراحت بیان کنید که به کدام لنگر در آرگومان اول ارجاع می‌دهید. در مثال زیر، گوشه بالا سمت چپ یک عنصر موقعیت‌یابی شده به گوشه پایین سمت راست یک لنگر متصل شده است و گوشه پایین سمت راست عنصر موقعیت‌یابی شده به گوشه بالا سمت چپ لنگر دوم متصل شده است:

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}

موقعیت با inset-area

علاوه بر موقعیت‌یابی جهت‌دار پیش‌فرض از موقعیت‌یابی مطلق، یک مکانیزم طرح‌بندی جدید در API لنگراندازی به نام ناحیه درج (inset area) گنجانده شده است.

ناحیه Inset قرار دادن عناصر موقعیت‌یابی‌شده با لنگر را نسبت به لنگرهای مربوطه آسان می‌کند و روی یک شبکه ۹ خانه‌ای با عنصر لنگر در مرکز کار می‌کند.

گزینه‌های مختلف موقعیت‌یابی ناحیه درج، که در شبکه ۹ خانه‌ای نشان داده شده است

برای استفاده از ناحیه درج به جای موقعیت‌یابی مطلق، از ویژگی inset-area با مقادیر فیزیکی یا منطقی استفاده کنید. برای مثال:

• مرکز بالا: inset-area: top یا inset-area: block-start
• مرکز چپ: inset-area: left یا inset-area: inline-start
• مرکز پایین: inset-area: bottom یا inset-area: block-end
• مرکز-راست: inset-area: right یا inset-area: inline-end

اندازه عناصر با استفاده از anchor-size()

تابع anchor-size() که بخشی از API موقعیت‌یابی anchor است، می‌تواند برای تعیین اندازه یا موقعیت یک عنصر موقعیت‌یابی شده با anchor بر اساس اندازه anchor آن (عرض، ارتفاع یا اندازه‌های درون‌خطی و بلوکی) استفاده شود.

CSS زیر مثالی از استفاده از این برای ارتفاع را نشان می‌دهد، که در آن anchor-size(height) در یک تابع calc() برای تنظیم حداکثر ارتفاع tooltip به اندازه دو برابر ارتفاع anchor استفاده می‌شود.

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

از anchor به همراه عناصر لایه بالایی مانند popover و dialog استفاده کنید.

موقعیت‌یابی لنگر با عناصر لایه بالایی مانند popover و <dialog> فوق‌العاده خوب کار می‌کند. در حالی که این عناصر در یک لایه جداگانه از بقیه زیردرخت DOM قرار دارند، موقعیت‌یابی لنگر به شما امکان می‌دهد تا آنها را به لایه بالایی متصل کنید و همراه با عناصری که در لایه بالایی نیستند، پیمایش کنید. این یک برد بزرگ برای رابط‌های لایه‌ای است.

در مثال زیر، مجموعه‌ای از پاپ‌اوورهای راهنمای ابزار با استفاده از یک دکمه باز می‌شوند. دکمه، لنگر و راهنمای ابزار، عنصر موقعیت‌یابی شده است. می‌توانید عنصر موقعیت‌یابی شده را درست مانند هر عنصر لنگرگذاری شده دیگری استایل‌دهی کنید. برای این مثال خاص، anchor-name و position-anchor استایل‌های درون‌خطی روی دکمه و راهنمای ابزار هستند. از آنجا که هر لنگر به یک نام لنگر منحصر به فرد نیاز دارد، هنگام تولید محتوای پویا، درون‌خطی کردن ساده‌ترین راه برای انجام این کار است.

موقعیت‌های لنگر را با @position-try تنظیم کنید

وقتی موقعیت اولیه‌ی لنگر را مشخص کردید، می‌توانید در صورت رسیدن لنگر به لبه‌های بلوک حاوی آن، موقعیت را تنظیم کنید. برای ایجاد موقعیت‌های لنگر جایگزین، می‌توانید از دستورالعمل @position-try به همراه ویژگی position-try-options استفاده کنید.

در مثال زیر، یک زیرمنو در سمت راست یک منو ظاهر می‌شود. منوها و زیرمنوها به خوبی از API موقعیت‌یابی لنگر به همراه ویژگی popover استفاده می‌کنند، زیرا این منوها تمایل دارند به یک دکمه‌ی ماشه متصل شوند.

برای این زیرمنو، اگر فضای افقی کافی وجود ندارد، می‌توانید آن را به زیر منو منتقل کنید. برای انجام این کار، ابتدا موقعیت اولیه را تنظیم کنید:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
}

سپس، موقعیت‌های لنگر انداخته شده‌ی پشتیبان خود را با استفاده از @position-try تنظیم کنید:

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

در نهایت، این دو را با position-try-options به هم متصل کنید. در مجموع، چیزی شبیه به این می‌شود:

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

کلمات کلیدی با قابلیت چرخش خودکار موقعیت لنگر

اگر یک تنظیم اولیه، مانند چرخاندن از بالا به پایین یا چپ به راست (یا هر دو) دارید، حتی می‌توانید از مرحله ایجاد اعلان‌های سفارشی @position-try صرف نظر کنید و از کلمات کلیدی flip که توسط مرورگر پشتیبانی می‌شوند مانند flip-block و flip-inline استفاده کنید. این کلمات به عنوان جایگزین‌هایی برای اعلان‌های سفارشی @position-try عمل می‌کنند و می‌توانند در ترکیب با یکدیگر استفاده شوند:

position-try-options: flip-block, flip-inline, flip-block flip-inline;

کلمات کلیدی معکوس می‌توانند کد انکر شما را به طور قابل توجهی ساده کنند. تنها با چند خط، می‌توانید یک انکر کاملاً کاربردی با موقعیت‌های جایگزین ایجاد کنید:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}

position-visibility برای لنگرها در زیرپیماینده‌ها

مواردی وجود دارد که ممکن است بخواهید یک عنصر را در یک زیرپیمایشگر صفحه لنگر بیندازید. در این موارد، می‌توانید با استفاده position-visibility ، میزان دیده شدن لنگر را کنترل کنید. لنگر چه زمانی در دید باقی می‌ماند؟ چه زمانی ناپدید می‌شود؟ با این ویژگی، می‌توانید بر این گزینه‌ها کنترل داشته باشید. وقتی می‌خواهید عنصر موقعیت‌دهی شده تا زمانی که لنگر از دید خارج شود، در دید باقی بماند، position-visibility: anchors-visible استفاده می‌کنید:

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

به عنوان یک روش جایگزین، می‌توانید position-visibility: no-overflow برای جلوگیری از سرریز شدن لنگر از محفظه‌اش استفاده کنید.

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}

تشخیص ویژگی و چندپر کردن

از آنجایی که پشتیبانی مرورگرها در حال حاضر محدود است، احتمالاً بهتر است از این API با رعایت برخی اقدامات احتیاطی استفاده کنید. ابتدا، می‌توانید با استفاده از کوئری ویژگی @supports ، پشتیبانی آن را مستقیماً در CSS بررسی کنید. روش انجام این کار، قرار دادن استایل‌های anchor در زیر است:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

علاوه بر این، می‌توانید ویژگی موقعیت‌یابی لنگر را با استفاده از چندپرکننده موقعیت‌یابی لنگر CSS ارائه شده توسط Oddbird ، که در فایرفاکس ۵۴، کروم ۵۱، اج ۷۹ و سافاری ۱۰ کار می‌کند، چندپرکننده کنید. این چندپرکننده از اکثر ویژگی‌های اساسی موقعیت‌یابی لنگر پشتیبانی می‌کند، اگرچه پیاده‌سازی فعلی کامل نیست و حاوی برخی سینتکس‌های قدیمی است. می‌توانید از لینک unpkg استفاده کنید یا آن را مستقیماً در یک مدیر بسته وارد کنید.

نکته‌ای در مورد دسترسی‌پذیری

اگرچه API موقعیت‌یابی لنگر به یک عنصر اجازه می‌دهد تا نسبت به عناصر دیگر موقعیت‌یابی شود، اما ذاتاً هیچ رابطه معنایی معناداری بین آنها ایجاد نمی‌کند. اگر واقعاً رابطه معنایی بین عنصر لنگر و عنصر موقعیت‌یابی‌شده وجود داشته باشد (برای مثال عنصر موقعیت‌یابی‌شده یک توضیح در نوار کناری در مورد متن لنگر باشد)، یک راه برای انجام این کار استفاده aria-details برای اشاره از عنصر لنگر به عنصر(های) موقعیت‌یابی‌شده است. نرم‌افزارهای صفحه‌خوان هنوز در حال یادگیری نحوه کار با aria-details هستند، اما پشتیبانی از آن در حال بهبود است.

<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 یا با یک عنصر <dialog> استفاده می‌کنید، مرورگر اصلاحات ناوبری فوکوس را برای دسترسی مناسب انجام می‌دهد، بنابراین نیازی نیست که popoverها یا دیالوگ‌های خود را به ترتیب DOM داشته باشید. در مورد یادداشت مربوط به دسترسی در مشخصات بیشتر بخوانید.

نتیجه‌گیری

این یک ویژگی کاملاً جدید است و ما مشتاقیم ببینیم شما با آن چه می‌سازید. تاکنون، موارد استفاده واقعاً جالبی از جامعه دیده‌ایم، مانند برچسب‌های پویا در نمودارها، خطوط اتصال، پاورقی‌ها و ارجاع متقابل بصری. در حالی که شما در حال آزمایش موقعیت‌یابی لنگر هستید، دوست داریم نظرات شما را بشنویم و اگر اشکالی پیدا کردید، به ما اطلاع دهید .

مطالعه بیشتر

• رسم خط برای اتصال عناصر با موقعیت‌یابی لنگر در CSS
• CSS آینده: موقعیت‌یابی لنگر توسط رومن کوماروف
• مجموعه دموهای Anchor از Una در Codepen
• ابزار تعیین موقعیت لنگر