<!DOCTYPE html> <html><head> <title>CSS Variables Test: custom property names start with "var-" in lower case</title> <meta charset="UTF-8"> <link href="mailto:noahcollins@gmail.com" rel="author" title="Noah Collins"> <style type="text/css"> :root { /* these should be VALID custom property names */ var-veryblue: #22e; var-AlsoBlue: #22e; /* these should be INVALID custom property names */ VAR-veryred: #f00; Var-AlsoRed: #f00; } .blue-good-1 { color: var(veryblue); } .blue-good-2 { color: var(AlsoBlue); } .red-bad-1 { color: var(veryred); } .red-bad-2 { color: var(AlsoRed); } </style> </head> <body> <h2 class="blue-good-1">Valid CSS Variable Names</h2> <p class="blue-good-1">This paragraph is styled using a valid CSS Variable name. It should be blue.</p> <p class="blue-good-2">This paragraph is styled using a valid CSS Variable name. It should be blue.</p> <br> <h2>Invalid CSS Variable Names</h2> <p>This paragraph is styled using an invalid CSS Variable name. Fail if red.</p> <p>This paragraph is styled using an invalid CSS Variable name. Fail if red.</p> </body></html>