إضافة واجهة برمجة تطبيقات تحديد موضع الإرساء في CSS

Una Kravets

تاريخ النشر: 10 أيار (مايو) 2024

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

تتوفّر ميزة تحديد موضع العنصر الأساسي من الإصدار 125 من Chrome.

توافق المتصفّح

  • Chrome: 125.
  • الحافة: 125.
  • Firefox: غير متوافق
  • Safari: غير متاح

المصدر

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

تعتمد هذه الواجهة برمجة التطبيقات على العلاقة بين المرسّيات والعناصر المُحدَّدة الموضع. العنصر الثابت هو عنصر تم تحديده كنقطة مرجعية باستخدام السمة anchor-name. العنصر الذي يتم تحديد موضعه هو عنصر تم وضعه نسبةً إلى ارتساء باستخدام السمة position-anchor أو بشكل صريح يستخدم 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);
}

لقطة شاشة للعرض التوضيحي.

الموضع مع inset-area

بالإضافة إلى تحديد موضع الاتجاهات التلقائي من الموضع المطلق، هناك آلية تنسيق جديدة مضمّنة في واجهة برمجة التطبيقات للارتساء تُسمى "منطقة داخلية".

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

خيارات متعدّدة لموضع منطقة الصورة المضمّنة، معروضة على شبكة من 9 خلايا

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

تقدّم خدمة مقارنة الأسعار (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-options.

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

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

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

رصد الميزات وإدراجها في رموز polyfill

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

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

  /* Anchor styles here */

}

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

الخاتمة

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

مراجع إضافية