css3-mediaqueries-js failing with child theme

The author of css3-mediaqueries-js states the following via https://github.com/livingston/css3-mediaqueries-js:

Note: Doesn't work on @import'ed stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the `<link>` and `<style>` elements.

style.css via my child theme uses @import to bring across the parent theme stylesheet.

To overcome the problem, I am no longer loading the core CSS file from header.php in my parent theme. Instead, I am loading the CSS via functions.php:

<?php
// Register parent styles
wp_register_style( 'core-styles', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'all' );

// Enqueue parent styles
wp_enqueue_style( 'core-styles' );

// Register and enqueue styles if child theme
  if (is_child_theme()){
    wp_register_style( 'child-styles', get_stylesheet_directory_uri() . '/style.css', array(), '1.0.0', 'all' );
    wp_enqueue_style( 'child-styles' );
  }
?>

This code loads the parent CSS first and then the child CSS if a child theme exsists. This solution solves the media query issue in IE7/8.

Related Posts: