2

In my website projects, i use media queries and the nth-child selector.

IE8 doesn't support them out of the box, but there are polyfills to help:

My problem is that i need to use nth-child inside media queries. A synthetic example: 

@media (min-width: 500px) {
  .foo:nth-child(2n) {
    color: pink;
  }
}

I need this code to work in IE8.

The problem is that neither selectivizr, nor ie9.js parse nth-child inside media queries, and media query-enabling polyfills won't help because they interfere with the nth-child polyfills when used together.

Please suggest a way to make that code work in IE8!

Shauna
  • 9,495
  • 2
  • 37
  • 54
Andrey Mikhaylov - lolmaus
  • 23,107
  • 6
  • 84
  • 133
  • What do you mean by "[media query-enabling polyfills] work independently"? – Shauna Nov 27 '12 at 16:28
  • @BoltClock http://am-teh.ru – Andrey Mikhaylov - lolmaus Nov 27 '12 at 19:23
  • @Shauna This means they don't work together. There have been efforts on combining Respond+mediatizr, and some devs have even got positive results, but that efforts didn't reach production. :( For instance, here's a year old thread: https://github.com/keithclark/selectivizr/issues/23 – Andrey Mikhaylov - lolmaus Nov 27 '12 at 19:26
  • Here's another effort of making Respond and mediatizr work together: http://selectivizr.com/tests/respond/ Unfortunately, it's not production ready too. :( – Andrey Mikhaylov - lolmaus Nov 28 '12 at 07:51
  • Out of curiosity, why do you have to use media queries on IE8 ? Is it for large screen layouts ? I always tell my QA team / and coworkers that any site tested on desktop should not be QA'ed for any size smaller than the main grid ( 960px - 1000px usually ). I find a waste of time and resources making a site work on IE at anything smaller than such sizes. It comes back to when we didnt have responsive design a few years ago. We wouldnt test for smaller screens back then, and there is still no reason to test that now ( on desktops ). – Pablo Rincon May 15 '14 at 20:14
  • @PabloRincon I develop responsive styles only for modern browsers. They display completely distorted in IE 7-8. Now i have two options: 1. Develop a separate set of styles specifically for IE 7-8. It takes days/weeks of work to increase browser coverage for only 1.5% and the result is not responsive. 2. Throw in the polyfill. It takes like 15 minutes and the result is automatically responsive in IE. The 2nd option has [some drawbacks](http://stackoverflow.com/questions/16720043/how-do-you-use-mobile-first-with-in-ie8#comment32782682_16732064) though, so use it only when your budget is limited. – Andrey Mikhaylov - lolmaus May 16 '14 at 12:49
  • Also, the idea of [modern web design](http://futurefriend.ly) is to make your website automatically adapt to capabilities of various devices (feature detection, progressive enhancement and shit) without classifying device into groups like "mobile/tablet/desktop" and adapting your website to those distinct groups. The diversity of devices is ever growing, and the device segregation approach is doomed to fail. – Andrey Mikhaylov - lolmaus May 16 '14 at 12:57

3 Answers3

5

Okay, i figured it out.

Selectivizr and Respond have both been modified to work together (1, 2).

The matter is that necessary changes have been commited to Selectivizr version 1.0.3b. As of March 2013, 1.0.3b has not been released. It is neither available on Selectivizr's official website, nor in CDNs. It can only be obtained from project's repo and only the uncompressed edition is available for now.

Respond is more prompt with releases, so the latest official version will do.

Note that Selectivizr should be included first, Respond second. And don't forget to include one of Selectivizr's requirements before Selectivizr! So the correct order is:

  1. NWMatcher (or alternative)
  2. Selectivizr
  3. Respond

And don't use IE9.js! It has it's own implementation of media queries and together with Respond will render your site unusable in IE < 9.

Andrey Mikhaylov - lolmaus
  • 23,107
  • 6
  • 84
  • 133
2

Your code doesn't work in IE8 because IE8 doesn't support media queries at all. If you want media queries in IE8, then you need to find a polyfill that enables that.

You should be able to achieve what you want with a combination of the media query and selector polyfills, which you can use on the same page, because they are generally written so as to not interfere with each other.

Edit If the polyfills really don't work with each other, then I'd take a serious look as to why you think you need media query support for IE8. Chances are, you'd be just fine, with a few tweaks, just letting IE8 do its own thing. It's very likely that IE8 users aren't going to be on very large or very small screens, due to the combination of IE8 only being on Windows XP and some Windows Vista machines (Win7 ships with IE9), and Windows Phone having very small market share in the mobile arena. Chance are, you're putting in a lot of effort for next to no return.

However, if you do find that you need media query type support for IE8 for whatever reason, then I'd look into a more basic JavaScript option that just detects the window size and applies a class accordingly (this should be pretty straighforward even in vanilla JS, but most of the libraries make this even more trivial). You can wrap the JavaScript reference in a conditional comment to sandbox it from every other browser.

Shauna
  • 9,495
  • 2
  • 37
  • 54
  • This is already mentioned in the question - it seems the OP has been unable to get a combination of both polyfills working together. – BoltClock Nov 27 '12 at 16:16
  • All Modernizr does is provide information on whether a browser supports media queries and `:nth-child()` use - it doesn't polyfill anything. – BoltClock Nov 27 '12 at 16:22
  • @BoltClock - That's not really how I took the "they won't help because they work independently" line to mean. That line suggested to me that the OP doesn't understand that you can, in fact, leverage two different polyfills at the same time (provided they are intelligent enough to namespace themselves). – Shauna Nov 27 '12 at 16:25
  • @BoltClock re Modernizr - Fair enough. As I said, I haven't used it myself. It does, however, provide a link to a nice list of polyfills that might prove useful (including several others for Media Queries) - https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills – Shauna Nov 27 '12 at 16:26
  • @BoltClock Why did you mention Modernizr in the first place? – Andrey Mikhaylov - lolmaus Nov 27 '12 at 19:33
  • @lolmaus - I had originally suggested it, but have since edited it out. – Shauna Nov 27 '12 at 19:36
  • @Shauna Of course i had tried all combinations of querying and selecting polyfills prior to asking. No combination works. Also, i had studied their issue queues and found efforts on combining Respond with mediatizr. There are success reports from coders but no working solution released that i coulld find. – Andrey Mikhaylov - lolmaus Nov 27 '12 at 19:36
1

Am also stuck with the same issue at the moment and am busy playing around with a couple ideas to try and make this work.

One hack that seems to be working is to pull all the functions in selectivizr.js out to a global level (requires the variables to be declared globally too). Then, you can change css-mediaqueries to call patchStyleSheet with the contents of the media query before adding it to the styles (line 916 of the following version of css-mediaqueries.js):

styles[styles.length] = cssHelper.addStyle('@media ' + s.join('') + '{' + patchStyleSheet(mql.getCssText()) + '}', false);

So, I'm not saying this is an ideal solution - declaring all the functions and variables in selectivizr at a global level is obviously not the best idea - but, it does seem to work and proves it's possible. With a bit more time one could probably combine the 2 scripts into a much better solution.

OneMatchFox
  • 31
  • 6