Я только что обнаружил, что последний основной выпуск Modernizr больше не включает yepnope.js, чтобы помочь вам с простой условной загрузкой полифилов.
Некоторое время я использовал Enquire.js для обработки медиа-запросов для JS. Я люблю это! Это просто. Оно работает. Это значительно упрощает реализацию некоторых сложных адаптивных дизайнов.
Аналитика для сайтов, с которыми я ранее использовал Inquire, отражала модные и современные демографические данные, которые не требовали особой поддержки устаревших браузеров (API matchMedia, используемый Inquire, не поддерживается в некоторых старых браузерах). Но недавно я устроился на новую работу, где для миссии организации важно обеспечить как можно больше функций для старых браузеров (согласно нашей аналитике, существует значительное количество пользователей IE 8).
Я следовал инструкциям Enquire по «глубокой поддержке устаревших браузеров», загрузив Modernizr, полифилл media-match для поддержки обратно в IE6, и несколько строк кода для Modernizr, чтобы привести полифилл в действие, ааааа… ничего! Не работает. В StackOverflow на самом деле ничего не было (что я с тех пор пытался исправить). Документы на Modernizr напрямую не ссылаются на изменение. Наконец-то я понял, что скрипт Yepnope.js, использовавшийся и включенный ранее в Modernizr, устарел с выпуском версии 3. Так что это отстой: Yepnope упростил загрузку файла JavaScript (ВИДИМОСТЬ, но я никогда не узнаю) . И Enquire.js необходимо обновить свои документы.
Документы Modernizr не дают очевидного решения для тех, чьи навыки JS и jQuery ограничены. Некоторое гугление привело меня к сообщению Дэвида Уолша о методе jQuery getScript, и я собрал решение. Я понял, что может быть полезно разместить эту информацию для кого-то вроде меня, ищущего способ загрузки полифиллов с помощью Modernizr, который ранее полагался или полагался бы на часть уравнения Yepnope.
Итак, вот оно:
Шаг 1: Модернизр и jQuery.
Включите Скачать сборку Modernizr с необходимыми тестами и загрузите ее. В моем случае это будет просто матчмедиа. Вам также понадобится jQuery.
Шаг 2: Напишите оператор if для своего теста.
//check if the browser supports your test if (Modernizr.matchmedia){ //if it does: do something console.log(‘Survey says: New Browser’); } else { //if it doesn’t: do something else console.log(‘Survey says: Stanky Old Browser’); }
Шаг 3: Проверьте это. Если это работает: загрузите свой полифилл с помощью метода jQuery getScript вместо того, чтобы печатать нахальное сообщение журнала консоли.
if (Modernizr.matchmedia){ //test matched, don't do anything console.log(‘Nice Browser!’); } else { //oh no old browser: load polyfill jQuery.getScript("/path/to/script") .done(function() { console.log('Script Loaded!'); }) .fail(function() { console.log('Script Did Not Load!'); }); }
Шаг 4: Запустите компьютер бабушки и протестируйте его в IE6.
Вот и все! Я надеюсь, что это помогает кому-то!