‏اتصال انکرها در CSS بدون تکرار، با attr() پیشرفته

نویسنده می‌گه وقتی کروم Canary اتریبیوت anchor رو پیاده کرد که اجازه می‌داد رابطهٔ انکرها رو با HTML برقرار کنی نه CSS، خیلی خوشش اومد. ولی این اتریبیوت استاندارد نشد و کروم و فایرفاکس حذفش کردن. دلیلی که بهش اشاره شده اینه که invokerها از قبل به‌صورت ضمنی انکر می‌شن، ولی نویسنده می‌پرسه پس بقیهٔ المان‌ها چی؟ به‌جاش یه روش جایگزین با سینتکس جدید و پیشرفتهٔ تابع attr() پیشنهاد می‌ده.

مشکل اصلی اینه که برای انکر پوزیشنینگ معمولی، باید یه المان رو با position-anchor به یه المان دیگه با anchor-name وصل کنی و هردو یه مقدار داشته باشن. وقتی چندتا جفت داری (مثلاً چند تا «قایق» که هرکدوم باید به «انکر» خودش وصل بشه)، این کار خیلی تکراری و پر از کد می‌شه، چون باید برای هر جفت جدا قانون بنویسی.

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

نکتهٔ کلیدی اینه که attr() به‌صورت پیش‌فرض مقدار رو می‌گیره، پس باید با تابع type() نوع داده رو مشخص کنی تا به‌جای رشته، یه custom-ident بشه. همین قابلیت استفاده از attr() با هر پراپرتی (نه فقط content) یکی از چیزاییه که نسخهٔ پیشرفتهٔ اونو پیشرفته‌تر می‌کنه:

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

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

از نظر پشتیبانی مرورگرها، کروم از attr() پیشرفته پشتیبانی می‌کنه و فایرفاکس ۱۵۲ هم قراره ۱۶ ژوئن ۲۰۲۶ منتشرش کنه. Safari Technology Preview هم پشتیبانی می‌کنه ولی نویسنده می‌گه زمان نسخهٔ پایدار سافاری رو دقیق نمی‌دونه و حدسش Safari 27 تو سپتامبر ۲۰۲۶ هست. نویسنده اضافه می‌کنه که همین ترفند رو می‌شه برای انواع دیگهٔ اتصال هم به کار برد، مثلاً لینک‌کردن تایم‌لاین انیمیشن با scroll-timeline-name و animation-timeline.

در آخر، نویسنده به تابع ident() تو CSS Values and Units Level 5 اشاره می‌کنه که هنوز هیچ مرورگری پشتیبانیش نمی‌کنه، ولی به گفتهٔ اون می‌تونه کار با custom ident‌ها رو حتی تمیزتر کنه؛ مثلاً به‌جای فرمت‌کردن دستی مقدار به dashed ident، می‌شه یه رشتهٔ ساده تو HTML گذاشت و با ident("--" attr(...)) تبدیلش کرد.

نکات کلیدی:

• اتریبیوت anchor (اتصال انکر از HTML) استاندارد نشد و از کروم و فایرفاکس حذف شد
• با attr() پیشرفته و دیتا اتریبیوت می‌شه فقط با یه قانون CSS، تکرار position-anchor/anchor-name رو حذف کرد
• تابع type() لازمه تا مقدار attr() به‌جای رشته، custom-ident بشه
• attr() پیشرفته رو می‌شه با هر پراپرتی استفاده کرد، نه فقط content
• تابع ident() (هنوز بدون پشتیبانی مرورگر) قراره کار با custom ident رو تمیزتر کنه