How do you use mobile-first in IE8 - McMap

About

How do you use mobile-first in IE8

Asked 23/5, 2013 at 17:13 Answered 24/5, 2013 at 9:46

Solved internet-explorer-8 singularitygs

P

2

15

Considering that SingularityGS follows, by default, a mobile-first approach, how do you guys solve the problem in IE8, which shows the mobile version of everything that depends on media-queries?

Have you found a solution for this or do I have to switch to desktop-first?

Thanks.

Probe answered 23/5, 2013 at 17:13 Comment(0)

X

36

Instead of working around IE 7 and 8 shortcomings, you can make IE 7-8 actually support media queries!

I use the awesome Respond.js polyfill to enable media queries in IE 7 and 8. Just add this code to your HTML <head> and you're good to go!

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

You might also want to enable CSS3 selectors in IE 7 and 8 so that stuff like .column:nth-child(#{$i}n) { @include float-span(1, 'last'); } would work.

You'll need the Selectivizr polyfill. For Respond to work together with Selectivizr, Selectivizr should be of version 1.0.3b or later (which hasn't yet been releazed as stable for two years for some reason) and should be loaded before Respond. Selectivizr also requires NWMatcher or alternative to be loaded before it. So the correct order is this:

<!--[if lt IE 9]>
  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

And you totally should also have the html5shiv polyfill (aka html5shim) to make IE 7-8 support the most basic CSS3 stuff.

So my ultimate set of IE 7-8 polyfills looks like this:

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

Note: don't use IE9.js in combination with those as it will make IE 8 freeze.

Xeric answered 24/5, 2013 at 9:46 Comment(10)

Are you hosting these .js files locally then? Can you link to them via a CDN? Thanks, – Currie 6/2, 2014 at 18:3

You can tell from the script tags that they are hosted on a CDN. You can copy the HTML code and use it in your project without modification. – Xeric 10/2, 2014 at 9:46

Please do not use Respond.js or Selectivizr. Both Respond.js and Selectivizr produce additional HTTP requests for each item they need to work with and adds bloat to your critical path. Respond only works with PX based min/max width MQs and Selectivizr is so slow that I've had it crash IE8 with a not unreasonable number of items it had to work with. Instead, work with the limitations of the browsers you're supporting and use feature detection and classes for fallback support. – Agateware 10/2, 2014 at 18:42

You also now have Respond, Match Media, Selectivizr, and NWMatcher as dependencies that are all part of your critical path, which is kinda terrible. HTML5 Shiv makes HTML5 elements accessible to browsers that don't support it and provide basic styling, but does not polyfill CSS3 of any sort. – Agateware 10/2, 2014 at 18:48

I think it's fine to use terrible hacks for a terrible (and also terribly old) browser, especially when you don't have extra 50% budget for increasing browser support by some 1%. – Xeric 11/2, 2014 at 7:15

I really don't think JS should be used to make things work. Users with JS off (corporates, public institutions) who are most likely using older browsers too, will only see the mobile site. So how do you cater for them? We don't do mobile first for this reason. Mobile devices will most definitely support media queries so only use media queries for mobile devices, not desktop. Until IE8 and IE7 are on 0% usage anyway (2050??) – Ciprian 7/6, 2014 at 8:50

@LaurenceCope, if you do have to support IE7 and 8, you're out of luck. You're forced into obsolete and bad practices, not using modern techniques and approaches. You're crawling the bottom rather than sailing the surface. But for those who don't have to support IE7 and 8 but would like to provide a free fallback for them, Selectivizr+Respond are a great choice. – Xeric 7/6, 2014 at 9:10

@lolmaus, you are correct, this is great for websites that do not need to support IE7/IE8. I should have been clear that we build websites for businesses, and some of their potential customers may use IE7/8 & no JS. So its important for business & eCommerce sites work for all potential customers, else they could lose sales. I believe desktop first and 100% working website is more important than a mobile first with a 98% working website. Even 1 visitor in 1 year seeing the broken site could mean thousands of pounds lost sales (depending on the business). So totally depends on the target users. – Ciprian 7/6, 2014 at 16:11

1 visitor in one year seeing your website not working on his 15 years old PC. Tens of thousands of visitors seeing your website isn't nearly as awesome and convenient on their iPhones and Androids as your competitor's. – Xeric 7/6, 2014 at 16:20

All I have to really say about this is puck Microsoft and puck the people who were on the IE dev team during IE6,7,8, & 9 builds. ALL of you guys defending polyfills for them are basically dragging things out further when we should be pushing this horrible technology forward. We have bigger fish to fry, and those "lost sales" could be mitigated if we we all had a little more solidarity on this front. – Arnst 23/6, 2014 at 2:38

A

7

I use Breakpoint's built in No Query Fallback support in combination with either IE classes on my HTML tag or Modernizr tests for Media Query support.

https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks

Agateware answered 23/5, 2013 at 17:25 Comment(1)

Thanks. I have not used Sass or Modernizr yet so I'm not sure I could implement that. If you know of any good tutorials or explainations on how to use it please post here. I keep reading about how it's so great and saves time but have not clue how to use it or set it up. – Currie 10/2, 2014 at 14:59

Recommended topics

#Godot #Unity #Godot 4.X #Mongodb

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

© 2022 - 2024 — McMap. All rights reserved.