تاريخ النشر: 29 أكتوبر 2025
بدءًا من الإصدار 143 من Chrome، يمكنك استخدام طلبات البحث في الحاويات الثابتة لتحديد الوقت الذي يستخدم فيه عنصر ثابت تحديد موضع ثابت احتياطيًا. توضّح هذه المشاركة المشكلة التي تحلّها هذه الميزة.
توفّر واجهة برمجة التطبيقات لتحديد موضع عنصر CSS ثابت طريقة فعّالة لربط عنصر (مثل عنصر منبثق) بآخر (العنصر الثابت) وتحديد مجموعة من خيارات الرجوع إلى الموضع السابق في حال عدم توفّر مساحة كافية للعنصر. على سبيل المثال، إذا تم تصميم العنصر المثبَّت في البداية ليكون في الأعلى، ولكن أثناء التمرير، وصل إلى حافة الشاشة، يمكن للمتصفّح التعامل مع عملية "القلب" لإبقائه في إطار العرض.
ومع ذلك، ترك المستوى 1 من مواصفات تحديد موضع عنصر الارتساء فجوة كبيرة: على الرغم من أنّ CSS يمكنه نقل العنصر إلى موضع احتياطي، لم يكن لديه طريقة لمعرفة الموضع الاحتياطي الذي تم اختياره. وهذا يعني أنّه لا يمكنك تطبيق أنماط مختلفة استنادًا إلى هذا الموضع النهائي. إذا تم قلب تلميح الأدوات من الأسفل إلى الأعلى، سيظل السهم يشير إلى الاتجاه الخاطئ ما لم يتم إصلاحه باستخدام JavaScript.
تعمل طلبات البحث في الحاويات المثبّتة (المحدّدة في مواصفات CSS Anchor Position Level 2) على حلّ هذه المشكلة، ما يمنح ميزة تحديد موضع العناصر المثبّتة في CSS الوعي السياقي الذي كانت تفتقر إليه.
طريقة العمل: طلب العناصر الاحتياطية
تتيح لك طلبات البحث عن الحاويات الثابتة تطبيق الأنماط استنادًا إلى كيفية تحديد المتصفّح لموضع العنصر الثابت.
يتم إعداد ذلك باستخدام ميزتَين جديدتَين في CSS:
container-type: anchored: طبِّق هذا على العنصر الذي تم ضبط موضعه (على سبيل المثال، تلميح الأدوات). سيؤدي ذلك إلى تحويله إلى حاوية طلب بحث "تدرك" حالة تحديد موضع العنصر الثابت.-
@container anchored(fallback: ...): تتيح لك بنية قاعدة at الجديدة هذه الاستعلام عن خيار position-try-fallbacks الذي تم استخدامه في النهاية.
لنفترض أنّ لديك تلميح أداة تريد وضعه في الأسفل، ولكن مع استخدام الموضع العلوي كموضع احتياطي. الرمز التالي:
- يحاول في البداية وضع
.tooltipفي أسفل العنصر الثابت (--my-anchor). - إذا لم يكن مناسبًا، ينقله الخيار الاحتياطي إلى أعلى الصفحة.
- يرصد طلب البحث
@containerذلك. عند تطبيق عملية الاحتياط الرئيسية، يصبح طلب البحثanchored(fallback: top)صحيحًا. - يتيح لك ذلك تغيير محتوى العنصر الزائف ::before من سهم "للأعلى" (▲) إلى سهم "للأسفل" (▼) وتعديل موضعه.
/* The element our tooltip is anchored to */
.anchor {
anchor-name: --my-anchor;
}
/* The positioned element (tooltip) */
.tooltip {
/* Use anchor positioning to set fallbacks */
position: absolute;
margin-top: 1rem;
position-anchor: --my-anchor;
position-area: bottom;
position-try-fallbacks: flip-block; /* Reposition in the block direction */
/* Make it an anchored query container */
container-type: anchored;
/* Add a default "up" arrow */
&::before {
content: '▲';
position: absolute;
bottom: 100%; /* Sits on top of the tooltip, pointing up */
}
}
/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
.tooltip::before {
/* The 'top' fallback was used, so flip the arrow */
content: '▼';
bottom: auto;
top: 100%; /* Move the arrow below the tooltip */
}
}
يتم تنفيذ كل ذلك بالكامل في CSS، بدون JavaScript أو أدوات مراقبة أو فئات إضافية. ملاحظة: إذا كنت تستخدم Popover API، لن تحتاج إلى تسمية عناصر الربط بشكل صريح، لأنّه يتم إنشاء علاقة ربط ضمنية.
اطّلِع على العرض التوضيحي التالي الذي يستخدم أسلوب الحدود لإنشاء مثلث CSS، ويعيد تحديد موضع المثلث باستخدام طلبات البحث المثبّتة:
الخاتمة
تتيح طلبات البحث المستندة إلى عناصر ربط للمتصفح إمكانية التعرّف على موضع عنصر محدّد حاليًا. وهذا يعني أنّه يمكنك إنشاء مكونات أكثر مرونة ومراعية للسياق. سهم تلميح الأدوات هو مثال واحد فقط، ويمكنك أيضًا:
- تغيير لون خلفية القائمة عند قلبها
- حرِّك نمط الحدود إلى الحافة الأقرب إلى نقطة الربط.
- اضبط border-radius على نافذة منبثقة ليكون الركن "المرفق" مربعًا.
- تحريك عنصر بشكل مختلف استنادًا إلى موضع الاحتياط الذي يتم محاذاته معه
هذه ميزة رائعة لتحديد موضع العناصر الثابتة ومكتبات المكوّنات بشكل عام، ما يتيح إنشاء عناصر واجهة مستخدم أكثر فعالية ومستقلة باستخدام قدر أقل من الرموز البرمجية.