如何将 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

就像我在之前的回答中所做的那样，inherit您需要设置unset后备值并考虑initial激活它：

\n\n

\r\n

\r\n

* {\r\n  box-sizing: border-box;\r\n}\r\n\r\n#ex {\r\n  background: yellow;\r\n  padding: 0.5rem;\r\n  margin: 1rem 0;\r\n}\r\n\r\n\r\n#div1 {\r\n  --unset-it: 2px dotted red;\r\n  outline: var(--unset-it, unset);\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n\n

该技巧应该适用于任何全局值，例如unset、和inheritinitialrevert

\n\n\n\n

另一个想法是在计算时考虑无效值。从规范中我们可以读到：

\n\n

\n

如果声明包含引用var()自定义属性及其初始值（如上所述），或者如果它使用有效的自定义属性，但属性值在替换其函数后无效var()，则该声明在计算值时可能无效。发生这种情况时，属性的计算值是属性\xe2\x80\x99s 继承值或其初始值，分别取决于该属性是否继承，就好像属性\xe2\x80\x99s 值具有被指定为 unset 关键字。

\n

\n\n

\r\n

\r\n

* {\r\n  box-sizing: border-box;\r\n}\r\n\r\n#ex {\r\n  background: yellow;\r\n  padding: 0.5rem;\r\n  margin: 1rem 0;\r\n}\r\n\r\n\r\n#div1 {\r\n  outline: var(--unset-it, 2px dotted red);\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n\n

使用它时应该注意，因为它与您将使用 CSS 变量的属性密切相关，因为值的有效性取决于属性。

\n\n

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

\n\n

\r\n

\r\n

* {\r\n  box-sizing: border-box;\r\n}\r\n\r\n#ex {\r\n  background: yellow;\r\n  padding: 0.5rem;\r\n  margin: 1rem 0;\r\n}\r\n\r\n\r\n#div1 {\r\n  outline: var(--unset-it, 2px dotted red); /*invalid here*/\r\n}\r\n#div1::before {\r\n  content:var(--unset-it,"content"); /* valid here */\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n