Ie8 support for CSS Media Query

Drive performance: Drop @import

For a smooth performance ride in IE8, drop @import out of the trunk. Using <link> is like the autobahn — way faster:

<link rel="stylesheet" href="styles.css">
<!-- @import, we never liked you anyway -->


Overcoming polyfill limitations

While Respond.js handles min-width and max-width, css3-mediaqueries-js gives broader support but stumbles over @imported hurdles. Know your racing track!

Mastering conditional comments

Embrace conditional comments as your secret weapon for IE-specific styles. Like a superhero's costume, they give you the deep cover you need:

<!--[if lt IE 9]>
  <link rel="stylesheet" href="ie8-and-down.css">
  <!-- Just our secret handshake, move along... -->
<![endif]-->


Keep it simple, developer

Use simple media queries for enhanced compatibility. Like ordering a pizza with just cheese, sometimes fancy toppings (@import, complex combinations) just spoil the pie.

Going native might be your lifesaver

While polyfills bring media query support, they might cause glitches due to added overhead. It's good to have a lifejacket, so consider using native scripting for adaptive styles:

if (window.innerWidth < 768) {
  document.documentElement.className += ' mobile';
  // I feel a change coming... Let's embrace mobile!
}


Ensuring cross-browser consistency

It's a jungle out there, fight cross-browser inconsistencies with Modernizr. It's like a Swiss army knife, helping you detect features and load necessary polyfills.

It's always about the right plugin

Choose the right plugin carefully. A simple trip to their project pages for the latest updates and community reviews might save you from walking into a trap.

Inline the army of media queries

Increase performance and ensure better compatibility by inlining your media queries in the main stylesheet. It's like launching all your tanks at once, reducing HTTP calls and potential failures.