واجهة CSS Anchor Positioning API

تتيح لك واجهة برمجة التطبيقات CSS Anchor Positioning API تحديد موضع العناصر بالنسبة إلى عناصر أخرى، والتي تُعرف باسم عناصر الربط. وتعمل واجهة برمجة التطبيقات هذه على تبسيط متطلبات التصميم المعقّدة للعديد من ميزات الواجهة، مثل القوائم والقوائم الفرعية والتلميحات والاختيارات والتصنيفات والبطاقات ومربّعات حوار الإعدادات وغير ذلك الكثير. من خلال تضمين ميزة تحديد موضع الارتساء في المتصفّح، يمكنك إنشاء واجهات مستخدم متعدّدة الطبقات بدون الاعتماد على مكتبات تابعة لجهات خارجية، ما يؤدي إلى فتح عالم من الإمكانيات الإبداعية.

المفاهيم الأساسية: نقاط الربط والعناصر التي تمّ تحديد موضعها

تعتمد هذه الواجهة برمجة التطبيقات على العلاقة بين المرسّيات والعناصر المُحدَّدة الموضع. الرابط هو عنصر يتم تعيينه كنقطة مرجعية باستخدام السمة anchor-name. العنصر الذي تمّ تحديد موضع له هو عنصر تمّ وضعه نسبةً إلى عنصر ارتساء باستخدام السمة position-anchor أو باستخدام anchor-name بشكل صريح في منطق تحديد الموضع.

إعداد نقاط الربط

إنّ إنشاء رابط ثابت أمر سهل. طبِّق سمة anchor-name على العنصر المحدّد، وحدِّد له معرّفًا فريدًا. ويجب إرفاق هذا المعرّف الفريد بشرطة مزدوجة، وهي تشبه إلى حد كبير متغير CSS.

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

بعد تعيين اسم ارتساء، يعمل .anchor-button كنقطة ارتساء، ويكون جاهزًا لتوجيه موضع العناصر الأخرى. يمكنك ربط هذا العنصر الأساسي بعناصر أخرى بطريقتَين:

علامات الارتساء الضمنية

الطريقة الأولى لربط علامة ارتساء بعنصر آخر هي باستخدام ارتساء ضمني كما في مثال الرمز التالي. تتم إضافة السمة position-anchor إلى العنصر الذي تريد ربطه بالعنصر الأساسي، ويكون لها اسم العنصر الأساسي (في هذه الحالة --anchor-el) كقيمة.

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

باستخدام علاقة ارتساء ضمنية، يمكنك تحديد موضع العناصر باستخدام الدالة anchor() بدون تحديد اسم الارتساء بشكل صريح في الوسيطة الأولى.

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

علامات ارتساء فاضحة

بدلاً من ذلك، يمكنك استخدام اسم العنصر المرجعي مباشرةً في دالة العنصر المرجعي (على سبيل المثال، top: anchor(--anchor-el bottom). ويُعرف هذا باسم العنصر المرجعي الصريح، ويمكن أن يكون مفيدًا إذا كنت تريد الربط بعناصر متعددة (اطّلِع على المزيد من المعلومات للحصول على مثال).

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

موضع العناصر بالنسبة إلى نقاط الربط

يستند وضع العنصر الأساسي إلى موضع 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-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);
}

الموضع باستخدام position-area

تتضمّن واجهة برمجة التطبيقات Anchoring API آلية تنسيق جديدة باستخدام السمة position-area.

تتيح لك هذه الخاصية وضع عناصر في موضع ثابت بالنسبة إلى علامات الارتساء الخاصة بها، كما تعمل على شبكة من 9 خلايا مع عنصر الارتساء في المنتصف.

لاستخدام 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()، التي تشكّل أيضًا جزءًا من واجهة برمجة تطبيقات تحديد موضع الارتساء، لتحديد حجم عنصر موضع الارتساء أو تحديد موضعه استنادًا إلى حجم علامة الارتساء (العرض أو الارتفاع أو الأحجام المضمّنة والكتلة).

يعرض رمز CSS التالي مثالاً على استخدام هذه القيمة للارتفاع، باستخدام anchor-size(height) ضمن دالة calc() لضبط الحد الأقصى للارتفاع الذي يجب أن يكون فيه التلميح النصي ضعف ارتفاع العنصر المرتبط.

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

استخدام الارتساء مع عناصر الطبقة العلوية مثل النافذة المنبثقة ومربع الحوار

يعمل موضع الربط بشكل جيد للغاية مع عناصر الطبقة العليا، مثل popover. و<dialog>. على الرغم من أنّه يتم وضع هذه العناصر في طبقة منفصلة عن بقية الشجرة الفرعية لـ DOM، يتيح لك موضع الربط ربطها مرة أخرى بالعناصر التي لا تقع في الطبقة العليا والانتقال معها. وهذا مكسب كبير للواجهات ذات الطبقات.

في المثال التالي، يتم فتح مجموعة من النوافذ المنبثقة للتلميحات باستخدام زر. يمثّل الزرّ علامة الارتساء والتلميح هو العنصر المستخدَم في الموضع. يمكنك تصميم العنصر المُحدَّد موضعه تمامًا مثل أي عنصر آخر مرتبط. في هذا المثال المحدّد، anchor-name وposition-anchor هما أسلوبان مضمّنان في الزر ونص التلميح. وبما أنّ كلّ رابط يحتاج إلى اسم رابط فريد، فإنّ تضمين الرابط هو أسهل طريقة لإجراء ذلك عند إنشاء محتوى ديناميكي.

ضبط مواضع الارتساء باستخدام @position-try

بعد تحديد موضع الارتساء الأولي، قد تحتاج إلى ضبط هذا الموضع إذا وصلت علامة الارتساء إلى حواف القطعة التي تحتوي عليها. لإنشاء مواضع بديلّة للعناصر الثابتة، يمكنك استخدام التوجيه @position-try مع السمة position-try-fallbacks.

في المثال التالي، تظهر قائمة فرعية على يسار قائمة. تُعدّ القوائم والقوائم الفرعية استخدامًا رائعًا لواجهة برمجة التطبيقات لتحديد موضع العنصر الأساسي مع سمة النافذة المنبثقة، لأنّ هذه القوائم غالبًا ما تكون مرتبطة بزر تشغيل.

بالنسبة إلى هذه القائمة الفرعية، إذا لم تكن هناك مساحة كافية أفقيًا، يمكنك نقلها أسفل القائمة بدلاً من ذلك. للقيام بذلك، قم أولاً بإعداد الموضع الأولي:

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

قلب الكلمات الرئيسية تلقائيًا في موضع ثابت

إذا كان لديك تعديل أساسي، مثل الانتقال من الأعلى إلى الأسفل أو من اليسار إلى اليمين (أو كليهما)، يمكنك تخطّي خطوة إنشاء تعريفات @position-try المخصّصة واستخدام الكلمات الرئيسية المقلوبة المتوافقة مع المتصفّح، مثل 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-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);
}

رصد الميزات واستخدام polyfilling

ونظرًا لأن دعم المتصفح محدود في الوقت الحالي، ننصحك على الأرجح باستخدام واجهة برمجة التطبيقات هذه مع بعض الاحتياطات. أولاً، يمكنك البحث عن الدعم مباشرةً في CSS باستخدام طلب البحث عن ميزة @supports. والطريقة التي يمكنك بها ذلك هي إحاطة أنماط الارتساء بالشكل التالي:

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

  /* Anchor styles here */

}

بالإضافة إلى ذلك، يمكنك استخدام تقنية polyfill لميزة تحديد موضع العنصر باستخدام تقنية polyfill لتحديد موضع العنصر باستخدام CSS من Oddbird، والتي تعمل من Firefox 54 وChrome 51 وEdge 79 وSafari 10. تتيح هذه الإضافة معظم ميزات موضع العنصر الأساسي، على الرغم من أنّ التنفيذ الحالي غير مكتمل ويحتوي على بعض البنية القديمة. يمكنك استخدام رابط unpkg أو استيراده مباشرةً في أداة إدارة الحِزم.

ملاحظة حول إمكانية الوصول

بينما تسمح واجهة برمجة تطبيقات تحديد موضع الارتساء لأحد العناصر بوضعه بالنسبة إلى العناصر الأخرى، إلا أنها لا تنشئ في حد ذاتها أي علاقة دلالية ذات مغزى بينها. إذا كانت هناك علاقة دلالية بين عنصر الرابط والعنصر الذي تمّ تحديد موضع له (على سبيل المثال، العنصر الذي تمّ تحديد موضع له هو تعليق على الشريط الجانبي عن نص الرابط)، يمكنك استخدام aria-details للإشارة من عنصر الرابط إلى العناصر التي تمّ تحديد موضع لها. لا يزال برنامج قارئ الشاشة يتعلم كيفية التعامل مع تفاصيل aria، لكن الدعم يتحسّن.

<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>، سيتولّى المتصفّح تصحيحات التنقّل في التركيز لتوفير إمكانية وصول مناسبة، لذا لن تحتاج إلى ترتيب النوافذ المنبثقة أو مربّعات الحوار حسب ترتيب DOM. يمكنك قراءة المزيد عن الملاحظة حول إمكانية الوصول في المواصفات.

محتوى إضافي للقراءة

• رسم خط لربط العناصر باستخدام CSS Anchor Positioning
• Future CSS: تثبيت موضع الإعلان من تأليف "رومان كوماروف"
• مجموعة رموز Una's Codepen للعروض التوضيحية الثابتة
• أداة تحديد موضع الارتساء