doc_variables_1.html

Enable keyboard shortcuts

<!-- Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/ -->

<html>

<head>

  <title>variables test</title>

  <style>

* {

      --color: tomato;

      --bg: violet;

      --empty: ;

      --nested: var(--color);

      --theme-color: light-dark(var(--color), var(--bg));

      --nested-with-function: var(--theme-color);

      --nested-with-empty: var(--empty);

    div {

      --color: chartreuse;

      color: var(--color, red);

      background: var(--nested-with-empty);

      background-color: var(--not-set, var(--bg));

      outline-color: var(--nested);

      border-color: var(--nested-with-function);

  </style>

</head>

<body>

  <div id="target" style="--bg: seagreen;"> the ocean </div>

</body>

</html>