تابع random() در CSS: چرا تصادفیبودن بومی مهمه؟
فرانتاند
جاوااسکریپتخلاصهٔ کاملتر
یکی از چیزایی که CSS همیشه کم داشت، قابلیت تولید مقادیر تصادفی بهصورت بومی بود. تا همین الان اگه میخواستی چیزی توی صفحهات رنگ، اندازه یا موقعیت تصادفی داشته باشه، باید حتماً دست به دامن جاوااسکریپت میشدی. ولی با معرفی تابع random() در CSS، این داستان داره عوض میشه.
ایده اصلی اینه که بتونی مستقیماً داخل فایل CSS، مقادیری تولید کنی که هر بار متفاوتن. مثلاً رنگ پسزمینه یه کارت، زاویه چرخش یه آیکون، یا فاصله بین آیتمها رو بدون هیچ اسکریپتی تصادفی کنی.
یه نمونه ساده از این تابع اینه که بتونی یه مقدار عددی بین یه بازه مشخص بگیری:
html {
--featured-img: url(https://css-tricks.com/wp-content/uploads/2026/04/xUDzcUCN.png);
--bg-blend-mode: multiply;
background-size: 120% 2000px, 100% auto;
}اما چرا این قابلیت مهمه؟ چون وقتی طراح یا توسعهدهندهای میخواد تجربه بصری پویا و زندهای بسازه، مثلاً یه گالری که هر بار با چیدمان کمی متفاوت نشون داده میشه، الان مجبوره منطق رندم رو در جاوااسکریپت بنویسه و از طریق style اینلاین یا CSS Variables اعمال کنه. این یعنی وابستگی اضافه، کد بیشتر، و بعضاً مشکلات رندرینگ.
با random() بومی، این منطق مستقیماً تو لایه استایل میمونه که جاش همونجاست. این باعث میشه کد تمیزتر، نگهداریپذیرتر و مستقلتر باشه.
از دیدگاه اهمیت معماری، وقتی CSS بتونه خودش این کار رو بکنه، مرز بین «ظاهر» و «منطق» واضحتر میشه. دیگه لازم نیست برای یه افکت بصری ساده، یه فایل جاوااسکریپت لود کنی.
همچنین این قابلیت برای موارد خلاقانه مثل آرت جنراتیو، انیمیشنهای پیشزمینه، پترنهای متنوع و حتی تست A/B بصری میتونه کاربردهای جالبی داشته باشه.
در کل، اضافه شدن random() به CSS یه نشونهست از اینکه این زبان داره به سمت یه سیستم استایلدهی کاملتر و قدرتمندتر حرکت میکنه که کمتر به زبانهای دیگه وابستهست.
نکات کلیدی:
- تابع
random()در CSS اجازه میده مقادیر تصادفی مستقیماً در استایلشیت تولید بشن - تا قبل از این، برای تصادفیسازی ظاهر المانها باید از جاوااسکریپت کمک میگرفتیم
- این قابلیت کد رو تمیزتر میکنه و وابستگی به اسکریپت رو کاهش میده
- کاربردهایی مثل آرت جنراتیو، انیمیشنهای پویا و چیدمانهای متنوع از این تابع بهره میبرن
- این یه قدم مهم در مسیر قدرتمندتر شدن CSS بهعنوان یه زبان کامل استایلدهیه
