Start time: 
Thursday, 20 March, 2014

PolyCalc, is a polyfill library that allows using calc function in CSS. This allows using expressions like width: calc(100% - 150px). Yes, in CSS. Thanks to this you can set width of one element to fill almost whole page leaving static space for a sidebar or e.g. make text input scalable and put action button beside it.

Technical highlights:

  1. Works on Android 2.3 and old IE.
  2. PolyCalc project includes simple CSS parser. The parser is very efficient and so it can be used also in mobile applications.
  3. To further lower CPU load PolyCalc doesn't parse all CSS files and instead searches for those marked with data-PolyCalc="1" attribute.
  4. Although it's impossible to directly detect native calc support, this library does attempt to quickly and as widely as possible detect native support and will stand down leaving computation to the browser.


Authorship Originally PolyCalc was created by Chrisa Kay. My main contribution is the CSS parser, but I also made the library more efficient as I needed to use this in a mobile world.