Basics

Back to the index.

Here’s a test of variable basics: are they supported at all, and does inheritance work?

Test

Each of the three divs below has the following styles:

div.test {
	border: 5px solid;
	padding: 10px;
	color: var(--colour);
	background: linear-gradient(var(--start),white var(--extent),var(--colour) 100%);
}

If there’s no

This is the first div

This is the second div

This is the third div

The values of the variables are defined per div:

div#one {
	--colour: #cc0000;
	--extent: 20%;
	--start: 90deg;
}

div#two {
	--colour: #0000cc;
	--extent: 40%;
	--start: 0deg;
}

div#three {
	--colour: #00cc00;
	--start: 180deg;
}