How to add webkit support for calculation?

Question

I see that when using webkit, this calc is more compatible. Usually, when you add webkit or moz support, you do something like:

-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;

What is the correct syntax to calculate?

width: -webkit-calc(100% - 100px);

Answer 1

correct syntax to calculate

/* Firefox */
width: -moz-calc(100% - 100px);
/* WebKit */
width: -webkit-calc(100% - 100px);
/* Opera */
width: -o-calc(100% - 100px);
/* Standard */
width: calc(100% - 100px)

Answer 2

At least you need to support Safari 6, Chrome 25 or FF 15, you just need to write width: calc(100% - 100px)

// Firefox 4 to 15
width: -moz-calc(100% - 100px);

// Chrome 19 to 25
// Safari 6
width: -webkit-calc(100% - 100px);

// Standard
width: calc(100% - 100px)

// Note: Never existed a Opera prefix for calc

Note that the Opera prefix never existed -o-calc, since calc was introduced in Opera, it always used only calc. You can check calc support in caniuse .

, , , , . , Opera -o-calc(100% - 100px). , , , . , , , FF 15, , width: -moz-calc(100% - 100px).