ממשק API למיקום עוגן ב-CSS משנה מהלכי-משחק בפיתוח אתרים, מכיוון שהוא מאפשר למקם רכיבים באופן מקורי ביחס לרכיבים אחרים, המכונים עוגן. ה-API הזה מפשט דרישות פריסה מורכבות של תכונות רבות בממשק, כמו תפריטים ותפריטי משנה, הסברים קצרים, אפשרויות בחירה, תוויות, כרטיסים, תיבות דו-שיח של הגדרות ועוד. בעזרת מיקום של עוגן מובנה בדפדפן, תוכלו לבנות ממשקי משתמש בשכבות בלי להסתמך על ספריות של צד שלישי, וכך לפתוח עולם שלם של אפשרויות יצירתיות.
המיקום של העוגן זמין ב-Chrome 125.
תפיסות ליבה: עוגנים ואלמנטים מוצבים
בליבה של ה-API הזה נמצא הקשר בין עוגנים לרכיבים מיקומיים. עוגן הוא אלמנט שמוגדר כנקודת התייחסות באמצעות המאפיין anchor-name
. רכיב ממוקם הוא אלמנט שמוצב ביחס לעוגן באמצעות המאפיין position-anchor
או משתמש באופן מפורש ב-anchor-name
בלוגיקת המיקום שלו.
![](https://developer.chrome.com/blog/anchor-positioning-api/image/anchor-diagram-0.png?authuser=5&hl=he)
הגדרת עוגנים
ניתן ליצור עוגן בקלות. צריך להחיל את המאפיין 'שם העוגן' על הרכיב שנבחר ולהקצות לו מזהה ייחודי. לפני המזהה הייחודי הזה צריך להוסיף מקף כפול, בדומה למשתנה 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);
}
מיקום רכיבים ביחס לעוגנים
![](https://developer.chrome.com/blog/anchor-positioning-api/image/anchor-diagram-1.png?authuser=5&hl=he)
מיקום עוגן מבוסס על מיקום מוחלט של 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);
}
![](https://developer.chrome.com/blog/anchor-positioning-api/image/anchor-diagram-2.png?authuser=5&hl=he)
עכשיו יש לכם רכיב אחד שמעוגן לרכיב אחר, כך:
כדי להשתמש במיקום לוגי עבור הערכים האלה, הערכים המקבילים הם:
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. מידע נוסף על ההערה לגבי נגישות במפרט.
סיכום
זוהי תכונה חדשה ונשמח לראות איזה תכונות חדשות יתווספו לך. עד עכשיו ראינו כמה תרחישים לדוגמה מצוינים מהקהילה, כמו תוויות דינמיות בתרשימים, בקווים מחברים, בהערות שוליים ובהצלבת נתונים חזותית. כשמבצעים בדיקות של מיקומי עוגן, נשמח לקבל ממך משוב ואם מצאת באגים, נשמח לדעת.