פורסם: 29 באוקטובר 2025
מגרסה Chrome 143 ואילך אפשר להשתמש בשאילתות של רכיבי container עם מיקום קבוע כדי לזהות מתי רכיב עם מיקום קבוע משתמש במיקום קבוע חלופי. בפוסט הזה מוסבר מה הבעיה שהתכונה הזו פותרת.
CSS anchor positioning API מספק דרך יעילה לקשור רכיב (כמו חלון קופץ) לרכיב אחר (העוגן) ולהגדיר קבוצה של חלופות למיקום, שמשמשות אם אין לרכיב מספיק מקום. לדוגמה, אם רכיב מעוגן מעוצב כך שיופיע בחלק העליון, אבל כשגוללים והוא מגיע לקצה המסך, הדפדפן יכול לבצע "היפוך" כדי לשמור אותו באזור התצוגה.
עם זאת, בשלב 1 של מפרט מיקום העוגן נשאר פער משמעותי: למרות ש-CSS יכול להעביר את הרכיב למיקום חלופי, לא הייתה לו דרך לדעת איזו חלופה נבחרה. כלומר, לא הייתה אפשרות להחיל סגנונות שונים על סמך המיקום הסופי הזה. אם תיאור הכלי התהפך מלמטה למעלה, החץ שלו עדיין יצביע לכיוון הלא נכון, אלא אם תתקנו אותו באמצעות JavaScript.
שאילתות מוצמדות של מאגרי מידע (מוגדרות במפרט CSS Anchor Position Level 2) פותרות את הבעיה הזו, ומעניקות למיקום העוגן ב-CSS את המודעות ההקשרית שחסרה לו.
איך זה עובד: שאילתות של נתיבים חלופיים לתצוגה
שאילתות של מאגרי תגים מעוגנים מאפשרות להחיל סגנונות על סמך האופן שבו הדפדפן פתר את מיקום העיגון.
ההגדרה מתבצעת באמצעות שתי תכונות חדשות ב-CSS:
-
container-type: anchored: החלת המאפיין על הרכיב הממוקם (לדוגמה, על תיאור הכלים). הפעולה הזו הופכת אותו למאגר שאילתות ש"מודע" למצב המיקום של העוגן שלו. -
@container anchored(fallback: ...): תחביר חדש של כלל at שמאפשר לכם לשאול איזו אפשרות של position-try-fallbacks שימשה בסופו של דבר.
נניח שיש לכם תיאור קצר שאתם רוצים למקם בתחתית, אבל אם זה לא אפשרי, הוא יוצג בחלק העליון. הקוד הבא:
- בתחילה, המערכת מנסה למקם את
.tooltipבחלק התחתון של רכיב העוגן שלו (--my-anchor). - אם אין מספיק מקום, המערכת מעבירה את התמונה לראש הרשימה.
- השאילתה
@containerמזהה את זה. כשמחילים את הגיבוי העליון, השאילתהanchored(fallback: top)הופכת ל-true. - כך אפשר לשנות את התוכן של פסאודו-אלמנט ::before מחץ 'למעלה' (▲) לחץ 'למטה' (▼) ולשנות את המיקום שלו.
/* The element our tooltip is anchored to */
.anchor {
anchor-name: --my-anchor;
}
/* The positioned element (tooltip) */
.tooltip {
/* Use anchor positioning to set fallbacks */
position: absolute;
margin-top: 1rem;
position-anchor: --my-anchor;
position-area: bottom;
position-try-fallbacks: flip-block; /* Reposition in the block direction */
/* Make it an anchored query container */
container-type: anchored;
/* Add a default "up" arrow */
&::before {
content: '▲';
position: absolute;
bottom: 100%; /* Sits on top of the tooltip, pointing up */
}
}
/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
.tooltip::before {
/* The 'top' fallback was used, so flip the arrow */
content: '▼';
bottom: auto;
top: 100%; /* Move the arrow below the tooltip */
}
}
הכול נעשה ב-CSS – בלי JavaScript, בלי observers ובלי מחלקות נוספות. הערה: אם אתם משתמשים ב-Popover API, לא תצטרכו לציין במפורש את השמות של רכיבי העוגן, כי נוצר קשר עוגן מרומז.
בדמו הבא נעשה שימוש בטריק של הגבול כדי ליצור משולש CSS, והמשולש ממוקם מחדש באמצעות שאילתות מעוגנות:
סיכום
שאילתות מוצמדות מאפשרות ל-CSS בדפדפן לדעת מהו מיקום העוגן הנוכחי של אלמנט ממוקם. כלומר, אתם יכולים ליצור רכיבים עמידים הרבה יותר שמודעים להקשר. החץ של תיאור הכלים הוא רק דוגמה אחת. אפשר גם:
- שינוי צבע הרקע של תפריט כשהוא מתהפך.
- מעבירים את סגנון הגבול לקצה שהכי קרוב לעוגן.
- שינוי של border-radius ב-popover כך שהפינה 'המצורפת' תהיה מרובעת.
- להנפיש רכיב בצורה שונה בהתאם למיקום ברירת המחדל שאליו הוא נצמד.
זוהי הצלחה גדולה למיקום של רכיבי עוגן ולספריות של רכיבים באופן כללי, והיא מאפשרת ליצור רכיבי ממשק משתמש חזקים ועצמאיים יותר עם פחות קוד.