CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer-8less
Alex
Alex

Reputation: 2780

IE8 REM fallback using LESS variables

I need a REM fallback for IE8, there are a ton of mixins that solve this problem by calculating the px equivalent and putting it above the REM style as a fallback, but my REMS are declared as part of a variable and so I don’t think this could work.

I have tried the polyfill from Chuck Carpenter, for some reason it is not working with my compiled stylesheet.

One other thing I thought of would be to use a conditional stylesheet with em’s instead of rems for IE8, but this would need updating and converting every time the normal stylesheet had any changes made so I don’t think its manually feasible.

Another might be to use some sort of conditional method to declare the variables as pixels just for IE8, but I don't think this is supported in LESS.

Here is where my REMs are declared:

@size-gnt: 4.5rem;               /* 72px /16 */
@size-spr: 3rem;                   /* 48px /16 */
@size-big: 2.25rem;             /* 36px /16 */
@size-lrg: 1.75rem;             /* 28px /16 */
@size-med: 1.25rem;        /* 20px /16 */
@size-nml: 1rem;               /* 16px /16 */
@size-sml: 0.6875rem;    /* 11px /16 */
@size-tny: 0.5rem;            /* 8px  /16 */
@baseline: 1.4375rem;    /* 23px /16 */
@1px:      0.0625rem;         /*  1px /16 */

This is an example of when I use them:

.spc-pad              {padding: @baseline}

The polyfill I mentioned: https://github.com/chuckcarpenter/REM-unit-polyfill

Upvotes: 1

Views: 286

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

For a pure CSS/Less solution I guess the most compact method would be to declare all those variables using some "base unit" and then change this base unit (with any suitable method) when compiling IE8 stylesheet, e.g.:

@u: 1rem;

@size-gnt: 4.5  * @u;
@size-spr: 3    * @u;
@size-big: 2.25 * @u;
@size-lrg: 1.75 * @u;
// etc.

// then for IE8 just override it with
@u: 16px;

Then for example one way to create that IE8 stylesheet would be to only compile a file like:

@import "your-main-stylesheet.less";
@u: 16px;

That's it.

Upvotes: 3

Related Questions