‏مدیریت لنگرها در CSS با attr() پیشرفته و data attribute

وقتی کروم Canary ویژگی anchor را پیاده کرد، می‌شد رابطه‌ی لنگر را به‌جای CSS با HTML برقرار کرد. اما این ویژگی استاندارد نشد و هم کروم و هم فایرفاکس آن را حذف کردن؛ ظاهراً چون فراخوان‌ها (invokers) از قبل به‌طور ضمنی لنگر می‌شن. سؤال اینه: برای بقیه‌ی المان‌ها چه باید کرد؟

روش معمول این بود که المانی را با anchor-name نام‌گذاری کنی و المان دیگری را با position-anchor به همان نام وصل کنی. مشکل اینه که اگر چند جفت «قایق و لنگر» مشابه داشته باشی، باید برای هر جفت یک قانون CSS جدا بنویسی و کد پرتکرار و طولانی می‌شه.

راه‌حل نویسنده استفاده از نسخه‌ی پیشرفته‌ی تابع attr() است. به‌جای ویژگی‌های anchor و id، از data attribute استفاده می‌کنی و مقدارها را به شکل dashed ident (مثل --anchorA) می‌نویسی، چون همین چیزیه که position-anchor و anchor-name می‌پذیرن:

<div data-boat="--anchorA">Boat A</div>
<div data-anchor="--anchorA">Anchor A</div>

حالا با یک قانون، مقدار را از همان data attribute کپی می‌کنی. چون attr() به‌صورت پیش‌فرض مقدار را می‌گیره، با type() نوعش را تعیین می‌کنی تا درست کار کنه. نکته اینجاست که attr() پیشرفته حالا با هر property کار می‌کنه، نه فقط content:

[data-boat] {
  position: fixed;
  position-anchor: attr(data-boat type(<custom-ident>));
}
[data-anchor] {
  anchor-name: attr(data-anchor type(<custom-ident>));
}

این‌طوری هر المان مقدار یکتای خودش را می‌گیره، در حالی که فقط یک قانون نوشته‌ای؛ یعنی منطق به HTML واگذار شده. همین ترفند برای انواع دیگر ارتباط مثل تایم‌لاین انیمیشن هم کار می‌کنه. از نظر پشتیبانی، attr() پیشرفته در کروم هست، فایرفاکس ۱۵۲ آن را در ۱۶ ژوئن ۲۰۲۶ عرضه می‌کنه و سافاری احتمالاً نسخه‌ی ۲۷. تابع ident() در آینده می‌تونه این کد را حتی تمیزتر کنه.

نکات کلیدی:

• ویژگی anchor در HTML استاندارد نشد و حذف شد
• با attr() پیشرفته می‌شه مقدار را از data attribute به position-anchor و anchor-name داد
• تابع type() نوع مقدار را custom-ident می‌کنه تا با هر property کار کنه
• نتیجه: یک قانون CSS به‌جای ده‌ها قانون پرتکرار