كيف تربط أحد العناصر بعنصر آخر في الوقت الحالي؟ يمكنك محاولة تتبع مواضعها، أو استخدام شكل من أشكال عناصر الالتفاف.
<!-- index.html -->
<div class="container">
<a href="/link" class="anchor">I’m the anchor</a>
<div class="anchored">I’m the anchored thing</div>
</div>
/* styles.css */
.container {
position: relative;
}
.anchored {
position: absolute;
}
غالبًا ما لا تكون هذه الحلول مثالية. وهي تحتاج إلى JavaScript أو تستخدم ترميزًا إضافيًا. تهدف واجهة CSS API لتحديد موضع الإرساء إلى حل هذه المشكلة من خلال توفير CSS API لعناصر التوصيل. يوفر وسيلة لوضع عنصر واحد وحجمه بناءً على موضع العناصر الأخرى وحجمها.
المتصفحات المتوافقة
يمكنك تجربة واجهة برمجة تطبيقات تحديد موضع ارتساء CSS في Chrome Canary وراء علامة "الميزات التجريبية للنظام الأساسي للويب". لتفعيل هذه العلامة، عليك فتح Chrome Canary والانتقال إلى chrome://flags. بعد ذلك، فعِّل علامة "الميزات التجريبية للنظام الأساسي للويب".
هناك أيضًا رمز polyfill قيد التطوير من قِبل الفريق في Oddbird. احرص على التحقق من المستودع على github.com/oddbird/css-anchor-positioning.
يمكنك التحقق من توفّر ميزة الإرساء من خلال:
@supports(anchor-name: --foo) {
/* Styles... */
}
تجدر الإشارة إلى أنّ واجهة برمجة التطبيقات هذه لا تزال في مرحلة تجريبية ويمكن تغييرها. تتناول هذه المقالة الأجزاء المهمة على مستوى عالٍ. إضافةً إلى ذلك، فإنّ طريقة التنفيذ الحالية لا تتم مزامنتها بشكل كامل مع مواصفات مجموعة عمل CSS.
المشكلة
ما هو الإجراء الذي يجب اتّخاذه؟ تتمثل حالة الاستخدام البارزة في إنشاء تلميحات أو تجارب شبيهة بالتلميحات. في هذه الحالة، ستحتاج غالبًا إلى ربط التلميح بالمحتوى الذي يشير إليه. غالبًا ما تكون هناك حاجة إلى طريقة ما لربط عنصر بعنصر آخر. وتتوقّع أيضًا ألّا يؤدي التفاعل مع الصفحة إلى إيقاف هذه الحبكة، على سبيل المثال، إذا تنقّل المستخدم في واجهة المستخدم أو غيّر حجمها.
جزء آخر من المشكلة هو ما إذا كنت تريد التأكد من بقاء العنصر المربوط معروضًا، على سبيل المثال، إذا فتحت تلميحًا وأصبح مقطوعًا بحدود إطار العرض. قد لا تكون هذه تجربة رائعة للمستخدمين. كنت تريد تعديل التلميح.
الحلول الحالية
في الوقت الحالي، هناك بعض الطرق المختلفة التي يمكنك من خلالها التعامل مع هذه المشكلة.
الأول هو نهج "التفاف الإرساء" الأولي. أنت تأخذ كلا العنصرين وتلتفهما في حاوية. بعد ذلك، يمكنك استخدام position لتحديد موضع التلميح بالنسبة إلى علامة الارتساء.
<div class="containing-block">
<div class="tooltip">Anchor me!</div>
<a class="anchor">The anchor</a>
</div>
.containing-block {
position: relative;
}
.tooltip {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
}
يمكنك نقل الحاوية وسيظل كل شيء في المكان الذي تريده في معظم الأحيان.
هناك طريقة أخرى قد تكون إذا كنت تعرف موضع إعلان ارتساءك أو يمكنك تتبّعه بطريقة ما. يمكنك تمريره إلى التلميح مع الخصائص المخصصة.
<div class="tooltip">Anchor me!</div>
<a class="anchor">The anchor</a>
:root {
--anchor-width: 120px;
--anchor-top: 40vh;
--anchor-left: 20vmin;
}
.anchor {
position: absolute;
top: var(--anchor-top);
left: var(--anchor-left);
width: var(--anchor-width);
}
.tooltip {
position: absolute;
top: calc(var(--anchor-top));
left: calc((var(--anchor-width) * 0.5) + var(--anchor-left));
transform: translate(-50%, calc(-100% - 10px));
}
ولكن، ماذا لو كنت لا تعرف موضع ارتساء موقعك؟ قد تحتاج إلى التدخل في JavaScript. يمكنك تنفيذ أي إجراء يشبه تنفيذ الرمز البرمجي التالي، ولكن هذا يعني الآن أنّ أنماطك قد بدأت في التسرّب من CSS وإلى JavaScript.
const setAnchorPosition = (anchored, anchor) => {
const bounds = anchor.getBoundingClientRect().toJSON();
for (const [key, value] of Object.entries(bounds)) {
anchored.style.setProperty(`--${key}`, value);
}
};
const update = () => {
setAnchorPosition(
document.querySelector('.tooltip'),
document.querySelector('.anchor')
);
};
window.addEventListener('resize', update);
document.addEventListener('DOMContentLoaded', update);
يبدأ هذا في طرح بعض الأسئلة:
- متى يمكنني حساب الأنماط؟
- كيف يمكنني حساب الأنماط؟
- كم مرة يمكنني حساب الأنماط؟
هل يؤدي ذلك إلى حل المشكلة؟ قد تكون هذه المشكلة مرتبطة بحالة استخدامك، ولكن هناك مشكلة واحدة وهي: الحل الذي نقدّمه لا يتكيّف. ولا يستجيب. ماذا لو تم اقتطاع العنصر الثابت بواسطة إطار العرض؟
أنت الآن بحاجة إلى أن تقرر ما إذا كنت ستتفاعل مع هذا وكيف تريد. بدأ عدد الأسئلة والقرارات التي تحتاج إلى اتخاذها في الزيادة. كل ما تريده هو تثبيت عنصر لآخر. وفي عالم مثالي، سيتكيف الحل الخاص بك مع البيئة المحيطة به.
للتخفيف من هذه الصعوبات، يمكنك البحث عن حل JavaScript لمساعدتك. سيتكبد ذلك تكلفة إضافة تبعية إلى مشروعك، ويمكن أن يؤدي إلى حدوث مشكلات في الأداء اعتمادًا على كيفية استخدامك لها. على سبيل المثال، تستخدم بعض الحزم requestAnimationFrame للحفاظ على الموضع الصحيح. وهذا يعني أنك بحاجة أنت وفريقك إلى التعرف على الحزمة وخيارات التهيئة الخاصة بها. نتيجة لذلك، قد لا يتم تقليل أسئلتك وقراراتك، ولكن تتغير بدلاً من ذلك. ويشكّل ذلك جزءًا من "السبب" لتحديد موضع إعلان ثابت في CSS. وسيجنبك التطبيق عن التفكير في مشكلات الأداء عند حساب الموضع.
في ما يلي الشكل الذي يمكن أن يبدو عليه الرمز عند استخدام "floating-ui"، وهي حزمة شائعة لهذه المشكلة:
import {computePosition, flip, offset, autoUpdate} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.2.1/+esm';
const anchor = document.querySelector('.anchor')
const tooltip = document.querySelector('.tooltip')
const updatePosition = () => {
computePosition(anchor, tooltip, {
placement: 'top',
middleware: [offset(10), flip()]
})
.then(({x, y}) => {
Object.assign(tooltip.style, {
left: `${x}px`,
top: `${y}px`
})
})
};
const clean = autoUpdate(anchor, tooltip, updatePosition);
حاول تغيير موضع الإعلان الثابت في هذا العرض التوضيحي الذي يستخدم هذا الرمز.
قد لا يتصرف "تلميح" على النحو الذي تتوقعه. فهو يتفاعل مع الخروج من إطار العرض على المحور ص وليس على المحور س. يُرجى مراجعة المستندات لتجد الحل الذي يناسبك.
ولكن، قد يستغرق العثور على حزمة مناسبة لمشروعك الكثير من الوقت. إنها قرارات إضافية وقد تكون محبطة إذا لم تعمل بالطريقة التي تريدها.
استخدام تحديد موضع الإرساء
أدخِل واجهة برمجة تطبيقات تحديد موضع الإرساء في CSS. والفكرة هي الحفاظ على أنماطك في CSS وتقليل عدد القرارات التي تحتاج إلى اتخاذها. أنت تأمل في تحقيق النتيجة نفسها، ولكن الهدف هو تحسين تجربة المطوّرين.
- لا حاجة إلى JavaScript.
- دَع المتصفّح يحدّد أفضل موضع وفقًا لإرشاداتك.
- لا مزيد من التبعيات التابعة لجهات خارجية
- ما مِن عناصر برنامج تضمين.
- تعمل مع العناصر الموجودة في الطبقة العلوية.
دعونا نعيد ابتكار المشكلة التي كنا نحاول حلها أعلاه ونعالجها. لكن بدلاً من ذلك، استخدم تشبيه القارب مع المرساة. وهي تمثل العنصر الثابت والارتساء. ويمثل الماء القطعة الموجودة.
أولاً، عليك اختيار كيفية تعريف علامة الارتساء. يمكنك إجراء ذلك داخل خدمة مقارنة الأسعار (CSS) من خلال ضبط السمة anchor-name على عنصر الارتساء. ويمكنها قبول قيمة dash-ident.
.anchor {
anchor-name: --my-anchor;
}
ويمكنك بدلاً من ذلك تحديد علامة ارتساء في ترميز HTML باستخدام السمة anchor. قيمة السمة هي معرّف عنصر الارتساء. يؤدّي ذلك إلى إنشاء علامة ارتساء ضمنية.
<a id="my-anchor" class="anchor"></a>
<div anchor="my-anchor" class="boat">I’m a boat!</div>
بعد تحديد علامة ارتساء، يمكنك استخدام الدالة anchor. تستخدم الدالة anchor 3 وسيطات:
- عنصر الارتساء:
anchor-nameمن الارتساء المطلوب استخدامه، أو يمكنك حذف القيمة لاستخدام علامة ارتساءimplicit. ويمكن تحديدها من خلال علاقة HTML، أو من خلال سمةanchor-defaultبقيمةanchor-name. - جانب ثابت: كلمة رئيسية للموضع الذي تريد استخدامه. قد تكون
topأوrightأوbottomأوleftأوcenterوما إلى ذلك، أو يمكنك تمرير نسبة مئوية. على سبيل المثال، تكون نسبة% 50 تساويcenter. - القيمة الاحتياطية: هذه قيمة احتياطية اختيارية تقبل الطول أو النسبة المئوية.
أنت تستخدم الدالة anchor باعتبارها قيمة لسمات الإدخال (top أو right أو bottom أو left أو ما يعادلها من العناصر المنطقية) للعنصر المرتبط. يمكنك أيضًا استخدام الدالة anchor في calc:
.boat {
bottom: anchor(--my-anchor top);
left: calc(anchor(--my-anchor center) - (var(--boat-size) * 0.5));
}
/* alternative with anchor-default */
.boat {
anchor-default: --my-anchor;
bottom: anchor(top);
left: calc(anchor(center) - (var(--boat-size) * 0.5));
}
ما من خاصية center مضمّنة، لذا أحد الخيارات المتاحة هو استخدام calc إذا كنت تعرف حجم العنصر المرتبط. لماذا لا تستخدم translate؟ يمكنك استخدام هذا التلميح:
.boat {
anchor-default: --my-anchor;
bottom: anchor(top);
left: anchor(center);
translate: -50% 0;
}
ولا يأخذ المتصفّح في الاعتبار المواضع المحوّلة للعناصر الثابتة. وسيتضح سبب أهمية ذلك عند النظر في العناصر الاحتياطية للموضع والموضع التلقائي.
ربما لاحظت استخدام السمة المخصّصة --boat-size أعلاه. ولكن، إذا كنت تريد أن يستند حجم العنصر الثابت إلى حجم الارتساء، فيمكنك أيضًا الوصول إلى هذا الحجم. بدلاً من احتسابها بنفسك، يمكنك استخدام الدالة anchor-size. على سبيل المثال، لجعل القارب لدينا أربعة أضعاف عرض مراسينا:
.boat {
width: calc(4 * anchor-size(--my-anchor width));
}
يمكنك أيضًا الوصول إلى الارتفاع باستخدام ميزة anchor-size(--my-anchor height). ويمكنك استخدامه لضبط حجم أي من المحور أو كليهما.
ماذا لو أردت تثبيت عنصر ذي موضع absolute؟ القاعدة هي أن العناصر لا يمكن أن تكون أشقاء. في هذه الحالة، يمكنك لفّ علامة الارتساء بحاوية لها تحديد موضع relative. بعد ذلك، يمكنك تثبيت المحتوى عليه.
<div class="anchor-wrapper">
<a id="my-anchor" class="anchor"></a>
</div>
<div class="boat">I’m a boat!</div>
شاهِد هذا العرض التوضيحي حيث يمكنك سحب المرساة حولها ليتتبّعها القارب.
تتبع موضع التمرير
في بعض الحالات، قد يكون عنصر الارتساء داخل حاوية تمرير. وفي الوقت نفسه، قد يكون العنصر الثابت خارج هذه الحاوية. نظرًا لأن التمرير يحدث في سلسلة محادثات مختلفة عن التنسيق، فأنت بحاجة إلى طريقة لتتبعه. ويمكن للسمة anchor-scroll إجراء ذلك. وتقوم بتعيينه على العنصر الثابت ومنحه قيمة الارتساء الذي تريد تتبعه.
.boat { anchor-scroll: --my-anchor; }
يمكنك تجربة هذا العرض التوضيحي حيث يمكنك تفعيل ميزة "anchor-scroll" وإيقافها باستخدام مربّع الاختيار في الزاوية.
ويسقط هذا التشابه قليلاً هنا، كما هو الحال في العالم المثالي، يكون القارب ومرسى القارب في الماء. وتعزز أيضًا ميزات مثل واجهة برمجة التطبيقات Popover API القدرة على إبقاء العناصر ذات الصلة قريبة. على الرغم من ذلك، ستعمل ميزة تحديد موضع الإرساء مع العناصر الموجودة في الطبقة العليا. هذه إحدى الفوائد الرئيسية من وراء واجهة برمجة التطبيقات: القدرة على ربط العناصر في تدفقات مختلفة.
فكّر في هذا العرض التوضيحي الذي يحتوي على حاوية تمرير مع علامات ارتساء تحتوي على تلميحات. إنّ عناصر التلميح التي تظهر في النوافذ المنبثقة قد لا تكون في الموقع الجغرافي نفسه مع علامات الارتساء:
ولكن ستلاحظ كيفية تتبع النوافذ المنبثقة لروابط الروابط إلى جانبها. يمكنك تغيير حجم حاوية التمرير هذه، وسيتم تعديل المواضع.
الموضع الاحتياطي وتحديد الموضع التلقائي
وهنا ترتفع قوة تحديد موضع الإرساء إلى أعلى مستوى. يمكن للسمة position-fallback تحديد موضع العنصر الثابت استنادًا إلى مجموعة من العناصر الاحتياطية التي تقدّمها. أنت توجّه المتصفح من خلال أنماطك واجعله يتناسب بالشكل المطلوب.
وتُعدّ حالة الاستخدام الشائعة هنا تلميحًا من المفترض أن يتغير بين الظهور أعلى علامة الارتساء أو أسفلها. ويعتمد هذا السلوك على ما إذا كان سيتم اقتصاص التلميح بواسطة حاويته. عادة ما تكون هذه الحاوية هي إطار العرض.
إذا تعمّقت في رمز آخر عرض توضيحي، لعلك لاحظت أنّ هناك سمة position-fallback قيد الاستخدام. إذا قمت بالتمرير في الحاوية، ربما لاحظت أن تلك النوافذ المنبثقة الثابتة قفزت. وحدث ذلك عندما اقتربت علامات الارتساء الخاصة بها من حدود إطار العرض. في هذه اللحظة، تحاول النوافذ المنبثقة التكيف للبقاء في إطار العرض.
قبل إنشاء position-fallback صريح، سيتم أيضًا توفير تحديد الموضع التلقائي. يمكنك الحصول على هذا التأثير مجانًا باستخدام قيمة auto في كلّ من دالة الارتساء وخاصية الإدخال المعاكسة. على سبيل المثال، إذا كنت تستخدم السمة anchor للسمة bottom، اضبط السمة top على auto.
.tooltip {
position: absolute;
bottom: anchor(--my-anchor auto);
top: auto;
}
والخيار البديل لتحديد الموضع التلقائي هو استخدام position-fallback صريح. ويتطلّب هذا الإجراء تحديد مجموعة احتياطية للموضع. وسينتقل المتصفّح إلى هذه الإعدادات إلى أن يعثر على متصفّح يمكنه استخدامه، ثم يطبّق هذا الموضع. وإذا تعذّر العثور على رابط صالح، يتم ضبطه تلقائيًا على أوّل حقل محدّد.
قد يظهر position-fallback الذي يحاول عرض التلميحات أعلاه ثم أدناه على النحو التالي:
@position-fallback --top-to-bottom {
@try {
bottom: anchor(top);
left: anchor(center);
}
@try {
top: anchor(bottom);
left: anchor(center);
}
}
يبدو تطبيق ذلك على التلميحات كما يلي:
.tooltip {
anchor-default: --my-anchor;
position-fallback: --top-to-bottom;
}
يتيح استخدام anchor-default إمكانية إعادة استخدام position-fallback لعناصر أخرى. يمكنك أيضًا استخدام موقع مخصّص على مستوى نطاق لإعداد anchor-default.
فكر في هذا العرض التوضيحي حول استخدام القارب مرة أخرى. هناك position-fallback مجموعة. عندما تغيّر موضع المرسى، سيتم ضبط القارب ليبقى داخل الحاوية. جرِّب تغيير قيمة المساحة المتروكة أيضًا التي تؤدي إلى تعديل المساحة المتروكة للنص. لاحظ كيف يقوم المتصفح بتصحيح الموضع. ويتم تغيير المواضع عن طريق تغيير محاذاة شبكة الحاوية.
يتم عرض position-fallback بمزيد من التفاصيل في هذه المرة أثناء تجربة المواضع في اتجاه عقارب الساعة.
.boat {
anchor-default: --my-anchor;
position-fallback: --compass;
}
@position-fallback --compass {
@try {
bottom: anchor(top);
right: anchor(left);
}
@try {
bottom: anchor(top);
left: anchor(right);
}
@try {
top: anchor(bottom);
right: anchor(left);
}
@try {
top: anchor(bottom);
left: anchor(right);
}
}
أمثلة
الآن لديك فكرة عن الميزات الأساسية لتحديد موضع إعلان الارتساء، لنلقِ نظرة على بعض الأمثلة الشيقة بخلاف التلميحات. تهدف هذه الأمثلة إلى تدفّق أفكارك حول الطرق التي يمكنك من خلالها استخدام تحديد موضع الإرساء. أفضل طريقة لتحسين المواصفات هي بمساعدة مستخدمين حقيقيين مثلك.
قوائم السياقات
لنبدأ بقائمة سياقات باستخدام واجهة برمجة التطبيقات Popover API. الفكرة هي أن النقر على الزر الذي يحتوي على شارة الرتبة سيكشف قائمة سياق. وسيكون لهذه القائمة قائمتها الخاصة لتوسيعها.
فالترميز ليس الجزء المهم هنا. لكن لديك ثلاثة أزرار يستخدم كل منها "popovertarget". بعد ذلك، سيصبح لديك ثلاثة عناصر باستخدام السمة popover. يتيح لك هذا إمكانية فتح قوائم السياق بدون أي JavaScript. يمكن أن يبدو ذلك كالتالي:
<button popovertarget="context">
Toggle Menu
</button>
<div popover="auto" id="context">
<ul>
<li><button>Save to your Liked Songs</button></li>
<li>
<button popovertarget="playlist">
Add to Playlist
</button>
</li>
<li>
<button popovertarget="share">
Share
</button>
</li>
</ul>
</div>
<div popover="auto" id="share">...</div>
<div popover="auto" id="playlist">...</div>
والآن، يمكنك تحديد position-fallback ومشاركته بين قوائم السياق. نتأكّد من إلغاء ضبط أي أنماط inset للنوافذ المنبثقة أيضًا.
[popovertarget="share"] {
anchor-name: --share;
}
[popovertarget="playlist"] {
anchor-name: --playlist;
}
[popovertarget="context"] {
anchor-name: --context;
}
#share {
anchor-default: --share;
position-fallback: --aligned;
}
#playlist {
anchor-default: --playlist;
position-fallback: --aligned;
}
#context {
anchor-default: --context;
position-fallback: --flip;
}
@position-fallback --aligned {
@try {
top: anchor(top);
left: anchor(right);
}
@try {
top: anchor(bottom);
left: anchor(right);
}
@try {
top: anchor(top);
right: anchor(left);
}
@try {
bottom: anchor(bottom);
left: anchor(right);
}
@try {
right: anchor(left);
bottom: anchor(bottom);
}
}
@position-fallback --flip {
@try {
bottom: anchor(top);
left: anchor(left);
}
@try {
right: anchor(right);
bottom: anchor(top);
}
@try {
top: anchor(bottom);
left: anchor(left);
}
@try {
top: anchor(bottom);
right: anchor(right);
}
}
ويمنحك هذا واجهة مستخدم لقائمة سياق مدمجة تكيُّفي. جرِّب تغيير موضع المحتوى من خلال الاختيار. يؤدي الخيار الذي تختاره إلى تعديل محاذاة الشبكة. ويؤثر ذلك في كيفية تحديد موضع الإرساء في مواضع النوافذ المنبثقة.
التركيز والمتابعة
يجمع هذا العرض التوضيحي بين أساسيات CSS من خلال إضافة :has(). والفكرة هي نقل مؤشر مرئي لـ input محل التركيز.
ويمكنك إجراء ذلك من خلال ضبط علامة ارتساء جديدة في وقت التشغيل. في هذا العرض التوضيحي، يتم تعديل خاصية مخصَّصة على مستوى النطاق عند التركيز على الإدخال.
#email {
anchor-name: --email;
}
#name {
anchor-name: --name;
}
#password {
anchor-name: --password;
}
:root:has(#email:focus) {
--active-anchor: --email;
}
:root:has(#name:focus) {
--active-anchor: --name;
}
:root:has(#password:focus) {
--active-anchor: --password;
}
:root {
--active-anchor: --name;
--active-left: anchor(var(--active-anchor) right);
--active-top: calc(
anchor(var(--active-anchor) top) +
(
(
anchor(var(--active-anchor) bottom) -
anchor(var(--active-anchor) top)
) * 0.5
)
);
}
.form-indicator {
left: var(--active-left);
top: var(--active-top);
transition: all 0.2s;
}
ولكن كيف يمكنك الذهاب إلى أبعد من ذلك؟ يمكنك استخدامه لتراكب تعليمي. يمكن أن يؤدي التلميح إلى التنقّل بين نقاط الاهتمام وتعديل محتواها. يمكنك عرض المحتوى بأشكال متقاطعة. يمكن أن تعمل هنا الصور المتحركة المنفصلة التي تتيح لك تحريك display أو عرض الانتقالات.
حساب الرسم البياني الشريطي
ومن الإجراءات الممتعة الأخرى التي يمكنك تنفيذها عند تحديد موضع إعلان الارتساء، دمجه مع calc. تخيل أن هناك مخططًا يحتوي على بعض النوافذ المنبثقة التي تشير إلى المخطط.
يمكنك تتبُّع القيم الأعلى والأدنى باستخدام CSS min وmax. ويمكن أن تظهر خدمة مقارنة الأسعار (CSS) لذلك على النحو التالي:
.chart__tooltip--max {
left: anchor(--chart right);
bottom: max(
anchor(--anchor-1 top),
anchor(--anchor-2 top),
anchor(--anchor-3 top)
);
translate: 0 50%;
}
يوجد بعض JavaScript قيد التشغيل لتحديث قيم الرسم البياني وبعض CSS لنمط الرسم البياني. غير أن تحديد موضع الإرساء يتولى مسؤولية تحديثات التخطيط بالنسبة إلينا.
تغيير الحجم الأسماء المعرِّفة
لا يتعين عليك وضع علامة ارتساء إلى عنصر واحد فقط. يمكنك استخدام العديد من علامات الارتساء لعنصر ما. ربما لاحظت ذلك في مثال المخطط الشريطي. تم تثبيت التلميحات في الرسم البياني ثم في الشريط المناسب. إذا كنت قد أخذت هذا المفهوم إلى أبعد من ذلك، فيمكنك استخدامه لتغيير حجم العناصر.
يمكنك التعامل مع نقاط الارتساء مثل المقابض المخصّصة لتغيير الحجم والاعتماد على قيمة inset.
.container {
position: absolute;
inset:
anchor(--handle-1 top)
anchor(--handle-2 right)
anchor(--handle-2 bottom)
anchor(--handle-1 left);
}
في هذا العرض التوضيحي، يجعل GreenSock Draggable المقابض قابلة للسحب. في المقابل، يتمّ تغيير حجم العنصر <img> لملء الحاوية التي يتم ضبطها لملء الفجوة بين المقبضَين.
A Select Menu (قائمة اختيار)؟
وتكون هذه الصورة الأخيرة مشوّقة لما سيأتي لاحقًا. ولكن يمكنك إنشاء نافذة منبثقة يمكن التركيز عليها، وقد أصبح بإمكانك تحديد موضع الإعلان الثابت. يمكنك إنشاء أساسيات عنصر <select> قابل للأنماط.
<div class="select-menu">
<button popovertarget="listbox">
Select option
<svg>...</svg>
</button>
<div popover="auto" id="listbox">
<option>A</option>
<option>Styled</option>
<option>Select</option>
</div>
</div>
ستسهِّل استخدام anchor الضمنية هذه العملية. ولكن، يمكن أن تبدو خدمة CSS لنقطة انطلاق أساسية على النحو التالي:
[popovertarget] {
anchor-name: --select-button;
}
[popover] {
anchor-default: --select-button;
top: anchor(bottom);
width: anchor-size(width);
left: anchor(left);
}
ادمج ميزات واجهة برمجة التطبيقات Popover API مع تحديد موضع تثبيت CSS عند الانتهاء.
تكون منظمًا عندما تبدأ بتقديم منتجات مثل ":has()". يمكنك تدوير محدّد الموقع عند الفتح:
.select-menu:has(:open) svg {
rotate: 180deg;
}
إلى أين يمكنك أن تأخذه في المرحلة التالية؟ ما الذي نحتاج إليه أيضًا لجعل select فعالة؟ سنحفظ ذلك للمقالة التالية. ولكن لا داعي للقلق، فقد ستتوفّر قريبًا عناصر محدّدة قابلة للتعديل. يُرجى متابعة أخبارنا باستمرار.
هذا كل شيء.
النظام الأساسي للويب في طور التطور. يعد تحديد موضع إعلان CSS جزءًا مهمًا من تحسين طريقة تطوير عناصر التحكم في واجهة المستخدم. وسوف تغنيك عن الالتفات إلى بعض هذه القرارات الصعبة. ولكنه سيسمح لك أيضًا بتنفيذ إجراءات لم تستطع القيام بها من قبل. يمكننا مثلاً تصميم عنصر <select>. أخبرنا عن رأيك.
صورة من قِبل CHUTTERSNAP على Unسبلاش