お久しぶりです。 「Chrome の新機能」動画が復活しました。以下の内容について説明しています。
- CSS text-box: フォント メトリックを使用して垂直方向のスペースを正確に制御できます。
- Android とウェブビューでサポートされるようになったファイル システム アクセス API。
moveBeforeを使用した状態を保持した DOM 要素の移動方法。<dialog>要素にライト閉じるが適用されます。- また、ベースラインなどにも多くの更新が加えられています。
Mariko と申します。過去 3 回のリリースで Chrome に追加された新機能について、詳しく見てみましょう。
CSS テキスト ボックス
CSS text-box プロパティを使用すると、フォント メトリックを使用して縦方向のスペースを正確に制御できます。
フォントによって文字の上下に配置されるスペースの量が異なるため、要素のサイズが決まります。
これまで、これらのスペースのサイズを制御することはできませんでした。
新しい text-box-trim プロパティは、トリミングする側（上または下）を指定し、text-box-edge プロパティはトリミング方法を指定します。たとえば、大文字の上部であるキャップ ハイトでトリミングします。
ショートカット text-box プロパティを使用して記述することもできます。
これらの新しいプロパティの使用方法について詳しくは、CSS text-box-trim の記事をご覧ください。
File System Access API
Chrome 133 で追加された DOM プリミティブ Node.prototype.moveBefore を使用すると、要素の状態をリセットせずに、DOM ツリー内で要素を移動できます。
DOM 要素を移動するために要素を削除してから再挿入すると、その要素の状態がリセットされます。この新しいプリミティブを使用すると、ノードの状態が保持されます。
そのため、iframe は読み込まれたままになり、アクティブな要素はフォーカスされたままになり、ポップオーバーやダイアログなどは開いたままになり、CSS の遷移やアニメーションは続行されます。
状態を保持したまま DOM 要素を移動する方法
File System Access API は、Chrome デスクトップでしばらく前から利用可能になっています。この API を使用すると、ウェブアプリはユーザーのローカル ファイル システム上のファイルを操作できます。Chrome 132 以降では、Android と WebView でもこの API を使用できます。
ファイルを読み取るには、showOpenFilePicker() を呼び出します。このメソッドは、ファイル選択ツールを表示し、ファイルを読み取るために使用できるファイルハンドルを返します。
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
ファイルをディスクに保存するには、先ほど取得したファイル ハンドルを使用するか、showSaveFilePicker() を呼び出して新しいファイル ハンドルを取得します。
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
<dialog> 要素にライト ディスミッションが表示される
Popover API を使用してポップオーバーを作成したことがあれば、Popover API の優れた機能の 1 つが軽い閉じる動作であることはご存じでしょう。ユーザーが背景をクリックすると、閉じるボタンを押さなくてもポップオーバー要素が閉じます。
このライトの閉じる機能は、<dialog> 要素でもサポートされるようになりました。
closedby 属性を any に設定すると、ダイアログの外側をクリックするか、Esc キーを押すことでダイアログを閉じることができます。
<dialog closedby="any">...</dialog>
これは、ポップオーバーが自動に設定されている場合と同じ動作です。
ベースラインの更新
ベースラインに関する最新情報
ベースライン（新規に利用可能）
まず、ベースライン。これは最近、4 つの主要ブラウザすべてでリリースされた機能です。
scrollbar-gutter、scrollbar-width
scrollbar-gutter CSS プロパティを使用すると、スクロールバーのスペースを予約して、スクロールバーの表示や非表示時に不要なレイアウト変更を回避できます。scrollbar-width を使用すると、スクロールバーを狭くしたり、スクロール機能に影響を与えることなくスクロールバーを完全に非表示にしたりできます。
ruby-align
ruby-align CSS プロパティを使用すると、ルビのベーステキストとルビ アノテーション テキストの配置を指定できます。
Promise.try
Promise.try は、同期リクエストのエラー処理を行うための便利なメソッドです。これにより、Promise.resolve でリクエストしようとするときにコールバック関数を排除できます。
Wasm ガベージ コレクションとテール呼び出しの最適化
WebAssembly でガベージ コレクションとテール呼び出しの最適化がサポートされるようになりました。
ベースライン 一般提供
配列 findLast() と findLastIndex()
配列の findLast() と findLastIndex() は、配列の末尾からアイテムを取得するのに非常に便利なメソッドです。この機能は、すべての主要ブラウザで 30 か月間サポートされているため、ベースラインとして広く利用可能になりました。
個々の変換プロパティ
CSS 変換をきめ細かく制御できる個々の変換プロパティも、ベースラインで幅広く利用可能になりました。
ベースラインの詳細
ベースラインと「新規」と「幅広く利用可能」の違いについて詳しくは、私が作成したショート動画をご覧ください。
機能のベースライン ステータスの詳細については、ウェブ プラットフォームのステータス ダッシュボードでも確認できます。
相互運用性強化プロジェクトが 2025 年に再開
最後に、相互運用プロジェクトが 2025 年に復活し、ビューの遷移、CSS アンカーの配置、Navigation API などの重点分野のリストが提示されます。プロジェクトのお知らせもぜひご覧ください。
登録
最新情報を入手するには、Chrome Developers の YouTube チャンネルにチャンネル登録してください。新しい動画が公開されるとメール通知が届きます。
担当の Mariko Kosaka でした。3 か月後に、Chrome の新機能について詳しくお伝えします。