迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

CSS 具有可选自定义属性值的多值属性(Multi-Value)

作者:迹忆客 最近更新:2022/08/05 浏览次数:

想象一下,你有一个元素具有多值 CSS 属性,例如 transform: 可选的自定义属性值:

.el {
  transform: translate(100px) scale(1.5) skew(5deg);
}

现在想象一下,我们并不总是希望应用所有的 transform 值,所以有些是可选的。 你可能会想到 CSS 可选的自定义属性值:

.el {
  /*         |-- default ---| |-- optional --| */
  transform: translate(100px) var(--transform);
}

但令人惊讶的是,使用像这样的可选自定义属性值并不能按预期工作。 如果未定义 --transform 变量,则不会应用整个属性。 我有一个小“技巧”来解决这个问题,它看起来像这样:

.el {
  transform: translate(100px) var(--transform, );
}

注意到区别了吗? 在那里定义了一个备用的值,设置为空值: (, )

这就是诀窍,而且非常有用! 下面是规范所定义的:

在通常的逗号省略规则的一个例外中,当逗号不分隔值时需要省略逗号,在 var() 中必须将没有任何内容的裸逗号视为有效,表示一个空的备用值。

示例

就像上面说的,这很有用,适用于任何多值 CSS 属性。 除了我们刚刚讨论的 transform 示例之外,下面的示例还使用文本阴影、背景和过滤器来展示它。

HTML

<div class='defined'>Defined</div>
<div class='undefined'>Undefined</div>
<div class='no-fallback'>Without Fallback</div>

CSS

body{
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  height: 100vh;
  font: bold 20px Arial;
}

div {
  cursor: pointer;
  user-select: none;
  padding: .5em;
  display: inline-block;
}

.defined {
  /* 
    不定义以下变量将导致整个属性不起作用,除非明确将备用值设置为空:(,)
  */
  --transform: rotate(30deg) scale(1.5);
  --text-shadow: ,0 0 5px black; /* special case, which requires a comma at the beginning  */
  --bg-color: gold;
  --filter: sepia(60%);
  
  /* 具有默认值的多值属性 + 可选的额外属性 */
  transform: skew(5deg) var(--transform, );
  text-shadow: 0 -1px 3px white var(--text-shadow, );
  background: linear-gradient(90deg, cyan, transparent) var(--bg-color, );
  filter: contrast(70%) invert(10%) var(--filter, );
}

.undefined {
  transform: skew(5deg) var(--transform, );
  text-shadow: 0 -1px 3px white var(--text-shadow, );
  background: linear-gradient(90deg, cyan, transparent) var(--bg-color, );
  filter: contrast(70%) invert(10%) var(--filter, );
}

.no-fallback {
  /* 具有默认值的多值属性 + 可选的额外属性 */
  transform: skew(5deg) var(--transform);
  text-shadow: 0 -1px 3px white var(--text-shadow);
  background: linear-gradient(90deg, cyan, transparent) var(--bg-color);
  filter: contrast(70%) invert(10%) var(--filter);
}

尝试一下

显示的效果如下所示,我们也可以点击上面的“尝试一下”按钮在线查看效果。

CSS 多值属性

一些接受多个值的属性,如 text-shadow,需要特殊处理,因为它们只能使用逗号分隔符。 在这些情况下,当定义 CSS 自定义属性时,我们(作为代码作者)知道它只能在使用自定义属性的地方已经定义了值的情况下使用。 然后应该在第一个值之前直接在自定义属性中插入一个逗号,如下所示:

--text-shadow: ,0 0 5px black;

当然,这会抑制在它是某些属性的唯一值的地方使用该变量的能力。 不过,这可以通过为抽象目的创建变量“层”来解决,即自定义属性指向较低级别的自定义属性。

当心 Sass 编译器

在探索这个技巧时,发现了 Sass 编译器中的一个错误,该错误会去除空值 (,) 的备用值,这不符合规范。 希望它会尽快修复。

作为临时解决方法,可以使用如下的技巧:

transform: translate(100px) var(--transform, scale(1));

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

css
扫码一下
查看教程更方便