3

I would like to base my media queries on REM to support all kinds of browser zooming and/or base/browser font resizing by the user. Ideally down to IE8.

Loading jQuery, HTMLshiv, Respond and the REM polyfill and turns out the REM polyfill does not support media queries. Don't really understand why though, https://github.com/chuckcarpenter/REM-unit-polyfill/issues/60#issuecomment-135187895 but that is fact.

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?

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.

So, now how do you girls and guys do support REM based media queries in IE8?

Would a fallback like mentioned here https://stackoverflow.com/a/21122705/1010918 work?

@media screen and (min-width: 26.25rem , min-width: 420px) { ?

I don't think this would work (I wish I wish!!) so I am really left with assigning a different stylesheet to IE8 with conditional comments?

Is this how you go about it? What are my possibly other solutions?

I have read and thought about all these:
Basic CSS features not working in IE8
How do you use mobile-first in IE8
media query unlinking IE8 stylesheet
modernizr for ie8 media query support
What´s best practice to responsive design? Use % or em and rem?
IE8 support for CSS Media Query

Check this vid for an example of REM based design. I am sure that can also be done with ie8 somehow.
http://webdesign.tutsplus.com/courses/responsive-web-design-revisited/lessons/what-responsive-means-today-and-what-youll-be-building

Community
  • 1
  • 1
lowtechsun
  • 1,915
  • 5
  • 27
  • 55
  • IE8 can't be responsive with css. just use fixed layout for desktop. – YOU Oct 10 '15 at 14:19
  • Looking at getbootstrap.com with IE8 it works just fine. The question is how to best make it work with REM units in media queries since using PX in media queries (like BS 3 does) is not really what RWD is all about. So either a separate stylesheet or something else. I am looking for that "something else" and I am sure it is out there. – lowtechsun Oct 10 '15 at 15:52

2 Answers2

3

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.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • 1
    Thank you. So basically a IE8 or possibly a IE8 and lower stylesheet can come in handy if must be, otherwise work with IE9 > and pray. – lowtechsun Oct 12 '15 at 13:10
  • 1
    I know this question is old, but I did "hack around the polyfill" if you need to solve this problem instead of praying, please check my solution: https://github.com/nbouvrette/remPolyfill – Nicolas Bouvrette Jun 09 '17 at 03:32
1

You actually have a real option that works since I ran into the same problem. Not sure there will be a lot of people interested by this solution in 2017 but it works!

https://github.com/nbouvrette/remPolyfill

Nicolas Bouvrette
  • 4,295
  • 1
  • 39
  • 53
  • **Nice one Nicolas!** Just when I thought to switch to IE10 baseline you come out with this. Not that many people might need this, but when you do this will be **brilliant** to use. Giving this a try for sure, especially sites with worldwide / Asian / Chinese users will greatly benefit from this if I may say so in a possibly daring way. Not sure what the situation there is but XP/IE6 and 7/IE8 are still going to be round for a long time and not everyone updates IE or installs the latest Chrome or FF. – lowtechsun Jun 11 '17 at 00:02
  • Also [this](https://github.com/nbouvrette/eventListenerPolyfill) even if not related to the question as that was going to be my next step, now I don't need to rewrite JS eventListeners.. will also give this a shot for sure and there is no harm done since it can all be called with conditional comments, oh the fun (not meant sarcastic or in a negative way) in supporting IE6-IE8 in 2017. :) – lowtechsun Jun 11 '17 at 00:11
  • Also [this](https://www.theverge.com/2014/5/21/5737366/china-bans-windows-8-from-government-computers-over-security-concerns) and [this](https://www.techinasia.com/china-ie6), while the later is a bit older, with 7/IE8 being supplied this polyfill will truly come in handy should you design for that market, thanks Nicolas. – lowtechsun Jun 11 '17 at 00:31
  • Nice to see I'm not the only one enjoying legacy fixes :) If you have any issues ping me directly and I will be happy to help. I managed to build a site that still work on IE8, is mobile first, HTML5 with a custom script loader and no ugly markup. I like to use IE8 as the ultimate compatibility test :) – Nicolas Bouvrette Jun 11 '17 at 04:43
  • **Very well interested** in a custom script loader to keep the markup clean. Where can I find that site you built and the loader, or better, how do I ping you directly? Not on LinkedIn, so apart from making an issue on your repo I can't contact you, however the email given in **my profile** here works fine, if you can shoot me a short message there I will be in touch quite soon. Thank you. – lowtechsun Jun 11 '17 at 10:33
  • Yeah it's a custom dependency management script.. a bit like RequireJs but also manages what the browser supports to conditionally polyfill what is missing and avoid loading useless script in recent browsers (like a lightweight Modernizr). I haven't open source this part of the code yet because it's not generic enough but if you want to check my project: https://jurisflex.com/ - Here is my chat room if you want to continue the conversation http://chat.stackexchange.com/rooms/60275/custom-js – Nicolas Bouvrette Jun 11 '17 at 14:01