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

Una Kravets

תאריך הפרסום: 10 במאי 2024

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

אפשר להשתמש במיקום עוגן בגרסה 125 של Chrome ואילך.

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

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

מקור

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

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

אלמנטים של עוגן ואלמנטים במיקום מוגדר.

הגדרת עוגנים

יצירת צ'אט מצורף היא פשוטה. מחילים את המאפיין 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
  • left= inset-inline-start
  • bottom = inset-block-end
  • inset-inline-end= right

מרכזים אלמנט במיקום נתון באמצעות 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;
}

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

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

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

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

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

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

סיכום

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

קריאה נוספת