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

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

يتوفّر تحديد موضع الإعلان الثابت من Chrome 125.

المفاهيم الأساسية: علامات الارتساء والعناصر الموضوعة

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

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

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

الخلاصة

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

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

• رسم خط لربط العناصر باستخدام تحديد موضع ثابت CSS
• خدمة مقارنة الأسعار (CSS) المستقبلية: تحديد موضع ثابت من قِبل "رومان كوماروف"
• مجموعة Codepen التجريبية الخاصة بـ Una
• أداة تحديد موضع الإرساء