custom-properties.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Custom Properties</title>
<style type="text/css">
html {
    --base-color: #639;
}
aside {
    --base-color: #F60;
}

h1 {color: var(--base-color);}

id[^="support"] {color: silver;}
@supports (color: var(--test)) {
	#support1 {color: green;}
}
@supports (--test: pass) {
	#support2 {color: green;}
}

</style>
</head>
<body>


<section class="arena">

<h1>Heading 1</h1>
<p>Main text.</p>

<aside>
<h1>Heading 1</h1>
<p>An aside.</p>
</aside>

<h1>Heading 1</h1>
<p>Main text.</p>

</section>

<ol>
<li id="support1">Support 1</li>
<li id="support2">Support 2</li>
</ol>


</body>
</html>