css-calc

css calc invalid property value

by

For future googlers: The unhelpful “invalid property value” message in DevTools might just mean that you need white space around your + – / * operators. Incorrect (invalid property value): width:calc(100vh-60px) <== no spaces around minus sign Correct: width:calc(100vh – 60px) <== white space around the minus sign The OP’s question above does not have … Read more

How can I get a negative value of CSS variables (aka Custom Properties)

by

Yes you can do it. Simply multiply by -1: :root { –margin: 50px; } body { margin: 0 100px; border:1px solid; } .box-1 { background: red; height: 100px; width: 200px; margin-left: calc(-1 * var(–margin)); } .box-2 { background: green; height: 100px; width: 200px; margin-left: calc(-1 * (-1 * var(–margin))); /* You can also nest calculation … Read more

Can I use CSS calc within Javascript?

by

Yes, calc() will work when setting styles in javascript. Working Example: var innerDiv = document.getElementsByClassName(‘inner-div’)[0]; function growInnerDiv() { innerDiv.style.setProperty(‘width’, ‘calc(100% + 224px)’); } innerDiv.addEventListener(‘click’, growInnerDiv, false); .outer-div { display: inline-block; width: 200px; height: 100px; padding: 12px; border: 1px solid rgb(255,0,0); background-color: rgb(255,255,0); } .inner-div { width: 100px; height: 100px; color: rgb(255, 255, 255); font-weight: bold; … Read more

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

by

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 … Read more

calc() function inside another calc() in CSS

by

It is possible to use calc() inside another calc(). An example: div{ width: calc(100% – (1% + 30px));/* calc(1% + 30px) is nested inside calc()*/ } div p{ width: calc(100% – 30px);/*100% is total width of the div*/ } Update on nested calc with css variables: .foo { –widthA: 100px; –widthB: calc(var(–widthA) / 2); –widthC: … Read more

Why must a + or – be surrounded with whitespace from within the Calc() method?

by

The – character is one of the allowed characters in CSS idents. Judging by the resolution given here, it seems they wanted to prevent syntactic ambiguities that could arise from using – without whitespace, especially with keyword values such as min-content (although AFAIK keyword values aren’t yet allowed within calc() — correct me if I’m … Read more