CSS Anchor Positioning API

اونا کراوتس

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

Browser Support

  • کروم: ۱۲۵.
  • لبه: ۱۲۵.
  • فایرفاکس: ۱۴۷.
  • سافاری: ۲۶.

Source

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

در قلب این 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) که با استفاده از justify-center در مرکز قرار گرفته است.

اسکرین شات از نسخه ی نمایشی.

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

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

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}
نسخه آزمایشی که چندین لنگر را نشان می‌دهد.

اسکرین شات از نسخه ی نمایشی.

موقعیت با position-area

API لنگر شامل یک مکانیزم طرح‌بندی جدید با استفاده از ویژگی position-area است.

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

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

  • مرکز بالا: position-area: top یا position-area: block-start
  • مرکز-چپ: position-area: left یا position-area: inline-start
  • مرکز-پایین: position-area: bottom یا position-area: block-end
  • مرکز-راست: position-area: right یا position-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-size

اسکرین شات از نسخه ی نمایشی.

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

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

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

نسخه آزمایشی با استفاده از لنگر با popover

اسکرین شات از نسخه ی نمایشی.

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

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

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

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

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

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

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

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

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

#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;
}
نسخه آزمایشی با استفاده از لنگر با popover

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

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

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

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

#my-tooltip {
  position-anchor: --question-mark;
  position-area: top;
  position-try-fallbacks: flip-block;
}
استفاده از معکوس کردن خودکار با position-try-fallbacks: 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: anchors-visible

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

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

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

از آنجایی که پشتیبانی مرورگرها در حال حاضر محدود است، احتمالاً بهتر است از این 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 داشته باشید. در مورد یادداشت مربوط به دسترسی در مشخصات بیشتر بخوانید.

مطالعه بیشتر