ה-CSS API למיקום עוגנים

Una Kravets

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

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

  • Chrome:‏ 125.
  • Edge: ‏ 125.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

מושגי ליבה: יסודות ואלמנטים במיקום

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

רכיבי עוגן ורכיבים ממוקמים.

הגדרת עוגנים

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

.anchor-button {
    anchor-name: --anchor-el;
}

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

עוגנים מרומזים

הדרך הראשונה לקשר עוגן לרכיב אחר היא באמצעות עוגן משתמע, כמו בדוגמת הקוד הבאה. המאפיין position-anchor מתווסף לאלמנט שרוצים לקשר לעוגן, והערך שלו הוא שם העוגן (במקרה הזה --anchor-el).

.positioned-notice {
    position-anchor: --anchor-el;
}

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

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

מודעות עוגן מפורשות

לחלופין, אפשר להשתמש בשם הצ'אנקור ישירות בפונקציית הצ'אנקור (לדוגמה, top: anchor(--anchor-el bottom). זה נקרא צ'אנקור מפורש, והוא יכול להיות שימושי אם רוצים לקשר לכמה רכיבים (בהמשך מופיעה דוגמה).

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

מיקום רכיבים ביחס לעוגנים

תרשים של מיקום עוגן עם מאפיינים פיזיים.

מיקום העוגן מתבסס על המיקום המוחלט ב-CSS כדי להשתמש בערכי מיקום, צריך להוסיף את position: absolute לרכיב הממוקם. לאחר מכן, משתמשים בפונקציה anchor() כדי להחיל את ערכי המיקום. לדוגמה, כדי למקם רכיב מקושר בפינה השמאלית העליונה של רכיב העיגון, משתמשים במיקום הבא:

.positioned-notice {
    position-anchor: --anchor-el;
    /* absolutely position the positioned element */
    position: absolute;
    /* position the right of the positioned element at the right edge of the anchor */
    right: anchor(right);
    /* position the bottom of the positioned element at the top edge of the anchor */
    bottom: anchor(top);
}
תרשים של קצוות מיקום ברכיב הממוקם.

עכשיו יש לכם רכיב אחד שמקובע לרכיב אחר, כך:

הדגמה של עוגן בסיסי.

צילום מסך של ההדגמה.

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

  • top = inset-block-start
  • inset-inline-start= left
  • bottom = inset-block-end
  • right= inset-inline-end

מרכזים אלמנט במיקום נתון באמצעות anchor-center

כדי להקל על מרכוז הרכיב שמוגדר במיקום עוגן ביחס לעוגן שלו, יש ערך חדש שנקרא anchor-center שאפשר להשתמש בו עם המאפיינים justify-self,‏ align-self,‏ justify-items ו-align-items.

בדוגמה הזו אנחנו משנים את הדוגמה הקודמת באמצעות justify-self: anchor-center כדי למרכז את האלמנט הממוקם מעל ל-anchor שלו.

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}
הדגמה של עוגן במרכז באמצעות justify-center.

צילום מסך של ההדגמה.

מודעות עוגן מרובות

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

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}
הדגמה של כמה מודעות עוגן

צילום מסך של ההדגמה.

מיקום עם position-area

ה-API לקביעת עיגון כולל מנגנון פריסה חדש באמצעות המאפיין position-area.

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

כדי להשתמש במיקום position-area במקום במיקום מוחלט, יש להשתמש בתכונה position-area עם ערכים פיזיים או לוגיים. לדוגמה:

  • מרכז למעלה: position-area: top או position-area: block-start
  • מרכז-שמאל: position-area: left או position-area: inline-start
  • מרכז למטה: position-area: bottom או position-area: block-end
  • מרכז-ימין: position-area: right או position-area: inline-end
הדגמה של כמה מודעות עוגן

צילום מסך של ההדגמה.

כדי לחקור את המיקומים האלה לעומק, היעזרו בכלי הבא:

כלי לעוגן מודעות במיקומים של אזורי מודעות.

שינוי הגודל של רכיבים באמצעות anchor-size()

אפשר להשתמש בפונקציה anchor-size(), שגם היא חלק מ-Anchor Positioning API, כדי לקבוע את הגודל או המיקום של רכיב שממוקם באמצעות עוגן על סמך הגודל של העוגן (רוחב, גובה או גדלים של שורה ושל בלוק).

בקוד ה-CSS הבא מוצגת דוגמה לשימוש באפשרות הזו לגובה,באמצעות anchor-size(height) בתוך פונקציית calc() כדי להגדיר את הגובה המקסימלי של תיבת העזרה כפי שתיים מגובה העוגן.

.positioned-notice {
  position-anchor: --question-mark;

  /*  set max height of the tooltip to 2x height of the anchor  */
  max-height: calc(anchor-size(height) * 2);
}
הדגמה ל-anchor-size

צילום מסך של ההדגמה.

שימוש בעוגן עם רכיבים בשכבה העליונה, כמו חלון קופץ ותיבת דו-שיח

מיקום העוגן עובד טוב מאוד עם רכיבים בשכבה העליונה כמו popover. וגם <dialog>. למרות שהרכיבים האלו ממוקמים בשכבה נפרדת משאר עץ המשנה DOM, מיקום העוגן מאפשר לך לקשור אותם בחזרה, ולגלול עם רכיבים שלא נמצאים בשכבה העליונה. זהו יתרון ענק לממשקים רב-שכבתיים.

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

דוגמה לשימוש בעוגן עם popover

צילום מסך של ההדגמה.

שינוי מיקומי העוגנים באמצעות @position-try

אחרי שמגדירים את מיקום העוגן הראשוני, כדאי לשנות את המיקום אם העוגן מגיע לקצוות של הבלוק שמכיל אותו. כדי ליצור מיקומי עוגן חלופיים, אפשר להשתמש בהוראה @position-try יחד עם הנכס position-try-fallbacks.

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

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

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  position-area: right span-bottom;
}

לאחר מכן מגדירים את המיקומים המוצמדים החלופיים באמצעות @position-try:

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  posotion-area: bottom;
}

לסיום, מחברים את השניים באמצעות position-try-fallbacks. בסך הכול, זה נראה כך:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  position-area: right span-bottom;
  */ connect with position-try-fallbacks */
  position-try-fallbacks: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  position-area: bottom;
}
הדגמה של שימוש בעוגן באמצעות popover

הפיכת מילות מפתח באופן אוטומטי למיקום עוגן

אם יש לכם התאמה בסיסית, כמו היפוך מלמעלה למטה או משמאל לימין (או שניהם), אתם יכולים אפילו לדלג על שלב היצירה של הצהרות @position-try מותאמות אישית ולהשתמש במילות מפתח הפוך שנתמכות על ידי הדפדפן, כמו flip-block ו-flip-inline. אלה ערכים חלופיים להצהרות @position-try בהתאמה אישית, וניתן להשתמש בהם בשילוב:

position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

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

#my-tooltip {
  position-anchor: --question-mark;
  position-area: top;
  position-try-fallbacks: flip-block;
}
שימוש בהיפוך אוטומטי באמצעות position-try-fallbacks: flip-block

position-visibility לדיבלים בסרגלי גלילה משניים

במקרים מסוימים ייתכן שתרצו לעגן רכיב בתוך גלילה משנית בדף. במקרים כאלה, אפשר לשלוט בחשיפה של העוגן באמצעות position-visibility. מתי המגיש נשאר במסך? מתי היא נעלמת? התכונה הזו מאפשרת לכם לשלוט באפשרויות האלה. משתמשים ב-position-visibility: anchors-visible כשרוצים שהרכיב הממוקם יישאר בתצוגה עד שהעוגן יוצא מהתצוגה:

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}
דמו של position-visibility: anchors-visible

לחלופין, אפשר להשתמש ב-position-visibility: no-overflow כדי למנוע מהעוגן לחרוג מעבר לקונטיינר שלו.

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}
position-visibility: no-overflow הדגמה

זיהוי תכונות ומילוי פוליגונים

מכיוון שתמיכת הדפדפנים מוגבלת בשלב זה, מומלץ להשתמש ב-API הזה בזהירות. קודם כול, אפשר לבדוק אם יש תמיכה ישירות ב-CSS באמצעות שאילתה לגבי התכונה @supports. כדי לעשות זאת, צריך לעטוף את סגנונות העוגנים בקוד הבא:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

בנוסף, אפשר להשתמש ב-polyfill של תכונת מיקום העוגן באמצעות ה-CSS anchor positioning polyfill by Oddbird, שפועל מ-Firefox 54,‏ Chrome 51,‏ Edge 79 ו-Safari 10. ה-polyfill הזה תומך ברוב התכונות הבסיסיות של מיקום עוגן, אבל ההטמעה הנוכחית לא מלאה ומכילה תחביר מיושן. אפשר להשתמש בקישור לביטול אריזה או לייבא אותו ישירות במנהל חבילות.

הערה לגבי נגישות

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

<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>

.anchor {
  anchor-name: --anchor;
}

.positioned {
  position: fixed;
  position-anchor: --anchor;
}

אם משתמשים במיקום עוגן עם המאפיין popover או עם רכיב <dialog>, הדפדפן יטפל בשינויים של ניווט המיקוד כדי לאפשר נגישות מתאימה, כך שלא צריך למקם את החלונות הקופצים או את תיבות הדו-שיח בסדר ה-DOM. מידע נוסף על ההערה לגבי נגישות זמין במפרט.

קריאה נוספת