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

Una Kravets

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

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

תמיכה בדפדפן

  • 125
  • 125
  • x
  • x

מקור

תפיסות ליבה: עוגנים ואלמנטים מוצבים

בליבה של ה-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;
}
הדגמה של עוגן ממורכז באמצעות justify-center.

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

מספר עוגנים

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

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}
הדגמה שמציגה מספר עוגנים.

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

מיקום עם inset-area

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

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

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

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

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

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

הדגמה באמצעות עוגן עם popover

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

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

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

אם יש לכם התאמה בסיסית, כמו היפוך מלמעלה למטה או משמאל לימין (או מצד שמאל (או על שניהם), אפשר אפילו לדלג על השלב של יצירת הצהרות מותאמות אישית של @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-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: 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 של Oddbird שפועלת מ-Firefox 54 , Chrome 51 , Edge 79 ו-Safari 10. ה-Polyfill הזה תומך ברוב התכונות הבסיסיות של מיקום עוגן, אם כי היישום הנוכחי לא מלא ומכיל מעט תחביר מיושן. אפשר להשתמש בקישור ל-Unpkg או לייבא אותו ישירות למנהל חבילות.

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

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

סיכום

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

קריאה נוספת