‏تابع random() تو CSS: کمی بی‌نظمی بامزه

تو این مقاله از Smashing Magazine، نویسنده سراغ تابع جدید random() از مشخصات CSS Values and Units Level 5 رفته. این تابع اول تو سافاری اومد، الان داره با Chrome 156 عرضه می‌شه و Firefox هم نشونه‌های مثبت داده. کارش اینه که بدون JavaScript و بدون حلقه‌های Sass که صدها خط CSS ثابت تولید می‌کنن، یه مقدار تصادفی بسازه. نویسنده می‌گه طراحی وب این‌قدر دقیق و مرتب شده که گاهی خشک به نظر میاد و یه کم بی‌نظمی می‌تونه حس انسانی بده.

شکل کلیش random(min, max, step) هست. حداقل و حداکثر باید واحد یکسان داشته باشن، مثلاً هر دو deg یا هر دو بی‌واحد. اگه بخواید واحدها رو قاطی کنید باید از calc() استفاده کنید. آرگومان سوم، یعنی step، مقدار رو به گام‌های مشخص گرد می‌کنه، مثلاً random(0px, 60px, 15px) فقط 0، 15، 30، 45 یا 60 پیکسل می‌ده. این به درد وقتی می‌خوره که بخواید چیزها جابه‌جا بشن ولی رو گرید خودتون بشینن.

یه نکته مهم caching key هست، یعنی یه اسم مشترک که باعث می‌شه دو property همون عدد تصادفی رو بگیرن. اگه یه اسم مثل --square-size تنها بیاد، کل صفحه یه مقدار مشترک می‌گیره. برای این‌که عرض و ارتفاع هر عنصر با هم یکی بشن ولی هر کارت اندازه خودش رو داشته باشه، باید کلمه element-scoped رو کنارش بذارید:

.card-thumbnail {
  inline-size: random(--square-size element-scoped, 60px, 120px);
  block-size: random(--square-size element-scoped, 60px, 120px);
}

نویسنده چند دمو ساخته: حروفی که هر کدوم یه کم کج و جابه‌جا هستن و با hover صاف می‌شن، حروفی که هر کدوم با ارتفاع و سرعت خودش می‌پرن، کارت‌هایی که سایه‌شون با زاویه کج شدن تغییر می‌کنه، و یه دسته کارت که با اسکرول باز می‌شه. تو این آخری از sibling-index() برای ساختار ریاضی و از random() برای لرزش طبیعی استفاده شده. یه ترفند جالب هم delay منفی برای انیمیشنه که باعث می‌شه حروف از همون لحظه لود صفحه در حال پرش باشن.

چون پشتیبانی هنوز کامل نیست، پیشنهاد نویسنده اینه که کد رو داخل @supports بذارید تا مرورگرهای قدیمی یه حالت پایه داشته باشن. یه تابع دیگه هم به اسم random-item() تو مشخصات هست که از بین یه لیست (مثلاً رنگ‌های design system) یکی رو انتخاب می‌کنه، ولی فعلاً هیچ مرورگری پشتیبانیش نمی‌کنه. درباره دسترس‌پذیری هم دو هشدار داده: اگه یه کلمه رو به spanهای جدا بشکنید، باید spanها رو از screen reader مخفی کنید و کل کلمه رو با aria-label بدید، و همیشه به prefers-reduced-motion احترام بذارید.

به گفته نویسنده جای درست random() بخش‌های تزئینیه: عکس‌های کج، پس‌زمینه‌های generative، تیترهای بامزه و هماهنگ نبودن انیمیشن‌های تکراری. ولی نباید رو گرید اصلی، فاصله‌های فرم، اندازه فونت متن بلند یا دکمه‌ها و لینک‌های کوچیک اعمالش کرد، چون کاربر به یه چیدمان قابل پیش‌بینی نیاز داره.

نکات کلیدی:

• random() تو سافاری پشتیبانی می‌شه و با Chrome 156 داره عرضه می‌شه.
• حداقل و حداکثر باید واحد یکسان داشته باشن؛ برای ترکیب واحدها از calc() استفاده کنید.
• آرگومان step مقدار رو به گام‌های مشخص گرد می‌کنه.
• caching key با element-scoped مقدار تصادفی رو بین propertyهای یه عنصر مشترک می‌کنه.
• random-item() تو مشخصات هست ولی فعلاً پشتیبانی مرورگر نداره.
• برای لِی‌اوت اصلی، متن بلند و دکمه‌ها نباید از random() استفاده کرد.