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

Una Kravets

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

تتوفّر ميزة "تحديد موضع ثابت" من Chrome 125.

دعم المتصفح

  • 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;
}
عرض توضيحي لمرساة في الوسط باستخدام justify-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);
}
عرض توضيحي لـ anchor-size

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

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

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

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

عرض توضيحي باستخدام علامة ارتساء مع popover

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

ضبط مواضع الارتساء باستخدام @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;
}
عرض توضيحي باستخدام علامة ارتساء مع popover

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

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

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

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

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

  /* Anchor styles here */

}

بالإضافة إلى ذلك، يمكنك إضافة ميزة تحديد موضع الارتساء باستخدام عنصر polyfill لتحديد موضع ارتساء CSS من Oddbird الذي يعمل مع Firefox 54 وChrome 51 وEdge 79 وSafari 10. تتوافق رموز polyfill هذه مع معظم ميزات موضع الارتساء الأساسية، على الرغم من أن التنفيذ الحالي غير مكتمل ويحتوي على بنية قديمة. يمكنك استخدام الرابط 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. يمكنك قراءة المزيد عن الملاحظة حول إمكانية الوصول في المواصفات.

الخاتمة

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

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