منتشر شده: ۲۹ اکتبر ۲۰۲۵
از کروم ۱۴۳ می‌توانید از کوئری‌های کانتینر لنگر انداخته شده برای شناسایی زمانی که یک عنصر لنگر انداخته شده از موقعیت‌یابی لنگر جایگزین استفاده می‌کند، استفاده کنید. این پست مشکلی را که این ویژگی حل می‌کند، توضیح می‌دهد.
API موقعیت‌یابی لنگر در CSS روشی قدرتمند برای اتصال یک عنصر (مانند یک popover) به عنصر دیگر (لنگر) و تعریف مجموعه‌ای از position-try-fallbackها ارائه می‌دهد که در صورت کمبود فضا برای عنصر استفاده می‌شوند. به عنوان مثال، اگر عنصر لنگر انداخته شده شما در ابتدا طوری طراحی شده باشد که در بالا باشد، اما با اسکرول کردن و رسیدن به لبه صفحه، مرورگر می‌تواند «چرخش» را مدیریت کند تا آن را در نمای دید نگه دارد.
با این حال، سطح ۱ از مشخصات موقعیت‌یابی لنگر، یک شکاف قابل توجه باقی گذاشت: در حالی که CSS می‌توانست عنصر را به یک موقعیت جایگزین منتقل کند ، هیچ راهی برای دانستن اینکه کدام موقعیت جایگزین انتخاب شده است، نداشت. این بدان معناست که شما نمی‌توانستید سبک‌های مختلفی را بر اساس آن موقعیت نهایی اعمال کنید. اگر راهنمای ابزار شما از پایین به بالا می‌چرخید، فلش آن همچنان به سمت اشتباه اشاره می‌کرد، مگر اینکه آن را با جاوا اسکریپت اصلاح می‌کردید.
کوئری‌های کانتینر لنگردار (که در مشخصات سطح ۲ موقعیت لنگر CSS تعریف شده‌اند) این مشکل را حل می‌کنند و به موقعیت لنگر CSS، آگاهی زمینه‌ای که از دست داده بود را می‌دهند.
نحوه کار: جستجوی جایگزین‌ها
کوئری‌های کانتینر لنگردار به شما امکان می‌دهند سبک‌ها را بر اساس نحوه‌ی تشخیص موقعیت لنگر توسط مرورگر اعمال کنید.
این با دو ویژگی جدید CSS تنظیم شده است:
-
container-type: anchored: این را روی عنصر موقعیت‌یابی‌شده (مثلاً tooltip) اعمال می‌کند. این کار آن را به یک محفظه پرس‌وجو تبدیل می‌کند که از وضعیت موقعیت‌یابی anchor خود «آگاه» است. -
@container anchored(fallback: ...): این سینتکس جدید at-rule به شما امکان می‌دهد تا بررسی کنید که در نهایت از کدام گزینه position-try-fallbacks استفاده شده است.
تصور کنید که یک tooltip دارید که می‌خواهید آن را در پایین قرار دهید، اما موقعیت آن را در بالا به عنوان جایگزین قرار دهید. کد زیر:
- در ابتدا سعی می‌کند
.tooltipرا در پایین لنگر خود (--my-anchor) قرار دهد. - اگر مناسب نباشد، تابع fallback آن را به بالا منتقل می‌کند.
- کوئری
@containerاین موضوع را تشخیص می‌دهد. وقتی top fallback اعمال می‌شود، کوئری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 انجام می‌شود - بدون جاوا اسکریپت، بدون ناظر، بدون کلاس‌های اضافی. توجه: اگر از API مربوط به popover استفاده می‌کنید، نیازی به نامگذاری صریح anchorهای خود ندارید، زیرا یک رابطه anchor ضمنی ایجاد می‌شود.
به دموی زیر که از هک حاشیه برای ایجاد یک مثلث CSS استفاده می‌کند و مثلث را با کوئری‌های لنگردار جابجا می‌کند، نگاهی بیندازید:
نتیجه‌گیری
کوئری‌های لنگردار، به CSS بومی مرورگر، آگاهی از موقعیت لنگر فعلی یک عنصر موقعیت‌یابی‌شده را می‌دهند. این بدان معناست که می‌توانید کامپوننت‌های بسیار مقاوم‌تر و آگاه از متن بسازید. فلش راهنمای ابزار فقط یک مثال است؛ همچنین می‌توانید:
- تغییر رنگ پس‌زمینه‌ی یک منو هنگام برگرداندن آن.
- یک سبک حاشیه را به لبه‌ای که به لنگر نزدیک‌تر است، منتقل می‌کند.
- مقدار border-radius را در پنجره‌ی popover طوری تنظیم کنید که گوشه‌ی «پیوست‌شده» مربع باشد.
- یک عنصر را بر اساس موقعیت جایگزینی که به آن متصل می‌شود، به طور متفاوتی متحرک‌سازی کنید.
این یک برد بزرگ برای موقعیت‌یابی لنگر و به طور کلی کتابخانه‌های کامپوننت است که عناصر رابط کاربری قوی‌تر و مستقل‌تری را با کد کمتر امکان‌پذیر می‌کند.