CSS-::带有var()后备广告的选择 [英] CSS — ::selection with var() fallback

问题描述

我正在尝试使用css变量来更改整个网页的选择颜色:

I'm trying to change the selection color for an entire web page using a css variable:

html {
  --my-var: red;
}

 ::selection {
  background-color: var(--my-var);
}

<p>a b c</p>
<div>
  <p>x y z</p>
</div>

我正确地看到了选择样式.但是，如果 var 引用了一个未定义的变量，则根本没有选择颜色:

I correctly see the selection styling applied. However if var references a variable that is not defined, there is no selection color at all:

html {
  --my-var: red;
}

::selection {
  background-color: var(--not-my-var);
}

如何为使用css变量值(如果存在)或使用默认浏览器选择颜色的整个页面定义选择颜色?我试过 var(-not-my-var，unset)， var(-not-my-var，Inherit)和 var(--not-my-var，初始)，但它们似乎不起作用

How can I define a selection color for an entire page that uses a css variable value if it is exists, or falls back to the default browser selection color? I've tried var(--not-my-var, unset), var(--not-my-var, inherit) and var(--not-my-var, initial) but they do not seem to work

推荐答案

获取所需内容的唯一方法是确保该值无效，以便浏览器将其忽略并恢复为默认值:

The only way to obtain what you want is to make sure the value is invalid so the browser will ignore it and fall back to the default one:

::selection {
  background-color: something_invalid;
}

<p>a b c</p>
<div>
  <p>x y z</p>
</div>

不幸的是，使用 var(-variable)时将无法实现，因为该值永远不会无效.

Unfortunately, this won't be possible when using var(--variable) since the value will never be invalid.

从规范中，我们可以按照以下步骤查找值:

From the specificatition we have the following steps to find the value:

要在属性值中替换var():

To substitute a var() in a property’s value:

1. 如果由var()函数的第一个参数命名的自定义属性是受动画污染的，并且var()函数正在animation属性或它的长手之一中使用，则将custom属性视为具有其初始值该算法其余部分的价值.
2. 如果由var()函数的第一个参数命名的自定义属性的值不是初始值，请用相应的自定义属性的值替换var()函数.
3. 否则，如果var()函数将后备值作为第二个参数，则用后备值替换var()函数.如果回退中有任何var()引用，请也将其替换.
4. 否则，包含var()函数的属性在计算值时间无效.

(2)和(3)无关紧要，将始终为我们提供价值.(1)告诉我们将自定义属性的值视为 initial ，我们将落入(3)或(4).

(2) and (3) are trivial and will always give us a value. (1) tell us to treat the value of the custom property as initial and we will fall into (3) or (4).

对于(4)，我们还可以阅读相同的规范:

For the (4) we can also read from the same specification:

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

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.

background-color 不会被继承，因此它将使用其初始值 transparent ，这就是为什么您看不到颜色的原因.

background-color is not inherited so it will use its initial value which is transparent that's why you see no color.

现在，如果我们考虑后备情况(3)

Now if we consider the fallback cases (3)

• 使用 initial 表示背景颜色的初始值如此透明
• 使用 inherit 表示继承颜色，但是没有什么可以再次继承透明了
• 使用 unset ，我们将混合使用 inherit 和 initial

• using initial means the initial value of background color so transparent
• using inherit means inherit the color but there is nothing to inherit so transparent again
• using unset we will have a mix of inherit and initial

如果未设置CSS关键字从其父级继承，则将其重置为继承值；如果不是，则将其重置为初始值.换句话说，在第一种情况下，它的行为类似于Inherit关键字，在第二种情况下，其行为与初始关键字相同

---

您唯一的机会可能是使用 revert ，但支持率很低，我不确定它是否会起作用.

---

Your only chance would probably be the use of revert but the support is very low and I am not sure if it will work.

revert CSS关键字将属性的级联值从其当前值恢复为如果当前样式原点未对当前元素进行任何更改，则该属性应具有的值.因此，如果属性从其父级继承，则将其重置为继承的值，或者重置为由用户代理的样式表(或由用户样式，如果存在)建立的默认值. ^参考

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. Thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist). ^ref

更新

根据下面的评论，使用还原似乎也是不可能的.

As per the comments below, it seems also impossible with revert.

这篇关于CSS-::带有var()后备广告的选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！