חיבור בין רכיבים של שיתוף אינטרנט באמצעות מיקום של עוגן ב-CSS

Jhey Tompkins

כיצד מתבצע כרגע שיתוף אינטרנט בין רכיב אחד לאחר? ניתן לנסות לעקוב אחר המיקומים שלהם או להשתמש בצורה כלשהי של רכיב wrapper.

<!-- 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. לאחר מכן מפעילים את הסימון 'תכונות ניסיוניות של פלטפורמת האינטרנט'.

יש גם מילוי רב-פעמי בפיתוח על ידי הצוות ב-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%);
}

אפשר להעביר את המאגר, והוא יישאר במיקום הרצוי ברוב המקרים.

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

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

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

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

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

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

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

קודם כול צריך לבחור איך להגדיר את העוגן. אפשר לעשות זאת בתוך ה-CSS על ידי הגדרת המאפיין anchor-name ברכיב העוגן. אפשר להזין בו ערך מקווקו.

.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 כערך של מאפייני inset (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));
}

אין מאפיין inset של center, לכן אפשרות אחת היא להשתמש ב-calc אם ידוע לך מה הגודל של הרכיב המקושר. למה לא להשתמש ב-translate? תוכלו לקבוע את ההגדרות הבאות:

.boat {
  anchor-default: --my-anchor;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
}

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

ייתכן שהבחנתם בשימוש במאפיין המותאם אישית --boat-size שלמעלה. עם זאת, אם רוצים לבסס את גודל הרכיב המעגן על גודל העוגן, אפשר גם לגשת לגודל הזה. במקום לחשב אותו בעצמכם, אתם יכולים להשתמש בפונקציה anchor-size. לדוגמה, כדי שהסירה שלנו תהיה ברוחב פי 4 מרוחב העוגן:

.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 גם בפונקציית העוגן וגם במאפיין inset ההפוך. לדוגמה, אם משתמשים ב-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);
  }
}

דוגמאות

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

תפריטי הקשר

נתחיל עם תפריט הקשר באמצעות ממשק ה-API של Popover. הרעיון הוא שלחיצה על הלחצן עם ראש החץ תפתח תפריט הקשר. ולתפריט הזה יהיה תפריט משלו להרחבה.

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

תפריט בחירה?

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