Custom Properties as State

An interesting idea from James Stanley: a CSS file (updated approximately once a day) with CSS custom properties in "seasonal" colors (for example, spring is green and autumn is orange). You can then use these values ​​to set the theme for your website, knowing that these colors will change slightly every day.

I got the following when writing this article:

 :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.00000000000004%,35%);
}

I think it would be even more interesting if the provided CSS file is just a custom property, rather than other styles with subjective opinions (such as setting the subject background, etc.). This way you can implement the color in any way you choose without any side effects.

CSS as API?

This reminds me that a CDN-hosted CSS file like this can contain other useful content, such as today's date (for pseudo-content), or other special time-sensitive content. Maybe it's the moon phase? Sports score? ! Daily soup? !

 /*<div> The soup of the day is:</div> */
.soup::after {
  content: var(--soupOfTheDay); /* lol kinda */
}

It's almost like an extremely easy to use data API. Pseudo-content is even accessible nowadays – but you can’t select text for pseudo-elements, so don’t interpret this as an actual approval to use CSS as a content API.

Flexibility of custom properties

Will Boyd just wrote a blog about what can be included in custom properties. They are very flexible. Almost anything is a valid custom property value, and its usage tends to be as you expect.

 body {
  /* No problem*/
  --rgba: rgba(255, 0, 0, 0.1);
  background: var(--rgba);

  /* No problem*/
  --rgba: 255, 0, 0, 0.1;
  background: rgba(var(--rgba));

  /* No problem*/
  --rgb: 255 0 0;
  --a: 0.1;
  background: rgb(var(--rgb) / var(--a));
}

body::after {
  /* No problem*/
  --song: "I need quotes to be pseudo content \A and can't have line breaks without this weird hack \A but still fairly permitive (???) ";
  content: var(--song);
  white-space: pre;
}

Bram Van Damme captures this flexibility when introducing Will’s article:

This is why you can use CSS custom properties to:

• Perform conditional calculations

• Pass data from CSS to JavaScript

• Inject skin tone/hair color modifier into emojis

• Switch multiple values ​​with one custom property (--foo: ;hack)

Bram points out this "basic" state switching feature that custom properties can achieve:

 :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))
  );
}

Add a few scoops of complexity and you will get Crow (media query with custom properties).

I really want to see something happening in CSS to simplify this process. It would be great to use CSS custom properties for common state. When the UI is in any state, we can apply any style! Think about how useful the media query is now, or how useful the container query will be, but this is compounded because it is not the state of the public, but just arbitrary state.

Bram also introduced this, referring to what Lea Verou calls “higher level custom properties”:

 /* Theoretically! */

.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;
   }
}

About Naming

Will calls them "CSS variables", which is very common and easy to understand. You will read (I have written too) sentences like this: "CSS variables (aka CSS custom properties)" or "CSS custom properties (aka CSS variables)". Šime Vidas recently pointed out that there is a fairly correct way to refer to these things: --this-part is a custom property, var(--this-part) is a variable, which comes directly from usage in the specification.

JavaScript library status...automatic?

This reminds me of this Vue suggestion. I'm not sure if it's making any progress, but the idea is that the state of the component will be exposed automatically as a CSS custom property.

<template><div> Hello</div>
</template>
<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

Since color is part of this component's state, --color can be used as the state of this component's CSS. I think this is a good idea.

What if every time you use useState in React, the CSS custom properties are placed on :root and updated automatically. For example, if you do:

 import React, { useState } from 'https://cdn.skypack.dev/react@^16.13.1';
import ReactDOM from 'https://cdn.skypack.dev/react-dom@^16.13.1';

const App = () => {
  const [ activeColor, setActiveColor ] = useState("red");
  return(
    <div classname="box">
      <h1 id="Active-Color-activeColor">Active Color: {activeColor}</h1>
       {setActiveColor("red")}}>red
       {setActiveColor("blue")}}>blue
    </div>
  );
}

ReactDOM.render(<app></app> ,
document.getElementById("root"))

And you know you can do this:

 .box {
  border-color: 2px solid var(--activeColor);
}

Because the state will automatically map to custom properties. Someone should create a useStateWithCustomProperties hook or something similar to do this. #freeidea

Library like React and Vue are used to build UIs. I think it makes very meaningful that the state they manage automatically exposes to CSS.

Can the browser provide more page status as environment variables?

Speaking of states that CSS should know, I've seen a lot of demos that do interesting things by mapping things like the current mouse position or scroll position to CSS. I don't think it's completely unreasonable to require that this data be exposed locally to CSS. We already have the concept of environment variables, such as env(safe-area-inset-top), and I can see that it is used to expose page states, such as env(page-scroll-percentage) or env(mouseY).

The above is the detailed content of Custom Properties as State. For more information, please follow other related articles on the PHP Chinese website!