matthewbaskey matthewbaskey - 2 months ago 20
CSS Question

css vendor specific calc

I came accross the following css code. It is using vendor prefixes for the css calc function. As far as I remember vendor prefixes were for the left side of the style definition, basically they are vendor specific properties for new functionality in the browser but not yet standardized. I think I am correct to say that the following is not correct.

#test {
width: ~"calc(100% - 360px)";
width: ~"-webkit-calc(100% - 360px)";
width: ~"-moz-calc(100% - 360px)";
}


as -webkit-calc is on the right.

Answer

calc is a CSS function not a property (which width is) and so as it is/was experimental, it requires/d prefixing.

So it's all out of date anyway but -prefix-calc WOULD have been correct at the time.

Current Support indicates that it can probably be used unprefixed.

Calc @ MDN

Comments