A Polyfill for CSS3 calc()

This is a javascript poly fill for the CSS3 calc-function.

Inspired by:

• selectivizr
• the original poly fill: CJKay/PolyCalc
• more recently by css.js

Usage

Simply drop the link like this after you included your CSS:

<script type="text/javascript" src="path/to/calc.js"></script>

A test for the support if calc() is integrated based on the Modernizr test

Tested on Internet Explorer 8 and Android 4.0.3

Dependencies

• support for document.querySelectorAll
• for media queries window.matchMedia

Remarks

Specificity

This polyfill does not take specificity into account when applying styles for calc().

For example if you have to rules:

.element  div {
	width: calc(50% - 230px);
}

div {
	width: calc(50% - 100px);
}

The first rule would apply for the <div /> element because of higher specificity. The CSS is parsed from top to bottom and therefore the polyfill would apply the styles of the second rule. Just keep that in mind.

Resetting

This polyfill also does not detect any resetting of calc():

.element  div {
	width: calc(50% - 230px);
}

div {
	width: 50%;
}

The polyfill will apply the rules from the first as it is not detecting the resetting of the width in the second.

Media-Queries

There is currently no support for libs like respond.js and it is not planned to add support. However the polyfill uses window.matchMedia to test for media queries. If you wish to add support for media queries for IE8 include a polyfill before the calc-polyfill.

To Do

• more Android testing
• consider inline styles
• consider imported CSS files wie @import