‏با Prop For That دیتای زنده رو بریز تو CSS

آدام آرگایل با کتابخونهٔ Prop For That می‌خواد به این عادت پایان بده که برای هر چیز کوچیک، همون چند خط JS تکراری رو بنویسی تا یه متغیر سفارشی رو روی یه المان ست کنی. به گفتهٔ خودش، خسته شده از منتظرموندن که CSS به اطلاعاتی که JS می‌دونه برسه، پس این کتابخونه اون خلأ رو پر می‌کنه. یه مثال ساده، گرفتنِ مقدار یه اسلایدر برای رنگ‌کردن خود اسلایدره:

<input type="range" data-props-for="range" min="0" max="100" value="40" />
``````css
input[type="range"] {
  background: linear-gradient(to right in oklab,
    var(--theme) calc(var(--live-value-pct) * 100%),
    var(--track) 0
  );
}

کارش ساده‌ست: به‌صورت اعلانی روی هر المانی که بخوای، با اتریبیوت data-props-for مشخص می‌کنی چه پراپ‌هایی می‌خوای، و اون پراپ‌ها به‌شکل زنده می‌ان تو CSS. یه API دستوری هم داره، ولی مسیر data-attribute تمیزتره. هر چیز هم یه پلاگینه که فقط در صورت نیاز لود می‌شه.

لیست پراپ‌های زنده‌ای که پشتیبانی می‌شن حسابی بلنده: موقعیت ماوس تو پنجره یا داخل یه المان، ابعاد و visibility المان، سایز اسکرول‌بار، مقدار و وضعیت اینپوت‌ها، رنگ‌های غالب یه عکس یا ویدیو، پیشرفت ویدیو، ساعت، FPS، وضعیت آنلاین/آفلاین، سرعت اسکرول، جهت‌گیری دستگاه، موقعیت جغرافیایی و... چندتا پراپ مخصوص کرومیوم هم مثل وضعیت شبکه و باتری و فشار CPU داره.

به گفتهٔ نویسنده، رسیدن Style Queries به همهٔ مرورگرهای اصلی یه نقطه‌عطف مهم برای CSS بوده و همینه که این کتابخونه رو خیلی عملی‌تر کرده؛ چون حالا می‌تونی مستقیم بر اساس همون پراپ‌های زنده استایل بدی. جمع‌بندی خودش هم کوتاهه: import کن، اتریبیوت بذار، و با CSS حال کن.

نکات کلیدی:

• Prop For That اطلاعات زندهٔ JS رو به‌صورت متغیرهای سفارشی CSS می‌ذاره
• کافیه اتریبیوت data-props-for رو روی المان بذاری
• ده‌ها پراپ: ماوس، اینپوت، رنگ عکس/ویدیو، باتری، FPS، موقعیت و...
• هر پراپ یه پلاگین جداست که فقط در صورت نیاز لود می‌شه
• با Style Queries که حالا فراگیره خیلی خوب جفت می‌شه