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

Una Kravets

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

הערה: הפוסט הזה בבלוג עוסק בתחביר ששולחים ב-Chrome 125. לאחר מכן, קבוצת העבודה של שירות ה-CSS פתרה שני שינויים בתכונה: שינוי השם נכס inset-area אל position-area ו-position-try-options עד position-try-fallbacks העדכונים האלה נשלחו בגרסה 129 של Chrome. מסמכי העזרה בנושא מיקום מודעות עוגן כוללת את התחביר החדש.

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

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

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

• 125
• 125
• x
• x

מקור

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

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

.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

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

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

התאמת מיקומי העוגן באמצעות @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-options אם אתם מחילים סגנונות באמצעות ערכים ממוקמים, שניתן להעביר באמצעות המאפיין transition, כמו בהדגמה שמופיעה כאן. עדיין אי אפשר להעביר את inset-area, אבל צוות Chrome עובד על פתרון.

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

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

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

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