NuxtによるModernizrの使用ブラウザの機能を検出する

Modernizrとは
Modernizr ブラウザ機能を検出し、JavaScriptとCSS経由で問い合わせ可能なパッケージです.これは、どのCSSプロパティがサポートされているかを調べるのに非常に便利です.このアプローチはブラウザのベンダーとバージョンを使用するよりはるかに柔軟で安定しています.私はNuxtでModernizrを使用することができるモジュールを書いた.js

NuxtによるModernizrの使用js
Modernizrは、プラグインベースのアーキテクチャを使用して、あなたがNXTを使用していない場合、少なくとも検出する必要がある機能に応じて、パッケージを自分自身を構築する必要があります.js!私はnuxt-modernizr モジュールをNuxtにModernizrを追加しやすくします.jsアプリ.モジュールオプションとして機能を渡し、モジュールはModernizrビルドを作成し、.nuxt フォルダ.設定方法
まず、モジュールをインストールしますnpm install nuxt-modernizr or yarn add nuxt-modernizr .
では、nuxt.config.js , モジュールを追加し、モダニズムに渡すべきオプションを渡します:

export default {
  modules: [
    ['nuxt-modernizr', {
      'feature-detects': ['css/scrollbars', 'css/overflow-scrolling'],
      options: ['setClasses'],
    }],
  ],
}

チェックアウトModernizr documentation 詳細は
今、我々はModernizr ブラウザの機能をチェックするHTMLルート要素の変数と生成されたCSSクラス.ブラウザの機能の中で私のすべてのお気に入りは、CSSのスクロールバーは、サポートがブラウザの間でかなり異なっているので、彼らが利用可能であるかどうかに応じて、あなたはコンテナのサイズとスタイルを調整することができますかどうか.

if (Modernizr.cssscrollbar) {
  // CSS scrollbar support
}

html.cssscrollbar {
  /* CSS scrollbar support */
}

結論
それは既にだった!使い方はかなり簡単です.あなたがそれが役に立つか、あなたが行方不明である何かがあるならば、私に知らせてください.また、あなたがそれを役に立つならば、Aを残してくださいGitHub star on the repository .
あなたが私がしていることが好きであるならば、私について来てくださいwebsite . また、寄付を考慮Buy Me a Coffee , PayPal or Patreon . ありがとうございます!❤️