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

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

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

הלב של ה-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
• inset-inline-end= right

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

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

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

.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;
}

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

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

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

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

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

שינוי מיקומי העוגנים באמצעות @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;
}

מילות מפתח עם היפוך אוטומטי של מיקום עוגן

אם יש לכם התאמה בסיסית, כמו היפוך מלמעלה למטה או משמאל לימין (או שניהם), אתם יכולים אפילו לדלג על שלב היצירה של הצהרות @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-visibility לדיבלים בסרגלי גלילה משניים

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

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

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

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

זיהוי תכונות ופוליפילימנטציה

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

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

אמנם ה-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. מידע נוסף זמין בהערה בנושא נגישות במפרט.

קריאה נוספת

• שרטוט קו לחיבור רכיבים באמצעות מיקום של עוגן ב-CSS
• Future CSS: מיקום של עוגנים מאת רומן קומרובסקי
• האוסף של Una ב-Codepen עם הדגמות של Anchor
• כלי למיקום העוגן