2021 年の Chrome Dev Summit での重要な発表のまとめと、詳細を確認するためのリンク。
この投稿では、2021 年の Chrome Dev Summit での重要な発表をすべてまとめ、詳細を確認できるリンクをまとめています。
ウェブの相互運用性を高める
ウェブの互換性は、ウェブ デベロッパーにとって最大の課題の一つです。Google は、他のブラウザ ベンダーと協力して、Flexbox、grid、position: sticky、aspect-ratio、transformsの上位 5 つの互換性の問題の修正に取り組んできました。
この取り組みはすでに、これらの重要な分野での改善につながっています。 詳しくは、Compat 2021 年半ばのアップデートをご覧ください。
新しいクラスのアプリケーションをウェブで実行できるようにする
Project Fugu は、新しいクラスのアプリケーションをウェブで利用できるようにすることを目的とした取り組みです。 Fugu API に関する最新情報は、fugu-tracker.web.app でご確認いただけます。
Adobe は最近、Photoshop のウェブ展開を発表しました。これは、Adobe、Google、ウェブ標準化団体が共同で実現したものです。詳しくは、Photoshop のウェブへの移行の記事をご覧ください。
プライバシーを確保する
一般的なウェブ機能の多くは、サードパーティ Cookie や他のクロスサイト トラッキング メカニズムに依存していますが、これらはプライバシーを重視して設計されていません。そのため、デベロッパーのプライバシーに対するニーズの高まりに応えることは困難です。
Google は、ウェブ コミュニティや業界の関係者と協力して、サードパーティ Cookie を段階的に廃止し、隠れたトラッキングやブラウザ フィンガープリントを削減することを目指し、新しいプライバシー保護技術を開発してエコシステムをサポートしています。
この取り組みについて詳しくは、プライバシー サンドボックスのサイトをご覧ください。 また、デベロッパー向けの提案に関する情報やガイド、月次の更新または変更と進捗状況、ユーザー エージェント文字列の変更に関するタイムラインとテストの詳細に関する情報も掲載しています。
Core Web Vitals の改善
Google は、一般的な JavaScript フレームワークのデベロッパーと協力して Core Web Vitals の改善に取り組んできました。その一環として、フィードバックをお願いする 2 つの新しい指標を特定しました。全体的な応答性とスムーズさをお読みになり、ご意見、ご感想をお寄せください。
また、PageSpeed Insights の更新版（現在 Canary で利用できる新しい Chrome DevTools のレコーダー パネル）と、新しい Lighthouse のユーザーフロー API も発表されました。
新しいウェブ プラットフォーム機能を有効にする
RenderingNG は、Chromium のレンダリング エンジンの野心的なリファクタリングであり、Chrome の長年のバグを修正し、新機能も利用できるようにするプロジェクトです。その一つであるコンテナクエリは、ウェブ デベロッパーの皆様から長年にわたり最もご要望の多かった機能です。
コンテナクエリは、メディアクエリを使用してレスポンシブ デザインを作成したことがある人なら誰もが見覚えがあるでしょう。ただし、ビューポート サイズのクエリでは、コンポーネントが存在するコンテナのサイズをクエリできます。Google は、Chrome の #enable-container-queries フラグの背後で、新しい仕様の試用実装に取り組んでいます。
RenderingNG の詳細に関するブログ投稿や、こちらの動画では、以前は不可能だと考えられていた機能の実装がこの作業によってどのように実現されているのかをご確認いただけます。
美しくレスポンシブなサイトの作成をサポート
新しいレスポンシブ デザインは、単なる画面（コンテナ）サイズ以上のものです。 最新のレスポンシブ サイトを作成する方法については、デザインについて学ぶのコースをご覧ください。本日最初の 5 つのモジュールがリリースされ、残りは数週間かけて投稿されます。
今年 Chrome やその他のブラウザに新しい CSS プロパティが追加され、美しいエクスペリエンスを簡単に作成できるようになりました。
accent-color と size-adjust の詳細をご覧ください。
新しい CSS をすばやく活用できるように、一連のレイアウト パターンをリリースしました。これらは、多くの一般的なインターフェース パターンを作成するための堅牢な出発点となります。
ウェブ テクノロジーの学習に役立つコースを提供
デザインを学ぶだけでなく、今年の初めに開始した包括的な CSS コースである CSS について学ぶという新しいモジュールもリリースします。
また、機能的で使いやすいフォームの設計に役立つ完全なコース（Learn Forms）も開発しました。 これらのコースに加えて、PWA について学ぶの最初の数個のモジュールがあります。