The Media Query Fallback module provides server side media query support for legacy browsers.

Sandbox

Sandbox: https://drupal.org/sandbox/jnpwebdeveloper/2203845
GIT:
git clone --branch 7.x-1.x http://git.drupal.org/sandbox/jnpwebdeveloper/2203845 media_query_fallback

Overview

The module generates the CSS from the media queries that match a specific width and provides it as a conditional IE stylesheet.

Currently the module provides support for IE8. IE7 is targeted but has not been fully tested.

You can specify a set width, which the legacy browser should be displayed in.

The CSS files are parsed and any media queries matching the breakpoint are extracted and provided as a conditional stylesheet for <= IE8.

Compatible with, Aggregation, Less and the CDN module.

Benefits

  • True Mobile First CSS
  • Fast Performance
  • Fixed Breakpoint for <= IE8
  • Dev Mode to check for CSS modifications and recreate CSS
  • Tested & Compatible with CDN, CSS Aggregation and LESS

Sponsors

This module is proudly sponsored by Comic Relief.

Installation

Simply enable the module, then enable Media Query Fallback on the settings page /admin/config/development/mq_fallback

Ensure to clear your cache to make sure all media queries have been rebuilt.

Alternatives & Reasoning Behind the Module

The alternative to this module is to use Respond.js. However, there are considerable drawbacks with using this option as CSS is parsed on the fly by the browser itself. CSS is loaded via an additional AJAX request and then parsed to extract the relevant styles using a Match Media polyfill. Delay in displaying the responsive version of a site is especially slow in conjunction with CDN. In this case you need some workarounds for cross-domain communication.

Overall, in our case we have lots of CSS that is aggregated. Performance on older browsers with Respond.js was very slow. Essentially you are offloading the extraction of that CSS onto the clients side. This option allows you to build a mobile first website and provide a specific breakpoint to older versions of IE that do not support media queries out of the box.

References:
https://github.com/scottjehl/Respond
https://github.com/scottjehl/Respond#cdnx-domain-setup
https://drupal.org/project/respondjs

Comments

jnpwebdeveloper’s picture

jnpwebdeveloper CreditAttribution: jnpwebdeveloper commented
Issue summary: View changes
PA robot’s picture

PA robot CreditAttribution: PA robot commented

We are currently quite busy with all the project applications and we prefer projects with a review bonus. Please help reviewing and put yourself on the high priority list, then we will take a look at your project right away :-)

Also, you should get your friends, colleagues or other community members involved to review this application. Let them go through the review checklist and post a comment that sets this issue to "needs work" (they found some problems with the project) or "reviewed & tested by the community" (they found no major flaws).

I'm a robot and this is an automated message from Project Applications Scraper.

GoRoost’s picture

GoRoost CreditAttribution: GoRoost commented

This project sounds really cool.

Everything appears as stated and checks out.

PAReview comes back all clear! ( http://pareview.sh/pareview/httpgitdrupalorgsandboxjnpwebdeveloper2203845 )

Can't wait for release.

chtombleson’s picture

chtombleson CreditAttribution: chtombleson commented

I hate to be picky but you have some really long lines in some of files. Try to keep lines to 80 characters if possible.

jschoen1’s picture

jschoen1 CreditAttribution: jschoen1 commented

Everything looks pretty good to me!

1 line did jump out at me as far as readability goes:
in mq_fallback.admin.inc, on line 42
if ($form_state['values']['mq_fallback_breakpoint_width'] == '' || !is_numeric($form_state['values']['mq_fallback_breakpoint_width']))

I think it would be better to assign the value of $form_state['values']['mq_fallback_breakpoint_width'] to a variable and then use that variable in the comparisons.
Would make the whole thing easier to read, and also fewer things to change if you ever rename that array element.

longwave’s picture

longwave
he/him
Primary language English
Location UK
CreditAttribution: longwave commented
Status: Needs review » Reviewed & tested by the community

I don't see any problems with this and consider it suitable for release.

heddn’s picture

heddn
Primary language English
Location Nicaragua
CreditAttribution: heddn commented
Status: Reviewed & tested by the community » Needs work

Consider using hook_module_implements_alter() rather than adjusting system weights (in install file).

PA robot’s picture

PA robot CreditAttribution: PA robot commented
Status: Needs work » Closed (won't fix)

Closing due to lack of activity. If you are still working on this application, you should fix all known problems and then set the status to "Needs review". (See also the project application workflow).

I'm a robot and this is an automated message from Project Applications Scraper.