Are There Random Numbers in CSS?

css-tricks.com css-tricks.com2 years ago in#Dev Love446

CSS allows you to create dynamic layouts and interfaces on the web, but as a language, it is static: once a value is set, it cannot be changed. The idea of randomness is off the table. Generating random numbers at runtime is the territory of JavaScript, not so much CSS. Or is it? If we factor in a little user interaction, we actually can generate some degree of randomness in CSS. Let’s take a look! Randomization from other languages There are ways to get some “dynamic randomization” using CSS variables as Robin Rendle explains in an article on CSS-Tricks. But these solutions are not 100% CSS, as they require JavaScript to update the CSS variable with the new random value. We can use preprocessors such as Sass or Less to generate random values, but once the CSS code is compiled and exported, the values are fixed and the randomness is lost. As Jake Albaugh explains: random in sass is like randomly choosing the name of a main character in a story. it’s only random when written. it doesn’t change. — jake albaugh (@jake_albaugh) December 29, 2016 Why do I care about random values in CSS? In the past, I’ve developed simple CSS-only apps such as a trivia game, a Simon game, and a magic trick. But I wanted to do something a little bit more complicated. I’ll leave a discussion about the validity, utility, or practicality of creating these CSS-only snippets for a later time. Based on the premise that some board games could be represented as Finite State Machines (FSM), they could be represented using HTML and CSS. So I started developing a game of Snakes and Ladders (aka Chutes and Ladders). It is a simple game. The goal is to advance a pawn from the beginning to the end of the board by avoiding the snakes and trying to go up the ladders. The project seemed feasible, but there was something that I was missing: rolling dice! The roll of dice (along with the flip of a coin) are universally recognized for randomization. You roll the dice or flip the coin, and you get an unknown value each time. Simulating a random dice roll I was going to superimpose layers with labels, and use CSS animations to “rotate” and exchange which layer was on top. Something like this: Simulation of how the layers animate on a browser The code to mimic this randomization is not excessively complicated and can be achieved with an animation and different animation delays: /* The highest z-index is the numbers of sides in the dice */ @keyframes changeOrder { from { z-index: 6; } to { z-index: 1; } } /* All the labels overlap by using absolute positioning */ label { animation: changeOrder 3s infinite linear; background: #ddd; cursor: pointer; display: block; left: 1rem; padding: 1rem; position: absolute; top: 1rem; user-select: none; } /* Negative delay so all parts of the animation are in motion */ label:nth-of-type(1) { animation-delay: -0.0s; } label:nth-of-type(2) { animation-delay: -0.5s; } label:nth-of-type(3) { animation-delay: -1.0s; } label:nth-of-type(4) { animation-delay: -1.5s; } label:nth-of-type(5) { animation-delay: -2.0s; } label:nth-of-type(6) { animation-delay: -2.5s; } The animation has been slowed down to allow easier interaction (but still fast enough to see the roadblock explained below). The pseudo-randomness is clearer, too. See the Pen Demo of pseudo-randomly generated number with CSS by Alvaro Montoro (@alvaromontoro)on CodePen. But then I hit a roadblock: I was getting random numbers, but sometimes, even when I was clicking on my…

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply