如何将 CSS 变量设置为未设置的值，“--unset-it: unset”？

Question

我想给一个 CSS 变量未设置的值，这样我就可以将它用于 outline: unset 之类的事情。（我知道 --unset-it: unset 中的 "unset" 指的是变量本身。）

可以吗？我在这里做了一些测试：

const theDump = document.getElementById("dump");
const root = document.documentElement;
let checked = false;

document.getElementsByName("unset-it").forEach((elt) => {
  function displayIt(elt) {
    root.style.setProperty("--unset-it", elt.value);
    const propVal = getComputedStyle(root).getPropertyValue("--unset-it");
    theDump.textContent = `--unset-it: ${propVal};`;
  }
  if (!checked) {
    checked = true;
    elt.checked = true;
    elt.focus();
    displayIt(elt);
  }
  elt.addEventListener("click", evt => {
    const elt = evt.target;
    displayIt(elt);
  });
});

* {
  box-sizing: border-box;
}

#ex {
  background: yellow;
  padding: 0.5rem;
  margin: 1rem 0;
}

input[type=radio] {
  position: relative;
  width: 15rem;
  margin: 0;
  margin-left: 1rem;
  margin-bottom: 0.5rem;
}

input[type=radio]::after {
  content: attr(value);
  position: absolute;
  left: 0;
  top: 0;
}

#div1 {
  outline: var(--unset-it, 2px dotted red);
}

<input type="radio" name="unset-it" value='"unset"'>
<input type="radio" name="unset-it" value="'unset'">
<input type="radio" name="unset-it" value='unset'>
<input type="radio" name="unset-it" value='whatever'>
<input type="radio" name="unset-it" value='"whatever"'>
<input type="radio" name="unset-it" value='5px solid green'>
<input type="radio" name="unset-it" value='"5px solid green"'>
<input type="radio" name="unset-it" value="initial">

<div id="ex">
  <p id="div1">
    outline: var(--unset-it, 2px dotted red);
  </p>
  <p id="dump">Dump</p>
</div>

Answer 1

就像我在中所做的那样，您需要设置 unset 回退值并考虑 initial 激活它：

* {
  box-sizing: border-box;
}

#ex {
  background: yellow;
  padding: 0.5rem;
  margin: 1rem 0;
}


#div1 {
  --unset-it: 2px dotted red;
  outline: var(--unset-it, unset);
}

<div id="ex">
  <p id="div1">
    outline: 2px dotted red;
  </p>
  <p id="div1" style="--unset-it:initial">
    outline: unset;
  </p>
</div>

该技巧适用于任何全局值，例如 unset、inherit、initial 和 revert

另一个想法是考虑 计算时间 的无效值。从the specification我们可以读到：

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with its initial value, as explained above, or if it uses a valid custom property, but the property value, after substituting its var() functions, is invalid. When this happens, the computed value of the property is either the property’s inherited value or its initial value depending on whether the property is inherited or not, respectively, as if the property’s value had been specified as the unset keyword.

* {
  box-sizing: border-box;
}

#ex {
  background: yellow;
  padding: 0.5rem;
  margin: 1rem 0;
}


#div1 {
  outline: var(--unset-it, 2px dotted red);
}

<div id="ex">
  <p id="div1">
    outline: 2px dotted red;
  </p>
  <p id="div1" style="--unset-it:'random-value-here'">
    outline: unset;
  </p>
</div>

使用它时要注意，因为它与属性密切相关，您将在其中使用 CSS 变量，因为值的有效性取决于属性 .

对某些属性有效而对其他无效的值示例：

* {
  box-sizing: border-box;
}

#ex {
  background: yellow;
  padding: 0.5rem;
  margin: 1rem 0;
}


#div1 {
  outline: var(--unset-it, 2px dotted red); /*invalid here*/
}
#div1::before {
  content:var(--unset-it,"content"); /* valid here */
}

<div id="ex">
  <p id="div1" style="--unset-it:'random-value-here';">
    outline: unset;
  </p>
</div>

如何将 CSS 变量设置为未设置的值，“--unset-it: unset”？

How to set CSS variable to the value unset, "--unset-it: unset"?

css

css-variables