تتيح لك واجهة برمجة التطبيقات 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. يمكنك قراءة المزيد عن الملاحظة حول إمكانية الوصول في المواصفات.