ربط العناصر ببعضها البعض من خلال تحديد موضع ارتساء CSS

Jhey Tompkins

.

كيف تربط حاليًا عنصرًا بعنصر آخر؟ يمكنك محاولة تتبع مواضعها أو استخدام شكل من أشكال عنصر التضمين.

<!-- 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 إلى حل هذه المشكلة من خلال توفير واجهة برمجة تطبيقات CSS لعناصر التوصيل. ويوفر وسيلة لوضع عنصر واحد وحجمه بناءً على موضع العناصر الأخرى وحجمها.

تعرض الصورة نافذة متصفح للنموذج التجريبي توضح بالتفصيل بنية تلميح.

دعم المتصفح

يمكنك تجربة واجهة برمجة التطبيقات لتحديد موضع الارتساء في CSS في Chrome Canary باستخدام "ميزات النظام الأساسي التجريبي للويب". . لتفعيل هذه العلامة، افتح Chrome Canary وانتقِل إلى chrome://flags. بعد ذلك، فعِّل "ميزات منصة الويب التجريبية". .

ويعمل الفريق في Oddbird أيضًا على تنفيذ polyfill في مرحلة التطوير. احرص على التحقق من المستودع على github.com/oddbird/css-anchor-positioning.

يمكنك التحقق من دعم الارتساء باستخدام:

@supports(anchor-name: --foo) {
  /* Styles... */
}

يُرجى العِلم أنّ واجهة برمجة التطبيقات هذه لا تزال في مرحلة تجريبية وقد تتغيّر. تتناول هذه المقالة الأجزاء المهمة على مستوى عالٍ. بالإضافة إلى ذلك، لا تكون طريقة التنفيذ الحالية متزامنة تمامًا مع مواصفات CSS Working Group.

المشكلة

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

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

الحلول الحالية

في الوقت الحالي، هناك بعض الطرق المختلفة التي يمكنك من خلالها التعامل مع هذه المشكلة.

لنبدأ أولًا بعبارة "التفاف ارتساء التعليقات" الأوّلي الخاص بك. يمكنك أخذ كلا العنصرين والتفافهما في حاوية. بعد ذلك، يمكنك استخدام 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);

حاوِل إعادة تحديد موضع علامة الارتساء في هذا العرض التوضيحي الذي يستخدم هذا الرمز.

"تلميح" قد لا يتصرف كما تتوقع. يتفاعل مع الخروج من إطار العرض على المحور y وليس المحور x. ننصحك بالاطّلاع على المستندات، للعثور على حلّ يناسبك.

لكن العثور على حزمة تصلح لمشروعك قد يستغرق الكثير من الوقت. إنها قرارات إضافية وقد تكون محبطة إذا لم تعمل كما تريد.

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

أدخِل واجهة برمجة تطبيقات تحديد موضع ارتساء CSS. تكمن الفكرة في الحفاظ على الأنماط في CSS وتقليل عدد القرارات التي تحتاج إلى اتخاذها. أنت تأمل في تحقيق النتيجة نفسها، ولكن الهدف هو جعل تجربة المطوِّر أفضل.

  • لا حاجة إلى JavaScript.
  • اجعل المتصفِّح يعمل على أفضل موضع وفقًا لإرشادك.
  • ليس هناك المزيد من اعتماديات الجهات الخارجية
  • ما مِن عناصر برنامج تضمين.
  • تعمل مع العناصر الموجودة في الطبقة العليا.

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

أولاً، عليك اختيار كيفية تعريف الارتساء. يمكنك إجراء ذلك ضمن خدمة مقارنة الأسعار (CSS) من خلال ضبط السمة anchor-name على عنصر الارتساء. وتقبل القيمة متقطعة-id.

.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قائمة؟

هذا مقطع تشويقي أخير لمزيد من التشويق. ولكن، يمكنك إنشاء نافذة منبثقة يمكن التركيز عليها، والآن لديك موضع الارتساء. يمكنك وضع الأسس الأساسية لعنصر <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 على إلغاء البداية