تابع random() در CSS و دیگر قابلیت‌های تازه کروم ۱۵۶ برای توسعه‌دهندگان وب

نسخه‌ی ۱۵۶ مرورگر گوگل کروم در روزهای اخیر به دست کاربران رسید و ۲۷ اکتبر ۲۰۲۶ (۵ آبان ۱۴۰۵) نسخه‌ی اندروید آن نیز در گوگل پلی منتشر شد. برای کاربران عادی این به‌روزرسانی شاید تنها یک عدد تازه باشد، اما برای طراحان و توسعه‌دهندگان وب چند قابلیت مهم دارد که برخی از آن‌ها سال‌ها انتظارش را می‌کشیدند. مهم‌ترینِ آن‌ها، تابع random() در CSS است.

تابع random() چه می‌کند؟

تا پیش از این، اگر می‌خواستید عناصر یک صفحه با اندازه، رنگ یا موقعیت تصادفی نمایش داده شوند، ناچار بودید با جاوااسکریپت عدد تصادفی بسازید و آن را به استایل عنصر بدهید. حالا کروم ۱۵۶ امکان تولید مقدار تصادفی در یک بازه را مستقیماً در CSS فراهم کرده است. برای نمونه می‌توان موقعیت افقی و عمودی چند نقطه را با مقداری تصادفی بین صفر تا صد درصد تعیین کرد تا در ظرف خود پراکنده شوند.

این تابع یک ویژگی هوشمندانه هم دارد: کنترل اشتراک مقدار. با تعیین یک کلید به‌عنوان آرگومان اول، می‌توانید مشخص کنید که چند ویژگی یا چند عنصر از یک مقدار تصادفی مشترک استفاده کنند یا هرکدام مقدار جداگانه بگیرند. مثلاً اگر بخواهید عرض و ارتفاع یک کادر هر دو برابر یک عدد تصادفی باشند تا شکل مربع بماند، این کلید به کارتان می‌آید.

کاربردهای عملی

  • پس‌زمینه‌های تزئینی با ستاره، حباب یا ذرات پراکنده
  • جلوه‌های متحرک طبیعی‌تر با تأخیر تصادفی
  • چیدمان‌های خلاقانه در صفحه‌های فرود و پروژه‌های هنری
  • کاهش کد جاوااسکریپت و در نتیجه سبک‌تر شدن صفحه

شبه‌کلاس :navigation-source

دومین قابلیت مهم، شبه‌کلاس :navigation-source است. این انتخابگر به عنصری اشاره می‌کند که ناوبری را آغاز کرده است؛ یعنی باشگاه خبری ورزشی پیوند، دکمه یا فرمی که کاربر روی آن کلیک کرده تا به صفحه‌ی بعدی برود. این وضعیت تا پایان انتقال حفظ می‌شود.

ارزش واقعی این قابلیت وقتی آشکار می‌شود که آن را در کنار View Transitions API به کار ببرید. فرض کنید در یک فروشگاه اینترنتی روی تصویر یک محصول کلیک می‌کنید؛ اکنون می‌توان تنها با CSS کاری کرد که همان تصویر با انیمیشنی روان بزرگ شود و به صفحه‌ی جزئیات محصول برسد، بدون آنکه برای مدیریت وضعیت کلیک نیازی به اسکریپت باشد.

اسکرول تک‌محوره و scroll-snap جفت

کروم ۱۵۶ امکان تعریف ظرف‌های اسکرول تک‌محوره را هم فراهم کرده است. با مقدار overflow: scroll clip می‌توان یک محور را قابل اسکرول و محور دیگر را بریده‌شده تعریف کرد. نتیجه این است که عناصر چسبان (sticky) می‌توانند در راستای افقی و عمودی به ظرف‌های متفاوتی وابسته باشند. ساده‌ترین مثال، جدول‌های بزرگ است که در آن سرستون‌ها و سرسطرها هنگام اسکرول در جای درست ثابت می‌مانند.

همچنین کلیدواژه‌ی تازه‌ی pair برای ویژگی scroll-snap-type اضافه شده است. پیش‌تر با مقدار both ممکن بود مرورگر در راستای افقی یک عنصر و در راستای عمودی عنصر دیگری را مقصد توقف انتخاب کند؛ اما pair تضمین می‌کند که هر دو محور روی یک عنصر بایستند. این برای گالری‌های شبکه‌ای و نقشه‌های تعاملی مفید است.

تغییرات پشت صحنه

  1. تلاش دوباره برای ماژول‌ها: پیش‌تر اگر بارگذاری یک ماژول جاوااسکریپت به دلیل قطعی شبکه شکست می‌خورد، این شکست در حافظه می‌ماند و تلاش‌های بعدی هم بلافاصله ناموفق بودند. حالا فراخوانی دوباره‌ی import() واقعاً دوباره تلاش می‌کند؛ خبری خوب برای کاربرانی که اینترنت ناپایدار دارند.
  2. IndexedDB روی SQLite: کروم پیاده‌سازی داخلی این پایگاه داده‌ی مرورگر را از LevelDB به SQLite منتقل می‌کند. این تغییر فعلاً فقط برای مخازن داده‌ی جدید اعمال می‌شود.
  3. سرآیندهای سفارشی در WebTransport و یک رابط تازه برای ثبت گزارش‌های عیب‌یابی WebRTC.
  4. حذف تدریجی Fenced Frames: این قابلیت از نسخه‌ی ۱۵۶ تنها به شکل پیاده‌سازی نمادین باقی مانده است.

آیا الان می‌توان از این قابلیت‌ها استفاده کرد؟

پاسخ کوتاه: با احتیاط. این ویژگی‌ها فعلاً در کروم و مرورگرهای مبتنی بر کرومیوم در دسترس‌اند و ممکن است در فایرفاکس و سافاری هنوز پشتیبانی نشوند. بهترین روش، بهبود تدریجی است: طراحی پایه‌ای بسازید که در همه‌ی مرورگرها کار کند و قابلیت‌های جدید را با قاعده‌ی @supports به‌عنوان لایه‌ای اضافه به کار ببرید. به این ترتیب کاربران مرورگرهای دیگر تجربه‌ی خرابی نخواهند داشت.

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

جمع‌بندی

کروم ۱۵۶ نشان می‌دهد که CSS هر سال تواناتر می‌شود. تابع random()، شبه‌کلاس :navigation-source و اسکرول تک‌محوره کارهایی را ساده می‌کنند که پیش‌تر به اسکریپت نیاز داشتند. اگر توسعه‌دهنده‌ی وب هستید، وقت آن است که این قابلیت‌ها را در یک پروژه‌ی آزمایشی امتحان کنید و برای استفاده‌ی گسترده‌تر، وضعیت پشتیبانی مرورگرهای دیگر را دنبال کنید. کاربران عادی هم بهتر است مرورگر خود را به‌روز نگه دارند، چون هر نسخه‌ی تازه اصلاحات امنیتی و پایداری را نیز به همراه دارد.