Modernizr — это пакет, который обнаруживает функции браузера и делает их доступными для запросов с помощью JavaScript и CSS. Это очень удобно, например, чтобы узнать, какие свойства CSS поддерживаются. Подход гораздо более гибкий и стабильный, чем использование для этого поставщика и версии браузера. Я написал модуль, позволяющий использовать Modernizr с Nuxt.js.
Использование Modernizr с Nuxt.js
Modernizr использует архитектуру на основе плагинов, и вам нужно собрать пакет самостоятельно, в зависимости от функций, которые вам нужно обнаружить — по крайней мере, если вы не используете Nuxt.js! Я создал модуль nuxt-modernizr, который упрощает добавление Modernizr в ваше приложение Nuxt.js. Вы передаете функции в качестве параметров модуля, и модуль создает сборку Modernizr и помещает ее в папку .nuxt. Вот как это настроить:
Сначала установите модуль через npm install nuxt-modernizr или yarn add nuxt-modernizr.
Затем в своем nuxt.config.js добавьте модуль и передайте параметры, которые должны быть переданы в Modernizr:
Подробности смотрите в Документации Modernizr.
Теперь мы можем использовать переменную Modernizr и сгенерированные классы CSS в корневом элементе HTML для проверки функций браузера. Моим фаворитом среди функций браузера на все времена являются полосы прокрутки CSS, потому что поддержка в разных браузерах сильно различается, и в зависимости от того, доступны ли они, вы можете настроить размеры контейнеров и стилизовать их или нет.
Вывод
Это уже было! Использование довольно простое. Дайте мне знать, если вы найдете это полезным или есть какие-то вещи, которые вам не хватает. Также, если вы сочтете это полезным, оставьте звезду GitHub на репозиторий.
Если вам нравится то, что я делаю, подпишитесь на меня в Твиттере или загляните на мой веб-сайт. Также рассмотрите возможность пожертвования на Купи мне кофе, PayPal или Patreon. Большое спасибо! ❤️
Первоначально опубликовано на sebastianlandwehr.com
Дополнительные материалы на plainenglish.io
