IE8 и проблема поддержки CSS Media Query: решение

Быстрый ответ

Для того чтобы IE8 корректно обрабатывал медиа-запросы, используйте Respond.js. Данный скрипт позволяет IE8 интерпретировать медиа-запросы наравне с более современными браузерами.

Внедрение Respond.js в ваши стили выглядит так:

<link rel="stylesheet" href="styles.css">
<!-- Подключаем и готово! -->
<script src="respond.min.js"></script>

Важно: положите respond.min.js на тот же домен и поместите его после всех CSS-файлов для идеальной работы.

Ускоряем производительность: отказываемся от @import

Для повышения производительности в IE8 рекомендуется отказаться от @import. Использование <link> помогает ускорить загрузку стилей:

<link rel="stylesheet" href="styles.css">
<!-- Время @import уже прошло -->

Преодолеваем ограничения полифиллов

Respond.js блестяще справляется с min-width и max-width, но если вам требуется более всесторонняя поддержка, обратите внимание на css3-mediaqueries-js. Запомните лишь, что он не работает с подключением стилей через @import.

Освоение условных комментариев

Условные комментарии помогут вам реализовать стили, специфичные для IE. Они незаметны для других браузеров и функционируют как невидимый плащ:

<!--[if lt IE 9]>
  <link rel="stylesheet" href="ie8-and-down.css">
  <!-- Этот комментарий только для старых IE, остальным он не нужен -->
<![endif]-->

Сохраняем всё простым, разработчик

Для обеспечения лучшей совместимости стоит применять простые медиа-запросы. Иногда простота — это ключ к успеху, подобно пицце только с сыром — без лишних добавок.

Нативное скриптование может вас спасти

Полифиллы действительно решают проблему медиа-запросов, но при этом могут увеличивать нагрузку. Удачной альтернативой может стать использование нативного JavaScript для адаптивных стилей:

if (window.innerWidth < 768) {
  document.documentElement.className += ' mobile';
  // Чувствую перемены, давайте переходим на мобильные устройства!
}

Визуализация

Считайте IE8 старым телевизором, который не способен вещать HD-каналы (Media Queries).

Решение? Подключаем к нему современное устройство (css3-mediaqueries.js или Respond.js).

Такова наша схема:

Старый телевизор (IE8) + дополнительный прибор (Polyfill) 📺+📡 = HD-каналы (Адаптивный дизайн)

Благодаря этому дополнительному устройству устаревшая техника может интерпретировать сигналы в формате современной цифровой трансляции!

Обеспечение однообразия в различных браузерах

В борьбе с несоответствиями между браузерами незаменимым помощником станет Modernizr. Эта утилита позволяет определить доступные функции и подгружать требуемые полифиллы – настоящий универсальный инструментарий.

Выбор правильного плагина – дело ответственное

Выбирайте нужный плагин обдуманно. Прежде чем принять решение, посетите страницы проектов и изучите последние обновления и отзывы сообщества.

Встраиваем войско медиа-запросов

Для ускорения производительности и улучшения совместимости, встроите медиа-запросы прямо в основные стили. Это уменьшит количество HTTP-запросов и потенциальные ошибки, как будто вы ведете штурм проблемы всей армией сразу.

Полезные материалы

1. CSS Media Queries — Ваш спутник в мире адаптивного дизайна.
2. GitHub – scottjehl/Respond: A fast & lightweight polyfill for min/max-width CSS3 Media Queries — Ваш вход в мир медиа-запросов для IE 6-8.
3. Can I use... Support tables for HTML5, CSS3, etc — Полное руководство по поддержке медиа-запросов в CSS.
4. CSS Media Queries & Using Available Space | CSS-Tricks — Советы экспертов по применению медиа-запросов.
5. GitHub – aFarkas/html5shiv: This script is the defacto way to enable use of HTML5 sectioning elements — Ключ к использованию элементов HTML5 в более ранних версиях IE.
6. Using media queries – CSS: Cascading Style Sheets | MDN — Руководство от Mozilla по медиа-запросам.
7. Modernizr: the feature detection library for HTML5/CSS3 — Универсальный набор инструментов для определения поддержки функций браузером.