この変更が意味すること
Chrome 148 では CSS Container Queries の拡張やメディア要素の遅延読み込みなど、フロントエンド開発者にとって実用的な機能が多数追加されます。Firefox・Safari が先行実装済みの機能を Chromium が取り込むケースが中心で、クロスブラウザ互換性が大幅に改善されるマイルストーンです。
主な新機能
CSS Name-only Container Queries
container-name のみを指定して Container Queries を使えるようになります。従来は container-type: inline-size 等の設定が必須でしたが、この変更により名前ベースの参照だけで条件付きスタイルを適用できます。
デザインシステムやコンポーネントライブラリにおいて、コンテナの構造を意識せずにスタイルを切り替えられる点がメリットです。Firefox・Safari ともに実装済みで、Chrome の対応によりクロスブラウザ対応が完了します。
video / audio 要素の Lazy Loading
<video> と <audio> 要素に loading="lazy" 属性が追加されます。<img> や <iframe> と同じ仕組みで、ビューポートに近づくまでリソースの読み込みを遅延します。
メディアリッチなページでの初期読み込みパフォーマンスが改善されます。Intersection Observer を使った自前の遅延読み込みを簡素化できます。Firefox は Positive、Safari は Support のシグナルです。
Open Font Format avar2
Variable Fonts の avar2（Axis Variations テーブル v2）に対応します。従来の Variable Fonts は各軸が独立でしたが、avar2 では軸同士が相互に影響し合うデザインが可能になります。フォントデザイナーにとっては補間制御の精度が向上し、開発者にとってはより自然なバリエーション表現が利用可能になります。
Firefox・Safari ともに実装済み。
text-decoration-skip-ink: all
text-decoration-skip-ink プロパティに all 値が追加されます。既存の auto ではブラウザの判断でインクスキップが適用されますが、all では無条件にすべてのグリフに対してインクスキップを適用します。
日本語のルビや特殊文字でも一貫したテキスト装飾が実現できます。Firefox・Safari ともに実装済み。
Clip Text overflow on user interaction
text-overflow: ellipsis が適用されたテキストに対して、ユーザーが操作（編集やキャレット移動）すると一時的に clip に切り替わり、省略された部分のテキストにアクセスできるようになります。フォーム入力欄やコンテンツ編集可能な要素での UX が改善されます。
Firefox は実装済み。
Drag and Drop の dropEffect 修正
ドラッグ＆ドロップ API で dragEnter / dragOver / dragLeave イベントの dropEffect が仕様通りに設定されるようになります。Firefox・Safari ともに実装済みで、Chromium が仕様準拠に追いつく形です。
非推奨・削除
Chrome 148 での非推奨・削除機能はデータ上確認されていません。
開発者への影響
- Name-only Container Queries: 既存の
container-type指定はそのまま動作するため、新規コンポーネントから段階的に採用可能 - Lazy Loading for video/audio:
loading="lazy"属性を追加するだけで有効。未対応ブラウザでは属性が無視されるため、Progressive Enhancement として安全に導入できます - avar2: 対応フォントが必要。Google Fonts 等で avar2 対応フォントが提供されれば、追加の実装なしで改善が反映されます
- text-decoration-skip-ink: all: 既存の
autoからの変更は明示的に行う必要あり。多言語対応サイトでの活用を推奨
データソース: Chrome Platform Status AI解説は Claude API により自動生成されています。正確性については原文をご確認ください。