5

Gostaria de saber se existe a possibilidade de usar um custom-attribute do tipo data-*=" " como valor para um estilo CSS ou mesmo usar esse custom data como valor para uma variável no CSS.

Para exemplificar melhor vou explicar minha ideia. Eu gostaria de colocar no elemento tipo <div data-opacity="0.5" ></div> e essa div ficar com 0.5 de opacidade. Logo eu preciso que de alguma forma o CSS reconheça esse valor de 0.5 do data-opacity como o valor do opacity: na classe

Eu tentei usar o attr direto como valor do estilo opacity: attr(data-opacity) e também tentei declarar como variável, porém tb não deu certo --data-opacity: attr(data-opacity)

Esse é só um exemplo de uso, mas poderia ser para cor, margens, etc Gostaria de saber se existe alguma forma de usar esse custom-attribute como valor dentro do CSS?

Segue um exemplo do que eu gostaria de fazer, porém não funciona como está.

: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>

1
  • 1
    Até faria uma versão em js mas creio que logo aparecera uma versão apenas com CSS, rs Commented 18/09/2018 às 15:56

1 Resposta 1

5

O CSS consegue acessar os valores de custom attributes como os data-* através do método attr(), o problema é que ele sempre será interpretado como uma string, o que pode ter alguma utilidade, porém acaba invalidando a atribuição à maioria das propriedades da folha de estilo.

Segundo a MDN a tipagem e o suporte a outras propriedades que não o content é apenas experimental.

Exemplo:

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>

Alternativa

Uma possibilidade é utilizar uma declaração inline dessas variáveis através do atributo style e da função var(), preservando assim a tipagem e a validação dos valores apresentados para a aplicação do estilo.

: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>

Mas se é para escrever no style, não é a mesma coisa que definir toda a aparência ali mesmo e ignorar a folha de estilos?

Na prática é quase a mesma coisa, porém existem algumas vantagens, considerando o cenário onde você deseja fazer o devido tratamento de compatibilidade para diversos browsers e ainda quiser aproveitar o fallback da função var(). É possível concentrar todas as variações no seu CSS e ainda determinar valores default para cada um.

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>

3

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .