首页 >> HTML+CSS >> 自定义属性为状态

自定义属性为状态

287865 2021-03-02 0
浏览次数213

这是詹姆斯·斯坦利(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)。

全部评论:0