Rem Fallback for Ie7-8

IE8 REM fallback using LESS variables

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.

IE8 and REM based Media Queries

IE8 doesn't support media queries either, so it's not that the polyfill is turning them off, it's just that IE8 simply doesn't support them.

What did Chuck mean with saying "to ignore MQ rules when the polyfill was kicked in, since support would only be required at desktop". So when the polyfill kicked in MQ support was dropped? And why would MQ support in IE8 only be needed for desktop?

He means that IE8 only runs on the desktop, so there's no point supporting it in a responsive way.

Can it not be that some users don't have the browser window fully open but just one half or quarter of the screen and thus have a smaller screen-width? I don't have my browser at full size most of the time to be able to do work in the other windows etc.

Okay, so maybe there is a point to supporting it in a responsive way, but it's not a good enough reason for the developer -- he decided that the extra difficulty in adding this support would be too much work to make it worthwhile.

He does say in the ticket that if anyone else wants to do the work and submit the code changes, then he'll consider bringing them into the library, but he's not going to do it.

How much work is it?

Well, it's worth pointing out again that IE8 doesn't support media queries. So in order to get MQs at all in IE8, you need to use another polyfill library such as RespondJS.

Therefore, the work of making IE8 REMs work with MQs is actually work to make the REM polyfill and RespondJS know about each other and work together -- there's a good chance that you'd need to make changes to both libraries to make it work at all. It could be very difficult to do. I can certainly understand why they decided not to bother.

So as things stand, I think you are going to have to accept that what you want to do is not possible in IE8. Unless you want to start hacking around in the polyfill libraries to fix it for yourself.

Which fallback is best when using rem as font-size unit in a responsive environement?

Seems best to use this polyfill https://github.com/chuckcarpenter/REM-unit-polyfill instead of fiddeling with fallbacks.

Chrome not respecting rem font size on body tag?

Try:

html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
*{font-size: 1.4rem;line-height: 1.6rem; }
body { background: #fff; font-family: arial; }

Seems to look better on refreshing the page :)

FIDDLE



Related Topics



Leave a reply



Submit