So desktop IE8 and below does not support media queries.

There is currently no version of IE Mobile that supports media queries.

If we build mobile first, then IE Mobile is pretty sorted. The trick part is how we degrade gracefully for desktop IE.

This is part of: #1077094: Make Bartik a responsive design - meta issue

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Well, there is no graceful degradation is there, really, lets all be honest about it - below IE9 there is no media query support, unless... we polyfill. In my mind if we are going to do mobile first, we have to polyfill.

lewisnyman’s picture

lewisnyman
he/him
commented

Not true Jeff, we can use IE conditional comments to supply the current 960 layout. That is just one option we have.

Jeff Burnz’s picture

Jeff Burnz commented

OK, yes we could use conditional comments, so what about other browsers or devices that do not support media queries, and how is this optimal for IE7/8 users - are we to choose many kb of CSS overrides in place of 1kb of js?

lewisnyman’s picture

lewisnyman
he/him
commented

Good question. I'd like to point out that respond.js is no stallion. It doesn't support width queries set in ems. This is essential in my opinion.

If we do add a polyfill to core. We need to be careful what we choose and how we implement it.

It worth thinking about the best non JS solution for now, seeing as we are going to have to consider non MQ non JS browsers anyway.

It's actually possible for us to take advantage of IE's broken media parser to unconditionally load the css inside media queries it doesn't understand.

Jeff Burnz’s picture

Jeff Burnz commented

We're going to need a test bed to set up various approaches. Lets think about this:

1. A control that uses only media queries (our ideal solution).
2. Example that uses respond.js (ems are not a hard requirement, could just be a basic 320andUp example page).
3. ?

This doesn't need to be Bartik + Drupal but simply plain old HTML pages that we can load up in various browsers and see what is happening.

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Issue tags: +mobile

Well, let's break this down…

If a mobile device doesn't support media queries than the only solution is to provide a mobile first responsive design. The default when a device doesn't know media queries or handle complex JavaScript or conditional comments is to provide a one-column responsive layout. Since the consensus I'm seeing for responsive designs is to be mobile first, I think we are on the same page. "mobile first" means we don't have to worry about the burden of mobile devices without media query support.

So then what about desktop devices? It turns out the only modern browser not supporting media queries is…IE!

lewisnyman’s picture

lewisnyman
he/him
commented

I completely forgot to post it here but this issue pushed me to research and document the various methods of gracefully degrading media queries. It manifested itself as this article

dodorama’s picture

dodorama commented

This might help
#1465948: [meta] Drop some IE8 coddling from Drupal core

gmclelland’s picture

gmclelland commented

Be careful with conditional comments http://www.phpied.com/conditional-comments-block-downloads/ they block downloads in IE.

The conditional comments at the top of http://html5boilerplate.com/ templates are ok to use. You know the ones like:

<!doctype html public "✰">
<!--[if lt IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html lang="en-us" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html lang="en-us" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
Gaelan’s picture

Gaelan commented

Respond.js?

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Active » Closed (duplicate)

I don't think we need a separate issue for this. It should be tackled along with #1192044: Convert Bartik's layout to mobile-first and responsive