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

Question

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

Navigation

#1 by (5 votes)

5

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

For example, I'll explain my idea. I'd like to put in the element type <div data-opacity="0.5" ></div> and this div get 0.5 opacity. So I need CSS to somehow recognize this value of 0.5% of data-opacity as the value of opacity: in the class

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

This is just an example use, but could be for color, margins, etc. I wonder if there is any way to use this custom-attribute as value within CSS?

Here's an example of what I'd like to do, but it does not work as 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>

html html5 css css3

asked by anonymous 18.09.2018 / 16:56

1 answer

Extract dataframes from lists with dataframes under certain criteria in R Private class in JavaScript

score 5 · Accepted Answer

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

According to MDN typing and support for properties other than content is experimental only.

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 style attribute and the var() function, thus preserving the typing and validation of the values presented for the style application.

: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 is to write in style , is not it the same as setting 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 compatibility compatibility for several browsers and still want to take advantage of the fallback of the var() function. It is possible to 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>