
这是詹姆斯·斯坦利(James Stanley)的一个有趣的主意:一个CSS文件(可能每天更新),其中包含“季节性”颜色(例如,春天是绿色,秋天是橙色)的CSS自定义属性。然后,您将使用这些值来为您的网站设置主题,并且知道这些颜色每天都会稍有变化。
这是我在编写本文时得到的:
:root {
--seasonal-bg: hsl(-68.70967741935485,9.419354838709678%,96%);
--seasonal-bgdark: hsl(-68.70967741935485,9.419354838709678%,90%);
--seasonal-fg: hsl(-68.70967741935485,9.419354838709678%,30%);
--seasonal-hl: hsl(-83.70967741935485,30.000000000000004%,50%);
--seasonal-hldark: hsl(-83.70967741935485,30.000000000000004%,35%);
}
我认为,如果提供的CSS文件只是自定义属性,而不是自以为是的其他样式(例如,设置主体背景等的样式),那会更好玩。这样,您可以选择任何方式实现颜色,而不会产生任何副作用。
CSS作为API?
这使我认为,像这样的CDN托管的CSS文件可能还有其他有用的东西,例如今天在伪内容中使用的日期,或其他对时间敏感的东西。也许是月相?体育比分?!今日例汤?!
/* The soup of the day is: /
.soup::after {
content: var(--soupOfTheDay); / lol kinda */
}
它几乎就像一个易于使用的数据API。如今,伪内容甚至是可访问的内容-但是您不能选择伪元素的文本,因此,请勿将其理解为将CSS用作内容API的实际认可。
自定义属性的灵活性
威尔·博伊德(Will Boyd)刚刚写了一篇博客,介绍了可以在自定义属性中添加的内容。它们非常灵活。几乎任何东西都是有效的自定义属性值,然后用法往往会按照您的想法行事。
body {
/* totally fine */
--rgba: rgba(255, 0, 0, 0.1);
background: var(--rgba);
/* totally fine */
--rgba: 255, 0, 0, 0.1;
background: rgba(var(--rgba));
/* totally fine */
--rgb: 255 0 0;
--a: 0.1;
background: rgb(var(--rgb) / var(--a));
}
body::after {
/* totally fine */
--song: "I need quotes to be pseudo content \A and can't have line breaks without this weird hack \A but still fairly permissive (💧💧💧) ";
content: var(--song);
white-space: pre;
}
Bram Van Damme在报道Will的文章时抓住了这种灵活性:
这就是为什么您可以使用CSS自定义属性执行以下操作的原因:
•执行条件计算
•将数据从CSS内传递到JavaScript
•将肤色/头发颜色修饰剂注入表情符号
•使用一个自定义属性切换多个值 (--foo: ; hack)
Bram指出了自定义属性可以实现的“基本”状态翻转质量:
:root {
--is-big: 0;
}
.is-big {
--is-big: 1;
}
.block {
padding: calc(
25px * var(--is-big) +
10px * (1 - var(--is-big))
);
border-width: calc(
3px * var(--is-big) +
1px * (1 - var(--is-big))
);
}
添加一些复杂性,您将获得The Raven(具有自定义属性的媒体查询)。
我绝对希望看到CSS中发生某些事情,以使此操作更容易。将CSS自定义属性用于一般状态将是惊人的。当UI处于任意状态时,我们可以应用任意样式!想一想现在的媒体查询有多有用,或者说容器查询将有多有用,但是由于它是任意状态,而不仅仅是陈述那些事情暴露在外,因此变得更加复杂。
Bram还谈到了Lea Verou所说的“高级定制属性”:
/* Theoretical! */
.square {
width: 2vw;
padding: 0.25vw;
aspect-ratio: 1/1;
@if (var(--size) = big) {
width: 16vw;
padding: 1vw;
}
}
.my-input {
@if(var(--pill) = on) {
border-radius: 999px;
}
}
关于那个命名
将它们称为“ CSS变量”,这是非常常见且可以理解的。您会经常阅读(我写过)类似“ CSS变量(aka CSS定制属性)”或“ CSS定制属性(aka CSS变量)”的句子。ŠimeVidas最近指出,有一种相当正确的方式来引用这些事物:--this-part是自定义属性,var(--this-part)是变量,它来自spec中的用法。
JavaScript库状态…自动吗?
我想起了这个Vue提案。我不确定它是否可以随处携带,但是其想法是组件的状态会自动显示为CSS自定义属性。
由于具有color该组件的状态的一部分,因此--color可以作为该组件的CSS的状态使用。我认为这是个好主意。
如果每次您useState在React中使用CSS定制属性并将其:root自动更新,该怎么办?例如,如果您这样做:
import React, { useState } from 'https://cdn.skypack.dev/[email protected]^16.13.1';
import ReactDOM from 'https://cdn.skypack.dev/[email protected]^16.13.1';
const App = () => {
const [ activeColor, setActiveColor ] = useState("red");
return(
Active Color: {activeColor}
{setActiveColor("red")}}>red
{setActiveColor("blue")}}>blue
);
}
ReactDOM.render(,
document.getElementById("root"))
而且您知道自己可以做到:
.box {
border-color: 2px solid var(--activeColor);
}
因为状态自动将其自身映射到自定义属性。有人应该useStateWithCustomProperties勾上钩子或类似的东西。#freeidea
像React和Vue这样的库都用于构建UI。我认为他们管理的状态自动暴露给CSS很有意义。
浏览器能否为我们提供更多的页面状态作为环境变量?
说到CSS应该了解的状态,我已经看到了很多演示,它们通过将诸如当前鼠标位置或滚动位置之类的内容映射到CSS上来有趣。我认为要求将数据本地暴露给CSS并不是完全不合理的。我们已经有了环境变量的概念,例如env(safe-area-inset-top),我可以看到它被用来显示页面状态,例如env(page-scroll-percentage)或env(mouseY)。