How to Perform Arithmetic Operations in CSS

How to perform arithmetic operations in CSS?

It already exists; You can use the CSS3 calc() notation:

div {
    background: olive;
    height: 200px;
    width: 200px;
}

div > div {
    background: azure;
    height: calc(100% - 10px);
    width: 100px;
}

http://jsfiddle.net/NejMF/

^{Note: It's only supported in modern browsers (IE9+) and has only recently been adopted by mobile browsers.}

Math operations within HTML

No, Html and css can not perform math operations.
You can do this in javascript. But if you have choice you should not do perform complex math operations with javascript unless you know javascript well. Because javascript has some weird behaviour for example:

document.write(.1 + .2)  // 0.3000000000000004  (instead of 0.3)
document.write(.3 + .6)  // 0.8999999999999999  (instead of 0.9)

But as long as you are dealing with integer values you should be fine.
Or if you want to deal with decimals in javascript just convert them to integer (by multiplying with 100 and then convert back the result into decimal by divinding by 100.)

You can use other languages along with html and css on server side:

• php
• python
• java
• ruby
• javascrript (both server and client side)

which can do all the math and much more.

But if you are computing layout features for example making calculation for width and height to add in css then I guess you should just use javascript. But read a little about its unexpected behavior with decimals. So you don't get wrong result.

CSS variables with arithmetic operations don’t work in shorthand properties?

You need to use calc like this :

html {
  --default-font-size: 16px;
  --default-line-height: calc(var(--default-font-size) * 2);
  font: var(--default-font-size)/var(--default-line-height) Arial;
}

The --default-line-height is replaced in the font property before getting evalutated so you have something like this (not valid) :

font: var(--default-font-size)/var(--default-font-size) * 2 Arial;

By the use of calc you evalute the expression and you have a valid syntax. Even your third example will not work. The CSS doesn't recognize the multiplication sign as it should be used inside a calc

p {  --default-font-size: 16px;  --default-line-height: calc(var(--default-font-size) * 4);  font: var(--default-font-size)/var(--default-line-height) Arial;}

<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

Is it possible to do mathematics inside CSS?

There's a CSS function called calc that is starting to get pretty good support. The syntax works as followed:

width: calc(50% - 100px);

(Note that the whitespace around the operators is significant)

This allows true dynamic computational support in CSS. With a preprocessor, you can only combine static lengths with static lengths, and relative lengths with relative ones.

At this point in time calc has achieved widespread support and should be safe to use unless you have specific needs for supporting legacy browsers.

Can you do math operations with inline style values or use SASS to do math operations with inline CSS?

U should use calc().

style="height: calc(<?=$place->getHeight()?>/3)px;"

CSS calc() - Multiplication and Division with unit-ed values

In CSS calc() division - the right side must be a <number> therefore unit based values cannot be used in division like this.

Also note that in multiplication at least one of the arguments must be a number.

The MDN has great documentation on this.

If you'd like a better way to do calculations you can use a preprocessor (I like Sass). That link will take you to their guides (on that page there's a section about operators).

Using modulus in css calc function

Unfortunately, there is no more mention of the mod operator in recent specs.

The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.

You may want to resort to using javascript to achieve such behaviour.

var el = document.getElementById('element-id');
el.style.width = (100 % 5) + '%';

CSS value as mathematical expression

You can achieve this with css3 calc(). Write like this:

div{
    width: 40%;
    width: -webkit-calc(40% - 5px);
    width: -moz-calc(40% - 5px);
    width: calc(40% - 5px);
    height:50%;
    height: -webkit-calc(50% + 50px);
    height: -moz-calc(50% + 50px);
    height: calc(50% + 50px);
    background: green;
    color: white;
    position:absolute;
}

Check this http://jsfiddle.net/3QUw6/

Check this discussion for more Is it possible to make a div 50px less than 100% in CSS3?

---

Related Topics