Skip to content

Instantly share code, notes, and snippets.

@jonkemp
Created April 2, 2012 04:17
Show Gist options
  • Save jonkemp/2280688 to your computer and use it in GitHub Desktop.
Save jonkemp/2280688 to your computer and use it in GitHub Desktop.
Cross Browser CSS Calc()
/* 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);
}
@Garavani
Copy link

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

@MichaelHancock
Copy link

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);

@ggets
Copy link

ggets commented Jul 22, 2016

thank you both for this!

@coldcode-moon
Copy link

Thank you guys.

@kcameron85
Copy link

Awesome. Thanks for this.

@zoolyka
Copy link

zoolyka commented Jan 22, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment