Cross Browser CSS Calc()

css-calc.css

/* 1. write it out for older browsers */
/* 2. use the vendor prefix for webkit */
/* 3. use the vendor prefix for moz */
/* 4. include the un-prefixed version last */

#foo {
	width: 200px;
	width: -webkit-calc(50% - 100px);
	width: -moz-calc(50% - 100px);
	width: calc(50% - 100px);
}

Thanks for your nice and clear article! Cleared things about vendor prefixing for me.

Hi! This is a nice explanation of how to use vendor prefixing. However when i use calc i include all of the following for maximum compatibility. Particularly expression() which targets older version of IE

  top: -webkit-calc(50% - 100px);
  top: expression(50% - 100px);
  top: -moz-calc(50% - 100px);
  top: -o-calc(50% - 100px);
  top: calc(50% - 100px);

thank you both for this!

Thank you guys.

Awesome. Thanks for this.

Note that -o-calc and expression will raise errors at most CSS validators. Probably thats why they were not included initially.