‏چسبوندن المان‌ها به هم با Anchor Positioning در CSS

یکی از الگوهای رایج توی وب اینه که یه المان به یه المان دیگه بچسبه؛ مثل تولتیپ که باید بالای دکمه شناور بشه یا منوی کشویی که از زیر دکمه باز می‌شه. نویسنده می‌گه این کار در ظاهر ساده‌ست ولی جزئیاتش دردسر داره، چون اگه المان هدف نزدیک لبهٔ صفحه باشه تولتیپ سرریز می‌کنه و بریده می‌شه. تا حالا این مشکل رو با جاوااسکریپت حل می‌کردن که کدش هم حسابی پیچیده می‌شد.

حالا یه API جدید مرورگر به اسم Anchor Positioning اومده که همهٔ این کارهای سخت رو خودش انجام می‌ده. به گفتهٔ نویسنده تقریباً ۲۰ درصد این API می‌تونه ۸۰ درصد نیازهای واقعی رو پوشش بده. توی این روش دو تا المان مهمه: المان لنگر (anchor) که پایه‌ست و بهش می‌چسبیم، و المان هدف (target) که همون المان شناوره.

برای اینکه کار کنه، المان هدف باید position: absolute یا fixed داشته باشه. اول به لنگر با ویژگی anchor-name یه اسم می‌دی که با دو تا خط تیره شروع می‌شه، بعد توی المان هدف با position-anchor همون اسمو صدا می‌زنی، و آخرش با position-area می‌گی هدف کجای لنگر بشینه.

.target {
  position: absolute;
  position-anchor: --some-anchor;
  position-area: top center;
}

برای درک position-area می‌شه یه شبکهٔ ۳ در ۳ رو تصور کرد که لنگر وسطش نشسته. با یکی دو تا مقدار مثل top یا top left می‌تونی جای دقیق هدف رو مشخص کنی. اگه فقط یه مقدار بدی، هدف توی جهت عمود کامل کشیده می‌شه. فاصله انداختن هم فعلاً ویژگی مخصوص نداره و با margin انجام می‌شه.

به نظر نویسنده مفیدترین بخش این API پویا بودنشه. مرورگر همون‌طور که صفحه اسکرول می‌شه چک می‌کنه که هدف سرریز کرده یا نه، و اگه سرریز بشه سراغ موقعیت‌های جایگزینِ position-try-fallbacks می‌ره. مثلاً می‌شه گفت اگه بالا جا نبود تولتیپ بره پایین. کلیدواژهٔ flip-block هم دقیقاً همینو خودکار انجام می‌ده و هدف رو به سمت مخالفِ محور عمودی می‌چرخونه.

نویسنده می‌گه یه نکتهٔ باز مونده اینه که فلشِ تولتیپ موقع جابه‌جا شدن هنوز درست نمی‌چرخه؛ راه‌حلش کوئری‌های کانتینرِ نسخهٔ دوم این API هست که فعلاً فقط توی مرورگرهای Chromium کار می‌کنه. برای مرورگرهای قدیمی هم می‌شه از polyfill یا feature query استفاده کرد. جمع‌بندی نویسنده اینه که فعلاً برای خیلی از موارد هنوز کتابخونه‌های جاوااسکریپت بهترن، ولی یکی دو سال دیگه که نسخهٔ ۲ همه‌جا در دسترس باشه، این روش می‌شه بهترین راه ساختن UI لنگرشده.

نکات کلیدی:

• Anchor Positioning یه API جدید CSS برای چسبوندن یه المان شناور به یه المان پایه‌ست، بدون جاوااسکریپت.
• المان هدف باید absolute یا fixed باشه؛ لنگر با anchor-name نام‌گذاری می‌شه و هدف با position-anchor و position-area بهش وصل می‌شه.
• position-area مثل یه شبکهٔ ۳ در ۳ عمل می‌کنه و جای هدف نسبت به لنگر رو مشخص می‌کنه.
• با position-try-fallbacks و کلیدواژهٔ flip-block، مرورگر موقع سرریز خودش هدف رو به سمت دیگه می‌چرخونه.
• نسخهٔ ۲ فعلاً فقط توی Chromium هست، ولی flip-block روی همهٔ مرورگرهای اصلی کار می‌کنه.