در طراحی، ما ساعت‌ها وقت صرف وسواس در مورد یکپارچگی، شبکه‌بندی و تراز می‌کنیم. اما وقتی شنیدم که تابع بومی random() در CSS در سافاری منتشر شده و در حال عرضه در کروم 156 است، به این فکر افتادم که: واقعاً تصادفی بودن در کجای وب منطقی است؟ آیا این چیزی است که ما در سیستم طراحی خود می‌خواهیم؟ برای فهمیدن این موضوع، کاری را کردم که همیشه در تردید انجام می‌دهم: مجموعه‌ای از دموهای سرگرم‌کننده در CodePen ساختم که تایپوگرافی ارگانیک، حروف جهنده، کارت‌های پخش‌شده و یک فنزین پانک را بررسی می‌کنند.
به عنوان کسی که عاشق ساخت سیستم‌های طراحی و کار با معماری CSS است، بخش بزرگی از کار روزانه من حول کنترل می‌چرخد. ما مقیاس‌های فاصله را تنظیم می‌کنیم، تایپوگرافی را قفل می‌کنیم، توکن‌های رنگی را تنظیم می‌کنیم و مطمئن می‌شویم که همه چیز در یک شبکه تراز است. ثبات معمولاً نان و کره ما به عنوان مهندسان طراحی و یک نشان افتخار از مهارت در ایجاد سیستم‌های طراحی است. اگر یک کارت ناگهان 20 پیکسل به چپ در یک رفرش بپرد، این بیان خلاقانه نیست؛ این یک باگ است که مدیر پروژه آن را ثبت خواهد کرد.
بنابراین وقتی برای اولین بار شنیدم که تابع بومی random() از مشخصات CSS Values and Units Level 5 در سافاری عرضه شده و در حال حاضر در کروم 156 (با سیگنال‌های مثبت از موزیلا برای فایرفاکس نیز) در حال انتشار است، اولین واکنش من این بود: این خیلی باحال است!
و واکنش دوم من این بود: صبر کن… کجا واقعاً می‌توانم از این استفاده کنم بدون اینکه خرابکاری کنم؟ چگونه می‌توانم طراحان را متقاعد کنم که تصادفی بودن ممکن است ایده خوبی برای یک سیستم طراحی باشد؟
چون بیایید صادق باشیم: چرا باید تصادفی بودن را در استایل‌شیت‌های خود بخواهیم در حالی که دهه گذشته را صرف تلاش برای پیش‌بینی‌پذیرتر کردن وب کرده‌ایم؟ حتی هنگام استفاده از فلکس‌باکس یا تایپوگرافی روان، ما هنوز در تلاشیم تا همه چیز را تا حد امکان تراز و یکنواخت کنیم.
جذابیت چیزهایی دانلودینا که 100% صاف نیستند
اگر برای یک ثانیه از مرورگر فاصله بگیرید و به چیزهای فیزیکی اطراف خود نگاه کنید، هیچ چیز واقعاً یکنواخت نیست.
یک چاپ حروف‌چینی قدیمی را در نظر بگیرید: جوهر کمی به دانه کاغذ نفوذ می‌کند، برخی حروف کج‌شدگی میکروسکوپی دارند و خط پایه همیشه آنقدر صاف نیست. یا به یک دسته عکس پولاروید که روی میز قهوه افتاده‌اند فکر کنید؛ آن عکس‌ها کامل نیستند، احتمالاً صاف هم نیستند. یا در مورد چراغ‌هایی که در یک خیابان در شب سوسو می‌زنند چطور؟ آن کمی بی‌نظمی آنالوگ چیزی است که باعث می‌شود همه چیز زنده، ارگانیک و انسانی به نظر برسد.
در وب، ما در کمال پیکسلی آنقدر خوب شده‌ایم که گاهی اوقات رابط‌های کاربری ما کمی بی‌روح به نظر می‌رسند. این را حتی بیشتر با طرح‌های سریع ایجاد شده توسط یک LLM بدون راهنما متوجه می‌شویم؛ معمولاً با همان نوع طراحی که 10 سال پیش داشتیم، مواجه می‌شویم. همه چیز مربع، تراز و مرتب است. کار می‌کند، اما راستش را بخواهید، کمی خسته‌کننده می‌شود.
تصادفی بودن در CSS به معنای دور انداختن سیستم طراحی شما نیست. بلکه در مورد نقص‌های کوچک و بازیگوشی است. شاید حتی بتوانیم آن را سرگرم‌کننده بنامیم.
برای دیدن اینکه این در عمل چگونه به نظر می‌رسد، چند ساعت در CodePen وقت صرف کردم. دموها ممکن است کمی جداگانه به نظر برسند، اما مطمئن هستم که بسیاری از طراحان می‌توانند از این آشوب کنترل‌شده بهترین استفاده را ببرند. اما قبل از اینکه به آن دموها نگاه کنیم، بیایید نگاهی به نحو بیندازیم.
تابع random() در CSS چگونه کار می‌کند
تابع random() در ماژول CSS Values and Units Level 5 مشخص شده است. این تابع یک مقدار شبه‌تصادفی را در CSS شما بدون نیاز به جاوااسکریپت یا یک حلقه Sass در زمان ساخت تولید می‌کند.
مشخصات رسمی به این صورت است:
در عمل، و در پیاده‌سازی‌های فعلی مرورگر، می‌توانید فقط آرگومان‌های جدا شده با کاما را بنویسید:
واحدهای مطابق
برای اکثر مردم شوکه‌کننده نخواهد بود، اما فکر کردم حداقل باید ذکر کنم که حداقل و حداکثر مقادیر شما باید دقیقاً از یک نوع واحد باشند.
پارسر CSS باید بداند با چه ابعادی سروکار دارد. می‌توانید از طول‌ها، زاویه‌ها، زمان، درصدها یا اعداد بدون واحد استفاده کنید:
اگر نیاز به ترکیب واحدها دارید، باید از calc() در داخل آرگومان‌ها استفاده کنید تا هر دو طرف به درستی حل شوند.
گام‌بندی و گرد کردن
آرگومان سوم اختیاری، اندازه گام است. اگر آن را اضافه نکنید، مرورگر از یک محدوده پیوسته انتخاب می‌کند. اما اگر یک گام ارائه دهید، مقدار تصادفی را به افزایش‌های گسسته گرد می‌کند:
این می‌تواند در مواردی مفید باشد که می‌خواهید چیزها کمی به اطراف بپرند، اما همچنان می‌خواهید روی شبکه از پیش تعریف شده شما قرار بگیرند.
کلیدهای کش: همگام‌سازی چیزها
به طور معمول، هر بار که random() روی یک ویژگی ارزیابی می‌شود، یک مقدار تصادفی مستقل ایجاد می‌کند. اما ممکن است مثالی وجود داشته باشد که شما یک جعبه ایجاد می‌کنید که inline-size و block-size را به صورت تصادفی تنظیم می‌کند، اما در عین حال نیاز دارید که آنها با هم مطابقت داشته باشند تا عنصر یک مربع کامل باقی بماند.
اینجاست که کلید کش وارد می‌شود:
در آخرین مشخصات، یک شناسه خط‌تیره ساده مانند --square-size، بذر خود را به صورت سراسری در هر عنصر به اشتراک می‌گذارد.