חיבור בין רכיבים של שיתוף אינטרנט באמצעות מיקום של עוגן ב-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 או להוסיף תגי עיצוב נוספים. הפתרון לבעיה הזו הוא API למיקום עוגנים ב-CSS, שמספק API ל-CSS לקישור רכיבים. הוא מאפשר למקם אלמנט אחד ולקבוע את הגודל שלו על סמך המיקום והגודל של אלמנטים אחרים.

תמיכה בדפדפנים

אפשר לנסות את ממשק ה-API למיקום עוגנים ב-CSS ב-Chrome Canary באמצעות הדגל 'תכונות ניסיוניות לפלטפורמת אינטרנט'. כדי להפעיל את הדגל הזה, פותחים את Chrome Canary ונכנסים לכתובת chrome://flags. לאחר מכן מפעילים את הדגל 'תכונות ניסיוניות של פלטפורמת אינטרנט'.

יש גם polyfill בפיתוח על ידי הצוות של Oddbird. מומלץ לבדוק את המאגר בכתובת github.com/oddbird/css-anchor-positioning.

אפשר לבדוק אם יש תמיכה בהצמדה באמצעות:

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

חשוב לזכור ש-API הזה עדיין נמצא בשלב ניסיוני ועשוי להשתנות. במאמר הזה נסקור את החלקים החשובים ברמה גבוהה. בנוסף, ההטמעה הנוכחית לא מסונכרנת לחלוטין עם המפרט של קבוצת העבודה של 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%);
}

אפשר להזיז את הקונטיינר, וברוב המקרים כל מה שמכיל אותו יישאר במקום.

גישה נוספת היא אם אתם יודעים את המיקום של עוגן ה-HTML או אם אתם יכולים לעקוב אחריו בדרך כלשהי. אפשר להעביר אותו להסבר הקצר באמצעות מאפיינים מותאמים אישית.

<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);

כדאי לנסות לשנות את המיקום של ה-anchor בהדגמה הזו שמשתמשת בקוד הזה.

יכול להיות שההסבר הקצר לא יפעל כצפוי. הוא מגיב לתנועה מחוץ לאזור התצוגה בציר y, אבל לא בציר x. כדאי לעיין במסמכי העזרה, וכנראה תמצאו פתרון שמתאים לכם.

עם זאת, חיפוש חבילת מודולים שמתאימה לפרויקט שלכם עשוי להימשך זמן רב. צריך לקבל החלטות נוספות, ויכול להיות שתהיו מתוסכלים אם התוצאה לא תהיה בדיוק כפי שציפיתם.

שימוש במיקום של עוגן

מזינים את ה-CSS API למיקום עוגנים. הרעיון הוא לשמור את הסגנונות ב-CSS ולצמצם את מספר ההחלטות שצריך לקבל. המטרה היא להשיג את אותה תוצאה, אבל המטרה היא לשפר את חוויית המפתחים.

• אין צורך ב-JavaScript.
• נותנים לדפדפן לקבוע את המיקום הטוב ביותר על סמך ההנחיות שלכם.
• אין יותר יחסי תלות בצד שלישי
• אין רכיבי עטיפה.
• הכלי פועל עם רכיבים שנמצאים בשכבה העליונה.

ננסה לשחזר את הבעיה שניסינו לפתור למעלה ולטפל בה. במקום זאת, כדאי להשתמש באנלוגיה של סירה עם עוגן. הם מייצגים את הרכיב המקובע ואת העוגן. המים מייצגים את הבלוק שמכיל את הקוד.

קודם כול, צריך לבחור איך להגדיר את הצ'אנק. אפשר לעשות זאת ב-CSS על ידי הגדרת המאפיין anchor-name ברכיב ה-anchor. אפשר להזין בו ערך dashed-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 מאפשרות לשמור על קרבה בין רכיבים קשורים. עם זאת, מיקום העוגן יפעל עם רכיבים שנמצאים בשכבה העליונה. זוהי אחת מהיתרונות העיקריים של ה-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. הרעיון הוא שלחיצה על הלחצן עם החץ למטה תציג תפריט הקשר. לתפריט הזה יהיה תפריט משלו שאפשר להרחיב.

הרכיב החשוב כאן הוא לא הרכיב של ה-Markup. אבל יש לכם שלושה לחצנים שכל אחד מהם משתמש ב-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. נניח שיש תרשים עם כמה חלונות קופצים שמוסיפים הערות לתרשים.

אפשר לעקוב אחרי הערכים הגבוהים והנמוכים ביותר באמצעות min ו-max ב-CSS. קוד ה-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);
 }

בדמו הזה, ה-Draggable של GreenSock הופך את הידיות ל-Draggable. עם זאת, גודל הרכיב <img> משתנה כדי למלא את הקונטיינר, שמתאים את עצמו כדי למלא את הפער בין הידיות.

SelectMenu?

הטיזר האחרון הוא טעימה ממה שצפוי בקרוב. עם זאת, אפשר ליצור חלון קופץ שניתן להתמקד בו, וכך לקבל מיקום של עוגן. אפשר ליצור את היסודות של רכיב <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 ב-Unsplash