Is there any way to use a "custom-attribute" as the value of a CSS property?

Question

I would like to know if there is a possibility of using a custom-attribute of the kind data-*=" " as value for a CSS style or even use this custom date as a value for a variable in the CSS.

To illustrate better I will explain my idea. I would like to put in the type element <div data-opacity="0.5" ></div> and that div 0.5 opacity. So I need the CSS to somehow recognize this 0.5 value of data-opacity as the value of opacity: in class

I tried to use the attr direct as style value opacity: attr(data-opacity) and also tried to declare as variable, but tb did not work --data-opacity: attr(data-opacity)

This is just an example of use, but could be for color, margins, etc I wonder if there’s any way to use that custom-attribute as a value within the CSS?

Here’s an example of what I’d like to do, but it doesn’t work the way it is.

:root {
    --data-opacity: attr(data-opacity);
    --cor: #fff;
}

[data-opacity] {
    color: var(--cor);
    opacity: var(--data-opacity); /* não funciona */
    /* opacity: attr(data-opacity); */ /* também não funciona */
}
.box {
    width: 100px;
    height: 100px;
    background-color: #f00;
}

    

<div class="box" data-opacity="0.5">cor branca mas sem opacidade</div>

Answer 1

CSS can access custom Attributes values such as data-* through the method attr(), the problem is that it will always be interpreted as a string, which may have some utility, but ends up invalidating the attribution to most of the style sheet properties.

According to the MDN typing and supporting properties other than content is only experimental.

Example:

h1 {
  /* Não funciona, pois seria o mesmo que declarar color:'red';*/
  color: attr(data-cor);
}

h1::before {
  /* Funciona, porque content está esperando uma string. */
  content: attr(data-prefixo);
}

<h1 data-prefixo="Olar, " data-cor="red">meu nome não é johnny.</h1>

Alternative

One possibility is to use an inline declaration of these variables through the attribute style and function var(), thus preserving the typing and validation of the values presented for the application of the style.

:root {
  --opacidade: 1;
  --cor: #ffff;
}

.box {
  color: var(--cor);
  opacity: var(--opacidade);
  width: 100px;
  height: 100px;
  background-color: #f00;
  display: inline-block;
  position: relative;
  margin-top: 0px;
}

<div class="box">apenas valores iniciais</div>
<div class="box" style="--cor:yellow">cor amarela mas sem opacidade</div>
<div class="box" style="--cor:yellow; --opacidade: 0.5;">cor amarela com opacidade</div>

But if it’s to write on style, it’s not the same thing as defining all the appearance right there and ignoring the style sheet?

In practice it’s almost the same thing, but there are some advantages, considering the scenario where you want to do the proper compatibility treatment for several browsers and still want to take advantage of the fallback function var(). You can concentrate all the variations in your CSS and still determine default values for each one.

h1 {
  color: var(--minha-cor, grey);
  -webkit-filter: blur(var(--meu-blur, none));
  -moz-filter: blur(var(--meu-blur, none));
  -ms-filter: blur(var(--meu-blur, none));
  -o-filter: blur(var(--meu-blur, none));
  filter: blur(var(--meu-blur, none));
}

<h1 style="--minha-cor: green; --meu-blur: 1px">
  verde com blur
</h1>
<h1 style="--minha-cor: blue; --meu-blur: 2px">
  azul com mais com blur
</h1>
<h1>
  default
</h1>