Respond

Ответить.js

Быстрый и легкий полифил для медиа-запросов CSS3 минимальной/максимальной ширины (для IE 6–8 и более).

• Авторские права 2011: Скотт Джел, scottjehl.com

• Лицензировано по лицензии MIT.

Цель этого сценария — предоставить быстрый и легкий (минимизированный 3 КБ / сжатый 1 КБ) сценарий для обеспечения адаптивного веб-дизайна в браузерах, которые не поддерживают медиа-запросы CSS3, в частности в Internet Explorer 8 и более ранних версиях. Он написан таким образом, что, вероятно, будет исправлена ​​поддержка и для других не поддерживающих браузеров (подробнее об этом скоро).

Если вы не знакомы с концепциями адаптивного веб-дизайна, вы можете прочитать здесь, а также здесь.

Демонстрационная страница (цвета меняются, чтобы показать работу медиа-запросов)

Инструкции по использованию

1. Создайте свой CSS с помощью медиа-запросов минимальной и максимальной ширины, чтобы адаптировать макет от мобильных устройств (сначала) до настольных компьютеров.

    @media screen and ( min-width : 480 px ){
        /** ...styles for 480px and up go here **/
    }

2. Ссылайтесь на скрипт response.min.js (1 КБ мин/gzip) после всего вашего CSS (чем раньше он запускается, тем больше вероятность, что пользователи IE не увидят вспышку немедийного контента).

3. Откройте Internet Explorer и в восторге сжимайте кулаки.

Настройка CDN/X-домена

Respond.js работает, запрашивая нетронутую копию вашего CSS через AJAX, поэтому, если вы размещаете свои таблицы стилей в CDN (или субдомене), вам нужно будет настроить локальный прокси-сервер для запроса CSS для старых браузеров IE. В предыдущих версиях рекомендовался устаревший подход с использованием x-домена, но локальный прокси-сервер предпочтительнее (по соображениям производительности и безопасности), чем попытка обойти междоменные ограничения.

Поддержка и предостережения

Некоторые примечания, которые следует иметь в виду:

• Цель этого сценария намеренно очень узкая: только медиа-запросы минимальной и максимальной ширины, а также все типы мультимедиа (экран, печать и т. д.) переводятся в неподдерживающие браузеры. Я хотел упростить задачу в отношении размера файла, обслуживания и производительности, поэтому я намеренно ограничил поддержку запросами, которые необходимы для создания адаптивного дизайна (в первую очередь для мобильных устройств). В будущем я, возможно, немного переработаю ситуацию, включив в нее возможность добавления дополнительных функций медиа-запросов — следите за обновлениями!

• Браузеры, которые изначально поддерживают медиа-запросы CSS3, не запускают этот скрипт как можно быстрее. При тестировании на поддержку все остальные браузеры подвергаются быстрой проверке, чтобы определить, поддерживают ли они медиа-запросы или нет, прежде чем приступить к запуску сценария. Этот тест теперь включен отдельно вверху и использует полифил window.matchMedia, который можно найти здесь: https://github.com/paulirish/matchMedia.js. Если вы уже включили этот полифилл через Modernizr или другим способом, смело удаляйте эту часть.

• Этот скрипт не опирается ни на какие другие скрипты или платформы (кроме включенного полифила matchMedia) и оптимизирован для мобильной доставки (общий размер файла ~1 КБ мин/gzip).

• Как вы могли догадаться, эта реализация довольно глупа с точки зрения правил синтаксического анализа CSS. Это хорошо, потому что позволяет ему работать очень быстро, но его расшатывание может также привести к неожиданному поведению. Например: если вы вкладываете в комментарий весь медиа-запрос, намереваясь отключить его правила, вы, вероятно, обнаружите, что эти правила в конечном итоге будут включены в браузерах, не поддерживающих медиа-запросы.

• Respond.js не анализирует CSS, на который ссылается @import, а также не работает с медиа-запросами внутри элементов стиля, поскольку эти стили нельзя повторно запросить для анализа.

• Из-за ограничений безопасности некоторые браузеры могут не разрешать этому сценарию работать с URL-адресами file:// (поскольку он использует xmlHttpRequest). Запустите его на веб-сервере.

• Если запрос файла CSS, включающего стили, специфичные для MQ, находится за перенаправлением, Respond.js завершится ошибкой без уведомления. Файлы CSS должны ответить статусом 200.

• В настоящее время медиа-атрибуты элементов ссылок поддерживаются, но только если связанная таблица стилей не содержит медиа-запросов. Если он содержит запросы, атрибут media будет игнорироваться, а внутренние запросы будут анализироваться обычным образом. Другими словами, операторы @media в CSS имеют приоритет.

• Сообщается, что если файлы CSS закодированы в UTF-8 с маркировкой порядка байтов (BOM), они не будут работать с Respond.js в IE7 или IE8. Отмечено в выпуске №97.

• ВНИМАНИЕ. Включение правил @font-face в медиа-запрос приведет к зависанию IE7 и IE8 во время загрузки. Чтобы обойти эту проблему, разместите правила @font-face широко открытыми, как родственные правила другим медиа-запросам.

• Если у вас есть ссылки на более чем 32 таблицы стилей, IE выдаст ошибку Invalid procedure call or argument . Объедините свой CSS, и проблема должна исчезнуть.

• Исходные карты Sass/SCSS не поддерживаются; @media -sass-debug-info нарушит ответ.js. Отмечено в выпуске № 148.

• Internet Explorer 9 поддерживает медиа-запросы css3, но не в рамках, когда CSS, содержащий медиа-запрос, находится во внешнем файле (похоже, это ошибка в IE9 — см. https://stackoverflow.com/questions/10316247/media-queries). -fail-inside-ie9-iframe). Если у вас возникла эта проблема, посмотрите этот коммит, чтобы узнать, как исправить эту проблему. https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603

• Вложенные медиа-запросы не поддерживаются.

Как это работает?

По сути, скрипт проходит через CSS, на который есть ссылка на странице, и запускает одно или два регулярных выражения для их содержимого, чтобы найти медиа-запросы и связанные с ними блоки CSS. В Internet Explorer содержимое таблицы стилей невозможно получить в предварительно проанализированном состоянии (что в IE 8 означает, что медиа-запросы удаляются из текста), поэтому Respond.js повторно запрашивает файлы CSS с помощью Ajax и анализирует текстовый ответ оттуда. Обязательно правильно настройте кеширование CSS-файлов, чтобы этот повторный запрос фактически не попадал на сервер, а вместо этого затрагивал кеш вашего браузера.

После этого каждый блок медиа-запроса по порядку добавляется к заголовку с помощью элементов стиля, и эти элементы стиля включаются и отключаются (читай: добавляются и удаляются из DOM) в зависимости от того, как их минимальная/максимальная ширина соотносится с шириной браузера. Атрибут media в элементах стиля будет соответствовать атрибуту запроса в CSS, поэтому это может быть «экран», «проектор» или что угодно. Любые относительные пути, содержащиеся в CSS, будут иметь префикс href их таблицы стилей, поэтому пути к изображениям будут вести к их правильному месту назначения.

Параметры API?

Конечно, парочка:

• ответить.update() : перезапустить парсер (полезно, если вы добавили на страницу таблицу стилей и ее необходимо перевести)
• response.mediaQueriesSupported: установите значение true, если браузер изначально поддерживает медиа-запросы.
• Response.getEmValue(): возвращает значение пикселя одного em.

Альтернативы этому скрипту

Это не единственный полифил-скрипт CSS3 Media Query; но, черт возьми, он может быть самым быстрым.

Если вам нужна более надежная поддержка CSS3 Media Query, вы можете проверить https://code.google.com/p/css3-mediaqueries-js/. При тестировании я обнаружил, что этот сценарий заметно медленнее отображает сложные адаптивные проекты (как по размеру файла, так и по производительности), но на самом деле он поддерживает гораздо больше функций медиа-запросов, чем этот сценарий. Большой совет авторам! :)