‏استایل‌دهی به ناوبری، این بار مستقیم تو CSS

به گفتهٔ براموس، تیم کروم چند ماهیه داره روی راهی کار می‌کنه که تطبیق مسیر و ناوبری رو مستقیم بیاره تو CSS. این ایده بعد از معرفی اولیه تو CSS Working Group و یه جلسهٔ بازخورد تو CSS Day، حالا شکل پیش‌نویس css-navigation-1 رو گرفته و قراره تو نشست حضوری CSSWG تو برلین مطرح بشه.

مشکلی که سراغش رفتن آشناست: تو View Transitions برای اپ‌های چندصفحه‌ای معمولاً می‌خوای بسته به اینکه کاربر از کجا میاد و کجا می‌ره، صفحه رو جور دیگه‌ای انیمیت کنی. نویسنده می‌گه الان برای این کار باید با جاوااسکریپت ناوبری رو بگیری، از pageswap و pagereveal آدرس‌ها رو در بیاری و NavigateEvent.sourceElement رو پیدا کنی؛ کدی که به مرور بزرگ و پیچیده می‌شه.

پیشنهادشون سه تیکه داره. اول @route که با تابع url-pattern() به مسیرها اسم می‌ده و الگوهاش همون سینتکس کتابخونهٔ path-to-regexp ـه که URLPattern هم ازش استفاده می‌کنه. بعد @navigation که وضعیت ناوبری جاری رو با from و to می‌سنجه و می‌تونی نوع ترنزیشن رو همون‌جا ست کنی:

@navigation (from: --home) and (to: --about) {
  @view-transition {
    navigation: auto;
    types: slide-all-to-left;
  }
}

تیکهٔ سوم سلکتورهان: :nav-source دقیقاً همون المانی رو می‌گیره که ناوبری رو شروع کرده، مثلاً تصویری که روش کلیک شده، تا فقط به همون view-transition-name بدی. :link-to() هم لینک‌ها رو بر اساس مسیری که بهش اشاره می‌کنن انتخاب می‌کنه، هرچند تطبیق پارامترها توش هنوز آماده نیست.

نویسنده تأکید می‌کنه که هنوز دنبال بازخورده؛ مثلاً این سؤال بازه که لینک‌های نسبی باید نسبت به آدرس سند حل بشن یا نسبت به آدرس استایل‌شیت. فعلاً می‌شه این‌ها رو تو Chrome Canary با فعال‌کردن فلگ Experimental Web Platform Features امتحان کرد.

نکات کلیدی:

• پیش‌نویس css-navigation-1 تطبیق مسیر و ناوبری رو به‌صورت اعلانی به CSS میاره
• @route با url-pattern() مسیرها رو اسم‌گذاری می‌کنه؛ الگوش شبیه path-to-regexp ـه
• @navigation با from، to، between و at وضعیت ناوبری جاری رو می‌سنجه
• :nav-source المان شروع‌کنندهٔ ناوبری رو می‌گیره و :link-to() لینک‌ها رو بر اساس مقصدشون
• فعلاً تو Chrome Canary با فلگ Experimental Web Platform Features قابل تسته