Combine Calc() With Attr() In CSS


Answer :

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


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.


At the moment the attr() function isn't working in Chrome.

An almost as nice solution is to use CSS variables:

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

Comments

Post a Comment

Popular posts from this blog

Chemistry - Bond Angles In NH3 And NCl3

Answer : Solution 1: As Tan Yong Boon stated, it is Bent’s Rule with which we can explain the lower bond angle of \ce N F 3 \ce{NF3} \ce NF 3 when compared to \ce N H 3 \ce{NH3} \ce N H 3 . The rule as stated by Henry Bent: Atomic s character concentrates in orbitals directed towards electropositive substituents. Fluorine is more electronegative that hydrogen, and the \ce N − F \ce{N−F} \ce N − F bond would have greater p character than the \ce N − H \ce{N−H} \ce N − H bond. And more s character leads to large bond angles. Thus, the bond angle is greater in \ce N H 3 \ce{NH3} \ce N H 3 than in \ce N F 3 \ce{NF3} \ce NF 3 . Now, consider \ce N C l 3 \ce{NCl3} \ce NCl 3 . Clearly, \ce C l \ce{Cl} \ce Cl atom islarger in size than the central atom, nitrogen. Hence the higher bond angle here is due to the steric crowding caused by \ce C l \ce{Cl} \ce Cl atoms.(More pronounced than the electrongativity of \ce C l \ce{Cl} \ce Cl atom). They repel eachother and hence b...
Read more

Can Not Use Command Telnet In Git Bash

Answer : That's because telnet is not provided with git. In windows, you need to go to control panel, programs, turn windows features on/off and enable the telnet client. To add on to @lostbard's answer and @signonsridhar's comment, telnet utility need to be invoked with winpty to work on git bash. Example: MINGW64 ~ $ which telnet /c/WINDOWS/system32/telnet MINGW64 ~ $ winpty telnet localhost 2181 Zookeeper version: 3.4.14-4c25d480e66aadd371de8bd2fd8da255ac140bcf, built on 03/06/2019 16:18 GMT
Read more