css 如何将值设置为默认用户代理值?

rsaldnfx  于 2023-04-01  发布在  其他
关注(0)|答案(1)|浏览(122)

通过使用initial值,我可以将元素的CSS属性设置为规范定义的初始值。
但在某些情况下,我希望将CSS属性设置为它的初始用户代理值。
例如,select元素的appearance属性根据您使用的操作系统而变化,其默认值为none,但大多数情况下,用户代理样式表会将其设置为menulist,尤其是在桌面浏览器上。
那么,如果我想将select元素设置回默认的用户代理值,我该怎么做呢?理想情况下,我可以删除覆盖它的所有规则,但这并不总是一个实用的选项(例如,在WordPress主题中,或者使用第三方库时)。
下面是一个可视化的例子:
https://jsfiddle.net/xqy6zsfk/
默认选择元素

<select id="select1">
<option>appearance: initial;</option>
<select>

<select id="select2">
<option>appearance: unset;</option>
<select>

<select id="select3">
<option>appearance: revert;</option>
<select>

<select id="select4">
<option>apperance: inherit;</option>
<select>
select
{
  display: block;
  margin-bottom: 20px;
  padding: 10px;
}

#select1
{
    -webkit-appearance: initial;
    -moz-appearance: initial;
    appearance: initial;
}

#select2
{
    -webkit-appearance: unset;
    -moz-appearance: unset;
    appearance: unset;
}

#select3
{
    -webkit-appearance: revert;
    -moz-appearance: revert;
    appearance: revert;
}

#select4
{
    -webkit-appearance: inherit;
    -moz-appearance: inherit;
    appearance: inherit;
}
gdrx4gfi

gdrx4gfi1#

将属性设置回用户代理样式表中定义的属性的方法是使用revert值。
MDN是这样描述revert的:
如果该属性继承自其父代,则它将该属性重置为其继承值,或者重置为用户代理的样式表所建立的默认值。
revert值是一个相对较新的值,但现在已经得到了很好的支持,根据caniuse的数据,超过93%的人使用支持它的网络浏览器,这使得它在某种程度上可以在尖端网站上使用。
也就是说,如果你需要支持旧的浏览器,你应该确保你的网页在revert规则不活跃的时候仍然可用。你可以通过临时注解掉它或通过web浏览器的开发工具禁用它来做到这一点。

相关问题