היום למדתי: פונקציית random ב CSS

28/08/2025

אני מודה כששמעתי על הפיצ'ר random ב CSS השאלה הראשונה שלי היתה - מספרים אקראיים ב CSS? למה??

אבל אז הורדתי את Safari Technology Preview החדש וניסיתי למשל את הדמו של הכוכבים:

body {
  background: black;
}
.star {
   background-color: white;
   border-radius: 50%;
   aspect-ratio: 1/1; 
   width: random(2px, 10px, 1px);
   position: fixed;
   top: random(0%, 100%);
   left: random(0%, 100%);
 }

לינק לקודפן: https://codepen.io/ynonp/pen/XJmYaae

ובאמת יש משהו נחמד ברקע שכל פעם נטען עם כוכבים במקום אחר.

מצד שני - תמיכת דפדפנים מאוד בעייתית, אין קונצנזוס על הפיצ'ר ולא נראה שמישהו חוץ מאפל רוצה לבנות אותו (אין אפילו עמוד ב mdn או ב caniuse).

כאן יש מדריך די מקיף מהבלוג של וובקיט על הפיצ'ר וכל הדברים המדליקים שאפשר יהיה לעשות עם random יום אחד אם הוא ייכנס לחיים שלנו:

https://webkit.org/blog/17285/rolling-the-dice-with-css-random/

עד אז נמשיך להגריל ערכים באמצעות JavaScript.