Search code examples
csslesscss-calc

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.

Solution

  • 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