web-featuresはWeb全体の機能の共通カタログを構築する取り組みです。
web-featuresのプロジェクトの1つにBaselineの制定があります(Baselineついて詳しく知りたい方はドキュメントを参照してください)。
BaselineはApple Safari、Google Chrome、Microsoft Edge、Mozila Firefoxの4つの主要なブラウザで動作するWebの機能に関する情報を提供するものです。
下の画像のようにMDNでWebの機能のページを開いたときに、青色で囲んだ部分に表示されているものです。
BaselineにはWidely AvailableとNewly Availableの2つの段階があります。また、Baselineにない機能の段階としてLimited Availableがあります。
Widely Availableは、Baselineのブラウザで一貫してサポートされてきた機能を指します。
Newly Availableは、少なくともBaselineのブラウザの最新版でサポートされた機能です。Newly Availableを示す際は多くの場合対応した年が共に添えられています。最新のブラウザ群では動作しますが、少し前のブラウザやデバイスでは機能しないこともあるので注意が必要です。
Limited Availableとなる機能はBaselineにはありません。Baselineの一部、もしくは全てのブラウザの最新版でサポートされていないことが多く、限定的に利用できます。
このようなBaselineのステータス(Limited Availableも含めます)を表すコンポーネントはWeb Componentとして提供されています。
使い方はnpmとしてインストールして組み込むか、CDNを読み込むかです。
npm install baseline-status
<script src="https://cdn.jsdelivr.net/npm/baseline-status@1/baseline-status.min.js" type="module"></script>
いずれかの準備ができたら、以下のようにbaseline-status要素として宣言することでBaselineのステータスを表示させられます。
<baseline-status featureId="async-await"></baseline-status>
featureIdは表示したいWebの機能のIDです。featureIdはweb-featuresのリポジトリ内のfeaturesから選択します。
以下が利用例です。
See the Pen baseline-status by KokiSakano (@kokisakano) on CodePen.
お手軽にWeb機能のベースラインのステータスを表示させられるので、便利ですよね。
Qiitaでも表示できるようになると、助かります🙏