‏دکمهٔ پست تصادفی فقط با HTML و CSS

کریس کویر این پست رو از یه نوشتهٔ جیم نیلسن شروع می‌کنه که دنبال ساختن دکمهٔ «پست تصادفی» برای یه سایت استاتیک بوده. رو سایت استاتیک خبری از کد سمت سرور نیست که مثل PHP بشه یه پست تصادفی رو انتخاب و بهش ریدایرکت کرد، برای همین جیم اول شناسهٔ همهٔ ۹۷۴ نوشته‌ش رو با جاوااسکریپت تو هر صفحه اینلاین کرده بود — که یعنی با انتشار هر پست جدید کل صفحه‌ها باید دوباره بیلد می‌شد. آخرش رفت سراغ یه صفحهٔ جداگونه که خودکار کار ریدایرکت رو انجام می‌ده.

کویر می‌گه بهبودی برای جیم نداره، ولی همین موضوع یه راه دیگه به ذهنش رسونده: چرا مقصد رو خودِ جای کلیک تعیین نکنه؟ به‌جای یه دکمهٔ واقعی، یه div می‌سازی و توش لینک‌های ریز به پست‌ها می‌ذاری، بعد با فلکس‌باکس اجازه می‌دی این لینک‌ها کل فضای دکمه رو پر کنن. یه span هم با pointer-events: none روش می‌شینه تا متن دکمه وسطش دیده شه. اگه بخوای ترفند مخفی بمونه، کافیه لینک‌ها رو opacity: 0 کنی؛ رفتار همونه و ظاهرش می‌شه یه دکمهٔ ساده.

برای تصادفی‌تر شدن، نویسنده یه خط اضافه می‌کنه: مقدار order هر لینک با تابع random() ست می‌شه تا هر بار لود صفحه چیدمان فرق کنه. دستکاری order معمولاً برای ترتیب تب‌خوردن دردسر می‌سازه و یه ایراد دسترسی‌پذیری حساب می‌شه، ولی به گفتهٔ کویر reading-flow: flex-visual روی خود دکمه همین رو جبران می‌کنه:

.random-button {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  reading-flow: flex-visual;

  > a {
    flex: 1 1 30px;
    order: random(1, 9999);
  }
}

تابع random() فعلاً تو سافاری و کروم (پشت فلگ) کار می‌کنه، پس این یه تصادفی‌سازی کاملاً سمت کلاینته و هر بار لود صفحه نتیجه‌ش فرق داره. تو دمو با واحدهای کانتینری font-size رو هم تنظیم کرده تا لینک‌ها اندازهٔ فضا در بیان، و می‌گه اگه لینک‌ها رو تا حد ۱×۱ پیکسل کوچیک کنی ایده تا هزاران پست هم مقیاس می‌گیره. با این حال خودش هم قبول داره که برای مورد جیم، همون راه‌حل تک‌صفحه‌ای احتمالاً کاربردی‌تره.

نکات کلیدی:

• دکمهٔ «پست تصادفی» بدون جاوااسکریپت: یه ظرف فلکس پر از لینک‌های ریز به پست‌ها
• flex-wrap: wrap و align-content: stretch باعث می‌شن ردیف آخر هم کل فضا رو پر کنه
• order: random(1, 9999) چیدمان رو هر بار لود عوض می‌کنه
• reading-flow: flex-visual جلوی به‌هم‌ریختن ترتیب تب‌خوردن رو می‌گیره
• random() فعلاً فقط تو سافاری و کروم پشت فلگ در دسترسه