自定义属性为状态

2021-01-09 14:14:23

这是詹姆斯·斯坦利(James Stanley)的一个有趣的想法:一个CSS文件(可能每天更新),其中包含针对“季节性”颜色(例如,春天是绿色,秋天是橙色)的CSS自定义属性。然后,您会知道这些颜色每天都会略有变化,然后使用这些值来为您的网站设置主题。

我认为,如果提供的CSS文件只是自定义属性,而不是自以为是的其他样式(例如,设置主体背景等的样式),那会更好玩。这样,您可以选择任何方式实现颜色,而不会产生任何副作用。

这让我认为,像这样的CDN托管的CSS文件可能还有其他有用的东西,例如今天在伪内容中使用的日期,或其他对时间敏感的东西。也许是月相?体育比分?今日例汤?!

/ *< div class =" soup">当天的汤是:< / div> * /。soup :: after {content:var(-soupOfTheDay); / *大声笑* /}

它几乎就像一个易于使用的数据API。如今,伪内容甚至是可访问的内容-但是您无法选择伪元素的文本,因此,请勿将其理解为将CSS用作内容API的实际认可。

威尔·博伊德(Will Boyd)刚刚写了一篇博客,介绍了可以在自定义属性中添加的内容。它们非常灵活。几乎任何东西都是有效的自定义属性值,然后用法往往会按照您的想法行事。

body {/ *完全正确* / --rgba:rgba(255,0,0,0.1);背景:var(-rgba); / *完全可以* / --rgba:255,0,0,0.1;背景:rgba(var(-rgba)); / *完全可以* / --rgb:255 0 0; --a:0.1;背景:rgb(var(-rgb)/ var(-a));} body ::之后{/ *完全好* /-歌曲:"我需要引号是伪内容\ A并且可以& #39;没有这种奇怪的破解\ A的换行符,但仍然相当宽松(still)&#34 ;;内容:var(-song);空格:前置;}

Bram指出了自定义属性可以实现的“基本”状态翻转质量:

:root {---is-big:0;}。is-big {--is-big:1;}。block {padding:calc(25px * var(-is-big)+ 10px *(1-var (-大)));边框宽度:calc(3px * var(-is-big)+ 1px *(1-var(-is-big)));}

添加一些复杂性,您将获得The Raven(带有自定义属性的媒体查询)。

我绝对希望看到CSS中发生了一些事情,以使此操作更容易。将CSS自定义属性用于一般状态将是惊人的。当UI处于任意状态时,我们可以应用任意样式!想一想现在的媒体查询有多有用,或者说容器查询将有用,但是由于它是任意状态,而不仅仅是陈述那些事情暴露在外,因此变得更加复杂。

Bram也谈到了这一点,并提到了Lea Verou所说的“高级定制属性”:

/ *理论上! * /。square {宽度:2vw;填充:0.25vw;长宽比:1/1; @if(var(-size)= big){width:16vw;填充:1vw; }}。my-input {@if(var(-pill)= on){border-radius:999px; }}

将它们称为“ CSS变量”,这是非常常见且可以理解的。您会经常阅读(并且我已经写过)类似于“ CSS变量(aka CSS定制属性)”或“ CSS定制属性(aka CSS变量)”的句子。ŠimeVidas最近指出,有一种相当正确的方式来引用这些句子事情:--this-part是自定义属性,而var(-this-part)是变量,它直接来自规范中的用法。

我想起了这个Vue提案。我不确定它是否在任何地方,但其想法是组件的状态会自动显示为CSS自定义属性。

<模板> < div class =" text"" Hello< / div>< / template>< script>导出默认{data(){return {color:' red' }}}< / script>< style vars =" {color}"> .text {color:var(-color);}< / style>

由于将颜色作为该组件状态的一部分,因此--color可用作该组件CSS的状态。我认为这是个好主意。

如果每次您在React中使用useState时,CSS自定义属性都放在:root上并自动更新,该怎么办?例如,如果您这样做:

从' https://cdn.skypack.dev/ [受电子邮件保护] ^ 16.13.1&#39 ;;从' https://cdn.skypack.dev/导入ReactDOM导入React,{useState} [受电子邮件保护] ^ 16.13.1' const App =()=> {const [activeColor,setActiveColor] = useState(" red"); return(< div className =" box"> h1>有效色:{activeColor}< / h1>< button onClick = {()=> {setActiveColor("红色")}}>红色< / button>< button onClick = {()=> {setActiveColor(" blue")}}>蓝色< / button>< / div&gt ;);} ReactDOM.render(< App />,document.getElementById("root"))

因为状态自动将其自身映射到自定义属性。有人应该制作一个useStateWithCustomProperties钩子或类似的东西。 #freeidea

像React和Vue这样的库都用于构建UI。我认为他们管理的状态自动暴露给CSS很有意义。

说到CSS应该知道的状态,我已经看了很多演示,它们通过将诸如当前鼠标位置或滚动位置之类的内容映射到CSS上来有趣。 我认为要求将这些数据本地暴露给CSS并非完全没有道理。 我们已经有了环境变量的概念,例如env(safe-area-inset-top),我可以看到它被用来暴露页面状态,例如env(page-scroll-percentage)或env(mouseY)。