חיבור בין רכיבים של שיתוף אינטרנט באמצעות מיקום של עוגן ב-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 כערך של המאפיינים המשולבים (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);
  }
}

דוגמאות

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

תפריטי הקשר

נתחיל עם תפריט הקשר באמצעות ממשק ה-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 ב-Un אימייל