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

Question

我想为 CSS 变量赋予未设置的值，这样我就可以将它用于像 outline: unset 这样的东西。 （我知道--unset-it: 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

就像我在this previous answer with inherit 中所做的那样，您需要将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我们可以读到：

如果声明包含引用具有初始值的自定义属性的var()，则声明在计算值时可能无效，如上所述，或者如果它使用有效的自定义属性，但是属性值，在替换了它的var() 函数后，无效。发生这种情况时，属性的计算值要么是属性的继承值，要么是其初始值，具体取决于属性是否被继承，就好像属性的值已被指定为未设置的关键字.

* {
  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>