mefody.dev

Бросаем кубик с random() в CSS

Оказывается, в Safari Technology Preview можно поиграться с функцией random в CSS. Например, вы можете написать width: random(2px, 10px, 1px);, и у вас ширина блоков, к которым применилось свойство, будет случайным числом от 2 до 10 пикселей с шагом в 1 пиксель.

Мне бы такое очень пригодилось в генеративной графике. Делал когда-то демки на препроцессорах, где рандом на самом деле срабатывал только при компиляции. И игрался с тем, чтобы генерировать случайные числа внутри JS и пробрасывать их через кастомные переменные внутрь элементов — но это так себе удобство. А хочется, чтобы при обновлении страницы графика менялась.

Спецификация, на самом деле, более сложная, чем просто генерация чисел. Там можно и кэшированием управлять, и генерировать одно общее число для всех элементов. В Safari есть какая-то реализация, но спека ещё в процессе устаканивания.

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

WebKit

Rolling the Dice with CSS random()

Random functions in programming languages are amazing.

🔥24❤5🤩1🥴1

www.tgoop.com/mefody_dev/397

4.37K viewsAug 22 at 16:15

Бросаем кубик с random() в CSS

Оказывается, в Safari Technology Preview можно поиграться с функцией random в CSS. Например, вы можете написать width: random(2px, 10px, 1px);, и у вас ширина блоков, к которым применилось свойство, будет случайным числом от 2 до 10 пикселей с шагом в 1 пиксель.

Мне бы такое очень пригодилось в генеративной графике. Делал когда-то демки на препроцессорах, где рандом на самом деле срабатывал только при компиляции. И игрался с тем, чтобы генерировать случайные числа внутри JS и пробрасывать их через кастомные переменные внутрь элементов — но это так себе удобство. А хочется, чтобы при обновлении страницы графика менялась.

Спецификация, на самом деле, более сложная, чем просто генерация чисел. Там можно и кэшированием управлять, и генерировать одно общее число для всех элементов. В Safari есть какая-то реализация, но спека ещё в процессе устаканивания.

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

BY mefody.dev