name - css data attribute
Combine calc() con attr() en CSS (3)
En este momento, attr () no es compatible de forma predeterminada en ningún navegador principal para ningún otro atributo que no sea "contenido". Lea más sobre esto aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/attr
Esta pregunta ya tiene una respuesta aquí:
Me preguntaba si puedo combinar la función calc () con la función attr () para lograr algo como lo siguiente:
<div class="content" data-x="1">
This box should have a width of 100px
</div>
<div class="content" data-x="2">
This box should have a width of 200px
</div>
<div class="content" data-x="3">
This box should have a width of 300px
</div>
CSS
.content{
//Fallback. If no calc is supported, just leave it at 100px
width: 100px;
}
.content[data-x]{
// Multiply the width of the element by the factor of data-x
width: calc(100px * attr(data-x));
}
El draft dice que debería funcionar, pero en mi caso (Chrome 31.0.1650.63 my Firefox 25.0.1) no funciona. Hay dos casos entonces:
- Lo hice mal
- Aún no está soportado
¿Cual es el trato?
Parece que hay una forma de evitarlo usando var s
.content{
--x: 1;
width: calc(100px * var(--x));
background: #f00;
}
[data-x="1"] { --x: 1; }
[data-x="2"] { --x: 2; }
[data-x="3"] { --x: 3; }
/*doesn''t look like this works unfortunately
[data-x] { --x: attr(data-x); }
seems to set all the widths to some really large number*/
La sección comentada hubiera sido perfecta, y esta puede ser la misma razón por la que su idea no funcionó, pero parece que css no realiza la conversión automática agradable a la que podría estar acostumbrado en javascript ( ''2'' * 3 //=6 ).
attr() devuelve una cadena, no un número, y esto se puede ver agregando .content:after { content:var(--x) } ; nada se imprime, --x es un número, el content acepta cadenas.
Si hay alguna función css para emitir, creo que esa sería la clave de este problema.
Por el momento, la función attr () no está funcionando en Chrome.
Una solución casi tan agradable es usar variables CSS:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--module-size: 100px;
--data-x:1; /* Default value */
}
.content{
width: calc(var(--module-size) * var(--data-x));
border: 1px solid;
}
</style>
</head>
<body>
<div class="content" style="--data-x:1">
This box should have a width of 100px
</div>
<div class="content" style="--data-x:2">
This box should have a width of 200px
</div>
<div class="content" style="--data-x:3">
This box should have a width of 300px
</div>
</body>
</html>