CALC() Polyfill?

[rkieru]

For a new work project I’m building a responsive grid, and CALC() has proven itself to be a miracle-worker in saving me from using otherwise unnecessary container/wrapper DIVs. The caveat of course, is IE8 and below. While it’s not essential that this project has perfect IE8 support, we’d really like to make it work as closely as possible.

So I’m trying to find out if there is some behavior, polyfill or other unicorn magic to make CALC() and IE get along a bit more. I’ve found one polyfill that is no longer curated and doesn’t seem to actually work, here:

https://github.com/CJKay/PolyCalc

And I’ve read that using EXPRESSION() would work, except that Microsoft disabled this feature in IE8 standard mode… so I’m not sure how realistic that is.

Or maybe there is a LESS/SASS solution that can do the equivalent of the following:

.foo { width: calc(100% - 14px); }

[Paulie_D]

For a new work project I’m building a responsive grid,

Aren’t there enough of those around that couldn’t you find one that worked for you or you could adapt?

Anway, I hear javascript calling..

…athough: http://stackoverflow.com/questions/10826064/calc-element-in-sass-css

:>

[rkieru]

The one I linked above is the ONLY CALC() polyfill that I could find, and as I mentioned it’s no longer curated and doesn’t seem to work. I’m not very familiar with Modernizr though and it seems to (perhaps unnecessarily) rely on it so that could be part of the problem.

The StackOverflow link you mentioned is one that I’ve seen – and it’s great for allowing me to quickly build cross-browser support in via prefixes, but won’t actually provide CALC() functionality to IE. I’m using CALC() in this fashion to craft gutters between each column. The more common approach to this is to use an interior container and fashion the gutters that way.

I suppose for IE8 I could just remove the gutters though… wouldn’t be as pretty or a very elegant solution but it would work.

[Paulie_D]

Nothing wrong with a common approach.

I tend to use this approach: https://css-tricks.com/dont-overthink-it-grids/

Perhaps there’s a couple more divs in there but it works in IE8.

Otherwise. JS is your friend.

[TheDoc]

From Paulie’s S/O answer:

You may want to include a “default” value for when calc is not supported.

This.

You’ll simply need to provide standard widths for IE8 and below.

[rkieru]

You may want to include a “default” value for when calc is not supported.

I am doing this currently, but as I’m sure you can imagine it’s hardly a fully-functional option with gutters. I cannot, for example, have a 50% column with width: 50% because well… margins will cause that to break. So I have to attempt to find a magic number that is ‘close enough’.

What I might try and do is for IE8 switch to a % based margin so that the magic numbers are easier to configure. Or just remove the margins as I mentioned before. They add a level of clarity to the site but not so much that their absence would ruin the experience.

[Author]

Posts