公開日: 2024 年 10 月 23 日
この投稿では、ウェブ プラットフォームの機能について記述したり説明したりする際に、新しい <baseline-status> ウェブ コンポーネントを独自のサイトで使用する方法と、プレゼンテーションで Baseline ロゴを使用する方法について説明します。
ウェブ開発の問題の解決策を探し、完璧な解決策を説明する記事を見つけたものの、最後にその解決策が 1 つのブラウザでのみ利用可能であることに気づいた経験は、ほとんどのデベロッパーにあるでしょう。会議のプレゼンターが説明している機能に興奮して、後でそれが試験運用中であることを知ることもあります。Chrome デベロッパー サイトでは、この点を改善したいと考えていました。そこで、過去 2 年間にわたり、MDN の互換性データを投稿に追加してきました。
ただし、ベースラインを使用すると、さらに明確になります。個々のブラウザのバージョンを確認するのではなく、機能が Baseline Widely で利用可能かどうかを確認することで、安心して使用できるかどうかを判断できます。または、Baseline で新たに利用可能になったため相互運用可能だが、新機能であるためフォールバック戦略を検討する必要があることを知ることもできます。web.dev では、一部のページに新しい Baseline ステータス コンポーネントを追加し始めています。CSS font-size-adjust に関するブログ投稿で確認できます。
サイトにコンポーネントを追加する
ウェブ コンポーネントは、Google だけでなく、<baseline-status> コンポーネントをご紹介します。これは、作成したコンテンツのベースライン ステータスを表示するために使用できます。このコンポーネントは、npm からインストールすることも、CDN からプリコンパイルすることもできます。インストール手順をご覧ください。インストールが完了したら、次の font-size-adjust の HTML に示すように、機能のステータスを表示します。
<baseline-status featureId="font-size-ad><just"/basel>ine-status
コンポーネントは、機能が限定提供から新機能、広範囲提供へと移行するにつれて自動的に更新されます。
featureId を探す
コンポーネントに渡される featureId は、web-features リポジトリ内の機能の名前です。コンポーネントは、ウェブ機能プロジェクトを通じて収集されたデータから機能のステータスを取得します。
ベースラインのロゴを追加する
印刷物や PDF で公開する場合、または会議で発表する場合は、その時点でのステータスを示すロゴが役立つ可能性があります。ウェブ プラットフォームのステータス ダッシュボードを使用すると、任意の機能のベースライン ステータスを確認できます。
Baseline ロゴは、すべての資料で使用できるようにライセンスが付与されています。PNG 形式と SVG 形式でダウンロードしてください。
Baseline の使用場所をお知らせください
Baseline の使用状況を把握したいと考えています。PR を作成し、Baseline in the wild で使用した場所へのリンクを追加します。
他に統合のアイデアはありますか？
Baseline を他の方法で統合するアイデアはありますか？この情報を含めることができるデベロッパー ツールや、管理パネルで使用されているベースライン バージョンを共有できることでメリットが得られるプロダクトがあるかもしれません。アイデアに関する問題を報告する。