Chrome チームは、コミュニティからの懸念事項に対応しています。

エッジからエッジまでのウェブ エクスペリエンスを構築する

Android 版 Chrome は、Chrome 135 以降、エッジツーエッジ表示になります。

スクロール ドリブン アニメーションとスクロール トリガー アニメーションでストーリーテリング記事を強化する方法

カスタム プロパティを含む任意の CSS プロパティで attr() を使用できるようになりました。また、値を文字列以外のデータ型に解析できるようになりました。

Chrome DevRel チームとスケートボードに乗った Chrome Dino と一緒に、2024 年に Chrome とウェブ プラットフォーム向けにリリースされた最新の CSS を学びましょう。

Chrome 131 のリリースが開始されました。詳細要素の CSS スタイル設定の追加、ページ マージン ボックスによる印刷レイアウトの簡素化など、さまざまな機能が追加されています。

新しい ::details-content 疑似要素を使用して、表示タイプを設定したり、展開と閉じを切り替える部分のコンテナにスタイルを適用したりできるようになりました。

Chrome 130 のリリースが開始されました。ドキュメントのピクチャー イン ピクチャーでは、ピクチャー イン ピクチャー ウィンドウをより細かく制御できます。CSS ネスト宣言により、厄介なエッジケースを修正できます。また、複数行に分割された要素のデコレーションをどのように動作させるかを指定できます。Chrome 130 のデベロッパー向け新機能について、Pete LePage が詳しく説明しています。

シングルページ アプリケーションで使用する同一ドキュメントのビュー遷移を使ってみましょう。

「interpolate-size」と「calc-size()」を使用して、固有のサイズ設定キーワードとの間でアニメーション化する

新しい JavaScript イベントを 2 つ導入しました。scrollSnapChange と ScrollSnap 試験

View Transition API を検討する人が増えている今、いくつかの誤解を解くときが来ています。

Google I/O 2024 での CSS とウェブ UI に関するすべてのお知らせをお読みください。

MPA のドキュメント間のビュー遷移、アクティブ タイプによる選択的なビュー遷移、ビュー遷移クラスを使用したアニメーション スタイルの共有を発表しました。

Policybazaar、redBus、Tokopedia のスクロールドリブン アニメーションのメリットをご確認ください。

最新の CSS や UI 機能（ビュー遷移、スクロールドリブン アニメーション、Popover API など）を実装することで、e コマースサイトがどのように役立つかを学びます。

スクロールドリブン アニメーションのすべてを学ぶ、全 10 部の動画コースです

メーソンリーとグリッドを異なる仕様で定義するための提案。

マルチページ アプリケーション（MPA）で使用するために、ドキュメント間のビュー移行を開始します。

View Transition API を使用すると、ウェブサイトのビュー間の遷移を追加できます。

Chrome 122 以降、「::backdrop」要素は元の要素からプロパティを継承します。

スクロールバーのスタイルを設定するには、`scrollbar-width` プロパティと `scrollbar-color` プロパティを使用します。

同じ `name` を持つ複数の `` 要素で排他的なアコーディオンを作成します。

2023 年は CSS にとって大きな年でした。Chrome およびウェブ プラットフォームについて今年リリースされた内容をご確認ください。

@scope を使用して、DOM の限定されたサブツリー内の要素のみを選択する方法について学習します。

そこで linear() を導入しました。これは CSS のイージング関数で、ポイント間で線形に補間し、弾力効果やばね効果を再現できます。

Google I/O 2023 で取り上げられた、見逃せないトップ 20 の CSS と UI 機能。

スクロール タイムラインとビュー タイムラインを使用して、宣言型の方法でスクロールドリブン アニメーションを作成する方法を学習します。

CSS プリプロセッサのお気に入りの機能の 1 つであるネスト スタイル ルールが、言語に組み込まれています。

CSS ワーキング グループは、CSS でネストを定義する最適な方法について議論を続けています。CSS の開発に携わっている方は、ぜひご協力をお願いします。

Chrome 108 でのビューポートのサイズ変更動作の変更点、Chrome でこの変更が行われる理由、準備について。

Chrome 106 がリリースされました。新しい Intl API が追加され、数値の書式設定をより細かく制御できるようになりました。新しい Pop Up API のオリジン トライアルも用意されており、ユーザーに重要なコンテンツを簡単に提示できます。CSS にはいくつかの改良点が加えられています。他にもたくさんあります。

ここでは、バンドラ、フレームワーク、サードパーティのコードを操作する際のデバッグとプロファイリング エクスペリエンスを改善する Chrome DevTools の最近の変更を紹介します。

Chrome DevTools チームと Angular チームが協力して Angular をテスト試験運用し、デバッグ エクスペリエンスを向上させました。他のフレームワークでも同様の変更が可能です。

"カスケード レイヤは、コードのカスケード優先順位を管理できる新しい CSS API で、まもなくすべての最新ブラウザに導入されます。"

Chrome 89 がリリースされました。WebHID、WebNFC、Web Serial のオリジン トライアルを終了し、安定版で利用できるようになりました。数人のデベロッパーの方が PWA のインストール可否チェックで利用していた抜け道をなくします。Web Share と Web Share Target がデスクトップに届きます。ほかにも多数あります。

When multiple animations affect the same property simultaneously, should they replace each other, add, or accumulate?

Pre-filter a set of child elements before applying An+B logic on it.