מיקום עוגן

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

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

אלמנטים של שיתוף אינטרנט בין מכשירים

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

כדי שאפשר יהיה לקשור את הרכיב הממוקם, צריך להגדיר כמה מאפיינים. קודם צריך להוציא את הרכיב מהזרימה של המסמך כדי שהוא יהיה צף. לשם כך, מגדירים את position: absolute או position: fixed.

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

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

#anchor {
   anchor-name: --my-anchor;
}

#positionedElement {
     position: absolute;
     position-anchor: --my-anchor;
     position-area: end;
}

קשירות מרומזות

חלונות קופצים קלים עוד יותר לצירוף. כשפותחים חלון קופץ באמצעות לחצן עם popovertarget או באמצעות הגדרת source עם showPopover({source}), כבר מוגדר לחלון הקופץ 'עוגן משתמע'. כברירת מחדל, חלון קופץ צף כבר עם position: fixed, ולכן כדי למקם חלון קופץ, צריך רק להגדיר את המיקום.

#anchor{}

#positionedElement {
  position-area: end;
  margin: unset;
}

הגדרת היקף העוגנים הפוטנציאליים

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

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

המאפיין anchor-scope מגדיר אילו שמות של עוגנים יותאמו רק בין רכיב לבין רכיבי הצאצא שלו. הוא מקבל רשימה של שם עוגן אחד או יותר, או את מילת המפתח all כדי לצמצם את ההיקף של כל שמות העוגנים המוגדרים.

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

בדוגמה הבאה אפשר לראות את ההבדל שנוצר כשמשתמשים ב-anchor-scope על רכיבים חוזרים עם אותו anchor-name. בדוגמה, כל הרכיבים <img> והבאנרים של התמונות מפנים לשם העוגן --image. כשמחילים את anchor-scope על רכיבי <li>, ‏ position-anchor: --image יתאים רק לרכיב <img> באותו רכיב <li> כמו הבאנר, אחרת הוא יתאים לרכיב <img> האחרון שעבר עיבוד.

מיקום

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

position-area

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

הסבר על position-area

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

יש הרבה מילות מפתח זמינות לposition-area, אבל אפשר לחלק אותן לכמה קטגוריות כדי להבין אותן טוב יותר. ‫Anchor-tool.com הוא כלי מצוין לבדיקת התחביר.

מילות מפתח פיזיות

אפשר להשתמש במילות המפתח הפיזיות top, left, bottom, right ו-center. לדוגמה, position-area: top right ימקם את הרכיב הממוקם מעל ומשמאל לרכיב העוגן. למילות המפתח האלה יש גם מקבילות של ציר פיזי, y-start,‏ x-start,‏ y-end ו-x-end.

מילות מפתח לוגיות

אפשר גם להשתמש במילות מפתח לוגיות: block-start, ‏block-end, ‏inline-start ו-inline-end. לדוגמה, position-area: block-end inline-start ימקם את הרכיב הממוקם מתחת לעוגן ומשמאלו בשפות כמו אנגלית, או אחרי העוגן בציר הבלוק ולפני העוגן בציר השורה במצב הכתיבה של המסמך. אפשר להשתמש ב-center גם עם מילת מפתח לוגית.

אפשר גם להשמיט את הציר אם מציינים מילות מפתח לוגיות, כשציר הבלוק מופיע ראשון וציר השורה מופיע שני. ‫position-area: start end זהה ל-position-area: block-start inline-end או אפילו ל-position-area: inline-end block-start.

פריסה על פני כמה אזורים ברשת

עד עכשיו, אולי שמתם לב שהאפשרויות האלה מאפשרות למקם את הרכיב הממוקם רק בתוך משבצת אחת ברשת. הוספת הקידומת span למאפיינים פיזיים או לוגיים מוסיפה את הרווח הסמוך ברשת המרכזית. ‫position-area: span-top right ימוקם מימין לאלמנט העוגן, מהחלק התחתון של אלמנט העוגן ועד לחלק העליון של בלוק המכיל המקורי של האלמנט הממוקם.

מיקום נפוץ לתפריט נפתח הוא position-area: block-end span-inline-end.

מילת המפתח span-all משתרעת על 3 שורות או עמודות.

מילת מפתח יחידה

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

אם מילת המפתח שצוינה ברורה לגבי הציר שלה, הציר השני מחושב כ-span-all. כלומר, position-area: bottom שווה ל-position-area: bottom span-all, והרכיב הממוקם יהיה מתחת לרכיב העוגן, ויהיה לו רוחב מלא של הבלוק המכיל.

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

הפונקציה anchor()

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

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

.positionedElement {
  block-start: anchor(--my-anchor start);
  /*  OR  */
  position-anchor: --my-anchor;
  block-start: anchor(start);
}

ערכי ברירת מחדל

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

.positionedElement {
   block-start: anchor(--my-anchor, 100px)
}

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

מילות מפתח של צד העוגן

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

בדוגמה הזו אפשר לראות איך ערך אחוזים תמיד מתחיל בציר שצוין ומסתיים בו:

שימוש ב-anchor()

מכיוון ש-anchor() הוא אורך, הוא מאוד גמיש. אפשר לשנות את הערך באמצעות פונקציות CSS כמו max() ו-calc().

מגבלה אחת היא שאפשר להשתמש בפונקציות של anchor() רק במאפייני שוליים פנימיים.

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

#indicator{
/*  Use the smaller of the 2 values:  */
  inset-block-start: min(
/*   1. The start side of the default anchor, which is the open `<details>` element  */
    anchor(start),
/*   2. The start side of the hovered `<details>` element.    */
    anchor(--hovered start,
/*     If no `<details>` element is hovered, this falls back to infinity px, so that the other value is smaller, and therefore used.   */
       var(calc(1px * infinity)))
  );
}

בדוגמה נעשה שימוש גם ב-calc() כדי להוסיף רווח בתוך השורה מסביב לחלונית הפתוחה.

שימוש בגודל העוגן

אפשר גם להשתמש בפונקציה anchor-size() כדי להשתמש בממדים של רכיב העוגן בשביל הגודל, המיקום או השוליים של הרכיב הממוקם.

‫anchor-size() מקבל שם של עוגן או משתמש בעוגן שמוגדר כברירת מחדל. כברירת מחדל, הפונקציה תשתמש בגודל של העוגן בציר שבו היא נמצאת, ולכן width: anchor-size() תחזיר את הרוחב של העוגן. אפשר גם להשתמש בציר השני על ידי ציון האורך הרצוי, באמצעות מילות המפתח הפיזיות width ו-height או מילות המפתח הלוגיות block, inline, self-block ו-self-inline.

טיפול בעודפים

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

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

אפשרויות חלופיות

הכלל position-try-fallbacks מקבל רשימה של אפשרויות חלופיות. אם יש יותר מדי אפשרויות למיקום ברירת המחדל, המערכת תנסה כל אפשרות לפי הסדר עד שתמצא מיקום שלא חורג מהמגבלה.

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

.positioned-element {
  position-area: block-end span-inline-end;
  position-try-fallbacks: block-end span-inline-start;
}

יש גם כמה מילות מפתח flip- שמטפלות במקרים נפוצים של חזרה למצב הקודם. ‫flip-block ו-flip-inline מנסים להפוך את הרכיב מעל הצירים של הבלוק והשורה. אפשר גם לשלב אותם עם flip-block flip-inline כדי להפוך את התמונה בשני הצירים. הערך flip-start הופך את הרכיב הממוקם מעל קו אלכסוני מפינות ההתחלה והסיום של רכיב העוגן.

אפשר גם ליצור אפשרות חלופית מותאמת אישית באמצעות @position-try – כך אפשר להגדיר את השוליים, את היישור ואפילו לשנות את העוגן.

@position-try --menu-below {
  position-area: bottom span-right;
  margin-top: 1em;
}

#positioned-element {
  position-try: --menu-below;
}

אפשר להוסיף את flip-block ו-flip-inline לאפשרויות החלופיות של @position-try כדי ליצור וריאציה.

#positioned-element {
  position-try: --menu-below, flip-inline --menu-below;
}

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

1. הרכיב ממוקם עם position-area: end, בפינה הימנית התחתונה של העוגן.
2. אם יש גלישה, הרכיב ממוקם באמצעות אפשרות הגיבוי המותאמת אישית שנקראת --bottom-span-right, שממקמת אותו באמצעות position-area: bottom span-right, עם שוליים נוספים מתחת.
3. אם יש גלישה, האלמנט ממוקם עם flip-inline --bottom-span-right, שמשלב את אפשרות החזרה לערך ברירת המחדל עם flip-inline, שהוא בעצם position-area: bottom span-left.
4. אם יש גלישה, הרכיב ממוקם באמצעות אפשרות הגיבוי המותאמת אישית --use-alternate, שממקמת אותו מתחת לעוגן שונה לחלוטין.
5. אם יש גלישה, הרכיב חוזר למיקום המקורי שלו, עם position-area: end, למרות שידוע שיש גלישה.

סדר חלופי

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

אפשר לציין את הציר באמצעות מילות המפתח הלוגיות most-block-size ו-most-inline-size, או באמצעות מילות המפתח הפיזיות most-height ו-most-width.

אפשר לשלב את position-try-order וposition-try-fallbacks עם הקיצור position-try, כשהסדר מופיע ראשון.

גלילה

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

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

שימו לב שהאלמנט הממוקם נשאר גלוי גם כשגוללים את העוגן אל מחוץ לתצוגה. כדי להסתיר את הרכיב הממוקם כשהעוגן מוסתר, מגדירים את position-visibility: anchors-visible. ההגדרה הזו רלוונטית לא רק כשמבצעים גלילה מעבר לעוגן, אלא גם אם הוא מוסתר בדרכים אחרות, למשל באמצעות visibility: hidden.

בדיקת ההבנה