Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Combine calc() with attr() in CSS [duplicate]

Tags:

css

css-calc

I was wondering whether I can combine the calc() function with the attr() function to achieve something like the following:

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

The draft says it should work, but in my case (Chrome 31.0.1650.63 m and Firefox 25.0.1 ) it doesn't. There are two cases then:

  1. I did it wrong
  2. It is not supported yet

Whats the deal?

Example Fiddle

like image 578
Loupax Avatar asked Dec 10 '13 09:12

Loupax


People also ask

What is attr () in CSS?

The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.

What does CALC () do in CSS?

calc() The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.

Can I use Calc ()?

calc() is for valuesThe only place you can use the calc() function is in values. See these examples where we're setting the value for a number of different properties.

Can I use content ATTR?

While attr() is supported for effectively all browsers for the content property, CSS Values and Units Level 5 adds the ability to use attr() on any CSS property, and to use it for non-string values (e.g. numbers, colors).


2 Answers

There appears to be a way around it using vars

.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*/ 

The commented out section would have been perfect, and this may be the very same reason your idea didn't work, but it seems css doesn't perform the nice automatic casting that you might be used to in javascript ('2' * 3 //=6).
attr() returns a string, not a number, and this can be seen by adding .content:after { content:var(--x) }; nothing gets printed, --x is a number, content accepts strings.

If there is some css function to cast I feel like that would be the key to this problem.


Looks like casting (well, interpreting) will be a thing in CSS4, and it'll be as simple as

.content{     width: calc(100px * attr(data-x number, 1));     background: #f00; } 

To date, no browsers support even this experimental spec, but I'll update when it does.

like image 61
Hashbrown Avatar answered Sep 25 '22 08:09

Hashbrown


Right now attr() is not supported by default in any major browser for any attributes other then "content". Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/attr

like image 20
jede Avatar answered Sep 23 '22 08:09

jede