公開日: 2024 年 10 月 23 日
この記事では、ウェブ プラットフォームの機能について記述または説明する際に、独自のサイトで新しい <baseline-status> ウェブ コンポーネントを使用し、プレゼンテーションでベースラインのロゴを使用する方法について説明します。
ほとんどのデベロッパーは、ウェブ開発の問題の解決策を検索し、完璧な解決策を説明する記事を探し、最後にその解決策が 1 つのブラウザでのみ利用可能であることに気付いた経験があります。または、カンファレンスのプレゼンターが説明している機能に期待して、試験運用版であることを知ることもあります。この点については、Chrome デベロッパー サイトを改善したいと考えていました。この 2 年間、MDN の互換データを投稿に追加してきました。
ベースラインを使用すると、さらに明確になります。個々のブラウザ バージョンを確認するのではなく、ベースラインで広く利用可能であるため、安心して使用できるかどうかを確認できます。または、ベースラインが新たに利用可能で相互運用可能であることがわかりますが、新機能としてフォールバック戦略を検討することをおすすめします。web.dev では、一部のページに新しいベースライン ステータス コンポーネントを追加し始めました。これは、CSS font-size-adjust に関するブログ投稿で確認できます。
コンポーネントをサイトに追加する
ウェブ コンポーネントは、使うだけのものではありません。<baseline-status> コンポーネントを皆様と共有できることを嬉しく思います。作成したコンテンツのベースライン ステータスを表示するために使用できます。コンポーネントは npm からインストールすることも、CDN から事前コンパイルすることもできます。インストール手順をご覧ください。インストール後、font-size-adjust について次の HTML のように機能のステータスを表示します。
<baseline-status featureId="font-size-adjust"></baseline-status>
機能が「限定公開」から「新規公開」に移行し、さらに「ワイドライン公開」になると、コンポーネントが自動的に更新されます。
featureId を見つける
コンポーネントに渡される featureId は、web-features リポジトリ内の特徴の名前です。このコンポーネントは、ウェブ特徴プロジェクトで収集されたデータから対象物のステータスを取得します。
ベースラインのロゴを追加する
印刷物や PDF で公開する場合や、会議でプレゼンテーションを行う場合は、その時点でのステータスを示すためにロゴが役立ちます。ウェブ プラットフォームのステータス ダッシュボードでは、任意の機能のベースライン ステータスを確認できます。
ベースラインのロゴは、すべての資料で使用できるライセンス付きです。PNG 形式と SVG 形式でダウンロードできます。
ベースラインを使用する場所をお知らせください
ベースラインが使用されている場所をぜひ教えてください。PR を作成し、実際の環境のベースラインで使用した場所へのリンクを追加します。
他にも統合のアイデアはありますか？
他の方法で Baseline を統合するためのアイデアはありますか？ たとえば、この情報を含めることができるデベロッパー ツールや、管理パネルで使用されるベースライン バージョンを共有することでメリットが得られるプロダクトがあるとします。アイデアに関する問題を報告してください。サポートさせていただきます。