ورود تابع random به CSS؛ خلق زیبایی‌های طبیعی در طراحی وب

دنیای سیستم‌های طراحی (Design Systems) همواره بر پایه نظم، یکپارچگی و استانداردهای دقیق استوار بوده است؛ اما گاهی اوقات افزودن اندکی «عدم قطعیت» یا «نقص طبیعی» می‌تواند به رابط‌های کاربری بی‌روح، جانی تازه ببخشد. به لطف معرفی و توسعه تابع جدید random() در زبان CSS، طراحان و توسعه‌دهندگان وب اکنون می‌توانند بدون نیاز به کتابخانه‌های سنگین جاوااسکریپت یا حلقه‌های پیچیده در پیش‌پردازنده‌ها، جلوه‌های بصری پویا، طبیعی و جذابی را خلق کنند.

چرا طراحی وب مدرن به «نقص هوشمندانه» نیاز دارد؟

بخش عمده‌ای از وب امروز در انحصار شبکه‌های متقارن، کارت‌های یک‌شکل و تایپوگرافی‌های کاملاً منظم است. اگرچه این یکدستی برای خوانایی و تجربه کاربری (UX) ضروری است، اما در برخی سناریوها باعث تکراری و مکانیکی به نظر رسیدن وب‌سایت می‌شود.

در دنیای واقعی، هیچ چیز کاملاً متقارن نیست. وقتی دسته‌ای از کارت‌های بازی روی میز ریخته می‌شوند، هر کدام با زاویه‌ای متفاوت قرار می‌گیرند. وقتی تابلویی دستی نوشته می‌شود، حروف آن خطوطی کاملاً یکسان ندارند. نویسنده این مقاله در وب‌سایت Smashing Magazine، برشت د رویت (Brecht De Ruyte)، نشان می‌دهد که چگونه می‌توان با استفاده از تابع random() در CSS، این «نقص‌های ارگانیک و دلنشین» را به دنیای وب تزریق کرد و صمیمیت بیشتری میان کاربر و محصول دیجیتال ایجاد نمود.

روش‌های قدیمی تصادفی‌سازی؛ از جاوااسکریپت تا حلقه‌های SASS

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

۱. استفاده از جاوااسکریپت: کدنویسان با تابع Math.random() مقادیر متغیر را محاسبه کرده و به صورت Inline Style به المان‌های DOM تزریق می‌کردند. این روش نه‌تنها بار پردازشی مرورگر را افزایش می‌داد، بلکه در رندر اولیه صفحه (SSR) نیز مشکلاتی مانند پرش تصویر ایجاد می‌کرد.

۲. استفاده از پیش‌پردازنده‌های CSS (مانند SASS): توسعه‌دهندگان با نوشتن حلقه‌های @for صدها سطر کد CSS ایستا تولید می‌کردند تا به هر المان یک کلاس خاص با یک مقدار تصادفی اختصاص دهند. این کار حجم فایل‌های CSS را به شدت افزایش می‌داد و پویایی واقعی در زمان اجرا (Runtime) نداشت.

تابع random() در CSS چگونه این معادله را تغییر می‌دهد؟

تابع جدید random() به مرورگر اجازه می‌دهد تا مقادیر تصادفی را مستقیماً در سطح سی‌اس‌اس محاسبه و اعمال کند. این تابع می‌تواند در کنار کدهای استاندارد قرار گیرد و طیف وسیعی از مقادیر از جمله زاویه‌ها (deg)، زمان‌ها (ms یا s)، طول‌ها (px یا rem) و حتی رنگ‌ها را پشتیبانی کند.

با این ویژگی، دیگر نیازی به اسکریپت‌های جانبی یا فریم‌ورک‌های سنگین نیست. مرورگر به صورت کاملاً بومی (Native) و با بالاتری سرعت پردازشی (GPU-Accelerated)، محاسبات تصادفی را انجام داده و روی المان‌ها اعمال می‌کند.

/* یک نمونه مفهومی از نحوه استفاده از تابع جدید */
.card {
  transform: rotate(random(-5deg, 5deg));
  animation-delay: random(0s, 2s);
}

کاربردهای خلاقانه تابع random() در طراحی سایت

در این مقاله، نمونه‌های عملی جذابی از کاربرد این تابع مرور شده است که نشان می‌دهد چگونه ابزارهای مدرن CSS می‌توانند احساسات را در طراحی برانگیزند:

۱. تایپوگرافی ارگانیک و حروف متحرک

با اعمال مقادیر تصادفی اندک روی زاویه چرخش (Rotation) یا فاصله حروف (Letter-spacing)، می‌توان فونت‌های ساده را به تایپوگرافی‌های دست‌نویس یا زنده تبدیل کرد. همچنین در ایجاد افکت‌های متحرک برای حروف (Bouncing Letters)، زمان‌بندی متفاوت پرش هر حرف باعث می‌شود انیمیشن کاملاً طبیعی و غیرروباتیک به نظر برسد.

۲. چیدمان کارت‌های بازی و گالری‌های عکس (Splayed Cards)

تصور کنید یک گالری تصاویر یا کارت‌های معرفی محصول دارید. اگر به جای ردیف‌های کاملاً موازي، به هر کارت زوایای چرخش کاملاً تصادفی و جزیی داده شود، حس لمس اشیای واقعی در دنیای فیزیکی به کاربر منتقل می‌شود.

۳. انیمیشن‌های همزمان‌نشده (Staggered Animations)

وقتی چند المان (مانند ذرات پس‌زمینه، بارش برف یا حباب‌ها) همزمان انیمیشن خود را شروع می‌کنند، ساختار بصری بسیار ساختگی به نظر می‌رسد. با استفاده از تابع random() برای مقدار animation-delay و animation-duration، هر المان ریتم اختصاصی خود را پیدا کرده و صحنه‌ای کاملاً زنده خلق می‌شود.

مزایای عملکردی (Performance) برای توسعه‌دهندگان

علاوه بر زیبایی بصری، بهره‌گیری از این ویژگی بومی CSS مزایای فنی مهمی دارد:

• کاهش چشمگیر حجم فایل‌ها: حذف کدهای تکراری حاصل از حلقه‌های پیش‌پردازنده‌ها.
• بهبود شاخص‌های Core Web Vitals: عدم درگیری نخ اصلی پردازش (MAIn Thread) در جاوااسکریپت و در نتیجه سرعت بارگذاری بالاتر.
• کدنویسی تمیزتر و نگهداری آسان‌تر: توسعه‌دهنده به جای مدیریت ده‌ها کلاس مختلف، منطق تصادفی‌سازی را در یک سطر کد CSS مدیریت می‌کند.

نتیجه‌گیری

تکامل زبان CSS در سال‌های اخیر نشان داده است که این زبان دیگر صرفاً ابزاری برای استایل‌دهی ساده نیست، بلکه به یک موتور قدرتمند برای خلق تجربه‌های بصری پیچیده تبدیل شده است. تابع random() قدمی بزرگ به سمت تعادل میان «نظم سیستم‌های طراحی» و «زیبایی ارگانیک دنیای واقعی» است. طراحان وب اکنون می‌توانند بدون قربانی کردن سرعت و عملکرد سایت، روح شادابی و خلاقیت را به پروژه‌های خود بدمند.

---

منبع اصلی: Smashing Magazine

---

خدمات اختصاصی تیکینو در حوزه طراحی وب‌سایت

آیا می‌خواهید وب‌سایت شما از آخرین استانداردهای روز دنیا، جدیدترین قابلیت‌های CSS و تکنولوژی‌های پیشرفته بهره‌مند باشد؟ تیم تخصصی تیکینو با بهره‌گیری از دانش روز در حوزه طراحی سایت، UI/UX، سئو و دیجیتال مارکتینگ، پلتفرمی سریع، زیبا و بهینه‌شده برای کسب‌وکار شما خلق می‌کند. برای ارتقای تجربه دیجیتال مشتریان خود و مشاوره اختصاصی، با کارشناسان تیکینو در ارتباط باشید.