היכרות עם ה-API למיקום עוגן ב-CSS

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

מיקום העוגן זמין ב-Chrome 125.

מושגי ליבה: עוגנים ואלמנטים ממוקמים

העיקרון המרכזי של ה-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);
}

מיקום עם inset-area

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

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

אפשרויות שונות של מיקום בתוך אזור פנימי, מוצגות ברשת של 9 תאים

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

• מרכז למעלה: inset-area: top או inset-area: block-start
• שמאל באמצע: inset-area: left או inset-area: inline-start
• מרכז למטה: inset-area: bottom או inset-area: block-end
• באמצע ימין: inset-area: right או inset-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-options.

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

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

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

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

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

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

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

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

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

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

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

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

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

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: 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 של Oddbird במיקום של עוגן ב-CSS, שפועלת בדפדפנים Firefox 54 , Chrome 51 , Edge 79 ו-Safari 10. ה-polyfill הזה תומך ברוב התכונות הבסיסיות של מיקום עוגן, אם כי ההטמעה הנוכחית לא הושלמה ומכילה תחביר מיושן. אפשר להשתמש בקישור לביטול אריזה או לייבא אותו ישירות במנהל חבילות.

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

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

<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
• שירות CSS עתידי: מיקום העוגן של Royal Komarov
• אוסף הדגמות העוגן של Una
• כלי למיקום העוגן