Generating Random Values

Generating a Random Numeric Value: the ''random()'' function

	<random()> = random( <>? , <>, <>, <>? )

	<> = [ [ auto | <> ] || element-shared ]
	                       | fixed <>
	

: <> :: The optional <> controls which [=random functions=] in the document will share a [=random base value=] and which will get distinct values. If <> is omitted, it behaves as ''random()/auto''. See below for details on the <> options, and see [[#random-caching]] for a precise description of their behavior. : <>, <> :: The two required [=calculations=] specify the minimum and maximum value the function can resolve to. Both limits are inclusive (the result can be the min or the max). If the maximum value is less than the minimum value, it behaves as if it's equal to the minimum value.

For example, ''random(100px, 300px)'' will resolve to a random <> between ''100px'' and ''300px'': it might be ''100px'', ''300px'', or any value between them like ''234.5px''.

: <>? :: The final optional argument specifies a step value: the values the function can resolve to are further restricted to the form min + (N * step), where N is a non-negative integer chosen uniformly randomly from the possible values that result in an in-range value.

For example, ''random(100px, 300px, 50px)'' can only resolve to ''100px'', ''150px'', ''200px'', ''250px'', or ''300px''; it will never return a value like ''120px''. Note that the max value might not actually show up as a possible value; for example, in ''random(100px, 200px, 30px)'', the possible values are ''100px'', ''130px'', ''160px'', and ''190px''.

Note: Even if it's intended that min and max are exactly some integer multiple of step apart, numeric precision issues can prevent that from being true. To avoid these issues, if the max value is very close to equalling a stepped value (above or below it), the max value is used as the final stepped value instead. See [[#random-evaluation]] for precise details.

As explained in the definition of ''round()'', CSS has no "natural" precision for values, but the step value can be used to assign one. For example, ''random(100px, 500px, 1px)'' restricts it to resolving only to whole px values; ''random(1, 10, 1)'' is restricted to resolving only to integers; etc.

Note: Providing a step value is not equivalent to generating a random value and then rounding it; ''random(100px, 200px, 50px)'' will generate three possible values (100px, 150px, 200px) all with a 1/3 chance, while ''round(random(100px, 200px), 50px)'' will generate the same three possible values, but ''150px'' will occur 1/2 the time, while ''100px'' and ''200px'' will only occur 1/4 of the time each.

			.random-rect {
				width: random(100px, 200px);
				height: random(100px, 200px);
			}
			

			.random-square {
				width: random(--foo, 100px, 200px);
				height: random(--foo, 100px, 200px);
			}
			

			.shared-random-rect {
				width: random(element-shared, 100px, 200px);
				height: random(element-shared, 100px, 200px);
			}
			

			.shared-random-squares {
				width: random(--foo element-shared, 100px, 200px);
				height: random(--foo element-shared, 100px, 200px);
			}
			

		.foo {
			width: random(element-shared, 100px, 200px);
		}
		.bar {
			width: random(element-shared, 200px, 300px);
		}
		

		.foo {
			animation: flicker linear random(1s, 2s);
		}
		.foo:hover {
			animation: glow linear random(4s, 6s);
		}
		

	<random-item()> = random-item( <> , [ <>? ]# )
	

		<> = random-item( <>, [ <>? ]# )
	

		.random-square {
			width: random(--foo element-shared, 100px, 500px);
			height: random(--foo element-shared, 100px, 500px);
		}
		

		.random-rect {
			width: random(100px, 500px);
			height: random(100px, 500px);
		}
		

		.same-tb-and-rl {
			margin: random(0px, 10px) random(0px, 10px);
		}
		

		.different-tb-same-rl {
			margin: random(0px, 10px) random(0px, 10px);
			margin-bottom: random(0px, 10px);
		}
		

		.square-or-rect {
			--size: random(100px, 500px);
			width: var(--size);
			height: var(--size);
		}
		

		#target::before {
			/* Based on the sibling-index() of #target */
			width: calc(sibling-index() * 10px);
		}
		#target::before::marker {
			/* Based on the sibling-index() of #target */
			width: calc(sibling-index() * 10px);
		}
		::slotted(*)::before {
			/* Based on the sibling-index() of the slotted element - outer tree */
			width: calc(sibling-index() * 10px);
		}
		::part(my-part) {
			/* 0px - inner tree */
			width: calc(sibling-index() * 10px);
		}
		:host {
			/* Based on the hosts sibling-index() - outer tree */
			width: calc(sibling-index() * 10px);
		}
		

	<calc-size()> = calc-size( <>, <> )

	<calc-size-basis> = [ <> | <> | any | <> ]
	

		details {
			transition: height 1s;
		}
		details::details-content {
			display: block;
		}
		details[open]::details-content {
			height: auto;
		}
		details:not([open])::details-content {
			height: calc-size(any, 0px);
		}
		

	Name: interpolate-size
	Value: numeric-only | allow-keywords
	Initial: numeric-only
	Inherited: yes
	Applies to: all elements
	Computed value: as specified
	Animation type: not animatable
	

			.foo {
				--one: var(--two);
				--two: var(--one);
			}
			

			.foo {
				--one: var(--two);
				--two: var(--three, baz);
				--three: var(--one);
			}
			

		.foo {
			--color: if(media(width >= 600px): blue; else: var(--color));
		}
		

		.random-fonts {
			--foo: Courier, monospace;
			--bar: Arial, serif;
			font-family: random-item(auto, var(--foo), var(--bar));
			/* equivalent to: */
			font-family: random-item(auto, {Courier, monospace}, {Arial, serif});

			/* and thus, randomly, equivalent to either */
			font-family: Courier, monospace;
			/* or */
			font-family: Arial, serif;
		}
		

		.invalid-if {
			--if-clause: media(width >= 600px): blue;
			color: if(var(--if-clause); else: green;);
		}
		

		.valid-if {
			--if-clause: media(width >= 600px): blue;
			color: if(...var(--if-clause); else: green;);
		}
		

		.foo {
			--side: margin-top;
			var(--side): 20px;
		}
		

		:root { --looks-valid: 20px; }
		p { background-color: var(--looks-valid); }
		

		p { color: var(--does-not-exist, initial); }
		

		.foo {
			--gap: 20;
			margin-top: var(--gap)px;
		}
		

		.foo {
		  --gap: 20;
		  margin-top: calc(var(--gap) * 1px);
		}
		

		.foo {
			--gap: 20;
			--not-px-length: var(--gap)px;
		}
		

		:root { --not-a-color: 20px; }
		p { background-color: red; }
		p { background-color: var(--not-a-color); }
		

		.foo {
			--prop1: lol;
			--prop2: var(--prop1) var(--prop1);
			--prop3: var(--prop2) var(--prop2);
			--prop4: var(--prop3) var(--prop3);
			/* etc */
		}