أعلنت متصفحات Safari وChrome 156 عن دعم الدالة native CSS random()، خطوة قد تبدو بسيطة لكنها تفتح باباً لإدخال عشوائية خفيفة إلى واجهات الويب دون الحاجة إلى جافاسكريبت أو عمليات بناء معقدة.
ما هي دالة random() في CSS؟
تُعرّف الدالة random() في مواصفات CSS Values and Units Module Level 5 وتُعيد قيمة عشوائية ضمن نطاق يحدده المطور. الصيغة العامة هي random(<key>?, <min>, <max>, [by <step>]) حيث يمكن إضافة مفتاح تخزين (caching key) لتوحيد القيم بين خصائص متعددة.
كيفية الاستخدام في المتصفحات الحالية
يمكن كتابة الدالة مباشرة داخل أي خاصية تقبل أرقامًا أو نسبًا. أمثلة شائعة:
- rotate: random(-3deg, 3deg); // زاوية عشوائية
- inline-size: random(20px, 80px, 10px); // عرض عشوائي بخطوات 10 px
- animation-duration: random(1.5s, 3s, 0.2s); // مدة عشوائية
الدعم الحالي متوفر في Safari (الإصدار الأول) وChrome 156 (مع Edge الذي يعتمد على Chromium). يُنصح بلف الكود داخل @supports لضمان توافق المتصفحات التي لا تدعم الدالة بعد.
أمثلة عملية وإمكانيات التصميم
من خلال تجارب على CodePen، يمكن إضفاء حيوية على بطاقات، خطوط، أو حتى حروف منفردة. مثال على تحريك حروف كلمة بصورة عشوائية:
- .char { rotate: random(-2.8deg, 2.8deg); translate: random(-1.5px, 1.5px) random(-2.8px, 2.8px); opacity: random(0.8, 1, 0.02); }
- .char:hover { rotate: 0deg; translate: 0 0; opacity: 1; }
يمكن أيضاً مشاركة مفتاح التخزين لضمان أن العرض والارتفاع يتطابقان، ما يحافظ على شكل المربع عندما نحتاج إلى عشوائية متساوية.
اعتبارات الوصول وسلامة الاستخدام
عند تقسيم النص إلى عناصر <span> لتطبيق العشوائية على كل حرف، قد يتسبب ذلك في قراءة القارئ الآلي لكل حرف على حدة. لتجنب ذلك، يجب إخفاء العناصر البصرية عن تقنيات المساعدة باستخدام aria-hidden=”true” وتوفير النص الكامل في العنصر الأب.
ما يعنيه ذلك للمطورين والمصممين
برأينا، تُتيح دالة random() طريقة سريعة لإضافة لمسة من الفوضى المتحكم فيها دون تحميل الصفحات بجافاسكريبت إضافي. يمكن استخدامها في:
- تحريك بطاقات معرض الصور لإحساس أكثر حيوية.
- إضفاء تنوع بسيط على خطوط العناوين لتقليل الشعور بالرتابة.
- إنشاء أنماط خلفية عشوائية من مجموعة ألوان محددة عبر random-item() (قيد التطوير).
مع استمرار انتشار الدعم في المتصفحات، سيصبح من السهل دمج هذه التقنية في أنظمة التصميم الحالية، مع الحفاظ على قابلية الصيانة عبر @supports واستخدام مفاتيح التخزين لتوحيد القيم عندما يلزم.
المصدر: smashingmagazine.com